Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. APIs
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:

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

Instagram Hello Developers

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

Instagram Developer Signup

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

Instagram New Client Registration

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

Instagram Manage Clients

Using the Media Endpoints

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

Instagram API Documentation Overview and Endpoints

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

Instagram API 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 เอาไว้

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 ด้านข้าง

เริ่มตั้งค่า Local Apache ในเครื่อง (ประมาณว่าทำให้เครื่องตัวเองเป็น Server) ส่วนเราใช้ MAMP มันก็จะหน้าตาประมาณนี้

และสร้าง Database ไว้ในเครื่อง ส่วนเราใช้ PHPMyAdmin ก็จะมีรูปร่างหน้าตาให้ใช้งานได้ง่าย

Create your Eyewitness database

จากนั้นก็ให้สร้าง initialization file ใน /var/secure/eyew.ini พร้อมกับ database credentials, Instagram IDs, และก็ keys สามารถดูขั้นตอนนี้เพิ่มเติมได้ที่ Protecting Your Keys From GitHub

ini file ก็จะหน้าตาประมาณนี้

ทำการอัพเดท libraries

แล้วก็มาเริ่มรัน database ของเรา ขั้นแรกทำการ migrat installs user tables สำหรับ Yii2-User โดยใช้ developer Dmeroff extension และขั้นที่สองให้สร้าง app-specific tables

สำหรับใครที่อยากจะปูพื้นฐาน Yii Framework ก่อน ก็สามารถเข้าไปดูเพิ่มเติมได้ที่ Programming With Yii2

นี่คือ MySQL schema สำหรับสร้าง Instagram image table โดยเราจะเรียกมันว่า Gram table เราจะใช้ table นี้สำหรับเก็บ geosearch หรือตำแหน่งของรูปภาพ

The Home Page

เราได้เปลี่ยนชื่อแอพของเราให้เป็น Instapi --> มันคือชื่อสั้นๆจาก Instagram API

และถ้าทุกอย่างเรียบร้อย เมื่อเข้าไปหน้าแรกของเรา (Localhost) ก็จะเห็นหน้าตาแบบนี้

Instagram API Sample Code Home Page

Performing Media Searches

ก่อนที่เราจะเริ่มทำการค้นหารูปภาพ หรือวีดีโอในแอพของเรา เราจะใช้ตัวช่วยที่มีชื่อว่า Galen Grover's Instagram PHP package

Search Popular Images

ขั้นแรก เราจะทำการค้นหา media/popular เราจะทำการ query API และแสดงผลลัพธ์ใน table

เราได้สร้าง action สำหรับไว้ค้นหา popular ชื่อ GramController.php

action ด้านบนจะทำการเรียก searchPopular() จาก Gram.php 

ในโฟลเดอร์ /views/gram/popular.php เราจะสร้างตารางใน HTML แบบนี้

และใส่ _item.php เพื่อให้แสดงผลเป็นส่วนๆ

นี่คือผลลัพธ์จากการ query หา popular post ในตอนนั้น ลองกดรีเฟรชไปเรื่อยๆ แล้วดูว่ามันจะมีอะไรขึ้นมา 5555

Instagram Media Popular Results Table

Look Up Information About an Image or Video

เราได้ทำ Link Instagram media ID ใน column แรก ไว้กับ action ที่ไว้สำหรับเรียกไปที่ media endpoint แล้วส่งข้อมูลกลับมา

action ด้านบนก็จะทำการเรียก lookup function

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

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 ชั่วโมง

Create a Moment

Instagram ใช้เวลาแบบ GMT เราเลยต้องทำการ hardcoded เปลี่ยนเวลาไป 8 ชั่วโมง เพราะ timezone ของเราเป็นแบบ PST บางคนอาจจะต้องเปลี่ยน code นี้นิดหน่อย เพราะแต่ละ zone เวลาไม่เหมือนกัน

แค่คลิกที่ไอคอนรูปกล้อง ก็จะทำการเสิร์ชจาก Instagram ทันที

The Moments Index Grid

วิธีการค้นหาก็ง่ายๆ ตามนี้ $instagram->searchMedia( $this->latitude, $this->longitude,$params );

ผลลัพธ์ก็จะถูกเก็บลงใน Gram table

และนี่ก็หน้าแรกของผลลัพธ์จากการค้นหา มีคนเยอะแยะเลย แถมมีรถ limo อีกต่างหาก

Macklemore Search Results

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

More Macklemore Search Results

นี่คือ Macklemore

Macklemore Arrives on Instagram

สำหรับตัวอย่างนี้ก็โชว์ความสามารถของ API สำหรับค้นหา media ต่างๆใน instagram ได้อย่างชัดเจน และในช่วงเวลาที่ผ่านมา เราได้เห็นว่ามีรูปภาพและวีดีโอมากมายจาก users ที่ใช้งานที่มาจากงาน event ในช่วง summer ปี 2013

What's Next?

หวังว่าคงจะสนุกกับ Instagram API ในตอนนี้ และในตอนต่อไป เราจะมาพูดถึง OAuth authentication ซึ่งจะทำให้เราสามารถดึงข้อมูลในส่วนที่ผู้ใช้ต้องทำการยืนยันก่อน

ในระหว่างนี้ถ้ามีคำถามอะไรก็คอมเมนท์เอาไว้ได้เลย หรือติดต่อมาได้ทันทีที่ Twitter @reifman or Email และยังมีบทความอื่นๆให้ดูอีกในเพจนี้เลย my Tuts+ instructor page

Related Links

รูปตัวอย่างในข้างต้นเป็นผลลัพธ์มาจากการค้นหาโดยใช้ API ของเจ้าของบทความนี้เอง

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.