Kuika ile İlk Uygulama Geliştirme Deneyimim

Emrah Önder
Mar 30 · 9 min read

Nerede kalmıştık? En son size Kuika ile nasıl geleceğe zıplayacağımızı anlatmıştım. Yazının sonunda da aklımdaki bazı uygulama fikirlerini hayata geçirmeyi planladığımdan bahsetmiştim.

İşte o gün geldi!

Yapmaya karar verdiğim ilk fikrim, kayınpederimden hatıra, kayınvalidemden armağan 45’lik plaklarımı düzene sokmak için bir mobil uygulama geliştirmekti. Hemen kolları sıvadım.

Teknik Kararlar

Önce nasıl bir yapıya ihtiyacım olduğunu konusu üzerine düşünmeye başladım. Uygulama kısmını Kuika tarafında rahatlıkla yapacaktım ancak verilerimi nerede saklayacağıma tam olarak karar veremedim. Kuika üzerindeki dahili MsSQL veritabanını kullanmak iyi ve pratik bir seçenek. Hatta harici bir MsSQL sunucum olsa doğrudan onu da bağlayabilirdim.

Tabii harici bir web servisi ile projemi monolitik yapıdan uzaklaştırmak da başka bir seçenek.

Üzerinde uzun uzun düşünüp gelecekte yapabileceklerimi planladıktan sonra bir web servisi yazmayı, verilerimi de harici bir veri tabanında tutmaya karar verdim.

Daha önceki yazımda bahsetmiştim, eğer Swagger ara yüzüne sahip bir REST API elinizde bulunuyorsa bunu çok hızlı bir şekilde Kuika’ya ekleyebiliyorsunuz.

Artık genel yapıya karar verdiğime göre bu yapı için gerekli bileşenleri geliştirmeye başlayabilirim.

Web Servis geliştirme

Web servis kısmı için hızlı geliştirmeye olanak sunan ve Java ile web servisi geliştirmede neredeyse endüstri standardı haline gelen Spring Boot kullanmaya karar verdim. Veri tabanı olarak da iki gözümün çiçeği MySQL’den başkasını düşünmedim.

MySQL sunucumu nerede kursam diye düşünürken Amazon Web Service tarafından sunulan Amazon RDS üzerinde tutmaya karar verdim. Amazon RDS, popüler tüm ilişkisel veri tabanlarını destekliyor. Ek olarak da MySQL ve PostgreSQL uygumlu, kendi ücretsiz veri tabanı olan Amazon Aurora’yı sunuyor.

Tabii “pek duygusal nedenlerle” Amazon Aurora’yı seçerek ilerledim. Açıkçası uygulamam oldukça basit olacağı için Aurora da işimi rahatlıkla gördü.

Veri tabanım da hazır olduğuna göre artık servis geliştirmesine başlayabiliriz. Favori editörüm Intellij ile proje yaratmak oldukça kolay. Merak edenler için adımları özetleyen makaleye şuradan ulaşabilirler.

Standart Spring Boot kütüphanelerine ek olarak, yine Spring’in sunduğu Hibernate ve MySQL bağlayıcılarını ekledim. Ayrıca Swagger 2.0 için de SpringFox kütüphanesini ekleyip gerekli ayarlarını düzenledim.

Sonucunda web servisim hazır:

Uzuuun uzun “şöyle yaptım, böyle yazdım” diye anlatmak isterdim ancak Linus Torvalds üstadımızın dediği gibi “Talks is cheap, show me the code”. Buyurun, projeyi buradan inceleyebilirsiniz, varsa hatalar yüzüme vurabilirsiniz :D

Servisimiz hazır olduğuna göre artık yükleyip erişilebilir hale getirmek lazım. Bunu yapmak için DigitalOcean kullanmaya karar verdim. DigitalOcean, çok hızlı sanal sunucu oluşturmanız da dahil bir çok özelliği bulunan bir bulut çözümü. Damlacık (droplet) yaratarak anında sanal sunucunuza erişim sağlayabiliyorsunuz.

Ben de yukarıdaki ekrandan temel paketi yarattım. Üzerine, şu adreste anlatıldığı gibi bir Tomcat sunucusu kurdum ve web servisi paketimi Tomcat’e yükledim.

Artık her şey hazır, bekle beni Kuika!

Kuika ile Mobil Uygulama geliştirme

Uygulama yaratma

İlk adım tabii ki bir uygulama yaratmak. Sisteme giriş yaptıktan sonra hemen sağ üst tarafta bulunan “New App” düğmesine tıklıyoruz. Karşımıza gelen popuptan da uygulama adımızı yazıp “Create” düğmesine basarak kolayca uygulamamızı yaratıyoruz.

Uygulamamız yaratıldı, şimdi tıklayıp içine bir bakalım.

Uygulama yaratıldığında otomatik olarak üyelik, giriş, şifremi unuttum gibi sayfalar da yaratılmış oluyor. Ayrıca açılır kapanır bir sol menü de içerik sayfasıyla beraber hazır geliyor.

Üyelikle giriş yapılan bir uygulama için harika bir başlangıç.

Veri Kaynağı ekleme

Uygulamamım bir çok alanında web servisi ile ilgili işlem olacağı için öncelikle veri kaynağı olarak kaydetmem ve ilgili işlevlerin otomatik olarak oluşturulmasını sağlamak iyi bir yol gibi görünüyor.

Ekranın hemen solunda bulunan barda, yıldırıma benzeyen “Custom Actions” düğmesine basarak ilgili sayfaya ulaşıyoruz.

“Datasource” başlığı altındaki açılır menüye tıkladığımız zaman daha önce eklediğimiz veri kaynakları varsa listeleniyor. “Create Datasource” seçeneğine tıklayarak yeni bir veri kaynağı ekleyebiliyoruz.

Açılan popupta daha önce bahsettiğim gibi varsa kendi MsSQL sunucumuzu bağlayabiliyor, Rest API ekleyebiliyor ya da C# kodu yazabiliyoruz.

Rest API ekleme seçeneğine tıklayarak ilerledim. Web servisimin Swagger adresini girdim ve kolaylıkla hatırlayacağım bir isim vererek kaydettim.

Sistem otomatik olarak web servisimdeki işlevleri, verdiğim API belgesi aracılığıyla taradı ve uygulama içinde kullanabileceğim hazır eylemler yarattı:

Ekranları düzenleme

Ana Liste Ekranı

İlk olarak plaklarımı listeleyeceğim ve giriş ekranı olarak kullanacağım ekranı düzenleyerek işe başladım. Ekrana bir tane tablo bileşeni ekledim ve veri kaynağı olarak da daha önce eklediğim web servisi ile gelen eylemi gösterdim.

Artık tablomda bu eylem ve dolayısıyla web servisi çağrısından dönen veri setinden istediğim parametreleri kolonlara atayabilirim. Bu atamayı tablonun ilk elemanları için yapmam yeterli, geri kalan satırlar otomatik olarak doluyor.

Ekranım hazır, son olarak da tablodan veri alacağımız servisi, ekranın ilk yüklenmesi sırasında çağrılması için ekranın “Initial Actions” bölümünden eklemek gerekiyor.

Tablodaki tüm değerleri yerleştirdikten sonra sıra yaptığımız ekranı denemeye geldi. Ekranın üst orta bölümündeki açılır menüden “Preview”i seçip oka tıklayarak uygulamanın yeni sekmede açılmasını bekliyoruz.

Oley, servisten tüm veriler geldi ve ekranım oluştu. Hadi, şimdi yeni plak ekleme ekranı yapalım.

Plak Ekleme Ekranı

Sağ üstte yer alan “New Screen” düğmesine bastığımda yeni ekran ekleyeceğim bu popup açıldı. Soldaki sekmeden çeşit çeşit hazır sayfa kalıplarından birini seçip ekleyebiliyoruz.

Boş bir ekran eklemeyi tercih ederek ilerledim ve kalbim gibi temiz bir ekran yaratıldı. Yeni yarattığım bu ekrana, ihtiyacım olan bileşenleri (etiketler, girdi alanları, açılır girdi alanı ve bir düğme) ekleyerek plak ekleme formu haline getirdim.

Burada biraz ayrıntıya girmem gerekiyor. Ekranda plak yaratmam için gerekli bilgileri alırken plak türü bilgisi web servisinden otomatik gelsin istedim. Bunu yapmak için önce ekran yüklenirken türleri döndürecek web servisi çağrısını “Initial actions”dan ekledim. Sonrasında da açılır liste bileşeninin özelliklerine yine aynı web servisi çağrısını ve ilgili alanları ekledim.

Son adım olarak da “Ekle” düğmesine tıklayınca yapacağı hareketi “Click Actions” bölümünden eylem ekleyerek tanımladım. Ekranın hemen sağında göreceğiniz gibi, iki tane hareket tanımladım, ilki web servisini çağıran diğeri de bu ekranı kapatıp (Go back) ana liste ekranına döndürek olan.

Böylece plağım başarıyla kaydedildikten sonra başka bir işlem yapmadan tüm listeyi görebileceğim tekrar. Yine görseldeki göreceğiniz gibi, bileşenleri web servisi parametreleri ile kolayca eşleyip servis çağrısı ayarını düzenleyebiliyoruz.

Hazır olduğuna göre artık ana liste ekranında gerekli ayarları yaparak bu yeni plak ekle ekranımıza erişebiliriz.

Ana liste ekranın sağ üst köşesine bir düğme ekledim ve “Styling” sekmesinden güzel bir artı ikonu bulup atadım.

Sonrasında gerekli eylemleri ekleyerek yeni sayfamı bağladım.

Eklediğim eylemleri hemen açıklayayım, ilki plak ekleme ekranımı listemin üzerinde popup olarak açacak, diğer hareket ise plak eklendikten sonra listemi güncellemek için gerekli web servis çağrısını yapacak. Artık hazırım, hadi test edelim.

Ekranım düzgün açıldı ve türler de otomatik olarak servisten dönen veri ile dolduruldu. Şimdi de deneyelim bakalım, “Ekle” düğmesine bastığımız zaman kaydedip listemizi güncelleyecek mi?

