History

localizeflow[bot] 388926566b chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)		4 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago

README.md

សាងសង់កម្មវិធីធនាគារ ផ្នែកទី3៖ វិធីសាស្រ្តទាញយក និងប្រើប្រាស់ទិន្នន័យ

គិតអំពីកុំព្យូទ័ររបស់ Enterprise ក្នុង Star Trek - ពេល Captain Picard ស្នើសុំស្ថានភាពនាវា ព័ត៌មាននោះបង្ហាញភ្លាមៗដោយមិនធ្វើឲ្យទាំងអ៊ីនធឺហ្វសដែលមានផ្ទាំងមុខបិទ ហើយសាងសង់ឡើងវិញទេ។ ការស្វូរបកព័ត៌មានបានល្អល្អឥតខ្ចោះនេះហើយជាការដែលយើងកំពុងសាងសង់នៅទីនេះជាមួយការទាញយកទិន្នន័យឌីណាមិច។

សព្វថ្ងៃ កម្មវិធីធនាគាររបស់អ្នកដូចមុខសារព័ត៌មានដែលបានបោះពុម្ព - មានព័ត៌មានប៉ុន្តែថេរ។ យើងនឹងបម្លែងវាទៅជាដូចកន្លែងគ្រប់គ្រងបេសកកម្មនៅ NASA ដែលទិន្នន័យហូរជាបន្តបន្ទាប់ និងអាប់ដេតពេញលេញក្នុងពេលវេលាពិតប្រាកដដោយមិនរាំងខ្សroqលឲ្យដំណើរការរបស់អ្នកប្រើប្រាស់បាត់បង់។

អ្នកនឹងរៀនវិធីទំនាក់ទំនងជាមួយម៉ាស៊ីនបម្រើដោយអាស៊ីនឆ្រូណាស់, ដោះស្រាយទិន្នន័យដែលមកដល់ក្នុងពេលខុសគ្នា, និងបម្លែងព័ត៌មានដើមទៅជាអ្វីមួយមានន័យសម្រាប់អ្នកប្រើប្រាស់។ នេះជាភាពខុសគ្នារវាងកម្មវិធីបង្ហាញ និងកម្មវិធីរួមបញ្ចូលក្នុងការផលិត។

⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុងរយៈពេល 5 នាទីបន្ទាប់

ផ្លូវចាប់ផ្តើមរហ័សសម្រាប់អ្នកអភិវឌ្ឍន៍មិនទាន់មានពេល

flowchart LR
    A[⚡ ៥ នាទី] --> B[រៀបចំ ម៉ាស៊ីនមេ API]
    B --> C[សាកល្បងទាញយកជាមួយ curl]
    C --> D[បង្កើតមុខងារ ចូលប្រព័ន្ធ]
    D --> E[មើលទិន្នន័យពេលប្រតិបត្តិ]

នាទី 1-2: ចាប់ផ្តើមម៉ាស៊ីនបម្រើ API របស់អ្នក (cd api && npm start) ហើយសាកល្បងការតភ្ជាប់
នាទី 3: បង្កើតមុខងារ getAccount() មូលដ្ឋានដោយប្រើ fetch
នាទី 4: ភ្ជាប់ទំរង់ចូលប្រើប្រាស់ជាមួយ action="javascript:login()"
នាទី 5: សាកល្បងចូលប្រើប្រាស់ ហើយមើលទិន្នន័យគណនីបង្ហាញនៅក្នុងកុងស៊ូល

ពាក្យបញ្ជាសម្រាប់សាកល្បងឆាប់រហ័ស:

# ផ្ទៀងផ្ទាត់ថា API កំពុងដំណើរការ
curl http://localhost:5000/api

# សាកល្បងទាញយកទិន្នន័យគណនី
curl http://localhost:5000/api/accounts/test

ហេតុអ្វីវាមានសារៈសំខាន់៖ នៅក្នុងរយៈពេល 5 នាទី អ្នកនឹងឃើញព្រងារចិត្តនៃការទាញយកទិន្នន័យអាស៊ីនឆ្រូណាស់ ដែលគ្រប់កម្មវិធីវេបទំនើបប្រើប្រាស់។ នេះជាគ្រឹះដំបូងដែលធ្វើឲ្យកម្មវិធីមានអារម្មណ៍ឆាប់និងរស់រវើក។

🗺️ ជំនាញរៀនរបស់អ្នកតាមរយៈកម្មវិធីវេបដែលបើកចំហទិន្នន័យ

journey
    title ពីទំព័រអចលន៍ទៅកម្មវិធីសកម្ម
    section ការយល់ដឹងអំពីការវិវត្តន៍
      ការវេចខ្ចប់ទំព័រប្រពៃណី: 3: You
      រកឃើញអត្ថប្រយោជន៍ AJAX/SPA: 5: You
      ពិសោធន៍លំនាំ Fetch API: 7: You
    section ការសាងសង់ការផ្ទៀងផ្ទាត់
      បង្កើតមុខងារចូល: 4: You
      គ្រប់គ្រងប្រតិបត្តិការមិន đồng bộ: 6: You
      គ្រប់គ្រងសម័យប្រើប្រាស់: 8: You
    section ការអាប់ដេត UI sកម្ម
      រៀនរៀបចំ DOM: 5: You
      បង្កើតការបង្ហាញប្រតិបត្តិការ: 7: You
      បង្កើតផ្ទាំងគ្រប់គ្រងឆ្លើយតប: 9: You
    section លំនាំវិជ្ជាជីវៈ
      ការបង្ហាញផ្អែកលើគំរូ: 6: You
      ត្រៀមប្រយុទ្ធនឹងកំហុស: 7: You
      បង្កើតប្រសិទ្ធភាពប្រតិបត្តិការ: 8: You

គោលដៅនៃការសិក្សារបស់អ្នក៖ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងយល់ដឹងពីរបៀបដែលកម្មវិធីវេបទំនើបទាញយក, ដំណើរការ និងបង្ហាញទិន្នន័យឌីណាមិច តាមរយៈបទពិសោធន៍រលូនដែលយើងរំពឹងទុកពីកម្មវិធីមានវិជ្ជាជីវៈ។

កម្រងសំណួរពិនិត្យមុនមេរៀន

លក្ខខណ្ឌរួចមុន

មុនចូលទៅក្រោមការទាញយកទិន្នន័យ សូមប្រាកដថាអ្នកមានគ្រឿងផ្សំខាងក្រោមរួចហើយ៖

មេរៀនមុន៖ បញ្ចប់ ទំរង់ចូលប្រើ និងចុះបញ្ជី - យើងនឹងបង្កើតបន្ថែមលើមូលដ្ឋាននេះ
ម៉ាស៊ីនបម្រើមូលដ្ឋាន៖ ដំឡើង Node.js និង ដំណើរការម៉ាស៊ីនបម្រើ API ដើម្បីផ្តល់ទិន្នន័យគណនី
ការតភ្ជាប់ API៖ សាកល្បងការតភ្ជាប់ម៉ាស៊ីនបម្រើរបស់អ្នកជាមួយពាក្យបញ្ជានេះ:

curl http://localhost:5000/api
# ការឆ្លើយតបដែលបានរំពឹងទុក៖ "Bank API v1.0.0"

ការសាកល្បងរហ័សនេះធានាថា គ្រប់គ្រឿងផ្សំទាំងអស់កំពុងទំនាក់ទំនងបានត្រឹមត្រូវ៖

ផ្ទៀងផ្ទាត់ Node.js កំពុងដំណើរការដោយត្រឹមត្រូវលើប្រព័ន្ធរបស់អ្នក
បញ្ជាក់ថាម៉ាស៊ីនបម្រើ API របស់អ្នកកំពុងអនុវត្តន៍ និងឆ្លើយតប
គោលបំណងថាកម្មវិធីរបស់អ្នកអាចដំណើរការទៅម៉ាស៊ីនបម្រើបាន (ដូចជាការត្រួតពិនិត្យការទំនាក់ទំនងវិទ្យុមុនបេសកកម្ម)

🧠 ទិដ្ឋភាពទូទៅនៃប្រព័ន្ធគ្រប់គ្រងទិន្នន័យ

mindmap
  root((ការគ្រប់គ្រងទិន្នន័យ))
    Authentication Flow
      Login Process
        Form Validation ការត្រួតពិនិត្យសំណុំបែបបទ
        Credential Verification ការត្រួតពិនិត្យឯកសារយោង
        Session Management ការគ្រប់គ្រងសម័យប្រតិបត្តិការ
      User State
        Global Account Object វត្ថុគណនីសកល
        Navigation Guards អ្នកជម្លៀសទិស
        Error Handling ការដោះស្រាយកំហុស
    API Communication
      Fetch Patterns គំរូយកទិន្នន័យ
        GET Requests ពាក្យស្នើសុំ GET
        POST Requests ពាក្យស្នើសុំ POST
        Error Responses បម្រើការឆ្លើយតបកំហុស
      Data Formats ទ្រង់ទ្រាយទិន្នន័យ
        JSON Processing ការប្រើប្រាស់ JSON
        URL Encoding ការអិនគូដ URL
        Response Parsing ការវិភាគការឆ្លើយតប
    Dynamic UI Updates
      DOM Manipulation ការគ្រប់គ្រង DOM
        Safe Text Updates ការអាប់ដេតអត្ថបទយ៉ាងปลอดภัย
        Element Creation ការបង្កើតធាតុ
        Template Cloning ការចម្លងគំរូ
      User Experience
        Real-time Updates ការអាប់ដេតពេលវេលាពិត
        Error Messages សារកំហុស
        Loading States ស្ថានភាពកំពុងដំណើរការ
    Security Considerations
      XSS Prevention ការពារការវាយប្រហារ XSS
        textContent Usage ការប្រើប្រាស់ textContent
        Input Sanitization ការសម្អាតបញ្ចូល
        Safe HTML Creation ការបង្កើត HTML យ៉ាងปลอดภัย
      CORS Handling
        Cross-Origin Requests ពាក្យស្នើសុំឆ្លងដែនដើមកំណើត
        Header Configuration ការកំណត់ក្បាល
        Development Setup ការតំឡើងអភិវឌ្ឍន៍

គ្រឹះមូលដ្ឋាន៖ កម្មវិធីវេបទំនើបជាប្រព័ន្ធចងក្រងទិន្នន័យ - វាត្រូវគ្នារវាងផ្ទាំងមុខអ្នកប្រើ, ម៉ាស៊ីនបម្រើ API និងម៉ូដែលសុវត្ថិភាពរបស់កម្មវិធីរុករកដើម្បីបង្កើតបទពិសោធន៍រលូន។

យល់ដឹងអំពីការទាញយកទិន្នន័យក្នុងកម្មវិធីវេបទំនើប

របៀបដែលកម្មវិធីវេបគ្រប់គ្រងទិន្នន័យបានឈានទៅមុខយ៉ាងហោចណាស់ក្នុងរយៈ២០ឆ្នាំចុងក្រោយ។ ការយល់ដឹងពីការវិវឌ្ឍន៍នេះនឹងជួយឱ្យអ្នកយល់ថាហេតុអ្វីដែលបច្ចេកវិធីទំនើបជាដើមដូចជា AJAX និង Fetch API មានអំណាច ហើយហេតុអ្វីបានជាជារបស់សំខាន់សម្រាប់អ្នកអភិវឌ្ឍន៍វេប។

យើងឲ្យមើលរបៀបដែលគេបានបង្កើតគេហទំព័រប្រពៃណីប្រៀបធៀបនឹងកម្មវិធីឌីណាមិចរលូនដែលយើងកំពុងកសាងថ្ងៃនេះ។

កម្មវិធីវេបច្រើនទំព័រប្រពៃណី (MPA)

ក្នុងដំណាក់កាលដំបូងនៃអ៊ីនធឺណិត គ្រាប់មួយបិទ គ្រាប់មួយថែមពិតជាដូចជាស្វាយលេងប្ដូរច្រកបឹងទូរទស្សន៍ចាស់ៗ - ថតគេនឹងស្វះស្វែងហើយបញ្ចូលមាតិកាថ្មីយឺតៗ។ នេះជាពិតរបស់កម្មវិធីវេបដើមៗដែលគ្រប់ការនិយាយទាំងឡាយមានន័យថាត្រូវសង់ឡើងវិញទំព័រទាំងមូលចាប់ពីដើម។

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: ចុចតំណ ឬយោងបែបបទ
    Browser->>Server: ស្នើសុំទំព័រ HTML ថ្មី
    Note over Browser: ទំព័រចេញពណ៌ស
    Server->>Browser: ទំព័រ HTML ពេញលេញត្រឡប់មកវិញ
    Browser->>User: បង្ហាញទំព័រថ្មី (ចំហុយ/បញ្ចូលថ្មី)

ហេតុអ្វីដែលវិធីនេះមើលទៅជាចាស់ដូចជា៖

គ្រប់ការចុចមានន័យថាត្រូវសង់ទំព័រទាំងមូលឡើងវិញ
អ្នកប្រើប្រាស់ត្រូវឈប់នឹកក្នុងកណ្តាលដោយការបង្ហាញទំព័រចាស់ៗរាំងស្ទះ
ការតភ្ជាប់អ៊ីនធឺណិតរបស់អ្នកធ្វើការ៉ាសាំ្ជត (overwork) ដោយទាញយកក្បាលទំព័រ និងជើងទំព័រដដែលជាថ្មីៗ
កម្មវិធីមានអារម្មណ៍ដូចជាគ្រាប់ប៊ិចតំណាងផ្ទុកឯកសារមែនជាងប្រើប្រាស់កម្មវិធី

កម្មវិធីវេបទំព័រតែមួយទំព័រ (SPA) ទំនើប

AJAX (Asynchronous JavaScript and XML) ប្រែផែននេះស្រួចខ្លាំង។ ដូចការរចនាផ្នែកច្រើននៃស្ថានីយអាកាសអន្ដរជាតិ ដែលអ្នកអង្គាសអាចប្តូរផ្នែកតែមួយដោយមិនបង្កើតស្ថាបត្យកម្មទាំងមូលឡើងវិញ, AJAX អនុញ្ញាតឲ្យយើងអាប់ដេតផ្នែកជាក់លាក់នៃគេហទំព័រ ដោយមិនចាំបាច់ផ្ទុកឡើងវិញទាំងមូល។ ទោះបីជា XML ត្រូវបានដាក់ឈ្មោះក៏ដោយ យើងភាគច្រើនប្រើ JSON នៅសព្វថ្ងៃ ប៉ុន្តែគ្រឹះដូចគ្នានៅតែមាន៖ អាប់ដេតតែអ្វីដែលត្រូវរយះពេល។

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: អន្តរកម្មជាមួយទំព័រ
    Browser->>JavaScript: ការបញ្ចូលកម្មវិធីរំលោភព្រឹត្តិការណ៍
    JavaScript->>Server: ប្រមាញ់ទិន្នន័យតែត្រូវការ
    Server->>JavaScript: ត្រឡប់ទិន្នន័យ JSON
    JavaScript->>Browser: បន្ទាន់សម័យធាតុទំព័រផ្តោតលើ
    Browser->>User: បង្ហាញមាតិកាបន្ទាន់ (គ្មានបញ្ចូលឡើងវិញ)

ហេតុអ្វី SPAs មើលទៅរលូនជាង៖

មានតែផ្នែកដែលបានផ្លាស់ប្តូរជាក់លាក់ត្រូវអាប់ដេត (ដោយមានចិត្តវិភាគ)
គ្មានការរាំងខ្ស្រូលរាំងស្ទះទៀតទេ - អ្នកប្រើនៅក្នុងលំនាំរបស់ពួកគេបន្ត
ទិន្នន័យដំណើរតិចជាង មានន័យថាបង្ហាញបានលឿន
គ្រប់យ៉ាងមានអារម្មណ៍ឆាប់គិត និងឆ្លាតដូចកម្មវិធីនៅលើទូរស័ព្ទរបស់អ្នក

ការវិវឌ្ឍទៅ Fetch API ទំនើប

កម្មវិធីរុករកសម័យថ្មីផ្តល់ជូន Fetch API ដែលជំនួស XMLHttpRequest ចាស់។ ដូចការប្រែពីការប្រើទូរសព្ទទៅអ៊ីមែល, Fetch API ប្រើ promises សម្រាប់កូដអាស៊ីនឆ្រូណាស់កាន់តែស្អាត ហើយគ្រប់គ្រង JSON បានយ៉ាងធម្មជាតិ។

លក្ខណៈពិសេស	XMLHttpRequest	Fetch API
សរសេរកូដ	ពិបាកដោយផ្អែកលើ callback	ស្អាតដោយជាសន្យា (promise)
គ្រប់គ្រង JSON	ត្រូវបកប្រែដោយដៃ	មានវិធី `.json()` ផ្ទាល់ក្នុង
គ្រប់គ្រងកំហុស	ព័ត៌មានកំហុសមានកំណត់	ព័ត៌មានកំហុសពេញលេញ
គាំទ្រសម័យថ្មី	ត្រូវគាំទ្រពីម៉ាស៊ីនចាស់	សន្យា ES6+ និង async/await

💡 ការគាំទ្ររបស់កម្មវិធីរុករក៖ ព័ត៌មានល្អ - Fetch API ដំណើរការល្អក្នុងកម្មវិធីរុករកទំនើបទាំងអស់! ប្រសិនបើអ្នកចង់ដឹងពីកំណែជាក់លាក់ caniuse.com មានព័ត៌មានការគាំទ្រដូចបានច្បាស់លាស់។

ចំណុចសំខាន់៖

ដំណើរការល្អ Chrome, Firefox, Safari និង Edge (គឺគ្រប់ទីកន្លែងដែលអ្នកប្រើប្រាស់របស់អ្នកមាន)
មានតែ Internet Explorer តែប៉ុណ្ណោះដែលត្រូវការជំនួយបន្ថែម (ហើយពិតជាគួរឲ្យចាកចេញពីវា)
បង្កើតស្ថានភាពល្អសម្រាប់ async/await ដែលយើងនឹងប្រើនៅខាងក្រោយ

សម្រេចការចូលប្រើប្រាស់អ្នកប្រើ និងទាញយកទិន្នន័យ

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

យើងនឹងកសាងវាជាបន្ដបន្ទាប់ ចាប់ពីការផ្ទៀងផ្ទាត់មូលដ្ឋាន ហើយបន្ថែមមុខងារទាញយកទិន្នន័យជាក្រោយ។

ជំហានទី1៖ បង្កើតមូលដ្ឋានមុខងារចូលប្រើប្រាស់

បើកឯកសារ app.js ហើយបន្ថែមមុខងារ login ថ្មីមួយ។ នេះនឹងគ្រប់គ្រងដំណើរការផ្ទៀងផ្ទាត់អ្នកប្រើ៖

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
}

ចូលទៅបំបែកវា៖

ពាក្យកំណត់ async? នេះកំពុងប្រាប់ JavaScript ថា "មុខងារនេះអាចត្រូវរង់ចាំអ្វីមួយ"
យើងកំពុងយកទំរង់ពីទំព័រ (គ្មានអ្វីពិសេស, គ្រាន់តែស្វែងរកតាម ID)
បន្ទាប់មកយើងយកអ្វីដែលអ្នកប្រើបានវាយជាឈ្មោះអ្នកប្រើ
មានមុខងារស្អាត៖ អ្នកអាចចូលដល់inputទាំងអស់ពីឈ្មោះ name របស់វា - មិនចាំបាច់ទៅទាញ element ដោយ ID ទៀតហើយ!

💡 គំរូចូលដល់ទំរង់៖ គ្រប់ការត្រួតគ្រងទំរង់អាចចូលដោយឈ្មោះ (set ក្នុង HTML ជាមួយ attribute name) ជាគ្រឿងផ្នែកមួយនៃទំរង់ម្ដងទេ។ វាផ្តល់វិធីសាស្រ្តស្អាតក្នុងការទាញទិន្នន័យវេប។

ជំហានទី2៖ បង្កើតមុខងារទាញយកទិន្នន័យគណនី

បន្ទាប់មក យើងនឹងបង្កើតមុខងារជាក់លាក់សម្រាប់ទាញយកទិន្នន័យគណនីពីម៉ាស៊ីនបម្រើ។ វាមៅដូចជាគំរូក្នុងការចុះបញ្ជី ដោយផ្តោតលើការទាញយកទិន្នន័យ៖

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

អ្វីដែលកូដនេះធ្វើ៖

ប្រើប្រាស់ fetch API ទំនើបសម្រាប់ទាញយកទិន្នន័យអាស៊ីនឆ្រូណាស់
បង្កើត URL សំណើ GET ជាមួយប៉ារ៉ាម៉ែត្រ username
អនុវត្ត encodeURIComponent() ដើម្បីដោះស្រាយអក្សរពិសេសក្នុង URL
បម្លែង ផ្ទុយជា JSON សម្រាប់ងាយស្រួលដំណើរការ
ដោះស្រាយកំហុស ដោយអាចផ្តល់វត្ថុកំហុស មិនបញ្ហាសម្រាប់បញ្ហាដល់កូដ

⚠️ កំណត់ចំណាំសុវត្ថិភាព៖ មុខងារ encodeURIComponent() គ្រប់គ្រងអក្សរពិសេសក្នុង URL។ ដូចប្រព័ន្ធសម្ងាត់ការទំនាក់ទំនងទាហាន វាធានាថាសាររបស់អ្នកដល់ដោយត្រឹមត្រូវ ដើម្បីការពារអក្សរដូចជា "#" ឬ "&" មិនឲ្យប៉ះពាល់។

ហេតុអ្វីវាមានសារៈសំខាន់ៈ

ល្បួងឲ្យបញ្ហា URL រអិល
ការពារការវាយប្រហារដោយកែប្រែ URL
ផ្ទៀងផ្ទាត់ម៉ាស៊ីនបម្រើទទួលបានព័ត៌មានត្រឹមត្រូវ
អនុវត្តន៍បទពិសោធន៍សុវត្ថិភាព!

យល់ដឹងពីសំណើ HTTP GET

នេះជារឿងដែលអាចធ្វើអោយភ្ញាក់ផ្អើល៖ ខណៈពេលអ្នកប្រើ fetch ដោយគ្មានជម្រើសបន្ថែម វាបង្កើតសំណើ GET ដោយស្វ័យប្រវត្តិ។ វាដូចជាការស្នើសុំផ្ដល់មើលព័ត៌មានគណនីអ្នកប្រើ។

សូមគិតថាសំណើ GET ជាការស្នើសុំយ៉ាងគង់ចិត្តដើម្បីខ្ចប់សៀវភៅមួយពីបណ្ណាល័យ - អ្នកកំពុងស្នើមើលអ្វីដែលមានរួចហើយ។ សំណើ POST (ដែលយើងបានប្រើសម្រាប់ការចុះបញ្ជី) ជាដូចស្នើសុំបញ្ចូលសៀវភៅថ្មីមួយចូលក្នុងប្រមូលផ្ដុំ។

សំណើ GET	សំណើ POST
គោលបំណង	ទាញយកទិន្នន័យមានរួច
ប៉ារ៉ាម៉ែត្រ	នៅផ្លូវ URL/សំណួរ
បម្រាស់ទិន្នន័យ	អាចបានថតជាស្តុកដោយកម្មវិធីរុករក
សុវត្ថិភាព	មើលឃើញបានក្នុង URL/កំណត់ត្រា

sequenceDiagram
    participant B as ប្រៅស៊ែរ
    participant S as ម៉ាស៊ីនបម្រើ
    
    Note over B,S: សំណើ GET (ការទាញយកទិន្នន័យ)
    B->>S: GET /api/accounts/test
    S-->>B: 200 OK + ទិន្នន័យគណនី
    
    Note over B,S: សំណើ POST (ការដាក់ស្នើទិន្នន័យ)
    B->>S: POST /api/accounts + ទិន្នន័យគណនីថ្មី
    S-->>B: 201 Created + ការបញ្ជាក់
    
    Note over B,S: ការដោះស្រាយកំហុស
    B->>S: GET /api/accounts/nonexistent
    S-->>B: 404 Not Found + សារកំហុស

ជំហានទី3៖ បង្រួមគ្រប់យ៉ាងចូលគ្នា

ឥឡូវនេះមកជាន់កម្រិតសប្បាយចិត្ត - មកភ្ជាប់មុខងារទាញយកគណនីទៅដំណើរការចូលរបស់អ្នក។ នេះជាកន្លែងដែលគ្រប់យ៉ាងសម្រួលចូលគ្នា៖

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
  const data = await getAccount(user);

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}

មុខងារនេះអនុវត្តតាមលំដាប់៖

ប្រមូលឈ្មោះអ្នកប្រើពីinputទំរង់
ស្នើសុំទិន្នន័យគណនីអ្នកប្រើពីម៉ាស៊ីនបម្រើ
ដោះស្រាយកំហុសណាមួយកើតឡើងពេលដំណើរការ
រក្សាទុកទិន្នន័យគណនី ហើយនាំទៅមុខទំព័រដាសប៊ូតបន្ទាប់ពីជោគជ័យ

🎯 គំរូ Async/Await៖ ពីព្រោះ getAccount ជាមុខងារអាស៊ីនឆ្រូណាស់ យើងប្រើពាក្យ await ដើម្បីផ្អាក់សកម្មភាពរហូតដល់ម៉ាស៊ីនបម្រើឆ្លើយតប។ វារពារការបន្តកម្មវិធីជាមួយទិន្នន័យដែលមិនបានកំណត់។

ជំហានទី4៖ បង្កើតទីតាំងរក្សាទិន្នន័យរបស់អ្នក

កម្មវិធីរបស់អ្នកត្រូវការទីតាំងមួយដើម្បីចងចាំព័ត៌មានគណនីនៅពេលដែលវាត្រូវបានផ្ទុក។ សូមគិតថាវាជាភាសារហ្សឺមរបស់កម្មវិធី - ជាទីកន្លែងរក្សាទិន្នន័យអ្នកប្រើបច្ចុប្បន្ន។ បន្ថែមជួរនេះនៅលើកំពូលឯកសារ app.js របស់អ្នក៖

// នេះផ្ទុកទិន្នន័យគណនីរបស់អ្នកប្រើប្រាស់បច្ចុប្បន្ន
let account = null;

ហេតុអ្វីយើងត្រូវការវា៖

រក្សាទិន្នន័យគណនីអាចចូលបានពីគ្រប់ទីកន្លែងក្នុងកម្មវិធី
ចាប់ផ្តើមជាមួយ null មានន័យថា "មិនមាននរណាចូលប្រើទេ"
វានឹងត្រូវបន្ទាន់សម័យពេលនរណាម្នាក់ចូលឬចុះបញ្ជី
ប្រព្រឹត្តដូចជាមូលដ្ឋានតែមួយនៃការពិត - មិនមានភាពច្របូកច្របល់អំពីនរណាកំពុងប្រើប្រាស់

ជំហានទី5៖ ភ្ជាប់ទំរង់របស់អ្នក

ឥឡូវនេះភ្ជាប់មុខងារចូលថ្មីរបស់អ្នកទៅទំរង់ HTML។ បរិមាណទំរង់របស់អ្នកដូចខាងក្រោម៖

<form id="loginForm" action="javascript:login()">
  <!-- Your existing form inputs -->
</form>

អ្វីដែលការផ្លាស់ប្ដូរតូចនេះធ្វើ៖

ឈប់ទំរង់ពីការធ្វើវិបត្តិពេញទំព័រដូចតាមទំនៀមទំលាប់
ហៅមុខងារ JavaScript ផ្ទាល់របស់អ្នកជំនួស
រក្សាឲ្យវាស្រួល និងមានអារម្មណ៍ដូច SPA
ផ្តល់ការគ្រប់គ្រងពេញលេញលើអ្វីដែលកើតឡើងពេលអ្នកប្រើចុច "Login"

ជំហានទី6៖ បង្កើតភាពរលូនក្នុងមុខងារចុះបញ្ជីរបស់អ្នក

សម្រាប់ភាពស្មើគ្នា, អាប់ដេតមុខងារ register របស់អ្នកឲ្យកាន់តែរក្សាទិន្នន័យគណនី និងនាំទៅដាសប៊ូត:

// បន្ថែមបន្ទាត់ទាំងនេះនៅចុងฟងសិន register របស់អ្នក
account = result;
navigate('/dashboard');

ការកែលម្អនេះផ្តល់ជូន៖

ចូលរួមរលូន ពីការចុះបញ្ជីទៅដាស់ប៊ូត
បទពិសោធន៍រលូន ដូចគ្នារវាងដំណើរការចូល និងចុះបញ្ជី
ចូលប្រើបានភ្លាម ទិន្នន័យគណនីបន្ទាប់ពីចុះបញ្ជីជោគជ័យ

សាកល្បងការអនុវត្តរបស់អ្នក

