Kuika ile uygulama geliştirirken API ile özel aksiyonlar oluşturmak, uygulamanızın işlevselliğini genişletmek ve veri işlemlerini daha dinamik hale getirmek için güçlü bir yöntem sunar. Kuika'nın Datasource modülü üzerinden Swagger API kullanarak uygulamanızda çeşitli veri kaynağı bağlantıları ve aksiyonlar oluşturabilirsiniz. Bu içerikte, API ile özel aksiyonların nasıl oluşturulacağını, nasıl yapılandırılacağını ve uygulama geliştirme sürecinizde neden önemli olduğunu öğreneceksiniz.

Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:

Swagger API ile veri kaynağı bağlantısı kurma,
Swagger API aksiyonlarını uygulama ekranlarında kullanma,
Tablo içerisinde dinamik veri gösterme,
Çalışmayı test etme ve önizleme.

1. Swagger API ile Veri Kaynağı Bağlantısı Kurma

Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
“Data Sources” (1) modülüne gidin. Data Sources modülünde, geliştirdiğiniz uygulamada yer alan veri kaynaklarını, aksiyonları ve tabloları görüntüleyebilir, yeni bir veri kaynağı, yeni bir aksiyon ve yeni bir tablo ekleyebilirsiniz.

Geliştirdiğiniz uygulamaya yeni bir veri kaynağı eklemek için Data Sources modülünün sol kenarındaki “Sources” başlığı yanında bulunan “+” (2) ikonuna tıklayın.

Data Sources veri kaynağı tipi olarak “Swagger API” (1) seçin ve bir isim (2) girin (Örneğin, "KuikaSwaggerAPI" . )
Daha sonra “CREATE” (3) butonuna tıklayın.
Bir sonraki adımda API'ye bağlanmak için gerekli URL bilgilerini girmeniz gerekir.

Swagger URL: https://builder3.kuika.com//KuikaSwaggerAPI/swagger/docs/v1 adresini kullanın.
Base URL: https://builder3.kuika.com/KuikaSwaggerAPI adresini girin.

Kimlik doğrulama tipi olarak No Auth seçeneğini tercih edin. Eğer API’nin kimlik doğrulaması gerekiyorsa Kuika Auth veya API Key seçeneklerini değerlendirebilirsiniz. Bu örnekte No Auth seçeneği yeterlidir.
Gerekli bilgileri girdikten sonra CREATE butonuna tıklayarak veri kaynağı bağlantısını oluşturun. Bu işlemi tamamladığınızda, Kuika Swagger API içindeki tüm aksiyonlar otomatik olarak veri kaynağınıza entegre edebilir ve daha fazla bilgi almak için ilgili içeriğimizi inceleyebilirsiniz.

2. Swagger API Aksiyonlarını Uygulama Ekranında Kullanma

Artık Kuika Swagger API içinde tanımlı olan aksiyonları uygulamanıza ekleyebilir ve çeşitli ekranlarda kullanabilirsiniz. Bu örnekte, ürün stoklarının listelendiği bir tablo ekranı oluşturacağız.

Liste Ekranı Oluşturma: Ürün stoklarını göstermek için bir liste ekranı hazırlayın.some text
- UI Design modülündeki Elements panelinden bir Table elementi ekleyin ve ekrana sürükleyip bırakın.

Tablonun sütunlarını anlamlı bir şekilde isimlendirin. Örneğin: ID, Stok Kod, Ürün Adı, Barkod gibi.

Aksiyon Ekleme - Initial Action: Ürün stok ekranı her açıldığında stok bilgilerini API üzerinden otomatik olarak çekmek için bir Table elementine Initial Action tanımlayın.

Sağ kenardaki Properties panelinden +ADD ACTION butonuna tıklayın.
Initial Actions > Custom > Datasource yolunu izleyin.

Rest başlığı altında bulunan Stok Get Product List From Rest aksiyonunu seçin. Bu aksiyon, API’den ürün stok bilgilerini çeker.

Tablo Veri Kaynağını Bağlama: Aksiyon ile çekilen veriyi liste ekranındaki tabloya bağlamak için tabloyu seçin ve veri kaynağını ayarlayın.some text
- Tablonun veri kaynağını belirlemek için tabloyu seçin ve sağda açılan Properties paneline gidin.
- Datasource menüsünden Action başlığı altında Stok Get Product List From Rest aksiyonunu seçin.

3. Tablo İçerisinde Dinamik Veri Gösterme

Şimdi tablo içinde yer alacak her bir sütunun API'den gelen veri ile nasıl eşleştirileceğini tanımlayalım:

ID Bilgisini Gösterme:

ID sütununda yer alan Label elementlerinden birine tıklayın.
Properties > Value menüsünü açarak Field to Display altında ID’yi seçin. Tablodaki ID sütununu API’den gelen ID verisi ile doldurur.

Stok Kod Bilgisi Gösterme:

Stok Kod sütununda yer alan Label elementlerinden birine tıklayın.
Field to Display menüsünden Stok Kod öğesini seçin. Stok kodu bilgisini tablonun ilgili sütununa dinamik olarak bağlar.

Ürün Adı Gösterme:

Name sütununda yer alan Label elementlerinden birine tıklayın.
Field to Display menüsünde Stok Ad öğesini seçin. Bu sayede, tablodaki ürün adı sütunu API’den çekilen veri ile doldurulur.

Barkod Bilgisi Gösterme:

Barcode sütununda yer alan Label elementlerinden birine tıklayın.
Field to Display menüsünden Stok Barkod öğesini seçin. Barkod bilgisini tablonun ilgili sütununa bağlar.

4. Çalışmayı Test Etme ve Önizleme

Tüm ayarlamaları yaptıktan sonra, uygulamanızı test etmek için Preview butonuna tıklayın ve API’den gelen verinin doğru bir şekilde tabloya aktarılıp aktarılmadığını kontrol edin.