ห่างหายจาก Workshop การพัฒนาโปรแกรมไปนาน รอบนี้เลยหา Code พัฒนาอะไรง่ายๆ มาฝากกันเป็นการพัฒนาเว็บแอพพลิเคชันด้วย HTML กับ JQuery ธรรมดาร่วมกับ Twitter API และ Google Maps API ครับ
เริ่มต้นเลย คือจุดประสงค์ของชุดพัฒนานี้คือ เราต้องการหาตำแหน่งของเพื่อนที่เรา Follow อยู่เค้า Tweet กันที่ไหน บริเวณไหนบนโลกใบนี้ ซึ่งแน่นอนว่าสิ่งแรกที่นึกได้คือ API ของ Google Maps และการจะดึงว่าตำแหน่งเพื่อนเราอยู่ตรงไหนก็ต้องใช้ API ของ Twitter ในการระบุ Location นั่นเองครับ
SourceCode นี้ผมได้หยิบยืม Component Script ของนาย Marcin Dziewulski จากเว็บไซต์ http://www.mobily.pl มาใช้ร่วมกับ HTML และไฟล์ Javascript ครับ แต่สำหรับไฟล์ Javascript ผมไม่ขออธิบายในบทความนี้ แนะนำให้ดาวน์โหลดไปใช้อย่างเดียว ดาวน์โหลดที่นี่ครับ
Twitter API - GeoTag Source Code (Version 1.0.0)
เริ่มต้นเลยคือคลาย Zip ไฟล์แล้วจะพบ โฟลเดอร์ css และ js ให้วางไว้ Path เดียวกับไฟล์ HTML ที่จะสร้างแอพพลิเคชันของเรานะครับ
เมื่อเสร็จแล้วก็ทำการสร้งไฟล์ index.html ขึ้นมาครับดังรูป
เปิด Edit ไฟล์ HTML ด้วยคำสั่งดังต่อไปนี้ครับ
ตำแหน่ง
<div class="get">
ให้ใส่ Tag ดังภาพตามด้วยชื่อ Twitter Username ของเพื่อนเราลงไปสัก 2-3 คนตามตัวอย่างครับ
ลอง Upload ขึ้นไปดู แล้ว Previews จะเห็นตัวอย่างดังรูปครับ
ถ้าเราแก้ไข Tag เพื่อนเราให้มากขึ้น หรือ ใช้คำสั่ง ASP.NET หรือ PHP มา Write ชื่อเพื่อนยาวๆ ก็จะได้ Map ของ Twitter เพื่อนๆ เราปรากฏมาให้เห็นกันแบบเต็มๆ ตา ตัวอย่าง Demo ดูได้ที่นี่ครับ
https://www.daydev.com/demo/mapstweet/
ถือว่าเราไปใช้ต่อยอดสร้าง แอพพลิเคชันอะไรๆ แบบ D.I.Y ได้แบบไม่ต้องลงทุนอะไรเลยนะครับ Source Code สามารถดาวน์โหลดได้ทีนี่
Twitter API - GeoTag Source Code (Version 1.0.0)
นำไปใช้ได้ฟรีครับขอบคุณครับ