flowchart TD
    A[អ្នកប្រើបញ្ចូលព័ត៌មានសម្គាល់] --> B[អនុគមន៍ចូលប្រើបានហៅ]
    B --> C[យកទិន្នន័យគណនីពីម៉ាស៊ីនបម្រើ]
    C --> D{ទិន្នន័យទទួលបានដោយជោគជ័យ?}
    D -->|បាទ/ចាស| E[រក្សាទិន្នន័យគណនីជាសកល]
    D -->|ទេ| F[បង្ហាញសារបញ្ហា]
    E --> G[ចរាចរទៅផ្ទាំងគ្រប់គ្រង]
    F --> H[អ្នកប្រើនៅលើទំព័រចូល]

ម៉ោងសាកល្បងវា៖

បង្កើតគណនីថ្មីមួយដើម្បីបញ្ជាក់ថាអ្វីៗដំណើរការ
ព្យាយាមចូលជាមួយព័ត៌មានបញ្ចូលនោះដដែល
មើលកុងស៊ូលរបស់កម្មវិធីរុករក (F12) ប្រសិនបើមានអ្វីមិនត្រឹមត្រូវ
ធ្វើឲ្យប្រាកដថាអ្នកបានមកដល់ដាសប៊ូតបន្ទាប់ពីចូលបានជោគជ័យ

ប្រសិនបើអ្វីមួយមិនដំណើរការ កុំភ័យ! បញ្ហាច្រើនគឺជាការជួសជុលតូចៗដូចជា ព្រីន អក្សរបាត់ ឬភ្លេចចាប់ផ្តើមម៉ាស៊ីនបម្រើ API។

ពាក្យសម្ងាត់ខ្លីអំពី Cross-Origin ខ្យល់ទឹក

អ្នកអាចចង់ដឹង៖ "កម្មវិធីវេបរបស់ខ្ញុំរបៀបណាចាប់ផ្តើមនិយាយទៅម៉ាស៊ីនបម្រើ API ខណៈពួកវារត់លើព្រលឹងផ្សេងគ្នា?" សំណួរល្អ! នេះជាវិញ្ញាណដែលអ្នកអភិវឌ្ឍន៍វេបគ្រប់នរណាវៀចក្លាយជាការស្ទាក់ស្ទើរបាននៅពេលណា។

🔒 សុវត្ថិភាព Cross-Origin៖ កម្មវិធីរុករកអនុវត្តន៍ "គោលន័យដើមដូចគ្នា" ដើម្បីការពារការទំនាក់ទំនងមិនមានការអនុញ្ញាតរវាងដែនដីខុសគ្នា។ ដូចប្រព័ន្ធត្រួតពិនិត្យនៅ Pentagon វាអះអាងថាការទំនាក់ទំនងត្រូវបានអនុញ្ញាតមុនប្រើទិន្នន័យ។

ក្នុងការរៀបចំរបស់យើង៖

កម្មវិធីវេបរបស់អ្នកដំណើរការនៅ localhost:3000 (ម៉ាស៊ីនបម្រើអភិវឌ្ឍន៍)
ម៉ាស៊ីនបម្រើ API របស់អ្នកដំណើរការនៅ localhost:5000 (ម៉ាស៊ីនបម្រើក្រោយ)
ម៉ាស៊ីនបម្រើ API រួមបញ្ចូល ក្បាល CORS ដែលអនុញ្ញាតឲ្យមានការទំនាក់ទំនងចេញពីកម្មវិធីវេបរបស់អ្នក

ការរៀបចំនេះស្ទើរតែដូចការអភិវឌ្ឍន៍ពិតដែលកម្មវិធីផ្នែកមុខ និងផ្នែកក្រោយស្របទម្លាប់ដំណើរការលើម៉ាស៊ីនបម្រើផ្សេងគ្នា។

📚 រៀនបន្ថែម៖ ជ្រាបជ្រោមទៅលើ API និងការទាញយកទិន្នន័យជាមួយ មេរៀន Microsoft Learn លើ API។

បង្ហាញទិន្នន័យរបស់អ្នកក្នុង HTML

ឥឡូវនេះ យើងនឹងធ្វើឲ្យទិន្នន័យដែលបានទាញយកមើលឃើញដោយអ្នកប្រើតាមរយៈការគ្រប់គ្រង DOM។ ដូចការវិភាគរូបថតក្នុងបន្ទប់ងងឹត យើងកំពុងយកទិន្នន័យមិនអាចមើលឃើញទៅធ្វើឲ្យវាមើលឃើញ និងអាចធ្វើអ្វីមួយបានដោយអ្នកប្រើ។

ការគ្រប់គ្រង DOM គឺជាបច្ចេកទេសដែលបម្លែងទំព័រវេបថេរជាកម្មវិធីឌីណាមិចដែលអាប់ដេតមាតិការបស់វាតាមប្រតិកម្មអ្នកប្រើ និងការឆ្លើយតបម៉ាស៊ីនបម្រើ។

ជ្រើសរើសឧបករណ៍ត្រឹមត្រូវសម្រាប់ការងារ

ពេលដែលផ្លាស់ប្ដូរទំព័រ HTML របស់អ្នកជាមួយ JavaScript អ្នកមានជម្រើសជាច្រើន។ គិតថាវានៅដូចជាវត្ថុអគ្គិសនីផ្សេងៗក្នុងប្រអប់ឧបករណ៍មួយ - តែម្ដងគួរឱ្យសមសម្រាប់ការងារផ្សេងៗ៖

វិធីសាស្រ្ត	អ្វីដែលវាល្អ	ពេលណាត្រូវប្រើវា	កម្រិតសុវត្ថិភាព
`textContent`	បង្ហាញទិន្នន័យអ្នកប្រើប្រាស់ដោយសុវត្ថិភាព	ពេលណាដែលអ្នកបង្ហាញអត្ថបទ	✅ រឹងមាំ
`createElement()` + `append()`	បង្កើតកំណត់ត្រាសង្កត់	បង្កើតផ្នែក/បញ្ជីថ្មី	✅ រឹងមាំ
`innerHTML`	កំណត់មាតិកា HTML	⚠️ ព្យាយាមចៀសវាងវា	❌ ប្រតិបត្តិការលំបាក

វិធីសុវត្ថិភាពក្នុងការបង្ហាញអត្ថបទ៖ textContent

លក្ខណៈ textContent គឺជាមិត្តល្អបំផុតរបស់អ្នកនៅពេលបង្ហាញទិន្នន័យអ្នកប្រើប្រាស់។ វាដូចជាមនុស្សចទ្រង់ច្រង់សម្រាប់គេហទំព័ររបស់អ្នក - មិនប្រើអ្វីគ្រោះថ្នាក់ឲ្យឆ្លងកាត់:

// វិធីសាស្ត្រដែលមានសុវត្ថិភាព និងទុកចិត្តបានសម្រាប់ការអាប់ដេតអត្ថបទ
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

អត្ថប្រយោជន៍ textContent:

គ្រប់យ៉ាងត្រូវបានចាត់ទុកជាអត្ថបទធម្មតា (មិនអនុញ្ញាតឲ្យបញ្ជារូបមន្ត)
សម្អាតមាតិកាទាំងអស់ដែលមានស្រាប់យ៉ាងស្វ័យប្រវត្តិ
ប្រសិទ្ធភាពសម្រាប់បំលែងអត្ថបទសាមញ្ញ
ផ្តល់សុវត្ថិភាពបញ្ឆិតបញ្ឆាយពីមាតិកាអាក្រក់

បង្កើតធាតុកាន់តែថ្មើរជីវិតបានល្អ

សម្រាប់មាតិកាស្មុគស្មាញច្រើន, ភ្ជាប់ document.createElement() ជាមួយវិធីសាស្រ្ត append():

// វិធីសុវត្ថិភាពក្នុងការបង្កើតធាតុថ្មី
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

ការយល់ដឹងពីវិធីនេះ:

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

⚠️ ការពិចារណាសុវត្ថិភាព: ទោះបីជា innerHTML បង្ហាញនៅក្នុងមេរៀនជាច្រើនក៏ដោយ វាអាចបើកបន្ទប់អនុវត្តកម្មវិធីផ្សេងទៀតបាន។ ដូចការពារសុវត្ថិភាពនៅ CERN ដែលទប់ស្កាត់កូដមិនមានសិទ្ធអនុវត្ត, ការប្រើប្រាស់ textContent និង createElement ផ្តល់ជម្រើសសុវត្ថិភាពជាងនេះ។

ហានិភ័យ innerHTML:

ប្រតិបត្តិ <script> នៅក្នុងទិន្នន័យអ្នកប្រើ
ងាយរងហ៊ានវាយប្រហារកូដចាក់សោ
បង្កើតកន្លែងបាត់បង់សុវត្ថិភាព
ជម្រើសសុវត្ថិភាពដែលយើងប្រើផ្តល់មុខងារដូចគ្នា

បង្រៀនការបញ្ហាផ្លូវចិត្តសម្រាប់អ្នកប្រើ

ពេលនេះ, កំហុសចូលគណនីមានតែការបង្ហាញនៅក្នុង console របស់ម៉ាស៊ីនទេសចរណ៍ ដែលមិនអាចមើលឃើញដោយអ្នកប្រើ។ ដូចភាពខុសគ្នារវាងការគ្រប់គ្រងខាងក្នុងរបស់បើកបរ និងប្រព័ន្ធព័ត៌មានសម្រាប់អ្នកដំណើរ, យើងត្រូវការបញ្ជូនព័ត៌មានសំខាន់តាមប្រព័ន្ធដែលសមរម្យ។

ការដាក់ពាក្យបញ្ហាចេញមកមើលបានផ្តល់អ្នកប្រើនូវមតិយោបល់ភ្លាមៗអំពីអ្វីដែលប៉ះពាល់ និងរបៀបដំណើរការបន្ត។

ជំហានទី 1៖ បន្ថែមកន្លែងសម្រាប់សារ កំហុស

ដំបូង, ឲ្យសារកំហុសមានទីតាំងនៅក្នុង HTML របស់អ្នក។ បន្ថែមវាទៅមុនប៊ូតុងចូល ដើម្បីអ្នកប្រើឃើញវាដោយធម្មតា៖

