អ្នកមានការរចនា និងផ្នែកខាងក្រោយ ហើយត្រូវការផ្នែកដែលអ្នកប្រើប្រាស់ពិតជាបានឃើញ។ ខ្ញុំបំប្លែងអេក្រង់ Figma ទៅជាផ្នែកខាងមុខ React ឬ Next.js នៅក្នុង TypeScript ដែលឆ្លើយតបពីទូរសព្ទទៅកុំព្យូទ័រលើតុ ហើយភ្ជាប់វាទៅ API របស់អ្នកជាមួយនឹងស្ថានភាពផ្ទុក ទទេ និងកំហុសដែលបានដោះស្រាយ។
ខ្ញុំនឹងបង្កើតផ្នែកខាងមុខ React ឬ Next.js របស់អ្នកពីការរចនា Figma ហើយភ្ជាប់វាទៅ API របស់អ្នក
អេក្រង់មួយពីឯកសារ Figma របស់អ្នក ឆ្លើយតប វាយបញ្ចូល និងភ្ជាប់ទៅ API របស់អ្នក។
- អេក្រង់មួយ
- ការរចនាឆ្លើយតប
- ភ្ជាប់ទៅ API របស់អ្នក
- កូដប្រភព
រហូតដល់ 5 អេក្រង់ដែលភ្ជាប់ទៅ API របស់អ្នក ជាមួយនឹងស្ថានភាពកំពុងផ្ទុក ទទេ និងកំហុស។
- រហូតដល់ 5 អេក្រង់
- ការរចនាឆ្លើយតប
- ភ្ជាប់ទៅ API របស់អ្នក
- កូដប្រភព
រហូតដល់ 12 អេក្រង់ ចូលដោយប្រើការផ្ទៀងផ្ទាត់របស់អ្នក សមាសធាតុដែលបានចែករំលែក និងការធ្វើតេស្ត។
- រហូតដល់ 12 អេក្រង់ ចូល ការធ្វើតេស្ត
- ការរចនាឆ្លើយតប
- ភ្ជាប់ទៅ API របស់អ្នក
- កូដប្រភព
ស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
ចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួនពី Zinner នេះ។
ចូល / ចុះឈ្មោះសួរសំណួរមុនពេលលក់
ចូលដើម្បីសួរសំណួរ
ដើម្បីកាត់បន្ថយសារឥតបានការនៅលើវេទិកា សារមុនពេលលក់អាចត្រូវបានផ្ញើដោយអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះ។
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលដើម្បីផ្ញើសារទៅ Zinner នេះដោយផ្ទាល់។
ចូល / ចុះឈ្មោះនៅ glance
ព័ត៌មានលម្អិតសំខាន់ៗអំពីសេវាកម្មនេះ ដើម្បីជួយអ្នកសម្រេចចិត្ត។ បង្កើតដោយ Zinn Hub មិនមែនអ្នកលក់ទេ។
ទីតាំងតម្លៃ
បច្ចេកវិទ្យា Stack
ឆ្លើយតប & ឆ្លងកម្មវិធីរុករក
ការរួមបញ្ចូល API
រយៈពេលគាំទ្រ
អ្វីដែលអ្នកនឹងទទួលបាន
ការពិពណ៌នាពេញលេញ
ការរចនាត្រូវបានបញ្ចប់ ហើយ API គឺរួចរាល់ ឬជិតរួចរាល់ ប៉ុន្តែអេក្រង់ដែលអ្នកប្រើប្រាស់នឹងឃើញមិនទាន់មាននៅឡើយទេ។ ខ្ញុំបង្កើតផ្នែកខាងមុខតែប៉ុណ្ណោះ៖ ផ្នែកខាងក្រោយរបស់អ្នក អ្នកផ្តល់ការផ្ទៀងផ្ទាត់ និងការបង្ហោះនៅតែដដែល ហើយកូដចូលទៅក្នុងឃ្លាំងរបស់អ្នក។ សម្រាប់ 14 ថ្ងៃបន្ទាប់ពីការដឹកជញ្ជូន ខ្ញុំជួសជុលអ្វីដែលមិនដំណើរការដូចដែលយើងបានព្រមព្រៀង ដោយឥតគិតថ្លៃ។
ជាមួយនឹង Starter អ្នកទទួលបានអេក្រង់ ឬទំព័រមួយពីឯកសារ Figma របស់អ្នក ដែលឆ្លើយតប និងវាយបញ្ចូល ជាមួយនឹងទិន្នន័យរបស់វាដែលមកពី API របស់អ្នក ឬពីការក្លែងបន្លំរហូតដល់ចំណុចបញ្ចប់មាន។ Standard គ្របដណ្តប់រហូតដល់ប្រាំអេក្រង់ដែលភ្ជាប់ទៅ API របស់អ្នក ជាមួយនឹងស្ថានភាពកំពុងផ្ទុក ទទេ និងកំហុស និងទម្រង់ដែលមានការផ្ទៀងផ្ទាត់។ Advanced អនុញ្ញាតឱ្យរហូតដល់ដប់ពីរអេក្រង់ ហើយបន្ថែមអេក្រង់ចូលដែលដំណើរការជាមួយអ្នកផ្តល់ការផ្ទៀងផ្ទាត់របស់អ្នក សមាសធាតុដែលបានចែករំលែកដែលប្រើនៅទូទាំងកម្មវិធី និងការធ្វើតេស្តសម្រាប់លំហូរចម្បង។
ខ្ញុំធ្វើតាមការរចនាយ៉ាងជិតស្និទ្ធ៖ ចន្លោះមាត្រដ្ឋានប្រភេទ និងពណ៌បានមកពីឯកសារ Figma ។ កន្លែងដែលអេក្រង់មិនមានកំណែទូរស័ព្ទ ខ្ញុំស្នើមួយមុនពេលបង្កើតវាជាជាងការទាយ។ Next.js ជាមួយ App Router គឺជាលំនាំដើមរបស់ខ្ញុំ; React ធម្មតាជាមួយ Vite គឺល្អនៅពេលដែលអ្នកមិនត្រូវការការបង្ហាញម៉ាស៊ីនមេ។ សម្រាប់ការរចនាម៉ូដ ខ្ញុំប្រើ Tailwind CSS ឬ CSS Modules មួយណាដែលគម្រោងរបស់អ្នកមានរួចហើយ។
ខ្ញុំពិនិត្យលទ្ធផលនៅក្នុង Chrome, Firefox និង Edge នៅលើកុំព្យូទ័រ និងនៅក្នុង Chrome នៅលើទូរស័ព្ទ Android ពិតប្រាកដ។
ឧទាហរណ៍សាធារណៈពីរនៃការងារផ្នែកខាងមុខរបស់ខ្ញុំគឺនៅក្នុងផលប័ត្រ៖ ហាង Next.js ដែលមានតម្រង រទេះ និងការទូទាត់ និងគេហទំព័រពីរភាសារបស់ខ្ញុំផ្ទាល់។
ខ្ញុំធ្វើការជាលាយលក្ខណ៍អក្សរតែប៉ុណ្ណោះ ដោយគ្មានការប្រជុំ។ អេក្រង់ និងចំណុចបញ្ចប់នៅពីក្រោយពួកវាត្រូវបានរាយបញ្ជីមុនពេលខ្ញុំចាប់ផ្តើម តំណមើលជាមុនបង្ហាញការងារនៅពេលវាលូតលាស់ ហើយកំណត់ចំណាំវឌ្ឍនភាពខ្លីមួយមកក្នុងការជជែករាល់ថ្ងៃធ្វើការ។
ជំហានសម្រាប់ការបញ្ចប់គម្រោងរបស់អ្នក
1. បញ្ជីអេក្រង់ - ខ្ញុំឆ្លងកាត់ឯកសារ Figma និងឯកសារ API របស់អ្នក ហើយសរសេរអេក្រង់នីមួយៗ ស្ថានភាពរបស់វា និងចំណុចបញ្ចប់ដែលវាហៅ។ អ្នកបញ្ជាក់បញ្ជីមុនពេលកូដណាមួយ។
2. ផ្នែកមូលដ្ឋាន និងចែករំលែក - ការរៀបចំគម្រោង ឬឃ្លាំងដែលមានស្រាប់របស់អ្នក ពណ៌ និងប្រភេទពី Figma និងប្លង់ និងសមាសធាតុដែលអេក្រង់នីមួយៗប្រើឡើងវិញ។
3. អេក្រង់ និងទិន្នន័យ - អេក្រង់នីមួយៗត្រូវបានបង្កើតឡើងតាមការរចនា និងភ្ជាប់ទៅ API របស់អ្នក ជាមួយនឹងស្ថានភាពផ្ទុក ទទេ និងកំហុស។ ចំណុចបញ្ចប់ដែលបាត់ទទួលបានការក្លែងបន្លំដែលងាយស្រួលប្តូរ។
4. ជុំពិនិត្យលើតំណមើលជាមុន - អ្នកចុចតាមរយៈ ហើយផ្ញើការកែតម្រូវក្នុងបញ្ជីមួយ។ ខ្ញុំជួសជុលពួកវា ហើយបង្ហាញតំណដូចគ្នាម្តងទៀត។
5. ការប្រគល់ - កូដនៅក្នុងឃ្លាំងរបស់អ្នក កំណត់ចំណាំខ្លីៗអំពី រចនាសម្ព័ន្ធ និងរបៀបដំណើរការវា និងនៅលើកម្រិតខ្ពស់ ការធ្វើតេស្តដែលអ្នកអាចដំណើរការបានមុនពេលចេញផ្សាយនីមួយៗ។
ការធានាគុណភាព Zinner
Zinner គ្រប់រូបត្រូវបានត្រួតពិនិត្យ និងអនុម័តមុនពេលចូលរួមវេទិកា។
សេវាកម្មទាំងអស់ត្រូវបានគាំទ្រដោយការប្តេជ្ញាចិត្តធានាគុណភាពរបស់យើង។
ការទូទាត់របស់អ្នកត្រូវបានការពាររហូតដល់អ្នកអនុម័តការងារដែលបានប្រគល់។
ប្រៀបធៀបកញ្ចប់
| មុខងារ | អ្នកចាប់ផ្តើម | ស្តង់ដារ | កម្រិតខ្ពស់ |
|---|---|---|---|
| ពេលវេលាដឹកជញ្ជូន | 4 ថ្ងៃ | 9 ថ្ងៃ | 18 ថ្ងៃ |
| ការកែប្រែ | 1 | 2 | 3 |
| វិសាលភាព | អេក្រង់មួយ | រហូតដល់ 5 អេក្រង់ | រហូតដល់ 12 អេក្រង់ ការចូល ការធ្វើតេស្ត |
| ការរចនាឆ្លើយតប | ✓ | ✓ | ✓ |
| ភ្ជាប់ទៅ API របស់អ្នក | ✓ | ✓ | ✓ |
| កូដប្រភព | ✓ | ✓ | ✓ |
គំរូ
មើលឧទាហរណ៍នៃការងាររបស់អ្នកលក់ដែលទាក់ទងនឹង Zinn នេះ។
ផលប័ត្រ
ឧទាហរណ៍នៃការងាររបស់អ្នកលក់ដែលទាក់ទងនឹង Zinn នេះ។
Formline: ហាង Next.js ជាមួយ Stripe
ហាងលក់ទំនិញដែលអ្នកអាចចុចបាន៖ ផ្ទាំងរូបភាព 16 នៅក្នុងការប្រមូល 4 តម្រង និងការស្វែងរកដែលនៅតែមាននៅក្នុង URL រទេះទំនិញ ស្បែកស្រាល និងងងឹត និងការទូទាត់ដែលបញ្ចប់ដោយការបញ្ជាទិញសាកល្បង ឬវគ្គ Stripe Checkout ពិតប្រាកដនៅក្នុងរបៀបសាកល្បង។ ខ្ញុំបានបង្កើតវាជាការនាំចេញឋិតិវន្ត Next.js នៅក្នុង TypeScript ជាមួយ Tailwind CSS ។ ការទូទាត់កាតឆ្លងកាត់ Cloudflare Worker ដែលកំណត់តម្លៃរទេះទំនិញឡើងវិញនៅលើម៉ាស៊ីនមេ និងផ្ទៀងផ្ទាត់ហត្ថលេខា webhook របស់ Stripe ។
គេហទំព័រផ្ទាល់ខ្លួនពីរភាសានៅក្នុង Next.js
គេហទំព័រផ្ទាល់ខ្លួនមួយទំព័រជាភាសាអង់គ្លេស និងរុស្ស៊ី ជាមួយនឹងផ្នែកសេវាកម្ម និងតំណភ្ជាប់ទៅកាន់គម្រោងសាកល្បងរបស់ខ្ញុំ។ ខ្ញុំបានរចនា និងបង្កើតវាជាមួយ Next.js, React និង TypeScript ជាការនាំចេញឋិតិវន្ត ដែលរចនាប័ទ្មជាមួយ CSS Modules ធម្មតា និងគ្មានក្របខ័ណ្ឌ UI ។ វាមានស្បែកស្រាល និងងងឹត ហើយរូបភាពមើលជាមុនសម្រាប់បណ្តាញសង្គមសម្រាប់ភាសានីមួយៗត្រូវបានបង្កើតឡើងនៅពេលបង្កើត។ GitHub Actions បង្កើត និងដាក់ពង្រាយវាទៅ Bunny CDN ដែលបន្ថែមបឋមកថា 보안 និងប្តូរទិស www និង HTTP ធម្មតាទៅកាន់អាសយដ្ឋាន HTTPS សំខាន់។
ព័ត៌មានលម្អិតសេវាកម្ម
សំណួរដែលសួរញឹកញាប់
បាទ/ចាស។ ខ្ញុំស្នើប្លង់ទូរស័ព្ទសម្រាប់អេក្រង់នីមួយៗ មុនពេលបង្កើតវា ជាលាយលក្ខណ៍អក្សរ ឬជាគំនូរព្រាងរហ័ស ដូច្នេះអ្នកអនុម័តវាជាមុន ជំនួសឱ្យការរកឃើញវានៅចុងបញ្ចប់។
បាទ/ចាស។ ខ្ញុំធ្វើតាមរចនាសម្ព័ន្ធថត ឈ្មោះ និងរចនាប័ទ្មដែលមានស្រាប់ ដូច្នេះកូដថ្មីប្រើលំនាំដូចគ្នា ហើយអ្នកអភិវឌ្ឍន៍បន្ទាប់មិនរកឃើញរចនាប័ទ្មពីរទេ។
ខ្ញុំផ្គូផ្គងគម្លាត ទំហំ និងពណ៌ពីឯកសារ។ កន្លែងដែលការរចនា និងទិន្នន័យពិតប្រាកដមិនស៊ីគ្នា ដូចជាឈ្មោះវែងជាងគំរូ ខ្ញុំសម្គាល់វា ហើយស្នើការជួសជុល ជំនួសឱ្យការអនុញ្ញាតឱ្យប្លង់ខូច។
សេវាកម្មនេះគឺសម្រាប់តែផ្នែកខាងមុខប៉ុណ្ណោះ។ សម្រាប់ផ្នែកខាងក្រោយនៅក្នុង Node.js ជាមួយ Express ឬ NestJS សូមមើល Zinn ផ្នែកខាងក្រោយរបស់ខ្ញុំ ឬបញ្ជាទិញទាំងពីរ ហើយខ្ញុំនឹងដកស្រង់ពួកវាជាមួយគ្នា។
ការវាយតម្លៃរបស់អតិថិជន
មើលអ្វីដែលអតិថិជនរបស់យើងនិយាយអំពី Zinn នេះ
ប្រភេទ
គោលការណ៍ Zinner
Zinns ដែលពាក់ព័ន្ធ
