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

<<ตอนที่ 2 : เชื่อมต่อกับ LoRa IoT by CAT (โหมด ABP)

จากบทความที่แล้วเราได้ทำการส่งข้อความคำว่า “Hello World!” จาก End Device (STM32 LoRa Descovery kit) ไปยัง Network Server ซึ่งเราพบว่าการส่งตัวแปรชนิด char ผ่านเครือข่าย LoRa IoT by CAT นั้น ข้อมูลที่ส่งจะถูกแปลงให้อยู่ในรูปแบบของเลขฐาน 16 ก่อนจึงจะส่งออกได้

ในบทความนี้เราจะมาทำในส่วนต่อไปคือการส่งข้อมูลจาก Network Server ไปยัง Application Server กันนะครับ พร้อมกันแล้วก็ Let’s go….


เราจะทำอะไรกันบ้าง ?

  1. ศึกษาความรู้พื้นฐานที่จำเป็นในการส่งข้อมูลจาก Network Server ไปยัง Application Server
  2. เทคโนโลยีที่ใช้ในการพัฒนา Application Server
  3. ติดตั้งโปรแกรมที่จำเป็นต้องใช้สำหรับการเขียนโปรแกรม
  4. สร้าง Database บน https://www.mlab.com
  5. สร้าง Application Server บน https://www.heroku.com
  6. สร้างโปรเจค Backend และ Frontend
  7. การ Deploy app ขึ้นสู่เว็บไซต์ Heroku
  8. การส่งข้อมูลจาก Network Server ไปยัง Application Server ที่เราสร้างขึ้น
  9. ทดสอบการส่งข้อมูลจาก End Device

1. ศึกษาความรู้พื้นฐานที่จำเป็นในการส่งข้อมูลจาก Network Server ไปยัง Application Server

การส่งข้อมูลจาก Network Server ไปยัง Application Server จะกระทำผ่านเครือข่าย Internet โดยเราจะต้องไปเพิ่มเส้นทาง URL ปลายทางที่ใช้รับข้อมูล ผ่านเมนู Routing Profile ในเว็บไซต์ของ CAT TELECOM (https://loraiot.cattelecom.com/portal/home/routing)

จากรูปจะพบว่า Routing Profile รองรับการส่งข้อมูลด้วยโปรโตคอล 2 แบบคือ HTTP และ MQTT ซึ่งในบทความนี้เราจะเลือกใช้การส่งข้อมูลด้วยโปรโตคอล HTTP

ในการส่งข้อมูลจาก Network Server ไปยัง Application Server ของ LoRa IoT by CAT ผ่านโปรโตคอล HTTP จะส่งแบบ POST Method อีกทั้งยังรองรับการทำ Basic Authentication ด้วยครับ


2. เทคโนโลยีที่ใช้ในการพัฒนา Application Server

เราใช้เทคโนโลยีของภาษา Javascript และ NodeJS เป็นหลักในการพัฒนาระบบ โดยแยก Backend และ Fontend ออกจากกัน ซึ่งทั้งสองจะรับส่งข้อมูลกันในรูปแบบของ JSON ผ่าน AJAX ครับ โดยผมจะสรุปเทคโนโลยีและ Framwork ที่ใช้ดังนี้

จากภาพจะเห็นว่าเราต้องสร้าง URL 2 อัน คือ

  1. https://myproject.herokuapp.com
    ใช้สำหรับแสดงข้อมูลใน Database ที่ส่งมาจาก Network Server
  2. https://myproject.herokuapp.com/api/iot/receiver
    ใช้สำหรับรับข้อมูลจาก Network Server แล้วนำไปเก็บใน Database

Backend

ใช้ NodeJS ซึ่งเป็น Platform ตัวหนึ่งที่เขียนด้วย JavaScript สำหรับทำเป็น Web Server โดยเราจะมาทำเป็น Restful Web Service โดยใช้ข้อมูลแบบ JSON ในการติดต่อกับ Frontend ซึ่งเราจะใช้ Library หลัก 2 ตัวคือ

  1. ExpressJS เป็น Framwork หลักใน Project
  2. Mongoose เป็น Library สำหรับใช้ติดต่อกับ MongoDB Database

Frontend

ใช้ React Framwork ในการทำ UI ของเว็บไซต์ Application Server ของเรา โดยติดต่อกับ Backend ผ่านการแลกเปลี่ยนข้อมูลแบบ AJAX ซึ่งเราจะใช้ Library เพิ่มเติมคือ axios ในการทำ Http request กับ Backend

Database

ใช้ mLab.com ซึ่งเป็น Database as a Service ตัวหนึ่งที่เราสามารถใช้บริการได้ฟรี โดยจะให้บริการฐานข้อมูลแบบ NoSQL ในรูปแบบของ MongoDB โดยเราจะใช้ในการเก็บข้อมูลที่ถูกส่งมาจาก Network Server

Web Server

Heroku ซึ่งเป็น Platform as a Service (Paas) ที่เปิดให้เราใช้งานได้ฟรี เราจะทำการ deploy Backend และ Frontend ลงบนนี้ครับ


3. ติดตั้งโปรแกรมที่จำเป็นต้องใช้ในการเขียนโปรแกรม

โปรแกรมที่เราต้องทำการติดตั้งบนเครื่องพัฒนามีดังนี้

3.1 NodeJS 10.15.0 LTS

ดาวน์โหลดและติดตั้งโปรแกรมจาก https://nodejs.org/en/

3.2 Update NPM Package Manage

หลังจากติดตั้ง Nodejs แล้วให้เข้า command line แล้วพิมพ์ $ npm install npm@latest -g

3.3 Yarn Package Manage

ดาวน์โหลดและติดตั้งโปรแกรมจาก https://yarnpkg.com/lang/en/

3.4 Visual Studio Code IDE (VSCode IDE)

ดาวน์โหลดและติดตั้งโปรแกรมจาก https://code.visualstudio.com/

3.5 Git Client

ดาวน์โหลดและติดตั้งโปรแกรมจาก https://git-scm.com/

3.6 Heroku CLI

ดาวน์โหลดและติดตั้งโปรแกรมจาก https://devcenter.heroku.com/articles/heroku-cli

3.7 Create-React-App

เปิด command line แล้วพิมพ์ $ npm install -g create-react-app


4. สร้าง Database บน https://mlab.com

เข้าเว็บไซต์ https://mlab.com ทำการสมัครสมาชิกและล็อกอินเข้าสู่ระบบ

กดปุ่ม + create new จะขึ้นหน้าตัวเลือกให้เลือกดังนี้

  • Cloud Provider เป็น amazon web services
  • Plan Type เป็น SANDBOX

เสร็จแล้วกดปุ่ม CONTINUE

AWS Region เลือกเป็น US East (Virginia) แล้วกดปุ่ม CONTINUE

ใส่ชื่อ Database เป็น loraiot แล้วกดปุ่ม CONTINUE

กดปุ่ม SUBMIT ORDER

กดเข้าไปใน loraiot เพื่อทำการสร้าง user สำหรับการใช้งาน database นี้

เลือกแท็บ User -> Add database user

Database username : test
Database password : password8
Confirm password : password8

แล้วกด Create

ให้ Copy ข้อความมา mongodb://<dbuser>:<dbpassword>@ds151614.mlab.com:51614/loraiot

แล้วใส่ข้อมูลของ database user ที่เราได้สร้างไว้จะได้

mongodb://test:password8@ds151614.mlab.com:51614/loraiot

เป็นอันเสร็จสิ้นการเตรียม Database เราจะนำข้อมูลการเชื่อมต่อนี้ไปใช้ในหัวข้อถัดไป


5. สร้าง Application Server บน www.heroku.com

เข้าเว็บไซต์ https://www.heroku.com ทำการสมัครสมาชิกและล็อกอินเข้าสู่ระบบ

เลือก New -> Create new app แล้วตั้งชื่อ App name จากนั้นกดปุ่ม Create app

ต่อมาเราจะทำการตั้งค่า Enviroment Variable โดยไปที่แท็บ Settings -> Reveal Config Vars

ทำการเพิ่ม Config Vars ที่จำเป็น 2 ค่าคือ

  • MONGO_URI -> ตั้งค่า URI ของ MongoDB Database ที่เราสมัครไว้กับ mlab.com ในที่นี้จะเป็น mongodb://test:password8@ds151614.mlab.com:51614/loraiot
  • COOKIE_KEY -> ข้อความไว้สำหรับเข้ารหัสข้อมูลกับ cookie โดยจะเป็นตัวอักษรสลับกับตัวเลข

เมื่อตั้งค่า Config Vars เสร็จแล้ว ให้ไปที่แท็บ Deploy แล้วเลื่อนมาด้านล่างจะพบคำสั่งสำหรับการ Deploy using Heroku Git ให้เปิดหน้านี้ค้างไว้ก่อน เราจะใช้คำสั่งนี้ในการ Deploy โปรแกรมของเรา โดยเราต้องทำการสร้างโปรเจค Backend และ Frontend ขึ้นมาก่อน


6. สร้างโปรเจค Backend และ Frontend

เปิด command line พิมพ์คำสั่ง

$ mkdir loraiot_server
$ cd loraiot_server
$ npm init
กด Enter จนจบคำสั่ง

เนื่องจากเพื่อไม่ให้บทความนี้ยาวเกินไป ผมเลยได้สร้างตัวโปรแกรมที่จะทำไว้ให้แล้ว ท่านสามารถดาวน์โหลดนำไฟล์มาวางไว้ที่โฟล์เดอร์ loraiot_server ที่ได้สร้างขึ้นได้เลย โดยดาวน์โหลดได้จาก

https://github.com/choonewza/stm32lora_loraiot_ep3

เมื่อแตกไฟล์ลงใน loraiot_server แล้วจะได้โครงสร้างดังนี้

โครงสร้างโฟลเดอร์ loraiot_server
โครงสร้างโฟลเดอร์ client ที่อยู่ภายในโฟลเดอร์ loraiot_server

เข้า command line แล้วมาที่ใช้คำสั่ง cd มาที่โฟล์เดอร์นี้

$ cd loraiot_server
$ yarn
$ cd client
$ yarn
$ cd ..

โปรแกรม Yarn จะไปดาวน์โหลด Library ของ node_modules ที่จำเป็นต้องใช้งาน

จากนั้นให้ใช้โปรแกรม VSCode IDE แก้ไขไฟล์ /config/keys-dev.js ตรง mongoURL โดยให้ใส่ข้อมูลการเชื่อมต่อกับ Database ที่เราสร้างไว้ในข้อ 4.

mongodb://test:password8@ds151614.mlab.com:51614/loraiot
แก้ไขใน VSCode IDE

เพี่ยงแค่นี้เราก็เสร็จสิ้นการเตรียมโปรเจคแล้ว ต่อมาเราจะทำการ Deploy ขึ้นสู่ Server จริงกันเลยครับ


7. การ Deploy app ขึ้นสู่เว็บไซต์ Heroku

เข้า Command line แล้วไปที่ loraiot_server พิมพ์คำสั่ง $ heroku login แล้วทำการ Login โดยใช้ username และ password ของเว็บไซต์ Heroku ซึ่งการที่เราจะใช้คำสั่งนี้ได้นั้น เราจำเป็นต้องติดตั้ง Heroku CLI ก่อนครับ

$ cd loraiot_server
$ heroku login
$ git init
$ heroku git:remote -a loraiot
$ git add .
$ git commit -am "make it better"
$ git push heroku master

มันจะเป็นการ upload โปรแกรมเราขึ้น git ของ heroku แล้วจะทำการ Deploy ลง Server ของเรา เมื่อเสร็จแล้วให้เปิด Browser แล้วไปที่ https://loraiot.herokuapp.com

https://loraiot.herokuapp.com/

จะพบหน้าเว็บที่ว่างเปล่าไม่มีข้อมูลอะไรแสดง ที่เป็นแบบนี้ เพราะเรายังไม่ได้ตั้งค่าให้ Network Server ส่งข้อมูลไป Application Server


8. การส่งข้อมูลจาก Network Server ไปยัง Application Server ที่เราสร้างขึ้น

เข้าเว็บไซต์ https://loraiot.cattelecom.com/portal/home/routing

Routing Profile -> Create New

การ Add URL ใน Routing Profile

ในหน้า Add URL ให้ใส่ URL จาก Application Server ที่เราสร้างไว้รับ Request จาก Network Server ไว้ ก็คือ https://myproject.herokuapp.com/api/iot/receiverเสร็จแล้วกด Yes

แสดงการ URL ที่ได้ผูกไว้กับ Routing Profile ชื่อ LoRaIOT_TEST

จากรูปจะเห็นได้ว่าเราสามารถส่งต่อข้อมูลไปยัง Application Server ได้หลายเครื่องพร้อมกันครับ


9. ทดสอบการส่งข้อมูลจาก End Device

ให้เราต่ออุปกรณ์ End Device (STM32 LoRa Descovery kit) เข้ากับสาย USB แล้วทำการส่งข้อมูลออกไปยังเครือข่าย LoRa WAN ผ่าน LoRa IoT by CAT โดยดูข้อมูลที่ส่งออกได้ที่ หน้า Logger

https://loraiot.cattelecom.com/portal/home/logger

ซึ่งข้อมูลจะตรงกับใน Application Server ที่เราได้สร้างไว้

https://loraiot.herokuapp.com/

โดยข้อมูลทั้งหมดจะเก็บอยู่ใน Database ที่ mlab.com

https://mlab.com

จะสังเกตุได้ว่าถ้าเราต้องการส่งข้อความว่า “Hello World!” ออกจาก End Device ไปยัง Network Server เราต้องแปลงข้อมูลนั้นให้อยู่ในรูปแบบของเลขฐาน 16 (Ascii String) ก่อนจึงจะทำการส่งไปยัง Network Server ได้ และเมื่อ Network Server ได้รับแล้วทำการ Forward ข้อมูลนั้นต่อไปให้กับ Application Server ข้อมูลที่ส่งไปก็จะยังคงเป็นเลขฐาน 16 อยู่เหมือนเดิมโดยไม่มีการเปลี่ยนกลับไปเป็นคำว่า “Hello World!” ดังนั้นฝั่ง Application Server จึงจำเป็นต้องทำการแปลงข้อมูลที่ได้รับกลับเป็นข้อความดังเดิมด้วยตัวมันเอง

แสดงลักษณะการส่งข้อมูลในเครือข่าย LoRa IoT by CAT

จบแล้วครับกับบทความนี้ เราสามารถประยุกต์ให้ความรู้จากบทความนี้ได้โดยเปลี่ยนจากการส่งข้อความมาเป็นค่าอุณหภูมิ ความชื้น หรือค่าอื่น ๆ ที่ได้จากการต่อ Device กับ Sensor ต่าง ๆ แล้วนำมาแสดงบนหน้าเว็บไซต์ได้เลย ซึ่งในโอกาสหน้าผมจะเขียนอธิบายวิธีการต่อ Device กับอุปกรณ์ LED, จอ LCD , Relay Switch และ Sensor ต่าง ๆ ครับ แต่ในบทความหน้าจะเป็นการสาธิตการส่งคำสั่งจาก Application Server กลับไปยัง End Device เพื่อทำการเปิดปิดไฟ LED ที่ Build in อยู่ในบอร์ดครับ สวัสดีครับ