FirebaseNextJS

Rapid Series: การใช้งาน NextJS และ Firebase Cloud Fires Store เบื้องต้น 1

ซีรีย์เรียนเร็วเป็นเร็ววันนี้เราจะหยิบ NextJS และ Firebase Cloud Fire Store มาใช้งานกัน

ซีรีย์เรียนเร็วเป็นเร็ว Rapid Series วันนี้เราจะหยิบ NextJS และ Firebase Cloud Fire Store มาใช้งานกันสำหรับการแสดงผลข้อมูลบน Web Application

ก่อนอื่นสิ่งที่เราต้องทำความเข้าใจก่อนนั่นคือ เราจำเป็นต้องใช้ NodeJS ในการติดตั้ง Package ของ NextJS ซึ่งเจ้า Next.js เป็นตระกูล React Web Framework ที่ทำงานได้สะดวกช่วยให้เราเขียนเว็บได้สะดวกขึ้น  แต่แน่นอนว่ามันมีราคาต้องจ่ายก่อนเรียนบทเรียนนี้นั่นคือ คุณจะต้องมีพื้นฐาน HTML & CSS  และต้องเข้าใจหลักของ JavaScript เบื้องต้น และจะดีมากถ้าหากมีความเข้าใจพื้นฐาน React.js มา

ก่อนอื่นติดตั้ง NodeJS และ Visual Studio Code ให้เรียบร้อย เปิด Node Command Line หรือ Terminal ขึ้นมา (เปิดผ่าน Visual Studio Code, VS Code ก็ดี)

ไปที่ Folder ที่เราติดตั้งไว้หลังจากนั้นพิมพ์คำสั่ง:

  ก็จะเห็นว่า NextJS นั้นเราไม่ต้อง Config อะไรเพิ่มเลยในส่วนของ Node ต่อมาให้ไปที่ Folder ของเราในตัวอย่างตั้งว่า “project”

ทำการทดสอบเว็บแรกของเราด้วย

ระบบจะ  Serve  จำลองให้เราเข้าที่ http://localhost:3000 และเราจะเห็นหน้าแรกของเว็บไซต์เราแบบนี้:

เชยชมให้พอใจเราจะลบทิ้งแล้วไปใช้งาน CSS Bootstrap framework กันให้รันคำสั่งต่อไปนี้ใน CMD, Terminal

ระบบจะทำการติดตั้งและสร้าง ชุดคำสั่ง Template ให้เรียบร้อย ขั้นตอนต่อมาเราไปดู Folder ของ Project เราจะเห็นโครงสร้างดังนี้:

ให้เราสร้าง Folder เพิ่มเข้าไปใน “components” และ “config” ใน Level เดียวกัน

เข้าไปที่ pages/index.js แก้ไขไฟล์ ลบ Code เดิมออกแล้วพิมพ์ Code ต่อไปนี้:

หลังจากนั้นให้ไปสร้างไฟล์ชื่อ Header.js ที่โฟลเดอร์ “pages”

เราใช้  react-bootstrap สร้าง Nav และ  Header ใหม่สำหรับไปแสดงร่วมกับหน้า index.js ดังนั้นเราจำเป็นต้องสร้าง _app.js (หรือบางที Project ของเราจะสร้างให้ ให้แก้ไขเอง) ใส่คำสั่งต่อไปนี้ใน _app.js

ไป Render หน้าเว็บไซต์ใหม่ดูว่ามันแสดงผลแบบนี้ไหม:

เอาล่ะมาทำส่วนของ Firebase กัน ก่อนอื่นเราต้องไปที่ https://firebase.google.com ไปเปิดการใช้งานที่ Cloud Firestore

ตั้งค่า Rule เป็น Test Mode ก่อน

รันคำสั่งต่อไปนี้:

เราจะทำงานร่วมกับ Firebase ได้แล้วไปสร้างไฟล์ชื่อว่า firebase.js ในโฟลเดอร์ “config” ใส่คำส่งต่อไปนี้

ก็ไปเอาพวก apiKey, appId จากระบบของ Firebase กันเองนะครับ เราลองใส่ข้อมูลปลอมๆ ลงไปใน Firebase Cloud Firestore กันสัก 1 รายการ

ผมได้สร้าง Collection ชื่อว่า documents  โดยเพิ่มรายการ title เข้าไปมีเนื้อหาว่า “ข้อมูลรายการที่ 1” ใน Cloud Firestore

ต่อมาให้ไปที่โฟลเดอร์ “components” ให้สร้างไฟล์ชื่อ GetData.js ขึ้นมาเขียนคำสั่งต่อไปนี้:

ก็คือมีการวนลูปส่วนของ references ของ collection ชื่อ “documents” ที่ผมใส่ไปใน

ส่วนการแสดงผลต้องมีการ import ส่วนของ Link มาใช้งาน

ไปวนลูปและ Map ข้อมูลกับ HTML ใน <tbody> ตามคำสั่งนี้:

ในส่วนของ Link จะวิ่งไปหาด้านในอีก Level โดยอ้างอิง id ของเอกสาร (Unique ID) ที่สร้างขึ้นดังนั้นต้องสร้าง Folder ชื่อ “content” ขึ้นมาและสร้างไฟล์  Javascript ชื่อว่า [id].js (ใช่ครับใส่ [] ด้วยเป็นชื่อไฟล์)

กลับไปที่  index.js เพิ่ม import บรรทัดบนสุด เรียกใช้ GetData ที่เราจะแสดงตาราง Table จาก Firebase

แล้วเพิ่ม ตาราง table นี้ใน <body>ของ index.js

ดังนั้น index.js จะเขียนแบบนี้:

แสดงผลหน้าแรกของเว็บไซต์จะเป็นดังนี้:

เว็บไซต์ของเรา

ไปที่ “content/[id].js” ให้เราเรียนคำสั่งในการอ่านข้อมูล แต่ละรายการโดยอ้างอิง parameter บน url ดังนี้:

ถ้าโหลดหน้าเว็บจะมีคำสั่ง ปรากฏ

เมื่อโหลดเสร็จแล้วก็จะพบว่าเราเข้าถึงเนื้อหาใน Firebase Cloud Firestore ได้แล้ว

ตอนต่อไปจะทำฟังก์ชันในการกรอกข้อมูลเข้าไปจากหน้า Form ไปลง Cloud Fire Store ของ Firebase ครับ

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน