Print
Details: Category: บทความ Flutter | Published: 16 June 2019 | Hits: 339

จากคอร์ส เขียน Flutter  กับ มาสเตอร์ https://www.androidthai.in.th/private-project-android-flutter-course.html วันนี่เราจะมาเรียนรู้ วิธีการเชื่อมต่อ ฐานข้อมูล Firebase กับ Flutter มาสเตอร์ เร่ิมต้นที่ แอนดรอยด์ ก่อนนะ ภาคต่อไป จะเป็น iOS

Screen Shot 2562 04 26 at 093840

สร้างโปรเจ็ค Flutter เปล่าๆ ก่อน

 Screen Shot 2562 04 26 at 094004

เราไปเร่ิมสร้างฐานข้อมูล Firebase ก่อน ไปที่ https://firebase.google.com

Screen Shot 2562 04 26 at 094014

 คลิก Go to Console

 Screen Shot 2562 04 26 at 094053

คลิก Add Product ให้ใส่ชื่อของโปรเจ็ค ของตัวเองเข้าไป

 Screen Shot 2562 04 26 at 094104

 รอจนสร้างฐานข้อมูลเสร็จ

Screen Shot 2562 04 26 at 094119

สร้างฐานข้อมูลเสร็จจะได้แบบนี้

 Screen Shot 2562 04 26 at 094126

เราสามารถเลือก Platform เช่น แอนดรอยด์, ไอโพน หรือ เว็บไซด์ ได้ วันนี่เรามาเลือก แอนดรอยด์ ก่อน

 Screen Shot 2562 04 26 at 094135

มาถึงขั้นตอนการ Register App

Screen Shot 2562 04 26 at 094203

 สิ่งแรกเราต้องหาให้ได้ก่อนว่า Flutter กำหนดให้ ฝังแอนดรอยด์ มี Package Name ว่าอะไร ? ไปเปิด AndroidManifest.xml ตาม Path นี้

Screen Shot 2562 04 26 at 094220

 

ก็จะเห็น Package Name ให้ Copy มาเลยครับ

 Screen Shot 2562 04 26 at 094420

เอา Package ที่ได้มาใส่ที่ Firebase แบบนี่ ต่อไป เราจะหาค่า SHA-1

Screen Shot 2562 04 26 at 094620

ไปเปิด Android Studio โปรเจ็คไหน ? ก็ได้ มองที่ขวามือจะมี Gradle เปิดออกมา

Screen Shot 2562 04 26 at 094632 

ดับเปิลคลิกที่ signingReport จะได้ SHA-1 แบบนี่ Copy ไปที่ Firebase ครับ

 Screen Shot 2562 04 26 at 094653

 กรอกให้ครบแล้ว Register app ได้เลยครับ

Screen Shot 2562 04 26 at 094708

คลิกที่ google-services.json โหลดมาเก็บไว้ในเครือง

Screen Shot 2562 04 26 at 094852

 แล้วเอาไปเก็บไว้ใน โฟวเตอร์ app แบบนี้ครับ

Screen Shot 2562 04 26 at 095041

 ต่อไปเปิด build.gradle ส่วนของ App (ตัวที่อยู่นอก โฟวเตอร์ App)

Screen Shot 2562 04 26 at 095052

 ให้เดิมส่วนนี่เข้าไป

Screen Shot 2562 04 26 at 094806

ทำแบบที่ Google แนะนำแบบนี่ครับ

Screen Shot 2562 04 26 at 095119

ส่วนต่อไป ให้ Copy โค้ดนี่ ไปไว้ที่ build.gradle ส่วนของ Modult (คือ build.gradle ใน โฟวเตอร์ App)

 Screen Shot 2562 04 26 at 095145

 

ไฟร์ นี้นะครับ

Screen Shot 2562 04 26 at 095152

ใส่ implimentation เข้าไป

Screen Shot 2562 04 26 at 095214

และ ใต้ dependencies ให้ใส่. apply plugin เข้าไปแบบนี่ครับ

Screen Shot 2562 04 26 at 095230 

next ที่ Firebase ให้เรารันแอพ บนแอนดรอยด์ และ ดูว่า ฐานข้อมูล Connected (รอประมาญ 15 วินาที) 

Screen Shot 2562 04 26 at 095255

เปิด Terminal แล้วใช้คำสั่ง flutter run

Screen Shot 2562 04 26 at 095425

รอจนรันขึ้น

Screen Shot 2562 04 26 at 095451

ยินดีด้วย คุณได้ใช้ Firebase ละ ไม่ยากนะครับ ลองทำดูครับ