Yaşasın sorunsuz çalışıyor! :)

Plak Düzenleme / Silme Ekranları

Liste ekranımdaki tablonun son kolonu seçip en sağdaki “Styling” sekmesindeki “Table Column” bölümünden yeni bir kolon ekledim ve bu kolona plak silme ve düzenleme düğmeleri koydum.

Sonrasında da yeni satır yaratıp içine de iki adet düğme bileşeni ekledim. Düğmeleri de yine “Styling” bölümünden şirin ikonlarla süsledim.

Sıra geldi, eylem eklemeye. Silme kısmı daha hızlı olacağı için ondan başladım.

Önce silmemiz sonra da listeyi yenilememiz gerektiği için arka arkaya işleyecek şekilde iki web servisi çağrısı yapacak eylemleri ekledim. Silerken de bir onay alması için gerekli soruyu ilk eylemin içine yazdım.

Hemen test ettim ve başarıyla sildi.

Düzenleme için ise yeni ekran eklememiz gerekecek. Sıfırdan eklemek yerine, mevcut plak ekleme ekranını kopyalayarak devam ettim.

Ekranlar sekmesinden plak ekle ekranımı “Duplicate” işlevini kullanarak çoğalttım, bu işlem sırasında yeni ekranımın adını PlakDüzenle olarak tanımladım.

Ekranımız plak ekle ekranı ile neredeyse aynı olmasına rağmen tabii temel bazı noktalar farklı. En önemlisi liste ekranında düzenle düğmesine basıldığında ilgili kaydın numarası yani IDsini düzenleme ekranına geçirmemiz gerekiyor. Bunu yolu da oldukça basit.

Önce parametreye ihtiyacı olan düzenleme ekranının “Screen Inputs”, ekran girdileri bölümünde bir parametre ekliyoruz .

Sonra liste ekranına dönüp Düzenle düğmesinin eylem ekleme bölümüne dönüyoruz. Daha önce yaptığım gibi Navigation başlığı altındaki “Go To” eylemini seçiyoruz. Açılan formdan Plak Düzenle ekranını seçtiğimiz zaman, üstte yarattığımız PlakID değişkeni de beliriyor. Eğer hedef ekranda başka parametreler de tanımlanmış olsaydı, bu listede görebilecektik.

Açılan listeden de o parametreyi nasıl doldurmak istiyorsak o şekilde ayarlıyoruz. Ben ilgili satırdaki kayıt numarasını göndermeyi tercih ettim.

Plak Düzenle ekranına plak kayıt numarasını gönderdiğim için web servisime de bu bilgiyi göndererek plağın detaylarını ekran bastırabildim.

Nasıl, işte şöyle:

Plak Düzenle ekranımda “Initial Actions” bölümünden web servisimi çağıracak bir eylem ekledim. Kayıt numarası olarak da daha önceden ekranıma eklediğim ve değerini liste ekranımda gönderdiğim PlakID’yi gösterdim. Böylece ekranım açılırken web servisim çağırılarak hedef plağın kayıtları elime geçti.

Bileşenlerimin değerlerini de bu çağırdığım web servisinden gelen sonuçlarla kolaylıkla doldurabildim.

Sonuç:

Gösterge Paneli

Plaklarımla ilgili tüm temel işleri tamamladım, bir de eldeki plaklarla ilgili ufak bir istatistik elimin altında olsun istedim. Daha önce Plak Ekle kısmında anlattığım gibi yeni bir ekran yarattım ve içinde bir adet “Pie Chart — Pasta Grafiği” bileşeni ekledim. Bu grafiği de daha önce web servisimde plak istatistiklerini döndüren ilgili işlev ile besledim.

Burada en beğendiğim özelliklerden bir tanesi de bu grafiğim stil ayarlarından pasta dilimlerinin renklerini istediğimiz gibi ayarlayabilmek oldu.

Haydi test zamanı:

Gösteri Zamanı

Yaptık iyi güzel de nerede kullanacağız, tabii ki gerçek bir mobil cihazda!

Daha önce bahsettiğim gibi Kuika native olarak Android uygulaması paketi yaratabiliyor, bunu telefonunuza yükleyebilir ya da markete koyabilirsiniz. İşte uygulamam:

Plak ikonu da çok yakıştı :)
Plak Listesi Ekranı
Plak Ekleme ekranı ve Plak türlerinin listesi
Silme testim başarılı
Plak Düzenleme Ekranım
Plaklarımın çoğu Türk Sanat Müziği’ymiş :)

Son Cümleler

Bir hayli detaylı anlatmaya çalıştım umarım sıkıcı olmamıştı. Teknik kararlar, web servisi yazımı ve sunucuya yüklenmesini de listeme dahil edersek tüm uygulamanın geliştirilmesi aşağı yukarı 5 saatimi aldı. Youtube’dan Kuika Builder 101 videolarını izleme, paneli öğrenme, web servisi geliştirme gibi kısımları atarsak 1–2 saatte uygulamayı sıfırdan telefona kurmaya kadar getirmek mümkün ve bu bence inanılmaz bir hız.

Bakalım gelecekte az kod platformları daha neleri ışık hızına indirecek?

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store