Liman MYS'de Vue.js ve typescript Template i Kullanarak Eklenti Nasıl Yazılır

Eren Yeşiltepe — Tue, 26 Sep 2023 04:43:53 +0000

Bu eklentide kripto paralarla ilgili data dönen bir public API'den aldığımız datayı bir table üzerinde göstereceğiz.

Template de kullanacağımız kısımlar

*PHP ile backend kısmını yazabilmek için App/controllers klasörü

*TypeScript ile request atarken kullanacağımız PHP ile bağlanmak için kullanacağımız accountmanager/routes.php dosyası

*Frontend kısmında sayfalarımızı yazacağımız accountmanager/frontend/src/views/pages dosyası

*Yazdığımız dosyalar arasında gezebilmeyi sağlamak için accountmanager/frontend/src/views/layouts/Navigation.vue dosyası

*Vue sayfaları arasında gezinebilmemizi sağlayan accountmanager/frontend/src/router/index.ts dosyası

API linki:

https://api.coinstats.app/public/v1/coins?skip=0&limit=5&currency=EUR

Backend için request atacak fonksiyonun yazımı

Öncelikle API'ımıza request atabilmek için bir fonksiyon oluşturmamız gerekiyor. Bunun için ister App/Controllers altındaki bir controller ı kullanabilir isterseniz ise kendi controller'ınızı oluşturabilirsiniz.

Önce MyController.php adında bir controller oluşturuyoruz.Class'ı tanımlıyoruz ve içine fonksiyonu yazıyoruz.

class MyController
{
public function cryptorequest($currency="EUR")
    {
        $client = new \GuzzleHttp\Client(['verify' => 
                                          false]);

$res=$client->get("https://api.coinstats.app/public/v1/coins? 
   skip=0&limit=5&currency=$currency");
return ($res->getBody()->getContents());
    }
}

Fonksiyonun routes a eklenmesi

Bu adımda vue.js ile erişebilmek için fonksiyonumuzu routes a ekliyoruz.
routes.php ye gidip şu satırı ekliyoruz:

"cryptorequest"=>"MyController@cryptorequest"

burda ilk cryptorequest fonksiyonu çağırırken kullanacağımız ismi, ikinci cryptorequest ise MyController.php nin altındaki fonksiyonumuzu gösteriyor.

Sayfalar arasında geçebilmek için sayfanın index.ts e eklenmesi

Önce sayfamızı import etmemiz gerekiyor.
index.ts in en başına

import ApiTest from "@/views/pages/ApiTest.vue"

yazdıktan sonra routes arrayinin içine sayfamızı tanımlıyoruz. Ekleyeceğimiz kısım şu şekilde:

{
      path: "/apitest",
      name: "apitest",
      component: ApiTest,
},

Yazacağımız sayfaya UI üzerinde erişebilmemiz için Navigation.vue nun düzenlenmesi

Navigation.vue nun altında menuOptions adlı bir değişken var. Bu eklenti açıldığında üst kısımda gözüken sekmeleri temsil ediyor.
Sayfamızı orda görüntüleyebilmek için bu değişkenin içine aşağıdaki gibi sayfalarımızın bilgilerini girmeliyiz.

{
 label: () =>
   h(RouterLink, { to: "/apitest", exact: true }, 
                    t("navigation.apitest")),
                    key: "apitest",
                    show: can("approvals"),
   },

apitest index.ts içinde belirlediğim sayfamın değişken adı.

Sayfanın tasarlanması

Öncelikle accountmanager/frontend/src/views/pages in altına ApiTest.vue dosyası oluşturarak başlıyoruz. Biz TypeScript kullanacağımız için default templateimiz şöyle olacak:

<script setup lang="ts">
</script>
<template>

</template>

Temel Vue.js bilgisi için şu tutorialı takip edebilirsiniz:
https://vuejs.org/tutorial/#step-1

Import yapımı

    import http from "@/utils/http-common"
    import {ref} from "vue"

Inject yapabilmek için ref object tanımlanması

const components=ref()

burada components in değerine ulaşmak için .value yazmamız gerekiyor.

İlki PHP ye request atmamızı sağlayan fonksiyon
İkincisi ise template içine inject yapmamızı sağlayan obje

PHP ye request atmak

Request için şu fonksiyonu kullanıyoruz:

   http.php("cryptorequest")
    .then((res) => {
      if (res.status == 200) {
      //request başarılı ise
      }
      else{
       //request fail ise
      }
    })

Burada res request imizden dönen response oluyor ve status ve data olarak iki attribute u bulunuyor.

 if (res.status == 200) {
      components.value=res.data["coins"]
      }

şeklinde components değişkenimize respons datamızı yazıyoruz.

Template hazırlanması

Templatemiz HTML formatında kullanılıyor:

 <table>
      <tr>
            <td>ID</td>
            <td>Icon</td>
            <td>Name</td>
            <td>Symbol</td>
            <td>Rank</td>
      </tr>
      <tr v-for="component in components" 
                     :key="component['id']">
            <td>{{ component["id"] }}</td>
            <td><img :src="component['icon']"></td>
            <td>{{ component["name"] }}</td>
            <td>{{ component["symbol"] }}</td>
            <td>{{ component["rank"] }}</td>
        </tr>
    </table>

*Dataları doldurmak için bir table açıp başlıklar için manuel olarak bir tr oluşturuyoruz.

*Ardından v-for kullanarak (foreach gibi bir loop) her bir component için table bastırtıyoruz. Her komponentin bir key i olması gerekiyor.

{{}} ise placeholderımız oluyor. HTML elementlerinin içine istediğimiz değişkenleri yerleştirebiliriyoruz bu şekilde.

Son olarak aşağıdaki gibi style ekleyerek bitiriyoruz.

<style>
    table{
        border-collapse:collapse;
    }
    table td{
        border:2px solid black;
        padding:10px;
    }
    img{width:50px;}
</style>

Forem: Eren Yeşiltepe