ഒരു ഇന്ററാക്ടീവ് ആപ്പ് ഗൈഡ് നിർമ്മിക്കുന്നു

തങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യാത്ത ആപ്പുകൾ ഉപയോഗിക്കേണ്ടി വരുമ്പോൾ സപ്പോർട്ട് ടീമുകൾ പലപ്പോഴും ബുദ്ധിമുട്ടാറുണ്ട്. ഒരു PDF മാനുവൽ ഇതിന് നല്ലൊരു പരിഹാരമല്ല, കാരണം ആരും അവ വായിക്കാറില്ല.

ഒരു ബ്രൗസറിനുള്ളിൽ തന്നെ യഥാർത്ഥ ആപ്പ് സ്ക്രീൻഷോട്ടുകളുമായി സംവദിക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്ന ഒരു ടൂൾ ഞാൻ നിർമ്മിച്ചു. ഇത് യഥാർത്ഥ ഫോൺ ഉപയോഗിക്കുന്നത് പോലെ തോന്നും. നിങ്ങൾ ഒരു സ്ക്രീൻഷോട്ടിലെ ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ അടുത്ത സ്ക്രീൻ പ്രത്യക്ഷപ്പെടുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ചിത്രങ്ങൾക്കായി ഞാൻ Firebase Storage-ഉം ലോജിക്കിനായി vanilla JavaScript-ഉം ഉപയോഗിച്ചു. ഭാരം കുറയ്ക്കുന്നതിനായി ഞാൻ പുറത്തുനിന്നുള്ള ലൈബ്രറികൾ ഒഴിവാക്കി.

ശതമാന അടിസ്ഥാനത്തിലുള്ള (percentage-based) ഹോട്ട്‌സ്‌പോട്ടുകൾ ഉപയോഗിക്കുന്നതാണ് ഇതിന്റെ രഹസ്യം. നിശ്ചിത പിക്സലുകൾക്ക് പകരം, 0 മുതൽ 100 വരെയുള്ള കോർഡിനേറ്റുകൾ ഉപയോഗിച്ചാണ് ഞാൻ ക്ലിക്ക് ചെയ്യാവുന്ന ഭാഗങ്ങൾ നിർവചിക്കുന്നത്. വിൻഡോയുടെ വലിപ്പം മാറിയാലും ഇത് ബട്ടണുകൾ കൃത്യമായി ക്രമീകരിക്കാൻ സഹായിക്കുന്നു.

ഈ സിസ്റ്റം ഒരു ലളിതമായ സ്റ്റേറ്റ് മെഷീൻ (state machine) ആണ് ഉപയോഗിക്കുന്നത്. ഓരോ സ്ക്രീനിലും താഴെ പറയുന്നവ ഉണ്ടാകും:

  • ഒരു ഇമേജ് ഐഡി (image ID)
  • ഹോട്ട്‌സ്‌പോട്ടുകളുടെ ഒരു ലിസ്റ്റ്
  • ഒരു ടാർഗെറ്റ് ഡെസ്റ്റിനേഷൻ (target destination)

ഞാൻ നിർമ്മിച്ച ടൂളുകൾ

കോർഡിനേറ്റുകൾ കണ്ണ് കൊണ്ട് അളക്കുന്നത് സാവധാനത്തിലുള്ള കാര്യമാണ്. പ്രക്രിയ വേഗത്തിലാക്കാൻ ഞാൻ ഒരു സ്റ്റാൻഡ്‌ലോൺ HTML എഡിറ്റർ നിർമ്മിച്ചു.

  • ഒരു സ്ക്രീൻഷോട്ട് ക്യാൻവാസിലേക്ക് അപ്‌ലോഡ് ചെയ്യുക.
  • ഒരു ചതുരം വരയ്ക്കാൻ മൗസ് ഉപയോഗിച്ച് ഡ്രാഗ് ചെയ്യുക.
  • എഡിറ്റർ ശതമാന കോർഡിനേറ്റുകൾ സ്വയമേവ കണക്കാക്കുന്നു.
  • ഒരു ഡ്രോപ്പ്ഡൗൺ വഴി ആ ഭാഗത്തെ മറ്റൊരു സ്ക്രീനുമായി ബന്ധിപ്പിക്കുക.
  • ഫൈനൽ ഒബ്‌ജക്റ്റ് നേരിട്ട് നിങ്ങളുടെ കോഡിലേക്ക് എക്‌സ്‌പോർട്ട് ചെയ്യുക.