<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>

អ្វីកើតឡើងនៅទីនេះ:

យើងបង្កើតធុងទទេដែលលាក់ខ្លួនរហូតដល់ចាំបាច់
វាត្រូវបានដាក់នៅកន្លែងដែលអ្នកប្រើប្រាស់មើលបន្ទាប់ពីចុច "Login"
role="alert" ជាការបន្ថែមល្អសម្រាប់អ្នកអានអេក្រង់ - វាប្រាប់បច្ចេកវិទ្យាជំនួយថា "នេះមានសារៈសំខាន់!"
អត្តសញ្ញាណដ៏ពិសេស id ផ្តល់គោលដៅងាយស្រួលសម្រាប់ JavaScript របស់យើង

ជំហានទី 2៖ បង្កើតមុខងារជំនួយមានប្រយោជន៍

ឱបួសបង្កើតមុខងារជំនួយតូចមួយដែលអាចធ្វើបច្ចុប្បន្នភាពអត្ថបទរាល់ធាតុបាន។ នេះគឺជាមុខងារមួយដែលធ្វើម្តងដោយសរសេរ ហើយប្រើបានគ្រប់កន្លែងដែលនឹងជួយអ្នកសន្សំពេលវេលា៖

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

អត្ថប្រយោជន៍មុខងារ៖

ផ្ទាំងសាមញ្ញត្រូវការតែ ID និងអត្ថបទតែប៉ុណ្ណោះ
យ៉ាងសុវត្ថិភាពស្វែងរក និងធ្វើបច្ចុប្បន្នភាពធាតុ DOM
គំរូដែលអាចប្រើឡើងវិញបន្ថយការចម្លងកូដ
រក្សាទុកអាកប្បកិរិយាបច្ចុប្បន្នភាពមួយស្មើនៅទាំងកម្មវិធី

ជំហានទី 3៖ បង្ហាញកំហុសនៅកន្លែងដែលអ្នកប្រើអាចឃើញ

ឥឡូវនេះយើងជំនួសសារលាក់នៅ console ជាមួយអ្វីដែលអ្នកប្រើអាចមើលឃើញបាន។ បច្ចុប្បន្នភាពមុខងារចូលរបស់អ្នក៖

// ផ្ទេរពីការចុះបញ្ជីទៅកាន់កុងសូលប៉ុណ្ណោះ ទៅបង្ហាញអ្នកប្រើថាមានអ្វីខុស។
if (data.error) {
  return updateElement('loginError', data.error);
}

ការផ្លាស់ប្ដូរតូចនេះបង្កើតភាពខុសគ្នាធំ:

សារកំហុសបង្ហាញនៅកន្លែងដែលអ្នកប្រើកំពុងមើល
មិនមានការបរាជ័យស្ងប់ស្ងាត់អវិជ្ជមានទៀត
អ្នកប្រើទទួលបានមតិយោបល់ភ្លាមៗដែលអាចអនុវត្តបាន
កម្មវិធីរបស់អ្នកចាប់ផ្តើមមានការស្មោះត្រង់ និងគិតគមន៍

ឥឡូវនេះពេលអ្នកសាកល្បងជាមួយគណនីមិនត្រឹមត្រូវ អ្នកនឹងឃើញសារកំហុសដែលមានប្រយោជន៍នៅលើទំព័រប្រដាប់នេះ!

ជំហានទី 4៖ រួមបញ្ចូលភាពមានសិទ្ធិចូលមើល

នេះជារឿងថ្មីពាក់ព័ន្ធទៅនឹង role="alert" ដែលយើងបានបន្ថែមមុននេះ - វាមិនមែនតែការតុបតែងទេ! លក្ខណៈតូចនេះបង្កើតអ្វីដែលហៅថា Live Region ដែលរាយការណ៍ការផ្លាស់ប្តូរឲ្យអ្នកអានអេក្រង់ដឹងភ្លាមៗ៖

<div id="loginError" role="alert"></div>

ហេតុអ្វីបានជាវាសំខាន់:

អ្នកប្រើប្រាស់អ្នកអានអេក្រង់ឮសារកំហុសភ្លាមពេលវាបង្ហាញ
មនុស្សគ្រប់គ្នាចាប់យកព័ត៌មានសំខាន់ដូចគ្នា ដោយមិនគិតពីរបៀបរុករក
វាជាវិធីសាមញ្ញក្នុងការធ្វើឲ្យកម្មវិធីរបស់អ្នកប្រើបានសម្រាប់មនុស្សច្រើនជាងមួយ
បង្ហាញអ្នកថាអ្នកមានការយកចិត្តទុកដាក់ក្នុងការបង្កើតបទពិសោធន៍រួម

ការសំអាតតូចៗដូចនេះបង្កើតភាពខុសគ្នារវាងអ្នកអភិវឌ្ឍល្អ និងល្អជាង!

🎯 ពិនិត្យការសិក្សា៖ រចនាប័ទ្មផ្ទៀងផ្ទាត់អត្តសញ្ញាណ

ឈប់ហើយគិត៖ អ្នកទើបធ្វើចូលចិត្តភាពផ្ទៀងផ្ទាត់អត្តសញ្ញាណពេញលេញ។ នេះគឺជាទំរង់មូលដ្ឋានមួយក្នុងការអភិវឌ្ឍវេបសាយ។

ការវាយតម្លៃដោយខ្លួនឯងយ៉ាងខ្លី:

តើអ្នកអាចពន្យល់បានទេថា ហេតុអ្វីយើងប្រើ async/await សម្រាប់ការហៅ API?
តើនឹងកើតអ្វីបើយើងភ្លេចមុខងារ encodeURIComponent()?
តើរបៀបគ្រប់គ្រងកំហុសរបស់យើងធ្វើឲ្យបទពិសោធន៍អ្នកប្រើប្រាស់កាន់តែប្រសើរយ៉ាងដូចម្តេច?

ការតភ្ជាប់ក្នុងពិភពលោកពិត: រចនាប័ទ្មដែលអ្នកបានរៀននៅទីនេះ (ការទាញទិន្នន័យ async, ការគ្រប់គ្រងកំហុស, មតិយោបល់អ្នកប្រើ) ត្រូវបានប្រើនៅក្នុងកម្មវិធីវេបធំៗគ្រប់គ្នាពីបណ្តាញសង្គមរហូតដល់គេហទំព័រក្នុងពាណិជ្ជកម្ម។ អ្នកកំពុងកសាងជំនាញកម្រិតផលិតកម្ម!

សំណួរប្រកួតប្រជែង៖ តើអ្នកអាចកែប្រែប្រព័ន្ធផ្ទៀងផ្ទាត់នេះដើម្បីគ្រប់គ្រងតួនាទីអ្នកប្រើច្រើន (អតិថិជន, អ្នកគ្រប់គ្រង, កម្មករ)? ចេះគិតអំពីរចនាសម្ព័ន្ធទិន្នន័យ និងការផ្លាស់ប្តូរផ្ទាំងការប្រើប្រាស់។

ជំហានទី 5៖ អនុវត្តលំនាំដូចគ្នានៅក្នុងការចុះឈ្មោះ

សម្រាប់ភាពស្របត្រឹម គួរអនុវត្តការគ្រប់គ្រងកំហុសដូចគ្នានៅក្នុងទម្រង់ចុះឈ្មោះរបស់អ្នក៖

បន្ថែមធាតុនៃការបង្ហាញកំហុសទៅក្នុង HTML ចុះឈ្មោះ៖

<div id="registerError" role="alert"></div>

បច្ចុប្បន្នភាពមុខងារចុះឈ្មោះឲ្យប្រើលំនាំបង្ហាញកំហុសដូចគ្នា៖

if (data.error) {
  return updateElement('registerError', data.error);
}

អត្ថប្រយោជន៍នៃការគ្រប់គ្រងកំហុសរួមមាន:

ផ្តល់បទពិសោធន៍អ្នកប្រើប្រាស់ស្របគ្នានៅគ្រប់ទម្រង់
កាត់បន្ថយការផ្ទុកចិត្តលើការគិតប្រពៃណីដោយប្រើលំនាំដែលស្គាល់
ធ្វើឲ្យការថែទាំកូដកាន់តែងាយស្រួលដោយពង្រឹងការប្រើប្រាស់ឡើងវិញ
ធានាថាមានតម្រូវការតម្រូវភាពមានសិទ្ធិចូលមើលគ្រប់ទីកន្លែងក្នុងកម្មវិធី

បង្កើតផ្ទាំងតំណរជីវិតរបស់អ្នក

ឥឡូវនេះយើងនឹងបំលែងផ្ទាំងតំណររឹងរបស់អ្នកទៅជាចំណុចប្រទាក់ដែលបង្ហាញទិន្នន័យគណនីពិត។ ដូចភាពខុសគ្នារវាងកាលវិភាគហោះជល់បោះពុម្ព និងផ្ទាំងការចេញហោះជេសបច្ចុប្បន្ននៅព្រលានយន្តហោះ, យើងកំពុងផ្លាស់ប្ដូរព័ត៌មានស្ថិតស្ថេរទៅជាការបង្ហាញបន្តបន្ទាប់។

ដោយប្រើវិធីសាស្រ្តចាប់ផ្តើម DOM ដែលអ្នកបានរៀន, យើងនឹងបង្កើតផ្ទាំងតំណរដែលធ្វើបច្ចុប្បន្នភាពដោយស្វ័យប្រវត្តិជាមួយព័ត៌មានគណនីបច្ចុប្បន្ន។

ស្គាល់ទិន្នន័យរបស់អ្នក

មុនពេលចាប់ផ្តើមសាងសង់, តោះពួកយើងមើលទិន្នន័យដែលម៉ាស៊ីនបម្រើរបស់អ្នកផ្ញើត្រឡប់មក។ ពេលដែលនរណាម្នាក់ចូលបានជោគជ័យ, នេះគឺជាយុទ្ធសាស្រ្តព័ត៌មានដែលអ្នកទទួលបាន៖

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

