เมื่อ Dev เล่นทอง… API เช็คราคาทอง ก็ต้องมา (EP1)
สวัสดีคร้าบบบ กลับมาเจอกันอีกแล้ว นานน๊านนน ผมจะอยากทำ App ออกมาสักอัน เลยต้องมี Blog สักโพสต์แหละน่าา วันนี้จะมานำเสนอ API เช็คราคาทอง ให้ได้เอาไปใช้กันหน่อย แล้วเดี๋ยวจะเอาไปต่อยอดทำ LINE Notify คอย Alert ราคาขึ้น-ลงจ้า
ตอน 2 ออกแล้ว! ไปตำที่ https://medium.com/@ch.chinnawat/เมื่อ-dev-เล่นทอง-api-เช็คราคาทอง-ก็ต้องมา-ep2-ac848865275e
TD;LR : Go To Link: https://github.com/buildingwatsize/goldnoti
จุดเริ่มต้นมาจาก ช่วงที่ตัดสินใจจะทำโปรเจ็คนี้นั้น กำลังอินจากการเล่นทองฯ เพราะราคาทองเริ่มมีแนวโน้มขึ้นราคา Moon Moon (ข้อมูล ณ 07/07/2020–15/07/2020) แล้วผมก็พบว่า มันเหมือนขาดอะไรไปสักอย่างในชีวิต Dev ให้ได้ลองทำเพื่อเพิ่มความอินในเรื่องนี้ เทรนนี้กำลังมา แน่นอนมันคือ API เช็คราคาปัจจุบัน และ Alert Message สำหรับแจ้งเตือนการเปลี่ยนแปลงของราคา
ต่อมา ก็จะเป็นช่วงเวลา Research ครับ ว่าจะไปหา Data ที่ต้องการได้อย่างไร เบื้องต้นก็เสิชอากู๋ปกติเลยครับ อยากได้อะไรก็เสิชไปตามที่ใจต้องการ หลังจากนั้นก็พบว่า มี API ของคนอื่นอยู่แล้ว!! ฮาา แต่ปัญหาก็คือว่า ความต้องการของเราคือ อยากได้ Today Changes ด้วย (การเปลี่ยนแปลงของราคาวันนี้) แน่นอนว่าจะไป Contribute ของคนเดิมก็อาจจะได้ แต่ใจนึงก็อยากท้าทายความสามารถของตัวเองด้วย เลยตัดสินใจทำเองครับผม
เอาหล่ะ หลังจากเรามีเป้าหมายว่าจะทำอะไร เราก็ลงมือทำซะเลยสิ ~~
Design First
เริ่มแรก Design ก่อน ว่าสิ่งที่เราอยากได้ จะแปลงออกมาเป็น Requirement ได้อย่างไรบ้าง และจะแบ่ง Phase การทำยังไงดี เริ่มต้นด้วยอะไรดี แล้วนี่คือ Phase ที่ผมแบ่งไว้ (Plain ไป ขอโทษด้วย)
อธิบายนิด
- A Simple API: เอาง่ายๆ แค่ Request ไป ก็ตอบ JSON กลับมาแค่นี้ Happy แล้ว
- A Simple API + LINE Chat Bot: อันนี้ไม่ยาก แค่เอา API ของเดิมไปประกอบกับ LINE Chat Bot ง่ายสุดก็ตอบ Text มาสั้นๆ ยากขึ้นอีกนิดก็เอา Flex Message มาใส่ และ…อาจจะใส่ DialogFlow เพื่อความสนุกอีกเล็กน้อย
- A Realtime Message via LINE Broadcast: ความจริงอันนี้ยังไม่มี Tech ตายตัวนะ ว่าจะใช้อะไรยังไง แค่คิดง่ายๆว่า อยากได้การแจ้งเตือนเวลามีการเปลี่ยนแปลงของราคาอ่ะ Requirement ง่ายๆ แต่ทำยาก 5555555 คิดง่ายก็เอา LINE Notify 1-on-1 นี่แหละ ปล. ผมขอเปิดรับคอมเม้นต์ต่างๆ ตรงนี้ หนักๆเลยครับ อยากได้คำแนะนำประมาณว่าจะใช้อะไรดี ถึงเหมาะกับงานนี้ จุด trade-off สั้นๆเลยคือ เน้นประหยัดตังค์ + ฟรีได้ฟรี
4. [Extra] เอ่อ อันนี้ขอเพิ่มสำหรับ Future Work เลย: อยากได้ Feature อื่นๆ ร่วมด้วย เช่น Graph, History, etc. ขอแค่นี้ก่อน เดี๋ยวบานปลายแน่ๆ
อ่านมาถึงตรงนี้ แน่นอนว่า Blog มันต้องมีหลาย EP เป็นแน่แท้ เพราะงั้นอันนี้จะประเดิมที่ EP1 ที่จะอธิบายว่า ปัจจุบันทำอะไรไปแล้วบ้าง
Tech Stack (Updated: 16/07/2020)
ขอเริ่มต้นด้วยการแสดง Tech Stack ก่อนว่าจะใช้เทคโนโลยีอะไรกันดี ถ้าถามถึงเหตุผลว่าทำไมใช้อันนี้ เพราะคำตอบคือ ก็รู้แค่นี้ง่ะ ใช้เป็นแค่นี้ 555555
ปล. ถ้าจะมีคำแนะนำ ผมจะกราบแทบเท้าเลยค้าบบบ 🙏
ปล 2. ความจริงอยากได้ Best Practice ของการวาดรูป Tech-stack ด้วยงับ
เริ่มจาก ตอนแรกผมก็คิดอยู่เหมือนกันว่าจะใช้ภาษาอะไรดี ในหัวก็มี JavaScript (NodeJS) และ Golang สุดท้ายผมได้ตัดสินใจเอา Golang เนี่ยแหละ เอามาทำเป็น API เหตุผลสั้นๆคือ ความรวดเร็วในการพัฒนาและประเด็น Performance ประกอบการตัดสินใจอีกนิดนึง แล้วก็ครอบด้วย Docker เพื่อทำเป็น Image เผื่อจะได้ความเป็น Container ร่วมสมัยเหมือนชาวบ้านเขา ฮาา แล้วก็ขอฝาก App ไว้กับผู้ให้บริการที่ค่อยข้างนิยมสุดๆอย่าง heroku ค้าบ
Kanban Board
หลังจาก Design Tech Stack ก็เข้าสู่กระบวนการต่อไปคือการ List Task ว่าควรจะทำอะไรบ้างกับโปรเจ็คนี้ ขอตัวช่วยเป็น Trello Board มาช่วยวางแผนงานละกัน
ที่เอามาโชว์นี่คือ Version ที่คลอดเป็น Phase 1 แล้ว + กับพยายามทำให้ Clean ที่สุด เพื่อจะได้อ่านง่ายกัน แห่ะๆ 😅
ลืมเลยครับ อ่านมาถึงจุดนี้ ก็ลืมบอกเลยว่าผมไปเอา Data มาจาก ทองคำราคา.com นะครับ เพราะอยากได้เป็นราคาไทยจากสมาคม ในอนาคตก็มีแพลนว่าจะไปเอาราคาจากตปท. มาด้วย แต่นั่นแหละ ไว้เป็นเรื่องของอนาคต ฮาาาา
เห็นราคานั่นไหมมมมมม ฉันจะเอาทองไปขายยยยยย … และจากที่เห็นตรงนี้ เราก็จะเอาเทคนิคที่เรียกว่า Web Scraping มางัดแงะ เอาตัวเลขออกมาครับ
Web Scraping
น้อน Web Scraping มีหลายชื่อมากเลยฮะ ตั้งแต่ Web Harvesting หรือจะเป็น Web Data Extraction ก็มีครับ คำอธิบายหลักการของเทคนิคนี้เนี่ยคือ การงัดแงะข้อมูล ออกมาจาก Website นั่นเอง หลายๆคนอาจจะนำเทคนิคนี้ไปใช้ในงาน Automated Data Mining ก็มีงับ
เนื่องจากสมัยนี้ ท่าน Dev ทั้งหลายได้สรรค์สร้าง Tools Library ออกมามากมาย ผมจึงขอข้ามสเต็ปการ “Harvest” สำหรับในภาษา Golang ตรงนี้ให้เป็นหน้าที่ของ Colly ละกันครับ ที่ใช้ตัวนี้เพราะเจอประโยคแรกในหน้า Github ประโยคเดียว ก็โดนตกเลยครับ
Lightning Fast and Elegant Scraping Framework for Gophers — Colly
วิธีใช้ Colly นั้นค่อนข้างง่ายครับ แต่การได้มาซึ่ง DOM Selector นั่นทำเอาปวดหัวอยู่เนืองๆเลยครับ แต่ก็ได้มาจนได้ โดยใช้แค่ Inspect ของ Browser นั่นแหละ
Dockerizing Application
หลังจากมีหนทางในการดึง Data แล้ว ก็ทำให้เป็น API ตามระเบียบและยัดใส่ Docker เลยค้าบ
“เจ้าจงสดับรับฟังสเต็ปการ Build Image นี่สะ”
Step การ Build ไม่มีอะไรมากมายครับ เริ่มโดยเป็น Multi-stage Build ใช้ Golang 1.14 มา Build Binary แล้วก็ใช้ Linux Alpine มาเป็นตัวคอยรับไม้ต่อไปรัน Service ถามว่าทำไมไม่ใช้ FROM scratch หล่ะ บางเบาเลยนะ … ก็เพราะว่าจะแถม Tzdata ไปด้วย เพื่อความต้องการเป็นเวลาโซน Asia/Bangkok ค้าบ (หนักขึ้นเยอะเลย แห่ะๆ 😅) สร้างไฟล์เสร็จ Build ดูครับ docker build -t goldnoti . (อย่าลืมจุดนะ)
พอดีว่าตอน Build เนี่ยผมใช้ Docker for Mac เพื่อ Build Image แบบ Local แล้วอยากจะลองรันเล่นดู ก็เลยเขียน docker-compose.yml เพิ่มอีกไฟล์ แล้วก็ docker-compose up -d เพื่อทดสอบปกติไป
หลังจากนั้นเนี่ยก็ตั้งใจให้ API มันไปอยู่บน https ด้วย เพื่อจะได้ใช้กับ LINE ได้ แล้วก็ไม่ได้ใช้ ngrok เทสก่อน เพราะใจนึงก็อยากเป็น Public API ไปเลย (เอ้ะ หรือไม่ควร?) จากนั้นก็จัดการ deploy heroku ไปเลยจบๆ heroku.yml ก็ตามนี้เลยจ้า
# NOTE: ผมตัดส่วน run ออกไป เพื่อให้ heroku รันจากคำสั่ง CMD ใน Dockerfile แทน
ขอข้ามส่วน Deployment to Heroku ไป (อยากให้เขียนเพิ่ม Request กันเข้ามาน้า)
Result
เริ่มยาวแล้ว ผลลัพธ์เลยเถอะ
รูปเดียวจบเลยไม่ต้องอธิบายต่อละ ฮ่าๆ
Conclusion
สรุป… เกริ่นก่อนเลยว่า งานนี้เป็นงานอดิเรก ไม่มีเรื่องอื่นใดเข้ามาเกี่ยวข้องทั้งสิ้น งานนี้อยากทำเพราะอยากทำจริงๆ แค่อยากลองทำ API ดึงราคาทอง ณ ปัจจุบันไว้ใช้เอง แค่ระหว่างทำก็อยาก Share ความรู้ต่อ ทำอะไรเป็นก็อยากจะจดบันทึกสิ่งที่ทำไว้ ก็แค่นั้นเอง สิ่งต่อมาคือได้เรียนรู้เทคนิควิธี Web Scraping และ heroku Deployment เพราะที่ผ่านมาไม่ได้เคยลองใช้เลย งูๆปลาๆ Research Google เอง จับนู่นผสมนี่ จับนี่ผสมนั่น จนสุดท้ายก็ทำได้ แค่นี้ก็ Mission Accomplished แล้ว สุดท้ายนี้ถ้าหากผิดพลาดประการใด ขออภัย มา ณ ที่นี้ด้วยครับ 🙏
ตอน 2 ออกแล้ว!
ไปตำที่ https://medium.com/@ch.chinnawat/เมื่อ-dev-เล่นทอง-api-เช็คราคาทอง-ก็ต้องมา-ep2-ac848865275e
ดู Source Code เพิ่มเติมที่
[ตรงนี้ Ref.]
เว็บหลักราคาทองคำโดยสมาคมฯ : https://ทองคําราคา.com
JSON ราคาทองเจ้าแรก : http://www.thaigold.info/RealTimeDataV2/gtdata_.json
JSON ราคาทองเจ้าที่สอง : https://thai-gold-api.herokuapp.com/latest
