Thuta Learning
ရှာဖွေရန်
ProjectsWeb Developmentintermediate

Mini Project — Part 2: CRUD Feature ထည့်ခြင်း

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Mini Project — Part 2: CRUD Feature ထည့်ခြင်း ကို လက်တွေ့ project ထဲမှာ အသုံးချတတ်မယ်
  • ကိုယ်တိုင် code ရေးပြီး run ကြည့်တတ်မယ်
  • Project တစ်ခုလုံးကို အဆင့်လိုက် ဆောက်တတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Part 1 မှာ users list ကို ဖတ်နိုင်ပြီးသားမို့ ဒီအပိုင်းမှာတော့ Create User, Update User, Delete User သင်ခန်းစာတွေကို reference ယူပြီး POST/PUT/DELETE request တွေ ထည့်ကြပါမယ်။ Auth header pattern ကတော့ Part 1 ကနေတည်ငြိမ်နေပြီးသားမို့ ပြောင်းစရာမလိုပါဘူး၊ ပြောင်းရမှာက HTTP Method နဲ့ Request Body ပါ။ Create/Update အတွက် Content-Type: application/json header နဲ့ JSON.stringify() လုပ်ထားတဲ့ body ကို ထည့်ပေးရမှာဖြစ်ပြီး၊ Delete အတွက်တော့ body မလိုအပ်ဘဲ URL ထဲက :id ပဲ အဓိကလိုအပ်ပါတယ်။ ဒီလို function တွေကို တစ်ခုချင်းစီ ရေးပြီးရင် CLI command line arguments (process.argv) နဲ့ ချိတ်ဆက်ကာ command တစ်ခုတည်းနဲ့ user data ကို manage လုပ်နိုင်အောင် ပြုလုပ်ကြပါမယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

api.js ထဲမှာ createUser(name, email) ကို POST /v1/users, updateUser(id, data) ကို PUT /v1/users/:id, deleteUser(id) ကို DELETE /v1/users/:id အဖြစ် ရေးပါ။ Response ရလာတဲ့ user object ကို console.table() နဲ့ ကြည့်ကောင်းအောင် ပြသပါ။ cli.js တစ်ခု ဖန်တီးပြီး node cli.js create "Alice" alice@example.com၊ node cli.js update u_1 email=alice2@example.com၊ node cli.js delete u_1 ဆိုတဲ့ command တွေ run လို့ရအောင် process.argv ကို parse လုပ်ပါ။ Create → Read (getUsers) → Delete အစဉ်လိုက် run ကြည့်ပြီး data flow ကို confirm လုပ်ပါ။

Code နမူနာ

javascript
// api.js (ဆက်ထည့်)
async function createUser(name, email) {
  const res = await fetch(`${API_BASE_URL}/users`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${API_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email }),
  });
  if (!res.ok) throw new Error(`Create failed: ${res.status}`);
  return res.json();
}

async function deleteUser(id) {
  const res = await fetch(`${API_BASE_URL}/users/${id}`, {
    method: 'DELETE',
    headers: { Authorization: `Bearer ${API_TOKEN}` },
  });
  return res.status; // 204 No Content ဆိုရင် success
}

// cli.js
const [, , cmd, ...args] = process.argv;
if (cmd === 'create') createUser(args[0], args[1]).then(console.log);
if (cmd === 'delete') deleteUser(args[0]).then((s) => console.log('status:', s));
You should see
node cli.js create "Alice" alice@example.com ကို run ရင် id auto-generate ဖြစ်ထားတဲ့ user object အသစ် ပြန်ထွက်လာပြီး၊ delete run ရင် status 204 ပြန်ရပါလိမ့်မယ်။

၅ မိနစ် စမ်းကြည့်

5 မိနစ်အတွင်း user တစ်ယောက် create လုပ်ပြီး ရလာတဲ့ id နဲ့ update command ကို run ကာ email ပြောင်းနိုင်မလားစမ်းကြည့်ပါ။

သတိလေးတစ်ချက်

Delete operation ကတော့ ပြန်ပြင်လို့မရတဲ့အတွက် Production Token နဲ့ မစမ်းပါနဲ့၊ Test/Sandbox environment သုံးပြီးသာ CRUD flow ကို စမ်းသပ်ပါ။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • POST/PUT request မှာ Content-Type: application/json header မထည့်မိလို့ server က body ကို parse မလုပ်နိုင်ဖြစ်တတ်ကြပါတယ်
  • Delete/Update လုပ်တဲ့အခါ မတည်ရှိတဲ့ id ကို သုံးမိပြီး 404 error ကို catch မလုပ်ဘဲ crash ဖြစ်တတ်ကြပါတယ်

အခု ကိုယ်တိုင် စမ်းကြည့်

5 မိနစ်အတွင်း user တစ်ယောက် create လုပ်ပြီး ရလာတဲ့ id နဲ့ update command ကို run ကာ email ပြောင်းနိုင်မလားစမ်းကြည့်ပါ။

You'll know it worked when: node cli.js create "Alice" alice@example.com ကို run ရင် id auto-generate ဖြစ်ထားတဲ့ user object အသစ် ပြန်ထွက်လာပြီး၊ delete run ရင် status 204 ပြန်ရပါလိမ့်မယ်။

Mini Project — Part 2: CRUD Feature ထည့်ခြင်း | Thuta Learning