STM32LoRa ตอนที่ 3.1 อธิบาย Code บางส่วนของ Application Server ที่สร้างไว้ (Backend และ Frontend)

จากในบทความตอนที่ 3 ผมได้ทำการสร้าง Application Server ไว้ แต่ไม่ได้อธิบายที่มาที่ไปของมัน มาในตอนนี้ผมจะอธิบายโค๊ดในส่วนที่สำคัญของมันนะครับ

<< ตอนที่ 3 : ส่งข้อมูลจาก Network Server ไปยัง Application Server

ภาพรวมของ Application Server

แบ่ง Application Server ออกเป็น Frontend และ Backend

  1. Backend เป็น NodeJS Server โดยใช้ ExpressJS Framework
  2. Frontend เป้น React Framework

โดยทั้งสองรับส่งข้อมูลหากันผ่าน JSON Data ซึ่งในขั้นตอนการพัฒนาโปรแกรมนั้นเราจะรัน Frontend ที่ Port 3000 และ Backend ที่ Port 5000 และมีการใช้ Proxy Library ที่ Frontend เพื่อให้เราสามารถเรียกใช้ Backend ผ่าน Port 3000 ของ Frontend ได้เลยทำให้ง่ายในการพัฒนาระบบ เพราะเมื่อเรานำมันไป Deploy ใน Heroku เราจะต้องทำการ Build Frontend ออกมาเป็นไฟล์ชนิด Static Website และให้รันอยู่ใน Port 80 พร้อมกันกับ Backend

Backend

โครงสร้างไฟล์ /loraiot_server สำหรับเป็น Backend โดยใช้ Express Framework

ไฟล์ /loraiot_server/package.json

คำสั่ง engines จะถูกใช้ใน Heroku เพื่อบอก Heroku ว่าเราจะใช้ engines เวอร์ชั่นไหนในการ Run Codes ที่อัปโหลดขึ้นไปนี้

คำสั่ง scripts เป็นคำสั่งเพื่อใช้เริ่มการทำงานของตัว Backend นี้

ในส่วนของ Dependencies จะบอกว่าเราใช้ Library ตัวไหนบ้างในโปรเจคนี้

ไฟล์ /loraiot_server/index.js

จะเป็ไฟล์แรกที่ระบบเริ่มทำงาน โดยจะมีการเตรียมการใช้งาน Library ต่างๆ ในนี้ โดยโค๊ดที่น่าสนใจคือ

ไฟล์ /loraiot_server/app/routes/loraiotRoutes.js

เป็นไฟล์ที่ใช้กำหนด URL ที่เราจะใช้ใน Backend ของเรา

ไฟล์ /loraiot_server/app/controllers/loraiotController.js

เป็นไฟล์ควบคุมการทำงานของ Server โดยจะมีสอง Function การทำงานคือ

1. exports.store = async (req, res, next) => {…}

จะทำการรับข้อมูลที่ถูกส่งมาจาก Network Server แล้วนำเข้าไปเก็บไว้ใน Sensor Collection ของ Database (MongoDB of mlab)

2. exports.list = async (req, res, next) => {…}

จะทำการอ่านค่า Sensor จากที่เก็บไว้ใน Database แล้วส่งออกไปในรูปแบบของ JSON Data เมื่อ Frontend มีการร้องขอเข้ามา

ไฟล์ /loraiot_server/config/keys.js

เป็นไฟล์ที่เก็บค่าคงที่ที่ใช้ในโปรแกรมโดยจะเก็บ mongoURI ที่ใช้บอกตำแหน่งของ Database ที่เราจะใช้งาน โดยผมทำการแยก Key ออกเป็น 2 ชุดตามการใช้งาน คือ Development Key (keys-dev.js) และ Production Key (keys-prod.js) ซึ่งไฟล์ /loraiot_server/config/keys.js จะมีหน้าที่เลือกชุด Key ที่จะนำมาใช้งานตาม Enviroment Variable ที่เรา set ไว้ในตัวแปร NODE_ENV โดยที่ถ้าเป็นในโหมด Production เราจะใช้ Key ที่ถูกเซ็ตไว้ใน Enviroment Variable ของเครื่อง Server แต่ถ้าเป็น Developmode เราก็จะใช้ Key ที่ถูกใส่ไว้ใน ไฟล์ keys-dev.js ได้โดยตรงเลย

Frontend

โครงสร้างไฟล์ /loraiot_server/client สำหรับเป็น Frontend โดยใช้ React Framework ผ่าน create-react-app

ไฟล์ /loraiot_server/client/package.json

ที่น่าสนใจคือมีการใช้ http-proxy-middleware เพื่อทำ Proxy เนื่องจากการใช้ react-scripts เวอร์ชั่นตั้งแต่ 2 ขึ้นไป เราไม่สามารถใช้คำสั่ง proxy ใน package.json แบบเดิมได้ต้องใช้ 3rdParty ช่วยในการทำ โดยต้องสร้างไฟล์ setupProxy.js ไว้ใน /loraiot_server/client/src/setupProxy.js โดยไฟล์นี้เราจะใช้กำหนด URL ของ Backend ที่เราจะใช้งานใน Frontend ทำให้เราไม่จำเป็นต้องอ้างถึง Port 5000 ของ Backend เพราะถ้า URL ที่เข้ามามี Part ตรงกับที่เราระบุไว้มันจะทำการส่งต่อไปยัง URL ของ Backend เองเลย

โดยเราจะเขียน UI ไว้เพียงหน้าเดียวคือหน้าแสดงรายการของ Sensor ที่เก็บไว้ใน Database โดยโค๊ดจะอยู่ในไฟล์ /loraiot_server/client/src/screens/SensorDataReceiver.js

ในบทความคั่นกลางนี้ก็จบแล้วครับ