Nike+ Web Service API

อันที่จริงในหัวผมมีเรื่องที่จะนำมาพิมพ์อยู่ 2-3 เรื่องของการวิ่ง และการใช้ Nike+ แต่เรื่องนี้มันจี๊ด และคอยกวนสมองผมมาพักนึงแล้ว ถ้าไม่ลองกับมันซักตั้ง ผมต้องเครียดหนักแน่ๆ นั่นก็คือเรื่องของ API ของ Web Service ของ NikePlus.com นั่นแหละครับ ถ้าใครอ่านเนื้อหาเกี่ยวกับ Nike+ ในเว็บเดอะเรียวแห่งนี้มาแล้ว ก็คงจะทราบกันแล้วนะครับ ว่ามันคืออะไร สำหรับใครที่ยังไม่ทราบ ก็แนะนำว่าอ่านในบทความตอนผ่านๆมาได้เลยครับ ผมสารยายไว้มากเลยทีเดียว ส่วนประเด็นที่ผมอยากนำมาเสนอในวันนี้คือเรื่องของ API

คงจะหลีกเลี่ยงไม่ได้ถ้ามันจะมีเนื้อหา เกี่ยวกับ Computer และ Programming มากกว่าในบทความอื่นๆที่ผ่านมา และมีโทนเนื้อหาเกี่ยวกับการออกกำลังกาย และการดูแลสขภาพ น้อยจนถึงอาจจะไม่มีเลย ในบทความนี้นะครับ เอาละครับ วันนี้เดอะเรียว จะมาพูดคุยภาษาคอมพิวเตอร์ กับเพื่อนๆบ้าง

What is API

API นั้นย่อมาจาก Application Programming Interface หมายถึงส่วนที่ระบบปฎิบัติการในคอมพิวเตอร์ หรือ Library ของโปรแกรมเตรียมรองรับไว้ให้ เรานำไอ้สิ่งที่มันเตรียมไว้เหล่านั้น เขียนโปรแกรม หรือพัฒนาสิ่งอื่นๆ ต่อจากสิ่งนั้น อธิบายยากเหมือนกันเพราะมันเป็นเรื่องที่ค่อนข้างเป็นนามธรรม และเราก็มักเรียกอะไรทำนองนี้ว่า API

สำหรับ Nike+ API นั้นจริงๆจะเรียกว่า API ผมก็ว่าไม่เชิงหรอกครับ เพียงแต่ว่าตอนนี้เราเรียกมันว่าอย่างนั้น มันเป็นส่วนที่ในเว็บ Nike+ เองเขาใช้ปล่อยข้อมูลต่างๆ ให้กับ Flash Application ในเว็บ อันจะนำมาซึ่งหน้าตาต่างๆที่มันสวยงาม เป็นกราฟคนวิ่งเหมือนอย่างที่ผมเคยนำมาให้ดูในครั้งก่อนๆ อย่างนี้นะครับ

My Run at NikePlus.com

โดยตัวที่เป็นคนวิ่งนี้ มันทำด้วย Flash และไปดึงข้อมูลการวิ่งมาจาก Server ของ Nike+ และแน่นอนว่ามันต้องมีวิธีการใดวิธีการนึงในการส่งผ่านข้อมูลกัน

นั่นไม่สงสัยเท่าไหร่ เพราะว่ามันเป็นในเว็บเดียวกัน ไม่แปลกถ้าข้อมูลจะถึงกัน แต่มันมาจุดประกายความสงสัยผมมากเข้า ก็ตอนที่ไปสมัครร่วม Challenge กับเขานี่แหละครับ ซึ่งผู้จัดทำ Challenge เขาได้ทำ Blog ไว้ และมีการ update ข้อมูลการวิ่งของผู้ร่วมกลุ่มในเว็บเขาอัตโนมัติ ซึ่งนั่นหมายความว่ามันต้องมีช่องทาง ที่เขาจะสามารถนำข้อมูลมาประมวลผลในเว็บของเขาได้เอง แน่นอนครับ ผมก็เป็นคนทำเว็บ และพอมีความรู้ด้าน Programming อยู่บ้าง มันย่อมสะกิดต่อมอยากลองของผม ก็สงสัยมาตั้งแต่วันนั้นแล้วครับว่าจะต้องทำยังไง

