ការរចនាក្របខ័ណ្ឌបណ្តាញ Python សុទ្ធ

ការអភិវឌ្ឍន៍គេហទំព័រគឺជាករណីប្រើប្រាស់ដ៏ពេញនិយមបំផុតមួយសម្រាប់ការសរសេរកម្មវិធី។ Python គឺជាភាសាសរសេរកម្មវិធីដ៏ពេញនិយមបំផុតមួយនៅក្នុងពិភពលោក។ ដូច្នេះហេតុអ្វីបានជាយើងមិនអាចបង្កើតកម្មវិធីគេហទំព័រនៅក្នុង Python?

ការបង្កើត UI គួរតែមានលក្ខណៈសាមញ្ញ ប៉ុន្តែសូម្បីតែអ្នកមានវិស្វករដ៏អស្ចារ្យនៅក្នុងក្រុមរបស់អ្នកក៏ដោយ ការចំណាយលើការរៀនភាសា និងឧបករណ៍ថ្មីគឺជាឧបសគ្គដ៏ធំមួយ។ ជារឿយៗការបង្កើត UI អាចពិបាកជាងការងារពិតដែលធ្វើទៅទៀត! យើងបានបង្កើត Reflex ដែលជាប្រភពបើកចំហរបណ្តាញ Python ដើម្បីដោះស្រាយបញ្ហាពិតប្រាកដនេះ។

TLDR

នៅក្រោមក្រណាត់ កម្មវិធី Reflex ចងក្រងទៅកម្មវិធី React frontend និងកម្មវិធី FastAPI backend ។ មានតែ UI ប៉ុណ្ណោះដែលត្រូវបានចងក្រងជា Javascript; តក្កវិជ្ជាកម្មវិធី និងការគ្រប់គ្រងរដ្ឋទាំងអស់ស្ថិតនៅក្នុង Python ហើយដំណើរការលើម៉ាស៊ីនមេ។ Reflex ប្រើ WebSockets ដើម្បីផ្ញើព្រឹត្តិការណ៍ពី frontend ទៅ backend និងដើម្បីផ្ញើការអាប់ដេតរដ្ឋពី backend ទៅ frontend ។

ដំណោះស្រាយ Python ដែលមានស្រាប់

មានវិធីមួយចំនួនរួចហើយដើម្បីបង្កើតកម្មវិធីនៅក្នុង Python ប៉ុន្តែគ្មាននរណាម្នាក់ក្នុងចំនោមពួកគេសមនឹងតម្រូវការរបស់យើងទេ។

ម្យ៉ាងវិញទៀត មានក្របខ័ណ្ឌដូចជា Django និង Flask ដែលល្អសម្រាប់បង្កើតកម្មវិធីគេហទំព័រកម្រិតផលិតកម្ម។ ប៉ុន្តែពួកគេគ្រប់គ្រងតែផ្នែកខាងក្រោយប៉ុណ្ណោះ - អ្នកនៅតែត្រូវប្រើ JavaScript និងក្របខ័ណ្ឌ frontend ក៏ដូចជាការសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ផ្នែកខាងមុខ និងផ្នែកខាងក្រោយ។

ម្យ៉ាងវិញទៀត បណ្ណាល័យ Python សុទ្ធដូចជា Dash និង Streamlit អាចល្អសម្រាប់គម្រោងតូចៗ ប៉ុន្តែពួកវាត្រូវបានកំណត់ចំពោះករណីប្រើប្រាស់ជាក់លាក់មួយ ហើយមិនមានលក្ខណៈពិសេស និងដំណើរការដើម្បីបង្កើតកម្មវិធីគេហទំព័រពេញលេញនោះទេ។ នៅពេលដែលកម្មវិធីរបស់អ្នករីកចម្រើននៅក្នុងលក្ខណៈពិសេស និងភាពស្មុគស្មាញ អ្នកអាចរកឃើញថាខ្លួនអ្នកកំពុងឈានដល់ដែនកំណត់នៃក្របខ័ណ្ឌ ដែលនៅចំណុចនោះអ្នកត្រូវកំណត់គំនិតរបស់អ្នកឱ្យសមនឹងក្របខ័ណ្ឌ ឬលុបចោលគម្រោងរបស់អ្នក ហើយបង្កើតវាឡើងវិញដោយប្រើ "ក្របខ័ណ្ឌគេហទំព័រពិតប្រាកដ" ។

យើងចង់ភ្ជាប់គម្លាតនេះដោយបង្កើតក្របខ័ណ្ឌដែលងាយស្រួល និងវិចារណញាណក្នុងការចាប់ផ្តើមជាមួយ ខណៈពេលដែលនៅសល់អាចបត់បែនបាន និងមានថាមពលដើម្បីគាំទ្រកម្មវិធីណាមួយ។

គោលដៅនៃការឆ្លុះបញ្ចាំង

• Pure Python ៖ ប្រើភាសាមួយសម្រាប់អ្វីៗគ្រប់យ៉ាង។
• ងាយស្រួលចាប់ផ្តើម ៖ បង្កើតគំនិតរបស់អ្នកបានយ៉ាងងាយស្រួលដោយមិនត្រូវការបទពិសោធន៍អភិវឌ្ឍន៍គេហទំព័រ។
• ភាពបត់បែនពេញលេញ ៖ កម្មវិធីគេហទំព័រគួរតែត្រូវគ្នានឹងការប្ដូរតាមបំណង និងដំណើរការនៃក្របខ័ណ្ឌគេហទំព័របែបប្រពៃណី។
• ថ្មរួមបញ្ចូល ៖ គ្រប់គ្រងជង់ពេញពីផ្នែកខាងមុខ ទៅផ្នែកខាងក្រោយ ដើម្បីដាក់ពង្រាយ។

ឥឡូវនេះ ចូរយើងស្វែងយល់ពីរបៀបដែលយើងបង្កើត Reflex ដើម្បីសម្រេចគោលដៅទាំងនេះ។

ស្ថាបត្យកម្ម Reflex

កម្មវិធីគេហទំព័រពេញជង់ត្រូវបានបង្កើតឡើងដោយផ្នែកខាងមុខ និងផ្នែកខាងក្រោយ។ ផ្នែកខាងមុខគឺជាចំណុចប្រទាក់អ្នកប្រើប្រាស់ ហើយត្រូវបានបម្រើជាគេហទំព័រដែលដំណើរការលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកប្រើប្រាស់។ កម្មវិធីខាងក្រោយគ្រប់គ្រងតក្កវិជ្ជា និងការគ្រប់គ្រងរដ្ឋ (ដូចជាមូលដ្ឋានទិន្នន័យ និង APIs) ហើយដំណើរការលើម៉ាស៊ីនមេ។ នៅក្នុងការអភិវឌ្ឍន៍គេហទំព័របែបប្រពៃណី ទាំងនេះជាធម្មតាជាកម្មវិធីពីរដាច់ដោយឡែកពីគ្នា ហើយជារឿយៗត្រូវបានសរសេរក្នុងក្របខ័ណ្ឌ ឬភាសាផ្សេងៗគ្នា។ ជាឧទាហរណ៍ អ្នកអាចផ្សំផ្នែកខាងក្រោយរបស់ Flask ជាមួយ React frontend។ ជាមួយនឹងវិធីសាស្រ្តនេះ អ្នកត្រូវតែរក្សាកម្មវិធីពីរដាច់ដោយឡែក ហើយបញ្ចប់ការសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ frontend និង backend ។

យើងចង់សម្រួលដំណើរការនេះនៅក្នុង Reflex ដោយកំណត់ទាំងផ្នែកខាងមុខ និងផ្នែកខាងក្រោយនៅក្នុងមូលដ្ឋានកូដតែមួយ ខណៈពេលដែលប្រើ Python សម្រាប់អ្វីគ្រប់យ៉ាង។ អ្នកអភិវឌ្ឍន៍គួរព្រួយបារម្ភតែអំពីតក្កវិជ្ជារបស់កម្មវិធីរបស់ពួកគេប៉ុណ្ណោះ ហើយមិនមែនអំពីព័ត៌មានលម្អិតនៃការអនុវត្តកម្រិតទាបនោះទេ។

