Interaksi API dengan Ignite React Native

Selamat datang ditulisan pertama saya. Pada tulisan pertama ini saya ingin berbagi apa yang sedang saya pelajari beberapa bulan ini yaitu tentang React Native dan Ignite. Bagi teman teman yang ingin belajar dasar dasar react native bisa belajar disini. OK langsung saja, pada kali ini kita akan belajar cara interaksi API dengan Ignite React Native. Ignite merupakan sebuah tools lengkap dengan boilerplate yang digunakan untuk mempermudah pengembangan aplikasi react native. Bagi yang belum mengenal ignite bisa dibaca terlebih dahulu disini

Install

Pertama tama , pastikan sudah terinstall Node 7.6+ dan juga yarn .

Okey…. langsung saja setelah Node dan yarn sudah terinstall selanjutnya kita menginstall ignite cli . disini saya menggunakan command prompt.

npm install -g ignite-cli

Boilerplate

Untuk proses mempermudah pengembangan aplikasi kita akan menggunakan boilerplate 2016 yang disediakan oleh ignite.

ignite new AplikasiLatihan -b ir-boilerplate-2016

Setelah proses download boilerplate selesai sekarang coba jalankan, jika proses dilakukan dengan benar maka tampilannya seperti dibawah ini:

HTTP Request

Untuk API-nya kita mengunakan API yang disediakan oleh The Movie DB. terlebih dahulu mendaftar untuk mendapatkan API Key yang akan digunakan untuk setiap kali request http. Disini kita akan menampilkan data film terpopuler.

Ok langsung buka file Api.js

Kemudian kita ganti baseURL tersebut seperti dibawah ini

Masih dihalaman yang sama, scroll kebawah dan lanjut ke step 2. pada step ini kita akan mendefinisikan fungsi yang digunakan untuk memanggil api. Fungsinya kita berinama getPopular().

Step yang terakhir tambahkan fungsi yang sudah kita buat tadi kedalam collection function

Api.js

Redux

Sebagai soorang pemula dalam hal javascript, mempelajari React Native dan Redux merupakan hal yang cukup membingungkan haha. Secara umum Redux adalah predictable state untuk aplikasi javascript. Predictable state maksudnya adalah kita dapat menghandle state atau memanage state dengan mudah dan efisien. Dengan redux kita dapat menulis aplikasi javascript dengan lebih terstruktur, rapih dan konsisten. Untuk lebih jelasnya bisa dibaca disini.

Kita akan membuat redux dengan perintah comand prompt, redux ini yang akan digunakan untuk menghandle action dari user, action dari user yang akan kita buat yaitu memanggil API, menghandel ketika request success dan gagal.

Ignite generate redux nama_redux

File redux bernama MoviesRedux berhasil dibuat

MoviesRedux.js

Selanjutnya kita akan mengedit type moviesRequest, moviesSuccess, dan moviesFailure sesuai kebutuhan yang diingankan. Lihat pada bagian action creator, ada 3 action yang sudah dibuat yaitu : moviesRequest, moviesSuccess, dan moviesFailure.

moviesRequest : action yang digunakan untuk memanggail API.

moviesSuccess: action yang digunakan ketika response sukses.

moviesFailure: action yang digunakan ketika response gagal.

Kita sesuaikan seperti dibawah ini

MoviesRedux.js

Lanjut ke bagian initial state, initial state ini digunakan untuk mendeklarasikan state state apa saja yang akan dibutuhkan.

MoviesRedux.js

kemudian kita buat reducer-nya, reducer digunakan untuk menjalankan perintah sesuai action yang diterima dari user.

MoviesRedux.js

pada bagian terakhir setelah reducer dibuat, kita hubungkan ke Type Action

MoviesRedux.js

Masih didalam directory Redux, buka file index.js kemudian kita pasangkan file redux yang kita buat tadi kedalam index.js

Redux/index.js

Saga

Saga merupakan bagian yang digunakan untuk memanggil API serta dapat digunakan untuk menghandel jika terjadi error dan ditampilkan ke user.

Ignite generate saga nama_saga
generate file saga

Buka file MoviesSagas, didalam file MoviesSagas kita akan memanggil API untuk menampilkan film terpopuler, menghandle jika terjasi error. Sebelumnya kita sudah mendeklarasikan sebuah fungsi bernama getPopular() didalam file Api.js , fungsi getPopuler() ini kita panggil didalam MoviesSagas

Sagas/MoviesSagas.js

Masih didadalm folder sagas, buka index.js kita akan mengimport file MoviesRedux dan MoviesSagas kedalam file tersebut, file ini bertugas untuk menerima action dari redux kemudian dikirimkan ke sagas

Sagas/index.js

Containers

Pada folder container digunakan untuk menangani bagian tampilan / user interface. Kita dapat membuat sebuah screen dengan menggunakan perintah pada command promt

Ignite generate screen nama_screen

Namun pada kali ini kita akan mengedit screen / view bawaan dari boilerplate. Langsung saja buka file ListviewGridExample, lalu sesuaikan seperti dibawah ini

jangan lupa kita sesuaikan style-nya masuk ke folder Styles / ListviewGridExampleStyles . sesuaikan style-nya seperti dibawah ini

Dan yang terakhir sebelum aplikasi di jalankan, buka folder Navigation / NavigationRouter.js, NavigationRouter ini digunakan untuk routing screen yang akan ditampilkan. Screen utama / screen yang akan ditampilkan pertama kali saat aplikasi dirunning harus ditaruh dipaling bawah.

setelah proses routing selesai jalankan perintah dibawah ini untuk menajalankan aplikasi

React-native run-android

Jika langkah langkah diatas kita lakukan dengan benar tampillannya seperti dibawah ini

Untuk source code lengkapnya bisa didownload disini,

Terima kasih telah membaca tulisan pertama saya, mohon maaf jika penjelasan dari setiap bagian masih kurang jelas, Sekian dan Semoga tulisan ini bermanfaat!!!