75 KiB

Raw Permalink Blame History Unescape Escape

ការបង្កើតកម្មវិធីធនាគារ ភាគ 4៖ គំនិតនៃការគ្រប់គ្រងស្ថានភាព

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

ផ្លូវសរុបចាប់ផ្ដើមសម្រាប់អ្នកអភិវឌ្ឍដែលភ្លក់ពេល

flowchart LR
    A[⚡ 5 នាទី] --> B[បញ្ជូនបញ្ហារដ្ឋ]
    B --> C[បង្កើតអចលនវត្ថុរដ្ឋកណ្ដាល]
    C --> D[បន្ថែមមុខងារ updateState]
    D --> E[មើលឃើញការកែលម្អភ្លាមៗ]

នាទីទី 1៖ សាកល្បងបញ្ហាស្ថានភាពបច្ចុប្បន្ន - លេងក្នុងគណនី, បន្តទំព័រ, សង្កេតការចេញពីប្រព័ន្ធ
នាទីទី 2៖ ជំនួស let account = null ជា let state = { account: null }
នាទីទី 3៖ បង្កើតមុខងារ updateState() សាមញ្ញសម្រាប់បច្ចុប្បន្នភាពត្រួតត្រា
នាទីទី 4៖ បន្តបញ្ចូលមុខងារមួយឲ្យប្រើគំរូថ្មី
នាទីទី 5៖ សាកល្បងភាពអាចទាយបានកាន់តែល្អ និងសមត្ថភាពកែប្រែបញ្ហា

តេស្តរ៉ាប់រងលឿន៖

// មុន៖ រដ្ឋមានការបង្ហោះចេញ
let account = null; // បាត់ខាតពេលធ្វើការបង្ហាញឡើងវិញ!

// បន្ទាប់៖ រដ្ឋកណ្តាល
let state = Object.freeze({ account: null }); // ត្រួតត្រា និងអាចតាមដានបាន!

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

🗺️ ដំណើររៀនរបស់អ្នកតាមរយៈការជំនាញគ្រប់គ្រងស្ថានភាព

journey
    title ពីស្ថានភាពចែកចាយទៅស្ថាបត្យកម្មវិជ្ជាជីវៈ
    section ការវិភាគបញ្ហា
      សម្គាល់បញ្ហាចាញ់ស្ថានភាព: 3: You
      យល់ដឹងពីការអាប់ដេតចែកចាយ: 4: You
      ស្គាល់ពីតម្រូវការស្ថាបត្យកម្ម: 6: You
    section ការត្រួតពិនិត្យមជ្ឈមណ្ឌល
      បង្កើតអ 객체ស្ថានភាពសហគ្រិន: 5: You
      អនុវត្តការអាប់ដេតមានការគ្រប់គ្រង: 7: You
      បន្ថែមលំនាំមិនអាចបម្លែងបាន: 8: You
    section ការបន្ថែមភាពជាប់ពាក់ព័ន្ធ
      អនុវត្តlocalStorage: 6: You
      ដំណោះស្រាយការបម្លែងទិន្នន័យ: 7: You
      បង្កើតការតភ្ជាប់សម័យ: 9: You
    section ការសម្របសម្រួលភាពស្រស់ថ្មី
      ដោះស្រាយទិន្នន័យចាស់: 5: You
      សាងសង់ប្រព័ន្ធធ្វើឱ្យស្រស់: 8: You
      សម្រេចភាពសមមូលត្រឹមត្រូវ: 9: You

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

វិញ្ញាសាមុខមុខវិជ្ជា

ការណែនាំ

ការគ្រប់គ្រងស្ថានភាពគឺដូចជាប្រព័ន្ធណាវីហ្គេសិនលើយានយន្ត Voyager – ពេលអ្វីគ្រប់យ៉ាងដំណើរការល្អ អ្នកមិនសង្កេតឃើញវាទេ។ ប៉ុន្តែពេលអ្វីមិនធ្វើការ វាគឺជាការប្រៀបធៀបចម្បងរវាងការឈានដល់លំហក្រៅផែនដី និងរុញបាត់បង់ក្នុងសត្វព្រៃគម្ងាត់អាកាសយាន។

នៅក្នុងការអភិវឌ្ឍគេហទំព័រ ស្ថានភាពតំណាងឲ្យអ្វីៗទាំងអស់ដែលកម្មវិធីរបស់អ្នកត្រូវចាំ៖ ស្ថានភាពចុះបញ្ជីអ្នកប្រើ, ទិន្នន័យฟॉर्म, ប្រវត្ដិការរុករក, និងស្ថានភាពផ្ទាំងអ្នកប្រើបណ្តោះអាសន្ន។

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

នេះមិនមែនជារឿងកូដថាបានបញ្ហា—វាគឺជាការឈឺចាប់ធម្មជាតិនៃការ៉ត់កម្រិតនៅពេលកម្មវិធីមកដល់កម្រិតស្មុគស្មាញមួយ។ អ្នកអភិវឌ្ឍទាំងអស់ត្រូវជួបប្រទះបញ្ហាាទាំងនេះដូចជាកម្មវិធីរបស់ពួកគេបំលែងពី "ការសាកល្បង" ទៅជា "រួចរាល់សម្រាប់ផលិតកម្ម"។

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

ការត្រៀមខ្លួន

មុនចូលទៅក្នុងគំនិតគ្រប់គ្រងស្ថានភាព អ្នកត្រូវតែត្រូវបានតំឡើងបរិយាកាសអភិវឌ្ឍរបស់អ្នកយ៉ាងត្រឹមត្រូវ និងឯកសារមូលដ្ឋានកម្មវិធីធនាគាររបស់អ្នកត្រូវមាន។ មេរៀននេះសាងសង់បន្តតាមគំនិត និងកូដពីផ្នែកមុនៗនៃស៊េរីនេះ។

ប្រាកដថាអ្នកមានធាតុដូចខាងក្រោមរួចជាស្រេចមុនបន្ត៖

ការតំឡើងចាំបាច់៖

បញ្ចប់មេរៀន ទាញទិន្នន័យ - កម្មវិធីរបស់អ្នកគួរតែដំណើរការនឹងបង្ហាញទិន្នន័យគណនីបានជោគជ័យ
ដំឡើង Node.js នៅលើប្រព័ន្ធរបស់អ្នកសម្រាប់រត់ API ផ្នែកខាងក្រោយ
ចាប់ផ្ដើម ម៉ាស៊ីនមេ API នៅក្នុងម៉ាស៊ីនបច្ចេកទេស ដើម្បីគ្រប់គ្រងប្រតិបត្ដិការទិន្នន័យគណនី

សាកល្បងបរិយាកាសរបស់អ្នក៖

បញ្ជាក់ថា ម៉ាស៊ីនមេ API របស់អ្នកដំណើរការបានត្រឹមត្រូវដោយបញ្ជាទីបញ្ជា ខាងក្រោមក្នុងតំបន់បញ្ជា៖

