[ FlutterFire Series ] EP 0 : Firebase คืออะไร ใช้กับ Flutter ได้ยังไง

สวัสดีครับเพื่อนๆนักอ่าน ก่อนอื่นผมเชื่อว่าทุกคนเคยใช้มันมาแล้ว แต่อาจจะยังไม่เคยใช้ได้ในทุกๆฟังก์ชัน ผมก็เป็นเหมือนกัน ก่อนหน้านี้จะชอบคิดว่าสร้าง server เป็นของตัวเอง แต่พอเครื่องมือสมัยใหม่มีความพร้อมมากขึ้น ทำให้เราไม่ต้องไปดูแล server ของตัวเอง และมันจะทำงานได้อย่างไร ตามมาอ่านกันได้เลย

Firebase คืออะไร

ส่วนตัวผมคิดว่า Firebase เป็น Backend-as-a-service (Baas) เป็นเครื่องมือที่ทำให้เราสนใจไปที่ฟังก์ชันของโปรแกรมมากกว่าการดูแลรักษา server ส่วนการจะ scale ยังไงให้ทาง Google เค้าจัดการไป เพราะเมื่อหลังผ่านตัวเร่งที่สำคัญอย่างโควิด ทำให้อุตสาหกรรมด้าน software เติมโตเร็วมาก เพราะฉะนั้นการคิด project และขึ้นระบบให้เร็วที่สุดเป็นเรื่องสำคัญ

ทำไมถึงไม่ใช้ Restful API ?

ออกตัวก่อนว่า Restful API หรือ Self-host ยังไม่ตาย แต่การจะขึ้นโปรเจคที่ต้องมีวิศวกรหลายคนเข้ามาช่วยดูแลนั้นเป็นไปได้ยาก เนื่องจากภาวะขาดแรงงาน ในทางกลับกัน คนที่คิดจะทำ startup ก็อยากจะลอง proof-of-concept (POC) บนสภาพแวดล้อมเล็ก ๆ ไปก่อน อีกทั้งยังไม่ต้องสนใจเรื่องการติดตั้ง เขียน config ตัว server อีกด้วย ลองจิตนาการดูได้ ถ้าจะมีใครสักคนทำ project เล็กๆ ที่มีแต่ idea และมีความรู้ด้านการเขียน web หรือ mobile application คงไม่อยากเสียพลังกาย พลังใจ ในการศึกษาการทำ web server docker server หรือ database server

ข้อแตกต่างระหว่างการ call backend service

จากภาพด้านบน จะสอดคล่องกับที่ผมบอกไปก่อนหน้า เราจะใช้พลังกาย พลังใจ พลังความคิด ทุ่มไปที่ idea solution และ business model

ตอนนี้ Firebase มีบริการอะไรบ้าง

จากภาพ Firebase จัด category ให้เรียบร้อย ทั้งแต่ขั้นตอนการสร้าง การเพิ่มประสิทธิภาพ และ การทำให้ application เราโตขึ้น ใน Series นี้เราจะพาไปดูในทุก ๆ บริการกันเลย

🚨 GEEK ALERT

ต่อไปนี้จะเป็น lab report ที่ผมได้ทดลองใช้งานและแชร์ประสบการณ์ให้เพื่อนๆนักอ่าน โดยที่ผมจะทำเป็น code snippet เพื่อให้เพื่อนๆนักอ่านสามารถก๊อปวางตามผมได้เลย

Required

• Firebase account
• Project flutter

การทำ Initialize Firebase

• ก่อนอื่นให้ไปสร้าง project ในเว็บ Console Firebase
• หลังจากนั้นให้เพิ่ม app ทั้ง ios, android

ขั้นตอนแรกให้ติดตั้ง firebase cli และทำการ login เข้าสู่ระบบให้เรียบร้อย ติดตั้ง plugin flutterfire_cli โดยรันคำสั่งผ่าน terminal ภายใน folder flutter project

dart pub global activate flutterfire_cli

รันคำสั่ง config ผ่าน terminal เพื่อให้ flutterfire_cli ทำการ config project ทั้ง iOS และ Android เช่นการเอา google-service.json ไปเก็บไว้ให้ใน directory

flutterfire configure

Note : ทุกครั้งที่เพิ่ม Firebase feature ลงไปใน project ให้ทำการรันคำสั่ง configure ทุกครั้ง!!!

จากนั้นเรามา init app กันได้เลย โดยเพิ่ม firebase core lib ลงไปใน project เสร็จแล้วรัน configure อีกครั้ง