ផ្នែកខាងមុខ

យើងចង់ឱ្យកម្មវិធី Reflex មើលទៅ និងមានអារម្មណ៍ដូចជាកម្មវិធីបណ្តាញប្រពៃណីសម្រាប់អ្នកប្រើប្រាស់ចុងក្រោយ ខណៈពេលដែលនៅតែមានភាពងាយស្រួលក្នុងការសាងសង់ និងថែទាំសម្រាប់អ្នកអភិវឌ្ឍន៍។ ដើម្បីធ្វើដូច្នេះ យើងបានបង្កើតឡើងនៅលើកំពូលនៃបច្ចេកវិទ្យាគេហទំព័រចាស់ទុំ និងពេញនិយម។

នៅពេលអ្នក reflex run កម្មវិធីរបស់អ្នក Reflex ចងក្រងផ្នែកខាងមុខចុះក្រោមទៅទំព័រតែមួយកម្មវិធី Next.js ហើយបម្រើវានៅលើច្រក (តាមលំនាំដើម 3000 ) ដែលអ្នកអាចចូលប្រើក្នុងកម្មវិធីរុករករបស់អ្នក។

ការងាររបស់ frontend គឺឆ្លុះបញ្ចាំងពីស្ថានភាពរបស់កម្មវិធី ហើយផ្ញើព្រឹត្តិការណ៍ទៅកាន់ backend នៅពេលអ្នកប្រើប្រាស់ធ្វើអន្តរកម្មជាមួយ UI ។ គ្មានតក្កវិជ្ជាពិតប្រាកដត្រូវបានដំណើរការនៅលើផ្នែកខាងមុខទេ។

សមាសធាតុ

ផ្នែកខាងមុខឆ្លុះបញ្ចាំងត្រូវបានបង្កើតឡើងដោយប្រើសមាសធាតុដែលអាចត្រូវបានផ្សំជាមួយគ្នាដើម្បីបង្កើត UI ស្មុគស្មាញ។ ជំនួសឱ្យការប្រើភាសាគំរូដែលលាយ HTML និង Python យើងគ្រាន់តែប្រើមុខងារ Python ដើម្បីកំណត់ UI ។

នៅក្រោមក្រណាត់ សមាសធាតុចងក្រងទៅជាសមាសធាតុប្រតិកម្ម។ សមាសធាតុស្នូលជាច្រើនរបស់យើងគឺផ្អែកលើ Radix ដែលជាបណ្ណាល័យសមាសធាតុ React ដ៏ពេញនិយម។ យើងក៏មានសមាសធាតុជាច្រើនទៀតសម្រាប់ក្រាហ្វ តារាងទិន្នន័យ និងច្រើនទៀត។ យើងជ្រើសរើស React ព្រោះវាជាបណ្ណាល័យដ៏ពេញនិយមដែលមានប្រព័ន្ធអេកូឡូស៊ីដ៏ធំ។ គោលដៅរបស់យើងគឺមិនមែនដើម្បីបង្កើតប្រព័ន្ធអេកូបណ្ដាញឡើងវិញទេ ប៉ុន្តែធ្វើឱ្យវាអាចចូលដំណើរការបានសម្រាប់អ្នកអភិវឌ្ឍន៍ Python ។

នេះក៏អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់របស់យើងនាំយកសមាសធាតុផ្ទាល់ខ្លួនរបស់ពួកគេផងដែរ ប្រសិនបើយើងមិនមានសមាសធាតុដែលពួកគេត្រូវការ។ អ្នក​ប្រើ​អាច​រុំ​សមាសធាតុ​ប្រតិកម្ម​ផ្ទាល់​ខ្លួន​របស់​ពួកគេ ហើយ​បន្ទាប់​មក​បោះពុម្ព​វា​សម្រាប់​អ្នក​ផ្សេង​ទៀត​ប្រើ។ យូរៗទៅ យើងនឹងបង្កើតប្រព័ន្ធអេកូនៃសមាសភាគភាគីទីបីរបស់យើង ដើម្បីឱ្យអ្នកប្រើប្រាស់អាចស្វែងរក និងប្រើប្រាស់សមាសធាតុដែលអ្នកដទៃបានសាងសង់យ៉ាងងាយស្រួល។