curl http://localhost:5000/api
# -> គួរត្រូវបង្វិលត្រឡប់ "Bank API v1.0.0" ជាលទ្ធផល

អ្វីដែលបញ្ជាពីនេះធ្វើ៖

ផ្ញើ សំណើ GET ទៅម៉ាស៊ីនមេ API មូលដ្ឋានរៀបចំ
សាកល្បង ការតភ្ជាប់ និងបញ្ជាក់ថាម៉ាស៊ីនមេឆ្លើយតប
ត្រឡប់ ព័ត៌មានអំពីកំណែ API ប្រសិនបើដំណើរការត្រឹមត្រូវ

🧠 ទិដ្ឋភាពស្ថាបត្យកម្មគ្រប់គ្រងស្ថានភាព

mindmap
  root((ការគ្រប់គ្រងស្ថានភាព))
    Current Problems
      Session Loss
        Page Refresh Issues
        Browser Close Impact
        Variable Reset Problems
      Scattered Updates
        Multiple Modification Points
        Debugging Challenges
        Unpredictable Behavior
      Incomplete Cleanup
        Logout State Issues
        Memory Leaks
        Security Concerns
    Centralized Solutions
      Unified State Object
        Single Source of Truth
        Predictable Structure
        Scalable Foundation
      Controlled Updates
        Immutable Patterns
        Object.freeze Usage
        Function-Based Changes
      State Tracking
        History Management
        Debug Visibility
        Change Auditing
    Persistence Strategies
      localStorage Integration
        Session Continuity
        JSON Serialization
        Automatic Sync
      Data Freshness
        Server Refresh
        Stale Data Handling
        Balance Optimization
      Storage Optimization
        Minimal Data
        Performance Focus
        Security Considerations

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

ការពិនិត្យបញ្ហាស្ថានភាពបច្ចុប្បន្ន

ដូចជា Sherlock Holmes កំពុងពិនិត្យកន្លែងហិង្សា យើងត្រូវយល់ព្រមអំពីអ្វីដែលកើតឡើងយ៉ាងច្បាស់ក្នុងអនុម័តបច្ចុប្បន្នមុនពេលដោះស្រាយបញ្ហាសម័យអ្នកប្រើបាត់បង់។

យើងធ្វើតេស្តសាមញ្ញមួយ ដើម្បីបង្ហាញបញ្ហាគ្រប់គ្រងស្ថានភាពមូលដ្ឋាន៖

🧪 សាកល្បងតេស្តរ៉ាប់រងនេះ៖

ចូលក្នុងកម្មវិធីធនាគាររបស់អ្នក និងចូលទៅផ្ទាំងគ្រប់គ្រង
បន្តទំព័រកម្មវិធី
មើលថាអ្វីកើតឡើងចំពោះស្ថានភាពចូលប្រព័ន្ធរបស់អ្នក

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

បញ្ហាក្នុងការអនុវត្តបច្ចុប្បន្ន៖

អថេរ account ដែលសាមញ្ញពី មេរៀនមុន បង្កើតបញ្ហាសំខាន់បី ដែលប៉ះពាល់ទាំងបទពិសោធអ្នកប្រើ និងភាពងាយស្រួលថែរក្សាកូដ៖

បញ្ហា	មូលហេតុបច្ចេកទេស	ពោលពាស់អ្នកប្រើ
បាត់បង់សម័យ	បន្តទំព័រដើម្បីសម្អាតអថេរ JavaScript	អ្នកប្រើត្រូវចុះបញ្ជីឡើងវិញជាបន្តបន្ទាប់
ការអាប់ដេតចត់ចត	មុខងារច្រើនកែប្រែស្ថានភាពផ្ទាល់	ការកែសម្រួលកូដកាន់តែពិបាក
សំអាតមិនពេញលេញ	ចេញពីប្រព័ន្ធមិនសម្អាតតម្លៃស្ថានភាពទាំងអស់	មានហានិភ័យសុវត្ថិភាព និងឯកជនភាព

បញ្ហាស្ថាបត្យកម្ម៖

ដូចជាការរចនាតំបន់ជាប់ទឹកស្ដើងរបស់ Titanic ដែលវាពិតជាមាំមុតរហូតដល់ដល់ខ្ទង់ទឹកអាចបូមចូលច្រើន តែការជួសជុលបញ្ហានៅក្នុងមុខងារតែមួយមិនអាចដោះស្រាយបញ្ហាស្ថាបត្យកម្មមូលដ្ឋានបានទេ។ យើងត្រូវការជម្រើសគ្រប់គ្រងស្ថានភាពយ៉ាងទូលំទូលាយ។

💡 តើអ្វីដែលយើងកំពុងព្យាយាមសម្រេចនៅទីនេះ?

ការគ្រប់គ្រងស្ថានភាព ជាដំណោះស្រាយពីរបញ្ហាផ្នែកមូលដ្ឋាន៖

តើទិន្នន័យរបស់ខ្ញុំនៅទីណា?៖ តាមដានអំពីព័ត៌មានដែលយើងមាន និងប្រភពទិន្នន័យ
តើគ្រប់គ្នាកំពុងនៅលើទំព័រដូចគ្នា?៖ ប្រាកដថាអ្វីដែលអ្នកប្រើឃើញផ្គូរផ្គងនឹងអ្វីដែលកើតឡើងពិតប្រាកដ

ផែនការល្បឿនរបស់យើង៖

ផ្ទុយពីការនឹងតាមបណ្តេញខ្លួន យើងនឹងបង្កើតប្រព័ន្ធ គ្រប់គ្រងស្ថានភាពមួយកណ្តាល។ គិតថាវាទាក់អោយមានមនុស្សម្នាក់ចាត់ចែងអ្វីៗសំខាន់ៗទាំងអស់៖

flowchart TD
    A[សកម្មភាពអ្នកប្រើ] --> B[អ្នកដឹកនាំព្រឹត្តិការណ៍]
    B --> C[មុខងារ updateState]
    C --> D{ការផ្ទៀងផ្ទាត់រដ្ឋ}
    D -->|ត្រឹមត្រូវ| E[បង្កើតរដ្ឋថ្មី]
    D -->|មិនត្រឹមត្រូវ| F[ដោះស្រាយកំហុស]
    E --> G[Object.freeze]
    G --> H[អាប់ដេត localStorage]
    H --> I[បណ្តះបណ្តាល UI]
    I --> J[អ្នកប្រើឃើញការផ្លាស់ប្តូរ]
    F --> K[អ្នកប្រើឃើញកំហុស]
    
    subgraph "ស្រទាប់គ្រប់គ្រងរដ្ឋ"
        C
        E
        G
    end
    
    subgraph "ស្រទាប់ភ្ជាប់ទុកជាប់"
        H
        L[localStorage]
        H -.-> L
    end

