= โฮสต์เว็บไซต์แบบไดนามิกบน Google Firebase โดยใช้ Node.js และ Cloud Firestore DB =
ทูชาร์ คาปูร์: (https://www.tusharck.com/)
URL Git สาธิต: httpsgithub.com/tusharck/firebase-demo
= ทำไมต้องเป็นโฮสติ้ง Firebase? =
Firebase เป็นแพลตฟอร์มแอปที่ครอบคลุมที่สร้างขึ้นบนโครงสร้างพื้นฐานของ GoogleâÃÂàดังนั้นจึงมีความปลอดภัย รวดเร็ว ฟรี (มีตัวเลือกแบบชำระเงินสำหรับทรัพยากรเพิ่มเติมด้วย) และวิธีง่ายๆ ในการโฮสต์เนื้อหาของคุณบน แอปพลิเคชันเว็บหรือมือถือ
== คุณสมบัติหลักและประโยชน์ของ Free Tier: ==
- ให้โดเมนที่กำหนดเองฟรี&
SSL(SSL เป็นชั้นความปลอดภัยมาตรฐานสำหรับการเชื่อมต่อ https
- Cloud Firestore: ฐานข้อมูลที่ยืดหยุ่นและปรับขนาดได้สำหรับการซิงค์ข้อมูลแบบเรียลไทม์ระหว่างแอปไคลเอนต์
- คุณสมบัติอื่นๆ: ฟังก์ชันคลาวด์, การส่งข้อความบนคลาวด์ (FCM), Crashlytics, ไดนามิกลิงก์, โฮสติ้ง, ML Kit, ที่เก็บข้อมูล, การตรวจสอบประสิทธิภาพ, การคาดการณ์และห้องปฏิบัติการทดสอบ (ฟังก์ชันและทรัพยากรของผลิตภัณฑ์เหล่านี้สามารถเพิ่มขึ้นได้โดยการซื้อแผนการชำระเงิน แต่ บริการระดับฟรีนั้นดีมาก หากต้องการดูแผน ตรวจสอบราคา Firebase)
- ปรับขนาดทรัพยากรโดยอัตโนมัติ
= ขั้นตอนในการโฮสต์เว็บไซต์ไดนามิกของคุณบน Firebase =
== ข้อกำหนด ==
**1. บัญชี Google**หากคุณไม่มีบัญชี Google คุณต้องสมัครใช้งาน คุณสามารถทำได้โดยไปที่ httpsaccounts.google.com/SignUp **2. Node.js และ npm** Mac/Windows คุณสามารถดาวน์โหลดตัวติดตั้งได้จาก httpsnodejs.org/en/download/ ลีนุกซ์
ทำตามขั้นตอนด้านล่างเพื่อติดตั้ง Node.js:
1. เปิดเทอร์มินัล
2. เรียกใช้คำสั่งต่อไปนี้:
sudo apt-get ติดตั้ง curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs ** ฉันใช้แล้ว หมายเหตุ: ** **
setup_13.xเพราะในขณะที่กวดวิชาเป็นเวอร์ชันล่าสุด
**13**คุณสามารถตรวจสอบรุ่นล่าสุดได้โดยไปที่ httpsnodejs.org/en/
หากต้องการตรวจสอบว่าติดตั้ง Node.js และ npm สำเร็จหรือไม่ ให้รันคำสั่งต่อไปนี้ ซึ่งจะแสดงผลเวอร์ชันที่ติดตั้ง:
โหนด -v
npm -v
**3. Firebase-CLI (Command-Line Interface) เป็นเครื่องมือสำหรับจัดการ ดู และปรับใช้โครงการ Firebase
npm ติดตั้ง -g เครื่องมือ firebase
= ขั้นตอนที่ 1: สร้างโครงการ Firebase =
- ไปที่ httpsfirebase.google.com และ
ลงชื่อเข้าใช้จากมุมขวาบน
- คลิกที่
ไปที่คอนโซล จากมุมขวาบน
- จากนั้นคลิกที่
สร้างโครงการตามที่แสดงด้านล่าง
4. สิ่งต่อไปคือการป้อนชื่อโครงการของคุณ และกดดำเนินการต่อ
5. กดดำเนินการต่อเพื่อเปิดใช้งาน Google Analytics สำหรับโครงการ Firebase ของคุณ (หากคุณไม่ต้องการ ให้ทำเครื่องหมายที่ปิดการใช้งาน)
6. เลือกตำแหน่งที่ใกล้ที่สุดสำหรับ Google Analytics
7. คลิกที่
**สร้าง Project และรอโหลด จากนั้นคุณจะเห็นสิ่งที่ต้องการด้านล่าง
= ขั้นตอนที่ 2: เริ่มต้นการเข้าสู่ระบบ Firebase =
- เปิด command-line/terminal จากนั้นสร้างและไปที่ไดเร็กทอรีใหม่
mkdir my-firebase-projectcd my-firebase-project.mkdir
2. ในการโฮสต์เว็บไซต์บน Firebase ให้ลงชื่อเข้าใช้ firebase โดยใช้คำสั่งต่อไปนี้ หลังจากที่คุณเรียกใช้คำสั่ง หน้าต่างเบราว์เซอร์จะเปิดขึ้นเพื่อขอให้คุณลงชื่อเข้าใช้ firebase โดยใช้ข้อมูลรับรอง Google ของคุณ ป้อนข้อมูลรับรองที่นั่นและ Firebase จะลงชื่อเข้าใช้ระบบของคุณ
เข้าสู่ระบบ firebase
= ขั้นตอนที่ 3: เริ่มต้นโครงการ Firebase ในระบบของคุณ =
- ตอนนี้เราต้องเริ่มต้นโครงการที่เราสร้างบนคอนโซล Firebase เข้าสู่ระบบ สำหรับการรันคำสั่งด้านล่าง
เริ่มต้น firebase
2. กดปุ่มลงแล้วเลือก
**สองสิ่ง **โดยกดแป้น **สเปซบาร์
- ฟังก์ชั่น
- โฮสติ้ง
แล้ว
**กด Enter** เพื่อดำเนินการต่อ
3. จากนั้นเลือก
จากนั้นกด Enter
**ใช้โครงการที่มีอยู่**
4. กด Enter บน
**my-firebase-project** **หรือชื่อโครงการที่คุณใช้หรือชื่อโครงการที่คุณใช้
5. เลือก
**Javascript** แล้วกด Enter
6. คุณสามารถพูดได้
**ไม่ใช่** ถึง คุณต้องการใช้ ESLint เพื่อตรวจจับข้อผิดพลาดที่อาจเกิดขึ้นและบังคับใช้รูปแบบหรือไม่
7. ประเภท
**ใช่** สำหรับการติดตั้งการพึ่งพาด้วย npm
8. ที่นี่เราต้องทำสองงาน:
- คุณต้องเลือกไดเร็กทอรีสำหรับเว็บไซต์และทรัพย์สินของคุณ โดยค่าเริ่มต้นก็คือ
pubic คุณสามารถกด Enter เพื่อดำเนินการต่อหรือคุณสามารถเปลี่ยนชื่อไดเร็กทอรีที่คุณต้องการได้
- ประเภท
ใช่สำหรับหน้าแอปเดียว เพื่อให้ URL แบบไดนามิกของคุณสามารถเปลี่ยนเส้นทางไปยังปลายทางที่เหมาะสมได้
9. ทดสอบแอป firebase บนระบบโลคัลของคุณโดยเรียกใช้คำสั่งต่อไปนี้ จากนั้นไปที่
**httplocalhost:5000** เพื่อดูเว็บไซต์พื้นฐานของคุณทำงาน
firebase ให้บริการ - เฉพาะการโฮสต์, ฟังก์ชั่น
คุณควรเห็นสิ่งนี้ด้านล่างหลังจากเปิด
**httplocalhost:5000** URL
10. ปิดเซิร์ฟเวอร์จากเทอร์มินัล
= ขั้นตอนที่ 4: การติดตั้งแพ็คเกจและสร้างไดเรกทอรีมุมมองสำหรับเว็บไซต์แบบไดนามิก =
- ที่นี่เราจะสลับภายในไดเร็กทอรีฟังก์ชั่นเพื่อใช้งาน
ฟังก์ชั่นซีดี
**2. ติดตั้ง Express** เป็นเฟรมเวิร์กเว็บแอปพลิเคชัน Node.js ที่เล็กและยืดหยุ่น
npm ฉันแสดง --save
**3. ติดตั้ง Handle Bars** เป็นโปรแกรมสร้างเทมเพลตสำหรับ Node.js ที่ใช้สำหรับส่วนหน้าไดนามิกของเว็บไซต์
npm ฉันแฮนด์บาร์ - บันทึก
**4. ติดตั้งรวม**
npm ฉันรวม - บันทึก
5. สร้างโฟลเดอร์ชื่อ
**views** ภายในโฟลเดอร์ **functions** ที่เราจะเก็บ frontend code ทั้งหมด
มคเดียร์
มุมมอง
6. สลับกลับไปที่ไดเร็กทอรีหลักโดยเรียกใช้คำสั่งต่อไปนี้:
ซีดี .
= ขั้นตอนที่ 5: การตั้งค่า Firestore (ฐานข้อมูลบนคลาวด์) =
== การกำหนดค่าฐานข้อมูล ==
- ไปที่ httpsconsole.firebase.google.com/
- เลือกโครงการของคุณ
- เลือก
ฐานข้อมูลจากบานหน้าต่างด้านซ้าย
4. คลิกที่
** สร้างฐานข้อมูล **
5. เลือก Start in test mode เพราะมิฉะนั้นคุณจะไม่สามารถเข้าถึงฐานข้อมูลจากระบบของคุณได้ เราจะเปลี่ยนการตั้งค่านี้เมื่อเราพัฒนาเว็บไซต์เสร็จแล้ว
จากนั้นคลิก
**ถัดไป** หลังจากทำเช่นนั้น
6. เลือกตำแหน่งของ Firestore DB ของคุณ
**หลังจากที่คุณตั้งค่าตำแหน่งนี้แล้ว คุณจะไม่สามารถเปลี่ยนได้ในภายหลัง บันทึก: **
== สร้างข้อมูล ==
- คลิกที่เริ่มคอลเลกชัน
2. เข้าสู่
**Collection ID ที่คุณสามารถสุ่มตัวอย่างได้ในตอนนี้
3. ป้อนข้อมูลตัวอย่าง เข้า
**sample_doc **เป็น **รหัสเอกสาร **ป้อน **หัวเรื่อง** ภายในช่อง ** ฉันชอบ Cloud** ภายใน **Value จากนั้นคลิก **บันทึก**
= ขั้นตอนที่ 6: สร้างเนื้อหาไดนามิกของเว็บไซต์ =
เราจะแบ่งส่วนออกเป็นสองส่วน ส่วนแรก เราจะดูวิธีการดึงข้อมูลจาก Firestore และนำไปใช้ในเว็บไซต์ ในส่วนที่สอง เราจะดูวิธีการส่งข้อมูลแบบฟอร์ม
**ขั้นแรก เราจะดาวน์โหลดข้อมูลประจำตัวเพื่อเข้าถึง Firestore**
2. คลิกที่
**การตั้งค่า** จากบานหน้าต่างด้านซ้าย และไปที่ **การตั้งค่าโครงการ**
3. ไปที่
**บัญชีบริการ** และคลิกที่ **สร้างรหัสส่วนตัวใหม่
4. คลิกที่
**สร้างรหัส มันจะให้ป๊อปอัปเพื่อดาวน์โหลดรหัส เก็บคีย์ไว้ในโฟลเดอร์ **functions** ของเว็บไซต์
== กำลังดึงข้อมูลจาก Firestore ==
- เปิด
index.js ข้างโฟลเดอร์ functions.js
2. เราจำเป็นต้องกำหนดไลบรารีบางตัวที่เราต้องการใช้ในแอปพลิเคชันของเรา เหล่านี้เป็นห้องสมุดเดียวกับที่เราติดตั้งไว้ก่อนหน้านี้
ฟังก์ชัน const = ต้องการ ('firebase-functionsconst express = ต้องการ ('expressconst เครื่องยนต์ = ต้องการ ('consolidatevar hbs = ต้องการ ('handlebarsconst admin = ต้องการ ('firebase-admin
3. ที่นี่เราตั้งค่าบางสิ่ง:
- เริ่มต้นแอปโดยใช้ด่วน
- เราจะตั้งเครื่องยนต์ของเราเป็นแฮนด์บาร์
- จากนั้นเราจะบอกด่วนว่าโค้ดส่วนหน้าของเราจะอยู่ในโฟลเดอร์มุมมอง
แอพ const = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('ดู enginehbs
4. อนุญาตให้แอปพลิเคชันของคุณเข้าถึงฐานข้อมูล Firestore ของคุณ
*บันทึก:*
1. เปลี่ยน
**YOUR_SDK_NAMEjson กับไฟล์ที่คุณดาวน์โหลดสำหรับ **ข้อมูลรับรองเพื่อเข้าถึง Firestore2 เปลี่ยน URL ฐานข้อมูลเป็น URL ฐานข้อมูลของคุณ หากต้องการดู URL คุณสามารถไปที่**การตั้งค่า >บัญชีบริการ**
var serviceAccount = ต้องการ
YOUR_SDK_NAME.jsonadmin.initializeApp({ข้อมูลประจำตัว: admin.credential.cert(serviceAccount), ฐานข้อมูลURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. ฟังก์ชั่นดึงข้อมูลจาก Firestore
- ID คอลเลกชันคือ
ตัวอย่าง
- รหัสเอกสารคือ
ตัวอย่าง_doc
เราได้กำหนดไว้ข้างต้นในขณะที่ป้อนข้อมูลตัวอย่าง
ฟังก์ชัน async getFirestoreconst firestore_con = wait admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
ถ้า (!doc.exists) { console.log('ไม่มีเอกสารดังกล่าว }
อื่น {กลับ doc.data
.catch(err =>{ console.log('ข้อผิดพลาดในการรับเอกสาร', errreturn writeResult
}
**เราใช้หมายเหตุ: ** **async** เนื่องจากเราต้องรอการดำเนินการตามสัญญาให้เสร็จสิ้นระหว่างฐานข้อมูลและเว็บไซต์ของเรา
6. สร้างเส้นทางและส่งผลลัพธ์ไปยังส่วนหน้า
app.getasync (คำขอ, การตอบสนอง) var db_result = รอคอย getFirestoreresponse.render ('indexdb_resultexports.app = functions.https.onRequest (แอป);
7. สร้าง
**index.hbs** ภายในโฟลเดอร์ **views** hbs เป็นไฟล์แฮนเดิลบาร์ หมายเหตุ: **
8. เขียนโค้ด HTML พื้นฐานนี้ไว้ข้างใน
**index.hbs** เพื่อดูผลลัพธ์ที่ดึงมา
ทูชาร์ แชนด์ กาปูร์
