Home / Developer  / Newbie  / Advance  / API ต้อนรับฟุตบอลโลก World Cup in Brazil 2014 กับ footballjs

API ต้อนรับฟุตบอลโลก World Cup in Brazil 2014 กับ footballjs

เข้าสู่ฤดูกาลแข่งขัน World Cup in Brazil 2014 แล้วนะครับ หลายคนอยากทำ API หน้าเว็บดึงตารางอัพเดต Score ก็ขอแนะนำ API OpenFootball และ FootballJS ครับ

Screen Shot 2557-06-12 at 10.07.58 AM

หลักการไม่มีอะไรมากครับ ก็แค่ใช้ Javascript เรียก Web Service แบบ JSON ผ่าน API REST ของ OpenFootball ครับ รายละเอียดก็ที่นี่ http://openfootball.github.io

Screen Shot 2557-06-12 at 10.08.51 AM

มันจะมีฐานข้อมูล การแข่งขันฟุตบอลทั่วโลก อย่าง football.db ให้เราได้ลองศึกษาครับ ซึ่งสามารถ Clone จาก Github ได้เลย โดยรายละเอียดก็มีดังนี้

วัตถุประสงค์คือการ อัพเดทแมชต์ของ World Cup in Brazil 2014 แล้วเรียก HTTP JSON API
ส่วน football.db นั้นเป็น Open Data ที่เราสามารถเรียกใช้ได้ฟรีครับ โดยมีเงื่อนไขภายใต้ Public Domain. No Rights Reserved. vs. © FIFA 2014. All Rights Reserved.

รูปแบบการส่งรับค่าก็คือ

วิธีการ Code ก็คือการเรียกใช้ไฟล์ เหล่านี้

  • Matchday Widget Example – footballdb.widget.js – v1.0
  • Matchday Widget Example – footballdb.widget.js – v2.0
  • Web Components Machinery – New Web Standard Building Blocks
  • Matchday Widget Example – <football-js> – v3.0

แต่ในบทเรียนนี้ผม คงจะหยิบยกแค่ตัวอย่างง่ายๆ มาให้ลองเล่นกันก็คือ การสร้าง Widget หน้าเว็บไซต์ ซึ่งที่ผมเลือกใช้ก็คือ FootballJS ครับ

Screen Shot 2557-06-12 at 10.08.44 AM

ไฟล์ทั้งหมดที่เหมาะกับการเริ่มต้นก็นั้นก็คือ Project ของ FootBallJS

ดาวน์โหลดได้ที่: https://github.com/footballjs/
หรือเว็บไซต์ของเราก็ดาวน์โหลด Source Code ที่: http://www.daydev.com/download/footballjs.zip

วาง Project ลงที่ XMAPP หรือ APPSERV ครับ ทดสอบที่ http://localhost/footballjs

Screen Shot 2557-06-12 at 9.54.19 AM

แก้ไขไฟล์ index.html ส่วนของ

จะเป็นการบอกสถานะการแข่งขันทันที โดย lib/polymer.min.js จะไปเรียก API แล้วทำการ เขียนไฟลฺ football-js.html ใหม่อีกครั้ง

ตัวอย่างดูได้ที่นี่
http://www.daydev.com/demo/footballjs/

อีกตัวคือ อันแรกที่เขียนว่า Football widgets in JavaScript using the football.db HTTP JSON(P) API
ให้ดาวน์โหลด Project มาครับ
ดาวน์โหลดได้ที่: https://github.com/footballjs/
หรือเว็บไซต์ของเราก็ดาวน์โหลด Source Code ที่: http://www.daydev.com/download/worldcup2014.zip

เปิดดูไฟล์หน่อย จะเห็น index.html เขียนแบบนี้ครับ

ลองรัน http://localhost/worldcup2014 หรือ

Screen Shot 2557-06-12 at 10.09.26 AM

ดูตัวอย่างที่ทำไว้ที่

http://www.daydev.com/demo/worldcup2014/

ก็น่าจะช่วยเหลือคนที่อยากทำตารางบอลโลกกันได้ ผ่อนแรงไม่ต้องอัพเดต ไปอีกนานครับ ไม่ก็ https กับ SSL ไปเขียน Tab Facebook ได้ก็ง่ายๆ สบายใจ

 

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.