Scribd
Unggah
141 tayangan

Public API

Dokumen tersebut membahas tentang penggunaan API publik untuk pembuatan aplikasi web. Terdapat contoh-contoh API publik beserta cara otentikasinya. Dokumen tersebut juga memberikan panduan langkah demi langkah untuk mengakses dan menampilkan data dari API publik OMDb menggunakan Postman dan membuat web sederhana menggunakan data tersebut."

Diunggah oleh

Riina Puus
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
141 tayangan

Public API

Dokumen tersebut membahas tentang penggunaan API publik untuk pembuatan aplikasi web. Terdapat contoh-contoh API publik beserta cara otentikasinya. Dokumen tersebut juga memberikan panduan langkah demi langkah untuk mengakses dan menampilkan data dari API publik OMDb menggunakan Postman dan membuat web sederhana menggunakan data tersebut."

Diunggah oleh

Riina Puus
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 39

PUBLIC API

Pemrograman Web Lanjut 2019/2020


Jurusan Teknologi Informasi
Politeknik Negeri Malang
PUBLIC API
PUBLIC API
Tujuan
Contoh: Google API (https://console.developers.google.com/apis)

Data milik google,


tapi kita bisa gunakan
Contoh: Bukalapak API (https://github.com/arbiyanto/BukaLapak-API)
Contoh: Public API Repo (https://github.com/public-apis/public-apis)
Contoh: Public API Lokal (https://github.com/farizdotid/DAFTAR-API-LOKAL-INDONESIA)
Otentikasi (Auth)
• Tanpa otentikasi
• Public API diakses secara langsung tanpa ada otentikasi pengguna
• Key/Token
• Public API diakses menggunakan key tertentu untuk membatasi pengguna
yang mengakses
• OAuth (Open Authorization)
• Akses public API menggunakan otentikasi yang memanfaatkan third party.
Contoh: login spotify menggunakan akun google
Let’s code!!!
Udah pada gak sabar pingin ngoding kan
Prerequisites
• Install postman atau aplikasi tester REST Client lainnya
• https://www.getpostman.com
Percobaan 1
Buka repo API public, cari open movie
database
OMDb API
Klik menu API key,
pilih akun free
dan masukkan
data yang
diminta.
Klik link verifikasi untuk mengaktivasi API key
anda
Jika sudah muncul seperti ini, berarti API key
anda telah aktif dan bisa digunakan
Retrieve API data dari OMDb
Contoh
• penggunaan API

Parameter yang
digunakan saat
pemanggilan API
Retrieve API data dari OMDb
HTTP Method Alamat URL dari API yang diakses
• Buka postman

Key parameter Value parameter

Tempat tampilan response


dari API yang diakses
Retrieve API data dari OMDb
• Masukkan URL sesuai contoh di OMDb dan isikan parameternya
• Contoh: menggunakan parameter s (find movie title by search)

Sesuaikan apikey
dengan milik anda

Kata kunci judul film yang ingin dicari


Retrieve API data dari OMDb
• Coba amati format json hasil response dari API berikut! Object apa
yang di-return?
Retrieve API data dari OMDb
• Coba
dengan
kata kunci
lainnya
Selanjutnya kita buat web untuk menampilkan
data yang didapatkan dari OMDb
• Buat folder baru pada htdocs (contoh folder diberi nama movie)
• Untuk mempersingkat waktu, kita gunakan template file yang sama
dengan percobaan 2 pada pekan sebelumnya (contoh nama file
index.html)
• Cek di browser untuk memastikan bahwa file berfungsi dengan baik
Ubah judul, logo, dan menu utama
Ubah judul, logo, dan menu utama (Hasil)
Our goal

Form pencarian

Hasil
pencarian
• Ubah judul pada container isi
• Ubah id pada container untuk menampilkan hasil pencarian
Input pencarian
• Cari template bootstrap untuk form pencarian dengan kata kunci
input group dari web bootstrap, pilih submenu button addons
(https://getbootstrap.com/docs/4.3/components/input-group/#button-addons)

Bentuk form yang akan kita gunakan

Copy baris script ini, paste ke bagian


pencarian
Input pencarian

Refresh browser anda untuk cek apakah form muncul atau tidak!
Input pencarian
• Ubah teks pada form input dan teks pada tombol!
• Berikan id pada form input dan tombol!
Input pencarian
• Hasil edit kurang lebih seperti berikut
(model tidak harus sama, sesuaikan dengan kreasi anda)
• Buat folder js dan isi dengan file script.js
• Pastikan pada script html, pemanggilan javascript sesuai dengan
lokasi file
• Isi file script.js dengan baris script berikut
• Refresh browser anda, kemudian masukkan kata kunci di search,
kemudian cari datanya
• Selanjutnya lakukan inspect element, lihat pada console. Jika data
ditemukan, maka akan tampil di console
• Pada bagian fungsi success, kita buat percabangan antara kondisi
response dari API true alias ditemukan data dan false atau tidak
ditemukan data yang dicari
• Pada kondisi true, tambahkan script untuk menampung objek hasil
kembalian dari API
• Kemudian tambahkan elemen card (seperti praktikum pekan
sebelumnya) yang didapatkan dari web bootstrap
• Isikan masing-masing elemen dengan nilai pada tiap objek
• Pada kondisi false, tambahkan script untuk menampilkan keterangan
bahwa film tidak ditemukan
• Refresh browser anda, cari judul yang anda inginkan
• Coba juga dengan mencari judul film yang tidak ada, perhatikan hasilnya!
• Rapikan penataan hasil pencarian anda agar lebih nyaman dipandang
SAIKI WAYAHE TUGASSSS

g …
ten
g
g ten
n
tre
ng
Te
TUGAS
• Buatlah sebuah web sebagai client seperti pada bagian percobaan yang
menampilkan data publik dari link https://github.com/public-apis/public-apis
• Pilih API yang menggunakan autentikasi/api key!
• Tambahkan link pada card yang dapat diklik dan berpindah ke halaman lain.
• Contoh:

Tombol detail diklik akan berpindah ke halaman detail


(dibuat kosong saja, hanya ada judul ‘halaman detail’)

Anda mungkin juga menyukai