ઇન્ટરેક્ટિવ એપ ગાઈડ બનાવવી

સપોર્ટ ટીમોને ઘણીવાર એવા એપ્સનો ઉપયોગ કરવામાં મુશ્કેલી પડે છે જે તેમણે ક્યારેય ઇન્સ્ટોલ કરી હોતી નથી. PDF મેન્યુઅલ એ ખરાબ ઉકેલ છે કારણ કે તેને કોઈ વાંચતું નથી.

મેં એક એવું ટૂલ બનાવ્યું છે જે વપરાશકર્તાઓને બ્રાઉઝરની અંદર વાસ્તવિક એપ સ્ક્રીનશોટ સાથે ઇન્ટરેક્ટ કરવાની મંજૂરી આપે છે. તે વાસ્તવિક ફોન વાપરવા જેવું લાગે છે. તમે સ્ક્રીનશોટ પર બટન પર ક્લિક કરો છો, અને પછીની સ્ક્રીન દેખાય છે.

તે કેવી રીતે કામ કરે છે

મેં ઈમેજીસ માટે Firebase Storage અને લોજિક માટે vanilla JavaScript નો ઉપયોગ કર્યો છે. તેને હળવું રાખવા માટે મેં એક્સટર્નલ લાઈબ્રેરીઓ ટાળી છે.

તેનું રહસ્ય ટકાવારી-આધારિત (percentage-based) હોટસ્પોટ્સનો ઉપયોગ કરવામાં છે. ફિક્સ્ડ પિક્સેલ્સને બદલે, હું 0 થી 100 સુધીના કોઓર્ડિનેટ્સનો ઉપયોગ કરીને ક્લિક કરી શકાય તેવા વિસ્તારો વ્યાખ્યાયિત કરું છું. આનાથી વિન્ડોનું કદ બદલાય તો પણ બટનો એલાઈન રહે છે.

સિસ્ટમ એક સરળ સ્ટેટ મશીનનો ઉપયોગ કરે છે. દરેક સ્ક્રીનમાં હોય છે:

  • એક image ID
  • હોટસ્પોટ્સની એક યાદી
  • એક ટાર્ગેટ ડેસ્ટિનેશન

મેં બનાવેલા ટૂલ્સ

આંખે જોઈને કોઓર્ડિનેટ્સ માપવા તે ધીમું છે. પ્રક્રિયાને ઝડપી બનાવવા માટે મેં એક સ્ટેન્ડઅલોન HTML એડિટર બનાવ્યું છે.

  • કેનવાસ પર સ્ક્રીનશોટ અપલોડ કરો.
  • લંબચોરસ દોરવા માટે તમારા માઉસને ડ્રેગ કરો.
  • એડિટર આપમેળે ટકાવારી કોઓર્ડિનેટ્સની ગણતરી કરે છે.
  • ડ્રોપડાઉન દ્વારા એ વિસ્તારને બીજી સ્ક્રીન સાથે લિંક કરો.
  • અંતિમ ઓબ્જેક્ટને સીધો તમારા કોડમાં એક્સપોર્ટ કરો.

વપરાશકર્તાઓને મદદ કરવા માટે, મેં ક્લિક કરી શકાય તેવા વિસ્તારોમાં પલ્સિંગ બ્લુ ગ્લો (pulsing blue glow) ઉમેર્યો છે. આ બરાબર બતાવે છે કે તેઓ ક્યાં ટેપ કરી શકે છે.

મુખ્ય ટેકનિકલ પાઠ

  1. Firebase Security: સ્ટોરેજ URL મેન્યુઅલી બનાવશો નહીં. SDK માંથી getDownloadURL મેથડનો ઉપયોગ કરો. આમાં જરૂરી auth token સામેલ હોય છે. તેના વગર, ઈમેજીસ એરર બતાવ્યા વગર લોડ થવામાં નિષ્ફળ જશે.

  2. Layout Fixes: flex column લેઆઉટમાં, પેરેન્ટ પર સ્પષ્ટ (explicit) height સેટ કરો. ચિલ્ડ્રન પર min-height 0 સેટ કરો. આ લેઆઉટ કોલેપ્સ અને ઓવરફ્લોની સમસ્યાઓને અટકાવે છે.

  3. Scaling: CSS transform scale પ્રોપર્ટીનો ઉપયોગ કરો. આ ઈમેજ અને હોટસ્પોટ્સને સાથે રિસાઈઝ કરવાની મંજૂરી આપે છે. તે સ્ક્રીન કદને ધ્યાનમાં લીધા વિના બધું જ પ્રમાણમાં રાખે છે.

  4. Speed: એક પછી એક URL ફેચ કરવાથી લેગ (lag) પેદા થાય છે. મેં ઇન-મેમરી કેશ (in-memory cache) અને બેકગ્રાઉન્ડ પ્રીલોડ ફંક્શન અમલમાં મૂક્યું છે. જ્યારે મોડલ ખુલે છે ત્યારે બધી ઈમેજીસ સમાંતર (parallel) લોડ થાય છે. આનાથી નેવિગેશન ઇન્સ્ટન્ટ લાગે છે.

પરિણામ

  • સંપૂર્ણ નેવિગેશન સાથે 20 સ્ક્રીન.
  • 52 ઇન્ટરેક્ટિવ હોટસ્પોટ્સ.
  • ઓટો-સ્કેલિંગને કારણે ઝીરો સ્ક્રોલબાર.
  • પ્રીલોડિંગ દ્વારા ઇન્સ્ટન્ટ ટ્રાન્ઝિશન.

સ્ત્રોત: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e