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

Unescape Escape

គម្រោងផ្នែកបន្ថែមស្វែងរកកម្មវិធីកម្មវិធីអ្នកលេង Browser ផ្នែក 2: ហៅ API អ្នកប្រើប្រាស់ស្ទុកក្នុងតំបន់

journey
    title ធ្វើដំណើររួមបញ្ចូល និងផ្ទុកទិន្នន័យ API របស់អ្នក
    section មូលដ្ឋាន
      កំណត់យោង DOM: 3: Student
      បន្ថែមអ្នកស្ដាប់ព្រឹត្តិការ: 4: Student
      គ្រប់គ្រងការដាក់ស្នើបែបបទ: 4: Student
    section ការគ្រប់គ្រងទិន្នន័យ
      អនុវត្តផ្ទុកទិន្នន័យក្នុងស្រុក: 4: Student
      សំណុំហៅ API: 5: Student
      គ្រប់គ្រងប្រតិបត្តិការជាអស៊ិនខ័រ: 5: Student
    section បទពិសោធន៍អ្នកប្រើ
      បន្ថែមការដោះស្រាយកំហុស: 5: Student
      បង្កើតស្ថានភាពកំពុងផ្ទុក: 4: Student
      ចៀសវាងប្រតិបត្តិការបន្លំ: 5: Student

វិក្កយបត្រ មុនការប្រកាស

វិក្កយបត្រមុនការប្រកាស

ការណែនាំ

ចាំថាការបន្ថែមកម្មវិធីនៅលើ browser ដែលអ្នកបានចាប់ផ្តើមសំរាប់សាងសង់? ពេលនេះអ្នកមានសំណុំបែបបទដែលមើលទៅស្អាតមួយ ប៉ុន្តែវាពិតប្រាកដហើយថាជា static។ ថ្ងៃនេះយើងនឹងធ្វើឲ្យវាមានជីវិតដោយភ្ជាប់វាទៅនឹងទិន្នន័យពិតប្រាកដ និងផ្តល់ជាការចងចាំ។

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

ការរួមបញ្ចូល API ប្រហែលជាស្វែងយល់ពិបាក ប៉ុន្តែវាលែងត្រឹមជាបង្រៀនកូដរបស់អ្នកធ្វើការទំនាក់ទំនងជាមួយសេវាកម្មផ្សេងទៀត។ មិនថាអ្នកកំពុងយកទិន្នន័យអាកាសធាតុ ផ្ដល់ញាតិ បណ្ដុំនិយមសង្គម ឬព័ត៌មានប្រតិកម្មកាបូនដូចដែលយើងនឹងធ្វើក្នុងថ្ងៃនេះ វាអំពីការបង្កើតការតភ្ជាប់ឌីជីថលទាំងនេះ។ យើងនឹងស្វែងយល់ពីរបៀបដែល browser អាចរក្សាទុកព័ត៌មានផងដែរ - ដូចជាមធ្យមសាស្រ្តដែលបណ្ណាល័យបានប្រើកាតកាតាលក់ដើម្បីចងចាំទីតាំងសៀវភៅ។

នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងមានការបន្ថែម browser វេចខ្ចប់ដែលយកទិន្នន័យពិតប្រាកដ រក្សាទុកចំណង់ចំណូលចិត្តអ្នកប្រើ និងផ្តល់បទពិសោធន៍ល្អឥតខ្ចោះ។ តោះចាប់ផ្តើម!

mindmap
  root((ការពង្រីក δυναμικό))
    DOM Manipulation
      ការជ្រើសរើសធាតុ
      ការគ្រប់គ្រងព្រឹត្តិការណ៍
      ការគ្រប់គ្រងស្ថានភាព
      ការអាប់ដេត UI
    Local Storage
      ការរក្សាទុកទិន្នន័យ
      និងគូទៅគរពាក្យសំខាន់
      ការគ្រប់គ្រងសម័យប្រើប្រាស់
      ចំណូលចិត្តអ្នកប្រើ
    API Integration
      សំណើ HTTP
      ការផ្ទៀងផ្ទាត់
      ការបំបែកទិន្នន័យ
      ការគ្រប់គ្រងកំហុស
    Async Programming
      ព្រមព្រៀង
      Async/Await
      ការចាប់កំហុស
      កូដមិនរារាំង
    User Experience
      ស្ថានភាពកំពុងដំណើរការ
      សារកំហុស
      ការផ្លាស់ប្តូរបែបរលោង
      ការផ្ទៀងផ្ទាត់ទិន្នន័យ

✅ ធ្វើតាមផ្នែកមានលេខនៅក្នុងឯកសារដែលត្រូវ ដើម្បីដឹងកន្លែងដាក់កូដរបស់អ្នក

កំណត់ធាតុដែលត្រូវបញ្ជាពីការបន្ថែម

មុនពេល JavaScript របស់អ្នកអាចធ្វើបច្ចុប្បន្នភាពម៉ឺនុយប្រើប្រាស់ វាត្រូវការយោងទៅធាតុ HTML ជាក់លាក់។ គិតឲ្យដូចជាដំណាប់ទូរទស្សន៍ត្រូវបញ្ចេញភ្នែកទៅផ្កាយជាក់លាក់មួយ - មុនពេល Galileo អាចសិក្សាភពចន្ទនៃ Jupiter បាន គាត់ត្រូវរកនិងផ្ដោតទៅលើ Jupiter ដំបូង។

នៅក្នុងឯកសារ index.js របស់អ្នក យើងនឹងបង្កើតអថេរ const ដែលចាប់យោងទៅធាតុំ្នែខ្សែសំខាន់ៗនៃសំណុំបែបបទ។ វាគឺដូចជារបៀបដែលវិទូសាស្ត្របានស្លាកឧបករណ៍របស់ពួកគេ - មិនត្រូវស្វែងរកលើមន្ទីរពិសោធន៍ទាំងមូល រៀងរាល់ពេលទេ ពួកគេច្បាស់តែអាចចូលដំណើរការយ៉ាងផ្ទាល់។

flowchart LR
    A[កូដ JavaScript] --> B[document.querySelector]
    B --> C[អ្នកជ្រើសរើស CSS]
    C --> D[ធាតុ HTML]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[ធាតុ Form]
    F --> L[វាលបញ្ចូល]
    G --> M[វាលបញ្ចូល]
    H --> N[ធាតុ UI]
    I --> O[ធាតុ UI]
    J --> P[ធាតុ UI]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

