بناء دليل تفاعلي للتطبيقات

غالبًا ما تواجه فرق الدعم صعوبة عند استخدام تطبيقات لم يقوموا بتثبيتها مطلقًا. تُعد أدلة الـ PDF حلاً سيئًا لأن لا أحد يقرأها.

لقد قمت ببناء أداة تتيح للمستخدمين التفاعل مع لقطات شاشة حقيقية للتطبيقات داخل المتصفح. يبدو الأمر وكأنك تستخدم الهاتف الفعلي؛ تنقر على زر في لقطة الشاشة، فتظهر الشاشة التالية.

كيف يعمل الأمر

استخدمت Firebase Storage للصور و vanilla JavaScript للمنطق البرمجي. لقد تجنبت استخدام المكتبات الخارجية للحفاظ على خفة الأداة.

السر يكمن في استخدام نقاط ساخنة (hotspots) تعتمد على النسب المئوية. فبدلاً من استخدام بكسلات ثابتة، قمت بتحديد المناطق القابلة للنقر باستخدام إحداثيات من 0 إلى 100. هذا يحافظ على محاذاة الأزرار حتى عند تغيير حجم النافذة.

يستخدم النظام آلة حالة (state machine) بسيطة. كل شاشة تحتوي على:

  • معرف صورة (image ID)
  • قائمة بالنقاط الساخنة (hotspots)
  • وجهة مستهدفة

الأدوات التي قمت ببنائها

قياس الإحداثيات بالعين المجردة عملية بطيئة. لذا قمت ببناء محرر HTML مستقل لتسريع العملية.

  • رفع لقطة شاشة إلى canvas.
  • سحب الماوس لرسم مستطيل.
  • يقوم المحرر بحساب الإحداثيات المئوية تلقائيًا.
  • ربط المنطقة بشاشة أخرى عبر قائمة منسدلة.
  • تصدير الكائن النهائي مباشرة إلى الكود الخاص بك.

لمساعدة المستخدمين، أضفت توهجًا أزرق نابضًا للمناطق القابلة للنقر، مما يوضح لهم بالضبط أين يمكنهم النقر.

دروس تقنية رئيسية

  1. أمان Firebase: لا تقم ببناء روابط التخزين (storage URLs) يدويًا. استخدم طريقة getDownloadURL من الـ SDK. يتضمن هذا رمز المصادقة (auth token) اللازم. وبدونه، ستفشل عملية تحميل الصور دون إظهار أي خطأ.

  2. إصلاحات التخطيط: في تخطيط flex column ، قم بتعيين ارتفاع صريح للعنصر الأب. واضبط min-height على 0 للعناصر الأبناء. هذا يمنع انهيار التخطيط ومشكلات تجاوز المحتوى (overflow).

  3. تغيير الحجم (Scaling): استخدم خاصية transform scale في CSS. يتيح ذلك للصورة والنقاط الساخنة تغيير حجمهما معًا، مما يحافظ على تناسب كل شيء بغض النظر عن حجم الشاشة.

  4. السرعة: جلب الروابط واحدًا تلو الآخر يسبب بطئًا. لقد قمت بتنفيذ ذاكرة تخزين مؤقت في الذاكرة (in-memory cache) ودالة تحميل مسبق في الخلفية. يتم تحميل جميع الصور بالتوازي عند فتح النافذة المنبثقة (modal)، مما يجعل التنقل يبدو فوريًا.

النتيجة

  • 20 شاشة مع تنقل كامل.
  • 52 نقطة ساخنة تفاعلية.
  • انعدام أشرطة التمرير بفضل التغيير التلقائي للحجم.
  • انتقالات فورية من خلال التحميل المسبق.

المصدر: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e