Thai (ภาษาไทย) translation by Natavit Rojcharoenpreeda (you can also view the original English article)

แล้วก็มาถึงตอนที่ 2 ของ Instagram API สำหรับในตอนนี้ เราจะมาแนะนำวิธีการใช้งาน Instagram's Media Endpoints ไว้ใช้สำหรับการค้นหารูปภาพ เช่นรูปที่ฮิตอยู่ในช่วงเวลานั้นๆ
Code ต่างๆในแต่ละตอนสามารถดาวโหลดได้จาก GitHub repository link ที่ sidebar ด้านข้าง และยังมี Tutorial อีกอัน -> Locating Potential Crime Scene Witnesses With Social Media APIs
สำหรับ Code ในตอนนี้จะเขียนโดยภาษา PHP และใช้ Yii Framework ถ้ายังไม่มีพื้นฐานก็สามารถไปศึกษาพื้นฐานของ Yii ก่อนก็ได้จากที่นี่ Introduction to the Yii Framework (Tuts+) และ Programming With Yii2 Series (Tuts+) และสามารถประยุกต์เอา Code ในแต่ละส่วน ไปใช้กับ PHP application ของตัวเองก็ได้
เรายินดีที่จะตอบคำถามต่างๆ ถ้ามีคำถามหรือข้อแนะนำอะไรก็ทิ้งคอมเมนท์ไว้ที่ข้างใต้ได้เลย และสามารถติดต่อมาได้ที่ Twitter @reifman หรือ Email
มาเริ่มต้นด้วยการสมัครเป็น Developer กับ Instagram กันก่อนดีกว่า
Getting Started
เข้าไปที่ Instagram API แล้วคลิกที่ Register Your Application

แล้วก็สมัคร Developer Account

จากนั้นก็สร้าง Application ขึ้นมาใหม่

ในหน้า Manage Clients ให้เก็บ Client ID กับ Client Secret เอาไว้

Using the Media Endpoints
Instagram API นี่โอเคเลยหละ จากประสบการณ์การใช้งานที่ผ่านมา จากที่เห็น Instagram มี API endpoints ให้ใช้เยอะระดับนึงเลยละ

แต่ในสำหรับตอนนี้ เราจะโฟกัสกันที่ Media endpoints

Media endpoints ไว้ใช้สำหรับรับข้อมูลต่างๆจากรูปภาพ, วีดีโอของ Instagram โดยยึดจาก ID หรือ URL เช่น 0EyZ53Ja9X จาก https://instagram.com/p/0EyZ53Ja9X รวมทั้งสามารถใช้หาโพสต่างๆจากการเจาะจงเวลาหรือสถานที่ได้ด้วย แบบที่ทำในนี้ Locating Potential Crime Scene Witnesses With Social Media APIs และสุดท้ายคือหาโพสที่กำลังฮิตอยู่ใน Instagram ตอนนั้น ก็ทำได้เช่นกัน
The API Console
เพื่อช่วยให้ง่ายขึ้น และสามารถทำการ Debug ได้ ทาง Instagram ก็ได้เตรียม API console powered by Apigee เอาไว้

สามารถลอง queries ต่างๆ จากหน้า API console ได้เลย ตัวอย่างสำหรับการดึงโพสที่กำลังฮิต (Popular)
และแน่นอน เราจะได้เห็นว่าทำไมมันถึงมีประโยชน์มาก
หลังจากเตรียมการเบื้องต้นกันเรียบร้อยแล้ว ก็มาเริ่มลงมือกับแอพของพวกเรากันเลยดีกว่า
Installing the Codebase
สำหรับในตอนนี้ จะใช้ Eyewitness codebase จากในตอน Locating Potential Crime Scene Witnesses With Social Media APIs หรือจะ clone จาก GitHub ก็ได้เลยจาก sidebar ด้านข้าง
cd ~/Sites/eyew https://github.com/link-in-sidebar/eyew.git
เริ่มตั้งค่า Local Apache ในเครื่อง (ประมาณว่าทำให้เครื่องตัวเองเป็น Server) ส่วนเราใช้ MAMP มันก็จะหน้าตาประมาณนี้
cd /Applications/MAMP/htdocs ln -s ~/Sites/eyew/web /Applications/MAMP/htdocs/eyew
และสร้าง Database ไว้ในเครื่อง ส่วนเราใช้ PHPMyAdmin ก็จะมีรูปร่างหน้าตาให้ใช้งานได้ง่าย