រចនាសម្ព័ន្ធទិន្នន័យនេះផ្តល់:

user: ល្អសម្រាប់បង្ហាញបទពិសោធន៍ផ្ទាល់ខ្លួន ("ស្វាគមន៍មកវិញ Sarah!")
currency: ធានាថាយើងបង្ហាញចំនួនប្រាក់ទៅតាមរូបិយប័ណ្ណត្រឹមត្រូវ
description: ឈ្មោះចFriendlyសម្រាប់គណនី
balance: ចំនួនទឹកប្រាក់សរុបបច្ចុប្បន្ន
transactions: ប្រវត្តិប្រតិបត្តិការត្រូវបានចេញផ្សាយពេញលេញ

អ្វីដែលអ្នកត្រូវការទាំងអស់ដើម្បីសាងសង់ផ្ទាំងតំណរកាន់តែល្អ!

flowchart TD
    A[ចូលអ្នកប្រើ] --> B[យកទិន្នន័យគណនី]
    B --> C{ទិន្នន័យត្រឹមត្រូវទេ?}
    C -->|បាទ| D[រក្សាទុកក្នុងអថេរពិភពលោក]
    C -->|ទេ| E[បង្ហាញសារប្រហែល]
    D --> F[បញ្ជូនទៅកាន់ផ្ទៃតាប្លូ]
    F --> G[បន្ទាន់សម័យធាតុ UI]
    G --> H[បង្ហាញសមតុល្យ]
    G --> I[បង្ហាញការពណ៌នា]
    G --> J[បង្ហាញប្រតិបត្តិការណ៍]
    J --> K[បង្កើតជួរដេកតារាង]
    K --> L[ទ្រង់ទ្រាយលុយ]
    L --> M[អ្នកប្រើមើលទិន្នន័យបន្តផ្ទាល់]

💡 យុទ្ធសាស្រ្ត ប្រាប់: ចង់មើលផ្ទាំងតំណររបស់អ្នកដំណើរការភ្លាមៗទេ? ប្រើឈ្មោះអ្នកប្រើ test ពេលចូល - វាផ្ទុកទិន្នន័យគំរូរួចហើយ ដូច្នេះអ្នកអាចមើលបញ្ហារបស់អ្នកដំណើរការដោយមិនចាំបាច់បង្កើតប្រតិបត្តិការដំបូង។

ហេតុអ្វីគណនី test មានប្រយោជន៍:

មានទិន្នន័យគំរូដែលសម្បូរបែបមានរួចហើយ
ល្អសម្រាប់មើលទិដ្ឋភាពប្រតិបត្តិការបង្ហាញ
ល្អសម្រាប់សាកល្បងមុខងារផ្ទាំងតំណររបស់អ្នក
ជួយជៀសវាងការបង្កើតទិន្នន័យ គំរូដោយដៃ

បង្កើតធាតុបង្ហាញផ្ទាំងតំណរ

ចាប់ផ្តើមសាងសង់ផ្ទាំងតំណររបស់អ្នកជាជំហានៗ ដំបូងជាមួយព័ត៌មានសេចក្តីសង្ខេបគណនី ហើយបន្ទាប់មកបន្ថែមមុខងារស្មុគស្មាញដូចជាបញ្ជីប្រតិបត្តិការជាឈរ។

ជំហានទី 1៖ បច្ចុប្បន្នភាពរចនាសម្ព័ន្ធ HTML របស់អ្នក

ដំបូង ជំនួសផ្នែក "Balance" ស្ថិតស្ថេរដោយធាតុបន្លាស់មួយដែល JavaScript របស់អ្នកអាចបំពេញបាន៖

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

បន្ទាប់មក បន្ថែមផ្នែកសេចក្តីពិពណ៌នាគណនី។ ពីព្រោះវាដំណើរការជាជើងចម្បងសម្រាប់មាតិកាផ្ទាំងតំណរ, ប្រើ HTML មានអត្ថន័យ៖

<h2 id="description"></h2>

យល់ដឹងរចនាសម្ព័ន្ធ HTML:

ប្រើធាតុ <span> ផ្សេងៗសម្រាប់បង្ហាញសមតុល្យ និងរូបិយប័ណ្ណសម្រាប់គ្រប់គ្រងបុគ្គល
អនុវត្ត ID ផ្ទាល់ខ្លួនចំពោះធាតុនីមួយៗសម្រាប់គោលដៅ JavaScript
អនុវត្ត HTML ដែលមានអត្ថន័យដោយប្រើ <h2> សម្រាប់សេចក្តីពិពណ៌នាគណនី
បង្កើតរចនាសម្ព័ន្ធតាមលំដាប់ហេរ៉ាឃីសម្រាប់អ្នកអានអេក្រង់ និង SEO

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

ជំហានទី 2៖ បង្កើតមុខងារធ្វើបច្ចុប្បន្នភាពផ្ទាំងតំណរ

ឥឡូវនេះបង្កើតមុខងារមួយដែលបំពេញផ្ទាំងតំណររបស់អ្នកជាមួយទិន្នន័យគណនីពិត៖

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

ជំហានដោយជំហាន, មុខងារនេះធ្វើអ្វីខ្លះ៖

ផ្ទៀងផ្ទាត់ថាទិន្នន័យគណនីមានស្រាប់មុនបន្ត
បញ្ជូនបុគ្គលដែលមិនបានផ្ទៀងផ្ទាត់ចូលក្រោយទៅទំព័រចូល
ធ្វើបច្ចុប្បន្នភាពសេចក្តីពិពណ៌នាគណនីដោយប្រើមុខងារ updateElement ដែលអាចប្រើឡើងវិញ
ទ្រង់ទ្រាយសមតុល្យបង្ហាញជាទ្រង់ទ្រាយលេខកំណត់ពីរទសភាគ
បង្ហាញរូបសញ្ញារូបិយប័ណ្ណត្រឹមត្រូវ

💰 ទ្រង់ទ្រាយប្រាក់៖ វិធីសាស្រ្ត toFixed(2) គឺជាឧបសគ្គសម្រាប់អ្នក! វធានាថាសមតុល្យរបស់អ្នកតែងតែបង្ហាញដូចប្រាក់ពិតៗ - "75.00" មិនមែនត្រូវបានបង្ហាញត្រឹមតែ "75" ទេ។ អ្នកប្រើប្រាស់របស់អ្នកនឹងពេញចិត្តក្នុងការមើលទ្រង់ទ្រាយរូបិយប័ណ្ណដែលស្គាល់។

ជំហានទី 3៖ ធានាថា ផ្ទាំងតំណររបស់អ្នកធ្វើបច្ចុប្បន្នភាព

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

បន្ថែមវានៅចុងមុខងារ updateRoute() របស់អ្នក៖

if (typeof route.init === 'function') {
  route.init();
}

បន្ទាប់មកបច្ចុប្បន្នភាពផ្លូវរបស់អ្នកដើម្បីបញ្ចូលការចាប់ផ្តើមផ្ទាំងតំណរ៖

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
};

កំណត់រចនាសម្ព័ន្ធឆ្លាតវៃនេះធ្វើអ្វី៖

ពិនិត្យថាតើផ្លូវមានកូដចាប់ផ្តើមពិសេសមែនទេ
រត់កូដនោះដោយស្វ័យប្រវត្តិពេលផ្លូវត្រូវបានផ្ទុក
ធានាថាផ្ទាំងតំណររបស់អ្នកតែងតែបង្ហាញព័ត៌មានថ្មីៗ
រក្សាគោលនយោបាយរៀបចំផ្លូវរបស់អ្នកឲ្យស្អាតនិងប្រកបដោយរបៀប

សាកល្បងផ្ទាំងតំណររបស់អ្នក

បន្ទាប់ពីអនុវត្តការផ្លាស់ប្ដូរទាំងនេះ សូមសាកល្បងផ្ទាំងតំណរសម្រាប់៖

ចូលជាមួយគណនីល្បីតេស្ត
ផ្ទៀងផ្ទាត់ថាអ្នកត្រូវបានបញ្ចូនទៅផ្ទាំងតំណរ
ពិនិត្យថាសេចក្តីពិពណ៌នា, សមតុល្យ និងរូបិយប័ណ្ណបង្ហាញត្រឹមត្រូវ
សាកល្បងចេញពីប្រព័ន្ធ ហើយចូលវិញដើម្បីធានាថាទិន្នន័យត្រូវបានបន្សំឡើងវិញដោយត្រឹមត្រូវ

ឥឡូវនេះ ផ្ទាំងតំណររបស់អ្នកគួរតែបង្ហាញទិន្នន័យគណនីឌីណាមិចដែលបន្សំឡើងបន្ទាន់ដោយផ្អែកលើទិន្នន័យអ្នកប្រើដែលបានចូល។

កសាងបញ្ជីប្រតិបត្តិការឆ្លាតវៃជាមួយពុម្ព模板

ជំនួសការបង្កើត HTML ដោយដៃសម្រាប់រាល់ប្រតិបត្តិការ, យើងនឹងប្រើពុម្ព模板សម្រាប់បង្កើតការកំណត់ទ្រង់ទ្រាយជាប់គ្នាដោយស្វ័យប្រវត្តិ។ ដូចជាផ្នែកដែលប្រើនៅក្នុងការផលិតយានយន្តអាកាសយាន, ពុម្ព模板ធានាថាជួរប្រតិបត្តិការ រាល់ជួរមានរចនាសម្ព័ន្ធ និងរូបរាងដូចគ្នា។

បច្ចេកទេសនេះអាចពង្រីកបានយ៉ាងមានប្រសិទ្ធភាពចាប់ពីប្រតិបត្តិការកាច្រើនទៅរហូតដល់រាប់ពាន់ដោយរក្សាបានល្បឿន និងការបង្ហាញដូចគ្នា។

