สำหรับเนื้อหานี้จะเป็นแนวทางการประยุกต์อีกรูปแบบ
ของระบบสมาชิก ที่เราไม่จำเป็นต้องมี server ของตัวเอง ไม่
ต้องมี REST Api รองรับระบบสมาชิก เพียงใช้งานการจัดการของ
Firebase ระบบช่วยพัฒนา app ของ google ซึ่งต่างจากบทความ
ในตอนที่แล้ว ที่เราต้องการจัดการระบบสมาชิกด้วย server ของเราเอง
ทบทวนบทความตอนที่แล้วได้ที่
ประยุกต์ระบบ Register Login ผ่าน API บน server ใน Flutter http://niik.in/1060
https://www.ninenik.com/content.php?arti_id=1060 via @ninenik
แน่นอนว่าทั้งสองแบบก็มีความแตกต่าง ทั้งจุดประสงค์ของการใช้งาน และวิธีการใช้ ดังนั้น
วิธีนี้จึงไม่ใช่การแทนที่อีกรูปแบบ แต่เป็นเพียงอีกทางเลือกสำหรับการพัฒนา การใช้งาน
Firebase จัดการเรื่อง Authentication หรือระบบสมาชิกอย่างง่าย ยังรองรับรูปแบบการทำงาน
ทั้งระบบสมาชิกผ่านอีเมลและรหัสผ่าน ระบบสมาชิกผ่านเบอร์โทร หรือแม้แต่ระบบสมาชิกผ่าน
โซเชียลต่างๆ เช่น facebook google twitter เป็นต้น แต่ในเนื้อหานี้เราจะใช้งานแค่รูปแบบ
ระบบสมาชิกผ่าน อีเมลและรหัสผ่าน ซึ่งก็คล้ายกับรูปแบบของบทความก่อนหน้า ที่ได้แนะนำไป
เนื้อหาในตอนนี้จะเป็นการเตรียมพร้อมก่อน จะประยุกต์ใช้งานในตอนหน้า
เข้าใช้งาน Firebase และสร้างโปรเจ็ค Firebase
เริ่มต้นเราต้องมีโปรเจ็ค firebase สำหรับใช้งานก่อน ให้เราเข้าใช้งานได้เที่
https://firebase.google.com/ จากนั้นไปที่หน้า console เพื่อเพิ่มโปรเจ็คใหม่
ทำตามลำดับตามรูปด้านล่าง เมื่อล็อกอินและเข้ามายังหน้า console แล้วก็กดเพิ่มโปรเจ็คใหม่
ตั้งชื่อโปรเจ็คตามต้องการ
ในที่นี้ไม่ใช้งานร่วม google analytics
เพิ่มโปรเจ็คเสร็จแล้ว ก็จะได้หน้าแรกของโปรเจ็คดังรูป (หน้าตาอาจเปลี่ยนไป)
เปิดใช้งานรูปแบบ Authentication
ต่อไปเลือกรูปแบบ Authentication ที่จะใช้งาน ทำตามรูปด้านล่างตามลำดับ ในที่นี้เราจะใช้ระบบสมาชิก
แบบ อีเมลและรหัสผ่าน
เลือกเมนู Authentication และกดเลือก Get Start
เลือกแท็บ Sign in method เป็น อีเมลและรหัสผ่าน Email/Password
เปิดใช้งาน Email/Password แล้วกดบันทึก
ระบบสมาชิกจะแสดงข้อมูลสมาชิกในแท็บ Users ตอนนี้ยังไม่มีข้อมูล
ตั้งค่าการเพิ่ม Firebase ไปใช้งานใน App
ก่อนเข้าไปตั้งค่าส่วนนี้ เรามาดูส่วนที่ต้องใช้งาน หรือไฟล์และพาท์ธที่เกี่ยวข้องกับการตั้งค่า ให้เรามาที่
โปรเจ็ค flutter ของเรา
สิ่งที่ต้องมีและต้องทำ สำหรับตั้งค่าคือ
- platform ที่จะพัฒนา เช่น android หรือ ios หรือ web ในที่นี้เราจะดูส่วนของ android
- app package ดูได้จากในไฟล์ build.gradle ไฟล์ลูกศรแรก
android > app > build.gradle
ในที่นี้คือ com.example.test_drive
ไฟล์จากลูกศรด้านบนในรูป คือส่วนที่เราจะแก้ไข และเพิ่มเข้ามา
ส่วนที่จะแก้ไข
android > app > build.gradle
android > build.gradle
ส่วนที่จะเพิ่มเข้ามา
android > app > google-services.json
เข้าสู่ขั้นตอนการเพิ่ม Firebase ให้ใช้งานร่วมกับ app ตามลำดับดังนี้
หน้าโปรเจ็ครวม ให้เราทำการเลือก เพิ่ม app ใหม่ ตาม platform ที่ต้องการ ในที่เราเลือก android ไอคอนตรงกลาง อันที่สอง
จะมีขั้นตอนให้เราทำตาม ให้เราใส่ชื่อ package ของเรา และก็ชื่อที่จะใช้ แล้วกด Register app
ขั้นตอนต่อมา ให้เราดาวน์โหลดไฟล์การตั้งค่า ชื่อ google-services.json จากนั้น
นำไปดังกล่าวไปไวในตำแหน่ง เหมือนตัวอย่างในรูปด้านบน
android > app > google-services.json
ขั้นตอนต่อไป เพิ่ม Firebase SDK ในไฟล์ build.gradle เลือกเป็น build.gradle
แทรกส่วนแรก plugins ไว้ด้านบนสุด
android > build.gradle
plugins {
// ...
// Add the dependency for the Google services Gradle plugin
id 'com.google.gms.google-services' version '4.4.2' apply false
}
และส่วนสุดท้าย ในไฟล์ build.gradle เพิ่มตำแหน่งตามตัวอย่าง
android > app > build.gradle
plugins {
id "com.android.application"
id "kotlin-android"
// The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
id "dev.flutter.flutter-gradle-plugin"
id 'com.google.gms.google-services'
}
dependencies {
// Import the Firebase BoM
implementation platform('com.google.firebase:firebase-bom:33.1.2')
// TODO: Add the dependencies for Firebase products you want to use
// When using the BoM, don't specify versions in Firebase dependencies
// https://firebase.google.com/docs/android/setup#available-libraries
}
จากนั้นกด next เป็นอันเสร็จขั้นตอน แล้วกลับไปหน้าหลัก console
ก็จะมีรายการ app ที่เราเพิ่งเพิ่มเข้าไป ตามรูป ในตัวอย่างชื่อว่า TestDrive
ติดตั้ง Firebase Package
ขั้นตอนต่อไป เราจะต้องทำการติดตั้ง package สองตัว ในไฟล์ pubspec.yaml คือ
dependencies: firebase_core: ^3.3.0 firebase_auth: ^5.1.3
เวลาใช้งานก็ import ไปใช้ดังนี้
import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_auth/firebase_auth.dart';
เป็นอันเสร็จเรียบร้อย สำหรับขึ้นตอนการเตรียมความพร้อมสำหรับใช้งาน Firebase Authentication
ตอนหน้าจะมาดูการประยุกต์ใช้งาน กับระบบสมาชิก รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง