Thuta Learning
ရှာဖွေရန်
ProjectsDevOps & Toolsintermediate

Firebase Notes App တည်ဆောက်ခြင်း

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

Mini Project — Firebase Notes App တည်ဆောက်ခြင်း

ဒီ project မှာ login ဝင်ထားတဲ့ user တစ်ယောက်ချင်းစီအတွက် notes သိမ်းနိုင်တဲ့ simple app flow ကိုတည်ဆောက်ပါမယ်။ Full UI code အကုန်မဟုတ်ဘဲ Firebase logic အဓိကအပိုင်းတွေကို စုစည်းပြထားတာပါ။

Project မှာ ပါဝင်မည့် feature များ

  • User signup/login/logout
  • Note အသစ်ထည့်ခြင်း
  • ကိုယ့် notes တွေကို realtime list ပြခြင်း
  • Note update/delete လုပ်ခြင်း

Core Firebase Logic

javascript
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  where,
  orderBy,
  onSnapshot,
  serverTimestamp
} from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

async function addNote(title, content) {
  const user = auth.currentUser;
  if (!user) throw new Error('Please login first');

  await addDoc(collection(db, 'notes'), {
    ownerId: user.uid,
    title,
    content,
    createdAt: serverTimestamp(),
    updatedAt: serverTimestamp()
  });
}

function watchMyNotes(renderNotes) {
  const user = auth.currentUser;
  if (!user) return () => {};

  const q = query(
    collection(db, 'notes'),
    where('ownerId', '==', user.uid),
    orderBy('createdAt', 'desc')
  );

  return onSnapshot(q, (snapshot) => {
    const notes = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data()
    }));

    renderNotes(notes);
  });
}

onAuthStateChanged(auth, (user) => {
  if (user) {
    const stopWatching = watchMyNotes((notes) => {
      console.log('My notes:', notes);
    });
  } else {
    console.log('Show login form');
  }
});

ဒီ project flow က ဘာသင်ပေးတာလဲ?

Firebase app တစ်ခုမှာ Auth state နဲ့ Firestore data ကိုဘယ်လိုချိတ်သလဲဆိုတာကို မြင်ရစေပါတယ်။ Login user ရဲ့ UID ကို ownerId အဖြစ်သိမ်းပြီး query ထဲမှာ ကိုယ့် data ကိုပဲပြန်ဖတ်တာက real project တွေမှာ အခြေခံအကျဆုံး pattern ပါ။

နောက်ထပ်တိုးချဲ့နိုင်သော idea များ

  • Note search/filter ထည့်ခြင်း
  • Pinned notes feature ထည့်ခြင်း
  • Image attachment upload ထည့်ခြင်း
  • Offline state နှင့် loading skeleton ထည့်ခြင်း
  • Security Rules ကို owner-based access အဖြစ်တင်းကျပ်ခြင်း
Firebase Notes App တည်ဆောက်ခြင်း | Thuta Learning