Dev to webs {Coding…}

บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การเชื่อมต่อ Firebase Firestore และ CRUD ข้อมูล

บทที่ 6: การเชื่อมต่อ Firebase Firestore และ CRUD ข้อมูล

🔖 หมวดบทเรียน: การจัดการฐานข้อมูลแบบ NoSQL ในแอป Flutter

📌 เหมาะสำหรับ: ผู้ที่ต้องการจัดเก็บ แก้ไข ลบ และเรียกดูข้อมูลใน Firebase Cloud Firestore

🎯 เป้าหมาย: เข้าใจการใช้งาน Firestore ในการทำ CRUD (Create, Read, Update, Delete) แบบเรียลไทม์

🧭 เกริ่นนำ

Firebase Firestore เป็นฐานข้อมูลแบบ Cloud NoSQL ที่เก็บข้อมูลแบบ collection/document ซึ่งเหมาะกับแอปที่ต้องการเรียกดูข้อมูลแบบเรียลไทม์ ไม่จำเป็นต้องมี server ของตนเอง ในบทนี้เราจะสร้างระบบ CRUD แบบง่ายเพื่อฝึกการทำงานกับ Firestore

🔧 ติดตั้งแพ็กเกจ

1
2
dependencies:
  cloud_firestore: ^4.15.0

📦 เริ่มต้นใช้งาน Firestore

1
2
import 'package:cloud_firestore/cloud_firestore.dart';
final db = FirebaseFirestore.instance;

✏️ CREATE – เพิ่มข้อมูลใหม่

1
2
3
4
5
await db.collection("notes").add({
  'title': 'โน้ตแรก',
  'content': 'เขียนโดยผู้ใช้ A',
  'timestamp': FieldValue.serverTimestamp(),
});

📖 READ – อ่านข้อมูล

1
2
final snapshot = await db.collection("notes").get();
snapshot.docs.forEach((doc) => print(doc.data()));

🛠️ UPDATE – แก้ไขข้อมูล

1
2
3
await db.collection("notes").doc("doc_id").update({
  'title': 'อัปเดตชื่อเรื่อง',
});

❌ DELETE – ลบข้อมูล

1
await db.collection("notes").doc("doc_id").delete();

🧪 ตัวอย่างแสดง ListView แบบเรียลไทม์

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
StreamBuilder<QuerySnapshot>(
  stream: db.collection("notes").orderBy('timestamp').snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    final docs = snapshot.data!.docs;
    return ListView.builder(
      itemCount: docs.length,
      itemBuilder: (context, index) {
        final note = docs[index].data() as Map<String, dynamic>;
        return ListTile(
          title: Text(note['title'] ?? ''),
          subtitle: Text(note['content'] ?? ''),
        );
      },
    );
  },
)

✅ สรุป

  • Firestore เป็น NoSQL DB ที่ใช้ง่ายและรองรับแบบเรียลไทม์
  • ทำ CRUD ได้ผ่าน collection().add(), doc().update() และ doc().delete()
  • ใช้ StreamBuilder เพื่อฟังข้อมูลแบบเรียลไทม์

บทถัดไปเราจะไปเรียนรู้การอัปโหลดและแสดงรูปภาพด้วย Firebase Storage ครับ