យល់ពីចរន្តទិន្នន័យនេះ៖

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

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

⚠️ ប្រធានបទកម្រិតខ្ពស់៖ យើងមិនបានគ្របដណ្តប់លើការបន្ទាន់ UI ដោយស្វ័យប្រវត្តិ ដែលកើតឡើងតាមការផ្លាស់ប្តូរស្ថានភាពទេ ព្រោះវាស្ថិតនៅក្នុងគំនិត Reactive Programming។ សូមគិតថាវាជាជំហានបន្ទាប់ល្អសម្រាប់ដំណើររៀនរបស់អ្នក!

ភារកិច្ច៖ កណ្តាលបង្កើតរចនាសម្ព័ន្ធស្ថានភាព

ចាប់ផ្តើមបម្លែងការគ្រប់គ្រងស្ថានភាពដែលចាច់ចោលជាច្រើនទៅជាប្រព័ន្ធមួយកណ្តាល។ ជំហាននេះបង្កើតមូលដ្ឋានសម្រាប់ការកែលម្អទាំងអស់ខាងក្រោម។

ជំហាន 1៖ បង្កើតអ៊ីម៉ែលស្ថានភាពមួយកណ្តាល

ជំនួសការបញ្ជាក់ទំរង់ account សាមញ្ញ៖

let account = null;

ជាមួយវត្ថុស្ថានភាពដែលមានរចនាសម្ព័ន្ធ៖

let state = {
  account: null
};

ហេតុអ្វីការផ្លាស់ប្តូរនេះសំខាន់៖

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

ជំហាន 2៖ បន្ទាន់សម័យគំរូចូលដំណើរការស្ថានភាព

បន្ទាន់សម័យមុខងាររបស់អ្នកឲ្យប្រើរចនាសម្ព័ន្ធស្ថានភាពថ្មី៖

នៅក្នុងមុខងារ register() និង login() ជំនួស៖

account = ...

ជាមួយ៖

state.account = ...

នៅក្នុងមុខងារ updateDashboard() បន្ថែមបន្ទាត់នេះនៅលើកំពូល៖

const account = state.account;

អ្វីដែលបន្ទាន់សម័យទាំងនេះធ្វើបាន៖

រក្សាទុកមុខងារញឹកញាប់ដោយបង្កើតរចនាសម្ព័ន្ធល្អ
រៀបចំឲ្យកូដរបស់អ្នករួចរាល់សម្រាប់ការគ្រប់គ្រងស្ថានភាពស៊្វិតក្រោយ
បង្កើតគំរូដូចគ្នាសម្រាប់ចូលដំណើរការទិន្នន័យស្ថានភាព
បង្កើតមូលដ្ឋានសម្រាប់ការអាប់ដេតស្ថានភាពកណ្តាល

💡 ចំណាំ៖ ការកំណត់នេះមិនដោះស្រាយបញ្ហាថ្ងៃនេះទេ, ប៉ុន្តែវាបង្កើតមូលដ្ឋានសម្រាប់កែលម្អដ៏មានសក្តានុពលនៅថ្ងៃក្រោយ!

🎯 ពិនិត្យការសិក្សាធ្វើកណ្តាល

ឈប់ និងគិតពិចារណា: អ្នកទើបតែអនុវត្តមូលដ្ឋានគ្រប់គ្រងស្ថានភាពមួយកណ្តាល។ នេះជាការសម្រេចចិត្តស្ថាបត្យកម្មសំខាន់មួយ។

ការវាយតម្លៃខ្លួនឯងរហ័ស៖

តើអ្នកបកស្រាយបានទេថាហេតុអ្វីការកណ្តាលស្ថានភាពក្នុងវត្ថុមួយល្អជាងអថេរចត់ចត?
តើអ្វីអាចកើតឡើង ប្រសិនបើអ្នកភ្លេចបន្ទាន់សម័យមុខងារដើម្បីប្រើ state.account?
តើគំរូនេះរៀបចំកូដរបស់អ្នកដើម្បីរៀនមុខងារខ្ពស់យ៉ាងដូចម្តេច?

ការតភ្ជាប់ជាក់ស្តែង៖ គំរូកណ្តាលនេះជាមូលដ្ឋាននៃបណ្ណាល័យសម័យថ្មីដូចជា Redux, Vuex, និង React Context។ អ្នកកំពុងសាងសង់គំនិតស្ថាបត្យកម្មដូចគ្នាមានប្រើនៅកម្មវិធីធំនៅពិភពលោក។

សំណួរសម្រួល៖ ប្រសិនបើអ្នកត្រូវបន្ថែមចំណូលចិត្តអ្នកប្រើ (ពីរបៀបផ្ទាំង, ភាសា) ចូលក្នុងកម្មវិធីរបស់អ្នក តើអ្នកនឹងបន្ថែមវាទីណានៅក្នុងរចនាសម្ព័ន្ធស្ថានភាព? វានឹងពង្រីកយ៉ាងដូចម្តេច?

អនុវត្តការអាប់ដេតស្ថានភាពត្រួតត្រា

ដោយស្ថានភាពរបស់យើងបានកណ្តាល របៀបបន្ទាប់គឺបង្កើតមុខងារត្រួតត្រាសម្រាប់ការផ្លាស់ប្តូរទិន្នន័យ។ វានឹងធានាថាការផ្លាស់ប្តូរស្ថានភាពអាចទាយបាន និងងាយស្រួលកែប្រែបញ្ហា។

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

ការគ្រប់គ្រងស្ថានភាពដែលមិនអាចផ្លាស់ប្តូរបាន

យើងនឹងចិញ្ចឹម state ជា អចលនវត្ថុ ដោយមានន័យថាយើងមិនប្តូរតម្លៃវាបញ្ញាក់ទៅលើវាច្រើនដងទេ។ ការផ្លាស់ប្តូរបានលើកទឹកចិត្តឲ្យបង្កើតវត្ថុស្ថានភាពថ្មីជាមួយទិន្នន័យដែលបានត្រួតត្រា។

បើទោះបីជាវិធីនេះអាចត្រូវបានគេចាត់ទុកថាមិនមានប្រសិទ្ធភាពជាមុន ក៏ដោយវាផ្តល់អត្ថប្រយោជន៍ច្រើនសម្រាប់ការកែប្រែបញ្ហា ការប្រឡង និងរក្សាសមត្ថភាពទាយបាននៃកម្មវិធី។

អត្ថប្រយោជន៍នៃការគ្រប់គ្រងស្ថានភាពអចលនវត្ថុ៖

