KruSmart — ជំនួយការគ្រូបង្រៀនឌីជីថល

KruSmart (ជំនួយការគ្រូបង្រៀនឌីជីថល) គឺជាជំនួយការគ្រូបង្រៀនឌីជីថលដែលបង្កើតឡើងសម្រាប់ថ្នាក់រៀននៅកម្ពុជា។ បន្ទាប់ពីចូលគណនី គ្រូទទួលបានផ្ទាំងមុខងារ ២៦ ដែលអាចស្វែងរកបាន គ្របដណ្តប់លើឯកសារកត់ត្រាដែលឆ្នាំសិក្សាមួយបង្កើតឡើងជាក់ស្តែង៖ ការចុះឈ្មោះសិស្ស ការស្រង់វត្តមាន ការបញ្ចូលពិន្ទុកិច្ចការផ្ទះ និងពិន្ទុប្រចាំខែ ការបង្កើតតារាងចំណាត់ថ្នាក់ និងតារាងកិត្តិយស ការបោះពុម្ពកាតសិស្ស និងវិញ្ញាបនបត្រ សៀវភៅតាមដាន បញ្ជីសារពើភ័ណ្ឌ កាលវិភាគសម្អាតថ្នាក់ និងការផ្ញើសារទៅអាណាព្យាបាល។

ផ្ទាំងប្រើប្រាស់ជាភាសាខ្មែរជាចម្បង។ ភាសាអង់គ្លេសលេចឡើងតែជាពាក្យពន្យល់ក្នុងវង់ក្រចកនៅកន្លែងដែលពាក្យនោះជាភាសាអង់គ្លេសពិត — Email, Password, Check-in — មិនមែនជាភាសាទីពីរដែលអាចប្តូរចូលទេ។

គ្រូបង្រៀននៅសាលារៀនកម្ពុជា ដែលភាគច្រើនធ្វើការពីទូរស័ព្ទ។ គណនីនីមួយៗភ្ជាប់នឹងសាលារៀន ដូច្នេះទិន្នន័យរបស់គ្រូត្រូវបានកំណត់ត្រឹមថ្នាក់របស់គាត់ផ្ទាល់។

ផលិតផលបញ្ជាក់គោលដៅរបស់ខ្លួននៅក្នុង metadata ផ្ទាល់៖ ធ្វើឱ្យការគ្រប់គ្រងទិន្នន័យសិស្ស ពិន្ទុ និងវត្តមាននៅកម្ពុជាកាន់តែរហ័ស និងងាយស្រួល។ ជាក់ស្តែងនេះមានន័យថាគ្របដណ្តប់ឆ្នាំសិក្សាទាំងមូល មិនមែនតែការងារមួយទេ — មុខងារដែលបង្កើតឯកសារ (តារាងចំណាត់ថ្នាក់ តារាងកិត្តិយស កាតសិស្ស វិញ្ញាបនបត្រ របាយការណ៍មាតាបិតា) មានសារៈសំខាន់ស្មើនឹងមុខងារដែលបញ្ចូលទិន្នន័យ។

KruSmart ផ្តល់កិត្តិយសដល់ខ្ញុំជាអ្នកអភិវឌ្ឍពីក្នុងផលិតផលផ្ទាល់៖ ធាតុ «អំពីអ្នកអភិវឌ្ឍន៍» ក្នុងម៉ឺនុយគណនីភ្ជាប់ទៅ portfolio របស់ខ្ញុំ។ ខ្ញុំធ្វើការលើវាក្នុងនាមជាអ្នករចនាផលិតផល និងអ្នកអភិវឌ្ឍ។ ការបែងចែកលម្អិតនៃទំនួលខុសត្រូវ មិនត្រូវបានអះអាងនៅទីនេះលើសពីអ្វីដែលផលិតផលបង្ហាញឡើយ។

k

កត្តាកំណត់ពីរជ្រាបពេញការរចនា។ គ្រូធ្វើការជាភាសាខ្មែរ ដូច្នេះភាសាខ្មែរជាភាសាផ្ទាំងប្រើប្រាស់ ហើយពុម្ពអក្សរខ្មែរសម្រាប់វេប — Kantumruy Pro និង Moul — ត្រូវបានផ្ទុកដោយចេតនា មិនមែនទុកឱ្យប្រព័ន្ធជ្រើសរើសដោយខ្លួនឯងទេ។ ហើយកម្មវិធីត្រូវបានប្រើលើទូរស័ព្ទ ជាញឹកញាប់លើទិន្នន័យចល័ត ដូច្នេះវាដំឡើងជា PWA បាន ហើយផ្ទាំងមុខងារជាក្រឡាដែលស្វែងរកបាន មិនមែនជាម៉ឺនុយជាន់ៗគ្នាទេ។

k

