Home / Developer  / Angularjs  / ionic framework กับ AngularJS ดึง Instagram ด้วย #HashTag

ionic framework กับ AngularJS ดึง Instagram ด้วย #HashTag

คำสั่งแบบง่ายสำหรับผู้เริ่มต้นพัฒนาแอพพลิเคชันแบบ Cross-Platform ด้วย ionic framework และ AngularJS ดึง API ของ instagram ผ่านการใช้ #HashTag ต่างๆ มาแสดงผล

ง่ายและเร็ว คือ คำนิยามสั้นของบทความนี้

ทบทวนบทเรียนย้อนหลังได้ที่

http://www.daydev.com/category/developer/angularjs

เราจะใช้ตัวอย่างของบทเรียนก่อนหน้านี้แบบเน้นๆ เลยในบทเรียนนี้คือ

เพียงเท่านั้นครับ รันคำสั่งสร้างแอพฯ เราขึ้นมาเลย

ไปทำการสมัคร instagram API ให้เรียบร้อย

https://instagram.com/developer/clients/manage/

ionic-2-1

เราจะใช้ #HashTag และ Client_id ในการค้นหา รูปแบบการเรียก jSON Webservice คือ

https://api.instagram.com/v1/tags/ใส่ # ของคุณ/media/recent?client_id=ใส่ Client ID&count=200

ผมเลือกใช้ #DPUCuteGirl ของกลุ่มลูกศิษย์ที่มหาวิทยาลัยแล้วกัน

ระบบ API

แก้ไขไฟล์ ‘www/js/controller.js’ ให้เรียก Web Service โดยการประกาศ Header เรียก $Function เพิ่มคือ

และแก้ไข ‘PlaylistsCtrl’ ใหม่เป็นดังนี้

ภาพรวมของไฟล์เป็นแบบนี้ครับ

ไปแก้ไข Templates เล็กน้อยในการ ดึง มิติของ Array ใน JSON เช่น Caption มันจะต้องดึงทั้งหมด 3 ระดับ คือ

data.caption.text

ไฟล์ playlists.html ต้องเป็นดังนี้ครับ

อย่าลืมถ้ารันใน localhost มีปัญหา Allow-Control-Allow-Origin: *

นั่นเพราะมันเรียก HTTPRequest แบบ Cross Domain ไม่ได้ครับต้องตั้งค่า Allow-Control-Allow-Origin: * ก่อน วิธีที่ง่ายสุดก็คือ โหลด Add-on ของ Google Chrome ครับชื่อ “Allow-Control-Allow-Origin: *”

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

ติดตั้งเสร็จ จะมีมุมขวา COR สีแดง ให้กด Allow เป็น สีเขียวครับ แอพเราจะทำงานได้สมบูรณ์ แสดงผลหน่อยจะเป็นดังตัวอย่าง

ionic-2-2

ทีนี้ก็ไปหา CardView สวยๆ มาวางที่ไฟล์ PlayLists.html ใน folder ‘www/templates’ ครับ ดูระดับของมิติบน array ให้ดีใน JSON ครับ

ทดสอบ

ionic-2-3

เลื่อนภาพสวยๆ

ionic-2-4

เสร็จเรียบร้อยครับ การดึง API ของ instagram ด้วย #HashTag ที่เป็น Web Service นั้นไม่เห็นยากตรงไหนเลยใช่ไหมครับเอาไปลองทำกันดู ล่ะกันสบายๆ ไปก่อนล่ะครับ

ทบทวนบทเรียนย้อนหลังได้ที่

http://www.daydev.com/category/developer/angularjs

 

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.