.png%3Falt%3Dmedia%26token%3De8b4c1e8-3025-46e6-a332-ff15aaa3fda1)
.png%3Falt%3Dmedia%26token%3De8b4c1e8-3025-46e6-a332-ff15aaa3fda1)
API ile özel aksiyonlar oluşturun
Rest Swagger API ile Custom Action oluşturma ve kullanmayı öğrenin.
Kuika ile uygulama geliştirirken veri kaynağı olarak Rest Swagger API kullanabilirsin..
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
- 1.Rest Swagger API ile Veri Kaynağı Bağlantısı
- 2.Liste Ekranında Rest Swagger API ile Listeleme
Rest Swagger API ile veri kaynağı bağlantısı yapmak için Kuika’ da çalıştığın projede Datasources görünüm moduna git.
Datasources görünüm modu ekran görüntüsü
Datasources görünüm modunda bulunan sol menü aracılığıyla geliştirdiğin uygulamada yer alan veri kaynaklarını, aksiyonları ve tabloları görüntüleyebilir, yeni bir veri kaynağı, yeni bir aksiyon ve yeni bir tablo ekleyebilirsin.
Datasources görünüm modu “Create Datasource” butonu ekran görüntüsü
Geliştirdiğin uygulamaya yeni bir veri kaynağı eklemek için Datasources başlığı karşısında yer alanı + ikonuna tıkla.
Datasources görünüm modu Rest Swagger API Seçimi ekran görüntüsü
Geliştirdiğin uygulamaya veri kaynağı olarak Rest Swagger API eklemek için açılan ekranda Datasource tipi olarak Rest Swagger API seç ve isimlendir. Biz bu eğitim içeriği kapsamında Rest olarak isimlendirdik. İsimlendirme işlemini tamamladıktan sonra CREATE butonuna tıkla.
Rest Swagger API ekran görüntüsü
Rest Swagger API ekleme ekranı
Bu eğitim içeriğinde örnek olarak oluşturulan KuikaSwaggerAPI 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 gir. Ardından aynı sitede yer alan ve Base URL bilgisi olan https://builder3.kuika.com/KuikaSwaggerAPI URL’ini gir.
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.
Ardından CREATE butonuna tıklayarak Datasources bağlantısını oluştur.
Oluşturduğun bağlantı KuikaSwaggerAPI’ da yer alan sorguları aksiyon olarak otomatik çekmektedir.
Rest Swagger aksiyon menüsü
KuikaSwaggerAPI’ daki aksiyonlar DataSources görünüm modunda yer alan ve UI Design görünüm modunda 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ğin aksiyonları, geliştirdiğin uygulama ekranlarına bağlayabilirsin.
Örnek bir liste ekranı özelinde veri kaynağında bulunan ürünlerin stoklarının listelendiği senaryo üzerinde ilerleyelim.
Örnek liste ekranı
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ştur. Bunun için ekrana DataRepeater elementlerinden bir Table elementi sürükle ve bırak. Daha sonra tablonun sütunlarını isimlendir. Sütun başlıklarını değiştirmek için değiştirmek istediğin 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ğin başlığı gir. Ardından tablonun sütunları içerisine Label elementleri sürükle ve bırak. Basit bir listeleme ekranı oluşturduktan sonra aksiyonlarla çalışmaya geçebilirsin.
Ürün Stok ekranı her açıldığında ürünlerin stok bilgisini çekmek için bir Initial Action eklemelisin.
Initial aksiyon ekleme
Initial Action eklemek için Screen Properties (Özellikler)’de ADD ACTION butonuna tıkla.
Açılan menüde Initial Actions > Custom> Datasource öğeleri üzerine imleç ile gel. Rest başlıklı Datasource öğesinin üzerine imleç ile geldiğinde Rest Swagger ile oluşturulan özel aksiyonlar listelenecektir. Bu liste içerisinden StokGetProductListFromRest özel aksiyonuna tıkla.
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ı belirlemelisin. Tablonun veri kaynağını belirlemek için ekranda yer alan Table elementini seç.
Tabloya veri kaynağı ekleme
Açılan menüde Action başlığı altında yer alan açılır menüye tıkla. Menüde stok bilgisi listelemeyi sağlayacak olan StokGetProductListFromRest özel aksiyonunu seç. Artık tablonun veri kaynağı bağlantısını sağladın.
Ş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şla. Bu işlemi gerçekleştirmek için öncelikle ID sütununda yer alan Label elementlerinden birine tıkla.
Dinamik ID değeri çekme
Daha sonra sağda açılan Properties (Özellikler) aracılığıyla Value menüsünü aç.
Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıkla.
Menüde yer alan ID'yi seç.
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şla. Bu işlemi gerçekleştirmek için öncelikle StokKod sütununda yer alan Label elementlerinden birine tıkla.
Dinamik Stok Kod değeri çekme
Daha sonra sağda açılan Properties (Özellikler) aracılığıyla value menüsünü aç.
Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıkla.
Menüde yer alan StokKod öğesini seç.
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şla. Bu işlemi gerçekleştirmek için öncelikle Name sütununda yer alan Label elementlerinden birine tıkla.
Dinamik Stok Adı değeri çekme
Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıkla.
Menüde yer alan StokAd öğesini seç.
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şla. Bu işlemi gerçekleştirmek için öncelikle Barcode sütununda yer alan Label elementlerinden birine tıkla.
Dinamik Stok Barkod değeri çekme
Açılan menüde Field to Display başlığı altında yer alan açılır menüye tıkla.
Menüde yer alan StokBarkod öğesini seç.
Geliştirdiğin çalışmayı test etmek için Preview butonuna tıkla.
Örnek uygulama