# ဘဏ်အက်ပ်တည်ဆောက်ခြင်း အပိုင်း ၃: ဒေတာရယူခြင်းနှင့် အသုံးပြုခြင်းနည်းလမ်းများ ## မိန့်ခွန်းမတိုင်မီမေးခွန်း [မိန့်ခွန်းမတိုင်မီမေးခွန်း](https://ff-quizzes.netlify.app/web/quiz/45) ### အကျဉ်းချုပ် ဝက်ဘ်အက်ပ်လျှောက်လွှာတိုင်း၏ အဓိကအချက်မှာ *ဒေတာ* ဖြစ်သည်။ ဒေတာသည် အမျိုးမျိုးသောပုံစံများရှိနိုင်သော်လည်း ၎င်း၏အဓိကရည်ရွယ်ချက်မှာ အသုံးပြုသူထံသို့ အချက်အလက်ကို ပြသခြင်းဖြစ်သည်။ ဝက်ဘ်အက်ပ်များသည် ပိုမိုအကျိုးရှိစွာနှင့် ရှုပ်ထွေးလာသည့်အခါတွင် အသုံးပြုသူသည် အချက်အလက်များကို ရယူခြင်းနှင့် အပြန်အလှန်ဆက်သွယ်ခြင်းနည်းလမ်းသည် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု၏ အရေးပါသောအပိုင်းတစ်ခုဖြစ်လာသည်။ ဒီသင်ခန်းစာတွင်၊ server မှ ဒေတာကို asynchronous နည်းလမ်းဖြင့် ရယူပြီး HTML ကို ပြန်လည်တင်မထားဘဲ ဝက်ဘ်စာမျက်နှာပေါ်တွင် အချက်အလက်ကို ပြသရန် ဒီဒေတာကို အသုံးပြုနည်းကို လေ့လာပါမည်။ ### ကြိုတင်လိုအပ်ချက် ဒီသင်ခန်းစာအတွက် [Login နှင့် Registration Form](../2-forms/README.md) ကို တည်ဆောက်ပြီးဖြစ်ရမည်။ [Node.js](https://nodejs.org) ကို install လုပ်ပြီး [server API](../api/README.md) ကို locally run လုပ်ထားရမည်။ ဒါမှ account data ကို ရယူနိုင်မည်။ server သေချာစွာ run လုပ်နေသည်ကို terminal မှာ အောက်ပါ command ကို run လုပ်ပြီး စမ်းသပ်နိုင်သည်- ```sh curl http://localhost:5000/api # -> should return "Bank API v1.0.0" as a result ``` --- ## AJAX နှင့် ဒေတာရယူခြင်း ရိုးရာဝက်ဘ်ဆိုဒ်များသည် အသုံးပြုသူ link ကိုရွေးချယ်ခြင်း သို့မဟုတ် form ကို submit လုပ်ခြင်းဖြင့် ပြသထားသော content ကို update လုပ်သည်။ ဒါကို HTML စာမျက်နှာကို ပြန်လည်တင်ခြင်းဖြင့် ပြုလုပ်သည်။ ဒေတာအသစ်တစ်ခု load လုပ်ရန်လိုအပ်သည့်အခါတွင် ဝက်ဘ် server သည် HTML စာမျက်နှာအသစ်တစ်ခုကို ပြန်ပေးသည်။ ဒါကို browser မှ process လုပ်ရမည်ဖြစ်ပြီး အသုံးပြုသူ၏ လက်ရှိလုပ်ဆောင်မှုကို ခေတ္တရပ်တန့်စေပြီး reload အတွင်းတွင် အပြန်အလှန်ဆက်သွယ်မှုများကို ကန့်သတ်သည်။ ဒီ workflow ကို *Multi-Page Application* (MPA) ဟုခေါ်သည်။  ဝက်ဘ်လျှောက်လွှာများ ပိုမိုရှုပ်ထွေးလာသည့်အခါတွင် [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) ဟုခေါ်သောနည်းလမ်းအသစ်တစ်ခု ပေါ်ထွက်လာသည်။ ဒီနည်းလမ်းသည် JavaScript ကို အသုံးပြု၍ server မှ ဒေတာကို asynchronous နည်းလမ်းဖြင့် ပို့ခြင်းနှင့် ရယူခြင်းကို ခွင့်ပြုသည်။ HTML စာမျက်နှာကို ပြန်လည်တင်ရန်မလိုအပ်ဘဲ update လုပ်ခြင်းများကို ပိုမိုလျင်မြန်စေပြီး အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုချောမွေ့စေသည်။ Server မှ ဒေတာအသစ်ရရှိလာသောအခါ၊ လက်ရှိ HTML စာမျက်နှာကို JavaScript ကို အသုံးပြု၍ [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API ဖြင့် update လုပ်နိုင်သည်။ အချိန်ကြာလာသည်နှင့်အမျှ ဒီနည်းလမ်းသည် [*Single-Page Application* (SPA)](https://en.wikipedia.org/wiki/Single-page_application) ဟုခေါ်သောအဆင့်သို့ တိုးတက်လာသည်။  AJAX ကို ပထမဆုံးမိတ်ဆက်ခဲ့သောအခါတွင် asynchronous နည်းလမ်းဖြင့် ဒေတာရယူရန်ရရှိနိုင်သော API တစ်ခုတည်းမှာ [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ဖြစ်သည်။ သို့သော် modern browser များသည် promises ကို အသုံးပြုပြီး JSON ဒေတာကို ပိုမိုကောင်းမွန်စွာ manipulate လုပ်နိုင်သည့် [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ကိုလည်း support လုပ်သည်။ > Modern browser အားလုံးသည် `Fetch API` ကို support လုပ်သော်လည်း သင့်ဝက်ဘ်လျှောက်လွှာကို legacy သို့မဟုတ် အဟောင်း browser များတွင် အသုံးပြုနိုင်စေရန်လိုအပ်ပါက [caniuse.com](https://caniuse.com/fetch) တွင် compatibility table ကိုစစ်ဆေးရန် အမြဲကောင်းသည်။ ### လုပ်ဆောင်ရန် [ယခင်သင်ခန်းစာ](../2-forms/README.md) တွင် account တစ်ခုဖန်တီးရန် registration form ကို implement လုပ်ခဲ့သည်။ အခုတော့ ရှိပြီးသား account ကို အသုံးပြု၍ login လုပ်ပြီး ဒေတာကို fetch လုပ်ရန် code ကို ထည့်သွင်းပါမည်။ `app.js` ဖိုင်ကိုဖွင့်ပြီး `login` function အသစ်တစ်ခုထည့်ပါ- ```js async function login() { const loginForm = document.getElementById('loginForm') const user = loginForm.user.value; } ``` ဒီမှာ `getElementById()` ကို အသုံးပြု၍ form element ကို retrieve လုပ်ပြီး `loginForm.user.value` ဖြင့် input မှ username ကိုရယူသည်။ HTML တွင် `name` attribute ဖြင့် သတ်မှတ်ထားသော form control တစ်ခုစီကို form ၏ property အဖြစ် access လုပ်နိုင်သည်။ Registration အတွက် ပြုလုပ်ခဲ့သည့်နည်းလမ်းနှင့်တူညီစွာ၊ server request ကို perform လုပ်ရန် function အသစ်တစ်ခုဖန်တီးပါမည်။ ဒါပေမယ့် ဒီတစ်ခါမှာ account data ကို retrieve လုပ်ရန်ဖြစ်သည်- ```js async function getAccount(user) { try { const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user)); return await response.json(); } catch (error) { return { error: error.message || 'Unknown error' }; } } ``` ဒီမှာ `fetch` API ကို အသုံးပြု၍ server မှ ဒေတာကို asynchronous နည်းလမ်းဖြင့် request လုပ်သည်။ ဒါပေမယ့် URL ကို call လုပ်ရန်အပြင် အခြား parameter မလိုအပ်ပါ။ ဒါကြောင့် `fetch` သည် default အနေဖြင့် [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP request ကိုဖန်တီးသည်။ ✅ `encodeURIComponent()` သည် URL အတွက် special characters များကို escape လုပ်သည့် function ဖြစ်သည်။ ဒီ function ကို မခေါ်ဘဲ `user` value ကို URL တွင်တိုက်ရိုက်အသုံးပြုပါက ဘယ်လိုပြဿနာများဖြစ်နိုင်မလဲ? အခုတော့ `login` function ကို update လုပ်ပြီး `getAccount` ကိုအသုံးပြုပါမည်- ```js async function login() { const loginForm = document.getElementById('loginForm') const user = loginForm.user.value; const data = await getAccount(user); if (data.error) { return console.log('loginError', data.error); } account = data; navigate('/dashboard'); } ``` ပထမဦးဆုံး `getAccount` သည် asynchronous function ဖြစ်သောကြောင့် server result ကိုစောင့်ရန် `await` keyword ကို အသုံးပြုရမည်။ Server request တစ်ခုစီတွင် error case များကို handle လုပ်ရန်လိုအပ်သည်။ အခုအချိန်မှာ log message တစ်ခုထည့်ပြီး error ကိုပြသရန်သာလုပ်ပါမည်။ နောက်ပိုင်းမှာ ပြန်လည်ဆန်းစစ်ပါမည်။ ထို့နောက် dashboard information ကို display လုပ်ရန် later တွင်အသုံးပြုနိုင်ရန် ဒေတာကို တစ်နေရာမှာ သိမ်းဆည်းရမည်။ `account` variable မရှိသေးသောကြောင့် ဖိုင်၏ထိပ်ဆုံးတွင် global variable တစ်ခုဖန်တီးပါမည်- ```js let account = null; ``` အသုံးပြုသူဒေတာကို variable တစ်ခုထဲသို့ သိမ်းဆည်းပြီးနောက် *login* စာမျက်နှာမှ *dashboard* သို့ `navigate()` function ကိုအသုံးပြု၍ ရွှေ့နိုင်သည်။ နောက်ဆုံးတွင် login form ကို submit လုပ်သောအခါ `login` function ကိုခေါ်ရန် HTML ကိုပြောင်းလဲပါ- ```html