PRAKTIKUM. Rekayasa Web. Modul 6: WEB API. Laboratorium Teknik Informatika. Universitas Pasundan

24  17  Download (0)

Teks penuh

(1)
(2)

Konten modul:

1. Pemahaman API

2. Mengenal API Instagram

3. Mengecek API dengan Postman Tujuan praktikum:

1. Praktikan diharapkan mampu memahami apa yang dimaksud dengan API

2. Praktikan diharapkan mampu memahami cara mengambil data dari API Instagram.

3. Praktikan diharapkan mampu memahami cara mengecek data dari API Instagram lewat Postman

(3)

1 Bagian 1 Teori 2 1. WEB API

API adalah singkatan dari Application Programming Interface, dan memungkinkan developer untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan. API terdiri dari berbagai elemen seperti function, protocols, dan tools lainnya yang memungkinkan developers untuk membuat aplikasi. Tujuan penggunaan API adalah untuk mempercepat proses development dengan menyediakan function secara terpisah sehingga developer tidak perlu membuat fitur yang serupa. Penerapan API akan sangaat terasa jika fitur yang diinginkan sudah sangat kompleks, tentu membutuhkan waktu untuk membuat yang serupa dengannya. Misalnya: integrasi dengan payment gateway. Terdapat berbagai jenis sistem API yang dapat digunakan, termasuk sistem operasi, library, dan web.

(4)

spesifikasi tersebut adalah POSIX (Portable Operating System Interface). Dengan menggunakan standar POSIX, aplikasi yang di-compile untuk bekerja pada sistem operasi tertentu juga dapat bekerja pada sistem lain yang memiliki kriteria yang sama. Software library juga memiliki peran penting dalam menciptakan compatibility antar sistem yang berbeda. Aplikasi yang berinteraksi dengan library harus mengikuti serangkaian aturan yang ditentukan oleh API. Pendekatan ini memudahkan software developeruntuk membuat aplikasi yang berkomunikasi dengan berbagai library tanpa harus memikirkan kembali strategi yang digunakan selama semua librarymengikut API yang sama. Kelebihan lain dari metode ini menunjukkan betapa mudahnya menggunakan library yang sama dengan bahasa pemrograman yang berbeda.

Seperti namanya, Web API dalam diakses melalui protokol HTTP, ini adalah konsep bukan teknologi. Kita bisa membuat Web API dengan menggunakan teknologi yang berbeda seperti PHP, Java, .NET, dll. Misalnya Rest API dari Twitter menyediakan akses read dan write data dengan mengintegrasikan twitter kedalam aplikasi kita sendiri.

2.1.1 Fitur Web API

(5)

3. Response dengan format JSON, XML atau format apapun yang kamu inginkan. Akan tetapi kebanyak digunakan kedalam format JSON.

4. Mendukung fitur MVC seperti routing, controllers, action results, filter, model, IOC container, dll.

5. Web API dapat berjalan di Apache atau web server lainnya yang didukung sesuai bahasa pemrograman yang digunakan.

Web API seperti sebuah alamat web (end point) yang dibuat untuk menangani beberapa task sesuai request yang diterima, juga terkadang memiliki parametersebagai data yang dibutuhkan agar dapat menampilkan hasil yang diinginkan, juga pada beberapa kasus untuk mengakses API dibutuhkan kode otentikasi yang telah diizinkan untuk melihat data yang diinginkan. Semua rule ini ditentukan oleh programmer yang membuatnya.

2.1.2 Perbedaan Web API dan Web Service

Seringkali saya mendapat pertanyaan tentang apa sih perbedaan antara web APIdan web service? Berikut adalah perbedaan diantara keduanya:

1. Semua web service menggunakan API tapi tidak semua API digunakan sebagai web service

2. Web service memfasilitasi untuk melakukan interaksi antara dua perangkat atau aplikasi melalui jaringan. Sedangkan API bertindak sebagai penghubung antara

(6)

2.2 POSTMAN

Postman merupakan sebuah aplikasi yang digunakan untuk mengujiAPI(Application Programing Interface). Tanpa Postman pun sebenarnya kita dapat melakukan pengujian menggunakan program lain seperti misalnyaCurl Commandatau bahkan menggunakan script dari bahasa pemrograman terntentu. Dengan menggunakan Postman, pengujian sebuah API akan lebih mudah. Mengapa demikian? Karena Postman merupakan aplikasi bebasis GUI atau memiliki tampilan desktop (antarmuka).

2.3 Antarmuka Postman

Pada tampilan utama Postman nampak kolom-kolom isian seperti kolom Request URL/URL endpoint dari API, pilihan Method HTTP yang lengkap, Authorization, Header, Body dan lain-lain. Dengan demikian kita cukup mengisi parameter-parameter yang dibutuhkan oleh dan atau akan kita kirim ke API yang akan kita uji.

(7)

2.4 Instagram API

Dengan menggunakan API publik Instagram, developer memiliki sejumlah pilihan terbaik untuk menerapkan kode yang disediakan. Beberapa ide untuk memulai menggunakan API Instagram, berikut tersedia beberapa pilihan yang mungkin anda tertarik untuk menerapkannya. :

 Info User

 Search Tags (pencarian tag)

 Melihat foto dari lokasi tertentu secara real-time  Melihat foto populer dan foto tren

(8)

Bagian 2

Instalasi & Konfigurasi

1. Instalasi Postman

Berikut langkah-langkah untuk menginstall postman :

1. Download terlebih dahulu file instalernya di https://www.getpostman.com/apps. 2. Pilih versi nya sesuai OS kalian.

3.Setelah selesai download lakukan instalasi seperti biasa .

(9)

5.Silahkan buat akun untuk dapat login di postman, atau bisa juga menggunakan akun google secara langsung.

6. Setelah login , berikut tampilan setelah login postman.

(10)

2. Konfigurasi akun Instagram

Agar dapat menggunakan API dari instagram kita harus konfigurasi terlebih dahulu di akun instagram kita agar dapat diakses API nya. Langkah - langkahnya adalah sebagai berikut :

1. Login terlebih dahulu di page developer instagram , gunakan akun instagram kalian masing - masing untuk login. Di alamat ini

(11)

2. Setelah itu muncul halaman developer signup. Silahkan masukan sesuai kebutuhan.

