ផ្នែកខាងមុខរបស់អ្នកនៅតែដំណើរការលើ jQuery, សមាសធាតុ class ចាស់ៗ ឬការដំឡើង Next.js ដែលហួសសម័យ ហើយរាល់ការផ្លាស់ប្តូរចំណាយពេលយូរជាងការគួរ។ ខ្ញុំនឹងផ្លាស់ប្តូរវាទៅជា React ឬ Next.js ទំនើបនៅក្នុង TypeScript មួយទំព័រម្តង ខណៈពេលដែលផលិតផលនៅតែបន្តដំណើរការ។
ខ្ញុំនឹងផ្លាស់ប្តូរផ្នែកខាងមុខ jQuery ឬ React ចាស់របស់អ្នកទៅជា React ឬ Next.js ទំនើប មួយទំព័រម្តង។
ផែនការផ្លាស់ប្តូរសម្រាប់ផ្នែកខាងមុខរបស់អ្នក និងទំព័រតូចមួយដែលបានផ្លាស់ប្តូរជាគំរូ។
- ផែនការ និងទំព័រគំរូមួយ
- ផែនការផ្លាស់ប្តូរដែលបានសរសេរ
- កូដប្រភព
រហូតដល់ 3 ទំព័របានផ្លាស់ប្តូរទៅ React ឬ Next.js ដែលដំណើរការនៅជាប់នឹងកូដចាស់។
- រហូតដល់ 3 ទំព័របានផ្លាស់ប្តូរ
- ផែនការផ្លាស់ប្តូរដែលបានសរសេរ
- កូដប្រភព
រហូតដល់ 8 ទំព័រ សមាសធាតុដែលបានចែករំលែក ប្រភេទ TypeScript និងការធ្វើតេស្ត។
- រហូតដល់ 8 ទំព័រ សមាសធាតុ ការធ្វើតេស្ត
- ផែនការផ្លាស់ប្តូរដែលបានសរសេរ
- កូដប្រភព
ស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
ចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួន
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលគណនីដើម្បីស្នើសុំការផ្តល់ជូនផ្ទាល់ខ្លួនពី Zinner នេះ។
ចូល / ចុះឈ្មោះសួរសំណួរមុនពេលលក់
ចូលដើម្បីសួរសំណួរ
ដើម្បីកាត់បន្ថយសារឥតបានការនៅលើវេទិកា សារមុនពេលលក់អាចត្រូវបានផ្ញើដោយអ្នកប្រើប្រាស់ដែលបានចូលប៉ុណ្ណោះ។
បង្កើតគណនីឥតគិតថ្លៃ ឬចូលដើម្បីផ្ញើសារទៅ Zinner នេះដោយផ្ទាល់។
ចូល / ចុះឈ្មោះនៅ glance
ព័ត៌មានលម្អិតសំខាន់ៗអំពីសេវាកម្មនេះ ដើម្បីជួយអ្នកសម្រេចចិត្ត។ បង្កើតដោយ Zinn Hub មិនមែនអ្នកលក់ទេ។
ទីតាំងតម្លៃ
វិធីសាស្រ្តធ្វើចំណាកស្រុក
បច្ចេកវិទ្យា Stack
អ្វីដែលនៅដដែល
ការគាំទ្រក្រោយការដឹកជញ្ជូន
អ្វីដែលអ្នកនឹងទទួលបាន
ការពិពណ៌នាពេញលេញ
ផលិតផលមួយចំនួនដំណើរការ និងរកលុយបាន ប៉ុន្តែផ្នែកខាងមុខរបស់វាបានក្លាយជាការលំបាកក្នុងការផ្លាស់ប្តូរ: jQuery រីករាលដាលពាសពេញគំរូ, សមាសធាតុថ្នាក់ React ពីប៉ុន្មានឆ្នាំមុន, ឬកម្មវិធី Next.js នៅតែនៅលើ Pages Router។ ការសរសេរឡើងវិញទាំងស្រុងធ្វើឱ្យផលិតផលជាប់គាំងអស់ជាច្រើនខែ។ ខ្ញុំធ្វើរឿងផ្សេងទៀត: កូដចាស់ និងថ្មីដំណើរការស្របគ្នា ហើយទំព័រផ្លាស់ប្តូរម្តងមួយៗ ដូច្នេះមិនដែលមានថ្ងៃប្តូរធំសម្រាប់អ្នកប្រើប្រាស់របស់អ្នកឡើយ។
ខ្ញុំបានធ្វើរឿងនេះយ៉ាងពិតប្រាកដលើគម្រោងកន្លងមកក្រោម NDA: ផ្នែកខាងមុខ jQuery បានផ្លាស់ប្តូរទៅ React មួយទំព័រម្តងមួយទំព័រ ខណៈពេលដែលផលិតផលនៅតែដំណើរការ។
កញ្ចប់ចាប់ផ្តើមផ្តល់ឱ្យអ្នកនូវផែនការ: ខ្ញុំអានផ្នែកខាងមុខចាស់ គូសផែនទីទំព័រ និងបំណែកដែលបានចែករំលែករបស់វា រាយបញ្ជីហានិភ័យ និងផ្លាស់ប្តូរទំព័រតូចមួយជាគំរូការងារនៃវិធីសាស្រ្ត។ កញ្ចប់ស្តង់ដារផ្លាស់ប្តូររហូតដល់បីទំព័រ ឬអេក្រង់។ កញ្ចប់កម្រិតខ្ពស់ផ្លាស់ប្តូររហូតដល់ប្រាំបី បង្កើតសមាសធាតុដែលបានចែករំលែកដែលពួកគេត្រូវការ និងគ្របដណ្តប់ពួកវាជាមួយនឹងប្រភេទ TypeScript សម្រាប់ទិន្នន័យរបស់ពួកគេ និងការធ្វើតេស្តសម្រាប់លំហូរចម្បង។
អ្វីដែលនៅដដែល: backend របស់អ្នក, URLs របស់អ្នក និងឥរិយាបថដែលអ្នកប្រើប្រាស់ស្គាល់។ អ្វីដែលផ្លាស់ប្តូរ: របៀបដែលកូដត្រូវបានរៀបចំ ដូច្នេះលក្ខណៈពិសេសបន្ទាប់ត្រូវបានសរសេរម្តង ក្នុងកន្លែងតែមួយ។ សម្រាប់ 14 ថ្ងៃបន្ទាប់ពីការផ្តល់ជូន ខ្ញុំជួសជុលអ្វីដែលមិនដំណើរការដូចដែលយើងបានព្រមព្រៀង ដោយឥតគិតថ្លៃ។
លំដាប់ទំព័រ និងផែនការត្រូវបានព្រមព្រៀងគ្នាក្នុងការជជែកលំដាប់ ដោយគ្មានការហៅទូរសព្ទ។ ទំព័រដែលបានផ្លាស់ប្តូរនីមួយៗត្រូវបានដឹកជញ្ជូនដោយខ្លួនឯង ហើយអ្នកទទួលបានកំណត់ត្រាស្ថានភាពដែលបានសរសេរជារៀងរាល់ថ្ងៃធ្វើការ។
ជំហានសម្រាប់ការបញ្ចប់គម្រោងរបស់អ្នក
1. គូសផែនទីផ្នែកខាងមុខចាស់ - ខ្ញុំឆ្លងកាត់គំរូ ស្គ្រីប និងសមាសធាតុ ហើយរាយបញ្ជីទំព័រ ផ្នែកដែលបានចែករំលែក និងអ្វីដែលប្រឈមនឹងហានិភ័យ ដូចជាស្ថានភាពសកល ឬស្គ្រីបក្នុងជួរ។
2. យល់ព្រមតាមលំដាប់ - អ្នកទទួលបានផែនការជាលាយលក្ខណ៍អក្សរ៖ ទំព័រណាមួយទៅមុន អ្វីដែលផ្លាស់ប្តូរជាមួយវា និងរបៀបដែលកូដចាស់ និងថ្មីចែករំលែកផលិតផល ខណៈពេលដែលទាំងពីរមាន។
3. ស្ពាន - កូដ React ឬ Next.js ថ្មីត្រូវបានដំឡើងនៅជាប់នឹងកូដចាស់ ជាមួយនឹងការកំណត់ផ្លូវដែលបញ្ជូនទំព័រនីមួយៗទៅកាន់ផ្នែកណាមួយដែលជាម្ចាស់វា។
4. ផ្លាស់ទីទំព័រម្តងមួយៗ - ទំព័រនីមួយៗត្រូវបានបង្កើតឡើងវិញ ប្រៀបធៀបជាមួយកំណែចាស់ ហើយប្តូរដោយខ្លួនឯង ដូច្នេះបញ្ហាប៉ះពាល់ដល់ទំព័រមួយ មិនមែនផលិតផលទេ។
5. ប្រគល់ - ទំព័រដែលបានផ្លាស់ប្តូរ ផែនការដែលបានធ្វើបច្ចុប្បន្នភាពសម្រាប់អ្វីដែលនៅសល់ និងកំណត់ចំណាំខ្លីមួយស្តីពីគំរូដែលត្រូវអនុវត្តតាមសម្រាប់ទំព័របន្ទាប់។
ការធានាគុណភាព Zinner
Zinner គ្រប់រូបត្រូវបានត្រួតពិនិត្យ និងអនុម័តមុនពេលចូលរួមវេទិកា។
សេវាកម្មទាំងអស់ត្រូវបានគាំទ្រដោយការប្តេជ្ញាចិត្តធានាគុណភាពរបស់យើង។
ការទូទាត់របស់អ្នកត្រូវបានការពាររហូតដល់អ្នកអនុម័តការងារដែលបានប្រគល់។
ប្រៀបធៀបកញ្ចប់
| មុខងារ | អ្នកចាប់ផ្តើម | ស្តង់ដារ | កម្រិតខ្ពស់ |
|---|---|---|---|
| ពេលវេលាដឹកជញ្ជូន | 4 ថ្ងៃ | 10 ថ្ងៃ | 21 ថ្ងៃ |
| ការកែប្រែ | 1 | 2 | 3 |
| វិសាលភាព | ផែនការ និងទំព័រគំរូមួយ | រហូតដល់ 3 ទំព័របានផ្លាស់ប្តូរ | រហូតដល់ 8 ទំព័រ សមាសធាតុ ការធ្វើតេស្ត |
| ផែនការផ្លាស់ប្តូរជាលាយលក្ខណ៍អក្សរ | ✓ | ✓ | ✓ |
| កូដប្រភព | ✓ | ✓ | ✓ |
ផលប័ត្រ
ឧទាហរណ៍នៃការងាររបស់អ្នកលក់ដែលទាក់ទងនឹង 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 សំខាន់។
ព័ត៌មានលម្អិតសេវាកម្ម
សំណួរដែលសួរញឹកញាប់
ដោយសារតែផលិតផលនឹងនៅស្ងៀមអស់ជាច្រើនខែ ហើយហានិភ័យទាំងអស់នឹងធ្លាក់លើថ្ងៃចេញផ្សាយតែមួយ។ មួយទំព័រម្តងៗ គ្រប់ជំហានគឺតូច អាចសាកល្បងបាន និងងាយស្រួលក្នុងការត្រឡប់មកវិញ។
ទំព័ររក្សាអាសយដ្ឋានរបស់ពួកគេ។ ជាមួយ Next.js ទំព័រថ្មីទៅដល់កម្មវិធីរុករកជា HTML ដែលត្រៀមរួចជាស្រេច ដែលបានបង្ហាញនៅលើម៉ាស៊ីនមេ ឬនៅពេលបង្កើត ដូច្នេះម៉ាស៊ីនស្វែងរកឃើញមាតិកាដូចពីមុន។ React ជាមួយ Vite បង្ហាញនៅក្នុងកម្មវិធីរុករក ដូច្នេះសម្រាប់ទំព័រដែលនាំមកនូវចរាចរណ៍ស្វែងរក ខ្ញុំសូមណែនាំ Next.js ។
បាទ/ចាស។ ទំព័រដែលបានផ្លាស់ប្តូរត្រូវបានសរសេរជា TypeScript ហើយកូដចាស់នៅតែដំណើរការជា JavaScript រហូតដល់វេនរបស់វា។
ទេ ការផ្លាស់ប្តូរនេះប៉ះពាល់តែផ្នែកខាងមុខប៉ុណ្ណោះ។ កន្លែងដែលផ្នែកខាងក្រោយរបស់អ្នកមានចំណុចបញ្ចប់សម្រាប់ទិន្នន័យដែលទំព័រត្រូវការ ទំព័រថ្មីប្រើប្រាស់វា។ ប្រសិនបើទិន្នន័យនោះមានតែជា HTML ដែលបង្ហាញដោយ PHP ថ្ងៃនេះ ផែនការរាយបញ្ជីចំណុចបញ្ចប់ JSON តូចៗដែលទំព័រត្រូវការ ហើយយើងយល់ព្រមថាអ្នកណាជាអ្នកបន្ថែមពួកវា មុនពេលទំព័រនោះផ្លាស់ប្តូរ។
ការវាយតម្លៃរបស់អតិថិជន
មើលអ្វីដែលអតិថិជនរបស់យើងនិយាយអំពី Zinn នេះ
ប្រភេទ
គោលការណ៍ Zinner
Zinns ដែលពាក់ព័ន្ធ
បង្កើតកម្មវិធីគេហទំព័រផ្ទាល់ខ្លួនដោយប្រើ React JS, Node JS & Google Firebase
ការអភិវឌ្ឍន៍ផ្នែកខាងមុខ React ប្រកបដោយវិជ្ជាជីវៈជាមួយនឹង Firebase & ការរួមបញ្ចូល AI