អេក្រង់ដំបូងបន្ទាប់ពីចូលគណនីគឺជាក្រឡាមុខងារដែលស្វែងរកបាន មិនមែនផ្ទាំងលេខស្ថិតិទេ — គ្រូដែលបើកកម្មវិធីមានការងារក្នុងគំនិតរួចហើយ ហើយការស្វែងរកនាំទៅដល់ក្នុងជំហានតែមួយ។ មុខងារ Premium នៅតែបង្ហាញដល់អ្នកប្រើឥតគិតថ្លៃ ហើយបើកប្រអប់ណែនាំដំឡើងកម្រិត ជាជាងបាត់ទៅ ដូច្នេះផលិតផលមិនលាក់សមត្ថភាពរបស់ខ្លួនឡើយ។ ការចុះឈ្មោះជាទម្រង់តែមួយដែលមានការឆ្លើយតបភ្លាមៗ៖ របារកម្រិតសុវត្ថិភាពពាក្យសម្ងាត់ដែលប្តូរតាមការវាយ ការព្រមានភ្លាមៗពេលពាក្យសម្ងាត់មិនត្រូវគ្នា ប្រអប់ធីកយល់ព្រមលក្ខខណ្ឌ និងសំណួរគណិតវិទ្យាជំនួសឱ្យ widget ដែលមើលមិនយល់។ ការផ្ទៀងផ្ទាត់ជាលេខកូដ ៦ ខ្ទង់ក្នុងប្រអប់ ជាជាងឱ្យទៅបើកកម្មវិធីអ៊ីមែល។ ទម្រង់ភ្លឺ និងងងឹតត្រូវបានកំណត់មុនការគូរអេក្រង់ដំបូង ដូច្នេះគ្មានការភ្លឹបភ្លែតនៃទម្រង់ខុសទេ។

កម្មវិធីដែលបង្ហាញនៅផ្នែកអតិថិជន ដាក់ដំណើរការលើ Netlify ដោយមាន Firebase នៅខាងក្រោយ — Firebase Authentication សម្រាប់គណនី និង Cloud Firestore សម្រាប់ទិន្នន័យ ដែលនាំចូលជា ES module ដោយផ្ទាល់ពី CDN របស់ Google ជាជាងបញ្ចូលក្នុងកញ្ចប់។ គ្មានជំហាន build រវាងកូដ និង browser ទេ៖ /core/app.js ផ្ទុកបញ្ជីមុខងារ /core/auth.js ផ្ទុកលំហូរចូលគណនី និង /core/access-control.js ផ្ទុកច្បាប់ជាវប្រើប្រាស់។ ការបង់ប្រាក់ដំឡើងកម្រិតឆ្លងកាត់សេវា KHQR ដាច់ដោយឡែកលើ Render — KHQR ជាស្តង់ដារបង់ប្រាក់តាម QR ជាតិរបស់កម្ពុជា — ដែលរក្សាដំណើរការបង់ប្រាក់នៅក្រៅកម្មវិធី។ អ៊ីមែលប្រតិបត្តិការឆ្លងកាត់ EmailJS ហើយ CSP ក៏អនុញ្ញាត Google Analytics, reCAPTCHA និង Google Gemini API ផងដែរ។

ទិន្នន័យស្ថិតនៅក្នុង Cloud Firestore ក្រោម namespace កម្មវិធីតែមួយ កំណត់តាម uid របស់គ្រូដែលបានចូលគណនី ដោយមានឯកសារយោងសាលារៀនរក្សាទុកនៅលើកំណត់ត្រាគ្រូ — តំណនោះជាអ្វីដែលកំណត់គ្រូឱ្យនៅត្រឹមថ្នាក់របស់ខ្លួន និងជាអ្វីដែលការចុះវត្តមានតាមទីតាំងយកទៅប្រៀបធៀប។ ស្ថានភាពជាវប្រើប្រាស់រក្សាទុកនៅលើកំណត់ត្រាអ្នកប្រើ ហើយអានពី Firestore ជារៀងរាល់ដង មិនមែនពី local storage ទេ។ ម៉ូឌុលគ្រប់គ្រងសិទ្ធិសរសេរបញ្ជាក់រឿងនេះនៅបន្ទាត់ដំបូង ហើយនោះជាការគិតត្រឹមត្រូវ៖ កម្រិតសិទ្ធិដែល cache ក្នុង browser គឺជាកម្រិតសិទ្ធិដែល browser អាចកែបាន។

មុខងារខាងក្រោមនីមួយៗត្រូវបានចុះបញ្ជីក្នុងបញ្ជីមុខងាររបស់កម្មវិធីផ្ទាល់ ឬក្នុងច្បាប់គ្រប់គ្រងសិទ្ធិរបស់វា។