จากนั้นก็ให้สร้าง initialization file ใน /var/secure/eyew.ini พร้อมกับ database credentials, Instagram IDs, และก็ keys สามารถดูขั้นตอนนี้เพิ่มเติมได้ที่ Protecting Your Keys From GitHub
ini file ก็จะหน้าตาประมาณนี้
mysql_host="localhost" mysql_db="eyew" mysql_un="xxxxxxxxx" mysql_pwd="xxxxxxxxxxxx" instagram_client_id = "4xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx7" instagram_client_secret = "1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4"
ทำการอัพเดท libraries
sudo composer self-update sudo composer update
แล้วก็มาเริ่มรัน database ของเรา ขั้นแรกทำการ migrat installs user tables สำหรับ Yii2-User โดยใช้ developer Dmeroff extension และขั้นที่สองให้สร้าง app-specific tables
./yii migrate/up --migrationPath=@vendor/dektrium/yii2-user/migrations ./yii migrate/up
สำหรับใครที่อยากจะปูพื้นฐาน Yii Framework ก่อน ก็สามารถเข้าไปดูเพิ่มเติมได้ที่ Programming With Yii2
นี่คือ MySQL schema สำหรับสร้าง Instagram image table โดยเราจะเรียกมันว่า Gram table เราจะใช้ table นี้สำหรับเก็บ geosearch หรือตำแหน่งของรูปภาพ
class m150308_184606_create_gram_table extends Migration { public function up() { $tableOptions = null; if ($this->db->driverName === 'mysql') { $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB'; } $this->createTable('{{%gram}}', [ 'id' => Schema::TYPE_PK, 'moment_id' => Schema::TYPE_INTEGER . ' NOT NULL', 'username' => Schema::TYPE_STRING . ' NOT NULL DEFAULT 0', 'link' => Schema::TYPE_STRING . ' NOT NULL DEFAULT 0', 'image_url' => Schema::TYPE_STRING . ' NOT NULL DEFAULT 0', 'text' => Schema::TYPE_TEXT . ' NOT NULL ', 'created_time' => Schema::TYPE_INTEGER . ' NOT NULL', 'created_at' => Schema::TYPE_INTEGER . ' NOT NULL', 'updated_at' => Schema::TYPE_INTEGER . ' NOT NULL', ], $tableOptions); $this->addForeignKey('fk_gram_moment', '{{%gram}}', 'moment_id', '{{%moment}}', 'id', 'CASCADE', 'CASCADE'); }
The Home Page
เราได้เปลี่ยนชื่อแอพของเราให้เป็น Instapi --> มันคือชื่อสั้นๆจาก Instagram API
และถ้าทุกอย่างเรียบร้อย เมื่อเข้าไปหน้าแรกของเรา (Localhost) ก็จะเห็นหน้าตาแบบนี้

Performing Media Searches
ก่อนที่เราจะเริ่มทำการค้นหารูปภาพ หรือวีดีโอในแอพของเรา เราจะใช้ตัวช่วยที่มีชื่อว่า Galen Grover's Instagram PHP package
Search Popular Images
ขั้นแรก เราจะทำการค้นหา media/popular
เราจะทำการ query API และแสดงผลลัพธ์ใน table
เราได้สร้าง action สำหรับไว้ค้นหา popular ชื่อ GramController.php
public function actionPopular() { $gram = new Gram(); $media = $gram->searchPopular(); return $this->render('popular', [ 'media' => $media, ]); }
action ด้านบนจะทำการเรียก searchPopular()
จาก Gram.php
<?php namespace app\models; use Yii; use yii\db\ActiveRecord; use Instagram; ... public function searchPopular() { $instagram = new Instagram\Instagram; $instagram->setClientID( \Yii::$app->params['instagram']['client_id'] ); $media = $instagram->getPopularMedia(); return $media; }
ในโฟลเดอร์ /views/gram/popular.php
เราจะสร้างตารางใน HTML แบบนี้
<?php use yii\helpers\Html; /* @var $this yii\web\View */ /* @var $searchModel app\models\InstagramSearch */ /* @var $dataProvider yii\data\ActiveDataProvider */ $this->title = 'Instagrams'; $this->params['breadcrumbs'][] = $this->title; ?> <div class="instagram-index"> <table class="table"> <thead> <tr class="small-header"> <td>Image ID</td> <td>User</td> <td >Thumbnail</td> <td >Caption</td> <td >Created at</td> </tr> </thead> <?php foreach ($media as $m) { echo $this->render('_item', [ 'm' => $m, ]); } ?> </table> </div>
และใส่ _item.php เพื่อให้แสดงผลเป็นส่วนๆ
<tr> <td><a href="/eyew/gram/lookup/?id=<?= $m->id ?>"><?= $m->id ?></a></td> <td><a href="https://instagram.com/<?= $m->user->username ?>"><?= $m->user->username ?></a></td> <td><a href="<?= $m->link ?>"><img src="<?= $m->images->thumbnail->url ?>"></a></td> <td> <?php echo (isset($m->caption->text)?$m->caption->text:''); ?> </td> <td><?= $m->created_time ?></td> </tr>
นี่คือผลลัพธ์จากการ query หา popular post ในตอนนั้น ลองกดรีเฟรชไปเรื่อยๆ แล้วดูว่ามันจะมีอะไรขึ้นมา 5555

Look Up Information About an Image or Video
เราได้ทำ Link Instagram media ID ใน column แรก ไว้กับ action ที่ไว้สำหรับเรียกไปที่ media endpoint แล้วส่งข้อมูลกลับมา
public function actionLookup($id) { $gram = new Gram(); $media = $gram->lookup($id); print_r($media); }
action ด้านบนก็จะทำการเรียก lookup function
public function lookup($id) { $instagram = new Instagram\Instagram; $instagram->setClientID( \Yii::$app->params['instagram']['client_id'] ); $media = $instagram->getMedia( $id ); return $media; }
และนี่ก็ตัวอย่างของข้อมูลที่ถูกส่งกลับมา

และเราสามารถใช้ข้อมูลเหล่านี้ไปทำอะไรก็ได้
Search for Media From a Time and Place
ทีนี้ลองมาค้นหารูปจากการระบุเวลาหรือสถานที่กันดีกว่า สำหรับตัวอย่างนี้ จะเป็นการทบทวนจากตัวอย่าง Eyewitness ที่ผ่านมา
codebase ที่เราใช้อยู่ ทำให้เราสามารถที่จะกำหนดสถานที่หรือเวลาได้ สามารถใช้งานได้ง่ายๆ เช่นใส่สถานที่ (latitude, longtitude) หรือใส่เวลาเริ่มต้น แล้วก็ระยะเวลา (นาที) สำหรับตัวอย่างแรก เรากำลังหา Instagram users ที่เคยอยู่ที่ Macklemore's video shooting on the evening of Wednesday, July 24, 2013 at Seattle's landmark Dick's Drive In
เราสามารถใช้ Google Maps เพื่อจะเอา GPS latitude และ logtitude มาใช้ได้ ยกตัวอย่างจากในรูป 47.6195 -122.321

จากประสบการณ์ที่ผ่านสถานที่นี้จะปิดในเวลาตี 1 เราก็เลยจะเลือกเวลาเริ่มต้นที่ 4 ทุ่ม กับระยะเวลา 2 ชั่วโมง

Instagram ใช้เวลาแบบ GMT เราเลยต้องทำการ hardcoded เปลี่ยนเวลาไป 8 ชั่วโมง เพราะ timezone ของเราเป็นแบบ PST บางคนอาจจะต้องเปลี่ยน code นี้นิดหน่อย เพราะแต่ละ zone เวลาไม่เหมือนกัน
public function actionCreate() { $model = new Moment(); if ($model->load(Yii::$app->request->post())) { // convert date time to timestamp $model->start_at = strtotime($model->start_at); // adjust for GMT $model->start_at+=(3600*8); // validate the form against model rules if ($model->validate()) { // all inputs are valid $model->save(); return $this->redirect(['view', 'id' => $model->id]); } else { return $this->render('create', [ 'model' => $model, ]); } } else { return $this->render('create', [ 'model' => $model, ]); } }
แค่คลิกที่ไอคอนรูปกล้อง ก็จะทำการเสิร์ชจาก Instagram ทันที

วิธีการค้นหาก็ง่ายๆ ตามนี้ $instagram->searchMedia( $this->latitude, $this->longitude,$params );
<?php namespace app\models; use Yii; use yii\db\ActiveRecord; use app\models\Gram; use Instagram; ... public function searchInstagram() { $instagram = new Instagram\Instagram; $instagram->setClientID( \Yii::$app->params['instagram']['client_id'] ); $end_at = $this->start_at + ($this->duration*60); $params = array('min_timestamp'=>$this->start_at,'max_timestamp'=>$end_at,'distance'=>$this->distance,'count'=>50); $media = $instagram->searchMedia( $this->latitude, $this->longitude,$params ); foreach ($media as $m) { if (isset($m->caption->text)) { $caption = $m->caption->text; } else { $caption =''; } $i = new Gram(); $i->add($this->id,$m->user->username,$m->link,$m->created_time,$m->images->thumbnail->url,$caption); } }
ผลลัพธ์ก็จะถูกเก็บลงใน Gram table
public function add($moment_id,$username,$link,$created_time,$image_url,$text) { if (!Gram::find()->where(['moment_id' => $moment_id])->andWhere(['link'=>$link])->andWhere(['created_time'=>$created_time])->exists()) { $i = new Gram(); $i->moment_id = $moment_id; $i->username = $username; $i->link = $link; $i->created_time = $created_time; $i->image_url = $image_url; $i->text = $text; $i->save(); } }
และนี่ก็หน้าแรกของผลลัพธ์จากการค้นหา มีคนเยอะแยะเลย แถมมีรถ limo อีกต่างหาก

ในหน้าที่ 3 user ชื่อ Joshua Lewis ก็มีรูปของ Macklemore กับรถ Cadillac

นี่คือ Macklemore

สำหรับตัวอย่างนี้ก็โชว์ความสามารถของ API สำหรับค้นหา media ต่างๆใน instagram ได้อย่างชัดเจน และในช่วงเวลาที่ผ่านมา เราได้เห็นว่ามีรูปภาพและวีดีโอมากมายจาก users ที่ใช้งานที่มาจากงาน event ในช่วง summer ปี 2013
What's Next?
หวังว่าคงจะสนุกกับ Instagram API ในตอนนี้ และในตอนต่อไป เราจะมาพูดถึง OAuth authentication ซึ่งจะทำให้เราสามารถดึงข้อมูลในส่วนที่ผู้ใช้ต้องทำการยืนยันก่อน
ในระหว่างนี้ถ้ามีคำถามอะไรก็คอมเมนท์เอาไว้ได้เลย หรือติดต่อมาได้ทันทีที่ Twitter @reifman or Email และยังมีบทความอื่นๆให้ดูอีกในเพจนี้เลย my Tuts+ instructor page
Related Links
- The Instagram API
- The Instagram Developers Blog
- Locating Potential Crime Scene Witnesses with Social Media APIs
- Yii2 Developer Exchange
รูปตัวอย่างในข้างต้นเป็นผลลัพธ์มาจากการค้นหาโดยใช้ API ของเจ้าของบทความนี้เอง
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post