Ana içeriğe geç

Web Uygulaması

Web Uygulaması, üyeye dönük PWA'dır — üyelerin bir bağlantıdan, bir QR koddan ya da uygulama olarak yükledikten sonra açtıkları sayfa. Bakiyelerini ve hediyelerini gördükleri, ödemek için tarattıkları, menülere veya şubelere göz attıkları, kupon kodlarını girdikleri ve Wallet Pass'lerini indirdikleri yer.

Telefonda Web Uygulaması — "Revolution Coffee Shop" başlığı, "¡Hola Angel Garcia!" şeklinde kişiselleştirilmiş bir karşılama, "Añadir a Google Wallet" düğmesine sahip bir puan bakiye kartı, bir teslimat fırsatını tanıtan bir karusel slaydı ve Inicio / Delivery / Restaurantes / Regalos içeren bir alt navigasyon çubuğu
Kısaca

Web Uygulaması tasarımının tamamı artık self-servis. Kullanıcı Arayüzleri → Web Uygulaması altında App Editor'ü bulursunuz: tema ve marka renkleri, her ekran ve bileşenleri, popup'lar ve gelişmiş stil ayarları. Değişiklikler bir taslağa kaydedilir; yani Publish düğmesine basana kadar üyelerinizin gördüğü hiçbir şey değişmez — önce Preview ile önizleyebilir, sonra gerekirse History üzerinden geri alabilirsiniz. Günlük işlerde en sık yapılan düzenleme yine ana ekrandaki karusel: banner görsellerini ve üye dokunduğunda ne olacağını değiştirmek.

App Editor

Hub'da Kullanıcı Arayüzleri → Web Uygulaması'nı açın. Soldaki panel editörün haritasıdır; sağdaki alan, seçtiğiniz öğenin ayarlarını gösterir.

App Editor — solda Theme & Brand, Popups, Screens (HomeScreen, Login Page, Verification Page, Registration Page, Gifts, Profile, Activities ve daha fazlası) ve Advanced; HomeScreen seçili, ekran düzeyindeki Settings (arka plan, native barlar) ve bileşen yığını görünüyor: ImageBox, GreetingBox, ProgressBox, üç Carousel ve bir ImageButtonBox. Üst barda taslak durumu, doğrulama uyarıları, History, Preview, Discard draft ve Publish var.

Editör dört alandan oluşur:

  • Theme & Brand — genel görünüm: marka renkleri, köşe yarıçapı, yazı tipi ve navigasyon çubuğu.
  • Popups — girişten sonra, uygulamanın herhangi bir yerinde gösterilen, bir ekrana bağlı olmayan mesajlar.
  • Screens — uygulamanın her ekranı için bir kayıt: ana ekran artı yerleşik sayfalar (giriş, doğrulama, kayıt, hediyeler, profil, işlemler, kod girişi, kataloglar…).
  • Advanced — normal panellerin kapsamadığı uç durumlar için ham stil ayarları.

Taslak → Preview → Publish

Düzenlediğiniz hiçbir şey doğrudan yayına girmez. Her Save, bir taslağa yazar; üst bar yayımlanmamış değişiklik olup olmadığını söyler. Oradan:

  • Preview — taslağı, yayımlamadan önce üyelerin göreceği haliyle görün.
  • Publish — taslağı tüm üyeler için yayına alın.
  • Discard draft — yayımlanmamış değişiklikleri atın ve canlı sürüme dönün.
  • History — yayımlanan her sürüm saklanır; istediğinize geri dönebilirsiniz.

Üst bar ayrıca bir ayarda uygulamanın yorumlayamayacağı bir değer olduğunda (örneğin sayı beklenen yerde metin) doğrulama uyarıları gösterir. Yayımlamadan önce uyarıları giderin — taslak sürekli denetlenir, rozet siz düzenledikçe güncellenir.

Theme & Brand — genel görünüm

Web Uygulaması kimliğinizi buradan alır: marka renkleri (birincil, ikincil, metin), kartlarda ve düğmelerde kullanılan köşe yarıçapı ve yazı tipi. Uygulamanın altındaki navigasyon çubuğunu da buradan yönetirsiniz: renkleri, etiketlerin gösterilip gösterilmeyeceği, hangi öğelerin hangi sırada görüneceği ve çubuğun (ya da ortadaki düğmenin veya üst barın) görünür olup olmayacağı.