graph LR
    A[គំរូ HTML] --> B[ចម្លង JavaScript]
    B --> C[បញ្ចូលទិន្នន័យ]
    C --> D[បន្ថែមទៅកាន់ Fragment]
    D --> E[បញ្ចូលមួយជំនាន់ទៅ DOM]
    
    subgraph "អត្ថប្រយោជន៍សមត្ថភាព"
        F[ធ្វើឲ្យ DOM បន្ទាន់តែមួយ]
        G[ទ្រង់ទ្រាយឲ្យស្ទៀងស្ទើរ]
        H[លំនាំអាចប្រើឡើងវិញ]
    end
    
    E --> F
    E --> G
    E --> H

flowchart LR
    A[ទិន្នន័យប្រតិបត្តិការ] --> B[គំរូ HTML]
    B --> C[ចម្លងគំរូ]
    C --> D[បញ្ចូលទិន្នន័យ]
    D --> E[បន្ថែមទៅ DOM]
    E --> F[ធ្វើឡើងម្តងទៀតសម្រាប់ប្រតិបត្តិការនីមួយៗ]

ជំហានទី 1៖ បង្កើតពុម្ព模板ប្រតិបត្តិការ

ដំបូង បន្ថែមពុម្ព模板ដែលអាចប្រើឡើងវិញសម្រាប់ជួរប្រតិបត្តិការ នៅក្នុង <body> របស់ HTML៖

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

យល់ដឹងពីពុម្ព模板 HTML:

កំណត់រចនាសម្ព័ន្ធសម្រាប់ជួរតារាងមួយ
បន្សល់លាក់ខ្លួនរហូតដល់ត្រូវបានចម្លងនិងបំពេញជាមួយ JavaScript
រួមបញ្ចូលជង្គង់បីសម្រាប់កាលបរិច្ឆេទ, សេចក្តីពិពណ៌នា និងចំនួនប្រាក់
ផ្តល់គំរូដែលអាចប្រើឡើងវិញសម្រាប់ការកំណត់ទ្រង់ទ្រាយដូចគ្នា

ជំហានទី 2៖ ត្រៀមតារាងរបស់អ្នកសម្រាប់មាតិកាឌីណាមិច

បន្ទាប់មក បន្ថែម id ទៅក្រុមរបស់តារាង (tbody) ដើម្បី JavaScript អាចគោលដៅបានយ៉ាងងាយស្រួល៖

<tbody id="transactions"></tbody>

អ្វីដែលវាបានសំរេច៖

បង្កើតគោលដៅច្បាស់សម្រាប់បញ្ចូលជួរប្រតិបត្តិការ
បំបែករចនាសម្ព័ន្ធតារាងពីមាតិកាឌីណាមិច
អនុញ្ញាតបំលែងលាក់ទុកនិងបង្កើតឡើងវិញបានយ៉ាងងាយស្រួលនៃទិន្នន័យប្រតិបត្តិការ

ជំហានទី 3៖ បង្កើតមុខងារបង្កើតជួរប្រតិបត្តិការ

ឥឡូវបង្កើតមុខងារមួយដែលបំលែងទិន្នន័យប្រតិបត្តិការ ទៅជាធាតុ HTML៖

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

ការពិពណ៌នាមុខងារនេះ៖

ទាញយកធាតុពុម្ព模板តាម ID
ចម្លងមាតិកាពុម្ព模板សម្រាប់មានការកែប្រែយ៉ាងសុវត្ថិភាព
ជ្រើសរើសជួរតារាងក្នុងមាតិកាចម្លង
បំពេញជើងតារាងនីមួយៗជាមួយទិន្នន័យប្រតិបត្តិការ
ទ្រង់ទ្រាយចំនួនប្រាក់បង្ហាញដោយផ្ទៀងផ្ទាត់ទសភាគ
បង្វិលជួរបានស្រេចសម្រាប់បញ្ចូល

ជំហានទី 4៖ បង្កើតជួរប្រតិបត្តិការច្រើនយ៉ាងមានប្រសិទ្ធភាព

បន្ថែមកូដនេះទៅក្នុងមុខងារ updateDashboard() របស់អ្នក ដើម្បីបង្ហាញប្រតិបត្តិការទាំងអស់៖

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

យល់ដឹងពីវិធីសាស្រ្តមានប្រសិទ្ធភាពនេះ៖

បង្កើតឯកសារដោយផ្ទាល់ (document fragment) ដើម្បីបន្សំប្រតិបត្តិការជាមួយ DOM មួយដង
ធ្វើជុំក្នុងប្រតិបត្តិការទាំងអស់ក្នុងទិន្នន័យគណនី
បង្កើតជួរតារាងសម្រាប់រាល់ប្រតិបត្តិការដោយប្រើមុខងារបង្កើត
ប្រមូលផ្តុំជួរទាំងអស់ក្នុងឯកសារដោយផ្ទាល់មុនបន្ថែមទៅ DOM
អនុវត្តការធ្វើបច្ចុប្បន្នភាព DOM តែមួយដង នៅមិនមែនជា ដាក់ចូលច្រើនដងមួយៗឡែកៗ

⚡ ការបង្កើនប្រសិទ្ធិភាព: document.createDocumentFragment() ដូចជាព្រលឹងក្រុមនៅ Boeing - គ្រឿងផ្សំត្រូវបានរៀបចំក្រៅខ្សែដើម ហើយបន្ទាប់មកត្រូវបានដំឡើងជាឯកតាទាំងមូល។ វិធីសាស្ត្រការប្រមូលផ្តុំនេះកាត់បន្ថយការប្ដូររចនាសម្ព័ន្ធ DOM ដោយបញ្ចូលពេលតែមួយជំនួសការប្រតិបត្តិការច្រើនៗដោយឡែកៗ។

ជំហានទី 5: បង្កើនមុខងារអាប់ដេតសម្រាប់មាតិកាចម្រុះ

មុខងារ updateElement() របស់អ្នកបច្ចុប្បន្នគ្រប់គ្រងតែខ្លឹមសារអក្សរតែប៉ុណ្ណោះ។ សូមធ្វើឲ្យវាអាចដំណើរការជាមួយទាំងអក្សរនិងកំណត់ DOM:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // ដកចេញកូនទាំងអស់
  element.append(textOrNode);
}

ការកែលម្អសំខាន់ៗនៅក្នុងការអាប់ដេតនេះ៖

សម្អាត ខ្លឹមសារដែលមានស្រាប់មុនពេលបន្ថែមខ្លឹមសារថ្មី
ទទួលយក អ្នកអាចផ្តល់អក្សរឬកំណត់ DOM ជាអាគុយម៉ង់
ប្រើប្រាស់ វិធីសាស្ត្រ append() សម្រាប់ភាពបត់បែន
រក្សា ភាពត្រូវបានគូសបញ្ជាក់បង្ហាញជាមួយប្រើប្រាស់អក្សរធ្លាប់មាន

រៀបចំផ្ទាំងគ្រប់គ្រងរបស់អ្នកសម្រាប់ការធ្វើតេស្ត

ពេលវេលាសម្រាប់ពេលពិតហើយ! យើងមកមើលផ្ទាំងគ្រប់គ្រងប្រតិបត្តិការ របស់អ្នកក្នុងសកម្មភាព៖

ចូលប្រើប្រាស់ដោយគណនី test (មានទិន្នន័យគំរូរួចហើយ)
រុករកទៅផ្ទាំងគ្រប់គ្រងរបស់អ្នក
ពិនិត្យមើលថា ជួរផ្ទេរប្រាក់បង្ហាញជាមួយទម្រង់ត្រឹមត្រូវ
ធានាថា ថ្ងៃខែចុះផ្សាយ ការពិពណ៌នា និងចំនួនទាំងអស់មើលល្អស្អាត

បើអ្វីៗដំណើរការល្អ អ្នកគួរតែឃើញបញ្ជីប្រតិបត្តិការដែលអាចដំណើរការបានយ៉ាងពេញលេញនៅលើផ្ទាំងគ្រប់គ្រងរបស់អ្នក! 🎉

អ្វីដែលអ្នកបានសម្រេចបាន៖

សង់ផ្ទាំងគ្រប់គ្រងដែលអាចពង្រីកទៅជាមួយទិន្នន័យគ្រប់ចំនួន
បង្កើតគំរូដែលអាចប្រើឡើងវិញសម្រាប់ទម្រង់តែងតាក់ក្រងម៉ាស្សាជាប់គ្នា
អនុវត្តបច្ចេកទេសគ្រប់គ្រង DOM ដែលមានប្រសិទ្ធិភាព
បង្កើតមុខងារដូចគ្នានឹងកម្មវិធីធនាគារដែលប្រើនៅផលិតកម្ម

អ្នកបានបំលែងវេបសាយស្ថិតស្ងៀមមួយទៅជាកម្មវិធីវេបប្រតិបត្តិការ។

🎯 ការត្រួតពិនិត្យផ្នែកសិក្សា: ការបង្កើតមាតិកាឌីណាមិច

ការយល់ដឹងអំពីស្ថាបត្យកម្ម៖ អ្នកបានអនុវត្តបណ្តាប្រព័ន្ធផ្លូវទៅ UI ដែលស្មុគស្មាញមួយ ដែលប្រើបានដូចគំរូក្នុងឆន្ទៈផ្សារ CSS React, Vue និង Angular ។

មូលដ្ឋានសំខាន់ៗដែលបានគ្រប់គ្រង៖

ការបង្ហាញដោយផ្អែកលើគំរូ: បង្កើតធាតុ UI ដែលអាចប្រើឡើងវិញ
ឯកសាររង: ការបង្កើនប្រសិទ្ធិភាព DOM
ការគ្រប់គ្រង DOM បានសុវត្ថិភាព: ការការពារជំងឺសន្តិសុខ
ការបម្លែងទិន្នន័យ: បម្លែងទិន្នន័យម៉ាស៊ីនបម្រើទៅ UI អ្នកប្រើ

