உங்களிடம் ஒரு வடிவமைப்பு மற்றும் ஒரு பின்தளம் உள்ளது, மேலும் பயனர்கள் உண்மையில் பார்க்கும் பகுதி உங்களுக்குத் தேவை. நான் Figma திரைகளை TypeScript இல் ஒரு React அல்லது Next.js முன்முனையாக மாற்றுகிறேன், இது தொலைபேசியிலிருந்து டெஸ்க்டாப் வரை பதிலளிக்கக்கூடியது, மேலும் அதை உங்கள் API உடன் ஏற்றுதல், காலியான மற்றும் பிழை நிலைகள் கையாளப்பட்டு இணைக்கிறேன்.
உங்கள் Figma வடிவமைப்பிலிருந்து உங்கள் React அல்லது Next.js முன்முனையை உருவாக்கி அதை உங்கள் API உடன் இணைப்பேன்
உங்கள் Figma கோப்பிலிருந்து ஒரு திரை, பதிலளிக்கக்கூடியது, தட்டச்சு செய்யப்பட்டது மற்றும் உங்கள் API உடன் இணைக்கப்பட்டது.
- ஒரு திரை
- பதிலளிக்கக்கூடிய வடிவமைப்பு
- உங்கள் API உடன் இணைக்கப்பட்டது
- மூலக் குறியீடு
ஏற்றுதல், காலியான மற்றும் பிழை நிலைகளுடன், உங்கள் API உடன் 5 திரைகள் வரை இணைக்கப்பட்டுள்ளன.
- 5 திரைகள் வரை
- பதிலளிக்கக்கூடிய வடிவமைப்பு
- உங்கள் API உடன் இணைக்கப்பட்டது
- மூலக் குறியீடு
12 திரைகள் வரை, உங்கள் அங்கீகாரத்திற்கு எதிராக உள்நுழைவு, பகிரப்பட்ட கூறுகள் மற்றும் சோதனைகள்.
- வரை 12 திரைகள், உள்நுழைவு, சோதனைகள்
- பதிலளிக்கக்கூடிய வடிவமைப்பு
- உங்கள் API உடன் இணைக்கப்பட்டது
- மூலக் குறியீடு
தனிப்பயன் சலுகையைக் கோரவும்
தனிப்பயன் சலுகையைக் கோர உள்நுழையவும்
இந்த Zinner இடமிருந்து தனிப்பயனாக்கப்பட்ட சலுகையைக் கோர ஒரு இலவச கணக்கை உருவாக்கவும் அல்லது உள்நுழையவும்.
உள்நுழைய / பதிவு செய்யமுன் விற்பனை கேள்வியைக் கேளுங்கள்
ஒரு கேள்வியைக் கேட்க உள்நுழையவும்
தள ஸ்பேமைக் குறைக்க, முன் விற்பனை செய்திகளை உள்நுழைந்த பயனர்கள் மட்டுமே அனுப்ப முடியும்.
இந்த Zinner உடன் நேரடியாக செய்தி அனுப்ப ஒரு இலவச கணக்கை உருவாக்கவும் அல்லது உள்நுழையவும்.
உள்நுழைய / பதிவு செய்யஉள்நுழைவு தேவை
இந்த Zinnerருக்கு செய்தி அனுப்ப ஒரு இலவச கணக்கை உருவாக்கவும் அல்லது உள்நுழையவும்.
உள்நுழைய / பதிவு செய்யஉள்நுழைவு தேவை
தனிப்பயனாக்கப்பட்ட சலுகையைக் கோர இலவச கணக்கை உருவாக்கவும் அல்லது உள்நுழையவும்.
உள்நுழைய / பதிவு செய்யஒரு பார்வையில்
நீங்கள் முடிவெடுக்க உதவும் இந்தச் சேவை பற்றிய முக்கிய விவரங்கள். Zinn Hub ஆல் உருவாக்கப்பட்டது, விற்பனையாளரால் அல்ல.
மதிப்பு நிலை
தொழில்நுட்ப அடுக்கு
பதிலளிக்கக்கூடிய & குறுக்கு-உலாவி
API ஒருங்கிணைப்பு
ஆதரவு காலம்
நீங்கள் பெறுவது என்ன
முழு விளக்கம்
வடிவமைப்பு முடிந்துவிட்டது மற்றும் API தயாராக உள்ளது அல்லது கிட்டத்தட்ட தயாராக உள்ளது, ஆனால் பயனர்கள் பார்க்கும் திரைகள் இன்னும் இல்லை. நான் முன்முனையை மட்டுமே உருவாக்குகிறேன்: உங்கள் பின்தளம், அங்கீகார வழங்குநர் மற்றும் ஹோஸ்டிங் அப்படியே இருக்கும், மேலும் குறியீடு உங்கள் களஞ்சியத்திற்குள் செல்கிறது. டெலிவரிக்குப் பிறகு 14 நாட்களுக்கு, நாங்கள் ஒப்புக்கொண்டபடி வேலை செய்யாத எதையும் நான் இலவசமாக சரிசெய்கிறேன்.
ஸ்டார்ட்டருடன் உங்கள் Figma கோப்பிலிருந்து ஒரு திரை அல்லது பக்கத்தைப் பெறுவீர்கள், பதிலளிக்கக்கூடியது மற்றும் தட்டச்சு செய்யப்பட்டது, அதன் தரவு உங்கள் API இலிருந்து வருகிறது, அல்லது இறுதிப்புள்ளி இருக்கும் வரை ஒரு போலியிலிருந்து வருகிறது. ஸ்டாண்டர்ட் உங்கள் API உடன் இணைக்கப்பட்ட ஐந்து திரைகள் வரை உள்ளடக்கியது, ஏற்றுதல், காலியான மற்றும் பிழை நிலைகள் மற்றும் சரிபார்ப்புடன் கூடிய படிவங்கள். மேம்பட்டது பன்னிரண்டு திரைகள் வரை அனுமதிக்கிறது மற்றும் உங்கள் அங்கீகார வழங்குநருடன் வேலை செய்யும் உள்நுழைவுத் திரைகள், பயன்பாடு முழுவதும் பயன்படுத்தப்படும் பகிரப்பட்ட கூறுகள் மற்றும் முக்கிய ஓட்டங்களுக்கான சோதனைகளைச் சேர்க்கிறது.
நான் வடிவமைப்பை உன்னிப்பாகப் பின்பற்றுகிறேன்: இடைவெளி, வகை அளவு மற்றும் வண்ணங்கள் Figma கோப்பிலிருந்து வருகின்றன. ஒரு திரைக்கு மொபைல் பதிப்பு இல்லாத இடங்களில், நான் அதை உருவாக்குவதற்கு முன் ஒரு யூகத்தை விட ஒன்றை முன்மொழிகிறேன். ஆப் ரூட்டருடன் கூடிய Next.js எனது இயல்புநிலை; நீங்கள் சர்வர் ரெண்டரிங் தேவையில்லாதபோது Vite உடன் எளிய React நன்றாக இருக்கும். ஸ்டைலிங்கிற்கு நான் Tailwind CSS அல்லது CSS Modules ஐப் பயன்படுத்துகிறேன், உங்கள் திட்டத்தில் எது ஏற்கனவே உள்ளதோ அதை.
டெஸ்க்டாப்பில் Chrome, Firefox மற்றும் Edge இல், மற்றும் ஒரு உண்மையான Android தொலைபேசியில் Chrome இல் முடிவைச் சரிபார்க்கிறேன்.
எனது முன்முனைப் பணிக்கான இரண்டு பொது எடுத்துக்காட்டுகள் போர்ட்ஃபோலியோவில் உள்ளன: வடிப்பான்கள், ஒரு வண்டி மற்றும் ஒரு செக்அவுட் கொண்ட ஒரு Next.js ஸ்டோர்ஃபிரண்ட், மற்றும் எனது சொந்த இருமொழி தளம்.
நான் கூட்டங்கள் இல்லாமல் எழுத்துப்பூர்வமாக மட்டுமே வேலை செய்கிறேன். திரைகள் மற்றும் அவற்றின் பின்னால் உள்ள இறுதிப்புள்ளிகள் நான் தொடங்குவதற்கு முன் பட்டியலிடப்படுகின்றன, ஒரு முன்னோட்ட இணைப்பு வேலை வளரும்போது காட்டுகிறது, மேலும் ஒவ்வொரு வேலை நாளிலும் அரட்டையில் ஒரு சிறிய முன்னேற்றக் குறிப்பு வருகிறது.
உங்கள் திட்டத்தை முடிப்பதற்கான படிகள்
1. திரை பட்டியல் - நான் Figma கோப்பு மற்றும் உங்கள் API ஆவணங்களை பார்த்து ஒவ்வொரு திரை, அதன் நிலைகள் மற்றும் அது அழைக்கும் இறுதிப்புள்ளிகளை எழுதுகிறேன். எந்த குறியீட்டிற்கும் முன் நீங்கள் பட்டியலை உறுதிப்படுத்துகிறீர்கள்.
2. அடிப்படை மற்றும் பகிரப்பட்ட பகுதிகள் - திட்ட அமைப்பு அல்லது உங்கள் இருக்கும் களஞ்சியம், Figma இலிருந்து வண்ணங்கள் மற்றும் வகை, மற்றும் ஒவ்வொரு திரையும் மீண்டும் பயன்படுத்தும் தளவமைப்பு மற்றும் கூறுகள்.
3. திரைகள் மற்றும் தரவு - ஒவ்வொரு திரையும் வடிவமைப்பிற்கு ஏற்ப உருவாக்கப்பட்டு உங்கள் API உடன் இணைக்கப்பட்டுள்ளது, ஏற்றுதல், காலியான மற்றும் பிழை நிலைகளுடன். காணாமல் போன இறுதிப்புள்ளி எளிதாக மாற்றக்கூடிய ஒரு போலி பெறுகிறது.
4. முன்னோட்ட இணைப்பில் மறுஆய்வு சுற்று - நீங்கள் கிளிக் செய்து ஒரு பட்டியலில் திருத்தங்களை அனுப்புகிறீர்கள். நான் அவற்றை சரிசெய்து அதே இணைப்பை மீண்டும் காட்டுகிறேன்.
5. ஒப்படைப்பு - உங்கள் களஞ்சியத்தில் உள்ள குறியீடு, அமைப்பு மற்றும் அதை எவ்வாறு இயக்குவது என்பது பற்றிய ஒரு சிறிய குறிப்பு, மற்றும் மேம்பட்ட, ஒவ்வொரு வெளியீட்டிற்கும் முன் நீங்கள் இயக்கக்கூடிய சோதனைகள்.
Zinner தர உத்தரவாதம்
ஒவ்வொரு Zinner-ம் தளத்தில் சேருவதற்கு முன் மதிப்பாய்வு செய்யப்பட்டு அங்கீகரிக்கப்படுகிறார்.
அனைத்து சேவைகளும் எங்கள் தர உறுதிப்பாட்டு உறுதிமொழியால் ஆதரிக்கப்படுகின்றன.
நீங்கள் வழங்கப்பட்ட வேலையை அங்கீகரிக்கும் வரை உங்கள் கட்டணம் பாதுகாக்கப்படும்.
தொகுப்புகளை ஒப்பிடுக
| செயல்பாடு | ஸ்டார்டர் | நிலையானது | மேம்பட்ட |
|---|---|---|---|
| டெலிவரி நேரம் | 4 நாட்கள் | 9 நாட்கள் | 18 நாட்கள் |
| திருத்தங்கள் | 1 | 2 | 3 |
| நோக்கம் | ஒரு திரை | 5 திரைகள் வரை | 12 திரைகள் வரை, உள்நுழைவு, சோதனைகள் |
| பதிலளிக்கக்கூடிய வடிவமைப்பு | ✓ | ✓ | ✓ |
| உங்கள் API உடன் இணைக்கப்பட்டுள்ளது | ✓ | ✓ | ✓ |
| மூலக் குறியீடு | ✓ | ✓ | ✓ |
மாதிரிகள்
இந்த Zinn தொடர்பான விற்பனையாளரின் பணி எடுத்துக்காட்டுகளைப் பார்க்கவும்.
போர்ட்ஃபோலியோ
இந்த Zinn தொடர்பான விற்பனையாளரின் வேலைக்கான எடுத்துக்காட்டுகள்.
ஃபார்ம்லைன்: ஸ்ட்ரைப் உடன் Next.js ஸ்டோர்
நீங்கள் கிளிக் செய்யக்கூடிய ஒரு ஸ்டோர்ப்ரண்ட்: 16 சேகரிப்புகளில் 4 சுவரொட்டிகள், URL இல் இருக்கும் வடிப்பான்கள் மற்றும் தேடல், ஒரு வண்டி, ஒளி மற்றும் இருண்ட தீம்கள், மற்றும் ஒரு டெமோ ஆர்டர் அல்லது சோதனை பயன்முறையில் ஒரு உண்மையான ஸ்ட்ரைப் செக்அவுட் அமர்வில் முடிவடையும் ஒரு செக்அவுட். நான் அதை Next.js ஸ்டேடிக் எக்ஸ்போர்ட்டாக டைப்ஸ்கிரிப்ட் உடன் டெயில்விண்ட் CSS உடன் உருவாக்கினேன். கார்டு கொடுப்பனவுகள் ஒரு கிளவுட்ஃப்ளேர் ஒர்க்கர் வழியாக செல்கின்றன, இது சேவையகத்தில் வண்டியை மறுவிலை நிர்ணயம் செய்து ஸ்ட்ரைப்பின் வெப்ஹூக் கையொப்பத்தை சரிபார்க்கிறது.
Next.js இல் இருமொழி தனிப்பட்ட தளம்
ஆங்கிலம் மற்றும் ரஷ்ய மொழிகளில் ஒரு பக்க தனிப்பட்ட தளம், ஒரு சேவைகள் பிரிவு மற்றும் எனது டெமோ திட்டங்களுக்கான இணைப்புகளுடன். நான் அதை Next.js, React மற்றும் TypeScript உடன் ஒரு ஸ்டேடிக் எக்ஸ்போர்ட்டாக வடிவமைத்து உருவாக்கினேன், சாதாரண CSS தொகுதிகள் மற்றும் UI கட்டமைப்பு இல்லாமல் ஸ்டைல் செய்யப்பட்டது. இது ஒளி மற்றும் இருண்ட தீம்களைக் கொண்டுள்ளது, மேலும் ஒவ்வொரு மொழிக்கும் ஒரு சமூக முன்னோட்டப் படம் உருவாக்கப்படும் நேரத்தில் உருவாக்கப்படுகிறது. GitHub Actions அதை Bunny CDN க்கு உருவாக்கி வரிசைப்படுத்துகிறது, இது பாதுகாப்பு தலைப்புகளைச் சேர்த்து www மற்றும் சாதாரண HTTP ஐ முக்கிய HTTPS முகவரிக்கு திருப்பி விடுகிறது.
சேவை விவரங்கள்
அடிக்கடி கேட்கப்படும் கேள்விகள்
ஆம். ஒவ்வொரு திரைக்குமான மொபைல் தளவமைப்பை நான் உருவாக்குவதற்கு முன், எழுத்துப்பூர்வமாக அல்லது ஒரு விரைவான ஓவியமாக முன்மொழிகிறேன், எனவே நீங்கள் அதை முடிவில் கண்டுபிடிப்பதற்குப் பதிலாக முன்கூட்டியே அங்கீகரிக்கிறீர்கள்.
ஆம். நான் ஏற்கனவே உள்ள கோப்பு அமைப்பு, பெயரிடுதல் மற்றும் ஸ்டைலிங் ஆகியவற்றை பின்பற்றுகிறேன், எனவே புதிய குறியீடு அதே வடிவங்களைப் பயன்படுத்துகிறது மற்றும் அடுத்த டெவலப்பர் இரண்டு ஸ்டைல்களைக் கண்டுபிடிக்க மாட்டார்.
கோப்பிலிருந்து இடைவெளி, அளவுகள் மற்றும் வண்ணங்களை நான் பொருத்துகிறேன். வடிவமைப்பு மற்றும் உண்மையான தரவு வேறுபடும் இடங்களில், மாதிரிக்கு மேல் ஒரு பெயர் நீளமாக இருப்பது போல, நான் அதை கொடியிட்டு, தளவமைப்பு உடைவதற்கு அனுமதிப்பதற்குப் பதிலாக ஒரு தீர்வை பரிந்துரைக்கிறேன்.
இந்த சேவை முன்பக்கத்தை மட்டுமே கொண்டுள்ளது. எக்ஸ்பிரஸ் அல்லது NestJS உடன் Node.js இல் ஒரு பின்தளத்திற்கு, எனது பின்தள Zinn ஐப் பார்க்கவும், அல்லது இரண்டையும் ஆர்டர் செய்யவும், நான் அவற்றை ஒன்றாக மேற்கோள் காட்டுவேன்.
வாடிக்கையாளர் மதிப்புரைகள்
இந்த Zinn பற்றி எங்கள் வாடிக்கையாளர்கள் என்ன சொல்கிறார்கள் என்று பாருங்கள்
வகைகள்
Zinner கொள்கைகள்
தொடர்புடைய Zinns
Node.js அல்லது Firebase ஐப் பயன்படுத்தி பாதுகாப்பான பின்தள APIகளை உருவாக்கி பயன்படுத்தவும்
php wp html jquery ajax போன்ற வலைத்தள மேம்பாட்டு பிழை திருத்தம் மேம்பாட்டு வேலைகளைச் செய்யுங்கள்
Next.js, React.js, Node.js, Firebase ஆகியவற்றில் உங்கள் டெவலப்பராக இருங்கள்
