ஒரு ஊடாடும் ஆப் வழிகாட்டியை உருவாக்குதல்

தாங்கள் ஒருபோதும் நிறுவாத செயலிகளைப் பயன்படுத்தும் போது, ஆதரவுக் குழுக்கள் (Support teams) பெரும்பாலும் சிரமப்படுகிறார்கள். PDF கையேடுகள் ஒரு மோசமான தீர்வாகும், ஏனெனில் அவற்றை யாரும் படிப்பதில்லை.

உலாவியின் (browser) உள்ளேயே உண்மையான ஆப் ஸ்கிரீன்ஷாட்களுடன் பயனர்கள் ஊடாட அனுமதிக்கும் ஒரு கருவியை நான் உருவாக்கினேன். இது உண்மையான போனைப் பயன்படுத்துவது போன்ற உணவைத் தரும். நீங்கள் ஒரு ஸ்கிரீன்ஷாட்டில் உள்ள பொத்தானைக் கிளிக் செய்தால், அடுத்த திரை தோன்றும்.

இது எவ்வாறு செயல்படுகிறது

படங்களுக்கு Firebase Storage மற்றும் தர்க்கத்திற்கு (logic) vanilla JavaScript ஆகியவற்றைப் பயன்படுத்தினேன். கருவியை இலகுவாக வைத்திருக்க வெளிப்புற நூலகங்களைத் (external libraries) தவிர்த்தேன்.

இதன் ரகசியம் சதவீத அடிப்படையிலான ஹாட்ஸ்பாட்களைப் (percentage-based hotspots) பயன்படுத்துவதாகும். நிலையான பிக்சல்களுக்குப் பதிலாக, 0 முதல் 100 வரையிலான ஆயத்தொலைவுகளைப் (coordinates) பயன்படுத்தி கிளிக் செய்யக்கூடிய பகுதிகளை நான் வரையறுக்கிறேன். இது விண்டோ அளவு மாறினாலும் பொத்தான்களைச் சரியாக வரிசைப்படுத்த உதவுகிறது.

இந்த அமைப்பு ஒரு எளிய ஸ்டேட் மெஷினைப் (state machine) பயன்படுத்துகிறது. ஒவ்வொரு திரையிலும் பின்வருவன இருக்கும்:

  • ஒரு image ID
  • ஹாட்ஸ்பாட்களின் பட்டியல்
  • ஒரு இலக்குத் தளம் (target destination)

நான் உருவாக்கிய கருவிகள்

கண்களால் ஆயத்தொலைவுகளை அளவிடுவது மெதுவான செயல். இந்தச் செயல்முறையை விரைவுபடுத்த நான் ஒரு தனித்துவமான HTML எடிட்டரை உருவாக்கினேன்.

  • ஒரு ஸ்கிரீன்ஷாட்டை canvas-இல் பதிவேற்றவும்.
  • ஒரு செவ்வகத்தை வரைய உங்கள் மவுஸை இழுக்கவும்.
  • எடிட்டர் தானாகவே சதவீத ஆயத்தொலைவுகளைக் கணக்கிடும்.
  • ஒரு dropdown மூலம் அந்தப் பகுதியை மற்றொரு திரையுடன் இணைக்கவும்.
  • இறுதி ஆப்ஜெக்ட்டை (object) நேரடியாக உங்கள் குறியீட்டிற்கு (code) ஏற்றுமதி செய்யவும்.

பயனர்களுக்கு உதவ, கிளிக் செய்யக்கூடிய பகுதிகளில் ஒரு துடிக்கும் நீல நிற ஒளியைச் (pulsing blue glow) சேர்த்துள்ளேன். இதன் மூலம் அவர்கள் எங்குத் தட்ட வேண்டும் என்பதைத் துல்லியமாகக் காட்ட முடியும்.

முக்கிய தொழில்நுட்பப் பாடங்கள்

  1. Firebase பாதுகாப்பு: storage URLs-களை கைமுறையாக உருவாக்க வேண்டாம். SDK-இல் உள்ள getDownloadURL முறையைப் பயன்படுத்தவும். இதில் தேவையான auth token அடங்கும். அது இல்லையென்றால், பிழைச் செய்தியைக் காட்டாமல் படங்கள் லோட் ஆவதில் தோல்வி ஏற்படும்.

  2. லேஅவுட் சரிசெய்தல்கள் (Layout Fixes): ஒரு flex column லேஅவுட்டில், parent-க்கு ஒரு தெளிவான உயரத்தை (explicit height) அமைக்கவும். children-க்கு min-height ஐ 0 என அமைக்கவும். இது லேஅவுட் சரிந்து போவதையும் (collapse) மற்றும் overflow சிக்கல்களையும் தடுக்கிறது.

  3. அளவிடுதல் (Scaling): CSS transform scale பண்பைப் பயன்படுத்தவும். இது படம் மற்றும் ஹாட்ஸ்பாட்கள் இணைந்து மறுஅளவிற்கும் (resize) அனுமதிக்கிறது. இது திரையின் அளவைப் பொருட்படுத்தாமல் அனைத்தையும் விகிதாச்சாரத்தில் வைத்திருக்கும்.

  4. வேகம்: URL-களை ஒவ்வொன்றாகப் பெறுவது தாமதத்தை (lag) ஏற்படுத்தும். நான் an in-memory cache மற்றும் ஒரு background preload செயல்பாட்டைச் செயல்படுத்தினேன். modal திறக்கும்போது அனைத்துப் படங்களும் இணையாக (parallel) லோட் ஆகும். இது வழிசெலுத்தலை (navigation) உடனடித் தன்மையுடன் உணரச் செய்கிறது.

முடிவு

  • முழுமையான வழிசெலுத்தலுடன் 20 திரைகள்.
  • 52 ஊடாடும் ஹாட்ஸ்பாட்கள்.
  • auto-scaling மூலம் ஸ்க்ரோல்பார்கள் (scrollbars) இல்லை.
  • preloading மூலம் உடனடி மாற்றங்கள்.

ஆதாரம்: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e