İnteraktif Bir Uygulama Rehberi Oluşturmak

Destek ekipleri, daha önce hiç yüklemedikleri uygulamaları kullanırken genellikle zorluk yaşarlar. PDF kılavuzlar kötü bir çözümdür çünkü kimse onları okumaz.

Kullanıcıların bir tarayıcı içinde gerçek uygulama ekran görüntüleriyle etkileşime girmesini sağlayan bir araç geliştirdim. Gerçek bir telefon kullanıyormuş hissi veriyor. Bir ekran görüntüsündeki düğmeye tıklıyorsunuz ve bir sonraki ekran görünüyor.

Nasıl Çalışır

Görseller için Firebase Storage, mantık için ise vanilla JavaScript kullandım. Hafif tutmak için harici kütüphanelerden kaçındım.

İşin sırrı, yüzde tabanlı hotspot'lar kullanmakta. Sabit pikseller yerine, tıklanabilir alanları 0 ile 100 arasındaki koordinatları kullanarak tanımlıyorum. Bu, pencere boyutu değişse bile düğmelerin hizalı kalmasını sağlıyor.

Sistem basit bir durum makinesi (state machine) kullanıyor. Her ekran şunlara sahiptir:

  • Bir görsel ID'si
  • Bir hotspot listesi
  • Bir hedef konum

Geliştirdiğim Araçlar

Koordinatları göz kararı ölçmek yavaştır. Süreci hızlandırmak için bağımsız bir HTML editörü geliştirdim.

  • Bir ekran görüntüsünü canvas'a yükleyin.
  • Bir dikdörtgen çizmek için farenizi sürükleyin.
  • Editör, yüzde koordinatlarını otomatik olarak hesaplar.
  • Alanı bir açılır menü (dropdown) aracılığıyla başka bir ekrana bağlayın.
  • Nihai nesneyi doğrudan kodunuza aktarın.

Kullanıcılara yardımcı olmak için tıklanabilir alanlara yanıp sönen mavi bir parlama ekledim. Bu, tam olarak nereye dokunabileceklerini gösteriyor.

Temel Teknik Dersler

  1. Firebase Güvenliği: Depolama URL'lerini manuel olarak oluşturmayın. SDK'daki getDownloadURL yöntemini kullanın. Bu yöntem gerekli kimlik doğrulama (auth) token'ını içerir. Bu olmadan, görseller hata göstermeden yüklenemez.

  2. Düzen (Layout) Düzeltmeleri: Bir flex column düzeninde, üst öğeye (parent) açık bir yükseklik değeri atayın. Alt öğelerde (children) min-height değerini 0 yapın. Bu, düzenin çökmesini ve taşma (overflow) sorunlarını önler.

  3. Ölçeklendirme: CSS transform: scale özelliğini kullanın. Bu, görselin ve hotspot'ların birlikte yeniden boyutlandırılmasını sağlar. Ekran boyutundan bağımsız olarak her şeyin orantılı kalmasını sağlar.

  4. Hız: URL'leri tek tek çekmek gecikmeye (lag) neden olur. Bellek içi (in-memory) bir önbellek ve arka plan ön yükleme (preload) fonksiyonu uyguladım. Modal açıldığında tüm görseller paralel olarak yüklenir. Bu, navigasyonun anlık hissedilmesini sağlar.

Sonuç

  • Tam navigasyona sahip 20 ekran.
  • 52 etkileşimli hotspot.
  • Otomatik ölçeklendirme sayesinde sıfır kaydırma çubuğu.
  • Ön yükleme sayesinde anlık geçişler.

Kaynak: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e