// ពត៌មានទម្រង់
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// លទ្ធផល
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

នេះជារឿងដែលកូដនេះធ្វើ៖

ចាប់យក ធាតុសំណុំបែបបទដោយប្រើ document.querySelector() ជាមួយជម្រើស CSS class
បង្កើត យោងទៅអង្គចូលសម្រាប់ឈ្មោះតំបន់ និង API key
បង្កើត ទំនាក់ទំនងជាមួយធាតុបង្ហាញលទ្ធផលទិន្នន័យប្រើប្រាស់កាបូន
កំណត់ ដំណើរការទៅធាតុ UI ដូចជាការបង្ហាញកំពុងផ្ទុក និងសារកំហុស
រក្សាទុក អ្នកយោងនិមួយៗនៅក្នុងអថេរ const ដើម្បីប្រើប្រាស់ងាយស្រួលទាំងអស់កូដ

បន្ថែមអ្នកស្ដាប់ព្រឹត្តិការណ៍

ឥឡូវនេះយើងនឹងធ្វើឲ្យការបន្ថែមរបស់អ្នកឆ្លើយតបទៅនឹងសកម្មភាពអ្នកប្រើប្រាស់។ អ្នកស្ដាប់ព្រឹត្តិការណ៍គឺជារបៀបដែលកូដរបស់អ្នកតាមដានអន្តរកម្មរបស់អ្នកប្រើ។ គិតថាវាដូចជាអ្នកប្រើប្រាស់ទូរស័ព្ទកាលពីដើម - ពួកគេស្តាប់ការហៅចូល និងភ្ជាប់ស៊ីគឺត់ត្រូវតាមពេលដែលមានអ្នកចង់ធ្វើការតភ្ជាប់។

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: បំពេញតំបន់/កូនសោ API
    User->>Form: ចុចបញ្ជូន
    Form->>JavaScript: បញ្ចូលព្រឹត្តិការណ៍បញ្ជូន
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: រក្សាទុកចំណង់ចំណូលចិត្តអ្នកប្រើ
    JavaScript->>API: ដកសត្វខោបំប៉ន
    API->>JavaScript: បញ្ជូនទិន្នន័យត្រឡប់
    JavaScript->>Form: បន្ទាន់សម័យ UI ជាមួយលទ្ធផល
    
    User->>Form: ចុចប៊ូតុងសម្អាត
    Form->>JavaScript: បញ្ចូលព្រឹត្តិការណ៍ចុច
    JavaScript->>Storage: លុបទិន្នន័យដែលបានរក្សាទុក
    JavaScript->>Form: ចាប់ផ្តើមឡើងវិញទៅស្ថានភាពដំបូង

form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();

យល់ដឹងអំពីគំនិតទាំងនេះ៖

ភ្ជាប់ អ្នកស្ដាប់ការបញ្ជូនទៅសំណុំបែបបទ ដែលដំណើរការពេលអ្នកប្រើចុច Enter ឬចុចបញ្ជូន
ភ្ជាប់ អ្នកស្ដាប់ការចុចទៅប៊ូតុងបញ្ចេញសម្រាប់កំណត់ឡើងសំណុំបែបបទម្ដងទៀត
ផ្ញើ វត្ថុព្រឹត្តិការណ៍ (e) ទៅមុខងារគ្រប់គ្រងសម្រាប់ការគ្រប់គ្រងបន្ថែម
ហៅ មុខងារ init() ដោយភ្លាមភ្លោះដើម្បីកំណត់ស្ថានភាពពីដើមនៃការបន្ថែមរបស់អ្នក

✅ ចាំបាច់ចំណាំថា រចនាសម្ព័ន្ធមុខងារ arrow syntax ដែលប្រើនៅទីនេះ ជារបៀប JavaScript នៅសម័យថ្មី ដែលបានស្អាតជាងការប្រើ function ដั้งចាស់ ប៉ុន្តែទាំងពីរនេះដំណើរការល្អដូចគ្នា!

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

ការយល់ដឹងអំពីការគ្រប់គ្រងព្រឹត្តិការណ៍៖ មុនការបន្តទៅការចាប់ផ្តើម សូមប្រាកដថាអ្នកអាច៖

✅ ពន្យល់ពីរបៀបដែល addEventListener ភ្ជាប់សកម្មភាពអ្នកប្រើទៅមុខងារ JavaScript
✅ យល់ទៅហេតុផលដែលយើងផ្ញើវិធានការព្រឹត្តិការណ៍ (e) ទៅមុខងារគ្រប់គ្រង
✅ កំណត់ភាពខុសគ្នារវាង ព្រឹត្តិការណ៍ submit និង click
✅ ពិពណ៌នាពេលដែលមុខងារ init() ដំណើរការ និងហេតុផល

សាកល្បងយ៉ាងរហ័ស: តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកភ្លេច e.preventDefault() នៅពេលបញ្ជូនសំណុំបែបបទ? ចម្លើយ៖ ទំព័រនឹងបញ្ចូលឡើងវិញ បាត់បង់ស្ថានភាព JavaScript ទាំងអស់ និងរំខានបទពិសោធន៍អ្នកប្រើ

បង្កើតមុខងារចាប់ផ្តើម និងកំណត់ឡើងវិញ

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

មុខងារ reset() ផ្តល់ជូនអ្នកប្រើនូវការចាប់ផ្តើមថ្មី - ដូចជាអ្នកសាស្រ្តកំណត់ឡើងវិញឧបករណ៍របស់ពួកគេនៅចន្លោះការសាកល្បង ដើម្បីធានាថាទិន្នន័យស្អាត។

function init() {
	// ពិនិត្យមើលថាតើអ្នកប្រើបានផ្ទុកព័ត៌មាន API ទុកពីមុនជាមុនទេ
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// កំណត់រូបតំណាងបន្ថែមទៅពណ៌បៃតងទូទៅ (ជាជំនួសសម្រាប់មេរៀនកំពុងអនាគត)
	// TODO: អនុវត្តការអាប់ដេតរូបតំណាងនៅមេរៀនក្រោយ

	if (storedApiKey === null || storedRegion === null) {
		// អ្នកប្រើប្រាស់ដំបូង: បង្ហាញទម្រង់តំឡើង
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// អ្នកប្រើប្រាស់មកវិញ: រៀបចំទិន្នន័យដែលបានរក្សាទុកដោយស្វ័យប្រវត្តិ
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// លាងចេញតំបន់ដាក់រក្សាទុកដើម្បីអោយអ្នកប្រើជ្រើសទីតាំងថ្មី
	localStorage.removeItem('regionName');
	// ផ្តើមឡើងវិញដំណើរការបង្កើតឡើងវិញ
	init();
}

បំបែកអ្វីកើតឡើងនៅទីនេះ៖

យក API key និងតំបន់ដែលបានរក្សាទុកពី local storage របស់ browser
ពិនិត្យ ថាតើគឺជាអ្នកប្រើប្រាស់លើកដំបូង (មិនមានគណនេយ្យរក្សាទុកទេ) ឬអ្នកប្រើដែលមានវិលត្រឡប់មកហើយ
បង្ហាញ សំណុំបែបបទរៀបចំសម្រាប់អ្នកប្រើថ្មី និងលាក់ UI ផ្សេងៗ
ទាញយក ទិន្នន័យដែលបានរក្សាទុកស្វ័យប្រវត្តិសម្រាប់អ្នកប្រើវិលត្រឡប់ ហើយបង្ហាញជម្រើសកំណត់ឡើងវិញ
គ្រប់គ្រង ស្ថានភាព UI យោងទៅលើទិន្នន័យដែលមាន

គំនិតសំខាន់អំពី Local Storage:

រក្សាទុក ទិន្នន័យរវាងសម័យ browser (ផ្សេងពី session storage)
រក្សាទុក ទិន្នន័យជាគូសោ និងតម្លៃដោយប្រើ getItem() និង setItem()
ត្រឡប់ មក null ប្រសិនបើមិនមានទិន្នន័យសម្រាប់សោចំណំទេ
ផ្តល់ វិធីស្រាលសម្រាប់ចងចាំចំណង់ចំណូលចិត្ត និងការកំណត់របស់អ្នកប្រើ

💡 យល់ដឹងអំពីឡូខ្យុរីកម្ម Browser: LocalStorage គឺដូចជាការផ្តល់ចងចាំតាំងសម្រាប់ការបន្ថែមរបស់អ្នក។ សូមគិតពីរបៀបដែលបណ្ណាល័យអាឡិចសង់ដ្រិយ៉ាចាស់រក្សាទុកសន្លឹក - ព័ត៌មាននៅតែអាចរកបាន ទោះបីអ្នកសិក្សាចាកចេញហើយត្រឡប់មកវិញក៏ដោយ។

លក្ខណៈសំខាន់ៗ:

រក្សាទុក ទិន្នន័យទោះបូចប់ browser ទៅហើយ

រស់រានមានផាសុខភាព ក្រោយពី restart កុំព្យូទ័រ និង browser បិទ

ផ្តល់ ទំហំផ្ទុកធំសម្រាប់ចំណង់ចំណូលចិត្តអ្នកប្រើ

ផ្តល់ ការចូលដំណើរការយ៉ាងរហ័ស ដោយគ្មានភាពយឺតជាច្រើន

សំគាល់សំខាន់: ការបន្ថែមរបស់អ្នកនៅលើ browser មានផ្ទាំងផ្ទុកក្នុងតំបន់ផ្ទាល់ការផ្តាច់ ខុសពីគេហទំព័រធម្មតា។ វាបង្កើតសុវត្ថិភាព និងចៀសវាងការប្រឆាំងជាមួយគេហទំព័រផ្សេងៗ។

អ្នកអាចមើលទិន្នន័យដែលបានរក្សាទុក ដោយបើកអ្នកអភិវឌ្ឍន៍Browser Tools (F12) និងបើកថ្នាក់ Application ហើយបញ្ជីចុះក្នុងផ្នែក Local Storage។

stateDiagram-v2
    [*] --> CheckStorage: ការពង្រីកចាប់ផ្តើម
    CheckStorage --> FirstTime: ទិន្នន័យមិនមាន
    CheckStorage --> Returning: រកឃើញទិន្នន័យ
    
    FirstTime --> ShowForm: បង្ហាញបែបបទដំឡើង
    ShowForm --> UserInput: អ្នកប្រើបញ្ចូលទិន្នន័យ
    UserInput --> SaveData: រក្សាទុកក្នុងlocalStorage
    SaveData --> FetchAPI: ទទួលទិន្នន័យកាបូណ៍
    
    Returning --> LoadData: អានពីlocalStorage
    LoadData --> FetchAPI: ទទួលទិន្នន័យកាបូណ៍
    
    FetchAPI --> ShowResults: បង្ហាញទិន្នន័យ
    ShowResults --> UserAction: អ្នកប្រើប្រាស់ធ្វើអំពើ
    
    UserAction --> Reset: ចុចប៊ូតុងលុប
    UserAction --> ShowResults: មើលទិន្នន័យ
    
    Reset --> ClearStorage: លុបទិន្នន័យបានរក្សាទុក
    ClearStorage --> FirstTime: ត្រឡប់ទៅដំឡើង

⚠️ ការពិចារណាសុវត្ថិភាព: ក្នុងកម្មវិធីផលិតផល ការរក្សាទុក API key នៅក្នុង LocalStorage អាចបង្កការគ្រោះថ្នាក់សុវត្ថិភាព ព្រោះ JavaScript អាចចូលដំណើរការទិន្នន័យនេះ។ សម្រាប់បំណងរៀន វិធីនេះអាចសមរម្យ ប៉ុន្តែកម្មវិធីពិតប្រាកដគួរប្រើប្រាស់ផ្ទាំងផ្ទុកអាគុយ ~ចច~ រ៉ុស្កររបស់ម៉ាស៊ីនបម្រើកាន់តែសុវត្ថិភាពសម្រាប់គណនេយ្យសំខាន់។

គ្រប់គ្រងការបញ្ជូនសំណុំបែបបទ

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

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

បង្កើតមុខងារដែលចាប់យកព្រឹត្តិការណ៍បញ្ជូនសំណុំបែបបទ និងយកទិន្នន័យអ្នកប្រើ:

function handleSubmit(e) {
	e.preventDefault();
	setUpUser(apiKey.value, region.value);
}

នៅលើនេះ អ្នកបាន៖

ទប់ស្កាត់ លំនាំបញ្ជូនសំណុំបែបបទដែលនឹងបញ្ចូលទំព័រឡើងវិញ
យក តម្លៃសម្រាប់ចូលពី API key និងតំបន់
ផ្ញើ ទិន្នន័យសំណុំបែបបទទៅមុខងារ setUpUser() សម្រាប់ដំណើរការ
រក្សា អាកប្បកិរិយា single-page application ដើម្បីជៀសវាងពិបាកទំព័រឡើងវិញ

✅ ចាំបាច់ចំណាំថា បរិស្ថានសំណុំបែបបទ HTML របស់អ្នកមាន attribute required ដូច្នេះ browser បញ្ជាក់ស្វ័យប្រវត្តិថា អ្នកប្រើត្រូវបញ្ចូលទាំង API key និងតំបន់ មុនមុខងារនេះដំណើរការ។

កំណត់ចំណង់ចំណូលចិត្តអ្នកប្រើ

មុខងារ setUpUser មានភារកិច្ចរក្សាទុកគណនេយ្យអ្នកប្រើ និងបើកការហៅ API ដំបូង។ វាបង្កើតបទពិសោធន៍ផ្លាស់ប្តូរមួយពីការរៀបចំទៅការបង្ហាញលទ្ធផល។

function setUpUser(apiKey, regionName) {
	// រក្សាទុកព័ត៌មានសម្គាល់អ្នកប្រើសម្រាប់ពេលខាងមុខ
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// បន្ទាន់សម័យ UI ដើម្បីបង្ហាញស្ថានភាពកំពុងផ្ទុក
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// ទាញយកទិន្នន័យការប្រើប្រាស់កាបូនជាមួយព័ត៌មានសម្គាល់អ្នកប្រើ
	displayCarbonUsage(apiKey, regionName);
}

ជំហានមួយៗ ដែលកើតឡើងមាន៖

រក្សា API key និងឈ្មោះតំបន់ទៅ local storage សម្រាប់ការប្រើប្រាស់ពេលក្រោយ
បង្ហាញ អិណ្ឌីកាតរអំពីការផ្ទុក ទាក់ទងឲ្យអ្នកប្រើដឹងថាកំពុងយកទិន្នន័យ
សម្អាត សារខុសឆ្គងកាលពីមុនចេញពីការបង្ហាញ
បង្ហាញ ប៊ូតុងបញ្ចេញ ដល់អ្នកប្រើសម្រាប់កំណត់ឡើងវិញ
ចាប់ផ្តើម ហៅ API ដើម្បីយកទិន្នន័យប្រើប្រាស់កាបូនពិតប្រាកដ

មុខងារនេះបង្កើតបទពិសោធជាមួយអ្នកប្រើយ៉ាងរលូន ដោយគ្រប់គ្រងការរក្សាទុកទិន្នន័យ និងកែប្រែ UI ក្នុងសកម្មភាពតែមួយ។

បង្ហាញទិន្នន័យប្រើប្រាស់កាបូន

ឥឡូវនេះយើងនឹងភ្ជាប់ការបន្ថែមរបស់អ្នកទៅទិន្នន័យខាងក្រៅតាមរយៈ API។ នេះបម្លែងការបន្ថែមរបស់អ្នកពីឧបករណ៍ឯកកុំព្យូទ័រតែមួយទៅទៅឲ្យអាចចូលដំណើរការព័ត៌មានពេលវេលាពិតប្រាកដពីអ៊ីនធឺណិតទូទាំងពិភពលោក។

យល់ដឹងអំពី API

API គឺជារបៀបដែលកម្មវិធីផ្សេងៗទំាងឡាយទំនាក់ទំនងគ្នា។ គិតឲ្យដូចជា ប្រព័ន្ធទូរសារដែកដែលភ្ជាប់ទីក្រុងឆ្ងាយក្នុងសតវត្សរ៍ទី 19 - អ្នកប្រើប្រាស់នឹងផ្ញើសំណើទៅស្ថានីយ៏ឆ្ងាយ ហើយទទួលបានចម្លើយជាមួយព័ត៌មានដែលបានស្នើ។ រៀងរាល់ពេលអ្នកពិនិត្យបណ្ដាញសង្គម សុំជំនួយក៏ហៅអ្នកជំនួយសំលេង ឬប្រើកម្មវិធីដឹកជញ្ជូន API គឺជារឿងជួយបំពេញការផ្លាស់ប្តូរទិន្នន័យទាំងនេះ។

flowchart TD
    A[ផ្នែកបន្ថែមរបស់អ្នក] --> B[សំណើ HTTP]
    B --> C[API សញ្ញា CO2]
    C --> D{សំណើត្រឹមត្រូវទេ?}
    D -->|បាទ| E[ស្វែងរកក្នុងមូលដ្ឋានទិន្នន័យ]
    D -->|ទេ| F[ត្រឡប់កំហុស]
    E --> G[ទិន្នន័យកាបូន]
    G --> H[ចម្លើយ JSON]
    H --> I[ផ្នែកបន្ថែមរបស់អ្នក]
    F --> I
    I --> J[ធ្វើបច្ចប្បន្នភាព UI]
    
    subgraph "សំណើ API"
        K[ក្បាល៖ auth-token]
        L[ប៉ារ៉ាម៉ែត្រ៖ countryCode]
        M[វិធីសាស្រ្ត៖ GET]
    end
    
    subgraph "ចម្លើយ API"
        N[កម្រិតកាបូន]
        O[%ប្រេងឥន្ទនៈ]
        P[ពេលវេលា]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

គន្លឹះសំខាន់អំពី REST API:

REST មានន័យថា 'Representational State Transfer'
ប្រើ វិធី HTTP ផ្លូវការដូចជា GET, POST, PUT, DELETE សម្រាប់ទំនាក់ទំនងទិន្នន័យ
ត្រឡប់ ទិន្នន័យក្នុងបែបបទទាន់សម័យ ធម្មតាជា JSON
ផ្តល់ ចំណុចចូលប្រព័ន្ធ URL យោងទៅតាមប្រភេទនៃសំណើ

✅ CO2 Signal API ដែលយើងប្រើផ្ដល់ទិន្នន័យកម្រិតកាបូនពេលវេលាពិតពីបណ្ដាញអគ្គីសនីជុំវិញពិភពលោក។ វាជួយឲ្យអ្នកប្រើយល់ពីឥទ្ធិពលបរិស្ថាននៃការប្រើប្រាស់អគ្គិសនីរបស់ពួកគេ!

💡 យល់ដឹងអំពី JavaScript អស៊ីនខ្រោង: ពាក្យគន្លឹះ async អនុញ្ញាតិឲ្យកូដរបស់អ្នករៀបចំមុខងារច្រើនក្នុងពេលតែមួយ។ ពេលអ្នកស្នើសុំទិន្នន័យពីម៉ាស៊ីនបម្រើ អ្នកមិនចង់ឲ្យការបន្ថែមឈប់ស្ទាត់ទេ - វាត្រូវដូចប្រតិបត្តិការត្រួតព្រួតការព្រួលដំណើរការផ្លូវអាកាស ទាំងអស់ត្រូវបន្ត ដដែលនៅពេលរង់ចាំយន្តហោះមួយឆ្លើយតប។

អត្ថប្រយោជន៍សំខាន់ៗ៖

រក្សា ប្រតិបត្តិការបន្ថែមដោយមិនឲ្យកើតការលម្រាមពេលទិន្នន័យកំពុងផ្ទុក

អនុញ្ញាត កូដផ្សេងៗបន្តធ្វើការប្រតិបត្តិការ ខណៈពេលស្នើសុំបណ្តាញ

ធ្វើឲ្យ កូដអានងាយជាងការប្រើប៉ាគខាល់បែបចាស់ៗ

អនុញ្ញាត ការគ្រប់គ្រងកំហុសដោយប្រកបដោយភាពទាន់សម័យសម្រាប់បញ្ហាបណ្តាញ

នេះជាវីដេអូខ្លីអំពី async៖

🎥 ចុចរូបភាពខាងលើសម្រាប់មើលវីដេអូមួយអំពី async/await។

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

យល់ដឹងការសរសេរโปรแกรม async: មុនវាយចូលមុខងារ API, សូមពិនិត្យថាអ្នកយល់ពី៖

✅ ហេតុអ្វីយើងប្រើ async/await ជំនួសមិនឲ្យបន្ទុកស្ទាត់ពេញលេញនៃការបន្ថែម
✅ របៀបដែល try/catch គ្រប់គ្រងកំហុសបណ្តាញយ៉ាងទូលំទូលាយ
✅ ភាពខុសគ្នារវាងប្រតិបត្តិការសនិទ្ធ និងអស៊ីនខ្រោង
✅ ហេតុអ្វីហៅ API អាចខូចខាត និងរបៀបដោះស្រាយបញ្ហានោះ

ភ្ជាប់ជាមួយពិភពពិត: ពិចារណាឧទាហរណ៍ async មួយចំនួនថ្ងៃប្រចាំ

បញ្ជាទិញម្ហូប: អ្នកមិនរង់ចាំនៅម៉ាស៊ីនផ្ទះបាយទេ - អ្នកទទួលបានបង្កាន់ដៃ និងបន្តសកម្មភាពផ្សេងៗ
ផ្ញើអ៊ីមែល: អនុប្រមាញ់អ៊ីមែលមិនទទួលបន្ទុកពេលផ្ញើ - អ្នកអាចបង្កើតអ៊ីមែលថ្មី
ផ្ទុកគេហទំព័រ: រូបភាពផ្ទុកមួយៗក្នុងពេលដែលអតិថិជនអាចអានអត្ថបទបានជាមុន

ដំណើរការផ្ទៀងផ្ទាត់ API:

sequenceDiagram
    participant Ext as ផ្នែកបន្ថែម
    participant API as សេវា CO2 Signal API
    participant DB as មូលដ្ឋានទិន្នន័យ
    
    Ext->>API: សំណើជាមួយ auth-token
    API->>API: ផ្ទៀងផ្ទាត់ token
    API->>DB: ស្វែងរកទិន្នន័យកាបូន
    DB->>API: ត្រឡប់ទិន្នន័យ
    API->>Ext: ចម្លើយ JSON
    Ext->>Ext: បន្ទាន់សម័យ UI

បង្កើតមុខងារដើម្បីយកនិងបង្ហាញទិន្នន័យប្រើប្រាស់កាបូន:

// វិធីថ្មីសម្រាប់ការទាញយក API (មិនចាំបាច់មានការពឹងផ្អែកខាងក្រៅ)
async function displayCarbonUsage(apiKey, region) {
	try {
		// ទាញយកទិន្នន័យកម្រិតកាបូនពី CO2 Signal API
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// បូកបញ្ចូលប៉ារាម៉ែត្រសម្រាប់តំបន់ជាក់លាក់
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// ពិនិត្យមើលថាការស្នើសុំ API បានជោគជ័យឬទេ
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

		const data = await response.json();
		const carbonData = data.data;

		// គណនាតម្លៃកម្រិតកាបូនដែលបានធ្វើមូលដ្ឋាន
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// អាប់ដេតចំណុចប្រទាក់អ្នកប្រើជាមួយទិន្នន័យដែលបានទាញយក
		loading.style.display = 'none';
		form.style.display = 'none';
		myregion.textContent = region.toUpperCase();
		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
		results.style.display = 'block';

		// TODO: calculateColor(carbonIntensity) - អនុវត្តនៅមេរៀនបន្ទាប់

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// បង្ហាញសារត្រូវការជួយជ្រាបផ្សេងៗសម្រាប់អ្នកប្រើ
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
	}
}

បំបែកអ្វីកើតឡើងនៅទីនេះ៖

ប្រើ API fetch() សម័យថ្មី ជំនួសបណ្ណាល័យខាងក្រៅដូចជា Axios សម្រាប់កូដស្អាត មិនពឹងផ្អែកខ្លាំង
អនុវត្ត ការត្រួតពិនិត្យកំហុសត្រឹមត្រូវ ជាមួយ response.ok ដើម្បីចាប់កំហុស API ជាមុន
គ្រប់គ្រង ប្រតិបត្តិការ async ជាមួយ async/await ឲ្យមានលំហូរស្រាលអានបាន
ផ្ទៀងផ្ទាត់ ជាមួយ CO2 Signal API ដោយប្រើក្បាច់ auth-token ក្នុង header
បកស្រាយ ទិន្នន័យ JSON និងយកព័ត៌មានកម្រិតកាបូន
ធ្វើបច្ចុប្បន្នភាព ធាតុ UI ជាច្រើន ដោយទិន្នន័យបរិស្ថានជាក់លាក់
ផ្តល់ សារកំហុសមិត្តភាពពេល API មានបញ្ហា

គំនិត JavaScript សម័យថ្មីដែលបង្ហាញនៅទីនេះ៖

តួអក្សរទម្រង់គំរូ (template literals) ជាមួយ ${} សម្រាប់បង្កើតខ្សែអត្ថបទបានសំលាប់
គ្រប់គ្រងកំហុស ជាមួយ try/catch សម្រាប់កម្មវិធីមានភាពប្រសើរ
រចនាបថ async/await ដើម្បីគ្រប់គ្រងសំណើបណ្តាញយ៉ាងល្អ
លាក់ទិន្នន័យ (Object destructuring) ដើម្បីយកទិន្នន័យជាក់លាក់ពីចម្លើយ API
ចងខ្សែវិធីសាស្រ្ត (method chaining) សម្រាប់ចាត់ការពហុ DOM ក្នុងបន្ទាត់តែមួយ

✅ មុខងារនេះបង្ហាញចំនួនមូលដ្ឋានអភិវឌ្ឍន៍បណ្តាញ - ទំនាក់ទំនងជាមួយម៉ាស៊ីនបម្រើ ខ្ទង់បញ្ចូល តម្លើង UI និងគ្រប់គ្រងកំហុស។ នេះគឺជាជំនាញមូលដ្ឋានដែលអ្នកអភិវឌ្ឍន៍វិជ្ជាជីវៈប្រើប្រាស់ជាប្រចាំ។

flowchart TD
    A[ចាប់ផ្ដើមហៅ API] --> B[ទាញយកសំណើ]
    B --> C{បណ្ដាញជោគជ័យ?}
    C -->|No| D[កំហុសបណ្ដាញ]
    C -->|Yes| E{ចម្លើយល្អមែនទេ?}
    E -->|No| F[កំហុស API]
    E -->|Yes| G[បកស្រាយ JSON]
    G --> H{ទិន្នន័យត្រឹមត្រូវ?}
    H -->|No| I[កំហុសទិន្នន័យ]
    H -->|Yes| J[បន្ទាន់បន្ថែម UI]
    
    D --> K[បង្ហាញសារកំហុស]
    F --> K
    I --> K
    J --> L[លៃលប់ការផ្ទុក]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

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

✅ របៀបដែលយោង DOM អនុញ្ញាតឲ្យ JavaScript គ្រប់គ្រង UI
✅ ហេតុអ្វី local storage បង្កើតចងចាំចន្លោះសម័យ browser
✅ របៀប async/await ធ្វើឲ្យហៅ API ដោយមិនធ្វើឲ្យ extension ឈប់
✅ អ្វីកើតឡើងពេលហៅ API ខូច និងរបៀបគ្រប់គ្រងកំហុស
✅ ហេតុអ្វីបទពិសោធ៍អ្នកប្រើបង្កើតមានស្ថានភាពផ្ទុក និងសារកំហុស

🎉 អ្វីដែលអ្នកបានសម្រេច៖ អ្នកបានបង្កើត browser extension ដែល៖

ភ្ជាប់ ទៅអ៊ីនធឺណិត និងយកទិន្នន័យបរិស្ថានពេលវេលាចម្បង
រក្សា ការកំណត់អ្នកប្រើរវាង session
គ្រប់គ្រង កំហុសយ៉ាងទូលំទូលាយ ជៀសវាងការបង្ហោះកំហុស
ផ្តល់ បទពិសោធន៍ប្រើប្រាស់ល្អ និងមានប្រសិទ្ធភាពវិជ្ជាជីវៈ

សាកល្បងការងាររបស់អ្នកដោយរត់ npm run build ហើយធ្វើការបន្តនូវការបន្ថែមនៅក្នុង browser។ អ្នកបានមានកម្មវិធីតាមដានបម្រែបម្រួលបរិស្ថានកាបូនហើយ។ មេរៀនបន្ទាប់នឹងបន្ថែមមុខងាររូបតំណាងឌីណាមិចដើម្បីបញ្ចប់ការបន្ថែម។

ចលនាជំនួញ GitHub Copilot 🚀

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

ការពិពណ៍នា: ពង្រឹងការបន្ថែម browser ដោយបន្ថែមការកែប្រែគ្រប់គ្រងកំហុស និងមុខងារបទពិសោធអ្នកប្រើ។ ការប្រកួតនេះនឹងជួយអ្នកហ្វឹកហាត់ការប្រើ API, local storage និងការគ្រប់គ្រង DOM ដោយប្រើរចនាបថ JavaScript សម័យថ្មី។ Prompt: បង្កើតកំណែដោយការកែលម្អមុខងារ displayCarbonUsage ដែលរួមមាន៖ 1) មេកានីស្សមួយសម្រាប់ការបញ្ចាប់ម្តងទៀតនៃការហៅ API ដែលបរាជ័យជាមួយការបន្ថយតម្លៃផ្សេងៗជាបណ្ដោយ, 2) ការ_VALIDATE_INPUT សម្រាប់កូដតំបន់មុនពេលធ្វើការហៅ API, 3) អកម្មវិធីបង្ហាញកំពុងផ្ទុកជាមួយអ្នកបង្ហាញវឌ្ឍនភាព, 4) ការផ្ទុកផលប័ត្រមានរបស់ API ក្នុង localStorage ជាមួយរយៈពេលផុតកំណត់ (ផ្ទុកសម្រាប់ ៣០ នាទី), និង 5) មុខងារបង្ហាញទិន្នន័យបុរាណពីការហៅ API មុនៗ។ ក៏ដូចជាការបន្ថែមការអត្រាបញ្ចូល JSDoc ស្ទីល TypeScript សម្រាប់ឯកសារឧត្តមគុណនៃប៉ារ៉ាម៉ែត្រ និងប្រភេទត្រឡប់។

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

