Kuika platformu, mobil uygulamalarınıza hibrit web ekranlar eklemenizi sağlayacak altyapıya sahiptir. Bu sayede, web ekranlarında kullandığınız ancak mobil uygulamalarda bulunmayan elementleri ve özellikleri hibrit çözümlerle kolayca kullanabilirsiniz. Bu kullanıcı kılavuzu, uygulamalarınıza hibrit web ekranlar eklemeyi adım adım anlatacaktır.

Bu Eğitim İçeriğinde Ele Alınan Başlıklar:

Mobil Uygulama Oluşturma,
Hibrit Ekran Oluşturmak için Web Ekranlar Ekleme.

Mobil Uygulama Oluşturun

Kuika platformuna giriş yaptıktan sonra “Apps” ekranında yeni bir mobil uygulama oluşturmak için “New App” butonuna tıklayın.

‍

Uygulama için bir isim (1) girin.
“Mobile compatible app” (2) seçeneğini işaretleyin ve sağ alt köşedeki “CREATE” (3) butonuna tıklayın.

Örneğin, açılan “UI Design” modülünde “Elements”panelinden “GaugeChart” elementini aradığınızda, bu elementin yalnızca web uygulamalarında kullanılabildiğini göreceksiniz. “GaugeChart” elementini kullanabilmek için hibrit ekran oluşturmanız gerekecektir.

Hibrit Ekran Oluşturmak İçin Web Screens Ekleme

“UI Design” modülünün sol kenarındaki “Screens” (1) panelini açın.
“WEB SCREENS” (2) bölümünün yanında bulunan “+” ikonuna tıklayın.
“New Screen” (3) seçeneğini belirleyin.

‍

Ekran için bir isim (1) verin ve “CREATE” (2) butonuna tıklayın.

Açılan “Web Screen” ekranında “UI Design” modülünde sol kenardaki “Elements” panelinden “GaugeChart” elementini kullanabilirsiniz.

“GaugeChart” elementini ekrana sürükleyip bırakın.
Ardından uygulamanızın ana sayfasına gidin ve sol kenardaki “Elements” panelinden bir “Button” elementi sürükleyip bırakın. Butona isim verin (örneğin; “navigate to new screen”).

“navigate to new screen” butonuna sağ kenardaki “Properties” panelinden “+ADD ACTION” açılır menüsünden “Onclick>Navigation>Navigate” aksiyonunu ekleyin.

Hedef ekran olarak “To Screen” alanından oluşturduğunuz web ekranını seçin. (örneğin; KuikaWebScreen)

Sağ üst köşede bulunan “RUN” butonuna tıklayarak uygulamanızın ön izlemesini yapabilirsiniz.

Ana ekranı görüntülediğinizde “navigate to new screen” adını verdiğiniz butona tıklayın.

Butona tıkladıktan sonra, yeni ekrana geçerek “GaugeChart” elementini görüntüleyebilirsiniz.

Not: Web ve mobil uygulama geliştirme sürecinde proje tipine bağlı olarak element ve aksiyon farklılıklarını öğrenmek için Web ve Mobil Uygulama Farklarını Öğrenin içeriğimize göz atabilirsiniz.