/ meteor

[Meteor in Thai] REST 2 DDP

สวัสดีครับ ผมขอใช้ Blog นี้โพสต์เกี่ยวกับเรื่องของ Meteor in Thai เป็นการชั่วคราวก่อนที่จะย้ายไปที่ใหม่ครับ วันนี้ผมขอเริ่มที่หัวข้อเกี่ยวกับการแปลง REST APIs ให้ไปอยู่ในรูปของ DDP ที่ Meteor Client นิยมใช้กันครับ


okgrow:rest2ddp

สองสามวันที่ผ่านมา ผมเห็น Atmosphere Package อันนึงที่น่าสนใจมาก นั่นก็คือ okgrow:rest2ddp เห็นว่ามันแปลง REST APIs ไปเป็น DDP ได้ แต่ก็ยังไม่กล้าแชร์ต่อในเพจ Meteor in Thai เพราะยังไม่แน่ใจเรื่องรายละเอียด

วันนี้ผมได้ลองใช้ Package นี้แล้วครับ ก็เลยเอามาเล่าต่อว่ามันเป็นอย่างไร ผมขอเริ่มด้วยหลักการทำงานของมันก่อนละกันครับ

  1. ตั้งค่าให้ REST2DDP รู้ก่อนว่าเราจะดึงข้อมูลอะไรจากที่ไหน ความถี่เท่าไหร่
  2. สร้าง Collection ขึ้นมาเก็บข้อมูลที่ดึงมาได้
  3. Subscribe ไปใช้งาน

ง่ายๆ เลยใช่ไหมครับ งั้นเรามาเริ่มโค้ดกันเลยดีกว่า

coding

ในส่วนนี้ผมจะทำการสร้าง RESTful Server ขึ้นมาก่อนนะครับ แล้วก็ค่อยเอา Meteor ไปดึงข้อมูลอีกที

เริ่มจาก สร้าง folder ขึ้นมาโดยใช้ชื่อว่า RESTfulServer แล้วก็ตั้งค่า NPM ซะ

mkdir RESTfulServer

cd RESTfulServer

npm init

ระหว่าง init ผมก็ตั้งชื่อ module ไปว่า restful-server ครับ พอเสร็จแล้วก็สั่ง ติดตั้ง hapi.js ด้วยคำสั่ง

npm install hapi --save

hapi.js เป็น framework สำหรับสร้าง API Service บน Node.js 

หลังจากนั้นก็สร้างไฟล์ index.js

touch index.js

แล้วก็ใส่โค้ดสำหรับสร้าง RESTful Server ลงไปครับ

ในนั้นจะมี route นึงชื่อ test ครับ เป็น API ง่ายๆ ที่จะคือค่าเป็น json หน้าตาแบบนี้

*ค่าข้างใน data จะสุ่มใหม่เรื่อยๆ ทุกครั้งที่เรียก

เสร็จแล้วก็รันเลยครับ ด้วยสำสั่ง

node index.js

แล้วก็เปิด browser ไปที่ localhost:3002/test เพื่อเรียกฟังก์ชันที่เขียนไว้ ก็จะได้ผลลัพธ์แบบด้านบน

สาเหตุที่ต้องใช้ port 3002 เนื่องจาก โดย default แล้ว Meteor จะใช้ port 3000 สำหรับรัน Server และ 3001 สำหรับรัน MongoDB เราจึงควรเลี่ยง Port ดังกล่าว

ต่อมาในฝั่ง Meteor บ้างครับ ผมสร้าง Project ใหม่ชื่อ meteor-rest2ddp (เปิดใน Terminal ใหม่ อันเดิมไม่ต้องปิด)

meteor create meteor-rest2ddp

cd meteor-rest2ddp

หลังจากนั้นก็ติดตั้ง Package okgrow:rest2ddp

meteor add okgrow:rest2ddp

แล้วเปิดไฟล์ meteor-rest2ddp.js ขึ้นมา ลบโค้ดทิ้งให้หมด แล้วใส่ config สำหรับดึงค่าจาก service ของเราใน if(Meteor.isServer) ครับ

จากโค้ดจะเห็นว่าผมตั้งชื่อมันว่า sample ให้ดึงข้อมูลจาก http://localhost:3002/test โดยพอได้ข้อมูลมาแล้วให้ดึงค่าบางส่วนออกมา โดยเอามาจาก Path $.data. (เอา object ที่อยู่ใน data) เก็บลง Collection ชื่อ samples แล้วดึงใหม่ทุก 1 วินาที

ตอนกำหนด Path ที่ดึงจาก json อาจจะยากนิดนึงครับ ลองอ่านใน Document ดูครับ (https://www.npmjs.com/package/jsonpath)

หลังจากนั้นก็สร้าง collection ชื่อ samples ตามที่กำหนดไว้เมื่อกี้ ผมสร้างไว้ใน if(Meteor.isClient) ครับ

หลังจากนั้นก็ config template ของเราให้ subscribe ข้อมูลจาก REST2DDP แล้วก็สร้าง helpers สำหรับเอาข้อมูลไปแปะบน Template ครับ

แล้วก็ไปแก้ template ให้แสดงข้อมูลจาก samples ครับ

รันได้เลยครับ

meteor

ก็จะได้ผลลัพธ๋คล้ายๆ แบบนี้

  • 69
  • 27
  • 74
  • 19
  • 90
  • 36
  • 51

พอผ่านไป 1 วิ ปุ๊บ มันก็จะโหลดข้มอมูลใหม่มาใส่

จะเห็นว่า okgrow:rest2ddp นั้นทำหน้าที่เป็นคนกลางในการดึงข้อมูลจาก REST Apis ให้เราเฉยๆ เพื่อให้เราสามารถเขียนโค้ดแบบ Meteor Style แทนที่จะไปเรียก REST เองตรงๆ ผมว่ามันก็สะดวกดีนะครับ นอกจากนี้เห็นว่าใส่ parameter หรือ headers ได้ด้วย ยังไงก็ไปลองเล๋นกันดูครับ

สำหรับท่านที่ต้องการโค้ดทั้งหมดไปดูกันได้ที่ GitHub ครับ

ขอบคุณ OK GROW! ที่สร้างสรรค์สิ่งดีๆ มาให้ใช้ และขอบคุณผู้อ่านทุกท่านครับ สวัสดีครับ