អត្ថប្រយោជន៍	ការពិពណ៌នា	ឥទ្ធិពល
អាចទាយបាន	ការផ្លាស់ប្តូរធ្វើតែមុខងារត្រួតត្រា	ងាយស្រួលកែប្រែបញ្ហានិងសាកល្បង
តាមប្រវត្តិ	រាល់ការផ្លាស់ប្តូរស្ថានភាពបង្កើតវត្ថុថ្មី	អនុញ្ញាតឲ្យមានមុខងារលុបចោល/ធ្វើម្ដងទៀត
ការពារបញ្ហាប្លែកៗ	មិនមានការផ្លាស់ប្តូរចៃដន្យ	បង្ការបញ្ហាដល់ឱ្យមិនច្បាស់លាស់
អុប្ទីម៉ាញ្យេសិនសមត្ថភាព	ងាយស្កេនពេលស្ថានភាពផ្លាស់ប្តូរ	អាចអាប់ដេត UI ដោយមានប្រសិទ្ធភាព

JavaScript និង Object.freeze() សម្រាប់អចលនវត្ថុ៖

JavaScript ផ្តល់ Object.freeze() សម្រាប់ការការពារការផ្លាស់ប្តូរវត្ថុ៖

const immutableState = Object.freeze({ account: userData });
// ការព្យាយាមណាមួយក្នុងការផ្លាស់ប្តូរ immutableState នឹងបង្កើតកំហុស

ពិពណ៌នាអ្វីដែលកើតឡើង៖

ការការពារ ការចំណតតម្លៃផ្ទាល់ និងការលុប
បោះបង់ ការខូចខាតដែលចង់កើតឡើង
ធានា ការផ្លាស់ប្តូរត្រូវតែផ្លាស់ប្តូរតាមមុខងារត្រួតត្រា
បង្កើត កិច្ចសន្យាច្បាស់លាស់ពីរបៀបដែលអាចប្រើប្រាស់ស្ថានភាព

💡 ចំណេះដឹងជ្រៅ៖ សូមរៀនអំពីការបំបែក shallow និង deep របស់អចលនវត្ថុនៅក្នុង ឯកសារ MDN। ការយល់ដឹងនេះសំខាន់ណាស់សម្រាប់រចនាសម្ព័ន្ធស្ថានភាពស្មុគស្មាញ។

stateDiagram-v2
    [*] --> StateV1: ស្ថានភាពដំបូង
    StateV1 --> StateV2: updateState('account', newData)
    StateV2 --> StateV3: updateState('account', anotherUpdate)
    StateV3 --> StateV4: updateState('preferences', userSettings)
    
    note right of StateV1
        Object.freeze()
        អចលន៍
        អាចផ្ទៀងផ្ទាត់កំហុសបាន
    end note
    
    note right of StateV2
        វត្ថុថ្មីបានបង្កើត
        រក្សាស្ថានភាពមុន
        ការផ្លាស់ប្តូរដែលអាចទាយបាន
    end note

ភារកិច្ច

បង្កើតមុខងារ updateState() ថ្មី៖

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

នៅក្នុងមុខងារនេះ យើងបង្កើតវត្ថុស្ថានភាពថ្មី និងបង្កាប់ចម្លងទិន្នន័យពីស្ថានភាពមុនដោយប្រើ * spread (...) operator*. បន្ទាប់មក យើងប្តូរតម្លៃគុណលក្ខណៈពិសេសមួយនៅក្នុងវត្ថុស្ថានភាពដោយប្រើ bracket notation [property] សម្រាប់បញ្ចូលតម្លៃ។ ចុងក្រោយ បិទវត្ថុនេះដោយ Object.freeze() ដើម្បីការពារការផ្លាស់ប្តូរ។ ឥឡូវនេះ យើងមានតែគុណលក្ខណៈ account តែប៉ុណ្ណោះ តែអ្នកអាចបន្ថែមគុណលក្ខណៈបន្ថែមបានយ៉ាងច្រើនតាមតម្រូវការនៅក្នុងស្ថានភាពនេះ។

យើងក៏បន្ទាន់សម័យការចាប់ផ្ដើម state ដើម្បីធានាថាស្ថានភាពដំបូងគឺបានតំរឹងផងដែរ៖

let state = Object.freeze({
  account: null
});

បន្ទាប់មក បន្ទាន់សម័យមុខងារ register ដោយជំនួសការបញ្ជូល state.account = result; ជា៖

updateState('account', result);

ធ្វើដូចគ្នាជាមួយមុខងារ login ជំនួស state.account = data; ជា៖

updateState('account', data);

យើងនឹងចាប់ឱកាសនេះដើម្បីជួសជុលបញ្ហាទិន្នន័យគណនីមិនត្រូវបានសម្អាតពេលអ្នកប្រើចុចប៊ូតុង Logout។

បង្កើតមុខងារ logout() ថ្មី៖

function logout() {
  updateState('account', null);
  navigate('/login');
}

នៅក្នុង updateDashboard(), ជំនួសការបង្វ្យន់ return navigate('/login'); ជា return logout();

សូមសាកល្បងចុះឈ្មោះគណនីថ្មី ចេញពីប្រព័ន្ធ ហើយចូលវិញ ដើម្បីប្រាកដថាអ្វីៗនៅតែដំណើរការល្អ។

ជំនួយ៖ អ្នកអាចមើលឃើញការផ្លាស់ប្តូរស្ថានភាពទាំងអស់ ដោយបន្ថែម console.log(state) នៅខាងក្រោម updateState() ហើយបើក console នៅកន្លែងអភិវឌ្ឍកម្មវិធីក្នុងកម្មវិធីរុករករបស់អ្នក។

អនុវត្តការរក្សាទុកទិន្នន័យរយៈពេលយូរ

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

សូមគិតឲ្យបានថា នាឡិកាអាតូមតិកកាន់តែមានភាពត្រឹមត្រូវទោះបីមានការបាត់បង់ថាមពលដោយផ្ទុកស្ថានភាពសំខាន់ក្នុងមេម៉ូរីមិនបាត់បង់។ ដូចគ្នា កម្មវិធីវេបសាយតម្រូវឲ្យមានមេកានិចផ្ទុកដើម្បីរក្សាទុកទិន្នន័យអ្នកប្រើសំខាន់ៗឆ្លងកាត់សម័យកម្មវិធីរុករក និងបន្តទំព័រ។

សំណួរយុទ្ធសាស្រ្តសម្រាប់ការរក្សាទុកទិន្នន័យរយៈពេលយូរ៖

មុនអនុវត្តការរក្សាទុក សូមពិចារណារឿងសំខាន់ៗខាងក្រោម៖

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

ជម្រើសផ្ទុកទិន្នន័យក្នុងកម្មវិធីរុករក៖

កម្មវិធីរុករកទំនើបផ្តល់នូវមេកានិចផ្ទុកខ្លះៗ ដែលត្រូវបានច្នៃប្រឌិតសម្រាប់ករណីប្រើប្រាស់ខុសៗគ្នា៖

API ផ្ទុកដើម៖

