# គម្រោងផ្នែកបន្ថែមកម្មវិធីរុករកវែប ផ្នែក ១៖ ​អំពីកម្មវិធីរុករកវែបទាំងអស់

```mermaid
journey
    title ធ្វើដំណើរការអភិវឌ្ឍន៍ការពង្រីកកម្មវិធីរុករករបស់អ្នក
    section មូលដ្ឋាន
      បញ្ជាក់អំពីកម្មវិធីរុករក: 3: Student
      រៀនប្រភេទការពង្រីក: 4: Student
      ដំឡើងការអភិវឌ្ឍន៍: 4: Student
    section អភិវឌ្ឍន៍
      បង្កើតចំណុចចាប់ភាគ: 4: Student
      បន្ថែមមុខងារ: 5: Student
      គ្រប់គ្រងទិន្នន័យ: 5: Student
    section សមាសធាតុរួមបញ្ចូល
      សាកល្បងក្នុងកម្មវិធីរុករក: 5: Student
      កែបញ្ហា: 4: Student
      ដើម្បីផ្លាស់ប្តូរបទពិសោធន៍: 5: Student
```
![Browser sketchnote](../../../../translated_images/km/browser.60317c9be8b7f84a.webp)
> សេចក្ដីសង្ខេបដោយ [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)

## សំណួរជំនាញមុនមេរៀន

[សំណួរជំនាញមុនមេរៀន](https://ff-quizzes.netlify.app/web/quiz/23)

### គំនិតទាំងមូល

ផ្នែកបន្ថែមកម្មវិធីរុករកវែបគឺជាកម្មវិធីតូចៗដែលបន្ថែមបទពិសោធន៍រុករកវែបរបស់អ្នក។ ដូចដែលចក្ខុវិស័យដើមរបស់ Tim Berners-Lee ពីវែបអន្តរកម្ម ផ្នែកបន្ថែមពង្រីកសមត្ថភាពរបស់កម្មវិធីរុករកវែបឲ្យលើសការមើលឯកសារដូចធម្មតា។ ចាប់ពីកម្មវិធីគ្រប់គ្រងពាក្យសម្ងាត់ដែលរក្សាបរិយាបញ្ហាប្រាក់គណនីរបស់អ្នកឲ្យមានសុវត្ថិភាព ទៅដល់កម្មវិធីជ្រើសពណ៌ដែលជួយឲ្យអ្នករចនារកពណ៌ល្អឥតខ្ចោះ ផ្នែកបន្ថែមដោះស្រាយបញ្ហារុករកប្រចាំថ្ងៃ។

មុនពេលយើងបង្កើតផ្នែកបន្ថែមដំបូងរបស់អ្នក មកយល់ដឹងពីរបៀបទំនាក់ទំនងរបស់កម្មវិធីរុករកវែប។ ដូចដែល Alexander Graham Bell ត្រូវការយល់ដឹងពីការផ្ញើសំឡេងមុនបង្កើតទូរស័ព្ទ ការយល់ដឹងពីមូលដ្ឋានកម្មវិធីរុករកវែបនឹងជួយអ្នកបង្កើតផ្នែកបន្ថែមឲ្យរួមបញ្ចូលបានយ៉ាងរលូនជាមួយប្រព័ន្ធកម្មវិធីរុករកផ្សេងៗ។

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

```mermaid
mindmap
  root((រចនាសម្ព័ន្ធកម្មវិធីរុករក))
    Core Components
      Rendering Engine
      JavaScript Engine
      Network Stack
      Storage APIs
    User Interface
      បន្ទាត់អាសយដ្ឋាន
      ការគ្រប់គ្រងតាប
      សៀវភៅកត់ចំណាំ
      រូបតំណាងបន្ថែម
    Extension System
      Manifest Files
      Content Scripts
      Background Pages
      Popup Windows
    Security Model
      Same-Origin Policy
      Permissions API
      Content Security
      Isolated Worlds
    Development Tools
      DevTools Integration
      Debug Console
      Performance Monitor
      Extension Inspector
```
## យល់ដឹងអំពីកម្មវិធីរុករកវែប

កម្មវិធីរុករកវែបគឺជាឧបករណ៍បកប្រែឯកសារដ៏ស្មុគស្មាញមួយ។ ពេលអ្នកវាយ "google.com" ទៅក្នុងរបារអាសយដ្ឋាន កម្មវិធីរុករកនោះនឹងអនុវត្តន៍វិធីសាស្រ្តស្មុគស្មាញមួយចំនួន - ស្នើសុំទទួលបានមាតិកាពីម៉ាស៊ីនបម្រើទូទាំងពិភពលោក រួចបកប្រែ និងបង្ហាញកូដនោះទៅជាទំព័រវែបអន្តរកម្មដែលអ្នកឃើញ។

ដំណើរការនេះស្រដៀងនឹងរបៀបដែលកម្មវិធីរុករកវែបដំបូង WorldWideWeb ត្រូវបាន Tim Berners-Lee រចនាឡើងឆ្នាំ 1990 ដើម្បីធ្វើឲ្យឯកសារដែលមានតំណភ្ជាប់អាចចូលប្រើបានសម្រាប់មនុស្សគ្រប់រូប។

✅ **ប្រវត្តិសាស្ត្រខ្លះៗ**៖ កម្មវិធីរុករកដំបូងមានឈ្មោះថា 'WorldWideWeb' និងត្រូវបាន Sir Timothy Berners-Lee បង្កើតឡើងនៅឆ្នាំ 1990។

![early browsers](../../../../translated_images/km/earlybrowsers.d984b711cdf3a42d.webp)
> កម្មវិធីរុករកដំបូងខ្លះៗ តាមរយៈ [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)

### របៀបទំលៃកម្មវិធីរុករកដោះស្រាយមាតិកាវែប

ដំណើរការរវាងការវាយ URL និងការមើលទំព័រវែបមានជំហ៊ានត្រូវបានសម្របសម្រួលជាច្រើនសកម្មភាពដែលកើតមានជាទីបំផុតក្នុងរយៈពេលខ្លី៖

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Extension
    participant DNS
    participant Server
    
    User->>Browser: ការ​បញ្ចូល URL និងចុច Enter
    Browser->>Extension: ចាប់ផ្តើមព្រឹត្តិការណ៍ beforeRequest
    Extension->>Extension: ពិនិត្យមើលថា URL ត្រូវការការកែប្រែទេ
    Browser->>DNS: ស្វែងរកអាសយដ្ឋាន IP នៃម៉ាស៊ីនបម្រើ
    DNS->>Browser: បញ្ជូនអាសយដ្ឋាន IP មកវិញ
    Browser->>Server: ស្នើសុំមាតិកាទំព័របណ្ដាញ
    Server->>Browser: បញ្ចូន HTML, CSS និង JavaScript
    Browser->>Extension: ចាប់ផ្តើមព្រឹត្តិការណ៍ beforeResponse
    Extension->>Extension: កែប្រែមាតិកា ប្រសិនបើត្រូវការ
    Browser->>User: បង្ហាញទំព័របណ្ដាញពេញលេញ
    Extension->>User: បង្ហាញការអាប់ដેટ UI នៃការពង្រីក
```
**អ្វីដែលដំណើរការនេះបានធ្វើ៖** 
- **បកប្រែ** URL ដែលមនុស្សអាចអានបានទៅជាអាសយដ្ឋាន IP របស់ម៉ាស៊ីនបម្រើតាមរយៈការស្វែងរក DNS  
- **បង្កើត**ការតភ្ជាប់សុវត្ថិភាពជាមួយម៉ាស៊ីនបម្រើវែបដោយប្រើប្រព័ន្ធ HTTP ឬ HTTPS  
- **ស្នើសុំ**មាតិកាទំព័រវែបជាក់លាក់ពីម៉ាស៊ីនបម្រើ  
- **ទទួលបាន**អត្ថបទ HTML, ទម្រង់ CSS និងកូដ JavaScript ពីម៉ាស៊ីនបម្រើ  
- **បង្ហាញ**មាតិការបស់ទំព័រវែបអន្តរកម្មដែលអ្នកបានគិតឃើញ

### លក្ខណៈសម្បត្តិមូលដ្ឋាននៃកម្មវិធីរុករក

កម្មវិធីរុករកសម័យទំនើបផ្តល់ជូនលក្ខណៈសម្បត្តិជាច្រើនដែលអ្នកបង្កើតផ្នែកបន្ថែមអាចប្រើប្រាស់បាន៖

| លក្ខណៈសម្បត្តិ | គោលបំណង | ឱកាសរបស់ផ្នែកបន្ថែម |
|---------|---------|------------------------|
| **ម៉ាស៊ីនបង្ហាញ** | បង្ហាញ HTML, CSS និង JavaScript | ផ្លាស់ប្ដូរមាតិកា បញ្ចូលស្ទីល |
| **ម៉ាស៊ីន JavaScript** | ប្រតិបត្តិការ JavaScript | កូដផ្ទាល់ខ្លួន ការបន្តផ្តល់ API |
| **ផ្ទុកទិន្នន័យក្នុងមូលដ្ឋានមូលដ្ឋាន** | រក្សាទិន្នន័យក្នុងកុំព្យូទ័រ | ចំណូលចិត្តអ្នកប្រើ ទិន្នន័យដែលកែច្នៃរួច |
| **ប្រព័ន្ធបណ្ដាញ** | គ្រប់គ្រងសំណើវែប | តាមដានសំណើ វិភាគទិន្នន័យ |
| **ម៉ូឌែលសុវត្ថិភាព** |ការពារអ្នកប្រើពីមាតិកាអាក្រក់ | ការត្រង់មាតិកា ការកែលម្អសុវត្ថិភាព |

**ការយល់ដឹងលក្ខណៈសម្បត្តិទាំងនេះជួយអ្នក៖**  
- **កំណត់**កន្លែងដែលផ្នែកបន្ថែមអាចបន្ថែមតម្លៃបានច្រើនបំផុត  
- **ជ្រើសរើស** API កម្មវិធីរុករកដែលត្រូវនឹងមុខងារផ្នែកបន្ថែមរបស់អ្នក  
- **រចនា**ផ្នែកបន្ថែមដែលដំណើរការយ៉ាងមានប្រសិទ្ធភាពជាមួយប្រព័ន្ធកម្មវិធីរុករក  
- **ធានា**ផ្នែកបន្ថែមរបស់អ្នកអនុវត្តការពារសុវត្ថិភាពល្អបំផុត

### ការពិចារណាក្នុងការអភិវឌ្ឍផ្នែកបន្ថែមសម្រាប់កម្មវិធីរុករកជាច្រើន

កម្មវិធីរុករកផ្សេងគ្នាជា​ផ្នែកមូលដ្ឋានអនុវត្តស្ដង់ដារខុសគ្នាក្នុងរបៀបតិចតួច ដូចជាប្រភេទភាសាប្រតិបត្តិការ ផ្តោតដល់ការដោះស្រាយអាល់ហ្គូរិធម៍ដូចគ្នា ខណៈដែល Chrome, Firefox និង Safari មានលក្ខណៈពិសេសខុសគ្នាដែលអ្នកអភិវឌ្ឍត្រូវយកចិត្តទុកដាក់ក្នុងដំណើរការអភិវឌ្ឍផ្នែកបន្ថែម។

> 💡 **គន្លឹះជំនួយ។** ប្រើ [caniuse.com](https://www.caniuse.com) ដើម្បីពិនិត្យថាតើបច្ចេកវិទ្យាវែបណាមួយត្រូវបានគាំទ្រនៅលើកម្មវិធីរុករកផ្សេងៗឬទេ។ វាមានប្រយោជន៍ខ្លាំងនៅពេលគ្រប់គ្រងលក្ខណៈសម្បត្តិផ្នែកបន្ថែមរបស់អ្នក!

**ចំណុចគន្លឹះសម្រាប់ការអភិវឌ្ឍផ្នែកបន្ថែម៖**  
- **សាកល្បង**ផ្នែកបន្ថែមរបស់អ្នក ថ្នាក់លើក Chrome, Firefox និង Edge  
- **ប្ដូរការប្រើប្រាស់** API ផ្នែកបន្ថែម និងទម្រង់ manifest ផ្សេងគ្នានៅកម្មវិធីរុករកផ្សេងៗ  
- **ដោះស្រាយ**លក្ខណៈការអនុវត្តន៍ និងកំណត់ចំណាំបែងចែក  
- **ផ្តល់**មធ្យោបាយជំនួយសម្រាប់លក្ខណៈពិសេសជាក់លាក់របស់កម្មវិធីរុករកដែលប្រហែលជាមានកំណត់

✅ **ព័ត៌មានវិភាគប្រាក់ចំណេញ**៖ អ្នកអាចកំណត់កម្មវិធីរុករកដែលអ្នកប្រើពេញចិត្តតាមរយៈការដំឡើងកម្មវិធីវិភាគក្នុងគម្រោងអភិវឌ្ឍន៍វែបរបស់អ្នក។ ទិន្នន័យនេះជួយអ្នកអាទិភាពកម្មវិធីរុករកដែលគួរគាំទ្រជាលើកដំបូង។

## យល់ដឹងពីផ្នែកបន្ថែមកម្មវិធីរុករក

ផ្នែកបន្ថែមកម្មវិធីរុករកដោះស្រាយបញ្ហាធម្មតាក្នុងការរុករកវែបដោយបន្ថែមមុខងារដោយផ្ទាល់ទៅចំណុចអ្នកប្រើកម្មវិធីរុករក។ វាមិនចាំបាច់ប្រើកម្មវិធីផ្សេងទៀតឬវីធីសាស្រ្តស្មុគស្មាញ នោះទេ ផ្នែកបន្ថែមផ្តល់នូវការចូលដំណើរការឧបករណ៍ និងមុខងារបានភ្លាមៗ។

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

```mermaid
quadrantChart
    title ប្រភេទផ្នែកបន្ថែមកម្មវិធីរុករក
    x-axis សាមញ្ញ --> ស្មុគស្មាញ
    y-axis ការប្រើប្រាស់ផ្ទាល់ខ្លួន --> ឧបករណ៍វិជ្ជាជីវៈ
    quadrant-1 ឧបករណ៍អភិវឌ្ឍន៍
    quadrant-2 ដំណោះស្រាយសម្រាប់សហគ្រាស
    quadrant-3 ឧបករណ៍ផ្ទាល់ខ្លួន
    quadrant-4 កម្មវិធីការផលិត
    
    Ad Blockers: [0.3, 0.2]
    Password Managers: [0.7, 0.3]
    Color Pickers: [0.4, 0.8]
    Code Formatters: [0.8, 0.9]
    Note Taking: [0.6, 0.5]
    Video Downloaders: [0.5, 0.2]
    Time Trackers: [0.7, 0.6]
    Screenshot Tools: [0.4, 0.4]
```
**ប្រភេទផ្នែកបន្ថែមដែលពេញនិយម និងអត្ថប្រយោជន៍របស់ពួកវា៖**  
- **ឧបករណ៍ផលិតភាព**៖ គ្រប់គ្រងការងារ កម្មវិធីកំណត់កំណត់សម្គាល់ និងឧបករណ៍តាមដានពេលវេលាដែលជួយអ្នកមានការរៀបចំ  
- **ការកែលម្អសុវត្ថិភាព**៖ ប្រព័ន្ធគ្រប់គ្រងពាក្យសម្ងាត់ ប្រព័ន្ធរាំងខ្ទប់ប្រកាស និងឧបករណ៍ឯកជនភាពដែលការពារទិន្នន័យរបស់អ្នក  
- **ឧបករណ៍អ្នកអភិវឌ្ឍន៍**៖ កម្មវិធីរៀបចំកូដ ឧបករណ៍ជ្រើសពណ៌ និងឧបករណ៍គូរប្រសិទ្ធភាពដែលជួយសម្រួលការអភិវឌ្ឍ  
- **ការកែលម្អមាតិកា**៖ របៀបអាន ទាញយកវីដេអូ និងឧបករណ៍ប្រើថតរូបសំរាប់លើកមកបទពិសោធន៍រុករកវែបកាន់តែប្រសើរ

✅ **សំនួរត្រលប់មកវិញ**៖ តើផ្នែកបន្ថែមកម្មវិធីរុករកដែលអ្នកចូលចិត្តមានអ្វីខ្លះ? ពួកវាជួបប្រទៈតាមភារកិច្ចដូចម្តេច ហើយពួកវាបង្កើនបទពិសោធន៍រុករករបស់អ្នកយ៉ាងដូចម្តេច?

### 🔄 **ការត្រួតពិនិត្យការរៀន**  
**ការយល់ដឹងសំណុំរចនាសម្ព័ន្ធកម្មវិធីរុករក**៖ មុនពេលផ្លាស់ទៅកាន់ការអភិវឌ្ឍផ្នែកបន្ថែម សូមប្រាកដថាអ្នកអាច៖  
- ✅ ពន្យល់ពីរបៀបកម្មវិធីរុករកអនុវត្តសំណើវែប និងបង្ហាញមាតិកា  
- ✅ កំណត់ធាតុសំខាន់នៃសំណុំរចនាសម្ព័ន្ធកម្មវិធីរុករក  
- ✅ យល់ពីរបៀបផ្នែកបន្ថែមរួមបញ្ចូលជាមួយមុខងាររបស់កម្មវិធីរុករក  
- ✅ ស្គាល់ម៉ូឌែលសុវត្ថិភាពដែលការពារអ្នកប្រើ

**ការប្រលងខ្លីដោយខ្លួនឯង**៖ តើអ្នកអាចតាមដានផ្លូវពីការវាយ URL ទៅការមើលទំព័រវែបបានទេ?  
1. **ការស្វែងរក DNS** បម្លែង URL ទៅអាសយដ្ឋាន IP  
2. **សំណើ HTTP** ទាញយកមាតិកាពីម៉ាស៊ីនបម្រើ  
3. **ការបកប្រែ** ដំណើរការ HTML, CSS និង JavaScript  
4. **ការបង្ហាញ** បង្ហាញទំព័រវែបចុងក្រោយ  
5. **ផ្នែកបន្ថែម** អាចផ្លាស់ប្ដូរមាតិកានៅជំហានជាច្រើន

## ដំឡើង និងគ្រប់គ្រងផ្នែកបន្ថែម

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

![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/km/install-on-edge.d68781acaf0b3d3d.webp)

> **សំខាន់**៖ សូមប្រាកដថាបើកមូដអ្នកអភិវឌ្ឍន៍ និងអនុញ្ញាតផ្នែកបន្ថែមពីឃ្លាំងផ្សេងៗនៅពេលសាកល្បងផ្នែកបន្ថែមរបស់អ្នក។

### ដំណើរការដំឡើងផ្នែកបន្ថែមសំរាប់អភិវឌ្ឍន៍

ពេលអ្នកកំពុងអភិវឌ្ឍ និងសាកល្បងផ្នែកបន្ថែមរបស់អ្នក សូមអនុវត្តវិធីសាស្រ្តនេះ៖

```mermaid
flowchart TD
    A[សរសេរកូដ] --> B[សង់បន្ថែម]
    B --> C{ត្រូវដំឡើងជាលើកដំបូងទេ?}
    C -->|បាទ/ចាស| D[ផ្ទុកកន្ធោងមិនបានបង្ហាញ]
    C -->|ទេ| E[ផ្ទាស់បន្ថែមម្តងទៀត]
    D --> F[សាកល្បងមុខងារ]
    E --> F
    F --> G{ដំណើរការត្រឹមត្រូវទេ?}
    G -->|ទេ| H[កែប្រែបញ្ហា]
    G -->|បាទ/ចាស| I[រួចរាល់សម្រាប់អ្នកប្រើ]
    H --> A
    I --> J[ផ្សព្វផ្សាយទៅហាង]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#f3e5f5
    style J fill:#fff3e0
```
```bash
# ជំហាន 1: សង់កម្មវិធីបន្ថែមរបស់អ្នក
npm run build
```

**អ្វីដែលពាក្យបញ្ជានេះបានធ្វើ៖**  
- **សម្រួល**កូដប្រភពរបស់អ្នកទៅជាសំណុំផ្នែកបន្ថែមដែលរួចរាល់សម្រាប់កម្មវិធីរុករក  
- **បញ្ចូល**ម៉ូឌុល JavaScript ទៅជា​បណ្ដុំ​ឯកសារ​ដែលបានបំលែង  
- **បង្កើត**ឯកសារផ្នែកបន្ថែមចុងក្រោយក្នុងថត `/dist`  
- **រៀបចំ**ផ្នែកបន្ថែមរបស់អ្នកសម្រាប់ការដំឡើង និងសាកល្បង

**ជំហាន ២: ទៅកាន់ផ្នែកគ្រប់គ្រងផ្នែកបន្ថែម**  
1. **បើក**ទំព័រការគ្រប់គ្រងផ្នែកបន្ថែមរបស់កម្មវិធីរុករក  
2. **ចុច**ប៊ូតុង "ការកំណត់ និងផ្សេងៗ" (`...` ស្លាក) នៅជ្រុងខាងស្តាំខាងលើ  
3. **ជ្រើសរើស** "ផ្នែកបន្ថែម" ពីមិន៊ូធ្លាក់ចុះ

**ជំហាន ៣: ផ្ទុកផ្នែកបន្ថែមរបស់អ្នក**  
- **សម្រាប់ការដំឡើងថ្មី**: ជ្រើស `load unpacked` ហើយជ្រើសថត `/dist` របស់អ្នក  
- **សម្រាប់ការអាប់ដេត**: ចុច `reload` ប្រសិនបើផ្នែកបន្ថែមបានដំឡើងរួចហើយ  
- **សម្រាប់ការសាកល្បង**: បើក "Developer mode" ដើម្បីចូលប្រើមុខងារបន្ថែមសម្រាប់កែប្រែកូដ

### ដំឡើងផ្នែកបន្ថែមសម្រាប់ផលិតកម្ម

> ✅ **កត់សម្គាល់**៖ ណែនាំអភិវឌ្ឍនេះសម្រាប់ផ្នែកបន្ថែមដែលអ្នកបង្កើតផ្ទាល់។ ដើម្បីដំឡើងផ្នែកបន្ថែមដែលបានផ្សព្វផ្សាយ សូមទៅកាន់ហាងផ្នែកបន្ថែមរបស់កម្មវិធីរុករកផ្លូវការដូចជា [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)។

**យល់ដឹងពីភាពខុសគ្នា៖**  
- **ការដំឡើងអភិវឌ្ឍន៍** អនុញ្ញាតឲ្យអ្នកសាកល្បងផ្នែកបន្ថែមមិនទាន់ផ្សព្វផ្សាយពេលកំពុងអភិវឌ្ឍន៍  
- **ការដំឡើងពីហាង** ផ្តល់ផ្នែកបន្ថែមដែលបានបញ្ជាក់ និងមានការអាប់ដេតស្វ័យប្រវត្តិ  
- **ការចូលផ្លូវក្រៅហាង** អនុញ្ញាតឲ្យដំឡើងផ្នែកបន្ថែមពីក្រៅហាងផ្លូវការប៉ុន្តែត្រូវការមូដអភិវឌ្ឍន៍

## កសាងផ្នែកបន្ថែមព្រីនជាតិកាបូនរបស់អ្នក

យើងនឹងបង្កើតផ្នែកបន្ថែមកម្មវិធីរុករក វិចិត្រសើរព្រីនជាតិការប្រើថាមពលរបស់តំបន់អ្នក។ គម្រោងនេះបង្ហាញពីមូលដ្ឋានការអភិវឌ្ឍផ្នែកបន្ថែមសំខាន់ៗ ខណៈដែលសំដៅធ្វើឲ្យមានឧបករណ៍ប្រើប្រាស់សកម្មភាពជាក់ស្តែងក្នុងការយល់ដឹងបរិស្ថាន។

វិធីសាស្រ្តនេះ ធ្វើតាមគោលការណ៍ "រៀនដោយការធ្វើ" ដែលមានប្រសិទ្ធភាពតាំងពីទស្សនវិជ្ជាអប់រំរបស់ John Dewey - ការរួមបញ្ចូលជំនាញបច្ចេកទេស និងការប្រើប្រាស់ជាក់ស្តែងក្នុងពិភពលោកពិត។

### តម្រូវការគម្រោង

មុនចាប់ផ្តើមអភិវឌ្ឍ សូមប្រមូលអំពីធនធាន និងអាស្រ័យភាពដែលចាំបាច់៖

**ការចូលដំណើរការជាមួយ API:**  
- **[កូនសោ API CO2 Signal](https://www.co2signal.com/)**៖ បញ្ចូលអាសយដ្ឋានអ៊ីមែលរបស់អ្នកដើម្បីទទួលបានកូនសោ API ឥតគិតថ្លៃ  
- **[កូដតំបន់](http://api.electricitymap.org/v3/zones)**៖ ស្វែងរកកូដតំបន់របស់អ្នកតាមរយៈ [Electricity Map](https://www.electricitymap.org/map) (ឧទាហរណ៍ ប៉ុន្តែ Boston ប្រើ 'US-NEISO')

**ឧបករណ៍អភិវឌ្ឍន៍:**  
- **[Node.js និង NPM](https://www.npmjs.com)**៖ ឧបករណ៍គ្រប់គ្រងកញ្ចប់សម្រាប់ដំឡើងអាស្រ័យភាពគម្រោង  
- **[កូដចាប់ផ្តើម](../../../../5-browser-extension/start)**៖ ទាញយកថត `start` ដើម្បីចាប់ផ្តើមអភិវឌ្ឍន៍

✅ **សូមស្វែងយល់បន្ថែម**៖ ប្រuckerលើជំនាញគ្រប់គ្រងកញ្ចប់របស់អ្នកជាមួយ [មេរៀនសិក្សា] ដែលបំពេញដោយម៉ូឌុលរៀននេះ (https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)

### យល់ដឹងពីរចនាសម្ព័ន្ធគម្រោង

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

```
project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
├── src/                     # Source development files
│   └── index.js             # Your main JavaScript code
├── package.json             # Project dependencies and scripts
└── webpack.config.js        # Build configuration
```

**ការបែងចែកអ្វីដែលឯកសារពីរចនាសម្ព័ន្ធធ្វើ៖**  
- **`manifest.json`**៖ **កំណត់** ព័ត៌មានមាតិកា ផាកពិនិត្យ និងចំណុចចូល  
- **`index.html`**៖ **បង្កើត** មុខងារជាផ្ទៃមុខដែលបង្ហាញពេលអ្នកប្រើចុចផ្នែកបន្ថែមរបស់អ្នក  
- **`background.js`**៖ **គ្រប់គ្រង** ដំណើរការផ្នែកក្រោយ និងអ្នកស្ដាប់ព្រឹត្តិការណ៍កម្មវិធីរុករក  
- **`main.js`**៖ **ផ្ទុក** JavaScript ចុងក្រោយបន្ទាប់ពីដំណើរការសាងសង់  
- **`src/index.js`**៖ **ផ្ទុក** កូដអភិវឌ្ឍន៍ដើមដែលចំរូងទៅជា `main.js`

> 💡 **គន្លឹះរៀបចំ**៖ រក្សាទុកកូនសោ API និងកូដតំបន់របស់អ្នកក្នុងកំណត់ចំណាំសុវត្ថិភាពសម្រាប់យោងឲ្យងាយពេលអភិវឌ្ឍ។ អ្នកនឹងត្រូវការផ្នែកទាំងនេះសម្រាប់សាកល្បងមុខងារផ្នែកបន្ថែមរបស់អ្នក។

✅ **សម្គាល់សុវត្ថិភាព**៖ កុំធ្វើជាការផ្សព្វផ្សាយកូនសោ API ឬព័ត៌មានដែលមានទំនួលខុសត្រូវក្នុងប្រភពកូដរបស់អ្នក។ យើងនឹងបង្ហាញអ្នកពីរបៀបគ្រប់គ្រងយ៉ាងមានសុវត្ថិភាពនៅជំហានក្រោយ។

## បង្កើតផ្ទាំងផ្នែកបន្ថែម

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

វិធីសាស្ត្រនេះអនុវត្តតាមគោលការណ៍បង្ហាញពេញលេញដែលបានប្រើក្នុងរចនាបទផ្ទាំងចាប់តាំងពីដើមកុំព្យូទ័រ - បង្ហាញព័ត៌មាន និង​ជម្រើស​តាមលំដាប់ត្រឹមត្រូវដើម្បីមិនឲ្យអ្នកប្រើរអាក់រអួល។

### មើលទិដ្ឋភាពផ្នែកបន្ថែម

**ទិដ្ឋភាពកំណត់រចនាសម្ព័ន្ធ** - ការកំណត់អ្នកប្រើដំបូង៖  
![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/km/1.b6da8c1394b07491.webp)

**ទិដ្ឋភាពលទ្ធផល** - បង្ហាញទិន្នន័យព្រះនា្ដិកាបូន៖  
![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/km/2.1dae52ff08042246.webp)

### បង្កើតកម្រងសំណុំបែបបទកំណត់រចនាសម្ព័ន្ធ

បែបបទកំណត់រចនាសម្ព័ន្ធប្រមូលទិន្នន័យកំណត់រចនាសម្ព័ន្ធអ្នកប្រើនៅពេលដំបូងប្រើ។ ពេលបានកំណត់រួច ข้อมูลនេះនឹងរក្សាទុកក្នុងផ្ទុកបណ្តាញរបស់កម្មវិធីរុករកសម្រាប់ការប្រើប្រាស់បន្ត។

នៅឯកសារ `/dist/index.html` សូមបន្ថែមសំណុំបែបបទនេះ៖

```html
<form class="form-data" autocomplete="on">
    <div>
        <h2>New? Add your Information</h2>
    </div>
    <div>
        <label for="region">Region Name</label>
        <input type="text" id="region" required class="region-name" />
    </div>
    <div>
        <label for="api">Your API Key from tmrow</label>
        <input type="text" id="api" required class="api-key" />
    </div>
    <button class="search-btn">Submit</button>
</form>
```

**អ្វីដែលបែបបទនេះបានធ្វើ៖**  
- **បង្កើត** រចនាសម្ព័ន្ធបែបបទដែលមានសារៈសំខាន់ជាមួយស្លាក និងការចូលបញ្ចូលមុខងារយ៉ាងត្រឹមត្រូវ  
- **បើក** មុខងារ autocomplete របស់កម្មវិធីរុករកសម្រាប់បទពិសោធន៍ប្រសើរឡើង  
- **ទាមទារ** បំពេញទាំងពីរផ្នែកមុនការដាក់ស្នើដោយប្រើលក្ខណៈ `required`  
- **រៀបចំ** ការបញ្ចូលតាមឈ្មោះថ្នាក់ដើម្បីងាយស្រួលបន្ថែមស្ទីល និងកូដ JavaScript  
- **ផ្តល់** ប្រសាសន៍ច្បាស់លាស់សម្រាប់អ្នកប្រើដែលកំពុងកំណត់បន្ថែម

### បង្កើតផ្ទាំងបង្ហាញលទ្ធផល

បន្ទាប់មក បង្កើតតំបន់បង្ហាញលទ្ធផលដែលបង្ហាញទិន្នន័យព័ណ្ឋនាកាបូន។ សូមបន្ថែម HTML ខាងក្រោមបែបបទ៖

```html
<div class="result">
    <div class="loading">loading...</div>
    <div class="errors"></div>
    <div class="data"></div>
    <div class="result-container">
        <p><strong>Region: </strong><span class="my-region"></span></p>
        <p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
        <p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
    </div>
    <button class="clear-btn">Change region</button>
</div>
```

**អ្វីដែលរចនាសម្ព័ន្ធនេះផ្តល់៖**  
- **`loading`**៖ **បង្ហាញ** សារកំពុងផ្ទុកមេដាតា ពេលទិន្នន័យពី API ត្រូវបានទាញ  
- **`errors`**៖ **បង្ហាញ** សារបញ្ហា ករណី API មិនទទួលបានទិន្នន័យ ឬទិន្នន័យមិនត្រឹមត្រូវ  
- **`data`**៖ **ផ្ទុក** ទិន្នន័យដើមសម្រាប់ការពិនិត្យកូដជាការអភិវឌ្ឍ  
- **`result-container`**៖ **បង្ហាញ** ព័ត៌មានព្រះនាទិកាបូនដែលបានរៀបចំ  
- **`clear-btn`**៖ **អនុញ្ញាត** អ្នកប្រើឲ្យផ្លាស់ប្តូរតំបន់និងកំណត់រចនាសម្ព័ន្ធឡើងវិញ

### រៀបចំដំណើរការសាងសង់

ឥឡូវនេះមកដំឡើងអាស្រ័យភាពគម្រោង និងសាកល្បងដំណើរការសាងសង់៖

```bash
npm install
```

**អ្វីដែលដំណើរការដំឡើងនេះបានធ្វើ៖**  
- **ទាញយក** Webpack និងអាស្រ័យភាពអភិវឌ្ឍផ្សេងៗដែលបានបញ្ជាក់ក្នុង `package.json`  
- **កំណត់** ឧបករណ៍សាងសង់សម្រាប់បំបែក និងបំលែងកូដ JavaScript ទំនើបៗ  
- **រៀបចំ** នូវបរិយាកាសអភិវឌ្ឍសម្រាប់ការសាងសង់និងសាកល្បងផ្នែកបន្ថែម  
- **អនុញ្ញាត** ការបកស្រាយកូដ ការបង្កើតបន្តុល និងការចូលលំដាប់ជាមួយកម្មវិធីរុករកများ

> 💡 **ចំណេះដឹងដំណើរការសាងសង់**៖ Webpack បញ្ចូលកូដប្រភពអ្នកពី `/src/index.js` ទៅជា `/dist/main.js`។ ដំណើរការនេះអុបទុយម៉ង់កូដសម្រាប់ផលិតកម្ម និងធានាបាននូវការចូលប្រើបានគ្រប់កម្មវិធីរុករក។

### សាកល្បងការរីកចម្រើនរបស់អ្នក

នៅពេលនេះ អ្នកអាចសាកល្បងផ្នែកបន្ថែមរបស់អ្នកបាន៖
1. **រត់** ពាក្យបញ្ជា build ដើម្បីបង្កប់កូដរបស់អ្នក  
2. **ផ្ទុក** ផ្នែកបន្ថែមទៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើរបៀបរបស់អ្នកអwickអ្នកអwickអ្នកអwick  
3. **ផ្ទៀងផ្ទាត់** ថា បែបបទបង្ហាញបានត្រឹមត្រូវ និងមានរូបរាងវិជ្ជាជីវៈ  
4. **ត្រួតពិនិត្យ** ថា ធាតុទាំងអស់នៃបែបបទបានដាក់ជាបន្ទាត់សមរម្យ និងដំណើរការបាន  

**អ្វីដែលអ្នកបានសម្រេច៖**  
- **បានបង្កើត** រចនាសម្ព័ន្ធ HTML ផ្លូវដើមសម្រាប់ផ្នែកបន្ថែមរបស់អ្នក  
- **បានបង្កើត** ទាំងចំណុចផ្ទៀងផ្ទាត់និងលទ្ធផលជាមួយនឹងសញ្ញាសំដៅដែលត្រឹមត្រូវ  
- **បានដាក់** វិធីសាស្រ្តអភិវឌ្ឍសម័យទំនើបដោយប្រើឧបករណ៍ស្តង់ដារក្នុងឧស្សាហកម្ម  
- **បានរៀបចំ** មូលដ្ឋានសម្រាប់បន្ថែមមុខងារ JavaScript អន្តរកម្ម  

### 🔄 **ការត្រួតពិនិត្យផ្លូវការអប់រំ**  
**ដំណើរការអភិវឌ្ឍផ្នែកបន្ថែម**៖ ផ្ទៀងផ្ទាត់ការយល់ដឹងរបស់អ្នកមុនបន្ត៖  
- ✅ តើអ្នកអាចពន្យល់ពីគោលបំណងនៃមួយឯកសារនៅក្នុងរចនាសម្ព័ន្ធគម្រោងបានទេ?  
- ✅ តើអ្នកយល់ពីរបៀបដំណើរការបង្កប់កូដប្រភពរបស់អ្នកដោយ build process ឬទេ?  
- ✅ ហេតុអ្វីបានជា​យើងចែករំលែកចំណុចផ្ទៀងផ្ទាត់និងលទ្ធផលទៅជា​ផ្នែក UI ផ្សេងៗ?  
- ✅ តើរចនាសម្ព័ន្ធបែបបទគាំទ្របង្កើនភាពងាយប្រើ និងដោយភាពអាចចូលដំណើរការបានយ៉ាងដូចម្តេច?  

**ការយល់ដឹងអំពីដំណើរការអភិវឌ្ឍ**៖ បច្ចុប្បន្នអ្នកគួរតែអាច៖  
1. **កែប្រែ** HTML និង CSS សម្រាប់ផ្ទាំងផ្នែកបន្ថែមរបស់អ្នក  
2. **រត់** ពាក្យបញ្ជា build ដើម្បីបង្កប់ការផ្លាស់ប្តូររបស់អ្នក  
3. **ផ្ទុកឡើងវិញ** ផ្នែកបន្ថែមនៅក្នុងកម្មវិធីរុករករបស់អ្នកដើម្បីសាកល្បងការអាប់ដេត  
4. **ពិនិត្យកំហុស** ដោយប្រើឧបករណ៍អ្នកអwickអ្នកអwickអ្នកអwickរបស់កម្មវិធីរុករក  

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

## GitHub Copilot Agent Challenge 🚀  

ប្រើរបៀប Agent ដើម្បីបញ្ចប់ការប្រកួតនេះ៖  

**ការពិពណ៌នា:** បង្កើនផ្នែកបន្ថែមកម្មវិធីរុករកដោយបន្ថែមមុខងារត្រួតពិនិត្យបែបបទ និងមុខងារឆ្លើយតបអ្នកប្រើដើម្បីបង្កើនបទពិសោធន៍អ្នកប្រើ​ ពេលបញ្ចូលសោ API និងកូដតំបន់។  

**សារណា:** បង្កើតមុខងារត្រួតពិនិត្យ JavaScript ដែលពិនិត្យប្រសិនបើវាលសោ API មានតួអក្សរយ៉ាងហោចណាស់ ២០ តួ និងប្រសិនបើកូដតំបន់អនុវត្តតាមទ្រង់ទ្រាយត្រឹមត្រូវ (ដូចជា 'US-NEISO')។ បន្ថែមមុខងារឆ្លើយតបដោយផ្លាស់ប្ដូរពណ៌សែងវាលបញ្ចូលទៅពណ៌បៃតងសម្រាប់ទិន្នន័យត្រឹមត្រូវ និងពណ៌ក្រហមសម្រាប់មិនត្រឹមត្រូវ។ បន្ថែមមុខងារប្ដូរពិភាក្សាដើម្បីបង្ហាញ/លាក់សោ API សម្រាប់សុវត្ថិភាពផងដែរ។  

សូមរៀនបន្ថែមអំពី [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) នៅទីនេះ។  

## 🚀 ប្រកួត  

មើលទៅក្នុងឃ្លាំងផ្នែកបន្ថែមកម្មវិធីរុករកហើយដំឡើងមួយទៅកម្មវិធីរុករករបស់អ្នក។ អ្នកអាចពិនិត្យឯកសាររបស់វានៅរបៀបគួរឱ្យចាប់អារម្មណ៍។ តើអ្នកបានរកឃើញអ្វី?  

## ការប្រឡងបន្ទាប់មកពីមេរៀន  

[ការប្រឡងបន្ទាប់ពីមេរៀន](https://ff-quizzes.netlify.app/web/quiz/24)  

## ពិនិត្យឡើងវិញ និងរៀនផ្ទាល់ខ្លួន  

ក្នុងមេរៀននេះ អ្នកបានរៀនពីប្រវត្តិនៃកម្មវិធីរុករកវែបួយៗ១រយៈពេល ត្រូវចំណាយពេលនេះសម្រាប់ស្វែងរកពីការច្នៃប្រឌិតនៃលោកអ្នកបង្កើត World Wide Web ដោយអានបន្ថែមអំពីប្រវត្តិរបស់វា។ មួយចំនួនវែបសាយមានប្រយោជន៍រួមមាន៖  

[ប្រវត្តិនៃកម្មវិធីរុករកវែប](https://www.mozilla.org/firefox/browsers/browser-history/)  

[ប្រវត្តិនៃវែប](https://webfoundation.org/about/vision/history-of-the-web/)  

[សម្ភាសន៍ជាមួយ Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)  

### ⚡ **អ្វីដែលអ្នកអាចធ្វើក្នុង ៥ នាទីក្រោយនេះ**  
- [ ] បើកទំព័រ Chrome/Edge extensions (chrome://extensions) ហើយស្វែងរកអ្វីដែលអ្នកបានដំឡើង  
- [ ] មើលផ្ទាំងបណ្ដាញ DevTools Network នៅពេលផ្ទុកគេហទំព័រ  
- [ ] ព្យាយាមមើលប្រភពទំព័រ (Ctrl+U) ដើម្បីមើលរចនាសម្ព័ន្ធ HTML  
- [ ] ពិនិត្យធាតុទំព័រណាមួយហើយកែ CSS របស់វាក្នុង DevTools  

### 🎯 **អ្វីដែលអ្នកអាចសម្រេចបានក្នុងមួយម៉ោងនេះ**  
- [ ] បញ្ចប់ការប្រឡងបន្ទាប់មកពីមេរៀន ហើយយល់ដឹងពីគ្រឹះនៃកម្មវិធីរុករក  
- [ ] បង្កើតឯកសារ manifest.json មូលដ្ឋានសម្រាប់ផ្នែកបន្ថែមកម្មវិធីរុករក  
- [ ] បង្កើតផ្នែកបន្ថែម "Hello World" សាមញ្ញដែលបង្ហាញផុបអាប់  
- [ ] សាកល្បងផ្ទុកផ្នែកបន្ថែមរបស់អ្នកនៅក្នុងរបៀបអ្នកអwickអ្នកអwick  
- [ ] ស្វែងរកឯកសារអំពីផ្នែកបន្ថែមកម្មវិធីរុករកសម្រាប់កម្មវិធីរុករកដែលអ្នកកំពុងផ្តោត  

### 📅 **ដំណើរផ្នែកបន្ថែមរយៈពេលមួយសប្តាហ៍របស់អ្នក**  
- [ ] បញ្ចប់ផ្នែកបន្ថែមកម្មវិធីរុករកមួយដែលមានប្រយោជន៍ពិតប្រាកដ  
- [ ] រៀនអំពីស្គ្រីបខ្លឹមសារ, ស្គ្រីបផ្ទាំងខាងក្រោយ, និងអន្តរកម្មផុបអាប់  
- [ ] ជំនាញក្នុង API គ្រប់គ្រងផ្ទុក, តាប, និងការផ្ញើសារ  
- [ ] រចនាម៉ូដែលប្រើប្រាស់មនុស្សបានងាយស្រួលសម្រាប់ផ្នែកបន្ថែមរបស់អ្នក  
- [ ] សាកល្បងផ្នែកបន្ថែមរបស់អ្នកនៅក្នុងគេហទំព័រផ្សេងៗ និងស្ថានភាពផ្សេងៗ  
- [ ] ចេញផ្សាយផ្នែកបន្ថែមរបស់អ្នកទៅឃ្លាំងផ្នែកបន្ថែមកម្មវិធីរុករក  

### 🌟 **ការអភិវឌ្ឍកម្មវិធីរុករករយៈពេលមួយខែរបស់អ្នក**  
- [ ] បង្កើតផ្នែកបន្ថែមជាច្រើនដោះស្រាយបញ្ហាអ្នកប្រើផ្សេងៗ  
- [ ] រៀនអំពី API រុករកកម្រិតខ្ពស់ និងពិសោធន៍សុវត្ថិភាព  
- [ ] ចូលរួមក្នុងគម្រោងផ្នែកបន្ថែមកម្មវិធីរុករកប្រភពបើក  
- [ ] ជំនាញក្នុងការប្រើប្រាស់ជាច្រើនកម្មវិធីរុករក និងការលូតលាស់ជាបន្តបន្ទាប់  
- [ ] បង្កើតឧបករណ៍ និងគំរូអភិវឌ្ឍសម្រាប់ផ្នែកបន្ថែម  
- [ ] ក្លាយជាអ្នកជំនាញផ្នែកបន្ថែមកម្មវិធីរុករកដែលជួយអ្នកអwickអ្នកអwickអ្នកអwickដទៃទៀត  

## 🎯 ពេលវេលាអភិវឌ្ឍផ្នែកបន្ថែមកម្មវិធីរុករករបស់អ្នក  

```mermaid
timeline
    title ការរីកចម្រើនការអភិវឌ្ឍន៍កូដបន្ថែមក្នុងកម្មវិធីរុករក
    
    section មូលដ្ឋាន (15 នាទី)
        Browser Understanding: រចនាសម្ព័ន្ធគ្រឹះ
                              : ដំណើរការព្រីន
                              : ចំណុចការជាប់បន្ថែម
    
    section ការតំឡើង (20 នាទី)
        Development Environment: រចនាសម្ព័ន្ធគម្រោង
                               : ការកំណត់ឧបករណ៍សាងសង់
                               : របៀបអ្នកអភិវឌ្ឍកម្មវិធីរុករក
                               : ដំណើរការបង្ហោះបន្ថែម
    
    section ការរចនាចំណុចប្រទាក់ (25 នាទី)
        User Experience: រចនាសម្ព័ន្ធ HTML
                       : ការតុបតែង CSS
                       : ការផ្ទៀងផ្ទាត់បែបបទ
                       : ការរចនាឆ្លាតវៃ
    
    section មុខងារសំខាន់ (35 នាទី)
        JavaScript Integration: ការគ្រប់គ្រងព្រឹត្តិការណ៍
                              : ឆ្លើយតប API
                              : ការផ្ទុកទិន្នន័យ
                              : ការគ្រប់គ្រងកំហុស
    
    section API រុករក (45 នាទី)
        Platform Integration: ប្រព័ន្ធការអនុញ្ញាតិ
                            : API ផ្ទុកទិន្នន័យ
                            : ការគ្រប់គ្រងផ្ទាំង
                            : មីនុយបរិប្រទ
    
    section មុខងារ​និង​លក្ខណៈ​ចុងក្រោយ (1 សប្តាហ៍)
        Professional Extensions: ក្រូស៊ីបដំណើរការ
                               : ក្រូស៊ីខ្ទង់មាតិកា
                               : សមត្ថភាពប្រើបានលើកម្មវិធីរុករកផ្សេងៗ
                               : បង្កើនប្រសិទ្ធភាព
    
    section ការផ្សព្វផ្សាយ (2 សប្តាហ៍)
        Distribution: ដាក់ពាណិជ្ជកម្មក្នុងហាង
                   : ដំណើរការត្រួតពិនិត្យ
                   : មតិបន្ថែមពីអ្នកប្រើ
                   : ការគ្រប់គ្រងបន្ទាន់
    
    section មហាសាលវិជ្ជាជីវៈ (1 ខែ)
        Extension Ecosystem: API បានជំនាញខ្ពស់
                           : គោលការណ៏សុវត្ថិភាពល្អបំផុត
                           : មុខងារសកម្មភាពស្ថាប័ន
                           : ការចូលរួមជាមួយសមាសធាតុផ្សេងៗ
```  
### 🛠️ សង្ខេបឧបករណ៍អភិវឌ្ឍផ្នែកបន្ថែមរបស់អ្នក  

ក្រោយបញ្ចប់មេរៀននេះ អ្នកមាន៖  
- **ចំណេះដឹងស្ថាបត្យកម្មកម្មវិធីរុករក**៖ ការយល់ពីម៉ាស៊ីនបំលែងកូដ, គំរកសុវត្ថិភាព, និងការតភ្ជាប់ផ្នែកបន្ថែម  
- **បរិបទអភិវឌ្ឍ**៖ ឧបករណ៍ទំនើប Webpack, NPM និងជំនួយពិនិត្យកំហុស  
- **គ្រឹះ UI/UX**៖ រចនាសម្ព័ន្ធ HTML មានសេន្មាន្ទិក និងមូលដ្ឋានលក្ខណៈបង្ហាញមិនរាកចេញ  
- **ការយល់ដឹងសុវត្ថិភាព**៖ បទពិសោធន៍អំពីការអនុញ្ញាតកម្មវិធីរុករក និងវិធីសាស្រ្តអភិវឌ្ឍដែលមានសុវត្ថិភាព  
- **គំនិតជារួមឆ្លងរាជកម្មវិធីរុករក**៖ ចំណេះដឹងអំពីការតភ្ជាប់ និងការសាកល្បង  
- **ការរួមបញ្ចូល API**៖ មូលដ្ឋានសម្រាប់បើកដំណើរការជាមួយប្រភពទិន្នន័យខាងក្រៅ  
- **ដំណើរការអាជីព**៖ វិធីសាស្រ្តអភិវឌ្ឍ និងសាកល្បងស្តង់ដារឧស្សាហកម្ម  

**ការអនុវត្តក្នុងពិភពពិត**៖ ជំនាញទាំងនេះអាចប្រើប្រាស់ដោយផ្ទាល់ទៅលើ៖  
- **ការអភិវឌ្ឍវែបសាយ**៖ កម្មវិធីផ្ទាំងតែមួយ និងកម្មវិធីវែបជាកម្រិតលៃតម្រូវ  
- **កម្មវិធីកុំព្យូទ័រប្រភេទ Desktop**៖ Electron និងកម្មវិធីដែលមានមូលដ្ឋានវែបក្នុងកុំព្យូទ័រ  
- **ការអភិវឌ្ឍលើទូរស័ព្ទ**៖ កម្មវិធីថ្មើរជើងនិងកម្មវិធីវែបលើទូរស័ព្ទ  
- **ឧបករណ៍សហគ្រាស**៖ កម្មវិធីផលិតភាពផ្ទៃក្នុង និងស្វ័យប្រវត្តិកម្ម  
- **ប្រភពបើក**៖ ចូលរួមគម្រោងផ្នែកបន្ថែមនៃកម្មវិធីរុករកនិងវិមាត្រវែប  

**កម្រិតបន្ទាប់**៖ អ្នករួចរាល់ក្នុងការបន្ថែមមុខងារអន្តរកម្ម, ប្រើ API រុករក, និងបង្កើតផ្នែកបន្ថែមដោះស្រាយបញ្ហាអ្នកប្រើពិតប្រាកដ!  

## កិច្ចការណ៍  

[Restyle your extension](assignment.md)

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ការបដិសេធ**៖  
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខិតខំប្រឹងប្រែងសំរាប់ភាពត្រឹមត្រូវ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមូលដ្ឋានគួរត្រូវបានគោរពជាផ្នែកដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមណែនាំឱ្យប្រើប្រាស់ការបកប្រែដោយមនុស្សដែលមានជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ខុស ឬការបកស្រាយខុសណាមួយដែលកើតមានពីការប្រើប្រាស់ការបកប្រែនេះទេ។
<!-- CO-OP TRANSLATOR DISCLAIMER END -->