Flutter Fetching Data From the API using BLoc

반응형

កាលពី Article មុន យើង បាន ជជែកគ្នា អំពី ការប្រើប្រាស់ Bloc ដើម្បី Manage State នៅក្នុង App របស់ យើង ដែល យើង បាន បង្កើត Sample App សម្រាប់ ឈ្វែ ង យល់ អំពី Bloc ធ្វើការ.នៅក្នុង Article នេះ ខ្ញុំ នាំ អ្នក ទាំងអស់គ្នា មក ជជែកគ្នា ពី របៀប ប្រើប្រាស់ Bloc ដើម្បី ទៅ ទាញ យក ទិន្នន័យ ចេញពី API.ជា ដំបូង យើង អាច បង្កើត Project ថ្មី មួយ ដើម្បី ផ្ដល់ នូវ ភាព ងាយស្រួល

បន្ទាប់ បង្កើត Project រួច អាច យើង អាច Remove code នៅក្នុង main.dart ទុក ដូច code ខាងក្រោម

add flutter bloc និង http dependency ចូលទៅក្នុង pubspec.yaml

បង្កើត diectory ដូចរូបខាងក្រោម

យើងប្រើ JSONPlaceholder - Free Fake REST API ដើម្បីជា fake API ទៅទាញ data យកមក

វាមាន Resource ជាច្រើនប៉ុន្តែក្នុង Article នេះេ្ញន ចុចលើ /posts ដើម្បីទៅ view data json

copy data ទាំងអស់រួចចូលទៅ website មួយដែលមានឈ្មោះថថច

JSON to Dart

ដើម្បី មាន ងាយស្រួល ក្នុង ការ បង្កើត Post Model មិន ចាំបាច់ សរ សេ កូដ ច្រើន.

បន្ទាប់មកទៀតចុចលើ button Generate Dart

បន្ទាប់ពីយើងបានបង្កើត Model រចនឹងឋៅបងៅបង

ជំហាន បន្ទាប់ យើង នឹង បង្កើត Service មួយទៀត សម្រាប់ ទៅ ទាញ data ពី internet ដែល implement មកពី PostRepository

បន្ទាប់មកយើងត្រូវចូលទៅដល់ ការបင្្

ប ន្តា ប់ មក អ្នក ទាំងអស់គ្នា ចូល មក មើល ក្នុង bloc state អ្នក ទាំងអស់គ្នា អាច ស្រមៃ អំពី State បាន ពីព្រោះ State គឺ យើង ជា អ្នក បង្កើត និង ក៍ ជា យើង ដែល ជា អ្នក ដាក់ឈ្មោះ. នៅត្រង់ ចំណុច នេះ ខ្ញុំ ចង់ អោយ ទាំងអស់គ្នា សាក ស្រមៃ ពី State នៅពេល App របស់ យើង ទៅ ទាញ ទិន្នន័យ យើង ត្រូវ មាន State មួយ សម្រាប់ ប្រាប់ ដល់ user ថា សូម រង់ចាំ បន្តិច data កំពុង loading.នៅពេល ដែល ទិន្នន័យ ទាញ ពី server បាន ជោគជ័យ យើង ត្រូវ មាន State មួយទៀត.ពេលខ្លះ ទៀត ការ ទាញ data មក មិនបាន ជោគជ័យ ទេ ដូច្នេះ យើង ត្រូវ មាន State មួយទៀត សម្រាប់ ប ង្កា ញ ទៅកាន់ user ថា មាន បញ្ហា អ្វីមួយ.

Post នៅរូបខាងលើនេះខ្ញុំបានបង្កមត State ចំនួយើង អាច សង្កេត ទៅលើ State ទាំងអស់ មាន តែ PostLoaded ទេ ដែល មាន លក្ខណៈ ខុស គេ ត្រង់ថា វា ត្រូវការ បោះ data មកពី PostBloc.

បន្ទាប់មក ទៀត យើង មក មើល នៅក្នុង PostEvent ម្ដង PostEvent គឺជា កន្លែង សម្រាប់ កំណត់ Event

ដោយសារ ឥឡូវ យើង មានតែ Get data អ ញ្ជឹ ង យើង អាច បង្កើត class GetPostEvent មួយ បាន ប៉ុន្តែ ប្រសិនបើ យើង មាន Event ច្រើន ដូចជា ការ Delete, update, create យើង អាច បង្កើត បន្ថែម ទៀត បាន.post_bloc.dartការប្រើប្រាស់ PostBloc គឺ ក្នុង គោលបំណង return state បន្ទាប់ពី ធ្វើការ ចប់.

main.dart

git repo : https://github.com/PhanithNoch/flutter_bloc_api