มาลอง Instagram API: Media Endpoints กันเถอะ!

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

Final product image — What You'll Be Creating

แล้วก็มาถึงตอนที่ 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 ให้ใช้เยอะระดับนึงเลยละ

Instagram API Documentation Overview and 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;
      }

และนี่ก็ตัวอย่างของข้อมูลที่ถูกส่งกลับมา

Instagram API Media Information Dumped to Screen

และเราสามารถใช้ข้อมูลเหล่านี้ไปทำอะไรก็ได้

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

Dicks Drive In Broadway Seattle GPS in Google Maps

จากประสบการณ์ที่ผ่านสถานที่นี้จะปิดในเวลาตี 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