ការចុះឈ្មោះត្រូវបានការពារដោយសំណួរគណិតវិទ្យាប្រឆាំង Bot តម្រូវការកម្រិតសុវត្ថិភាពពាក្យសម្ងាត់ និងការយល់ព្រមលក្ខខណ្ឌយ៉ាងច្បាស់ បន្ទាប់មកបញ្ជាក់ដោយលេខកូដ ៦ ខ្ទង់មុនពេលគណនីអាចប្រើបាន។ សិទ្ធិប្រើប្រាស់ត្រូវបានកំណត់ពីកំណត់ត្រាអ្នកប្រើក្នុង Firestore មិនមែនពី local storage ទេ ហើយស្ថានភាព «ហាមឃាត់» គឺជាស្ថានភាពពេញលេញមួយក្បែរកម្រិតជាវប្រើប្រាស់។ ការឆ្លើយតបមាន HSTS ជាមួយ preload, X-Frame-Options SAMEORIGIN, X-Content-Type-Options nosniff, Referrer-Policy, object-src 'none', base-uri 'self' និង Content-Security-Policy ដែលកំណត់ដើមកំណើតភាគីទីបីទាំងអស់ដែលកម្មវិធីអាចទាក់ទង។ នៅលើឯកសារចូលដំបូង Permissions-Policy បិទកាមេរ៉ា មីក្រូហ្វូន និងទីតាំង។

ទំព័របើកចេញជាមួយតំណ «រំលងទៅមាតិកា (Skip to content)» សរសេរទាំងភាសាខ្មែរ និងអង់គ្លេស។ រូបតំណាងតុបតែងត្រូវបានលាក់ពីមែកធាងភាពងាយស្រួល ប្រអប់ដំឡើងកម្រិតជាប្រអប់ពិតដែលមានតួនាទី dialog និង modal ហើយវាលពាក្យសម្ងាត់មានប៊ូតុងបង្ហាញ/លាក់ដាក់ស្លាកជាភាសាខ្មែរ។ ទម្រង់ងងឹតជាទម្រង់ទីពីរពិតប្រាកដ មិនមែនជាតម្រងបញ្ច្រាសពណ៌ទេ។

KruSmart ជាផលិតផលដែលត្រូវចូលគណនី ដូច្នេះផ្ទៃសាធារណៈរបស់វាមានតែមួយទំព័រ ហើយការងារ SEO របស់វាតូចចង្អៀត៖ បញ្ជាក់ថាផលិតផលនេះជាអ្វី ជាភាសាខ្មែរ ដល់អ្នកដែលស្វែងរកជាភាសាខ្មែរ។ ឯកសារចូលដំបូងមានចំណងជើង និងការពិពណ៌នាជាភាសាខ្មែរ ពាក្យគន្លឹះទាំងខ្មែរ និងអង់គ្លេស ស្លាក Open Graph និងពណ៌ស្បែក ហើយ manifest PWA ផ្តល់ឈ្មោះ និងរូបតំណាងដាច់ដោយឡែកដល់កម្មវិធីដែលដំឡើងរួច។

កម្មវិធីមិនផ្ទុកកញ្ចប់ framework ណាមួយទេ៖ មានតែ HTML, CSS និង ES module បម្រើពី edge របស់ Netlify ដោយ Firebase និងសំណុំរូបតំណាងទាញពី CDN។ ម៉ូឌុលចូលគណនីចាប់ផ្តើមទាញយកផ្នែកអ៊ីមែលស្របគ្នាជាមួយការអាន Firestore ដំបូង ជាជាងបន្ទាប់ពីវា ហើយទម្រង់ពណ៌ត្រូវបានកំណត់មុនការគូរអេក្រង់ដំបូង។ លទ្ធផលគឺអេក្រង់ដំបូងដែលមិនរង់ចាំ framework JavaScript ចាប់ផ្តើម — ដែលសំខាន់បំផុតលើទូរស័ព្ទកម្រិតមធ្យមដែលផលិតផលនេះត្រូវបានប្រើ។

អ៊ីមែលប្រតិបត្តិការជាបញ្ហាគួរឱ្យចាប់អារម្មណ៍។ លេខកូដផ្ទៀងផ្ទាត់ត្រូវតែទៅដល់ដោយទុកចិត្តបាន ទាំងដែលប្រើគម្រោងឥតគិតថ្លៃដែលមានកូតាប្រចាំខែច្បាស់លាស់ ដូច្នេះកម្មវិធីមិនពឹងលើអ្នកផ្ញើតែមួយទេ៖ វារក្សាបណ្តុំគណនី EmailJS ក្នុង Firestore សាកល្បងម្តងមួយៗ ហើយប្តូរទៅគណនីបន្ទាប់ពេលមួយអស់កូតា — ព្រមទាំងរាយការណ៍សារច្បាស់លាស់ដល់គ្រូ និងអ្នកគ្រប់គ្រងពេលបណ្តុំទាំងមូលអស់ ជាជាងទម្លាក់លេខកូដដោយស្ងាត់ស្ងៀម។

k

k