You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/translations/km/7-bank-project/3-data/assignment.md

15 KiB

ការផ្លាស់ប្តូរកូដនិងការចេញតំណាងឯកសារ

គោលបំណងសិក្សា

ដោយបំពេញភារកិច្ចនេះ អ្នកនឹងអនុវត្តជំនាញអភិវឌ្ឍន៍សូហ្វវែរ ដែលអ្នកអភិវឌ្ឍន៍វិជ្ជាជីវៈប្រើប្រាស់ជារៀងរាល់ថ្ងៃ។ អ្នកនឹងរៀនរៀបចំកូដសម្រាប់ការថែរក្សា បន្ថយការប្រហែលគ្នាតាមរយៈការបង្ហាញ abstraction ហើយចេញតំណាងឯកសារការងាររបស់អ្នកសម្រាប់អ្នកអភិវឌ្ឍន៍នៅអនាគត (រួមទាំងខ្លួនអ្នកផងដែរ)។

កូដស្អាត ដែលមានការចេញតំណាងឯកសារល្អ គឺសំខាន់សម្រាប់គម្រោងអភិវឌ្ឍន៍វេបពិតនៅពិភពលោក ដែលមានអ្នកអភិវឌ្ឍន៍ជាច្រើនបានសហការនិងកូដច្រើនកំពុងអភិវឌ្ឍទៅតាមពេលវេលា។

មូលដ្ឋានភារកិច្ច

ឯកសារ app.js របស់កម្មវិធីធនាគាររបស់អ្នកបានកើនឡើងយ៉ាងខ្លាំងជាមួយមុខងារចុះឈ្មោះ ចូលរាល់ថ្ងៃ និងផ្ទាំងគ្រប់គ្រង។ ដល់ពេលអ្នកត្រូវផ្លាស់ប្តូរកូដនេះដោយប្រើប្រាស់វិធានការអភិវឌ្ឍវិជ្ជាជីវៈដើម្បីបង្កើនភាពងាយស្រួលក្នុងការអាន ភាពងាយក្នុងការថែរក្សា ហើយកាត់បន្ថយការប្រហែលគ្នា។

សេចក្ដីណែនាំ

បម្លែងកូដ app.js បច្ចុប្បន្នរបស់អ្នក ដោយអនុវត្តបច្ចេកទេសផ្លាស់ប្តូរចម្បងបីនេះ៖

1. ដកស្រង់អថេរតម្លៃកំណត់កំណត់រចនាសម្ព័ន្ធ

ភារកិច្ច៖ បង្កើតផ្នែករចនាសម្ព័ន្ធនៅខាងលើឯកសាររបស់អ្នក មានអថេរតម្លៃដែលអាចប្រើប្រាស់ឡើងវិញ។

និយមន័យអនុវត្ត៖

  • ដកស្រង់ URL មូលដ្ឋាន API របស់ម៉ាស៊ីនមេ (ដែលប្រើដោយដាក់លេខថតដោយដៃនៅច្រើនកន្លែង)
  • បង្កើតអថេរតម្លៃសម្រាប់សារកំហុសដែលបង្ហាញក្នុងមុខងារ​ច្រើនដង
  • ពិចារណាដកស្រង់ផ្លូវថ្នាក់និងអត្តសញ្ញាណធាតុដែលប្រើបន្ដទៀតជាច្រើនដង

រចនាសម្ព័ន្ធគំរូ៖

// ការកំណត់តម្លៃរឹង
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
  LOGIN: '/login',
  DASHBOARD: '/dashboard'
};

2. បង្កើតមុខងារស្នើសុំនៃឯកតាភាពរួមតែមួយ

ភារកិច្ច៖ កសាងមុខងារ sendRequest() ដែលអាចប្រើឡើងវិញ ដើម្បីកាត់បន្ថយកូដប្រាក់ប្រេីរវិញនៅចន្លោះ createAccount() និង getAccount()

តម្រូវការ:

  • គ្រប់គ្រងស្នើសុំទាំង GET និង POST
  • រួមបញ្ចូលការគ្រប់គ្រងកំហុសបានត្រឹមត្រូវ
  • គាំទ្រផ្លូវ URL ខុសៗគ្នា
  • ទទួលបានទិន្នន័យទំហំពុំបានបន្ទាន់ក្នុងស្នើសុំ