your website – isi alamat website yang kamu buat. Ex (

http://localhost/rekweb_api)

phone number – isi no. Telepon untuk verifikasi

what do you want to build with API – deskripsi singkat untuk menjelaskan kegunaan aplikasi

(12)

3. Akan muncul halaman selamat datang developer API. Klik di button Register Your Application.

4. Nanti kita akan diarahkan ke manage Client, Klik Register New Cilent untuk menambahkan app baru.

(13)

5. Isi data sesuai deskripsi aplikasi yang akan kalian buat :

 application name – masukan nama aplikasi kamu, tidak boleh ada kata

Instagram, IG, atau gram

 description – deskripsi singkat aplikasi

 website URL – isi dengan alamat web local kita. (contoh :http://localhost/rekweb_api)  valid redirect URIs – isi dengan alamat web local kita lagi.

(14)

8. Klik Tombol Manage , di kolom aplikasi yang telah dibuat. Pilih

Menu Security, lalu un-checklist bagian disable implicit OAuth. Lalu

klik update client.

1

(15)

9. Sekarang kita tinggal ambil akses token dengan menggunakan

Client ID dan Client Secret . Caranya masuk ke menu bagian

Authentication, scroll ke bawah ke bagian Client-Side ( Implicit )

Authentication. Copy code nya .

Contoh Link : https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

Ganti :

(16)

10. Pilih Authorize , Kemudian di alamat url akan muncul access token.

11. Simpan Akses token tersebut untuk digunakan sebagai token mengabil data di akun instagram kamu lewat API.

(17)

BAGIAN 3 LATIHAN 1 1. Mengambil data profile instagram

Setelah menkonfigurasi akun instagram kita saatnya kita mencoba mengambil data yang ada di akun instagram lewat API Instagram. Pertama - tama kita akan mengecek terlebih dahulu apakah token yang kita dapat bisa digunakan atau tidak.

Cara mengeceknya :

1.a. Buka postman terlebih dahulu, kemudian login sesuai akun yang telah dibuat. 1.b. Buka halaman developer instagram (https://www.instagram.com/developer/),

login sesuai akun masing masing, masuk ke menu endpoints, pilih sub-menu users. Copy alamat API untuk mengambil informasi akun milik kita sendiri.

1 2

(18)

2

3 Jika benar maka akan muncul tampilan data di bawahnya.

1.d. Sekarang buat file index.php untuk mengambil datanya. <html> <head> <title>Rekweb API</title> 1. Paste 2. Pilih method get

(19)

<h5 id="kiriman"></h5> </div> <div class="detail"> <h4>Mengikuti</h4> <h5 id="following"></h5> </div> <div class="detail"> <h4>Diikuti</h4> <h5 id="followers"></h5> </div> <div class="clear"></div> <hr> </div> <script src="js/myscript.js"> </script> </body> </html>

1.e. Untuk style nya simpan dengan nama mystyle.css . #rudr_instafeed { list-style: none } #rudr_instafeed li { float: left; width: 200px; height: 200px; margin: 10px } #rudr_instafeed li img { max-width: 100%; max-height: 100%; }

#foto, #foto img { border-radius: 100px; padding: 10px; width: 100px; height: 100px; margin: auto; } .container { margin: auto; width: 800px;

(20)

.clear {

clear: both; }

1.f. Untuk dapat mengambi datanya kita menggunakan ajax. Simpan dengan nama myscript.js //token yang kita punya

var token = '3622843646.fe24bb3.ed35359c08c7431a919db504084e3ed6'; //Ajax dengan jquery untuk me-request ke API instagram

$.ajax({

url: 'https://api.instagram.com/v1/users/self/', dataType: 'jsonp',

type: 'GET', //masukan parameter

data: {access_token: token}, success: function (data) {

//menampilkan data di console log console.log(data); //memasukan data ke html $('#foto').append('<img src="' + data.data.profile_picture + '">'); $('#nama').append(data.data.full_name); $('#bio').append(data.data.bio); $('#kiriman').append(data.data.counts.media); $('#following').append(data.data.counts.follows); $('#followers').append(data.data.counts.followed_by); },

error: function (data) { console.log(data); }

});

(21)

2. Memunculkan data postingan lewat API Instagram

Pada latihan kali ini kita akan memunculkan foto/video yang ada di akun instagram kita ke halaman web yang sudah kita buat. Tidak perlu ribet cukup memodifikasi file index.php dan myscript.js yang sudah kita buat sebelumnya.

2.a. Buka file index.php tambahkan code berikut sebelum tag penutup container.

<ul id="rudr_instafeed"></ul>

2.b. Buka file myscript.js, tambahkan code berikut : //Ajax dengan jquery untuk me-request ke API instagram $.ajax({

url: 'https://api.instagram.com/v1/users/self/media/recent', dataType: 'jsonp',

type: 'GET', //masukan parameter

data: {access_token: token, count: num_photos}, success: function (data) {

//menampilkan data di console log console.log(data);

//memasukan data ke html for (x in data.data) {

$('ul').append('<li><img src="' + data.data[x].images.low_resolution.url + '"></li>'); }

},

error: function (data) { console.log(data); }

(22)

2.c. Simpan perubahannya, kemudian refresh halaman web lokal yang sudah kita buat. Hasilnya kurang lebih seperti ini :

TIPS !

Untuk kalian yang bingung bagaimana cara menangkap datanya coba perhatikan kembali di bagian postman,lihat hasil dari request API yang kalian kirim.

(23)

Coba bandingkan dengan ajax nya, $.ajax({ url: 'https://api.instagram.com/v1/users/self/', dataType: 'jsonp', type: 'GET', //masukan parameter

data: {access_token: token}, success: function (data) {

//menampilkan data di console log console.log(data); //memasukan data ke html $('#foto').append('<img src="' + data.data.profile_picture + '">'); $('#nama').append(data.data.full_name); $('#bio').append(data.data.bio); $('#kiriman').append(data.data.counts.media); $('#following').append(data.data.counts.follows); $('#followers').append(data.data.counts.followed_by); },

error: function (data) { console.log(data); }

});

Untuk mengambil salah satu data yang terdapat dari API cukup menuliskan nama variabel+referensi object nya. Contoh :

Untuk mengambil value username kita menuliskan code , Nama variabel . data . username ,

(24)

5 Bagian 4 TUGAS 1. Tampilkan postingan berdasarkan hastag tertentu. 2. Tampilkan salah satu komentar postingan.

3. Tugas maksimal dikerjakan 3 X 24 Jam dan dikirim ke asistenya masing – masing. Atau sesuai kesepakatan asisteng masing – masing.

Figur

Memperbarui...

Related subjects :