localStorage៖ ការផ្ទុក key/value ដ៏ថេរចន្លោះវគ្គកម្មវិធីរុករក
- រក្សាទុក ទិន្នន័យជាប្រចាំក្នុងរយៈពេលវគ្គកម្មវិធីរុករក
- គ្មានបញ្ហា នៅពេលកម្មវិធីរុករកបិទ និងកុំព្យូទ័រចាប់ផ្តើមឡើងវិញ
- មានដែនកំណត់ ត្រឹមតែដែននៃគេហទំព័រពិសេស
- ល្អឥតខ្ចោះ សម្រាប់ចំណង់ចំណូលចិត្តអ្នកប្រើ និងស្ថានភាពចូលគណនី
sessionStorage៖ ការផ្ទុកក្នុងវគ្គកាលបណ្ដោះអាសន្ន
- ដំណើរការ ដូច localStorage នៅពេលវគ្គកម្មវិធីរំកិល
- លុបចោល ដោយស្វ័យប្រវត្តិពេលបិទចុងតាបកម្មវិធីរុករក
- សមរម្យ សម្រាប់ទិន្នន័យជាបណ្ដោះអាសន្នដែលមិនត្រូវគេចងចាំ
HTTP Cookies៖ ការផ្ទុកចែករំលែកពីម៉ាស៊ីនបម្រើ
- បញ្ចូនដោយស្វ័យប្រវត្តិ ជាមួយសំណើរម៉ាស៊ីនបម្រើរាល់ដង
- ល្អឥតខ្ចោះ សម្រាប់តួអក្សរសម្គាល់ផ្ទៀងផ្ទាត់អត្តសញ្ញាណ
- មានកំណត់ទំហំ ហើយអាចប៉ះពាល់លើការប្រតិបត្តិ

តម្រូវការសំលាប់ទិន្នន័យ៖

ទាំង localStorage និង sessionStorage ផ្ទុកតែនូវ អក្សរ តែប៉ុណ្ណោះៈ

// បម្លែងវត្ថុទៅជាខ្សែអក្សរ JSON សម្រាប់រក្សាទុក
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// បកប្រែកខ្សែអក្សរ JSON វិញទៅជាវត្ថុពេលយកមកវិញ
const savedAccount = JSON.parse(localStorage.getItem('account'));

ការយល់ដឹងពីការសំលាប់ទិន្នន័យ៖

បម្លែង គ្រឿងអេឡិចត្រូនិច JavaScript ទៅជាអក្សរ JSON តាមប្រើ JSON.stringify()
កសាងឡើងវិញ វត្ថុពី JSON ដោយប្រើ JSON.parse()
ដោះស្រាយ វត្ថុស្មុគស្មាញក្នុងទ្រង់ទ្រាយជាលំដាប់ និងអារ៉េដោយស្វ័យប្រវត្តិ
បរាជ័យ នៅលើមុខងារ ទិន្នន័យមិនកំណត់ និងយោងវង់ចង

💡 ជម្រើសកម្រិតខ្ពស់៖ សម្រាប់កម្មវិធីក្រៅបណ្តាញស្មុគស្មាញដែលមានទិន្នន័យធំ ចូរពិចារណាប្រើ API IndexedDB។ វាបង្កើតមូលដ្ឋានទិន្នន័យពេញលេញនៅមុខម្ចាស់ ប៉ុន្តែតម្រូវឱ្យមានការអភិវឌ្ឍស្មុគស្មាញជាងនេះ។

quadrantChart
    title ជម្រើសផ្ទុកទិន្នន័យនៅក្នុងកម្មវិធីរុករក
    x-axis ស្មុគស្មាញទាប --> ស្មុគស្មាញខ្ពស់
    y-axis រយៈពេលខ្លី --> រយៈពេលវែង
    
    quadrant-1 ឧបករណ៍វិជ្ជាជីវៈ
    quadrant-2 ការរក្សាទុកទិន្នន័យងាយៗ
    quadrant-3 ការផ្ទុកទិន្នន័យបណ្ដោះអាសន្ន
    quadrant-4 ប្រព័ន្ធឧត្តមភាព
    
    localStorage: [0.3, 0.8]
    sessionStorage: [0.2, 0.2]
    HTTP Cookies: [0.6, 0.7]
    IndexedDB: [0.9, 0.9]
    Memory Variables: [0.1, 0.1]

ការងារ៖ អនុវត្តការប្រើប្រាស់ `localStorage` ដើម្បីរក្សាទុកថេរ

យើងនឹងអនុវត្តផ្លូវកាត់ផ្ទុកថេរដើម្បីឲ្យអ្នកប្រើនៅតែចូលគណនីរហូតដល់ពួកគេចេញពីប្រព័ន្ធយ៉ាងច្បាស់។ យើងនឹងប្រើ localStorage ដាក់ទិន្នន័យគណនីក្នុងវគ្គកម្មវិធីរុករក។

ជំហានទី 1៖ កំណត់កំណត់រចនាសម្ព័ន្ធផ្ទុក

const storageKey = 'savedAccount';

អ្វីដែលថេរនេះផ្ដល់ជូន៖

បង្កើត អត្តសញ្ញាណឯកសិទ្ធសម្រាប់ទិន្នន័យដែលបានផ្ទុក
ទប់ស្កាត់ ការបញ្ចូលកូដខុសក្នុងកូនគ្រាប់ key
ធ្វើឱ្យ លែងដូរកូនគ្រាប់ key អាចធ្វើបានស្រួលបើត្រូវការ
អនុវត្តតាម បច្ចេកទេសល្អបំផុតសម្រាប់កូដដែលងាយថែទាំ

ជំហានទី 2៖ បន្ថែមការផ្ទុកថេរដោយស្វ័យប្រវត្តិ

បន្ថែមបន្ទាត់នេះនៅចុងសមាសភាព updateState() ៖

localStorage.setItem(storageKey, JSON.stringify(state.account));

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

បម្លែង អចលនវត្ថុគណនីទៅជា JSON string សម្រាប់ការផ្ទុក
រក្សាទុក ទិន្នន័យដោយប្រើកូនគ្រាប់ storage key ឯកសិទ្ធ
ដំណើរការ ដោយស្វ័យប្រវត្តិរាល់ពេលមានការផ្លាស់ប្តូរទីតាំង
ធានា ទិន្នន័យផ្ទុកតែងតែសមស្របជាមួយស្ថានភាពបច្ចុប្បន្ន

💡 អត្ថប្រយោជន៍ស្ថាបត្យកម្ម៖ ព្រោះយើងបានផ្ដោតបញ្ចូលការផ្លាស់ប្តូរស្ថានភាពទាំងអស់តាម updateState() មួយប៉ុណ្ណោះ ចំណុចនេះបង្ហាញពីអនុភាពនៃការជ្រើសរើសរៀបចំល្អ!

ជំហានទី 3៖ ស្ដារឡើងវិញស្ថានភាពពេលផ្ទុកកម្មវិធី

បង្កើតមុខងារចាប់ផ្តើមសម្រាប់ស្ដារឡើងទិន្នន័យដែលបានរក្សាទុក៖

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // កូដផ្ដើមដំណើរការដើមរបស់យើង
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

