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

ការអភិវឌ្ឍន៍គេហទំព័រគឺជាករណីប្រើប្រាស់ដ៏ពេញនិយមបំផុតមួយសម្រាប់ការសរសេរកម្មវិធី។ Python គឺជាភាសាសរសេរកម្មវិធីដ៏ពេញនិយមបំផុតមួយនៅក្នុងពិភពលោក។ ដូច្នេះហេតុអ្វីបានជាយើងមិនអាចបង្កើតកម្មវិធីគេហទំព័រនៅក្នុង Python? ការបង្កើត UI គួរតែមានលក្ខណៈសាមញ្ញ ប៉ុន្តែសូម្បីតែអ្នកមានវិស្វករដ៏អស្ចារ្យនៅក្នុងក្រុមរបស់អ្នកក៏ដោយ ការចំណាយលើការរៀនភាសា និងឧបករណ៍ថ្មីគឺជាឧបសគ្គដ៏ធំមួយ។ ជារឿយៗការបង្កើត UI អាចពិបាកជាងការងារពិតដែលធ្វើទៅទៀត! យើងបានបង្កើត Reflex ដែលជាប្រភពបើកចំហរបណ្តាញ Python ដើម្បីដោះស្រាយបញ្ហាពិតប្រាកដនេះ។ TLDR នៅក្រោមក្រណាត់ កម្មវិធី Reflex ចងក្រងទៅកម្មវិធី frontend និងកម្មវិធី backend ។ មានតែ UI ប៉ុណ្ណោះដែលត្រូវបានចងក្រងជា Javascript; តក្កវិជ្ជាកម្មវិធី និងការគ្រប់គ្រងរដ្ឋទាំងអស់ស្ថិតនៅក្នុង Python ហើយដំណើរការលើម៉ាស៊ីនមេ។ Reflex ប្រើ ដើម្បីផ្ញើព្រឹត្តិការណ៍ពី frontend ទៅ backend និងដើម្បីផ្ញើការអាប់ដេតរដ្ឋពី backend ទៅ frontend ។ React FastAPI WebSockets ដំណោះស្រាយ Python ដែលមានស្រាប់ មានវិធីមួយចំនួនរួចហើយដើម្បីបង្កើតកម្មវិធីនៅក្នុង Python ប៉ុន្តែគ្មាននរណាម្នាក់ក្នុងចំនោមពួកគេសមនឹងតម្រូវការរបស់យើងទេ។ ម្យ៉ាងវិញទៀត មានក្របខ័ណ្ឌដូចជា និង ដែលល្អសម្រាប់បង្កើតកម្មវិធីគេហទំព័រកម្រិតផលិតកម្ម។ ប៉ុន្តែពួកគេគ្រប់គ្រងតែផ្នែកខាងក្រោយប៉ុណ្ណោះ - អ្នកនៅតែត្រូវប្រើ JavaScript និងក្របខ័ណ្ឌ frontend ក៏ដូចជាការសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ផ្នែកខាងមុខ និងផ្នែកខាងក្រោយ។ Django Flask ម្យ៉ាងវិញទៀត បណ្ណាល័យ Python សុទ្ធដូចជា និង អាចល្អសម្រាប់គម្រោងតូចៗ ប៉ុន្តែពួកវាត្រូវបានកំណត់ចំពោះករណីប្រើប្រាស់ជាក់លាក់មួយ ហើយមិនមានលក្ខណៈពិសេស និងដំណើរការដើម្បីបង្កើតកម្មវិធីគេហទំព័រពេញលេញនោះទេ។ នៅពេលដែលកម្មវិធីរបស់អ្នករីកចម្រើននៅក្នុងលក្ខណៈពិសេស និងភាពស្មុគស្មាញ អ្នកអាចរកឃើញថាខ្លួនអ្នកកំពុងឈានដល់ដែនកំណត់នៃក្របខ័ណ្ឌ ដែលនៅចំណុចនោះអ្នកត្រូវកំណត់គំនិតរបស់អ្នកឱ្យសមនឹងក្របខ័ណ្ឌ ឬលុបចោលគម្រោងរបស់អ្នក ហើយបង្កើតវាឡើងវិញដោយប្រើ "ក្របខ័ណ្ឌគេហទំព័រពិតប្រាកដ" ។ Dash Streamlit យើងចង់ភ្ជាប់គម្លាតនេះដោយបង្កើតក្របខ័ណ្ឌដែលងាយស្រួល និងវិចារណញាណក្នុងការចាប់ផ្តើមជាមួយ ខណៈពេលដែលនៅសល់អាចបត់បែនបាន និងមានថាមពលដើម្បីគាំទ្រកម្មវិធីណាមួយ។ គោលដៅនៃការឆ្លុះបញ្ចាំង ៖ ប្រើភាសាមួយសម្រាប់អ្វីៗគ្រប់យ៉ាង។ Pure Python ៖ បង្កើតគំនិតរបស់អ្នកបានយ៉ាងងាយស្រួលដោយមិនត្រូវការបទពិសោធន៍អភិវឌ្ឍន៍គេហទំព័រ។ ងាយស្រួលចាប់ផ្តើម ៖ កម្មវិធីគេហទំព័រគួរតែត្រូវគ្នានឹងការប្ដូរតាមបំណង និងដំណើរការនៃក្របខ័ណ្ឌគេហទំព័របែបប្រពៃណី។ ភាពបត់បែនពេញលេញ ៖ គ្រប់គ្រងជង់ពេញពីផ្នែកខាងមុខ ទៅផ្នែកខាងក្រោយ ដើម្បីដាក់ពង្រាយ។ ថ្មរួមបញ្ចូល ឥឡូវនេះ ចូរយើងស្វែងយល់ពីរបៀបដែលយើងបង្កើត Reflex ដើម្បីសម្រេចគោលដៅទាំងនេះ។ ស្ថាបត្យកម្ម Reflex កម្មវិធីគេហទំព័រពេញជង់ត្រូវបានបង្កើតឡើងដោយផ្នែកខាងមុខ និងផ្នែកខាងក្រោយ។ ផ្នែកខាងមុខគឺជាចំណុចប្រទាក់អ្នកប្រើប្រាស់ ហើយត្រូវបានបម្រើជាគេហទំព័រដែលដំណើរការលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកប្រើប្រាស់។ កម្មវិធីខាងក្រោយគ្រប់គ្រងតក្កវិជ្ជា និងការគ្រប់គ្រងរដ្ឋ (ដូចជាមូលដ្ឋានទិន្នន័យ និង APIs) ហើយដំណើរការលើម៉ាស៊ីនមេ។ នៅក្នុងការអភិវឌ្ឍន៍គេហទំព័របែបប្រពៃណី ទាំងនេះជាធម្មតាជាកម្មវិធីពីរដាច់ដោយឡែកពីគ្នា ហើយជារឿយៗត្រូវបានសរសេរក្នុងក្របខ័ណ្ឌ ឬភាសាផ្សេងៗគ្នា។ ជាឧទាហរណ៍ អ្នកអាចផ្សំផ្នែកខាងក្រោយរបស់ Flask ជាមួយ React frontend។ ជាមួយនឹងវិធីសាស្រ្តនេះ អ្នកត្រូវតែរក្សាកម្មវិធីពីរដាច់ដោយឡែក ហើយបញ្ចប់ការសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ frontend និង backend ។ យើងចង់សម្រួលដំណើរការនេះនៅក្នុង Reflex ដោយកំណត់ទាំងផ្នែកខាងមុខ និងផ្នែកខាងក្រោយនៅក្នុងមូលដ្ឋានកូដតែមួយ ខណៈពេលដែលប្រើ Python សម្រាប់អ្វីគ្រប់យ៉ាង។ អ្នកអភិវឌ្ឍន៍គួរព្រួយបារម្ភតែអំពីតក្កវិជ្ជារបស់កម្មវិធីរបស់ពួកគេប៉ុណ្ណោះ ហើយមិនមែនអំពីព័ត៌មានលម្អិតនៃការអនុវត្តកម្រិតទាបនោះទេ។ ផ្នែកខាងមុខ យើងចង់ឱ្យកម្មវិធី Reflex មើលទៅ និងមានអារម្មណ៍ដូចជាកម្មវិធីបណ្តាញប្រពៃណីសម្រាប់អ្នកប្រើប្រាស់ចុងក្រោយ ខណៈពេលដែលនៅតែមានភាពងាយស្រួលក្នុងការសាងសង់ និងថែទាំសម្រាប់អ្នកអភិវឌ្ឍន៍។ ដើម្បីធ្វើដូច្នេះ យើងបានបង្កើតឡើងនៅលើកំពូលនៃបច្ចេកវិទ្យាគេហទំព័រចាស់ទុំ និងពេញនិយម។ នៅពេលអ្នក កម្មវិធីរបស់អ្នក Reflex ចងក្រងផ្នែកខាងមុខចុះក្រោមទៅទំព័រតែមួយកម្មវិធី ហើយបម្រើវានៅលើច្រក (តាមលំនាំដើម ) ដែលអ្នកអាចចូលប្រើក្នុងកម្មវិធីរុករករបស់អ្នក។ reflex run Next.js 3000 ការងាររបស់ frontend គឺឆ្លុះបញ្ចាំងពីស្ថានភាពរបស់កម្មវិធី ហើយផ្ញើព្រឹត្តិការណ៍ទៅកាន់ backend នៅពេលអ្នកប្រើប្រាស់ធ្វើអន្តរកម្មជាមួយ UI ។ គ្មានតក្កវិជ្ជាពិតប្រាកដត្រូវបានដំណើរការនៅលើផ្នែកខាងមុខទេ។ សមាសធាតុ ផ្នែកខាងមុខឆ្លុះបញ្ចាំងត្រូវបានបង្កើតឡើងដោយប្រើសមាសធាតុដែលអាចត្រូវបានផ្សំជាមួយគ្នាដើម្បីបង្កើត UI ស្មុគស្មាញ។ ជំនួសឱ្យការប្រើភាសាគំរូដែលលាយ HTML និង Python យើងគ្រាន់តែប្រើមុខងារ Python ដើម្បីកំណត់ UI ។ នៅក្រោមក្រណាត់ សមាសធាតុចងក្រងទៅជាសមាសធាតុប្រតិកម្ម។ សមាសធាតុស្នូលជាច្រើនរបស់យើងគឺផ្អែកលើ ដែលជាបណ្ណាល័យសមាសធាតុ React ដ៏ពេញនិយម។ យើងក៏មានសមាសធាតុជាច្រើនទៀតសម្រាប់ក្រាហ្វ តារាងទិន្នន័យ និងច្រើនទៀត។ យើងជ្រើសរើស React ព្រោះវាជាបណ្ណាល័យដ៏ពេញនិយមដែលមានប្រព័ន្ធអេកូឡូស៊ីដ៏ធំ។ គោលដៅរបស់យើងគឺមិនមែនដើម្បីបង្កើតប្រព័ន្ធអេកូបណ្ដាញឡើងវិញទេ ប៉ុន្តែធ្វើឱ្យវាអាចចូលដំណើរការបានសម្រាប់អ្នកអភិវឌ្ឍន៍ Python ។ Radix នេះក៏អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់របស់យើងនាំយកសមាសធាតុផ្ទាល់ខ្លួនរបស់ពួកគេផងដែរ ប្រសិនបើយើងមិនមានសមាសធាតុដែលពួកគេត្រូវការ។ អ្នកប្រើអាចរុំសមាសធាតុប្រតិកម្មផ្ទាល់ខ្លួនរបស់ពួកគេ ហើយបន្ទាប់មកបោះពុម្ពវាសម្រាប់អ្នកផ្សេងទៀតប្រើ។ យូរៗទៅ យើងនឹងបង្កើតប្រព័ន្ធអេកូនៃសមាសភាគភាគីទីបីរបស់យើង ដើម្បីឱ្យអ្នកប្រើប្រាស់អាចស្វែងរក និងប្រើប្រាស់សមាសធាតុដែលអ្នកដទៃបានសាងសង់យ៉ាងងាយស្រួល។ រចនាប័ទ្ម យើងចង់ធ្វើឱ្យប្រាកដថាកម្មវិធី Reflex មើលទៅល្អចេញពីប្រអប់ ខណៈពេលដែលនៅតែផ្តល់ឱ្យអ្នកអភិវឌ្ឍន៍នូវការគ្រប់គ្រងពេញលេញលើរូបរាងរបស់កម្មវិធីរបស់ពួកគេ។ យើងមានប្រព័ន្ធស្នូលដែលអនុញ្ញាតឱ្យអ្នកកំណត់ជម្រើសរចនាប័ទ្មកម្រិតខ្ពស់ដូចជារបៀបងងឹត និងពណ៌សង្កត់សំឡេងពេញកម្មវិធីរបស់អ្នក ដើម្បីផ្តល់ឱ្យវានូវរូបរាង និងអារម្មណ៍រួមមួយ។ លើសពីនេះ សមាសធាតុ Reflex អាចត្រូវបានកំណត់រចនាប័ទ្មដោយប្រើថាមពលពេញលេញនៃ CSS ។ យើងប្រើប្រាស់បណ្ណាល័យ ដើម្បីអនុញ្ញាតឱ្យកំណត់រចនាប័ទ្ម "CSS-in-Python" ដូច្នេះអ្នកអាចឆ្លងកាត់ CSS prop ណាមួយជាអាគុយម៉ង់ពាក្យគន្លឹះទៅកាន់សមាសធាតុមួយ។ នេះរួមបញ្ចូលទាំងឧបករណ៍ឆ្លើយតបដោយឆ្លងកាត់បញ្ជីតម្លៃ។ អារម្មណ៍ ផ្នែកខាងក្រោយ នៅក្នុង Reflex មានតែ frontend ចងក្រងជា Javascript ហើយដំណើរការលើ browser របស់អ្នកប្រើ ខណៈពេលដែល state និង logic ទាំងអស់ស្ថិតនៅក្នុង Python ហើយដំណើរការលើ server។ នៅពេលអ្នក យើងចាប់ផ្តើមម៉ាស៊ីនមេ FastAPI (តាមលំនាំដើមនៅលើច្រក ) ដែលផ្នែកខាងមុខភ្ជាប់ទៅតាមរយៈរន្ធបណ្តាញ។ reflex run 8000 រដ្ឋ និងតក្កវិជ្ជាទាំងអស់ត្រូវបានកំណត់នៅក្នុងថ្នាក់ ។ រដ្ឋត្រូវបានបង្កើតឡើងដោយ និង ។ Vars គឺជាតម្លៃណាមួយនៅក្នុងកម្មវិធីរបស់អ្នកដែលអាចផ្លាស់ប្តូរតាមពេលវេលា។ ពួកវាត្រូវបានកំណត់ថាជាគុណលក្ខណៈថ្នាក់នៅលើថ្នាក់ របស់អ្នក ហើយអាចជាប្រភេទ Python ណាមួយដែលអាចត្រូវបានដាក់សៀរៀលទៅ JSON ។ State vars អ្នកដោះស្រាយព្រឹត្តិការណ៍ State កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍គឺជាវិធីសាស្រ្តនៅក្នុងថ្នាក់ របស់អ្នកដែលត្រូវបានហៅនៅពេលដែលអ្នកប្រើធ្វើអន្តរកម្មជាមួយ UI ។ ពួកវាជាមធ្យោបាយតែមួយគត់ដែលយើងអាចកែប្រែ vars ក្នុង Reflex ហើយអាចហៅជាការឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើប្រាស់ ដូចជាការចុចប៊ូតុង ឬវាយបញ្ចូលក្នុងប្រអប់អត្ថបទជាដើម។ State ដោយសារកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ត្រូវបានដំណើរការនៅលើផ្នែកខាងក្រោយ អ្នកអាចប្រើបណ្ណាល័យ Python ណាមួយនៅក្នុងពួកគេ។ ដំណើរការព្រឹត្តិការណ៍ ជាធម្មតានៅពេលសរសេរកម្មវិធីគេហទំព័រ អ្នកត្រូវសរសេរកូដ boilerplate ជាច្រើនដើម្បីភ្ជាប់ frontend និង backend ។ ជាមួយនឹង Reflex អ្នកមិនចាំបាច់ព្រួយបារម្ភអំពីរឿងនោះទេ - យើងដោះស្រាយការទំនាក់ទំនងរវាង frontend និង backend សម្រាប់អ្នក។ អ្នកអភិវឌ្ឍន៍គ្រាន់តែសរសេរតក្កវិជ្ជាដោះស្រាយព្រឹត្តិការណ៍របស់ពួកគេ ហើយនៅពេលដែល vars ត្រូវបានធ្វើបច្ចុប្បន្នភាព UI ត្រូវបានធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិ។ កត្តាបង្កហេតុ អ្នកប្រើអាចធ្វើអន្តរកម្មជាមួយ UI ក្នុងវិធីជាច្រើនដូចជាការចុចប៊ូតុង វាយក្នុងប្រអប់អត្ថបទ ឬដាក់លើធាតុមួយ។ នៅក្នុង Reflex យើងហៅ ។ ព្រឹត្តិការណ៍ទាំងនេះថា triggers ជួរព្រឹត្តិការណ៍ នៅផ្នែកខាងមុខ យើងរក្សាជួរព្រឹត្តិការណ៍នៃព្រឹត្តិការណ៍ដែលមិនទាន់សម្រេចទាំងអស់។ ព្រឹត្តិការណ៍មួយមានទិន្នន័យសំខាន់ៗចំនួនបី៖ ៖ ម៉ាស៊ីនភ្ញៀវនីមួយៗ (ផ្ទាំងកម្មវិធីរុករក) មាននិមិត្តសញ្ញាតែមួយគត់ដើម្បីកំណត់អត្តសញ្ញាណវា។ នេះអនុញ្ញាតឱ្យ backend ដឹងថារដ្ឋមួយណាដែលត្រូវអាប់ដេត។ និមិត្តសញ្ញាម៉ាស៊ីនភ្ញៀវ ៖ កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ដែលត្រូវដំណើរការលើស្ថានភាព។ កម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ ៖ អាគុយម៉ង់ដែលត្រូវបញ្ជូនទៅកាន់អ្នកដោះស្រាយព្រឹត្តិការណ៍។ អាគុយម៉ង់ នៅពេលដែលព្រឹត្តិការណ៍ត្រូវបានកេះ វាត្រូវបានបន្ថែមទៅជួរ។ យើងមានទង់ ដើម្បីប្រាកដថាមានតែព្រឹត្តិការណ៍មួយប៉ុណ្ណោះដែលត្រូវបានដំណើរការក្នុងពេលតែមួយ។ នេះធានាថារដ្ឋមានភាពស៊ីសង្វាក់គ្នាជានិច្ច ហើយមិនមានលក្ខខណ្ឌនៃការប្រណាំងណាមួយទេ ដោយមានអ្នករៀបចំព្រឹត្តិការណ៍ពីរនាក់កែប្រែរដ្ឋក្នុងពេលតែមួយ។ មានករណីលើកលែងចំពោះបញ្ហានេះ ដូចជាព្រឹត្តិការណ៍ផ្ទៃខាងក្រោយដែលអនុញ្ញាតឱ្យអ្នកដំណើរការព្រឹត្តិការណ៍ក្នុងផ្ទៃខាងក្រោយដោយមិនរារាំង UI ។ processing នៅពេលដែលព្រឹត្តិការណ៍រួចរាល់ដើម្បីដំណើរការ វាត្រូវបានបញ្ជូនទៅផ្នែកខាងក្រោយតាមរយៈការតភ្ជាប់ WebSocket ។ អ្នកគ្រប់គ្រងរដ្ឋ នៅពេលទទួលព្រឹត្តិការណ៍ វាត្រូវបានដំណើរការនៅលើផ្នែកខាងក្រោយ។ Reflex ប្រើ ដែលរក្សាការគូសផែនទីរវាងនិមិត្តសញ្ញាអតិថិជន និងស្ថានភាពរបស់ពួកគេ។ តាមលំនាំដើម អ្នកគ្រប់គ្រងរដ្ឋគ្រាន់តែជាវចនានុក្រមក្នុងសតិប៉ុណ្ណោះ ប៉ុន្តែវាអាចត្រូវបានពង្រីកដើម្បីប្រើមូលដ្ឋានទិន្នន័យ ឬឃ្លាំងសម្ងាត់។ នៅក្នុងផលិតកម្ម យើងប្រើ Redis ជាអ្នកគ្រប់គ្រងរដ្ឋរបស់យើង។ អ្នកគ្រប់គ្រងរដ្ឋ ការដោះស្រាយព្រឹត្តិការណ៍ នៅពេលដែលយើងមានស្ថានភាពរបស់អ្នកប្រើ ជំហានបន្ទាប់គឺត្រូវដំណើរការកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ជាមួយនឹងអាគុយម៉ង់។ បច្ចុប្បន្នភាពរដ្ឋ រាល់ពេលដែលអ្នកដោះស្រាយព្រឹត្តិការណ៍ត្រឡប់ (ឬទិន្នផល) យើងរក្សាទុកស្ថានភាពនៅក្នុងអ្នកគ្រប់គ្រងរដ្ឋ ហើយផ្ញើ ទៅផ្នែកខាងមុខដើម្បីធ្វើបច្ចុប្បន្នភាព UI ។ ដើម្បីរក្សាដំណើរការនៅពេលដែលស្ថានភាពរបស់អ្នករីកចម្រើន ខាងក្នុង Reflex រក្សាដាននៃ vars ដែលត្រូវបានធ្វើបច្ចុប្បន្នភាពកំឡុងពេលកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ ( ) ។ បច្ចុប្បន្នភាពរបស់រដ្ឋ vars កខ្វក់ នៅពេលដែលកម្មវិធីដោះស្រាយព្រឹត្តិការណ៍ត្រូវបានដំណើរការរួចរាល់ យើងរកឃើញ vars កខ្វក់ទាំងអស់ ហើយបង្កើតការអាប់ដេតរដ្ឋដើម្បីផ្ញើទៅកាន់ផ្នែកខាងមុខ។ យើងរក្សាទុករដ្ឋថ្មីនៅក្នុងអ្នកគ្រប់គ្រងរដ្ឋរបស់យើង ហើយបន្ទាប់មកផ្ញើបច្ចុប្បន្នភាពរដ្ឋទៅផ្នែកខាងមុខ។ បន្ទាប់មកផ្នែកខាងមុខធ្វើបច្ចុប្បន្នភាព UI ដើម្បីឆ្លុះបញ្ចាំងពីស្ថានភាពថ្មី។ សេចក្តីសន្និដ្ឋាន ខ្ញុំសង្ឃឹមថានេះផ្តល់នូវទិដ្ឋភាពទូទៅដ៏ល្អនៃរបៀបដែល Reflex ដំណើរការនៅក្រោមក្រណាត់។ យើងនឹងមានការប្រកាសជាច្រើនទៀតចេញមកដើម្បីចែករំលែកពីរបៀបដែលយើងធ្វើឱ្យ Reflex អាចធ្វើមាត្រដ្ឋានបាន និងអាចអនុវត្តបានតាមរយៈលក្ខណៈពិសេសដូចជាការបំបែករដ្ឋ និងការបង្កើនប្រសិទ្ធភាពការចងក្រង។