Özel Aksiyonlar ve Veri Bağlama
/

API ile Özel Aksiyonlar oluşturun

API ile Özel Aksiyonlar oluşturun

Kuika ile uygulama geliştirirken veri kaynağı olarak Rest Swagger API kullanabilirsiniz.

Rest Swagger ile API Veri Kaynağı Bağlantısı

Rest Swagger API ile veri kaynağı bağlantısı yapmak için Kuika’da çalıştığınız projede Datasources modülüne gidin.

Datasources Ekranı

Datasources modülünde bulunan sol menü aracılığıyla 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.

“Create Datasource” Butonu

Geliştirdiğiniz uygulamaya yeni bir veri kaynağı eklemek için Datasources başlığı karşısında yer alanı + ikonuna tıklayın.

Rest Swagger Seçimi Ekranı

Geliştirdiğiniz uygulamaya veri kaynağı olarak Rest Swagger API eklemek için açılan ekranda Datasource tipi olarak Rest Swagger API seçin ve isimlendirin. Biz bu eğitim içeriği kapsamında Rest olarak isimlendirdik. İsimlendirme işlemini tamamladıktan sonra CREATE butonuna tıklayın.

Rest Swagger API Ekranı

Açılan ekranda yer alan Swagger URL bilgisini ve Service Base URL bilgisini girin.

Rest Swagger API ekleme ekranı ekran görüntüsü

Bu eğitim içeriğinde örnek olarak oluşturulan Kuika Swagger API kaynağı ile bağlantı kurulacaktır.

Öncelikle Swagger Url bilgisi olarak https://builder3.kuika.com/KuikaSwaggerAPI/swagger/ui/index adresinde yer alan https://builder3.kuika.com//KuikaSwaggerAPI/swagger/docs/v1 URL’ini girin. Ardından aynı sitede yer alan ve Base URL bilgisi olan https://builder3.kuika.com/KuikaSwaggerAPI URL’ini girin.

Daha sonra Authentication Type başlıklı açılır menüde yer alan No Auth, Kuika Auth ve API Key kimlik doğrulama türlerinden No Auth seçimini yapın.

Ardından CREATE butonuna tıklayarak Datasources bağlantısını oluşturun.

Oluşturduğunuz bağlantı Kuika Swagger API’da yer alan sorguları aksiyon olarak otomatik çekmektedir.

Rest Swagger API aksiyon menüsü ekran görüntüsü

Kuika Swagger API’daki aksiyonlar Datasources modülünde yer alan ve UI Design modülünde bulunan Custom Actions panelinde yer alan sol menüde ilgili veri kaynağı bağlantısı altında listelenmektedir.

KuikaSwaggerAPI veri kaynağı aracılığıyla çektiğiniz aksiyonları, geliştirdiğiniz uygulama ekranlarına bağlayabilirsiniz.

Örnek bir liste ekranı özelinde veri kaynağında bulunan ürünlerin stoklarının listelendiği senaryo üzerinde ilerleyelim.

Örnek liste ekranı ekran görüntüsü

KuikaSwaggerAPI veri kaynağında yer alan ürünlerin stoklarını çekmek amacıyla ilgili aksiyonu liste ekranında bağlamak için öncelikle bir liste ekranı oluşturun. Bunun için ekrana DataRepeater elementlerinden bir Table elementi sürükleyin ve bırakın. Daha sonra tablonun sütunlarını isimlendirin. Sütun başlıklarını değiştirmek için değiştirmek istediğiniz başlığın altında yer alan herhangi bir Table Column seç ve özellikleri içerisinde yer alan başlık özelliği içerisine eklemek istediğiniz başlığı girin. Ardından tablonun sütunları içerisine Label elementleri sürükleyin ve bırakın. Basit bir listeleme ekranı oluşturduktan sonra aksiyonlarla çalışmaya geçebilirsiniz.

Ürün Stok ekranı her açıldığında ürünlerin stok bilgisini çekmek için bir Initial Action eklemelisiniz.

Initial aksiyon ekleme ekran görüntüsü

Initial Action eklemek için Screen Properties (Özellikler)’de ADD ACTION butonuna tıklayın.

Açılan menüde Initial Actions > Custom> Datasource öğeleri üzerine imleç ile gelin. Rest başlıklı Datasource öğesinin üzerine imleç ile geldiğinizde Rest Swagger ile oluşturulan özel aksiyonlar listelenecektir. Bu liste içerisinden Stok Get Product List From Rest özel aksiyonuna tıklayın.

Daha sonra listeleme işlevini gerçekleştirecek tablonun ürünlerin stok bilgisi listesiyle bağlantısını sağlamak için tablonun veri kaynağını belirlemelisiniz. Tablonun veri kaynağını belirlemek için ekranda yer alan Table elementini seçin.

Tabloya veri kaynağı ekleme ekran görüntüsü

Sağda açılan Properties (Özellikler) aracılığıyla Datasource menüsünü açın.

Açılan menüde Action başlığı altında yer alan açılır menüye tıklayın. Menüde stok bilgisi listelemeyi sağlayacak olan StokGetProductListFromRest özel aksiyonunu seçin. Artık tablonun veri kaynağı bağlantısını sağladınız.

Şimdi tablo içerisinde yer alan ve ID bilgisinin yazacağı Label elementlerinin değerini tablonun bağlı olduğu veri kaynağından dinamik olarak çekme işlemine başlayın. Bu işlemi gerçekleştirmek için öncelikle ID sütununda yer alan Label elementlerinden birine tıklayın.  

Daha sonra sağda açılan Properties (Özellikler) aracılığıyla Value menüsünü açın.

Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıklayın.  

Menüde yer alan ID'yi seçin.

Tablo içerisinde yer alan ve Stok Kodu bilgilerinin yazacağı Label elementlerinin değerini tablonun bağlı olduğu veri kaynağından dinamik olarak çekme işlemine başlayın. Bu işlemi gerçekleştirmek için öncelikle StokKod sütununda yer alan Label elementlerinden birine tıklayın.  

Dinamik Stok Kod değeri çekme ekran görüntüsü

Daha sonra sağda açılan Properties (Özellikler) aracılığıyla Value menüsünü açın.

Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıklayın.

Menüde yer alan StokKod öğesini seçin.

Tablo içerisinde yer alan ve ürün adlarının yazacağı Label elementlerinin değerini tablonun bağlı olduğu veri kaynağından dinamik olarak çekme işlemine başlayın. Bu işlemi gerçekleştirmek için öncelikle Name sütununda yer alan Label elementlerinden birine tıklayın.

Dinamik Stok Adı değeri çekme ekran görüntüsü

Daha sonra sağda açılan Properties (Özellikler) aracılığıyla value menüsünü açın.

Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıklayın.

Menüde yer alan StokAd öğesini seçin.

Son olarak tablo içerisinde yer alan ve barkod bilgilerinin yazacağı Label elementlerinin değerini tablonun bağlı olduğu veri kaynağından dinamik olarak çekme işlemine başlayın. Bu işlemi gerçekleştirmek için öncelikle Barcode sütununda yer alan Label elementlerinden birine tıklayın.

Dinamik Stok Barkod değeri çekme ekran görüntüsü

Daha sonra sağda açılan Properties (Özellikler) aracılığıyla value menüsünü açın.

Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıklayın.

Menüde yer alan StokBarkod öğesini seçin.

Geliştirdiğiniz çalışmayı test etmek için Preview butonuna tıklayın.

Örnek uygulama ekran görüntüsü
No items found.

İlişkili diğer içerikler

No items found.

Sözlük

No items found.

Alt Başlıklar