Searching for information

ก็เริ่มคลิกๆหาข้อมูลดูครับ แรกๆหาใน Nike+ ก่อนปรากฎว่าไม่มีส่วนไหนที่น่าจะเป็นเอกสารบอกวิธีการ ส่วนใน Forum นั้นขี้เกียจไปค้นครับ ผมตรงดิ่งไปที่ Google และค้นหาด้วยคำว่า Nike+ API ซึ่งก็ไม่ผิดหวังงนักครับ มีข้อมูลออกมาตั้ง 4-5 เว็บที่น่าสนใจ

เท่าที่อ่านดูพบว่า Nike+ ไม่ได้เปิด API ให้เราสามารถใช้กันได้โดยตรงนะครับ ที่เขาไปเอาข้อมูลกันออกมา เป็นการล้วงแคะแกะเกา และนำมาพัฒนาต่อยอดกันเอง มันมีคนต่อยอดพัฒนากันไปจนถึงขั้น แจกจ่ายกันเป็น Widget กันใน Wordpress ซึ่งเป็นระบบจัดการเว็บไซต์ยอดนิยมอันนึงเลยทีเดียว ซึ่งผมก็ค้นไปจนได้ข้อมูลมาหลายอย่าง ทั้ง URL ที่ใช้ในการรับส่งข้อมูลของ Nike+ ในฝั่ง Server และฝั่ง Flash Application ซึ่งก็มีใน source code ต่างๆที่เขาเผยแพร่กันครับ ตัวอย่างนะครับ ลองคลิกเข้าไปดูได้

ในส่วนของ Website ที่เป็นเนื้อหาเพื่อนๆที่สนใจ (จะมีมั๊ยเนี่ย ฮ่าาา) ลองหาเอาจากใน Google แล้วกันนะครับ ด้วยคำค้นหาที่ผมบอกนั่นแหละครับเจอแน่นอน

A Little bit Snag

Code ก็มีคนแจกให้ถึงขนาดนี้แล้ว ก็ไม่น่าจะยาก ผมก็ลองนำมาใช้งานดูครับ ปรากฎว่า... ไม่รอดครับ Web Server ที่ผมใช้ไม่รองรับ curl library ซึ่งเป็นสิ่งที่ทั้ง 3 โปรแกรมข้างต้นใช้ในการติดต่อ ทำตัวเองเป็น Browser ไปดึงข้อมูลจาก Nike+ ไอ้ครั้นจะหาทางแก้ด้วยการปรับโปรแกรมข้างต้นใหม่ ก็ไม่ถนัดอีก เพราะผมไม่ได้ใช้ php เป็นหลักในการพัฒนาเว็บเลย ส่วนตัวแล้วใช้ Perl เป็นหลัก

โอ้ว แม่เจ้าจะทำยังไงดี .. ก็ยังไม่หมดหนทางครับ source code ที่ได้มายังเป็นประโยชน์ ผมก็ลองดูเพื่อหาหลักการว่าเขาทำยังไง ก็พบว่าไม่ยากครับ พอดีว่าในเว็บที่มี code บางอันเขาก็แจกแจงหลักการไว้ด้วย ก็คืออันดับแรกเราต้อง generate pin ด้วยการ Login เข้าไปด้วย user และ password ของเราก่อน ด้วย URL อันหนึ่ง

จากนั้นถ้า Login ผ่านระบบจะส่ง cookie เป็น ID กลับมาให้เรา แล้วถ้าเราส่ง cookie นี้ตอบกลับไป เวลาเข้าไปยัง URL อันอื่นๆของ Web Service มันก็จะส่งข้อมูลกลับมาให้เราในแบบ XML ซึ่งเราสามารถนำข้อมูลนี้ไปต่อยอดได้ครับ ว่าแล้วผมก็เริ่มลงมือทำกับภาษาที่ถนัดคือ Perl (ไม่รู้นะผมว่าเขียนด้วย Perl ง่ายกว่า php แยะเลย) ท่านใดสนใจดู source code ของผมก็ยินดีครับ http://www.theryo.com/nikeplus/nikeplus.txt

My Concept

หลักการของผมก็คือใช้โปรแกรม Curl เหมือนกับที่ฝรั่งใช้นั่นแหละครับ แต่ผมไม่ได้เรียกผ่าน library ผมเรียกผ่าน command shell เลยโดยตรง ก็ให้ปรแกรม Curl มันทำการ Login เข้าระบบก่อน โดยสั่งให้เขียน Cookie เก็บไว้ในไฟล์ชื่อ nikeplus.cookie จากนั้นอ่านไฟล์ nikeplus.cookie มาเพื่อใช้ส่งกลับไป เวลาจะติดต่อ URL ดึงข้อมูลอื่นๆ เรียบร้อยครับ ไม่มีปัญหาอะไรผ่านฉลุย

พบว่ามี 2 อันที่มันแจ้ง error คือ get_run กับ get_challenge_detail มันแจ้งว่า id ผิดพลาด ผมก็ลองส่ง ID จากที่ได้ใน cookie กลับไปก็ยังมีปัญหาอีก ซึ่งหลังจากงงอยู่พักนึง ถึงเข้าใจว่า... id คือ ID ที่ได้มาจาก XML อันอื่นก่อนหน้านี้ที่เราได้รับมา คือ run_list และ get_challenges_for_user ก็คือมันไม่ใช่ id ของ user เราแต่เป็น ID ของการวิ่งแต่ละครั้ง และ Challenge แต่ละอัน

ก็เลยเขียนโปรแกรมเพิ่มอีกนิด สำหรับการวิ่งนั้น ผมเขียนไว้ให้หากมีข้อมูลอยู่แล้วก็ไม่ต้องโหลดซ้ำ เพราะในการวิ่ง ที่มันเก็บลงเครื่องนั้นเราไม่สามารถย้อนกลับไปแก้ข้อมูลเก่าได้ ส่วน Challenge นั้นไม่ต้องเช็คอย่างว่าเพราะรู้สึกว่าข้อมูลมันมีโอกาสจะเปลี่ยนแปลงตลอด จนกว่าจะจบ Challenge ตรงนี้ยังไม่ได้เขียนไว้ ผมก็ใช้วิธีให้มันโหลดมาให้หมดก่อน

ซึ่งก็ได้ผลครับ จากโปรแกรมนี้ผมก็สามารถดึงข้อมูลการวิ่งของผม ในรูปแบบ XML มาเก็บไว้ได้ ซึ่งก็ไม่ยากในการนำมาต่อยอดแล้วละครับ ผมได้กำหนดให้โปรแกรมทำการอัพเดตอัตโนมัติไว้เรียบร้อยแล้ว ทีนี้ข้อมูลของผมก็จะอัพเดตกับ Nike+ อยู่เรื่อยๆ

My Run Statistic

หลังจากได้ XML มา ผมก็ใช้โปรแกรม Flash ทำการสร้าง Flash Movie สำหรับดึงข้อมูล XML การวิ่งของ user ของผมมาแสดงผลในเว็บ ... ฝรั่งเขาใช้วิธีเขียนเป็น php แล้วนำไปแปะเป็น plugins ของ wordpress กัน แต่เนื่องจากผมไม่ได้ใช้ทั้ง php และ wordpress ผมเลยซัดทำมันเองเลย ก็ได้ผลออกมาหน้าตาอย่างนี้ครับ (ผมไม่ถนัด Design มันเลยออกมาไม่สวยนัก)

ซึ่งในส่วนของ My Run Statistic นี้ผมก็ได้นำไปติดไว้ที่หน้าแรกของ Nike+ Special Content เรียบร้อยแล้วละครับบ

Thailand Leader Board

อีกอันนึงที่ผมทำเป็นสิ่งต่อมาก็คือ Thailand Leader Board เป็นตารางแสดงอันดับผู้ใช้ Nike+ ที่ระบุไว้ว่าเป็นคนไทย หรืออยู่ในไทย หรืออะไรก็ตามแต่ สรุปว่าเขาอยู่ใน Location ที่เป็น Thailand เช่นกันครับ ผมยังคงใช้ Flash ในการพัฒนา เนื่องจากมันง่ายและเอื้อต่อการทำที่สุด รวมทั้งผมไม่ต้องไปศึกษาอะไรมาก เพราะเคยใช้มาก่อนอยู่แล้ว ก็ได้ออกมาดังนี้ครับ

เท่านี้ผมก็มี Widget ของผมเองเอาไว้แสดงสถิติการวิ่ง ของตัวผมเองและตารางผู้นำ มาแสดงผลในเว็บได้แล้ว ไม่ยากเท่าไหร่ครับ ใครสนใจก็ลองดูนะครับ มีอะไรสอบถามกันได้ หรือคุณมีอะไรใหม่ๆ ก็มาบอกผมได้ครับ ขอบคุณล่วงหน้าด้วยครับผม

เพิ่มเติมในส่วนของ source ไฟล์ flash เป็น fla สร้างด้วย Flash CS3 บน Mac OS X นะครับ (น่าจะเปิดใน PC ได้นะ) Download file

Concept ของไฟล์ flash นั้นก็คือคร่าวๆครับ สร้าง object ของ XML ขึ้นมาแล้วสั่งให้ load ไฟล์ XML ตามต้องการ ในไฟล์ที่แสดง user_data ผมใช้ source ที่ pharse ข้อมูล XML ออกมาเป็น flash script object ซึ่งได้ source code มาจากเว็บ flashkit แต่จำไม่ได้แล้วว่าจากไฟล์ไหน แฮ่ แต่ดูในนั้นก็มี comment เขียนไว้ครับว่า developer ต้นฉบับคือใคร

ส่วนของ Thai Leadder board นั้นผมขี้เกียจเขียน code เป็น flash object ผมเลยเล่นดึงข้อมูลจาก XML node เข้าตัวแปรมันดื้อๆเลยครับ ลองดูตัวอย่างความลวกทางการเขียนโปรแกรมได้ในนั้น แฮ่ะๆ

ในส่วนของผมเองหลังจากบรรลุความต้องการในเบื้องต้นไปแล้ว หลังจากนี้ถ้ามีเวลา ก็จะลองทำโน่นทำนี่เล่นกับเจ้า Nike+ และ Web Service ของมันเพิ่มเติมอีกครับ ^^) แล้วครั้งหน้ามาพบกับเรื่องอื่นๆ ต่อไปอีกนะครับ

Posted on May 7, 2007 2:44 AM |


Subscribe to news letter สมัครรับข่าวอัพเดตบทความใน TheRyo's GYM ทาง E-Mail - Printer friendly version Printer friendly version
Bookmark หน้านี้ด้วย : Zickr!Zickr! del.icio.usdel.icio.us Digg itDigg!

Comments (14)

เยี่ยมไปเลยครับ... ^_^

Posted by mike [May 7, 2007 10:32]

เก่งจังค่ะ ...ไม่ค่อยรู้เรื่องคอมเลยเมื่อวานลอง NIKE+ เป็นครั้งแรก จนถึงวันนี้ยังเข้าเวบไนกี้พลัสไม่ได้เลย มันจะค้างอยู่ที่หน้า connet ไม่ไปไหนต่อเลย พอจะมีวิธีช่วยบ้างไหมคะ ขอบคุณค่ะ

Posted by sayoh [May 7, 2007 19:09]

เข้าเวบไนกี้พลัสได้แล้วค่ะ.. ไปดูวิธีที่ siampod มาแล้ว

Posted by sayoh [May 7, 2007 19:25]

วันสองวันก่อนผมเข้า nikeplus แล้วเลือกเป็นประเทศไทยแล้วจะค้างหนะครับ แต่ถ้าเข้าทาง nikeplus.com แล้วไม่ได้เลือกเป็นประเทศไทย จะไม่มีปัญหา แต่ว่าพอจะเข้าไปดู leadder board ของไทย ก็ค้างอีก

อันนี้ก็เป็นแรงบันดาลใจอีกส่วนนึงที่ผมทำโปรแกรมดึงข้อมูลมันมาหนะครับ เพราะเข้าเว็บ nike ไม่ได้ แฮ่ๆ

Posted by Kindaichi [May 7, 2007 20:16]

น่าสนใจมากๆ ครับ แต่ด้วยพื้นฐานโปรแกรมอันต้อยต่ำ
อ่านแล้วไม่เข้าใจอ่ะครับ - -'
ี
อยากรบกวน ขอ source ส่วนของ Flash และการลิงค์กับ perl ได้ไหมครับ

Posted by bank!! [May 7, 2007 21:38]

ผมอัพโหลดไฟล์ fla ของตัว flash และทำ link เพิ่มเติมไว้ในเนื้อหาด้านบนแล้วนะครับ

ปล. flash ไม่ได้ติดต่อกับ perl โดยตรงครับ perl จะทำหน้าที่ดึงข้อมูลจาก nikeplus มาเก็บไว้เป็นไฟล์ xml ส่วน flash จะดึงข้อมูลในไฟล์ xml มาแสดงผลครับ ^^)

Posted by Kindaichi [May 7, 2007 22:32]

ขอบคุณครับ จะลองโหลดมาแกะดูนะครับ

Posted by bank!! [May 8, 2007 06:09]

ยินดีครับ ถ้าทำเรียบร้อยยังไงแล้ว นำมาให้ชมกันบ้างนะครับ :-)

Posted by Kindaichi [May 8, 2007 07:39]

ผมเองก็ต้องเปลี่ยนประเทศเป็นอเมริกา ถึงจะเข้าไปดูข้อมูลได้ ไม่ทราบว่ามีปัญหาตรงไหนเหรอครับ

Posted by mike [May 8, 2007 08:31]

ที่เข้าได้ก็ใช้วิธีของคุณ bank นี่เอง.. ขอบคุณค่ะ
อยากให้มี blog challenge ของคนไทยภาษาไทยบ้าง
จะมีใครลองทำมั่ง.. โปรแกรมเมอร์คนเก่ง

Posted by sayoh [May 8, 2007 11:51]

อยากได้ไอพอด+ไนกี้+

ฮือๆ แต่มี iRiver T10 อยู่แล้วอ่ะ T_T

เซ็งเลย รู้งี้ตอนนั้นซื้อนาโนดีกว่า

Posted by เปิ้ล [May 8, 2007 20:26]

ป่าว~ ผมยังใช้ Flash MX อยู่เลยอ่ะ - -'

Posted by bank!! [May 9, 2007 00:44]

MX เปิดได้มั๊ยครับถ้าไม่ได้เดี๋ยวจะ save ให้ใหม่ แต่ในนั้นผมใช้แค่ Action Script 2.0 เองครับ

Posted by Kindaichi [May 9, 2007 09:11]

โทดทีครับ หายไปนานไม่ได้เข้ามาดู

เปิดไม่ได้ครับ Flash 8 ยังไม่สามารถเลยอ่ะครับ เด๋วว่าจะลองโหลด CS3 มาเปิดดูครับ

Posted by bank!! [May 13, 2007 10:52]