ការតភ្ជាប់ក្នុងឧស្សាហកម្ម: បច្ចេកវិទ្យាទាំងនេះជាគន្លងដើមនៃស្ថាបត្យកម្មផ្នែកមុខទំនើប។ Virtual DOM របស់ React, ប្រព័ន្ធគំរូ Vue និងស្ថាបត្យកម្មធាតុ Angular ទាំងអស់សាងសង់លើគំនិតស្នូលទាំងនេះ។

សំណួរត្រួតពិនិត្យ: តើអ្នកចង់ពង្រីកប្រព័ន្ធនេះដូចម្តេច សម្រាប់ការអាប់ដេតពេលវេលាពិត (ដូចជា ប្រតិបត្តិការថ្មីៗមកបង្ហាញដោយស្វ័យប្រវត្តិ)? សូមគិតពី WebSockets ឬ Server-Sent Events ។

📈 ពេលវេលាចំណេះដឹងការគ្រប់គ្រងទិន្នន័យរបស់អ្នក

timeline
    title គន្លងដំណើរការអភិវឌ្ឍន៍ដោយផ្អែកលើទិន្នន័យ
    
    section ការសង់គ្រឹះ
        API ការតំឡើង និងការប្រលង
            : យល់ដឹងអំពីការទំនាក់ទំនងអតិថិជន-ម៉ាស៊ីនបម្រើ
            : កាន់តើចរសំណើ / ការឆ្លើយតប HTTP
            : រៀនបច្ចេកទេសកែតម្រូវកំហុស
    
    section ជំនាញផ្នែកសម្គាល់អត្តសញ្ញាណ
        រូបមន្តអាស៊ីនខ្សែ
            : សរសេរលំណូត async/await ស្អាត
            : ដោះស្រាយប្រសិទ្ធភាពនៃការសន្យា
            : អនុវត្តខ្ទង់កំហុស
        ការគ្រប់គ្រងសម័យប្រើប្រាស់អ្នកប្រើ
            : បង្កើតរចនាសម្ព័ន្ធស្ថានភាពសកល
            : សាងសង់ការការពាររុករក
            : រចនាបទប្រតិបត្តិការតបស្នាក់អ្នកប្រើ
    
    section ការអភិវឌ្ឍន៍ UI អាចផ្លាស់ប្ដូរបាន
        ការគ្រប់គ្រង DOM ដែលមានសុវត្ថិភាព
            : ការពារការវាយប្រហារជាទម្រង់ XSS
            : ប្រើ textContent ជាជម្រើសលើ innerHTML
            : បង្កើតចំណុចចូលដំណើរការដែលងាយស្រួល
        ប្រព័ន្ធគំរូ
            : សាងសង់រូបមន្ត UI អាចប្រើឡើងវិញ
            : បង្កើនប្រសិទ្ធភាពជាមួយអង្គភាពតូច
            : កំណត់មាតិកាដើម្បីត្រួតពិនិត្យទិន្នន័យធំៗ
    
    section រូបមន្តវិជ្ជាជីវៈ
        កូដរួចរាល់សម្រាប់ផលិតកម្ម
            : អនុវត្តការជួសជុលកំហុសពេញលេញ
            : បន្ដាប់អនុវត្តន៍ការពារសុវត្ថិភាពល្អបំផុត
            : បង្កើតស្ថាបត្យកម្មដែលងាយក្នុងការថែរក្សា
        ស្ដង់ដារបណ្ដាញទំនើប
            : ជំនាញរូបមន្ត Fetch API
            : យល់ដឹងបំពង់ CORS
            : សាងសង់ UI ដែលឆ្លើយតប និងងាយចូលដំណើរការ

🎓 គ្រប់គ្រងការបញ្ចប់អប់រំ: អ្នកបានសម្រេចសង់កម្មវិធីវេបដែលដំណើរការជាមួយទិន្នន័យពេញលេញដោយប្រើលំនាំ JavaScript ទំនើប។ ជំនាញទាំងនេះចំរូងទៅកាន់ហ៊្វ្រេមវើកផ្សេងៗដូចជា React, Vue ឬ Angular ។

🔄 សមត្ថភាពកម្រិតបន្ទាប់:

ត្រៀមខ្លួនសម្រាប់ស្វែងយល់ហ៊្វ្រេមវើកផ្នែកមុខដែលសាងសង់លើគំនិតទាំងនេះ
មានភាពរងចាំក្នុងការអនុវត្តមុខងារពេលវេលាពិតជាមួយ WebSockets
មានសមត្ថភាពក្នុងការសង់កម្មវិធីវេបគ្រប់ទិសដៅដែលអាចដំណើរការបានក្រៅបណ្តាញ
មានមូលដ្ឋានសម្រាប់រៀនទទួលខុសត្រូវគ្រប់គ្រងសភាពស្ថានច្បាស់លាស់ជាងមុន

ការប្រកួតប្រជែង GitHub Copilot Agent 🚀

ប្រើរបៀប Agent ដើម្បីបញ្ចប់ការប្រកួតដូចខាងក្រោម៖

ការពណ៌នា: បង្កើនកម្មវិធីធនាគារដោយអនុវត្តមុខងារស្វែងរក និងចម្រាញ់ប្រតិបត្តិការដែលអនុញ្ញាតឲ្យអ្នកប្រើស្វែងរកប្រតិបត្តិការជាក់លាក់ទៅតាមចន្លោះថ្ងៃខែចុះ ប្រាក់ចំណូលឬចំណាយ ឬពាក្យគន្លឹះនៃការពិពណ៌នា។

ការបញ្ជាទិញ: បង្កើតមុខងារស្វែងរកសម្រាប់កម្មវិធីធនាគារដែលមាន៖ ១) សំណុំបែបបទស្វែងរកជាមួយវាលបញ្ចូលសម្រាប់ចន្លោះថ្ងៃខែ (ពី/ទៅ) ចំនួនទាបបំផុត/ខ្ពស់បំផុត និងពាក្យកំណត់បរិយាយប្រតិបត្តិការ, ២) មុខងារ filterTransactions() ដែលចម្រាញ់អារេ account.transactions ដោយផ្អែកលើលក្ខខណ្ឌស្វែងរក, ៣) ចុះព័ត៌មានមុខងារ updateDashboard() ដើម្បីបង្ហាញលទ្ធផលចម្រាញ់, និង ៤) បន្ថែមប៊ូតុង "Clear Filters" សម្រាប់កំណត់ឡើងវិញទិដ្ឋភាព។ ប្រើវិធីសាស្ត្រ JavaScript ទំនើបលេខ filter() និងដោះស្រាយករណីកែងសម្រាប់លក្ខណៈស្វែងរកទទេ។

សូមស្វែងយល់បន្ថែមអំពី agent mode នៅទីនេះ។

🚀 ការប្រកួតប្រជែង

តើអ្នកត្រៀមខ្លួនរួចដើម្បីយកកម្មវិធីធនាគាររបស់អ្នកទៅកាន់កម្រិតបន្ទាប់? មកយើងបង្កើតវាឱ្យមានរូបរាង និងអារម្មណ៍ជាក់ស្តែង ដែលអ្នកពិតជាចង់ប្រើ។ មានយោបល់ខ្លះសម្រាប់បញ្ចុះប្រយោជន៍ផ្ទាល់ខ្លួន៖

អោយវាស្អាត: បន្ថែមការតុបតែង CSS ដើម្បីបំលែងផ្ទាំងគ្រប់គ្រងដំណើរការរបស់អ្នកទៅជារូបរាងទាក់ទាញមើល។ គិតពីបន្ទាត់ស្អាត, ចន្លោះល្អ និងប្រហែលមានអានីម៉េស្យូនតិចៗ។

អោយវាពាក់មើលបានល្អលើឧបករណ៍គ្រប់ប្រភេទ: សាកល្បងប្រើ media queries ដើម្បីបង្កើត រចនាប័ទ្មបត់បែនបាន ដែលដំណើរការល្អលើទូរស័ព្ទដៃ, កាំម៉េរ៉ា និងកុំព្យូទ័រសុីមា។ អ្នកប្រើរបស់អ្នកនឹងអរគុណអ្នក!

បន្ថែមភាពស្រស់បំព្រង: ពិចារណាកំណត់ពណ៌ប្រតិបត្តិការ (បៃតងសម្រាប់ប្រាក់ចំណូល, ក្រហមសម្រាប់ចំណាយ), បន្ថែមរូបតំណាង ឬបង្កើតផលប៉ះពាល់ម៉ៅស៍ ដែលបង្កើតអារម្មណ៍អន្តរកម្ម។

នេះគឺជារូបភាពឧទាហរណ៍ផ្ទាំងគ្រប់គ្រងដែលបានបំពាក់៖

កុំមានអារម្មណ៍ថាត្រូវតែតាមវាដោយច្បាស់ទេ - ប្រើវាជាការបន្សំបន្ថែមបញ្ចូលខ្លួនមួយនិងបង្កើតរបស់អ្នកឯង!

សំនួរផ្នែកបន្ថែមក្រោយមេរៀន

Post-lecture quiz

ការចាត់តាំង

Refactor and comment your code

ការបដិសេធ៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ខណៈពេលដែលយើងខិតខំរកការត្រឹមត្រូវ សូមយកចិត្តទុកដាក់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬការយល់ច្រឡំ។ ឯកសារដើមនៅក្នុងភាសាដើមគួរត្រូវបានគិតជាផ្នែកចម្បងដែលមានអនុភាព។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមណែនាំឲ្យបកប្រែដោយមនុស្សជំនាញជំនួយវិជ្ជាជីវៈ។ ពួកយើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែមិនត្រឹមត្រូវណាមួយដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះទេ។