Liman MYS Eklentisi ile Elasticsearch API'sine Bağlanma Rehberi

Bu yazı, Liman MYS eklenti şablonunu kullanarak, Basic Authentication (Kullanıcı Adı/Şifre) ile korunan bir Elasticsearch API'sine bağlanmayı ve veri çekmeyi adım adım anlatır.

Bu rehber, zaten çalışan bir Liman MYS geliştirme ortamınız olduğunu varsayar.

Eğer henüz sunucunuza SSH ile bağlanmadıysanız, liman kullanıcısı için yetkilendirme yapmadıysanız, VS Code Remote - SSH eklentisini kurmadıysanız veya Node.js/pnpm kurulumunu tamamlamadıysanız, lütfen öncelikle aşağıdaki rehberi okuyun:

➡️ Referans: Liman MYS Eklentisi Geliştirme Ortamı Sorun Rehberi

Bu rehberdeki adımları tamamladıktan sonra buradan devam edebilirsiniz.

Adım 1: Eklenti Ayarlarını Yapılandırma (db.json)

Amacımız Eklentimizin, bağlanacağı API'nin adresini, kullanıcı adını ve şifresini Liman arayüzünden güvenli bir şekilde almasını sağlamak.

db.json dosyası, Liman'ın "Eklenti Ayarları" menüsüne hangi ayar alanlarını ekleyeceğimizi tanımlar.

1. Eklentinizin ana dizininde bulunan db.json dosyasını açın.
2. database isimli JSON dizisini bulun.
3. Bu dizinin içine, API URL'si, kullanıcı adı ve şifre için aşağıdaki üç JSON objesini ekleyin.

{
  "name": "elasti",
  "publisher": "...",
  "version": "...",
  "database": [
    {
      "variable": "api_url",
      "type": "text",
      "name": "API URL (ex. https://10.67.67.202:30936)",
      "required": true,
      "global": true,
      "writable": false
    },
    {
      "variable": "Username",
      "type": "text",
      "name": "Elasticsearch Username",
      "required": true,
      "global": true,
      "writable": false
    },
    {
      "variable": "Password",
      "type": "password",
      "name": "Elasticsearch Password",
      "required": true,
      "global": true,
      "writable": false
    }
  ],
  "language": "php",
  "vite": true,
  "...": "..."
}

Detaylı Açıklama:

• "variable": "api_url": Bu, PHP kodumuzun içinden extensionDb('api_url') fonksiyonunu kullanarak bu değere erişmesini sağlayan anahtar isimdir.
• "type": "password": Bu ayar, Liman arayüzündeki bu metin kutusuna girilen değerin **** şeklinde maskelenmesini sağlar. Güvenlik için kritik bir adımdır.
• "global": true: Ayarın eklenti bazında global olmasını sağlar.

Önemli: Bu değişikliği yaptıktan sonra eklentinizi Liman arayüzünden Yeniden Yükle yapın ve Eklenti Ayarları'na giderek API URL,Elasticsearch Username ve Elasticsearch Password olmak üzere aşşağıdaki görselde bulunan üç alanı da doldurun

Adım 2: helpers.php Dosyasını Güncelleme (Yetkilendirme)

Bu adımda amacımız PHP backend'imizin, Adım 1'de kaydettiğimiz ayarları okuyup Elasticsearch'e Basic Authentication başlığını (header) göndermesini sağlamak.

helpers.php dosyası, backend kodumuzun her yerinden çağırabileceğimiz yardımcı fonksiyonları barındırır. getDefaults() fonksiyonu, eklentimizden dışarı giden her API isteği için varsayılan ayarları belirler.

1. /views klasörünün (veya ana dizinin) yanındaki helpers.php dosyasını açın.
2. getDefaults() fonksiyonunu bulun.
3. Bu fonksiyonun tamamını, db.json'dan Username ve Password değişkenlerini okuyacak ve Authorization başlığını oluşturacak şekilde aşağıdaki gibi güncelleyin.

