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

Transkripsi

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

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 TIM DOSEN IF 1

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. API yang bekerja pada tingkat sistem operasi membantu aplikasi berkomunikasi dengan layer dasar dan satu sama lain mengikuti serangkaian protokol dan spesifikasi. Contoh yang dapat menggambarkan TIM DOSEN IF 2

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 Fitur Web API Untuk membuat Web API, beberapa hal yang harus disediakan adalah: 1. Mendukung fungsi CRUD yang bekerja melalui HTTP protocol dengan method GET, POST, PUT dan DELETE 2. Memiliki response Accept Header dan HTTP status code TIM DOSEN IF 3

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 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 dua aplikasi berbeda sehingga bisa berkomunikasi satu sama lain baik dengan ataupun tanpa jaringan. 3. Web service hanya menggunakan 3 style yaitu SOAP, REST, atau XML-RPC untuk berkomunikasi sedangkan API dapat menggunakan style apapun. 4. Web service selalu membutuhkan jaringan untuk pengoperasiannya sedangkan API tidak selalu memerlukan jaringan untuk operasinya. TIM DOSEN IF 4

6 2.2 POSTMAN Postman merupakan sebuah aplikasi yang digunakan untuk menguji API (Application Programing Interface). Tanpa Postman pun sebenarnya kita dapat melakukan pengujian menggunakan program lain seperti misalnya Curl Command atau 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. TIM DOSEN IF 5

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 Lokasi pasar, acara dan bisnis TIM DOSEN IF 6

8 Bagian 2 Instalasi & Konfigurasi 1. Instalasi Postman Berikut langkah-langkah untuk menginstall postman : 1. Download terlebih dahulu file instalernya di 2. Pilih versi nya sesuai OS kalian. 3. Setelah selesai download lakukan instalasi seperti biasa. 4.Buka apliaksi postman kalian, nanti akan muncul tampilan login seperti ini : TIM DOSEN IF 7

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. 7. Postman siap digunakan TIM DOSEN IF 8

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 TIM DOSEN IF 9

11 2. Setelah itu muncul halaman developer signup. Silahkan masukan sesuai kebutuhan. your website isi alamat website yang kamu buat. Ex ( ) phone number isi no. Telepon untuk verifikasi what do you want to build with API deskripsi singkat untuk menjelaskan kegunaan aplikasi TIM DOSEN IF 10

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. TIM DOSEN IF 11

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 : ) valid redirect URIs isi dengan alamat web local kita lagi. 6. Isi captcha nya kemudian klik register. (contoh : ) 7. Setelah di-register akan muncul aplikasi di manage client. TIM DOSEN IF 12

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 TIM DOSEN IF 13

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 : ID&redirect_uri=REDIRECT-URI&response_type=token Ganti : CLIENT-ID dengan Client-ID yg ada di menu manage tadi Redirect-URL diganti dengan alamat web local kita, contoh ( ) Masukan alamat tadi di kolom url browser, tekan enter. Nanti muncul halaman authorisasi TIM DOSEN IF 14

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. TIM DOSEN IF 15

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 ( ), login sesuai akun masing masing, masuk ke menu endpoints, pilih sub-menu users. Copy alamat API untuk mengambil informasi akun milik kita sendiri c. Kembali ke postman, masukan alamat url yang telah di copy di dalam kolom alamat yang ada di postman, Pilih method get, kemudian akses tokennya ubah sesuai yang telah kita dapatkan sebelumnya, lalu tekan send. TIM DOSEN IF 16

18 2. Pilih method get 1. Paste 3. Ubah token 4. Send 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> <link rel="stylesheet" href="css/mystyle.css"> <script src=" </head> <body> <div class="container"> <div id="foto"></div> <h2 id="nama"></h2> <p id="bio"></p> <div class="detail"> <h4>kiriman</h4> TIM DOSEN IF 17

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; border: 2px; border-color: grey; } #nama { text-align: center; }.detail { width: 250px; float: left; } TIM DOSEN IF 18

20 .clear { } clear: both; 1.f. Untuk dapat mengambi datanya kita menggunakan ajax. Simpan dengan nama myscript.js //token yang kita punya var token = ' fe24bb3.ed35359c08c7431a919db504084e3ed6'; //Ajax dengan jquery untuk me-request ke API instagram $.ajax({ url: ' 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); } Hasilnya : TIM DOSEN IF 19

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: ' 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); } }); TIM DOSEN IF 20

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. TIM DOSEN IF 21

23 Coba bandingkan dengan ajax nya, $.ajax({ url: ' 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, 4 TIM DOSEN IF 22

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. TIM DOSEN IF 23