อยู่บ้านว่างๆ มาทำ CodeLabs จากงาน Firebase Live 2020 กัน (ทำเสร็จเเล้วได้ Badge ไปโชว์หน้าโปรไฟล์ด้วยนะ !)

ก่อนที่จะเริ่มทำ CodeLabs อันนี้ ถ้าใครที่ยังไม่มีโปรไฟล์บนหน้าเว็บของ Google.Dev ให้ไปสมัครไว้ก่อนที่เราจะเริ่มทำ CodeLabs นะครับเพราะไม่งั้นเราจะไม่ได้ Badge ไปโชว์บนหน้าโปรไฟล์ของเรานะ !

1.สร้างโปรไฟล์ของเราบน Google.Dev (ถ้าใครที่สร้างเเล้วข้ามไปขั้นตอนที่ 2 ได้เลย)

• อันดับเเรกให้เราเข้าไปที่หน้าเว็บไซค์ ( https://google.dev/ ) จากนั้นคลิกที่ปุ่ม Sign In ด้านขวาบน เสร็จเเล้วก็ล็อกอินด้วย Google Account ที่เราต้องการได้เลย

• หลังจากนั้นก็ทำการตั้งชื่อโปรไฟล์ที่เราต้องการ เเละกรอกข้อมูลส่วนตัวอื่นๆลงไป เท่านี้ก็เป็นอันเสร็จเรียบร้อยเเล้วครับ สำหรับขั้นตอนเเรก

2.มารู้จักกับ CodeLabs ในครั้งนี้กันก่อน มันคืออะไร ? เกี่ยวกับอะไร ? เเล้วมันทำยังไง ?

CodeLabs ในรอบนี้ในงาน Firebase Live 2020 ที่พึ่งจบไปนะครับจะเป็น CodeLabs ในส่วนของการใช้งาน Firebase ร่วมกับเว็บไซค์ไม่ว่าจะเป็น Firebase Authentication , Firebase Database ซึ่งในบทความนี้เราก็จะได้มาเรียนรู้เเล้วลองทำ CodeLabs นี้ไปพร้อมๆกันครับ

ถ้าพร้อมเเล้วก็กดเข้าไปที่ลิงค์นี้เพื่อดูรายละเอียดของ CodeLabs ในครั้งนี้ได้เลยครับ : (https://codelabs.developers.google.com/codelabs/firebase-get-to-know-web)

สำหรับ CodeLabs Get to know Firebase for web จะเป็นการสร้างเว็บไซค์เเสดงอีเวนต์ที่เราเป็นคนจัดขึ้นนะครับ โดยผู้ใช้สามารถเข้าสู่ระบบเพื่อมาเเสดงความคิดเห็นหรือกดเข้าร่วม หรือไม่เข้าร่วมครับ

CodeLabs Get to know Firebase for web เราจะได้เรียนรู้บริการไหนของ Firebase กันบ้าง

• ทำระบบล็อกอินผู้ใช้งานด้วย Firebase Authentication ร่วมกับ FirebaseUI
• ซิงค์ข้อมูลเเบบเรียวไทม์ด้วย Firebase Cloud Firestore
• เขียน Security Rule ให้กับ Database ของเราบน Firebase
• เเละ Deploy หรือเเสดงผลหน้าเว็บของเราผ่าน Firebase Hosting

ในการเขียนโค๊ดใน CodeLabs ครั้งนี้เราก็จะเขียนผ่านหน้าเว็บไซค์ stackblitz.com ตามที่ CodeLabs เเนะนำนะครับ ถ้าพร้อมเเล้วก็มาลุยกันเลยยยยย !

3.มาเริ่มกันเลยยยยย !

• ก่อนที่เราจะเริ่มให้เรากดเข้าไปที่ลิงค์ : https://stackblitz.com/edit/firebase-gtk-web-start หลังจากนั้นให้เราทำการกด Fork ด้านมุมขวาบนเพื่อทำการ Fork โปรเจ็คมาเป็นของเราครับ

• หลังจากให้ทำการกดปุ่ม Sign In หรือที่เป็นรูป Github ด้านขวาบนเพื่อทำการเข้าสู่ระบบครั้ง (จริงๆจะไม่ Sign In ก็ได้เเต่จะบันทึกเเละ Deploy Project ไม่ได้นะ)

4.เเก้ไขชื่ออีเวนต์เเละรายละเอียดของอีเวนต์

เมื่อทำการ Fork เเละ Sign In เป็นที่เรียบร้อยเเล้ว ในขั้นตอนนี้ถ้าใครต้องการเปลี่ยนชื่อเเละรายละเอียดของอีเวนต์ให้เป็นไปตามที่เราต้องการก็สามารถเข้าไปเปลี่ยนได้เลยในไฟล์ index.html จากนั้นให้มองการคอนเทนเนอร์ที่ชื่อว่า event-details-container กับ description-container

หลังจากที่ผมลองเปลี่ยนชื่อเเละรายละเอียดของอีเวนต์ที่จะจัดขึ้นตอนนี้หน้าตาของเว็บเราก็จะเปลี่ยนมาเป็นเเบบนี้ครับ

โดยถ้าใครที่เขียนบนเว็บไซค์ https://stackblitz.com/ นั้นเมื่อโค๊ดของเรามีการเปลี่ยนเเปลงเเถบ Live Preview ด้านขวาก็จะทำการ Reload เพื่อเเสดงผลการเปลี่ยนเเปลงให้เราเห็นทันทีครับ

5.มาสร้างเเละตั้งค่า Firebase Project ของเราให้รองรับการใช้งานบนเว็บของเรา

ในขั้นตอนนี้ถ้าใครที่เคยใช้หรือว่าเคยสร้างโปรเจ็คบน Firebase มาเเล้วน่าจะคุ้นเคยกันดีเเต่ถ้าไม่ เดียวเรามาดูกันว่าจะเริ่มต้นยังไง

สร้าง Firebase Project

• ให้เราล็อกอิน Firebase ด้วย Google Account (https://console.firebase.google.com/)
• หลังจากนั้นก็กดเพิ่มโปรเจ็ค เเละก็ตั้งชื่อโปรเจ็คตามที่เราต้องการได้เลยยยย ในที่นี้ผมจะตั้งเป็น Firebase-Live-CodeLabs เเต่ว่าใครจะตั้งเป็นอะไรก็ได้นะครับ

• หลังจากนั้นก็กด ต่อไป เเล้วก็กด ดำเนินการต่อ ได้เลยครับ

• จากนั้นก็รอสักครู่ก็จะมีหน้าอย่างงี้โชว์ขึ้นมา เพียงเท่านี้เราก็ได้สร้าง Firebase Project ของเราเป็นที่เรียบร้อยเเล้วครับ

• เเต่ยังไม่เสร็จเพียงเท่านี้ เนื่องจากว่าเราจะใช้ Firebase Authentication ที่เป็นเเบบ Email / Password ดังนั้นเราต้องไปกำหนดค่าให้กับ Firebase Authentication ในโปรเจ็คของเราสะก่อนจึงจะสามารถใช้ได้นะครับ
• โดยกดเข้าไปที่เเถบด้านซ้ายตรงคำว่า Authentication เเล้วเลือกไปที่เเถบ Sign-In Method เเล้วก็ติ๊ก Enable ตรง Email / Password

• หลังจากนั้น อย่าพึ่งไปไหนนะครับบบ เราต้องไปเปิด Cloud Firestore ก่อนเนื่องจากว่าเราจะใช้มันในโปรเจ็คนี้ด้วยครับ โดยคลิ๊กไปที่ Cloud Firestore ตรงเเถบด้านซ้าย จากนั้นคลิก Create Database (สร้างฐานข้อมูล) ครับ

• จากนั้นในขั้นตอนนี้เราจะเลือกใช้ในส่วนของกฏด้านความปลอดภัยเป็น เริ่มต้นในโหมดทดสอบก่อน เเล้วในท้ายๆของบทความนี้ เดียวเราจะได้มาตั้งกฏใหม่อีกทีนึงนะครับ

• ต่อไปในส่วนนี้เราจะต้องเลือกตำเเหน่ง Cloud Firestore ของเรานะครับ ซึ่งผมก็จะเลือกตามที่โชว์ใน CodeLabs ของ Firebase นะครับ นั้นก็คือ nam5 (us-central) ครับ

• หลังจากนั้นก็คลิกเสร็จเรียบร้อย เเล้วรอสักครู่ก็จะได้หน้านี้มา เพียงเท่านี้ขั้นตอนการตั้งค่าโปรเจ็คของเราก็เสร็จเรียบร้อยเเล้วครับ

6.เพิ่ม Firebase ลงในเว็บไซค์ของเรากันนน

• ให้ไปที่ไฟล์ index.js เเล้วก็ทำการเพิ่ม Firebase libraries ตามนี้เลยครับ

• เสร็จเเล้วให้เรากลับมาที่หน้าเเรกของโปรเจ็คที่เราพึ่งสร้างกันใน Firebase จากนั้นก็ให้เรากดเข้าไปที่เว็บไอคอนเพื่อทำการขอ Config จาก Firebase เพื่อไปใส่ในไฟล์ของเราครับ

• จากนั้นก็ตั้งชื่อเว็บเเอพของเราตามที่เราต้องการได้เลยครับ ในที่นี้ผมจะตั้งเป็น Web App จากนั้นคลิ๊ก ลงทะเบียน ได้เลยครับ

• หลังจากนั้นเราจะได้ Firebase configuration object มา เดียวเราจะเอาตรงนี้เเหละครับไปใส่ในไฟล์ของเรา ดังนั้นให้ทำการก๊อปปี้เก็บเอาไว้นะครับ

• เสร็จเเล้วกลับมาที่ไฟล์ index.js ของเรา เเล้วให้ทำการวาง Firebase configuration object ลงไปเลยครับ หลังจากนั้นก็ให้เราทำการ initializeApp ของเราโดยใช้ตัว Firebase configuration object ที่เราพึ่งสร้างเมื่อกี้ครับ

7.มาเพิ่มปุ่ม Sign-In ให้ผู้ใช้กันนนน (ใน CodeLabs จะใช้คำว่า RSVP เเต่เพื่อไม่ให้ทุกคนสับสนในบนความนี้จะขอใช้คำว่า Sign-In เเทนนะครับ)

• เพิ่มปุ่ม Sign-In ลงบนหน้าเว็นของเรา ใน event-details-container

• มีปุ่มเเล้ว เราก็ต้องมากำหนดการทำงานให้กับมันด้วย กลับมาที่ไฟล์ index,js ให้เราทำการกำหนดอีเวนต์ของปุ่ม เเละ initialize FirebaseUI ตามโค๊ดอันนี้ได้เลยครับ

• จากนั้นลองกลับมาที่เว็บไซค์ของเราจะเจอปุ่ม RSVP หรือ Sign-In Button ที่เราพึ่งสร้างไปเมื่อกี้ จากนั้นก็ทำการกดเลยครับถ้าถูกต้อง FirebaseUI ก็จะเเสดงขึ้นมาให้เราใส่ Email เเละ Password ครับ

• หลังจากนั้นลองทำการล็อกอินโดนใช้อีเมลหรือรหัสผ่านที่เราต้องการได้เลยครับ ถ้าผู้ใช้นั้นยังไม่มี หรือยังไม่ได้สร้าง ตัว FirebaseUI ก็จะเปลี่ยนเป็นให้เราใส่ข้อมูลของผู้ใช้ที่เราต้องการสร้างลงไปครับ เสร็จเเล้วกลับมาดูที่ Firebase Authentication Dashboard เราจะเห็นว่ามาเเล้ว ผู้ใช้ที่เราพึ่งสร้างไปเมื่อกี้

• หลังจากนั้น ลองสักเกตุที่ปุ่ม RSVP หรือ Sign-In Button งงมั้งครับว่าตกลงเเล้ว เราล็อกอินเข้ามารึยังงงง ? คำตอบคือเราล็อกอินเข้ามาเรียบร้อยเเล้วครับ เเต่เราต้องกำหนดให้ปุ่ม Sign-In ของเราเปลี่ยนเป็นคำว่า Logout เพื่อให้ผู้ใช้งานสามารถเข้าใจด้วยว่าเค้าได้ล็อกอินเข้ามาเป็นที่เรียบร้อยเเล้ว เเละเพื่อประสบการณ์การใช้งานของผู้ใช้ครับ โดยให้เราเพิ่มโค๊ดในส่วนนี้ลงไปได้เลย เพื่อทำการเช็คว่า เมื่อ AuthState มีการเปลี่ยนเเปลง (ผู้ใช้ล็อกอินเข้ามาเเล้ว) เราจะทำการเปลี่ยนจากปุ่ม Sign-In เป็น Logout เเละกำหนดค่ามันใหม่ให้เป็นเมื่อผู้ใช้กดจะเป็นการออกจากระบบ

• เพียงเท่านี้ทั้งเราเเละผู้ใช้ก็จะไม่ งง อีกต่อไปเเล้วว่าได้ล็อกอินเข้ามารึยัง ?

เเละเมื่อมาถึงขั้นตอนนี้ถ้าใครที่ทำตามเเล้ว ไม่ได้ หรือยังไม่เข้าใจ ก็สามารถเข้าไป Fork ตัว Checkpoint-1 ที่ทาง Firebase ได้ทำเอาไว้มาได้เลยครับ หรือจะเข้าไปดูก็ได้ว่าเราผิดพลาดตรงไหนไปรึเปล่า () => https://stackblitz.com/edit/firebase-gtk-web-checkpoint1

8.ถึงเวลาดึงเอาความสามารถของ Cloud Firestore มาใช้กันเเล้วววว

อย่างที่ได้บอกไปในตอนเเรกของบทความนะครับว่าเราจะเปิดให้ผู้ใช้สามารถเข้ามาเเสดงความคิดเห็นในอีเวนต์ของเราได้นะครับ ดังนั้นเเล้วเราจะมาดูกันว่าเราจะสามารถเอาความสามารถของ Cloud Firestore มาใช้กับเว็บของเราได้ยังไง

• โดยในส่วนของ Data Model ก็จะขอใช้เเละตั้งตามใน CodeLabs เลยนะครับ โดยเราจะมี guestbook เป็น top-level collection เเละเก็บข้อมูลการเเสดงความคิดเห็นของผู้ใช้เเต่ละคนครับ

• กลับมาที่ไฟล์ index.html มองหา guestbook-container เเล้วทำการเพิ่มโค๊ดในส่วนนี้ลงไปได้เลยครับ

• หลังจากนั้นกลับมาดูที่หน้าต่าง Preview ก็จะพบว่าตอนนี้มีปุ่มให้ผู้ใช้สามารถที่จะเเดงความคิดเห็นได้เเล้ววว

• เเต่ยังไม่เสร็จนะครับบบ เดียวก่อนนนนน กลับมาที่ไฟล์ index.html เเล้วเพิ่มในส่วนของโค๊ดตรงนี้ลงไปเพื่อดักเวลาผู้ใช้กด Submit เเล้วเราจะดึงข้อมูลไปเก็บไว้ที่ Cloud Firestore ครับ

firebase.auth().currentUser.displayName : เป็นการดึงเอาชื่อผู้ใช้ที่เราสมัครไว้กับ Firebase Authentication มาตอนเเรก

firebase.auth().currentUser.uid : เป็นการดึงเอา UID ของผู้ใช้คนที่เเสดงความคิดเห็นมา ซึ่งสร้างโดย Firebase Authentication

• เเต่จะให้ทุกคนสามารถเเสดงความคิดเห็นได้มันก็ไม่ถูกใช่มั้ยครับ ? ดังนั้นเเล้วเราต้องมีการกำหนดค่าให้สามารถเเสดงความคิดเห็นได้เฉพาะผู้ใช้ที่เข้าสู่ระบบมาเเล้วเท่านั้น โดยเราจะกลับไปที่ onAuthStateChanged ใน index.js ไฟล์ เเล้วทำการเเทนที่โค๊ดในส่วนนี้เข้าไปครับ

• หลังจากนั้นให้เราลองกดเพิ่มหรือเเสดงความคิดเห็นได้เลยครับ จะพบว่าในหน้าเว็บไม่เเสดงผล เเต่ถ้าเรากลับมาดูในส่วนของ Cloud Firestore ก็จะพบว่ามีผู้ใช้เเสดงความคิดเห็นเข้ามาเเล้ว (ขอยืมรูปบน CodeLabs มาเหมือนเดิมนะครับ)

มาถึงในขั้นตอนนี้ถ้าใครที่ลองทำตามเเล้ว ยังทำไม่ได้ หรือไม่เข้าใน สามารถเข้าไปดูหรือ Fork ในส่วนของ Checkpoint 2 มาได้เลย () => https://stackblitz.com/edit/firebase-gtk-web-checkpoint2

• กลับไปที่ไฟล์ index.html ให้เราเพิ่มในส่วนของ section id ที่ชื่อว่า guestbook เข้าไปตามโค๊ดด้านล่างได้เลยครับ

• หลังจากนั้นกลับมาที่ index.js ไฟล์นะครับ เเล้วทำการเพิ่มโค๊ดในส่วนของตรงนี้ไปได้เลย เพื่อเราจะได้สามารถเข้าไปอ่านใน guestbook คอลเลคชั่นได้นะครับว่ามีผู้ใช้เข้ามาเเสดงความคิดเห็นว่าอะไรกันบ้าง

• หลังจากนั้นลองเเสดงความคิดเห็นเเล้วกด Send เราก็จะเห็นชื่อผู้ใช้ของเราพร้อมกับข้อความมาเเสดงอยู่บนหน้าเว็บไซค์ของเราเเล้วครับ

เเละเหมือนเดิมอีกเช่นเคย นี่คือ Checkpoint จุดที่ 3 ครับ () => https://stackblitz.com/edit/firebase-gtk-web-checkpoint3

9.มาเพิ่มกฏความปลอดภัย (Security Rules) ให้ฐานข้อมูลของเราปลอดภัยมากยิ่งขึ้น

• ในขั้นตอนนี้นะครับ ให้กลับไปที่ Cloud Firestore เเล้วเลือกเเถบด้านบนไปที่คำว่ากฏครับ
• หลังจากนั้นให้ทำการเเทนที่กฏอันเดิมของเราด้วยกฏอันใหม่ อันนี้เลยยยย

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
      match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
      && "attending" in request.resource.data;
    }
}

• ในกฏอันใหม่นี้นะครับ จะเป็นการตั้งกฏว่า เราจะอนุญาตให้ผู้ใช้สามารถอ่าน หรือ เเสดงความคิดเห็นได้เมื่อ uid หรือ userId ไม่เท่ากับ null ซึ่งก็คือเมื่อล็อกอินเข้ามาเรียบร้อยเเล้วนั้นเองครับ
• ที่นี่ถ้าเราลองกดออกจากระบบจะพบว่ามี Error เกิดขึ้นบนหน้าเว็บไซค์ของเรานะครับ นั้นก็เพราะว่าตอนนี้ผู้ใช้ไม่ได้เข้าสู่ระบบ เเต่ว่า เว็บของเรายังมีการไปขอข้อมูลจาก Cloud Firestore อยู่นั้นเองครับ ซึ่งเเน่นอนว่าเมื่อมี Error ก็ต้องมีวิธีเเก้เสมอครับ โดยให้เรากลับไปที่ไฟล์ index.js เเล้วทำการเพิ่มในส่วนของฟังชั่น subscribeGuestbook() เเละ unsubscribeGuestbook() ลงไปครับ จากนั้นให้เราย้ายในส่วนของโค๊ดที่มีการดีงข้อมูลจาก Cloud Firestore มาใส่ไว้ในฟังชั่น subscribeGuestbook() เเทนครับ เเบบนี้ !

• กลับไปที่ onAuthStateChanged อีกเหมือนเดิมครับในขั้นตอนนี้เราจะเพิ่มเงื่อนไขไปให้มันโดนต้องให้ผู้ใช้ล็อกอินเข้ามาก่อนจึงจะสามารถไปเรียกฟังชั่น subscribeGuestbook() ได้ เเละเมื่อผู้ใช้ทำการ Logout ก็จะไปเรียกฟังชั่น unsubscribeGuestbook() นั้นเองครับ

เเละในขั้นตอนนี้เราก็เดินทางมาถึง Checkpoint ที่ 4 เเล้วววว () => https://stackblitz.com/edit/firebase-gtk-web-checkpoint4

10.เพิ่มปุ่มเข้าร่วม หรือ ไม่เข้าร่วม

กลับไปที่ไฟล์ index.html เเล้วเพิ่มโค็ดในส่วนนี้ลงไปครับ เพื่อให้เราจะมีปุ่มถามผู้ใช้ว่า คุณจะเข้าร่วมหรือไม่เข้าร่วม ? ครับ

• ตอนนี้ถ้าเราดูที่เว็บไซค์เราก็จะเห็นว่า นี่ไง มีปุ่มมาเเล้ว เเต่ยังไม่เสร็จนะครับ เราต้องไปกำหนดการทำงานให้มันด้วยครับ

• กลับมาที่ไฟล์ index.js ให้เราเพิ่มโค๊ดในส่วนนี้ลงไปครับ เพื่อกำหนดการทำงานให้กับปุ่มที่เราพึ่งใส่มันลงไปเมื่อกี้ครับ

• ต่อไปกลับไปที่ index.html อีกรอบนะครับ (ครั้งสุดท้ายเเล้ว จริงๆนะ) เเล้วเพิ่มโค๊ดในส่วนนี้ลงไป เพื่อให้เเสดงผลผู้ใช้ที่สนใจเข้าร่วมง่านนั้นเองครับ

• จากนั้นกลับไปที่ไฟล์ index.js เเล้วเพิ่มในส่วนของโค๊ดตรงนี้ เพื่อทำการรับค่าของผู้ใช้ที่ต้องการเข้าร่วมง่านเเล้วนำมาเเสดงผลบนหน้าเว็บไซค์ของเรากับครับ

• เสร็จเเล้วเราต้องไปกำหนดค่าให้มันนิดนึงครับว่า ต้องให้ผู้ใช้ล็อกอินเข้าสู่ระบบมาก่อนนะจึงจะสามารถเเสดงค่า หรือ ตอบรับได้ว่าจะเข้าร่วมหรือไม่เข้าร่วม ว่าเเต่จะทำยังไงดีนะ…. ? คำตอบคือกลับไปที่ onAuthStateChanged ของเราเหมือนเดิมครับ เเล้วเอาโค๊ดตรงนี้ไปเเทนที่กับของเดิม

• เพียงเท่านี้เว็บไซค์ของเราก็ได้ปุ่มตอบรับว่าจะเข้าร่วม หรือไม่เข้าร่วม พร้อมกับเเสดงได้ว่าจะมีผู้ใช้กี่คนที่เข้าร่วมอีเวนต์ของเรา….

เพียงเท่านี้เราก็จะได้เว็บที่เเสดงอีเวนตของเราที่สามารถให้ผู้ใช้ล็อกอินเข้าสู่ระบบโดยใช้ Firebase Authentication เเละ เก็บข้อมูลผู้ใช้เข้าร่วม ไม่เข้าร่วม เเละความคิดเห็นของผู้ใช้ผ่าน Cloud Firestore ได้เป็นที่เรียบร้อยเเล้วววว

เเต่ ! ถ้าใครที่ทำเเล้วมีปัญหาก็ไม่ต้องกังวลไปครับ เรามี Checkpoint ที่ 5 ให้นี่เลยยย () => https://stackblitz.com/edit/firebase-gtk-web-checkpoint5

11.มา Deploy เว็บของเราลง Firebase Hosting กันเลยยยยย !

• อย่างที่บอกไปในขั้นตอนเเรกนะครับว่าถ้าเราต้องการที่จะ Deploy เว็บของเรานั้นเราต้องล็อกอินเข้ามาก่อน โดยการกดที่คำว่า Sign-In ด้านขวาบนได้เลยครับ

• หลังจากนั้นคลิ๊กเข้าไปที่เเถบ Firebase ที่อยู่ทางด้านซ้าย

• จากนั้นให้เรา เข้าสู่ระบบด้วย Google Account ที่เราสร้างโปรเจ็คไว้ในตอนเเรกนะครับ จากนั้นเลือกโปรเจ็คของเรา ที่เราได้สร้างไว้ตอนเเรกได้เลยยย

• จากนั้นก็กด Deploy เเล้วไปดูผลลัพธ์ที่เราทำไว้กันเลยยยยย

เเละสำหรับใครที่ลงทะเบียนบน Google.dev อย่างที่ได้บอกไปในหัวข้อเเรกๆของบทความนี้หลังจากจบ CodeLabs เเล้วเราก็ยังจะได้รับ Badge : Firebase For Web Codelab Completed อีกด้วย หน้าตาประมาณนี้ครับ

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

สำหรับบทความหน้าจะเป็นอะไร กดติดตามไว้รอได้เลยครับ เเล้วเจอกันครับ ! ขอบคุณทุกคนที่สละเวลาเข้ามาอ่านบทความนี้นะครับ หวังว่าจะเป็นประโยชน์กับทุกคนครับ