🚀 បញ្ហាប្រកួត

ពង្រីកការយល់ដឹងរបស់អ្នកអំពី API ដោយស្វែងរកអំពី API ជាច្រើននៅលើកម្មវិធីរុករកសម្រាប់ការអភិវឌ្ឍវេប។ ជ្រើសរើសមួយ API នៅក្នុងចំណោមទាំងនេះហើយបង្កើតការបង្ហាញតូចមួយ៖

Geolocation API - ទទួលបានទីតាំងបច្ចុប្បន្នរបស់អ្នកប្រើ
Notification API - ផ្ញើការជូនដំណឹងតាមផ្ទាំងបង្ហាញ
HTML Drag and Drop API - បង្កើតចំណុចទាញដាក់ទន្សាយអន្តរកម្ម
Web Storage API - ការបច្ចេកទេសផ្ទុកក្នុងមូលដ្ឋានបន្ថែម
Fetch API - ជំនួសសម័យទំនើបសម្រាប់ XMLHttpRequest

សំណួរស្រាវជ្រាវដែលអាចពិចារណា៖

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

បន្ទាប់ពីការស្រាវជ្រាវរបស់អ្នក ស្វែងយល់មើលលក្ខណៈដែលធ្វើឲ្យ API មួយស្រួលសម្រាប់អ្នកអភិវឌ្ឍន៍ និងទុកចិត្តបាន។

ការសំរេចចិត្តបន្ទាប់ក្រោយមេរៀន

Post-lecture quiz

ការត្រួតពិនិត្យ និងសិក្សាឯកជន

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

⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីក្រោយ

បើក DevTools តំណ Application និងស្វែងរក localStorage នៅលើគេហទំព័រណាមួយ
បង្កើតបែបបទ HTML សាមញ្ញមួយ និងសាកល្បងការត្រួតពិនិត្យបែបបទក្នុងកម្មវិធីរុករក
ព្យាយាមផ្ទុក និងយកទិន្នន័យប្រើ localStorage នៅក្នុងកុងសូលកម្មវិធីរុករក
ពិនិត្យទិន្នន័យបែបបទដែលត្រូវបានដាក់បញ្ជូនប្រើផ្នែក Network

🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងម៉ោងនេះ

បញ្ចប់សំណួរបន្ទាប់មេរៀន និងយល់ពីមូលដ្ឋានកំណត់ទ្រង់ទ្រាយបែបបទ
បង្កើតវេចខ្ចប់ម៉ាស៊ីនរោទិ៍វេបដែលរក្សាទុកចំណូលចិត្តអ្នកប្រើ
អនុវត្តការត្រួតពិនិត្យបែបបទផ្នែកមុខជាមួយសារកំហុសដែលមានប្រយោជន៍
ហាត់ប្រាណប្រើ chrome.storage API សម្រាប់ការចងចាំទិន្នន័យវេចខ្ចប់
បង្កើតចំណុចប្រទាក់អ្នកប្រើដែលឆ្លើយតបនឹងការកំណត់ដែលបានរក្សាទុក

📅 ការអនុវត្តរយៈពេល1សប្តាហ៍របស់អ្នក

បញ្ចប់វេចខ្ចប់ម៉ាស៊ីនរោទិ៍វេបពេញលេញជាមួយមុខងារបែបបទ
ជំនាញបញ្ចាំងបញ្ជីមូលដ្ឋានៈ local, sync, និង session storage
អនុវត្តមុខងារបែបបទកម្រិតខ្ពស់ដូចជា autocomplete និង validation
បន្ថែមមុខងារនាំចូល/នាំចេញសម្រាប់ទិន្នន័យអ្នកប្រើ
សាកល្បងវេចខ្ចប់របស់អ្នកយ៉ាងល្អលើកម្មវិធីរុករកនានា
បំពេញភាពរួមគ្នារបស់វេចខ្ចប់ និងការដោះស្រាយកំហុសសម្រាប់អ្នកប្រើ

🌟 ការរីកចម្រើន API វេបរយៈពេលមួយខែរបស់អ្នក

បង្កើតកម្មវិធីស្មុគស្មាញប្រើប្រាស់ API រក្សាទុកនៅលើកម្មវិធីរុករកជាច្រើន
សិក្សាទាំងការអភិវឌ្ឍផ្លូវ offline និងការsync ទិន្នន័យ
ចូលរួមលើគំរោងកូដបើកចំហសម្រាប់ការចងចាំទិន្នន័យ
ជំនាញអភិវឌ្ឍន៍ដែលផ្តោតលើភាពឯកជន និងការអនុវត្តគោលការណ៍ GDPR
បង្កើតបណ្ណាល័យដែលអាចប្រើឡើងវិញសម្រាប់ការគ្រប់គ្រងបែបបទ និងទិន្នន័យ
ចែករំលែកចំណេះដឹងអំពី API និងការអភិវឌ្ឍវេចខ្ចប់ម៉ាស៊ីនរោទិ៍វេប

🎯 សៀវភៅម៉ាស្ទ័រអភិវឌ្ឍវេចខ្ចប់របស់អ្នក

timeline
    title ការបញ្ចូល API និងការវិវឌ្ឍន៍ការរៀនផ្ទុកទិន្នន័យ
    
    section មូលដ្ឋាន DOM (15 នាទី)
        ឯកសារធាតុ៖ ការបង្កើត querySelector
                          : ការរៀបចំអ្នកស្តាប់ព្រឹត្តិការណ៍
                          : មូលដ្ឋានគ្រប់គ្រងស្ថានភាព
        
    section ការផ្ទុកទិន្នន័យក្នុងតំបន់ (20 នាទី)
        ការរក្សាទុកទិន្នន័យ៖ ការផ្ទុកតម្លៃគន្លឹះ
                        : ការគ្រប់គ្រងសម័យ
                        : ការគ្រប់គ្រងចំណូលចិត្តអ្នកប្រើ
                        : ប្រើឧបករណ៍ពិនិត្យការផ្ទុក
        
    section ការដំណើរការល<f>ៃករាង (25 នាទី)
        បញ្ចូលអ្នកប្រើ៖ ការត្រួតពិនិត្យសំណុំបែបបទ
                  : ការការពារព្រឹត្តិការណ៍
                  : ការដកស្រង់ទិន្នន័យ
                  : ការផ្លាស់ប្តូរស្ថានភាព UI
        
    section ការបញ្ចូល API (35 នាទី)
        ការទំនាក់ទំនងពីក្រៅ៖ សំណើ HTTP
                              : លំនាំស្នាក់ប្រើប្រាស់
                              : ការបែងចែកទិន្នន័យ JSON
                              : ការដំណើរការឆ្លើយតប
        
    section ការសរសេរកម្មវិធីអាស៊ីញ (40 នាទី)
        JavaScript ថ្មី៖ ការដោះស្រាយ Promise
                         : លំនាំ Async/await
                         : ការគ្រប់គ្រងកំហុស
                         : ប្រតិបត្តិការមិនរំខាន
        
    section ការដោះស្រាយកំហុស (30 នាទី)
        កម្មវិធីមានភាពរឹងមាំ៖ ប្លុក try/catch
                           : សារសំរាប់អ្នកប្រើដែលងាយយល់
                           : ការធ្លាក់ចុះយ៉ាងសមរម្យ
                           : បច្ចេកទេសកែតម្រូវកំហុស
        
    section លំនាំខ្ពស់ (1 សប្តាហ៍)
        ការអភិវឌ្ឍន៍វិជ្ជាជីវៈ៖ យុទ្ធសាស្រ្តចាប់ទុក
                                : ការកំណត់អត្រា
                                : មេកានិចការព្យាយាមម្តងទៀត
                                : ការបង្កើនប្រសិទ្ធិភាព
        
    section ជំនាញផលិតកម្ម (1 ខែ)
        លក្ខណៈពិសេសសហគ្រាស៖ ការអនុវត្តន៍សុវត្ថិភាពល្អបំផុត
                           : កំណែ API
                           : ការត្រួតពិនិត្យ និងកំណត់ហេតុ
                           : ស្ថាបត្យកម្មអាចពង្រីកបាន

🛠️ សេចក្តីសង្ខេបឧបករណ៍អភិវឌ្ឍន៍ពេញមូលរបស់អ្នក

បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកមាន៖

ការជំនាញ DOM: ការបញ្ជាក់ត្រឹមត្រូវនិងការបម្លែងធាតុ
ជំនាញផ្ទុកទិន្នន័យ: ការគ្រប់គ្រងទិន្នន័យជារៀងរាល់លំដាប់ដោយប្រើ localStorage
ការរួមបញ្ចូល API: ការទាញទិន្នន័យពេលវេលាពិត និងការផ្ទៀងផ្ទាត់身份
កម្មវិធីសរសេរមិនរាំងខ្ទប់: ប្រតិបត្តិការពេលពេលមាន async/await និង JavaScript សម័យថ្មី
ការដោះស្រាយកំហុស: កម្មវិធីរឹងមាំដែលដោះស្រាយបរាជ័យយ៉ាងស្ទាត់ជំនាញ
បទពិសោធន៍អ្នកប្រើ: រដ្ឋភាពផ្ទុក ការត្រួតពិនិត្យ និងអន្តរកម្មរលូន
គំរូសម័យថ្មី: fetch API, async/await, និងមុខងារ ES6+

ជំនាញវិជ្ជាជីវះស្រាល: អ្នកបានអនុវត្តបែបបទសម្រាប់៖

កម្មវិធីវេប: កម្មវិធីទំព័រតែមួយជាមួយបណ្តាញទិន្នន័យខាងក្រៅ
អភិវឌ្ឍកម្មវិធីចល័ត: កម្មវិធីដឹកនាំ API ជាមួយមុខងារបើកភ្ជាប់អ៊ិនធើណិត
កម្មវិធីផ្ទៃតុ: កម្មវិធី Electron ជាមួយការចងចាំថតទុក
ប្រព័ន្ធសហគ្រាស: ការផ្ទៀងផ្ទាត់身份 ការផ្ទុក និងការដោះស្រាយកំហុស
ប្រព័ន្ធសម័យថ្មី: ការគ្រប់គ្រងទិន្នន័យ React/Vue/Angular

ជំហានបន្ទាប់: អ្នកត្រៀមខ្លួនរួចហើយសម្រាប់សិក្សាបន្ថែមអំពីគោលនយោបាយកែមិត្តភាព, ការតភ្ជាប់ WebSocket ពេលជាក់ស្តែង, ឬការគ្រប់គ្រងស្ថានភាពស្មុគស្មាញ!

ការងារ

Adopt an API

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

README.md Unescape Escape

គម្រោងផ្នែកបន្ថែមស្វែងរកកម្មវិធីកម្មវិធីអ្នកលេង Browser ផ្នែក 2: ហៅ API អ្នកប្រើប្រាស់ស្ទុកក្នុងតំបន់

វិក្កយបត្រ មុនការប្រកាស

ការណែនាំ

កំណត់ធាតុដែលត្រូវបញ្ជាពីការបន្ថែម

បន្ថែមអ្នកស្ដាប់ព្រឹត្តិការណ៍

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

បង្កើតមុខងារចាប់ផ្តើម និងកំណត់ឡើងវិញ

គ្រប់គ្រងការបញ្ជូនសំណុំបែបបទ

កំណត់ចំណង់ចំណូលចិត្តអ្នកប្រើ

បង្ហាញទិន្នន័យប្រើប្រាស់កាបូន

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

🔄 ការត្រួតពិនិត្យផ្នែកផ្ទៀងផ្ទាត់

ចលនាជំនួញ GitHub Copilot 🚀

🚀 បញ្ហាប្រកួត

ការសំរេចចិត្តបន្ទាប់ក្រោយមេរៀន

ការត្រួតពិនិត្យ និងសិក្សាឯកជន

⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីក្រោយ

🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងម៉ោងនេះ

📅 ការអនុវត្តរយៈពេល1សប្តាហ៍របស់អ្នក

🌟 ការរីកចម្រើន API វេបរយៈពេលមួយខែរបស់អ្នក

🎯 សៀវភៅម៉ាស្ទ័រអភិវឌ្ឍវេចខ្ចប់របស់អ្នក

🛠️ សេចក្តីសង្ខេបឧបករណ៍អភិវឌ្ឍន៍ពេញមូលរបស់អ្នក

ការងារ

README.md

Unescape Escape