ការយល់ពីដំណើរការ initialization៖

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

ជំហានទី 4៖ អុបទីម៉ាយសម្រាប់ Default Route

ធ្វើបច្ចុប្បន្នភាព default route ដើម្បីអនុវត្តកម្មវិធី persistence៖

នៅក្នុង updateRoute() ជំនួស ៖

// ប្ដូរ: return navigate('/login');
return navigate('/dashboard');

ហេតុអ្វីការផ្លាស់ប្តូរនេះមានហេតុផល៖

ប្រើប្រាស់ ប្រព័ន្ធ persistence ថ្មីរបស់យើងយ៉ាងមានប្រសិទ្ធភាព
អនុញ្ញាត dashboard រៀបចំការត្រួតពិនិត្យ authentication
បញ្ជូនត្រឡប់ ចូលប្រព័ន្ធដោយស្វ័យប្រវត្តិ បើមិនមានវគ្គកាលស្បែករក្សាទុក
បង្កើត បទពិសោធន៍ប្រើប្រាស់ដូចជាយូរអង្វែង

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

ចូលទៅក្នុងកម្មវិធីធនាគាររបស់អ្នក
បញ្ចូលទំព័ររុករកឡើងវិញ
បញ្ជាក់ថាអ្នកនៅតែបានចូល និងនៅលើ dashboard
បិទហើយបើកកម្មវិធីរុករកឡើងវិញ
ទៅកាន់កម្មវិធីរបស់អ្នក និងបញ្ជាក់ថាអ្នកនៅតែចូលប្រើបាន

🎉 សមិទិ្ធបានចំពេញ៖ អ្នកបានអនុវត្តការគ្រប់គ្រងស្ថានភាពថេរបានជោគជ័យ! កម្មវិធីរបស់អ្នកឥឡូវមានអាកប្បកិរិយាដូចកម្មវិធីវេបវិជ្ជាជីវៈ។

🎯 ពិនិត្យការសិក្សា៖ ស្ថាបត្យកម្ម persistence

ការយល់ដឹងស្ថាបត្យកម្ម៖ អ្នកបានអនុវត្តស្រទាប់ persistence ស្មុគស្មាញ ដែលចម្រុះបទពិសោធន៍អ្នកប្រើជាមួយភាពស្មុគស្មាញនៃការគ្រប់គ្រងទិន្នន័យ។

មូលដ្ឋានគំនិតសំខាន់ៗបានបញ្ចប់៖

JSON Serialization៖ បម្លែងវត្ថុស្មុគស្មាញទៅជាstring ដែលអាចផ្ទុកបាន
Synchronization ជាស្វ័យប្រវត្តិ៖ ការផ្លាស់ប្តូរស្ថានភាពបង្កបន្ទុកថេរដោយស្វ័យប្រវត្តិ
ការស្ដារវគ្គកាល៖ កម្មវិធីអាចស្ដារបរិបទអ្នកប្រើបន្ទាប់ពីមានការជ្រេកចិត្ត
Persistence កណ្ដាល៖ មុខងារប្តូរតែមួយគ្រប់គ្រងការផ្ទុកទាំងអស់

ការតភ្ជាប់ឧស្សាហកម្ម៖ រចនាបណ្តុំ persistence នេះគឺសម្រាប់កម្មវិធីវេបរួម (PWAs), កម្មវិធីក្រៅបណ្តាញជាមុន, និងបទពិសោធន៍វេបទូរស័ព្ទទំនើប។ អ្នកកំពុងកសាងសមត្ថភាពកម្រិតផលិតកម្ម។

សំណួរត្រលប់មកវិញ៖ តើអ្នកនឹងកែប្រែប្រព័ន្ធនេះដូចម្តេច ដើម្បីគ្រប់គ្រងគណនីអ្នកប្រើច្រើនលើឧបករណ៍ដដែល? សូមពិចារណាអំពីការការពារ ភាពឯកជន និងសុវត្ថិភាព។

ការឆ្លើយតប persistence ជាមួយទិន្នន័យស្រស់

ប្រព័ន្ធ persistence របស់យើងរួចបានរក្សាទុកវគ្គកាលអ្នកប្រើបាន សូម្បីបង្កើតបញ្ហាថ្មីៈ ទិន្នន័យចាស់ (data staleness)។ ពេលមានអ្នកប្រើ ឬកម្មវិធីច្រើនផ្លាស់ប្តូរទិន្នន័យម៉ាស៊ីនបម្រើដូចគ្នា ទិន្នន័យ local cached នឹងក្លាយទៅជាចាស់។

ស្ថានភាពនេះដូចម្ដេចនៃអ្នកដឹកនាំដងកាំភ្លើង Viking ដែលពឹងផ្អែកលើផែនទីព្រលឹងផ្កាយដំបូង និងការសង្កត់មើលផ្កាយបច្ចុប្បន្ន។ ផែនទីផ្ដល់នូវភាពថេរ ប៉ុន្តែក្រុមដឹកនាំត្រូវការសង្កត់មើលថ្មីដើម្បីទទួលតាមលក្ខខណ្ឌប្រែប្រួល។ ដូចគ្នានេះ កម្មវិធីយើងត្រូវការស្ថានភាពអ្នកប្រើថេរនិងទិន្នន័យម៉ាស៊ីនបម្រើបច្ចុប្បន្ន។

🧪 រកឃើញបញ្ហាទិន្នន័យចាស់៖

ចូលទៅក្នុង dashboard ដោយប្រើគណនី test
ប្រតិបត្តិពាក្យបញ្ជាខាងក្រោមនៅក្នុង terminal ដើម្បីសម្តែងប្រតិបត្តិការពីប្រភពផ្សេង៖

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

បញ្ចូលទំព័ររុករក dashboard ជាថ្មី
សង្កេតមើលថាតើអ្នកអាចឃើញប្រតិបត្តិការថ្មីទេ

អ្វីដែលតេស្តនេះបង្ហាញ៖

បង្ហាញ ថា local storage អាចក្លាយជាចាស់ (outdated)
សម្តែង សេចក្ដីលំបាកពិតនៅកណ្តាលពិភពពេលទិន្នន័យផ្លាស់ប្តូរពីក្រៅកម្មវិធី
បង្ហាញ វិសោធន៍នៅចំណុចចំរូង persistence និងទិន្នន័យស្រស់

បញ្ហាទិន្នន័យចាស់៖

