İnteraktif Bir Uygulama Rehberi Oluşturmak

Destek ekipleri genellikle daha önce hiç yüklemedikleri uygulamalarla ilgili zorluk yaşarlar.

Ekran görüntülerinden oluşan bir PDF standart çözümdür. Çoğu insan PDF okumaz. Ben daha iyi bir şey inşa etmek istedim. Gerçek uygulama gibi hissettiren bir rehber istedim. Ana ekranı görürsünüz, bir düğmeye tıklarsınız ve bir sonraki ekran görünür.

Gerçek ekran görüntüleri ve tıklanabilir hotspotlar kullanarak interaktif bir rehber oluşturdum.

Nasıl Çalışır

Görseller için Firebase Storage, mantık işlemleri için ise vanilla JavaScript kullandım. Harici bir kütüphane kullanmadım.

  • Her ekran tam bir görselden oluşur.
  • Görselin üzerine hotspot olarak adlandırılan görünmez dikdörtgenler yerleştiririm.
  • Bu hotspotlar piksel yerine yüzdeler kullanır. Bu, pencere boyutu değiştiğinde hizalı kalmalarını sağlar.
  • Basit bir durum makinesi (state machine) navigasyonu yönetir. Her ekranın bir ID'si, bir görseli ve bir hotspot listesi vardır.

Editör

Koordinatları elle ölçmek yavaştır. Süreci hızlandırmak için bağımsız bir HTML editörü oluşturdum.

  • Bir ekran görüntüsü yükleyin.
  • Bir hotspot çizmek için farenizi sürükleyin.
  • Hotspot'ı bir hedef ekrana bağlayın.
  • Kodu doğrudan dışa aktarın.

Tasarım Tercihleri

Her ekran tam navigasyona sahip değildir. Karışıklığı önlemek için tıklanabilir alanlara yanıp sönen mavi bir parıltı ekledim. Bu, kullanıcılara tam olarak nereye dokunabileceklerini gösterir.

Temel Teknik Dersler

  • Firebase Storage: URL'leri manuel olarak oluşturmayın. SDK yöntemi olan getDownloadURL'yi kullanın. Bu yöntem, güvenlik kurallarını aşmak için gereken kimlik doğrulama (auth) token'ını içerir.
  • CSS Flexbox: Bir sütun düzeninde flex: 1 kullanıyorsanız, üst öğenin (parent) açık bir yüksekliği olmalıdır. Taşmayı önlemek için alt öğeye (child) min-height: 0 değerini verin.
  • Performans: Her tıklamada Firebase'i çağırmak gecikmeye neden olur. Bellek içi (in-memory) bir önbellek uyguladım ve modal açıldığında tüm görselleri önceden yükledim. Bu, navigasyonu anlık hale getirir.
  • Ölçeklendirme: CSS transform: scale() özelliğini kullanın. Bu, ekran boyutundan bağımsız olarak görselin ve hotspotların mükemmel şekilde hizalı kalmasını sağlar.

Sonuç

  • Gerçek bir telefon gibi gezilebilen 20 ekran.
  • Görsel ipuçlarına sahip 52 hotspot.
  • Ön yükleme ve önbelleğe alma sayesinde anlık yükleme.
  • Herhangi bir modal boyutuna uyum sağlayan duyarlı (responsive) tasarım.

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