flutter pub add firebase_core

flutterfire configure

และเมื่อทำการ config เสร็จแล้วต่อมาจะเป็น code ส่วนที่ใช้ใน flutter โดยที่ผมจะนำ code initialize app ของ firebase ไปไว้ใน main.dart

ใน method main จะเปลี่ยนเป็น async และสั่งให้ flutter ตรวจสอบ initial ของตัวเองจนเสร็จก่อนที่จะทำการ initial firebase ดัง code ด้านล่างนี้

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

เพื่อนๆ นักอ่านสามารถ copy code ชุดนี้ไปใช้ได้เลย แต่อย่างลืมเช็คให้ดีตรง method runApp นะครับว่าเราต้องใช้ class widget ที่เป็น app ของเรา ในตัวอย่างนั้นผมยังใช้ที่เป็น default มาจาก Flutter อยู่ครับ

ทดสอบการใช้งาน Cloud Firestore

เกริ่นนำ… Cloud Firestore เป็นบริการสำหรับ database เพื่อนนักอ่านบางคนอาจจะมีคำถามว่าแล้ว Realtime db แหละคืออะไร? อันนี้จะเป็นบริการที่แยกออกมา อีก 1 บริการ โดยการที่การเก็บข้อมูลก็ยังคงเป็น NoSQL อยู่ดีแต่ต่างกันตรงที่ว่า Cloud Firestore จะถูกเก็บเป็น collection และ document คล้ายคลึงกับ MongoDB ส่วน Realtime db จะถูกเก็บเป็น Root node อันนี้ก็ขึ้นอยู่กับผู้ใช้ว่าต้องการแบบไหน โดยส่วนตัวของผมจะมองว่า Realtime อาจจะมีประโยชน์ใน Chat app หรือการเก็บของที่ไม่ซับซ้อน ส่วน Cloud Firestore จะเป็นส่วนที่คุ้นเคยเวลาพูดถึงคำว่า database

นั้นเรามาเริ่มทดลอง add ข้อมูลลงใน Cloud Firestore ผ่าน Flutter กันดีว่า ( อันนี้เป็นการทดลองเพื่อทดสอบว่าเราสามารถ initail firebase ลงไปใน Flutter app ได้สมบูรณ์หรือไม่นะครับ )

เพิ่ม Cloud Firestore lib ลงในโปรเจคกันก่อนผ่านคำสั่งนี้ และอย่างลืมเรียกคำสั่ง configuration ทุกครั้งที่มีการเปลี่ยนแปลง Firebase service

flutter pub add cloud_firestore

flutterfire configure

ในส่วนของ app ผมจะใช้ app template จาก flutter โดยจะส่งข้อมูล button tracking เมื่อ user นั้นทำการกดปุ่ม หน้าตาแบบนี้เพื่อนนักอ่านคงรู้จักกันดี

ผมได้เพิ่ม lib ที่ชื่อว่า client_information และ code เพื่อให้ส่งข้อมูลกลับมา โดยที่จะกำหนด collection ชื่อว่า button_tracking และส่วนของ document id จะเป็น device id ของแต่ละ platform หลังจากนั้นแก้ function _incrementCounter ก่อนที่จะทำการ set state ให้ไป update ข้อมูลลงใน cloud firestore ก่อน

flutter pub add client_information

Future<void> _incrementCounter() async {
    // Add data to Firebase
    var db = FirebaseFirestore.instance;
    ClientInformation info = await ClientInformation.fetch();
    final dumpData = <String, dynamic> {
      "total": _counter + 1,
    };
    db.collection("button_tracking").doc(info.deviceId)
        .set(dumpData)
        .then((value) =>
        print("Data added")
    );
    setState(() {
      _counter++;
    });
  }

ผลที่ได้ใน dashboard ทาด๊านนนนน

สำหรับบทความนี้ เราทำอะไรไปบ้าง

• Firebase คืออะไร
• ทำไมถึงไม่ใช้ Restful API
• ต่อ Firebase กับ Flutter ได้อย่างไร
• (น้ำจิ้ม) การเพิ่มข้อมูลลงใน Cloud firestore

บทความต่อไปผมจะพาเพื่อนผู้อ่านดำดิ่งลงไปทดลองใช้บริการอื่นๆของ Firebase เพื่อตอบโจทย์กรณีที่เราเป็น Front-End developer และเราไม่ต้องการทำ Back-end ในส่วนของ server ยังไงฝากติดตามต่อกันด้วยนะครับ