Buradaki ayarlar her yerde geçerlidir — bir marka rengini bir kez değiştirin, bütün ekranlar onu izler.

Screens

Ekranlar iki türdedir:

Ana ekran bir tuvaldir. Ekleyebileceğiniz, silebileceğiniz, sıralayabileceğiniz, çoğaltabileceğiniz ve düzenleyebileceğiniz bileşenlerden oluşan bir yığındır — logo görseli, karşılama, seviye/puan ilerleme çubuğu, karuseller, düğme sıraları, metin blokları ve daha fazlası. Her bileşen kendi ayar paneline açılır: bir yanda içeriği (görsel, metin, bağlantı) seçersiniz, öte yanda görünümü (renkler, boşluklar, hizalama) ayarlarsınız. Uygulamanızın görsel kişiliğinin büyük kısmı burada yaşar.

Diğer ekranlar yerleşiktir. Gifts, Profile, Activities, giriş ve kayıt akışı ya da kod girişi gibi sayfaların düzeni sabittir — düzenlediğiniz şey metinleri (ekran başlıkları, düğme etiketleri, boş durum ve hata mesajları) ve görünümüdür (arka plan rengi veya görseli). Böylece her akış doğru çalışmaya devam eder, siz de her dilde kendi ses tonunuzu kullanabilirsiniz.

Her ekranın ayrıca arka planı ve — yalnızca programınızın native mobil uygulaması varsa geçerli — o ekranda telefonun durum ve alt barlarının stili için küçük bir Settings bloğu vardır.

Karusel — banner alanınız

Karusel en çok düzenlenen bileşendir ve ana ekranda dönen bir banner alanı gibi çalışır. Slayt başına şunları kontrol edersiniz:

  • Görsel — slayt ekleyin, silin veya sıralayın; her slayt tek bir görseldir.
  • Aksiyon — üye dokununca ne olacağı: hiçbir şey (dekoratif), popup açmak, bir URL açmak (uygulama içinde veya yeni sekmede), "bu uygulamayı yükle" istemini tetiklemek, Wallet Pass indirmek, yol tarifi açmak veya e-posta başlatmak.
  • Kimin göreceği — bir slaytı isteğe bağlı olarak belirli etiketlere sahip üyelerle sınırlayın. Herkese göstermek için boş bırakın. Aynı karuselde yalnızca-VIP veya segmente özel banner'lar böyle yayınlanır.

Karuselin genel ayarları (arka plan, otomatik oynatma, hız, sonsuz döngü) slayt listesinin üzerindedir. Bir ana ekranda birden fazla karusel olabilir — birçok işletme tek slaytlık bir karuseli dokunulabilir bir banner-düğme olarak kullanır.

Popup'lar

Popup'lar girişten sonra, üye hangi ekrandaysa onun üzerinde görünür. Her popup'ın içeriği (görsel, metin, aksiyon düğmesi), bir gecikmesi ve bir gösterim sınırı vardır — bir üyenin onu kaç kez göreceği. Tipik kullanımlar: "bu uygulamayı ana ekranına ekle" hatırlatması, sezonluk kampanya duyurusu, tek seferlik bir bilgilendirme.

Advanced

Advanced bölümü ham stil ayarlarını açar (bileşen ve sayfa bazlı stiller, navigasyon çubuğu ve giriş alt bilgisi için özel CSS). Bunlar güvenlik ağı olmayan, ileri düzey kullanıcı ayarlarıdır — hatalı bir değer tüm üyeler için stili bozabilir. Aynı taslak kurallarına tabidirler; yani Discard draft, ters giden bir denemeyi geri alır. Yine de emin değilseniz burada düzenleme yapmadan önce destek ekibine danışın.

Nereden başlamalı

Editör derindir — bilerek: ileri düzey bir kullanıcı neredeyse her şeyi biçimlendirebilir. Günlük işler için çoğu zaman Screens → HomeScreen ve üzerindeki karusellerden fazlasına ihtiyacınız olmayacak. Hazır Templates (şablonlar) yolda; büyük yeniden tasarımları bileşen bileşen kurmak yerine tek tıkla başlanan bir noktaya dönüştürecek.