រចនាប័ទ្ម

យើងចង់ធ្វើឱ្យប្រាកដថាកម្មវិធី Reflex មើលទៅល្អចេញពីប្រអប់ ខណៈពេលដែលនៅតែផ្តល់ឱ្យអ្នកអភិវឌ្ឍន៍នូវការគ្រប់គ្រងពេញលេញលើរូបរាងរបស់កម្មវិធីរបស់ពួកគេ។

យើងមានប្រព័ន្ធស្នូលដែលអនុញ្ញាតឱ្យអ្នកកំណត់ជម្រើសរចនាប័ទ្មកម្រិតខ្ពស់ដូចជារបៀបងងឹត និងពណ៌សង្កត់សំឡេងពេញកម្មវិធីរបស់អ្នក ដើម្បីផ្តល់ឱ្យវានូវរូបរាង និងអារម្មណ៍រួមមួយ។

លើសពីនេះ សមាសធាតុ Reflex អាចត្រូវបានកំណត់រចនាប័ទ្មដោយប្រើថាមពលពេញលេញនៃ CSS ។ យើងប្រើប្រាស់បណ្ណាល័យ អារម្មណ៍ ដើម្បីអនុញ្ញាតឱ្យកំណត់រចនាប័ទ្ម "CSS-in-Python" ដូច្នេះអ្នកអាចឆ្លងកាត់ CSS prop ណាមួយជាអាគុយម៉ង់ពាក្យគន្លឹះទៅកាន់សមាសធាតុមួយ។ នេះរួមបញ្ចូលទាំងឧបករណ៍ឆ្លើយតបដោយឆ្លងកាត់បញ្ជីតម្លៃ។

ផ្នែកខាងក្រោយ

នៅក្នុង Reflex មានតែ frontend ចងក្រងជា Javascript ហើយដំណើរការលើ browser របស់អ្នកប្រើ ខណៈពេលដែល state និង logic ទាំងអស់ស្ថិតនៅក្នុង Python ហើយដំណើរការលើ server។ នៅពេលអ្នក reflex run យើងចាប់ផ្តើមម៉ាស៊ីនមេ FastAPI (តាមលំនាំដើមនៅលើច្រក 8000 ) ដែលផ្នែកខាងមុខភ្ជាប់ទៅតាមរយៈរន្ធបណ្តាញ។

រដ្ឋ និងតក្កវិជ្ជាទាំងអស់ត្រូវបានកំណត់នៅក្នុងថ្នាក់ State ។ រដ្ឋត្រូវបានបង្កើតឡើងដោយ vars និង អ្នកដោះស្រាយព្រឹត្តិការណ៍ ។ Vars គឺជាតម្លៃណាមួយនៅក្នុងកម្មវិធីរបស់អ្នកដែលអាចផ្លាស់ប្តូរតាមពេលវេលា។ ពួកវាត្រូវបានកំណត់ថាជាគុណលក្ខណៈថ្នាក់នៅលើថ្នាក់ State របស់អ្នក ហើយអាចជាប្រភេទ Python ណាមួយដែលអាចត្រូវបានដាក់សៀរៀលទៅ JSON ។

កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍គឺជាវិធីសាស្រ្តនៅក្នុងថ្នាក់ State របស់អ្នកដែលត្រូវបានហៅនៅពេលដែលអ្នកប្រើធ្វើអន្តរកម្មជាមួយ UI ។ ពួកវាជាមធ្យោបាយតែមួយគត់ដែលយើងអាចកែប្រែ vars ក្នុង Reflex ហើយអាចហៅជាការឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើប្រាស់ ដូចជាការចុចប៊ូតុង ឬវាយបញ្ចូលក្នុងប្រអប់អត្ថបទជាដើម។

ដោយសារកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ត្រូវបានដំណើរការនៅលើផ្នែកខាងក្រោយ អ្នកអាចប្រើបណ្ណាល័យ Python ណាមួយនៅក្នុងពួកគេ។

ដំណើរការព្រឹត្តិការណ៍

ជាធម្មតានៅពេលសរសេរកម្មវិធីគេហទំព័រ អ្នកត្រូវសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ frontend និង backend ។ ជាមួយនឹង Reflex អ្នកមិនចាំបាច់ព្រួយបារម្ភអំពីរឿងនោះទេ - យើងដោះស្រាយការទំនាក់ទំនងរវាង frontend និង backend សម្រាប់អ្នក។ អ្នកអភិវឌ្ឍន៍គ្រាន់តែសរសេរតក្កវិជ្ជាដោះស្រាយព្រឹត្តិការណ៍របស់ពួកគេ ហើយនៅពេលដែល vars ត្រូវបានធ្វើបច្ចុប្បន្នភាព UI ត្រូវបានធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិ។

កត្តាបង្កហេតុ

អ្នក​ប្រើ​អាច​ធ្វើ​អន្តរកម្ម​ជាមួយ UI ក្នុង​វិធី​ជា​ច្រើន​ដូច​ជា​ការ​ចុច​ប៊ូតុង វាយ​ក្នុង​ប្រអប់​អត្ថបទ ឬ​ដាក់​លើ​ធាតុ​មួយ។ នៅក្នុង Reflex យើងហៅ ព្រឹត្តិការណ៍ទាំងនេះថា triggers ។

ជួរព្រឹត្តិការណ៍

នៅផ្នែកខាងមុខ យើងរក្សាជួរព្រឹត្តិការណ៍នៃព្រឹត្តិការណ៍ដែលមិនទាន់សម្រេចទាំងអស់។ ព្រឹត្តិការណ៍​មួយ​មាន​ទិន្នន័យ​សំខាន់ៗ​ចំនួន​បី៖

• និមិត្តសញ្ញាម៉ាស៊ីនភ្ញៀវ ៖ ម៉ាស៊ីនភ្ញៀវនីមួយៗ (ផ្ទាំងកម្មវិធីរុករក) មាននិមិត្តសញ្ញាតែមួយគត់ដើម្បីកំណត់អត្តសញ្ញាណវា។ នេះអនុញ្ញាតឱ្យ backend ដឹងថារដ្ឋមួយណាដែលត្រូវអាប់ដេត។
• កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ ៖ កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ដែលត្រូវដំណើរការលើស្ថានភាព។
• អាគុយម៉ង់ ៖ អាគុយម៉ង់ដែលត្រូវបញ្ជូនទៅកាន់អ្នកដោះស្រាយព្រឹត្តិការណ៍។

នៅពេលដែលព្រឹត្តិការណ៍ត្រូវបានកេះ វាត្រូវបានបន្ថែមទៅជួរ។ យើងមានទង់ processing ដើម្បីប្រាកដថាមានតែព្រឹត្តិការណ៍មួយប៉ុណ្ណោះដែលត្រូវបានដំណើរការក្នុងពេលតែមួយ។ នេះធានាថារដ្ឋមានភាពស៊ីសង្វាក់គ្នាជានិច្ច ហើយមិនមានលក្ខខណ្ឌនៃការប្រណាំងណាមួយទេ ដោយមានអ្នករៀបចំព្រឹត្តិការណ៍ពីរនាក់កែប្រែរដ្ឋក្នុងពេលតែមួយ។ មានករណីលើកលែងចំពោះបញ្ហានេះ ដូចជាព្រឹត្តិការណ៍ផ្ទៃខាងក្រោយដែលអនុញ្ញាតឱ្យអ្នកដំណើរការព្រឹត្តិការណ៍ក្នុងផ្ទៃខាងក្រោយដោយមិនរារាំង UI ។

នៅពេលដែលព្រឹត្តិការណ៍រួចរាល់ដើម្បីដំណើរការ វាត្រូវបានបញ្ជូនទៅផ្នែកខាងក្រោយតាមរយៈការតភ្ជាប់ WebSocket ។

