လေ့ကျင့်ခန်း — Auth နှင့် Firestore အခြေခံ

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

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

ဒီ lesson က Tutorial အစောပိုင်း Authentication နဲ့ Firestore chapters တွေမှာ သင်ခဲ့တဲ့အရာတွေကို memory ထဲက code copy မလုပ်ဘဲ ကိုယ်တိုင် type ရိုက်ပြီး ပြန်လုပ်ကြည့်ဖို့ ရည်ရွယ်ပါတယ်။ Signup/Login/Logout function တွေကို separate ခွဲရေးတတ်ဖို့နဲ့ auth state ပြောင်းတိုင်း UI update ဖြစ်အောင်ဆက်တတ်ဖို့ အဓိကထားပါတယ်။ ထို့အပြင် Firestore document တစ်ခုကို add, read, update, delete လုပ်တဲ့ full cycle ကို လေ့ကျင့်ပေးပါတယ်။ Code အသစ်ရေးတာမဟုတ်ဘဲ သင်ယူထားပြီးသား concept တွေကို ပြန်လည်အသုံးချကြည့်ခြင်းသာ ဖြစ်ပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1 — Firebase project အသစ် (သို့) ရှိပြီးသား project ထဲမှာ Email/Password auth နဲ့ Signup form တစ်ခု ရေးပါ။ Task 2 — User login ဝင်ပြီးရင် navbar ပေါ်မှာ user email ပြပြီး Logout button နှိပ်ရင် sign out ဖြစ်ပြီး Login page ပြန်ရောက်အောင် လုပ်ပါ။ Task 3 — login ဝင်ထားတဲ့ user အတွက် Firestore ထဲမှာ notes collection တစ်ခုဆောက်ပြီး note document အသစ်တစ်ခု add လုပ်ကြည့်ပါ။ Task 4 — အဲ့ document ကို onSnapshot နဲ့ realtime ဖတ်ပြီး title field ကို update လုပ်ကြည့်ပါ၊ နောက်ဆုံး document ကို delete လုပ်ကြည့်ပါ။

Signup/Login/Logout function သုံးခုစလုံး အလုပ်လုပ်အောင်ရေးပြီးပြီလား
onAuthStateChanged နဲ့ login state ပြောင်းတာကို UI မှာ ထင်ရှားအောင် ပြသနိုင်ပြီလား
Firestore document ကို add, update, delete အထိ full cycle လုပ်ကြည့်ပြီးပြီလား

Code နမူနာ

javascript

// Task skeleton — ကိုယ်တိုင်ဖြည့်စွက်ရန်
import { auth, db } from "./firebase-config";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import {
  collection,
  addDoc,
  doc,
  updateDoc,
  deleteDoc,
  onSnapshot,
} from "firebase/firestore";

// Task 1: Signup
async function signup(email, password) {
  // TODO: createUserWithEmailAndPassword သုံးပါ
}

// Task 2: Login state watch
onAuthStateChanged(auth, (user) => {
  // TODO: user ရှိ/မရှိ အလိုက် UI update လုပ်ပါ
});

// Task 3: Note document add
async function addNote(uid, title) {
  // TODO: notes collection ထဲ addDoc
}

// Task 4: Update + Delete
async function updateNoteTitle(noteId, newTitle) {
  // TODO: updateDoc သုံးပါ
}
async function removeNote(noteId) {
  // TODO: deleteDoc သုံးပါ
}

You should see

User signup/login/logout smoothly ဖြစ်ပြီး notes collection ထဲက document တစ်ခုကို add, update, delete အထိ error မတက်ဘဲ လုပ်နိုင်ပါလိမ့်မယ်။

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

5 မိနစ်အတွင်း Task 1 နဲ့ Task 2 ကိုပဲ ပြီးအောင်ကြိုးစားကြည့်ပါ — login/logout button နှိပ်တိုင်း console.log နဲ့ user state ကို စစ်ကြည့်ပါ။

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

Practice လုပ်တဲ့အခါ real user account တွေနဲ့ မရောနှောဖို့ Firebase Console ထဲမှာ test project (သို့) test collection သီးသန့်ခွဲသုံးပါ။