បញ្ហា	មូលហេតុ	ផលប៉ះពាល់ដល់អ្នកប្រើ
ទិន្នន័យចាស់	localStorage មិនផុតកំណត់ដោយស្វ័យប្រវត្តិ	អ្នកប្រើពិចារណាទិន្នន័យចាស់
ការផ្លាស់ប្តូរម៉ាស៊ីនបម្រើ	កម្មវិធី/អ្នកប្រើផ្សេងៗកែប្រែទិន្នន័យដូចគ្នា	ចម្លែកគ្នានៅលើវេទិការពហុ
Cache ទល់នឹងនិយមន័យពិត	Cache ក្នុងមូលដ្ឋានមិនដូចស្ថានភាពម៉ាស៊ីនបម្រើ	បទពិសោធន៍អតិថិជនអត់ល្អ និងច្របូកច្របល់

យុទ្ធសាស្រ្តដោះស្រាយ៖

យើងនឹងអនុវត្តលំនាំ "refresh on load" ដែលតុល្យភាពអត្ថប្រយោជន៍ persistence និងការចាំបាច់ទិន្នន័យស្រស់។ វាគ្រប់គ្រងបទពិសោធន៍ប្រើរលូន និងធានាសមត្ថភាពទិន្នន័យត្រឹមត្រូវ។

sequenceDiagram
    participant U as អ្នកប្រើ
    participant A as កម្មវិធី
    participant L as localStorage
    participant S as ម៉ាស៊ីនបម្រើ
    
    U->>A: បើកកម្មវិធី
    A->>L: ចូលរួមស្ថានភាពដែលបានរក្សាទុក
    L-->>A: សងមេកទទួលបានទិន្នន័យដែលបានផ្ទុកជាមុន
    A->>U: បង្ហាញUIភ្លាមៗ
    A->>S: ទាញទិន្នន័យថ្មី
    S-->>A: សងទិន្នន័យបច្ចុប្បន្ន
    A->>L: បន្ទាន់សម័យកំណត់ត្រា
    A->>U: បន្ទាន់សម័យ UI ជាមួយទិន្នន័យថ្មី

ការងារ៖ អនុវត្តប្រព័ន្ធបញ្ចូលទិន្នន័យថ្មី

យើងនឹងបង្កើតប្រព័ន្ធដែលយកទិន្នន៍ថ្មីពីម៉ាស៊ីនបម្រើដោយស្វ័យប្រវត្តិ ខណៈដែលរក្សាតុល្យភាពអត្ថប្រយោជន៍ persistence។

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

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

យល់ដឹងពីតំរូវការមុខងារ៖

ត្រួតពិនិត្យ ថាតើមានអ្នកចូលគណនី (state.account មាន)
បញ្ជូនត្រលប់ ចេញចូលប្រព័ន្ធ ប្រសិនបើមិនមានវគ្គកាលត្រឹមត្រូវ
យក ទិន្នន័យគណនីថ្មីពីម៉ាស៊ីនបម្រើ ដោយប្រើមុខងារ getAccount()
ដោះស្រាយ កំហុសម៉ាស៊ីនបម្រើដោយចេញពីប្រព័ន្ធគណនីមិនត្រឹមត្រូវ
ធ្វើបច្ចុប្បន្នភាព ស្ថានភាពជាមួយទិន្នន័យថ្មីតាមប្រព័ន្ធ update ដែលត្រូវគ្រប់គ្រង
បង្កើតការផ្ទុកតាមស្វ័យប្រវត្តិ ដោយผ่านមុខងារ updateState()

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

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

អ្វីដែលមុខងារទីនេះបញ្ចប់៖

សម្របសម្រួល ដំណើរការ refresh ទិន្នន័យ និងការធ្វើបច្ចុប្បន្នភាព UI
រង់ចាំ ទិន្នន័យថ្មីមកដល់ មុនពេលបង្ហាញលទ្ធផល
ធានា ថា dashboard បង្ហាញព័ត៌មានទាន់សម័យបំផុត
រក្សា ការចែកផ្នែកច្បាស់លាស់ រវាងគ្រប់គ្រងទិន្នន័យ និង UI

ជំហានទី 3៖ បញ្ចូលជាមួយប្រព័ន្ធទីតាំង

ធ្វើបច្ចុប្បន្នភាព configuration របស់អ្នក ដើម្បី trigger refresh ស្វ័យប្រវត្តិ៖

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

របៀបបញ្ចូលនេះដំណើរការ៖

អនុវត្ត មុខងារ refresh រាល់ពេលដែល route dashboard ត្រូវបានផ្ទុក
ធានា ជាស្រេចថាទិន្នន័យថ្មីតែងតែបង្ហាញពេលអ្នកប្រើទៅកាន់ dashboard
រក្សា រចនាសម្ព័ន្ធទីតាំងចាស់បន្តបន្ទាប់ក្រោមការបន្ថែមទិន្នន័យស្រស់
ផ្ដល់ គំរូតែមួយសម្រាប់ initialization ទៅតាមតំណាក់តំណែងទំនាក់ទំនង

សាកល្បងប្រព័ន្ធ refresh ទិន្នន័យរបស់អ្នក៖

ចូលទៅក្នុងកម្មវិធីធនាគាររបស់អ្នក
ប្រតិបត្តិការ curl ពីមុនដើម្បីបង្កើតប្រតិបត្តិការថ្មី
បញ្ចូលទំព័ររុករក dashboard ឬចូលចេញហើយត្រឡប់មកវិញ
បញ្ជាក់ថាប្រតិបត្តិការ ថ្មីបង្ហាញភ្លាមៗ

🎉 ការតុល្យភាពល្អបំផុតអាចរកបាន៖ កម្មវិធីរបស់អ្នកឥឡូវបញ្ចូលបទពិសោធន៍ល្អរលូននៃស្ថានភាព persistence ជាមួយភាពត្រឹមត្រូវនៃទិន្នន៍ម៉ាស៊ីនបម្រើថ្មី!

📈 អ្នកមានជំនាញគ្រប់គ្រងស្ថានភាពកម្រិតខ្ពស់

timeline
    title សេចក្តីដំណើរគ្រប់គ្រងរដ្ឋវិជ្ជាជីវៈ
    
    section ការទទួលស្គាល់បញ្ហា
        State Issues Diagnosis
            : កំណត់បញ្ហាការបាត់បង់សម័យ
            : យល់ដឹងពីបញ្ហាអាប់ដេតចែកចាយ
            : ស្គាល់តម្រូវការរចនាសម្ព័ន្ធ
    
    section មូលដ្ឋានស្ថាបត្យកម្ម
        Centralized State Design
            : បង្កើតវត្ថុរដ្ឋរួមបញ្ចូល
            : អនុវត្តគំរូអាប់ដេតត្រួតការណ៍
            : បង្កើតគោលការណ៍មិនអាចផ្លាស់ប្តូរបាន
        
        Predictable Updates
            : ជំនាញប្រើ Object.freeze()
            : សំណុំប្រព័ន្ធងាយស្រួលបញ្ចាក់ទិន្នន័យខុស
            : បង្កើតគំរូធំទូលាយ
    
    section ជំនាញការអស់កម្លាំង
        localStorage Integration
            : គ្រប់គ្រងការបម្លែង JSON
            : អនុវត្តការសម្របសម្រួលដោយស្វ័យប្រវត្តិ
            : បង្កើតបន្តភាពសម័យ
    
        Data Freshness Balance
            : ដោះស្រាយបញ្ហាអាយុ
            : សង់ប្រព័ន្ធធ្វើការតុបតែង
            : បង្កើតប្រសិទ្ធភាពប្រឆាំងភាពត្រឹមត្រូវ
    
    section គំរូវិជ្ជាជីវៈ
        Production-Ready Systems
            : អនុវត្តការដោះស្រាយកំហុស
            : បង្កើតរចនាសម្ព័ន្ធងាយស្រួលថែរក្សា
            : តាមដានអនុវត្តវិជ្ជាជីវៈល្អបំផុត
    
        Advanced Capabilities
            : រៀបចំសម្រាប់ការចូលបញ្ចូលជាមួយបណ្តាញបំបែក
            : រៀបចំសម្រាប់តម្រូវការរដ្ឋស្មុគស្មាញ
            : មូលដ្ឋានសម្រាប់លក្ខណៈពេលវេលាសំរាប់ពិត

🎓 ជំនាន់បញ្ចប់ការសិក្សា៖ អ្នកបានកសាងប្រព័ន្ធគ្រប់គ្រងស្ថានភាពពេញលេញដោយប្រើគោលការណ៍ដូច Redux, Vuex, និងបណ្ណាល័យស្ថានភាពវិជ្ជាជីវៈផ្សេងទៀត។ លំនាំទាំងនេះអាចលេចធ្លោពីកម្មវិធីតូចដល់កម្មវិធីអប់រំធំ។

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

រៀនគ្រប់គ្រងស្ថានភាពជាមួយ framework (Redux, Zustand, Pinia)
ត្រៀមខ្លួនអនុវត្តលក្ខណៈពេល-ពិតជាមួយ WebSockets
មានស្រាប់សម្រាប់បង្កើតកម្មវិធី Progressive Web Apps ផ្ទាល់ក្រៅបណ្តាញ
មូលដ្ឋានរៀបចំសម្រាប់លំនាំកម្រិតខ្ពស់ដូចជា machine states និង observers

វិជ្ជមានឧទ្ទេសចរណ៍ GitHub Copilot 🚀

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

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

បញ្ជា៖ បង្កើតប្រព័ន្ធគ្រប់គ្រងស្ថានភាពបន្ថែមដែលមាន៖ ១) អារេប្រវត្តិស្ថានភាពទាំងមូល; ២) មុខងារ undo និង redo ដែលអាចត្រឡប់ទៅរដ្ឋមុនៗ; ៣) ប៊ូតុង UI សម្រាប់operaundo/redo នៅលើ dashboard; ៤) កំណត់ប្រវត្តិសំរាប់ត្រឹម ១០ រដ្ឋ ដើម្បីជៀសវាងបញ្ហាអង្គចងចាំ; និង ៥) សម្អាតប្រវត្តិពេលអ្នកប្រើចេញពីប្រព័ន្ធ។ ធានាថាមុខងារ undo/redo អាចដំណើរការជាមួយការផ្លាស់ប្តូរប្រាក់ និងរក្សាទុកបានក្រោមការផ្ទុកឡើងវិញរបស់កម្មវិធីរុករក។

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

🚀 បញ្ហា៖ អុបទីម៉ាយការផ្ទុក

ការអនុវត្តរបស់អ្នកឥឡូវនេះគ្រប់គ្រងវគ្គកាលអ្នកប្រើ ការផ្ទុកទិន្នន័យថ្មី និងគ្រប់គ្រងស្ថានភាពបានយ៉ាងមានប្រសិទ្ធភាព។ តែសូមពិចារណาว่าวิธีសម្រួលបច្ចុប្បន្នរបស់យើងធ្វើអោយបន្ថែមប្រសិទ្ធភាពក្នុងការចំណាយផ្ទុកទិន្នន័យ និងមុខងារឬទេ។

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

វិភាគអុបទីម៉ាយ៖

វាយតម្លៃការអនុវត្ត localStorage បច្ចុប្បន្នរបស់អ្នកហើយពិចារណាសំណួរយុទ្ធសាស្ត្រខាងក្រោម៖

តើព័ត៌មានតិចតួចបំផុតដែលត្រូវការសម្រាប់ការផ្ទៀងផ្ទាត់អត្តសញ្ញាណអ្នកប្រើមានអ្វីខ្លះ?
តើទិន្នន័យណាដែលផ្លាស់ប្តូរញឹកញាប់ ដូច្នេះ cacheក្នុងមូលដ្ឋានមិនមានអត្ថប្រយោជន៍យ៉ាងខ្លាំង?
តើតម្រូវការ.optimizeសម្រាប់ការផ្ទុកអាចកែលម្អប្រសិទ្ធភាពជាមួយបទពិសោធន៍អ្នកប្រើបានយ៉ាងដូចម្តេច?

ការវិភាគស្ថាបត្យកម្មបែបនេះធ្វើឲ្យអ្នកអភិវឌ្ឍន៍មានបទពិសោធន៍ដែលយល់ពីទាំងការប្រើប្រាស់ និងការសន្សំប្រសិទ្ធភាព។

យុទ្ធសាស្រ្តអនុវត្ត៖

កំណត់ ទិន្នន័យសំខាន់ដែលត្រូវរក្សាទុក (ប្រហែលគ្រាន់តែមែនទាំងអត្តសញ្ញាណអ្នកប្រើ)
កែប្រែ ការអនុវត្ត localStorage របស់អ្នកឲ្យផ្ទុកតែទិន្នន័យវគ្គកាលសំខាន់ៗ
ធានា ទិន្នន័យស្រស់ត្រូវបានទាញយកពីម៉ាស៊ីនបម្រើរាល់ពេលទៅ dashboard
សាកល្បង ឲ្យអានុភាពអុបទីម៉ាយគឺនៅតែមិនប៉ះពាល់បទពិសោធន៍អ្នកប្រើ

ការពិចារណាថ្នាក់ខ្ពស់៖

ប្រៀបធៀប អត្ថប្រយោជន៍ និងគុណវិបត្តិនៃការផ្ទុកទិន្នន័យគណនីពេញលេញពីការផ្ទុកតួអក្សរសម្គាល់ authentication តែប៉ុណ្ណោះ
ចេញជាឯកសារ អំពីសេចក្តីសម្រេច និងហេតុផលសម្រាប់សមាជិកក្រុមក្នុងពេលអនាគត

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

លំហាត់បន្ទាប់មកក្រោយមេរៀន

ការងារ

អនុវត្តបន្ទប់បញ្ចូល "Add transaction"

នេះគឺជាឧទាហរណ៍លទ្ធផលបន្ទាប់ពីអនុវត្តការងារ៖

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

75 KiB Raw Permalink Blame History Unescape Escape