អ្នកគ្រប់គ្រងរដ្ឋ

នៅពេលទទួលព្រឹត្តិការណ៍ វាត្រូវបានដំណើរការនៅលើផ្នែកខាងក្រោយ។ Reflex ប្រើ អ្នកគ្រប់គ្រងរដ្ឋ ដែលរក្សាការគូសផែនទីរវាងនិមិត្តសញ្ញាអតិថិជន និងស្ថានភាពរបស់ពួកគេ។ តាមលំនាំដើម អ្នកគ្រប់គ្រងរដ្ឋគ្រាន់តែជាវចនានុក្រមក្នុងសតិប៉ុណ្ណោះ ប៉ុន្តែវាអាចត្រូវបានពង្រីកដើម្បីប្រើមូលដ្ឋានទិន្នន័យ ឬឃ្លាំងសម្ងាត់។ នៅក្នុងផលិតកម្ម យើងប្រើ Redis ជាអ្នកគ្រប់គ្រងរដ្ឋរបស់យើង។

ការដោះស្រាយព្រឹត្តិការណ៍

នៅពេលដែលយើងមានស្ថានភាពរបស់អ្នកប្រើ ជំហានបន្ទាប់គឺត្រូវដំណើរការកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ជាមួយនឹងអាគុយម៉ង់។

បច្ចុប្បន្នភាពរដ្ឋ

រាល់ពេលដែលអ្នកដោះស្រាយព្រឹត្តិការណ៍ត្រឡប់ (ឬទិន្នផល) យើងរក្សាទុកស្ថានភាពនៅក្នុងអ្នកគ្រប់គ្រងរដ្ឋ ហើយផ្ញើ បច្ចុប្បន្នភាពរបស់រដ្ឋ ទៅផ្នែកខាងមុខដើម្បីធ្វើបច្ចុប្បន្នភាព UI ។ ដើម្បីរក្សាដំណើរការនៅពេលដែលស្ថានភាពរបស់អ្នករីកចម្រើន ខាងក្នុង Reflex រក្សាដាននៃ vars ដែលត្រូវបានធ្វើបច្ចុប្បន្នភាពកំឡុងពេលកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ ( vars កខ្វក់ ) ។

នៅពេលដែលកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ត្រូវបានដំណើរការរួចរាល់ យើងរកឃើញ vars កខ្វក់ទាំងអស់ ហើយបង្កើតការអាប់ដេតរដ្ឋដើម្បីផ្ញើទៅកាន់ផ្នែកខាងមុខ។

យើងរក្សាទុករដ្ឋថ្មីនៅក្នុងអ្នកគ្រប់គ្រងរដ្ឋរបស់យើង ហើយបន្ទាប់មកផ្ញើបច្ចុប្បន្នភាពរដ្ឋទៅផ្នែកខាងមុខ។ បន្ទាប់មកផ្នែកខាងមុខធ្វើបច្ចុប្បន្នភាព UI ដើម្បីឆ្លុះបញ្ចាំងពីស្ថានភាពថ្មី។

សេចក្តីសន្និដ្ឋាន

ខ្ញុំសង្ឃឹមថានេះផ្តល់នូវទិដ្ឋភាពទូទៅដ៏ល្អនៃរបៀបដែល Reflex ដំណើរការនៅក្រោមក្រណាត់។ យើង​នឹង​មាន​ការ​ប្រកាស​ជា​ច្រើន​ទៀត​ចេញ​មក​ដើម្បី​ចែក​រំលែក​ពី​របៀប​ដែល​យើង​ធ្វើ​ឱ្យ Reflex អាច​ធ្វើ​មាត្រដ្ឋាន​បាន និង​អាច​អនុវត្ត​បាន​តាម​រយៈ​លក្ខណៈ​ពិសេស​ដូច​ជា​ការ​បំបែក​រដ្ឋ និង​ការ​បង្កើន​ប្រសិទ្ធភាព​ការ​ចងក្រង។