ตัวอย่างการพัฒนา API บน Firebase Cloud Function ด้วย NodeJS และ ExpressJS
Firebase มีบริการสำหรับนักพัฒนาในการสร้าง API ด้วย NodeJS เรียกว่า Firebase Cloud Function ในบทความนี้จะพูดถึงขั้นตอนการพัฒนา API บน NodeJS และ ExpressJS ซึ่งจะ Deploy บน Firebase Cloud Function โดยจะอธิบายตั้งแต่ขึ้นตอนการติดตั้งจนถึงการเขียน API Function
โดยเริ่มต้นเราต้องสร้าง Project ใหม่บน firebase ก่อน โดยในที่นี้จะใช้ชื่อว่า myCloudFunction
เปิดการใช้งาน Cloud Function
เปิด Comand Line เพื่อสร้าง Folder งานใหม่ชื่อ firebase โดยพิพมพ์คำสั่ง
md firebase enter
และ
cd firebase enter เพื่อเข้าไปใน folder firebase ที่เราเพิ่งสร้างขึ้นมาใหม่
Install Firebase โดยพิมพ์ npm install -g firebase-tools enter
Login เข้าสู่ Firebase โดยพิมพ์คำสั่ง Firebase Login enter
Login โดยใช้ Google Account
พิมพ์คำสั่ง firebase init enter พิมพ์ Yes แล้วเลือก Functions
เลือก โปรเจคที่เราได้สร้างเอาไว้ใน Firebase
ในที่นี้เราจะเลือกใช้ ภาษา Javascript ในการเขียน
พิพม์ y แล้วกด enter
เปิด File index.js ใน folder firebase/functions ( Folder firebase )
โดยจะเป็นการพิพมพ์ข้อความ Hello from Firebase !
ทดลองนำ Deploy Code ไปที่ Firebase โดยพิพมพ์คำสั่ง firebase deploy enter
เมื่อเสร็จแล้วจะขึ้นว่า Deploy complete !
ลองเปิด Browser แล้วลองพิมพ์ URL ของ Funtion
ต่อไปจะลองใช้งาน Firebase Cloud Function ร่วมกับ ExpressJS โดยต้อง install ExpressJS ก่อน
ไปที่ Folder firebase/functions แล้ว install expressJS โดยพิมพ์ npm install express --save
จากนั้น install cors เพื่อให้สามารถเรียก API จากภายนอกได้ โดย พิมพ์ npm install cors
เปิดไฟล์ firebase/functions/index.js อีกครั้งเพื่อสร้าง api โดยในที่นี้จะกำหนดให้เรียก api โดยใช้ URL https://us-central1-mycloudfunction-788b6.cloudfunctions.net/app/api method เป็นแบบ GET
ทดลองรัน API Function แบบ local โดยพิมพ์ firebase serve --only functions
ทดลองโดยเปิด Browser แล้วพิมพ์ URL สำหรับทดสอบ API
Deploy function ไปที่ firebase โดย พิมพ์ firebase deploy enter ใน command line
เขียนโปรแกรมทดลองเรียก API จาก Firebase โดยพิมพ์ Code ดังนี้
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.write( xhttp.responseText );
}
};
xhttp.open("GET","https://us-central1-mycloudfunction-788b6.cloudfunctions.net/app/api", true);
xhttp.send();
</script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.write( xhttp.responseText );
}
};
xhttp.open("GET","https://us-central1-mycloudfunction-788b6.cloudfunctions.net/app/api", true);
xhttp.send();
</script>
โดยเมื่อรันแล้ว หน้า browser จะพิมพ์ข้อความ API ออกมา