แจ้งเตือนมังงะ ตอนล่าสุด ผ่านทาง FB
เรื่องมีอยู่ว่า
คือปกติผมเป็นคนที่ชอบอ่านมังงะ Online (กับเพื่อนในกลุ่ม อีกสองสามคน)โดยเฉพาะ One piece (อย่าลืมอุดหนุนรวมเล่มด้วยนะครับ -,,-) แล้วต้องเข้าไปเช็คบ่อยๆ ว่า อาทิตย์นี้ อาจารย์ โอดะ งดมั้ย หรือ วันนี้ มีตอนใหม่มาหรือป่าว
อีกอย่าง อยากได้เม้นแรกดูสักครั้งในชีวิต #ผิด
แล้ว วันก่อน One Piece ตอนใหม่มาพอดี (อ่านไม่ทันเพื่อนอีกละ) ผมก็เข้าไปอ่านตามปกติ แล้วเมื่อคืน ก็ลองคิดเล่นๆดูว่า ถ้ามังงะตอนใหม่มา ให้แจ้งเตือนในกลุ่มแชท ก็น่าจะดี ไม่ต้องกลัวใครสปอย ก่อน และ จะได้ไม่ต้องไปเช็คทุกวัน (หลังจากอ่านจบ ก็เริ่มทำตั้งแต่ เที่ยงคืน ยาวไปจนถึง ตีสี่ zZz)
หลักการคร่าวๆที่ผมคิดไว้
- ดึง มังงะจากเว็บมา (เว็บที่ผมอ่าน มี RSS ให้ ง่ายเลย ไม่ต้อง Scraper อะไรให้ยุ่งยาก) ผมแค่แปลง XML เป็น JSON แล้วใช้ Firebase Cloud Function ทำเป็น API ไว้เรียกใช้งาน
- ตั้ง Cron เช็คกับ DB ว่ามีตอนใหม่มามั้ย อ้างอิงจาก Url ถ้าไม่มี ให้บันทึกลงไป (ในที่นี้ ผมเลือกใช้ Firebase)
- ทุกครั้งที่มีข้อมูลใหม่เกิดขึ้นใน DB ให้ Trigger (Message) มาบอก
* ขั้นตอนส่ง Message ผมคิดอยู่สองทางคือ ทำเป็นบอทในเพจ แล้วให้บอทแชทมาบอกเพื่อนๆ รายคน เพราะเข้าใจว่า @ Bot ลงใน Group Chat FB เหมือนใน Telegram ไม่ได้ (ถ้าได้บอกผมด้วย )อีกทางคือ สร้าง FB สำหรับส่งข้อความโดยเฉพาะ แล้ว @ เข้าไปใน Group ผมเลือกอย่างหลัง เพราะขี้เกรียจทำเพจ
ขั้นตอนที่ 1. แปลง RSS (XML Format) เป็น JSON แล้วใช้ Firebase Cloud Function ทำเป็น REST API
- สร้าง Firebase Project ขึ้นมาใหม่
- ติดตั้ง Firebase CLI
npm i -g firebase-tools- Login Firebase
- สร้าง Firebase Project (ใช้ลูกศร ขึ้นลง เพื่อเลื่อน เคาะ Spacebar 1 ทีเพื่อเลือก) จากนั้นกด Enter
- เลือกโปรเจค ก่อนหน้านี้ที่เราสร้างไว้
จากนั้นจะมีให้เลือก อีกสองสามอย่าง (ESLint, Javascript or TypeScript, NPM) ก็เป็นอันเสร็จ
- เปิดโปรเจคขึ้นมา จะได้แบบนี้
- ติดตั้ง rss-to-json สำหรับแปลง RSS Feed (XML Format) เป็น JSON เพื่อความสะดวก
npm i rss-to-json -s- จากนั้นเขียนโค้ดเพื่อดึงข้อมูล
- ข้อมูลที่ได้จาก RSS Feed (XML Format) ก่อนการแปลงเป็น Json จะเป็นแบบนี้
- ติดตั้ง express เพื่อความสะดวกในการเขียน API บน NodeJs
npm i express -s- จากนั้นเขียนโค้ด เพื่อทำ Rest API โดยใช้ express สำหรับรันบน Firebase Cloud Function
- ผลลัพธ์ที่ได้ (ข้อมูลที่ได้จาก RSS Feed มีทั้งหมด 5 ตอนล่าสุด)
- จากนั้น Deploy ขั้น Production
- … ปรากฏว่า พังครับ T-T
ง่ายๆคือ ถ้าจะเชื่อมไปยัง External Network ต้องเสียตังค์ครับ
คือ Plans ปัจจุบัน เป็นแบบ Spark ให้เปลี่ยนไปเป็น Flame หรือ Blaze ส่วนตัวผมเลือก Blaze คือจ่ายเท่าที่ใช้ แต่ถ้าใช้ไม่ถึงเกณฑ์ ก็ไม่เสีย ดี๊ๆ
ขั้นตอนที่ 2. ส่งข้อความไปยังกลุ่มแชท เมื่อมี มังงะตอนใหม่เข้ามา
- สร้าง package.json ขึ้นมา สำหรับเก็บ Dependency ต่างๆ
npm init -y- ติดตั้ง library ต่างๆตามนี้
npm i firebase-admin node-cron axios facebook-chat-api -s→firebase-admin (สำหรับเชื่อมต่อ Firebase)
→node-cron (สำหรับ ตั้งเวลา เพื่อสั่งงานอะไรบางอย่าง ซ้ำๆ)
→axios (สำหรับ เรียกไปยัง API )
→facebook-chat-api (สำหรับ ส่งข้อความไปยังแชท FB)
- เช็คข้อมูล (มังงะ) ใน Firebase ถ้าไม่มีให้บันทึกไว้ (ตั้งเวลาเช็ค ทุกๆ 5 นาที)
เริ่มแรก ไปยังหน้า ตั้งค่า → บัญชีบริการ → สร้างคีย์ส่วนตัวใหม่ จะได้คีย์มา ซึ่งจะใช้สำหรับเชื่อมต่อมายัง Firebase
- จากนั้นเขียนโค้ดตามนี้
ผลลัพธ์ที่ได้ คือข้อมูลของมังงะ 5 ตอนล่าสุด
- จากนั้นเพิ่มโค้ดสำหรับส่งข้อความ ไปยัง FB ที่กำหนด
เสร็จแล้วนำโค้ดที่ได้ ไปรันไว้ บน Cloud server ที่ไหนสักที่ ส่วนตัวผมเลือก nipa cloud เพราะง่ายดี
เติมไป 300 THB (Minimum) แต่ได้เครดิตมา สองเท่า OMG
ราคา Instances ต่ำสุดแค่ 160 THB ต่อเดือน
หลักจากสร้าง Instances เสร็จ ก็ SSH เข้าไปติดตั้งอะไรให้เรียบร้อย
ในตัวอย่างนี้ผมรัน App ด้วย PM2 นะครับ หรือใครจะใช้ Docker อะไรก็ตามแต่สะดวก
groupId=****** email=xxxxxxx@gmail.com password=xxxxxxxx pm2 start index.js -n one-piece- สามารถ Monitor App ของเราได้ ผ่านทาง Console โดยใช้คำสั่ง PM2 monit
- เมื่อมีมังงะตอนใหม่มา ข้อความจะถูกส่งไปยัง FB แชทโดยอัตโนมัต
หรือทำเป็นบอทแจ้งเตือนใน Telegram ก็ได้ครับ
ต่อไปเราก็จะไม่พลาด มังงะตอนใหม่ๆแล้วววว
Source Code ทั้งหมด https://github.com/niawjunior/one-piece-fb-auto-alert
สำหรับบทความนี้ ขอจบไว้เพียงเท่านี้ครับ -/\-