ساخت یک راهنمای تعاملی اپلیکیشن
تیمهای پشتیبانی اغلب زمانی که از اپلیکیشنهایی استفاده میکنند که هرگز نصب نکردهاند، با چالش روبرو میشوند. دفترچه راهنمای PDF راه حل بدی است، چون کسی آنها را نمیخواند.
من ابزاری ساختم که به کاربران اجازه میدهد با اسکرینشاتهای واقعی اپلیکیشن در داخل یک مرورگر تعامل داشته باشند. این تجربه، حس استفاده از یک گوشی واقعی را منتقل میکند. شما روی یک دکمه در اسکرینشات کلیک میکنید و صفحه بعدی ظاهر میشود.
نحوه عملکرد
من از Firebase Storage برای تصاویر و از vanilla JavaScript برای منطق برنامه استفاده کردم. برای سبک نگه داشتن برنامه، از کتابخانههای خارجی اجتناب کردم.
راز کار استفاده از نقاط حساس (hotspots) بر پایه درصد است. به جای پیکسلهای ثابت، من نواحی قابل کلیک را با استفاده از مختصات ۰ تا ۱۰۰ تعریف میکنم. این کار باعث میشود دکمهها حتی با تغییر اندازه پنجره، تراز باقی بمانند.
این سیستم از یک ماشین حالت (state machine) ساده استفاده میکند. هر صفحه دارای موارد زیر است:
- یک شناسه تصویر (image ID)
- فهرستی از نقاط حساس (hotspots)
- یک مقصد هدف
ابزارهایی که ساختم
اندازهگیری مختصات با چشم، فرآیندی کند است. من یک ویرایشگر HTML مستقل ساختم تا سرعت این فرآیند را بالا ببرم.
- آپلود یک اسکرینشات در یک canvas.
- کشیدن ماوس برای رسم یک مستطیل.
- ویرایشگر مختصات درصدی را به طور خودکار محاسبه میکند.
- اتصال ناحیه به صفحهای دیگر از طریق یک منوی کشویی (dropdown).
- خروجی گرفتن از شیء نهایی مستقیماً در کد خودتان.
برای کمک به کاربران، یک درخشش آبی ضرباندار به نواحی قابل کلیک اضافه کردم. این کار دقیقاً نشان میدهد که کاربر کجا میتواند ضربه بزند.
درسهای فنی کلیدی
۱. امنیت Firebase: آدرسهای (URLs) ذخیرهسازی را به صورت دستی نسازید. از متد getDownloadURL از SDK استفاده کنید. این کار شامل توکن احراز هویت لازم است. بدون آن، تصاویر بدون نمایش خطا، بارگذاری نخواهند شد.
۲. اصلاح چیدمان (Layout): در یک چیدمان flex column، یک ارتفاع صریح برای والد (parent) تعیین کنید. مقدار min-height را برای فرزندان (children) روی ۰ قرار دهید. این کار از فروپاشی چیدمان و مشکلات سرریز (overflow) جلوگیری میکند.
۳. مقیاسبندی (Scaling): از ویژگی transform: scale در CSS استفاده کنید. این کار اجازه میدهد تصویر و نقاط حساس با هم تغییر اندازه دهند و همه چیز بدون توجه به اندازه صفحه، متناسب باقی بماند.
۴. سرعت: واکشی (fetching) تکتک URLها باعث ایجاد تأخیر میشود. من یک حافظه پنهان (cache) در حافظه و یک تابع پیشبارگذاری (preload) در پسزمینه پیادهسازی کردم. تمام تصاویر هنگام باز شدن مودال (modal) به صورت موازی بارگذاری میشوند. این کار باعث میشود پیمایش (navigation) آنی به نظر برسد.
نتیجه
- ۲۰ صفحه با پیمایش کامل.
- ۵۲ نقطه حساس تعاملی.
- بدون نوار اسکرول به لطف مقیاسبندی خودکار.
- انتقال آنی از طریق پیشبارگذاری.