Web Prototip Hazırlama

Bu öğrenme içeriğinde ekran tasarımlarını hazırladığımız bir fikrim var web uygulamasının prototiplemesini gerçekleştireceğiz. Öğrenme içeriği boyunca, Kuika Low-code platformunun sunduğu çeşitli sistem aksiyonlarından faydalanacağız. Bu sayede, fikirlerinizi hızlı ve etkili bir şekilde gerçeğe dönüştürmenin yollarını keşfedeceksiniz. 

Prototiplemeye başlayalım.

1. Master Screen’i açın. 
2. Dashboard ekranı temsil eden Menü öğesini seçin. Navigate aksiyonunu ekleyin.
3. Açılacak ekran olarak Dashboard ekranını seçin ve ekran açma biçimi olarak Current seçimi yapın.
4. Şimdi aynı işlemi diğer menü öğeleri için de uygulayın.

Master Screen içerisinde çalışmaları tamamladıktan sonra Dashboard ekranını açın.

5. Item Tree aracılığıyla Content Menu’yü seçin.
6. Profile öğesini seçin ve Navigation aksiyonu ekleyin.
7. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
8. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
9. Dashboard'a ekranda yer alan fikirlere yönelik detay ekranına erişmek için GalleryView içinde yer alan Kolon'u seçin ve Navigate aksiyonu ekleyin.
10. Yönlendirilecek olan SuggestionDetail ekranını seçin ve Drawer seçimini yapın.
11. Fikirlerin listelendiği alanda Vote ve Comment ikonlarına ilgili ekranlara yönlendirmeyi sağlayan Navigate Aksiyonunu ekleyin, ekran açılma biçimlerini seçin ve ekran boyutlarını düzenleyin.

Dashboard ekranında yer alan sistem aksiyonu bağlama işlemlerini gerçekleştirdik.

12. Şimdi Kullanıcı listeleme ekranını açın.
13. Item Tree aracılığıyla Content Menu’yü seçin.
14. Tıpkı Dashboard ekranında olduğu gibi Profile öğesini seçin ve Navigation aksiyonu ekleyin.
15. Profile ekranını seçin ve ekran açılma tipi olarak Drawer’ı, yön olarak Right’ı seçin.
16. Ardından Logout öğesini seçin ve Authorization aksiyonları içerisinde yer alan Logout aksiyonunu ekleyin.
17. Tablo’da bulunan göz ikonunu seçin. Navigate aksiyonu ekleyin.
18. Açılacak ekran olarak UserDetail seçimini yapın ve ekran açılma tipini Drawer seçin.
19. Açılma yönü olarak Right seçin.

Liste ekranından sonra Form ekranı ile devam edelim.

20. Yeni fikir ekleme ekranını açın.
21. Header’da yer alan ikonu seçin.
22. GoBack aksiyonunu ekleyin.

Aynı işlemi UserDetail ekranı için de gerçekleştirelim.

23. UserDetail ekranını açın.
24. Header’da yer alan kapatma ikonunu seçin ve GoBack aksiyonunu ekleyin.

Web uygulama için tasarımlarını birlikte hazırladığımız ekranların prototiplemesini tamamladık. İsterseniz RUN butonunu tıklayarak prototipinizi test edebilirsiniz.

Bu öğrenme içeriğinde yer alan işlemleri daha önce ödev olarak size sunulan form ekranları, detay ekranları ve profil ekranları için de gerçekleştirmenizi bekliyoruz.