និយមន័យហត្ថលេខាមុខងារ៖

async function sendRequest(endpoint, method = 'GET', data = null) {
  // ការអនុវត្តរបស់អ្នកនៅទីនេះ
}

3. បន្ថែមការចេញតំណាងឯកសារកូដវិជ្ជាជីវៈ

ភារកិច្ច៖ ចេញតំណាងឯកសារកូដរបស់អ្នកជាមួយមតិយោបល់ច្បាស់លាស ដែលពន្យល់ពី "ហេតុផល" នៅពីក្រោយលីចចរិតរបស់អ្នក។

ស្តង់ដាឯកសារយោង៖

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

រចនាសម្ព័ន្ធឯកសារគំរូ៖

/**
 * Authenticates user and redirects to dashboard
 * @param {Event} event - Form submission event
 * @returns {Promise<void>} - Resolves when login process completes
 */
async function login(event) {
  // វಿರច្ឆ័យការដាក់សំណុំបែបបទផ្ទាល់ខ្លួនដើម្បីដោះស្រាយជាមួយ JavaScript
  event.preventDefault();
  
  // ការអនុវត្តរបស់អ្នក...
}

វិស័យជោគជ័យ

កូដដែលបានផ្លាស់ប្ដូររបស់អ្នកគួរតែបង្ហាញពីប្រព័ន្ធអភិវឌ្ឍវិជ្ជាជីវៈដូចតទៅ៖

ការអនុវត្តល្អឧទាហរណ៍

  • អថេរ៖ អានសម្រាប់ខ្សែអក្សរល្បិចនិង URL ត្រូវបានដកស្រង់ទៅក្នុងអថេរដែលមានឈ្មោះច្បាស់លាស់
  • គោលការណ៍ DRY៖ ទ្រឹស្តីស្នើសុំទូទៅត្រូវបានប្រមូលផ្តុំជាចំណែក sendRequest() មួយដែលអាចប្រើឡើងវិញ
  • ឯកសារ៖ មុខងារមានមតិយោបល់ JSDoc ច្បាស់លាស់ពន្យល់ពីគោលបំណងនិងប៉ារ៉ាម៉ែត្រ
  • ការរៀបចំ៖ កូដត្រូវបានចំណាត់ថ្នាក់យ៉ាងត្រឹមត្រូវជាមួយក្បាលផ្នែក និងរចនាសម្ព័ន្ធសមស្រប
  • ការគ្រប់គ្រងកំហុស៖ ការគ្រប់គ្រងកំហុសបានប្រសើរឡើងដោយប្រើមុខងារស្នើសុំនេះថ្មី

ការអនុវត្តគ្រប់គ្រាន់

  • អថេរ៖ តម្លៃដែលត្រូវធ្វើឡើងទីនេះភាគច្រើនត្រូវបានដកស្រង់ ប៉ុន្តែនៅតែមានតម្លៃដាក់ដៃតិចតួច
  • ការបំបែក៖ មុខងារ sendRequest() ដែលគ្រាន់តែបង្កើតបានប៉ុន្តែមិនអាចគ្រប់គ្រងករណីពិសេសទាំងអស់
  • មតិយោបល់៖ មុខងារសំខាន់ៗត្រូវបានឯកសារទៅប៉ុន្តែការពន្យល់ខ្លះឆ្ងាយពីពេញលេញ
  • ភាពងាយអាន៖ កូដទូទៅបានរៀបចំបានល្អ មានតែមួយចំនួនត្រូវការកែលម្អបន្ថែម

តំបន់ដែលត្រូវការកែលម្អ

  • អថេរ៖ ខ្សែអក្សរល្បិចនិង URL ខ្លះនៅតែដាក់ដៃនៅទូទាំងឯកសារ
  • ការប្រហែលគ្នា៖ កូដមានការប្រហែលគ្នាដ៏ធំធេងនៅចន្លោះមុខងារដូចគ្នា
  • ឯកសារ៖ ខ្វះមតិយោបល់ ឬមតិយោបល់មិនគ្រប់គ្រាន់ដែលមិនពន្យល់ពីគោលបំណងកូដ
  • ការរៀបចំ៖ កូដខ្វះរចនាសម្ព័ន្ធច្បាស់ និងការចំណាត់ថ្នាក់យ៉ាងត្រឹមត្រូវ

សាកល្បងកូដដែលបានផ្លាស់ប្តូរ

បន្ទាប់ពីផ្លាស់ប្តូរ ត្រូវធានាថាកម្មវិធីធនាគាររបស់អ្នកនៅតែធ្វើការបានត្រឹមត្រូវ៖

  1. សាកល្បងស្ទើរតែមនុស្ស៖ ចុះឈ្មោះ ចូល ប្រើផ្ទាំងគ្រប់គ្រង និងការគ្រប់គ្រងកំហុស
  2. ផ្ទៀងផ្ទាត់ការហៅ API៖ ផ្ទៀងផ្ទាត់មុខងារ sendRequest() របស់អ្នកដំណើរការសម្រាប់ការបង្កើតគណនីនិងការទទួល
  3. ពិនិត្យសถานភាពកំហុស៖ សាកល្បងជាមួយព័ត៌មានសម្ងាត់មិនត្រឹមត្រូវ និងកំហុសបណ្ដាញ
  4. ពិនិត្យលទ្ធផលក្នុងកុងសូល៖ ទីមិនមានកំហុសថ្មីៗត្រូវបានបង្កើតឡើងក្នុងដំណើរការ

គោលការណ៍ដាក់ស្នើ

ដាក់ស្នើឯកសារ app.js ដែលបានផ្លាស់ប្តូររបស់អ្នក ជាមួយ៖

  • ក្បាលផ្នែកច្បាស់លាស់ក្នុងការរៀបចំមុខងារផ្សេងៗ
  • រចនាសម្ព័ន្ធកូដ និងការចេញបន្ទាត់យ៉ាងតំរូវការ
  • ឯកសារជាមួយកំណត់ត្រា JSDoc សម្រាប់មុខងារ​ទាំងអស់
  • មតិយោបល់ខ្លីនៅខាងលើបង្ហាញពីវិធីសាស្ត្រផ្លាស់ប្តូររបស់អ្នក

ការប្រកួតប្រជែងបន្ថែម៖ បង្កើតឯកសារចេញតំណាងឯកសារកូដមួយ (CODE_STRUCTURE.md) ដែលពន្យល់ពីរចនាសម្ព័ន្ធកម្មវិធី និងរបៀបដែលមុខងារផ្សេងៗធ្វើការរួមគ្នា។

ការតភ្ជាប់ទៅពិភពលោកពិត

ភារកិច្ចនេះស្របទៅនឹងការថែរក្សាកូដដែលអ្នកអភិវឌ្ឍន៍វិជ្ជាជីវៈអនុវត្តជារៀងរាល់ថ្ងៃ។ នៅក្នុងវិស័យ:

  • ការត្រួតពិនិត្យកូដ វាយតម្លៃភាពងាយអាន និងភាពងាយក្នុងការថែរក្សា ដូចក្នុងភារកិច្ចនេះ
  • បំណុលបច្ចេកទេស ប្រមូលផ្តុំពេលកូដមិនត្រូវបានបញ្ចេញបានល្អជាសារៈសំខាន់
  • ការសហការក្រុម ពឹងផ្អែកលើកូដច្បាស់ណែននានិងមានការចេញតំណាងឯកសារល្អដែលសមាសភាពថ្មីអាចយល់បាន
  • ការជួសជុលកំហុស ងាយស្រួលក្នុងកូដដែលរៀបចំបានល្អជាមួយការសម្រួលដ៏ត្រឹមត្រូវ

ជំនាញដែលអ្នកកំពុងបង្រៀននៅទីនេះ - ដកស្រង់អថេរ កាត់បន្ថយការប្រហែលគ្នា និងសរសេរឯកសារច្បាស់លាស់ - គឺមានសារៈសំខាន់​សម្រាប់ការអភិវឌ្ឍន៍សូហ្វវែរ​វិជ្ជាជីវៈ។


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