ഉപയോക്താക്കളെ സഹായിക്കുന്നതിനായി, ക്ലിക്ക് ചെയ്യാവുന്ന ഭാഗങ്ങളിൽ ഒരു പൾസിംഗ് ബ്ലൂ ഗ്ലോ (pulsing blue glow) ഞാൻ ചേർത്തു. ഇത് അവർക്ക് എവിടെ ടാപ്പ് ചെയ്യാമെന്ന് കൃത്യമായി കാണിച്ചുതരുന്നു.

പ്രധാന സാങ്കേതിക പാഠങ്ങൾ

  1. Firebase സുരക്ഷ: സ്റ്റോറേജ് URL-കൾ മാനുവലായി നിർമ്മിക്കരുത്. SDK-യിൽ നിന്നുള്ള getDownloadURL മെത്തേഡ് ഉപയോഗിക്കുക. ഇതിൽ ആവശ്യമായ ഓത്ത് ടോക്കൺ (auth token) ഉൾപ്പെടുന്നു. ഇത് ഇല്ലാതെ, ചിത്രങ്ങൾ ലോഡ് ആകാൻ ശ്രമിക്കുമ്പോൾ ഒരു എറർ പോലും കാണിക്കാതെ പരാജയപ്പെടും.

  2. ലേഔട്ട് പരിഹാരങ്ങൾ: ഒരു ഫ്ലെക്സ് കോളം (flex column) ലേഔട്ടിൽ, പാരന്റ് എലമെന്റിന് കൃത്യമായ ഹൈറ്റ് (height) നൽകുക. ചൈൽഡ് എലമെന്റുകളിൽ min-height 0 ആയി സെറ്റ് ചെയ്യുക. ഇത് ലേഔട്ട് തകരാറിലാകുന്നതും (layout collapse) ഓവർഫ്ലോ പ്രശ്നങ്ങളും ഒഴിവാക്കുന്നു.

  3. സ്കെയിലിംഗ്: CSS transform scale പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. ഇത് ചിത്രവും ഹോട്ട്‌സ്‌പോട്ടുകളും ഒരേപോലെ റീസൈസ് ചെയ്യാൻ അനുവദിക്കുന്നു. സ്ക്രീൻ വലിപ്പം എന്തുതന്നെയായാലും ഇത് എല്ലാം അനുപാതത്തിൽ നിലനിർത്തുന്നു.

  4. വേഗത: ഓരോ URL-ഉം ഓരോന്നായി എടുക്കുന്നത് ലാഗ് (lag) ഉണ്ടാക്കും. ഞാൻ ഒരു ഇൻ-മെമ്മറി കാഷും (in-memory cache) ബാക്ക്ഗ്രൗണ്ട് പ്രീലോഡ് ഫംഗ്ഷനും നടപ്പിലാക്കി. മോഡൽ തുറക്കുമ്പോൾ എല്ലാ ചിത്രങ്ങളും പാരലൽ ആയി ലോഡ് ആകുന്നു. ഇത് നാവിഗേഷൻ വളരെ വേഗത്തിലാക്കുന്നു.

ഫലം

  • പൂർണ്ണമായ നാവിഗേഷനോടു കൂടിയ 20 സ്ക്രീനുകൾ.
  • 52 ഇന്ററാക്ടീവ് ഹോട്ട്‌സ്‌പോട്ടുകൾ.
  • ഓട്ടോ-സ്കെയിലിംഗ് ഉള്ളതിനാൽ സ്ക്രോൾബാറുകൾ ഇല്ല.
  • പ്രീലോഡിംഗ് വഴി പെട്ടെന്നുള്ള ട്രാൻസിഷനുകൾ.

ഉറവിടം: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e