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

સપોર્ટ ટીમો ઘણીવાર એવી એપ્સ સાથે સંઘર્ષ કરે છે જે તેમણે ક્યારેય ઇન્સ્ટોલ કરી હોતી નથી.

સ્ક્રીનશોટ્સ સાથેની PDF એ પ્રમાણભૂત ઉકેલ છે. મોટાભાગના લોકો PDF વાંચતા નથી. હું કંઈક વધુ સારું બનાવવા માંગતો હતો. હું એક એવી ગાઈડ બનાવવા માંગતો હતો જે અસલી એપ જેવી લાગે. તમે હોમ સ્ક્રીન જુઓ, બટન પર ક્લિક કરો, અને પછીની સ્ક્રીન દેખાય.

મેં અસલી સ્ક્રીનશોટ્સ અને ક્લિક કરી શકાય તેવા હોટસ્પોટ્સ (hotspots) નો ઉપયોગ કરીને એક ઇન્ટરેક્ટિવ ગાઈડ બનાવી.

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

મેં ઈમેજ માટે Firebase Storage અને લોજિક માટે vanilla JavaScript નો ઉપયોગ કર્યો છે. કોઈ બાહ્ય લાઇબ્રેરીનો ઉપયોગ કર્યો નથી.

  • દરેક સ્ક્રીન એક સંપૂર્ણ ઈમેજ છે.
  • હું ઈમેજની ઉપર અદ્રશ્ય લંબચોરસ મૂકું છું, જેને હોટસ્પોટ્સ કહેવામાં આવે છે.
  • આ હોટસ્પોટ્સ પિક્સેલ્સને બદલે ટકાવારી (percentages) નો ઉપયોગ કરે છે. આનાથી વિન્ડોનું કદ બદલાય ત્યારે તેઓ સચોટ રીતે ગોઠવાયેલા રહે છે.
  • એક સાદું સ્ટેટ મશીન (state machine) નેવિગેશન સંભાળે છે. દરેક સ્ક્રીન પાસે એક ID, એક ઈમેજ અને હોટસ્પોટ્સની યાદી હોય છે.

એડિટર

હાથથી કોઓર્ડિનેટ્સ (coordinates) માપવા ધીમું છે. પ્રક્રિયાને ઝડપી બનાવવા માટે મેં એક સ્ટેન્ડઅલોન HTML એડિટર બનાવ્યું છે.

  • સ્ક્રીનશોટ અપલોડ કરો.
  • હોટસ્પોટ દોરવા માટે તમારા માઉસને ડ્રેગ કરો.
  • હોટસ્પોટને ટાર્ગેટ સ્ક્રીન સાથે લિંક કરો.
  • કોડ સીધો એક્સપોર્ટ કરો.

ડિઝાઇન પસંદગીઓ

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

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

  • Firebase Storage: URL જાતે બનાવશો નહીં. SDK મેથડ getDownloadURL નો ઉપયોગ કરો. આમાં સિક્યુરિટી રૂલ્સને બાયપાસ કરવા માટે જરૂરી auth token સામેલ હોય છે.
  • CSS Flexbox: જો તમે કોલમ લેઆઉટમાં flex: 1 નો ઉપયોગ કરો છો, તો પેરેન્ટ પાસે સ્પષ્ટ ઊંચાઈ (explicit height) હોવી જોઈએ. ઓવરફ્લો રોકવા માટે ચાઇલ્ડ પર min-height: 0 સેટ કરો.
  • Performance: દરેક ક્લિક પર Firebase ને કોલ કરવાથી લેગ (lag) વધે છે. મેં ઇન-મેમરી કેશ (in-memory cache) અમલમાં મૂક્યું છે અને મોડલ ખુલે ત્યારે બધી ઈમેજ પ્રીલોડ કરી છે. આનાથી નેવિગેશન ત્વરિત બને છે.
  • Scaling: CSS transform: scale() પ્રોપર્ટીનો ઉપયોગ કરો. આ સુનિશ્ચિત કરે છે કે સ્ક્રીનનું કદ ગમે તે હોય, ઈમેજ અને હોટસ્પોટ્સ સંપૂર્ણ રીતે ગોઠવાયેલા રહે.

પરિણામ

  • અસલી ફોન જેવી 20 સ્ક્રીન નેવિગેટ કરી શકાય છે.
  • વિઝ્યુઅલ ક્યુઝ (visual cues) સાથે 52 હોટસ્પોટ્સ.
  • પ્રીલોડિંગ અને કેશિંગ દ્વારા ત્વરિત લોડિંગ.
  • કોઈપણ મોડલ સાઈઝમાં ફિટ થઈ જાય તેવી રિસ્પોન્સિવ ડિઝાઇન.

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