Movie App dengan Angular JS dan Onsen UI

Kali ini saya akan share contoh aplikasi front-end web dengan bahasa pemrograman Javascript menggunakan framework Angular JS versi 1. Disini saya juga menggunakan Onsen UI (https://onsen.io/) sebagai library untuk layouting di tampilan mobile. Contoh aplikasi ini bisa digunakan untuk referensi final project pada mata kuliah Hybrid Web prodi D3 Teknik Informatika.

Untuk data yang digunakan adalah API dari themoviedb.org, yang merupakan database movie dengan dokumentasi yang lengkap dan gratis. Untuk menggunakan layanan ini silahkan melakukan registrasi terlebih dahulu untuk mendapatkan API Key yang nantinya akan kita gunakan untuk melakukan request data. 

Dibawah ini tampilan untuk halaman utama yang menampilkan data list movie yang diakses melalui url: https://api.themoviedb.org/3/discover/movie?api_key={xyz}

List Data Movie

Dari masing-masing list item movie tersebut dapat dilihat detail pada tampilan dibawah ini dengan menggunakan url: https://api.themoviedb.org/3/movie/[id]?api_key={xyz}

Detail item Movie

Untuk dapat melakukan request pada kedua url API diatas, parameter api_key harus diubah dengan data api_key anda yang didapatkan setelah login ke web themoviedb.org dengan memilih menu Setting > API > API Key (v3 auth), seperti pada tampilan dibawah ini:

API Key di themoviedb.org

Untuk code program ini bisa anda dapatkan di https://github.com/ariflaksito/movie-app-angular1. Anda bisa melakukan clone source code atau download dalam zip file. Setelah itu silahkan anda ubah 2 file yaitu:

• js/controllers/MainController.js
• js/controllers/MovieController.js

Yang perlu diubah adalah API Key yang anda miliki dicopykan ke code url untuk menggantikan api_key=xyz pada kedua file tersebut.

InshaAllah lain kali akan saya tulis artikel tentang penggunaan framework Angular JS