if (!function_exists('getDefaults')) {
    function getDefaults()
    {
        // 1. ADIM: db.json'dan kullanıcı adı ve şifreyi al
        $username = extensionDb('Username');
        $password = extensionDb('Password');

        // 2. ADIM: Basic Auth için kullanıcı adı ve şifreyi "kullanıcı:şifre" formatında
        // base64 algoritmasıyla kodla
        $auth = base64_encode($username . ':' . $password);

        // 3. ADIM: Guzzle (PHP HTTP istemcisi) için ayar dizisini oluştur
        return [
            'headers' => [
                'Content-Type' => 'application/json',

                // Oluşturduğumuz kodu "Authorization" başlığına "Basic " ön ekiyle ekle
                'Authorization' => 'Basic ' . $auth,
            ],

            // 4. ADIM: SSL Sertifika Doğrulamasını Kapat
            // Eğer API'niz (https://...) kendinden imzalı (self-signed)
            // bir sertifika kullanıyorsa bu gereklidir. Aksi halde bağlantı hatası alırsınız.
            'verify' => false 
        ];
    }
}

Adım 3: CORS ve HMR Hatalarını Önleme (vite.config.ts)

Amacımız localhost sorununu çözdükten sonra ortaya çıkan CORS policy (farklı port) ve WebSocket (HMR) bağlantı hatalarını en baştan engellemek.

Sorun: Liman arayüzü (örn: https_://10.68.68.249) ile Vite sunucusu (örn: https_://10.68.68.249:5173) farklı portlarda çalıştığı için tarayıcı bunu "güvenliksiz" bir işlem olarak görür ve CORS hatası verir.

1. frontend/vite.config.ts dosyasını açın.
2. defineConfig objesine, plugins ve resolve gibi anahtarların yanına, server adında yeni bir yapılandırma bloğu ekleyin.

// CORS VE HMR HATALARINI ÖNLEMEK İÇİN BU BLOĞU EKLEYİN
  // ###############################################################
  server: {
    // 1. Sunucunun tüm IP'lerden gelen isteklere yanıt vermesini sağlar
    // (Sadece localhost'tan değil)
    host: '0.0.0.0', 

    // 2. CORS HATASININ ÇÖZÜMÜ:
    // Bu ayar, tarayıcıya "Access-Control-Allow-Origin: *" başlığını gönderir
    // ve farklı portlardan (örn: Liman'ın 443 portu) gelen isteklere izin verir.
    cors: true, 

    // 3. HMR (WebSocket) HATASININ ÇÖZÜMÜ:
    // Kodda değişiklik yaptığınızda sayfanın otomatik yenilenmesi (HMR)
    // için Vite bir WebSocket bağlantısı kullanır. Bu ayar,
    // WebSocket'in hangi IP'ye bağlanacağını söyler.
    hmr: {
      host: '10.68.68.249' // Buraya Vite sunucunuzun IP'sini yazın
    }
  }
  // ###############################################################

Adım 4: Geliştirme Sunucusu Sertifika (SSL) Uyarısını Geçme

Amacımız Tarayıcınızın, Vite geliştirme sunucusunun "kendinden imzalı" (self-signed) SSL sertifikasına güvenmesini sağlamak.

Adım 3 ve 4'ü yapsanız bile, pnpm run dev komutunu çalıştırdıktan sonra eklentiyi açtığınızda konsolda net::ERR_TIMED_OUT veya net::ERR_CERT_AUTHORITY_INVALID hatası alabilirsiniz.

Vite sunucusu (https://10.68.68.249:5173) https kullanır ancak resmi olmayan bir sertifikaya sahiptir. Tarayıcınız, sizden onay almadan bu "güvenli olmayan" adresten script (main.ts) yüklemeyi reddeder.

Çözüm: Tarayıcınıza bu adrese güvenmesini manuel olarak öğretmeniz gerekir.

1. Vite sunucunuzun adresini (örn: https://10.68.68.249:5173) kopyalayın.
2. Tarayıcınızda yeni bir sekme açın.
3. Bu adresi yapıştırın ve Enter'a basın.
4. Karşınıza "Bağlantınız gizli değil" (Your connection is not private) uyarısı çıkacaktır.
5. "Gelişmiş" (Advanced) butonuna tıklayın.
6. "10.68.68.249 sitesine ilerle (güvenli değil)" (Proceed to 10.68.68.249 (unsafe)) linkine tıklayın.
7. Ekrana beyaz bir sayfa veya "Vite" logosu gelirse, işlem başarılıdır. Bu sekmeyi kapatabilirsiniz.

Bu işlemi yaptığınızda, tarayıcınız bu sertifikayı geçici olarak kabul etmiş olur ve Liman arayüzü artık main.ts dosyasını yükleyebilir.

Adım 5: Frontend Veri Katmanını Oluşturma (elastic.ts)

data.ts dosyasını kopyalayıp elastic.ts adında yeni bir dosya oluşturmanızı ve içeriğini aşağıdaki gibi düzenlemenizi istiyorum.

Bu dosyada, data.ts içindeki tüm CRUD (create, update, delete) fonksiyonlarını kaldıracağız. Sadece bizim Elastic API'mizden veri çekecek fetchStats adında tek bir fonksiyon bırakacağız. Bu fonksiyon, RequestController.php dosyanızdaki apiProxy fonksiyonunu tetikleyecek.

Komut parametrelerini URL'den (GET) gönderdiğimiz takdirde RequestController.php'deki apiProxy fonksiyonu, GET isteğiyle gelen URL parametrelerini (örn: ?type=...) hedef API'ye (Elasticsearch) "taşıma" eğilimindedir. Elasticsearch bu type ve endpoint parametrelerini tanımadığı için hata verir.

bu yüzden komut parametrelerini URL'den (GET) göndermek yerine bir POST isteğinin gövdesinde (body) göndereceğiz. RequestController bu verileri gövdeden okuyacak ve Elasticsearch'e "temiz" bir GET isteği atacaktır.

1. src/stores/data.ts dosyasını kopyalayıp src/stores/elastic.ts adında yeni bir dosya oluşturun.
2. İçeriğini aşağıdaki gibi (hatayı en baştan önleyecek şekilde) düzenleyin:

import http from "@/utils/http-common"
import { i18n } from "@/utils/i18n"
import { defineStore } from "pinia"

// Store adını useElasticStore olarak değiştiriyoruz
export const useElasticStore = defineStore({
  id: "elastic",
  state: () => ({
    elasticData: {} as any, // Gelen veriyi tutmak için
  }),
  getters: {
    getStats: (state) => state.elasticData,
  },
  actions: {
    // Veri çekme fonksiyonumuz
    async fetchStats() {

      // Parametreleri POST gövdesinde göndermek için hazırlıyoruz
      const payload = {
        // Backend'e "get" isteği yapmasını söylüyoruz
        type: "get",
        // Backend'e hangi uca gitmesini istediğimizi söylüyoruz
        endpoint: "_nodes/stats/fs?pretty=true" 
      }

      // Hata almamak için http.get yerine http.post kullanıyoruz.
      // RequestController bu POST gövdesini okur
      // ve Elastic'e temiz bir GET isteği atar.
      // İlk parametre olan URL'e sadece "?" koymamız, 
      // apiProxy'nin kök dizine gitmesini sağlar.
      return http.post(`?`, payload).then((res) => {
        if (res.status == 200) {
          if (res.data) {
            this.elasticData = res.data
            console.log("Elastic verisi başarıyla alındı:", res.data)
          }
        } else {
          window.$notification.error({
            duration: 5000,
            title: i18n.t("common.error"),
            content: "Elastic verisi alınırken bir hata oluştu.",
          })
        }
      })
    },
  },
})

Adım 6: RequestController.php Debug (Hata Ayıklama)

Lütfen RequestController.php dosyanızı açın ve apiProxy fonksiyonunu bulun.

Bu fonksiyonun içine, validate([...]); satırından hemen sonra, aşağıdaki dd() satırlarını ekleyin. Bu sayede frontend'den gelen isteği yakalayıp, API'ye gitmeden önce tam olarak hangi URL'i ve hangi ayarları kullandığımızı göreceğiz.

// --- DEBUG BAŞLANGIÇ ---
        // Bu iki satırı ekleyin:

        // 1. Doğru URL'i oluşturup oluşturmadığımızı kontrol edelim
        dd(extensionDb('api_url') . '/' . request("endpoint"));

        // 2. helpers.php'den doğru ayarların (Auth Header) gelip gelmediğini kontrol edelim
        // (Eğer ilk dd çalışırsa, tarayıcıda sonucu gördükten sonra bu satırı açıp ilkini silebilirsiniz)
        // dd(getDefaults()); 

        // --- DEBUG BİTİŞ ---

Adım 7: Home.vue Dosyasını Düzenleme ve Debug'ı Tetikleme

Bu adımda, Home.vue dosyanızı, oluşturduğumuz elastic.ts store'unu kullanacak şekilde düzenleyeceğiz.

1. Yeni useElasticStore'u import edeceğiz.
2. onMounted (sayfa yüklendiğinde) store.fetchStats() fonksiyonunu çağıracağız.
3. Gelen veriyi basit bir <pre> etiketi içinde ekrana basacağız.

Lütfen src/views/Home.vue dosyanızın içeriğini tamamen aşağıdaki kodla değiştirin:

<script lang="ts" setup>
import { onMounted } from "vue"
// 1. Oluşturduğumuz elastic store'u import et
import { useElasticStore } from "@/stores/elastic"

// 2. Store'u kur
const store = useElasticStore()

// 3. Sayfa yüklendiğinde fetchStats fonksiyonunu çalıştır
onMounted(() => {
  store.fetchStats()
})
</script>

<template>
  <div>
    <h2>Elasticsearch FS İstatistikleri</h2>
    <pre>{{ store.elasticData }}</pre>
  </div>
</template>

<style scoped>
pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  white-space: pre-wrap; /* Uzun satırların kaydırmasını sağlar */
  word-wrap: break-word;
}
</style>

Şimdi Test Edelim:

1. Bu değişikliği kaydedin.
2. Projenizin derlendiğinden emin olun (genellikle pnpm run dev veya pnpm run serve).
3. Tarayıcınızı açın ve Liman arayüzünden eklentinize gidin.
4. Tarayıcınızın Geliştirici Araçları'nı açın (F12) ve "Ağ (Network)" sekmesine tıklayın.
5. Eklentinizin ana sayfasını (Home.vue) açın veya yenileyin.

Beklenen Sonuç:

Sayfanız büyük ihtimalle yüklenmeyecek (veya "500 Sunucu Hatası" gibi bir hata gösterecek).

Ağ (Network) sekmesinde, apiProxy?type=get&endpoint=... ile başlayan kırmızı bir istek görmelisiniz. Bu isteğe tıklayın ve "Önizleme (Preview)" veya "Yanıt (Response)" sekmesine bakın.

Orada, RequestController.php içine yazdığımız ilk dd() komutunun çıktısını görmeniz gerekiyor. Çıktı, bir string (metin) olarak şunu içermeli:

"https://10.67.67.202:30936/_nodes/stats/fs?pretty=true" (Eğer db.json'a IP'yi 10.67.67.202 olarak girdiyseniz)

ilk debug komutunda istediğimiz sonuçlara ulaştıktan sonra ikinci debug komutunu tetikleyelim.

1. Lütfen RequestController.php dosyasını açın.
2. validate([...]); satırından hemen sonra, dd(getDefaults()); satırını aşşağıdaki gibi yorum satırı olmaktan çıkarıp ilk debug komutunu yorum satırına alalım.

// --- DEBUG BAŞLANGIÇ ---
        // Bu iki satırı ekleyin:

        // 1. Doğru URL'i oluşturup oluşturmadığımızı kontrol edelim
        // dd(extensionDb('api_url') . '/' . request("endpoint"));

        // 2. helpers.php'den doğru ayarların (Auth Header) gelip gelmediğini kontrol edelim
        // (Eğer ilk dd çalışırsa, tarayıcıda sonucu gördükten sonra bu satırı açıp ilkini silebilirsiniz)
         dd(getDefaults()); 

        // --- DEBUG BİTİŞ ---

Şimdi Test Edin:

1. Dosyayı bu şekilde kaydedin.
2. Tarayıcıda Geliştirici Araçları (F12) açıkken sayfayı yenileyin (F5).
3. Network sekmesinde yine kırmızı bir apiProxy isteği göreceksiniz.
4. Bu isteğe tıklayın ve "Önizleme (Preview)" sekmesine bakın.

Beklenen Sonuç: Bu kez, ekranda o URL'i görmemelisiniz. Onun yerine "Önizleme (Preview)" sekmesinde, Authorization başlığını içeren şu JSON objesini görmelisiniz:

Bu çıktıyı gördüğünüzde kimlik doğrulama adımını başarıyla geçtiğimiz anlamına gelecek.
Artık tüm testlerimiz (debug) bitti. Backend'imiz (PHP) isteği göndermeye hazır.

Şimdi son adıma geçiyoruz: Yola koyduğumuz tüm bu "tuzakları" (yani dd() komutlarını) kaldıracağız ve isteğin Elastic API'sine gerçekten gitmesine izin vereceğiz.

Adım 8: Eklentiyi Çalıştırma ve Son Test

Tüm dosyaları doğru şekilde yapılandırdık. Artık eklentiyi çalıştırabiliriz.

Önemli: Geliştirme (Dev) ve Üretim (Build) Modu Farkı

• Geliştirme (Dev) Modu:
  pnpm run dev ile çalışır. Kodunuzda yaptığınız her değişiklik anında tarayıcıya yansır (vite: true ve HMR sayesinde). Bu mod, eklentiyi aktif olarak geliştirirken kullanılır.

• Üretim (Build) Modu:
  pnpm run build ile çalışır. Tüm Vue/TS kodunuzu derleyip optimize edilmiş, tek bir statik JavaScript dosyası haline getirir. Eklentiyi bitirip son kullanıcıya sunacağınız zaman bu modu kullanırsınız ve db.json'daki vite: true ayarını vite: false yaparsınız.

• Terminalde frontend klasörüne gidin (/liman/extensions/elasti/frontend).

• Gerekli paketlerin yüklü olduğundan emin olun:
  

pnpm install

• Vite geliştirme sunucusunu (tüm ayarlarıyla beraber) başlatın:

pnpm run dev --host 0.0.0.0

• Liman arayüzüne gidin (tarayıcıdan).
• Sol menüden eklentinizi açın.
• KRİTİK ADIM: Geliştirme sunucusunu görmek için, eklentinizin normal URL'inin sonuna /development eklemeniz gerekir.

Yanlış Adres: https://.../l/e/elasti (Bu, üretim modunu (build) açar)

Doğru Adres: https://.../l/e/elasti/development (Bu, pnpm run dev sunucusuna bağlanır)

Nihai Sonuç: .../development adresini açtığınızda, ekrandaElasticsearch FS İstat istikleri başlığının altında, API'den gelen (içinde _nodes, cluster_name vb. bulunan) JSON verisinin tamamını hatasız bir şekilde aşşağdaki şekilde arayüzde görmelisiniz.