ตัวอย่างการพัฒนา 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>

โดยเมื่อรันแล้ว หน้า browser จะพิมพ์ข้อความ API ออกมา