DEV Community 👩‍💻👨‍💻

Koray Barkin
Koray Barkin

Posted on

Liman'da Eklenti Geliştirme

Bize tanımlanmış IP üzerinden Liman’a giriş yaptıktan sonra Sistem Ayarları sekmesine gelerek Eklentiler’i seçiniz. Eğer burada Yeni sekmesini görmüyorsanız Mert Çelen’in paylaştığı rehberden Eklenti Geliştirme Ortamı Kurulumunu yapmanız gerekmektedir.

Yeni butonuna basarak eklentinizin ismini girerek oluşturmaya başlayalım.

Eklentimizi geliştirmek için eklentiyi bir sunucuya atamamız gerekmektedir. Bu atamayı sol taraftan Sunucular sekmesine giderek yapabiliriz. Açılan ekranda + işaretine basıp eklemek istediğiniz sunucuyu seçiniz. (Eğer görünürde bir sunucunuz yoksa, ilk önce sunucu oluşturmanız gerekmektedir.)

Liman’da yapacağımız işlemler şimdilik bu kadar. Geliştirme ortamınız da hazırsa Visual Studio Code yardımı ile eklentimizi geliştirebiliriz.

Visual Studio Code’u açalım ve Remote SSH ile Liman sunucumuza bağlanalım. Bağlandıktan sonra sol üstten Open Folder diyerek /liman/extensions/ klasörüne gelip oluşturduğunuz eklentiyi seçiniz.

Açılan eklentide view klasörü altında bir functions.php ve bir tane de index.blade.php adında iki tane dosyamızın olduğunu göreceğiz. Şimdi, Liman sunucumuzdaki bilgileri ya da sizin bilgisayarınızın bileşenlerinin bilgilerini çektiğimiz bir eklenti yapabiliriz. Aşağıdaki kodu functions.php dosyasına yapıştıralım.

<?php
function index(){
    return view("index");
}

function getHOSTinfo(){
    $hostInfo = runCommand("hostname");
    return respond($hostInfo,200);
}

function getIPinfo(){
    $ipInfo = runCommand("ip a");
    return respond($ipInfo,200);
}

?>
Enter fullscreen mode Exit fullscreen mode

Şimdi burada tam olarak neler oluyor? getHOSTinfo fonksiyonunda, içerisinde bulunan runCommand’e hostname değerini gönderdik. Bu komut içerisine gönderdiğimiz değeri sunucumuzda terminal’e yazdığımızda çıkan sonucu döndürmektedir. Terminal’i açıp hostname yazdığımızda sunucumuzun adının yazdığını görürüz. Biz de bu eklentide sunucumuzun adını çağırmak istiyoruz ve çıkan sonucu eklentimize eklemek istiyoruz. Altındaki getIPinfo fonksiyonu da aynı işlemi yapmaktadır, IP bilgilerini öğrenmek için ip a komutunu runCommand’e gönderiyoruz. Ve son olarak da return respond ile eğer gönderdiğimiz HTTP talebinden 200 kodu dönüyorsa bu komutları tanımladığımız değeri gönder diyoruz.

Şimdi de index.blade.php dosyamıza geçelim. Aşağıda paylaştığım kodu index.blade.php dosyasına yapıştırın.

<ul class="nav nav-tabs" role="tablist" style="margin-bottom: 15px;">
  <li class="nav-item">
    <a class="nav-link active" onclick="getIP()" href="#ipTab" data-toggle="tab">IP Bilgileri</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" onclick="getHost()" href="#hostTab" data-toggle="tab">Host Bilgileri</a>
  </li>
</ul>

<div class="tab-content">
    <div id="ipTab" class="tab-pane active">
    <pre id="ipPre"></pre>
    </div>

    <div id="hostTab" class="tab-pane">
    <pre id="hostPre"></pre>
    </div>

</div>

<script>
function getIP(){
  request(API("getIPinfo"), new FormData(), function(response){
    msg = JSON.parse(response).message;
    $('#ipPre').html(msg);
  }, function(response){
    console.log("HATA!");
  });
}
function getHost(){
  request(API("getHOSTinfo"), new FormData(), function(response){
    msg = JSON.parse(response).message;
    $('#hostPre').html(msg);
  }, function(response){
    console.log("HATA!");
  });
}

if(location.hash === ""){
    getIP();
}
</script>

Enter fullscreen mode Exit fullscreen mode

Verimizi direkt yazdırmamız mümkün, fakat daha şık bir görüntü olsun diye Tab’lı yapıda veriyi kullanmak istedim. Şimdi ise getIP ve getHost fonksiyonlarında neler döndüğünü inceleyelim. İki fonksiyonda da sunucumuza request (talep) gönderiyoruz. Endpoint URL’mizin sonuna function.php’de yazdığımız fonksiyonların adını yazdığımızda orada dönen verinin JSON biçimin de döndüğünü görebiliriz. Biz de bir FormData oluşturarak, eğer requestimizden bir response dönüyorsa veriyi parse et ve sadece message başlığını döndür diyoruz ve bu mesajı yukarıda belirttiğimiz id’ye gönderiyoruz. Eğer response dönmüyorsa, ikinci satıra gir ve konsola Hata! yaz dedik. Bunu da debug yaparken response’un durumunu takip etmek için kullanabiliriz.

Son olarak da if(location.hash === “”) diyerek sayfa yüklendiğinde index’te ise yüklemesini istediğimiz fonksiyonu yazıyoruz. Yani eklentiyi ilk açtığımızda karşımız IP bilgileri gözükecek.

Top comments (0)

🤔 Did you know?

 
DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags.