PHP

พัฒนา Widget บนเว็บด้วย Foursquare API กับ PHP : จับ Check-in ล่าสุด

มาลองพัฒนาเว็บแอพพลิเคชันด้วย PHP กับ Foursquare API กันซักหน่อยดีกว่า เพราะตอนนี้ Foursquare เองก็เป็นเหมือนแอพพลิเคชันที่มียอดผู้ใช้เติบโตขึ้นมา และการใช้ Location Based Service ในตอนนี้ก็เริ่มเป็นอะไรที่เสรีเอาเป็นว่าลองมาฝึกเขียน API ของ foursquare ด้วย PHP สำหรับโชว์สถานที่ล่าสุดที่เราได้ Check-in เพื่อว่า บัญชีผู้ใช้พวก คนดัง ทั้งหลายจะเอาไปประยุกต์ใช้ในการแสดงผลเป็น Widget ไว้ติดบน Blog ก็เก๋ไม่เบาครับมาเริ่มกันหน่อยดีกว่า

พัฒนา Widget บนเว็บด้วย Foursquare API กับ PHP

 

มาเริ่มกันครับก่อนอื่นนั้นเราต้องเข้าสู่ระบบไปที่หน้าเว้บไซต์ foursquare ก่อนครับ แล้วให้เข้าไปที่เว็บไซต์ https://developer.foursquare.com/ เพื่อทำการขอ API มาใช้พัฒนาร่วมกับภาษาโปรแกรม PHP ครับ ให้เราทำการ Register API ของเราเลยครับ ซึ่งในที่นี้ผมตั้งชื่อ API ของผมว่า doTips และใช้ URL สำหรับ Call Back เพื่อแสดงผลบนเว็บของผมคือ http://www.daydev.com/dotips ครับ

ทำการเข้าสู่ระบบหน้าเว็บไซต์ foursquare ก่อน

เมื่อเราได้ทำการ Register ขอ API แล้วเราจะได้ข้อมูล CLIENT ID สำหรับขอ Token Key ของ foursquare ครับ ดังรูปที่ปรากฏด้านล่าง
ข้อมูล รหัส Client ID ของ fousquare สำคัญนะครับอย่าให้คนอื่นรู้เลยเชียวนา
ให้สังเกตนะครับว่าผมจะวงตัวแดง ไว้คืออันดับที่ 1 นั่นคือ client ID และ 2 คือ CallBack URL ซึ่งเราจะเอาไว้ใช้ในการเขียนโปรแกรมครับ
ต่อมาให้เราไปดาวน์โหลด ไฟล์ Librarry ของ foursquare API ครับที่

จะเป็นไฟล์แค่ไฟล์เดียวที่ชื่อ foursquare.php ให้ทำการดาวน์โหลดลงมาไว้บน Folder ที่เราจะใช้พัฒนาโปรแกรมครับ ของผมคือ Folder “dotips” ดังรูป
ไปดาวน์โหลดไฟล์ foursquare.php
ต่อมาให้สร้างไฟล์ที่ชื่อว่า index.php ครับเอาไว้ทำงาน โดยต้องอยู่ Path เดียวกับ foursquare.php นะครับ
ไฟล์ index.php กับ foursquare.php อยู่ที่เดียวกัน
ต่อมาให้ไปขอ Token ID โดยไปที่ URL ดังต่อไปนี้
https://foursquare.com/oauth2/authenticate?client_id=ใส่ Client ID&response_type=code&redirect_uri=ใส่ CallBack URL

เราก็จะได้รหัส Token ID มาให้ Copy มันมาเก็บไว้ใน Notepad ก่อนนะครับ
เข้าไปขอรหัส Token ID ให้กด Allow
และแล้วเราก็ได้ Token ID มาจนได้
เปิดโปรแกรมแก้ไขไฟล์ อย่าง Notepad, Notepad++ หรือ eclipse for PHP ขึ้นมาครับเพิ่ม Code ลงไปในไฟล์ index.php ตามนี้

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<?php require_once ‘foursquare.php’;   //including the class
$fq = new fourSquare(“ใส่ Token ของคุณ”);  //fetching the checkins data
?>
<body>
<div id=”foursquare” style=”text-align:center”>

<h2>Test Foursquare API with PHP:</h2>
<!–displaying the foursquare logo for the venue type–>
<img src=”<?php echo $fq->venueIcon ?>” />
<!–displaying the venue name and the venue type–>
<?php echo $fq->venueName ?> (<?php echo $fq->venueType ?>)<br/>
<!– displaying the venue address –>
<?php echo $fq->venueAddress . “, ” . $fq->venueCity . “, ” . $fq->venueState . “, ” . $fq->venueCountry ?><br/>
<!–Displaying the map–>
<img src=”<?php echo $fq->getMapUrl(500, 250) ?>” /><br/>
<!– displaying the user comment–>
<i><?php echo $fq->comment ?></i><br>
</div>
</body>
</html>

หรือดาวน์โหลดไฟล์ที่แก้ไขแล้วได้ที่นี่ http://www.daydev.com/dotips/source.zip
ทดสอบลอง Upload ไฟล์ index.php และ foursquare.php ขึ้นไปบน Server ของเว็บไซต์ ในที่นี้คือโฟล์เดอร์ doTips ของตัวอย่างที่ผมทำ
เปิด URL ขึ้นมา ตัวอย่างของผม ผมทำไว้ที่ http://www.daydev.com/dotips/index.php จะเห็นว่ามันจะบอก ตำแหน่งที่ผม check-in ครั้งล่าสุด แผนที่โดย Google Maps และข้อความที่ผมทำการ Shout ออกไป ขนาดของแผนที่นั้นสามารถแก้ไขที่ไฟล์ index.php ได้เลยนะครับ
ก็บอกแล้วว่าไม่ยากเลย
เอาเป็นว่านี่ก็คงเป็นตัวอย่างอีกวิธีหนึ่งในการใช้ foursquare API ร่วมกับ PHP ได้อย่างมีประสิทธิภาพ และไม่ยากเลย ทำตามได้สบายๆ ไว้โอกาสหน้าจะมาปล่อยของอีกนะครับ

บทความที่เกี่ยวข้อง

มาเล่น Foursquare กัน
การตลาดออนไลน์กับ Foursquare
ตะโกนบอกโลกให้รู้ว่าคุณอยู่ไหนกับ foursquare.com – Social Network สายพันธุ์ใหม่

Tags

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน