PUBLIC API
Pemrograman Web Lanjut 2019/2020
Jurusan Teknologi Informasi
Politeknik Negeri Malang
PUBLIC API
PUBLIC API
Tujuan
Contoh: Google API ([Link]
Data milik google,
tapi kita bisa gunakan
Contoh: Bukalapak API ([Link]
Contoh: Public API Repo ([Link]
Contoh: Public API Lokal ([Link]
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
• [Link]
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
[Link])
• 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
([Link]
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 [Link]
• Pastikan pada script html, pemanggilan javascript sesuai dengan
lokasi file
• Isi file [Link] 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 [Link]
• 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’)