Nodejs and XML Part II

      จากบทความที่แล้ว ที่เราได้ทดสอบว่าเราจะอ่านและเขียน File xml ด้วย Nodejs ไปแล้วครั้งนี้เราจะมาทำ Webapplication กันโดยให้ Nodejs เป็น Backend 

บทความที่แล้ว Nodejs and XML

https://selectedtopicenarudon.blogspot.com/2019/06/nodejs-and-xml.html

เริ่มกันเลย 

• NodeJS Read file from xml เราจะอ่าน xml โดยใช้คำสั่ง "fs.readFile จากนั้นจะแปลง string ให้เป็นรูปแบบ JSON (เผื่อเราเอาไว้ใช้ในครั้งต่อไป) แล้วนำข้อมูลใน JSON ไปใส่ลงใน array

Code NodeJS 

api/gdp.js

• ต่อไปเราจะทำการทดสอบ API ที่เราเขียนขึ้นด้วย Postman เป็นเครื่องมือสำหรับที่ไว้ใช้สำหรับ API Developers เมื่อเราเขียน API Service ขึ้นมาเรามักจะใช้ Postman ที่เป็น API Testing tool ในการส่ง Request และดู Response ที่ได้ต่างๆกลับมา (ตรงนี้ไปติดตั้ง Postman ด้วยนะ) ต่อมาให้เราทดสอบโดยการตั้งค่า postman ตามรูปเลย 

เมื่อเรากดทดสอบ หรือ send จะได้ status 200 กลับมา และจะได้ผลลัพท์เป็น array กลับมา 

• ต่อมาเราจะสร้าง Front-end ของเว็บเรา ถ้าพูดถึงการเขียนเว็บไซต์ frontend ในปัจจุบัน มี framework ที่ฮิตๆ กัน เช่น React, Angular และ framework น้องใหม่อีกตัวที่มาแรงเป็นอย่างมากคือ Vue.js ซึ่งเราจะติดตั้ง vue.js และ nuxt.js เพราะเราจะใช้ nuxt.js 

ทำไมถึงต้อง Vue.js ??

     - Vue.js มี learning curve ที่ไม่สูงมากถ้าเปรียบเทียบกับ React หรือ Angular

     - Vue.js เป็น framework ที่มีโครงสร้างไม่ซับซ้อนเข้าใจง่าย

     - Vue.js ได้นำข้อดีของ React และ Angular มารวมกัน

• โดยเราจะสร้างหน้า index ของเว็บเรา

index.vue

• จากนั้นเราจะทำการส่ง data จาก back-end ของเรามายัง front-end ด้วย axios 

axios คือไลบรารี่ที่ใช้ในการส่ง XMLHttpRequest สำหรับการพัฒนาแอพฝั่ง Client และยังสามารถใช้ส่ง HTTP Request สำหรับการพัฒนาแอพด้วย Node.js ด้วย ซึ่งเราจะติดตั้ง axios ลงใน nuxt.js แล้วเขียน code ตามนี้

index.vue

• เมื่อเรา Run server nodejs และ nuxt.js(vue.js) แล้วเข้าไปที่ localhost:3000 (post ของเราที่ตั้งไว้)

จะได้ผลลัพท์ตามนี้คือ front-end ของเราจะส่ง request ไปยัง back-end ของเราด้วย axios เพื่อขอ data มาแสดงที่หน้าเว็บของเรา 

ถ้าอยากได้ code แบบเต็มไปดูได้ใน Gitlab ได้เลยครับ

https://gitlab.com/a5710122/selecet_topic