Dibuat Oleh

HTTP REQUEST

1
5.1 Desain Aplikasi
Pada project kali ini anda akan membuat sebuah aplikasi yang mengakses REST API
dari themoviedb.org. Aplikasi yang dibuat akan menampilkan filem populer dan menampilkan
detail dari filem populer yang di pilih oleh user. Hasil akhir dari aplikasi yang dibuat dapat
dilihat pada gambar berikut ini.

Desain yang dibuat mengikuti pola master detail pada praktikum 5 tetapi sekarang
berisi data dari REST API.

5.2 Persiapan Project

Untuk membuat project ini anda membutuhkan :
5.2.1 Api Key dari themoviedb.org untuk mendapatkan api key dapat mengikuti tutorial
berikut ini :

• https://www.dicoding.com/blog/registrasi-testing-themoviedb-api/

• https://stackoverflow.com/questions/31047815/api-key-for-themoviedb-org

5.2.2 Library Flutter http

Setelah project flutter berhasil dibuat tambahkan library http ke project tersebut.Untuk
menambahkan library bisa menggunakan plugin vscode pubspec assit atau mengikuti
tutorial disini

2
 https://stackoverflow.com/questions/59915827/how-to-add-a-library-to-
flutter-dependencies
5.2.3 Jika ada permintaan update flutter lakukan flutter upgrade.

5.3 Koneksi ke REST API

5.3.1 Menguji koneksi di dashboard api themoviedb
Untuk menguji koneksi ke REST API themoviedb dapat dilakukan di link berikut ini
https://developers.themoviedb.org/3/movies/get-popular-movies pada link berikut anda dapat
menguji dan membuat request ke server themoviedb dan melihat response nya dalam berbagai
format json.

5.3.2 Mengkoneksikan Aplikasi Flutter ke themoviedb dengan package http

Untuk mulai mengkoneksikan aplikasi flutter yang dibuat ke rest api themoviedb.org
lakukanlah langkah berikut:
5.3.2.1 Untuk mengakses internet kita harus menambahkan permission internet pada
android manifest cari lah file android manifest.xml pada folder
android/app/scr/main/AndroidManifest.xml kemudian tambahkan permission
internet.

3
 5.3.2.2 Hapus komentar yang ada pada file main.dart dari kode program awal.
5.3.2.3 Ubah MyHomePage menjadi stateless widget.

5.3.2.4 Buat file baru baru “pages” pada folder lib dan buat sebuah file dengan nama
movie_list.dart.

5.3.2.5 Buat sebuah statefull widget pada file movie_list.dart

4
5.3.2.6 Import File movie_list.dart ke main.dart dant gunakan movie_list.dart sebagai
return dari class MyHomePage

5.3.2.7 Sebelum melanjutkan ke pembuatan aplikasi kita buat terlebih dahulu sebuah
helper class untuk konek ke rest api themoviedb. Buat lah sebuah folder dengan
nama servicedan isi dengan file http_service.dart.

5.3.2.8 Selanjutnya buat sebuah function untuk mengambil response dari server
themoviedb.org

5
5.3.2.9 Update file movie_list.dart agar dapat menggunakan file httpService dan
mereturn kanwidget scaffold.
5.3.2.10 Pada function _MovieListState tambahkan variabel berikut ini untuk variabel
servicejangan lupa import dulu file httpservice nya.

5.3.2.11 Kemudian tambahkan method override init state agar permintaan ke rest api
dapatdilakukan ketika state di inisialisasi.

5.3.2.12 Selanjutnya update function build pada movieListState dengan menggunakan

widgetscaffold.

6
 5.3.2.13 Jalankan aplikasi, jika di awal terjadi error reload menggunakan hot restart.

5.3.2.14 Pada langkah ini kita sudah berhasil mendapatkan response dari REST Api ke
widget text namun belum tampil dengan baik karena belum menggunakan
listview dan models. Selanjutnya kita persiapkan sebuah file models dan
listview.

7
5.3.3 Membuat model untuk response http
5.3.3.1 Buat folder models didalam folder lib dan isikan dengan file movie.dart

5.3.3.2 Di dalam movie.dart buat lah sebuah class movie lengkap dengan variabel dan
construktor seperti dibawah ini.

5.3.3.3 Selanjutnya buatlah sebuah function untuk mengkonversi json menjadi

response yangsesuai dengan class movie.

5.3.3.4 Selanjutnya update function http_service.dart menjadi seperti dibawah ini.

8
 5.3.3.5 Sampai pada tahap ini aplikasi anda tidak dapat berjalan dengan baik, biarkan
dan lanjutkan ke langkah selanjutnya untuk membuat list populer movie.

5.4 Membuat halaman list Populer Movie

Untuk membuat list view pada widget movie list anda memerlukan beberapa widget baru
antara lain list view dan card. Selain itu juga dibutuhkan data dari http service. Langkah
langkah yang perlu dilakukan adalah sebagai berikut :
5.4.1 Update inisialisasi variabel pada class movieliststate

5.4.2 Tambahkan method initialize() pada class movieliststate

9
5.4.3 Tambahkan function initialize pada initState

5.4.4 Selanjutnya buat listview dan card berdasarkan data dari initialize

10
 5.4.5 Lakukan hot restart dan aplikasi akan berubah menjadi seperti dibawah ini.

5.4.6 Selamat anda berhasil membuat listview sekarang saatnya mempercantik listview yang
dibuat.

11
5.4.7 Challenge : carilah cara menambahkan gambar dari response api ke listview,
tambahkan gambar tersebut ke listview.

5.5 Membuat halaman detail Populer Movie

5.5.1 Untuk membuat perpindahan dari movie list ke movie detail buatlah onTap event di
listview pada movie list.

5.5.2 Pada event on tap Widget MovieDetail belum dibuat, buatlah widget ini pada folder
pages/movie_detail.dart.

5.5.3 Lengkapi Movie Detail untuk menerima parameter Movies

12
5.5.4 Lengkapi detail widget.

5.5.5 Challenge Modifikasilah Tampilan agar terlihat lebih menarik

13