ஒரு ஊடாடும் ஆப் வழிகாட்டியை உருவாக்குதல்
தாங்கள் ஒருபோதும் நிறுவாத செயலிகளுடன் (apps) பணியாற்றுவது ஆதரவுக் குழுக்களுக்கு (support teams) பெரும்பாலும் சவாலாக அமைகிறது.
ஸ்கிரீன்ஷாட்டுகளுடன் கூடிய ஒரு PDF என்பது வழக்கமான தீர்வாகும். ஆனால் பெரும்பாலான மக்கள் PDF-களைப் படிப்பதில்லை. நான் இதைவிடச் சிறந்த ஒன்றை உருவாக்க விரும்பினேன். உண்மையான ஆப் போன்ற உணர்வைத் தரும் ஒரு வழிகாட்டியை நான் விரும்பினேன். நீங்கள் முகப்புத் திரையைப் பார்த்து, ஒரு பொத்தானைக் கிளிக் செய்தால், அடுத்த திரை தோன்றும்.
உண்மையான ஸ்கிரீன்ஷாட்டுகள் மற்றும் கிளிக் செய்யக்கூடிய ஹாட்ஸ்பாட்களைப் (hotspots) பயன்படுத்தி நான் ஒரு ஊடாடும் வழிகாட்டியை உருவாக்கினேன்.
இது எப்படிச் செயல்படுகிறது
படங்களுக்கு Firebase Storage-ஐயும், லாஜிக்கிற்கு vanilla JavaScript-ஐயும் பயன்படுத்தினேன். எந்த வெளிப்புற லைப்ரரிகளும் (external libraries) இல்லை.
- ஒவ்வொரு திரையும் ஒரு முழுமையான படம்.
- படத்தின் மேல் ஹாட்ஸ்பாட்கள் (hotspots) எனப்படும் கண்ணுக்குத் தெரியாத செவ்வகங்களை நான் வைக்கிறேன்.
- இந்த ஹாட்ஸ்பாட்கள் பிக்சல்களுக்குப் பதிலாக சதவீதங்களைப் (percentages) பயன்படுத்துகின்றன. இது விண்டோ அளவு மாறும்போது அவற்றைச் சரியாக வரிசைப்படுத்த உதவுகிறது.
- ஒரு எளிய ஸ்டேட் மெஷின் (state machine) வழிசெலுத்தலை (navigation) கையாள்கிறது. ஒவ்வொரு திரையும் ஒரு ID, ஒரு படம் மற்றும் ஹாட்ஸ்பாட்களின் பட்டியலைக் கொண்டுள்ளது.
எடிட்டர்
koordinates-களைக் கைமுறையாக அளவிடுவது மெதுவானது. இந்தச் செயல்முறையை வேகப்படுத்த நான் ஒரு தனித்துவமான HTML எடிட்டரை உருவாக்கினேன்.
- ஒரு ஸ்கிரீன்ஷாட்டைப் பதிவேற்றவும்.
- ஒரு ஹாட்ஸ்பாட்டை வரைய உங்கள் மவுஸை இழுக்கவும்.
- ஹாட்ஸ்பாட்டை ஒரு இலக்குத் திரையுடன் (target screen) இணைக்கவும்.
- குறியீட்டை (code) நேரடியாக ஏற்றுமதி செய்யவும்.
வடிவமைப்புத் தேர்வுகள்
எல்லாத் திரைகளிலும் முழுமையான வழிசெலுத்தல் (navigation) இருப்பதில்லை. குழப்பத்தைத் தவிர்க்க, கிளிக் செய்யக்கூடிய பகுதிகளில் ஒரு துடிக்கும் நீல நிற ஒளியைச் (pulsing blue glow) சேர்த்துள்ளேன். இது பயனர்கள் எங்கே தட்டலாம் என்பதைத் துல்லியமாகக் காட்டுகிறது.
முக்கிய தொழில்நுட்பப் பாடங்கள்
- Firebase Storage: URL-களைக் கைமுறையாக உருவாக்க வேண்டாம்.
getDownloadURLஎன்ற SDK முறையைப் பயன்படுத்தவும். இது பாதுகாப்பு விதிகளைத் தவிர்க்கத் தேவையான auth token-ஐ உள்ளடக்கியது. - CSS Flexbox: ஒரு காலன் லேஅவுட்டில் (column layout)
flex: 1பயன்படுத்தினால், அதன் பெற்றோர் (parent) உறுப்பிற்குத் தெளிவான உயரம் இருக்க வேண்டும். ஓவர்ஃபுளோவைத் (overflow) தவிர்க்க, குழந்தை (child) உறுப்பில்min-height: 0என்பதை அமைக்கவும். - செயல்திறன் (Performance): ஒவ்வொரு கிளிக் செய்யும் போதும் Firebase-ஐ அழைப்பது தாமதத்தை (lag) ஏற்படுத்தும். நான் ஒரு இன்-மெமரி கேச் (in-memory cache) முறையைச் செயல்படுத்தி, மோடல் (modal) திறக்கும்போது அனைத்துப் படங்களையும் முன்கூட்டியே பதிவிறக்கம் (preloaded) செய்தேன். இது வழிசெலுத்தலைத் தடையின்றிச் செய்ய வைக்கிறது.
- அளவிடுதல் (Scaling): CSS
transform: scale()பண்பைப் பயன்படுத்தவும். இது திரையின் அளவைப் பொருட்படுத்தாமல் படம் மற்றும் ஹாட்ஸ்பாட்கள் சரியாக வரிசைப்படுத்தப்படுவதை உறுதி செய்கிறது.
முடிவு
- ஒரு உண்மையான போன் போல 20 திரைகள் வழிசெலுத்தப்படுகின்றன.
- காட்சித் துணைகளுடன் (visual cues) 52 ஹாட்ஸ்பாட்கள்.
- முன்கூட்டியே பதிவிறக்கம் மற்றும் கேச்சிங் மூலம் உடனடி லோடிங்.
- எந்தவொரு மோடல் அளவிற்கும் பொருந்தக்கூடிய ரெஸ்பான்சிவ் வடிவமைப்பு (Responsive design).