Post

Build Your First Mobile App With React - Native and Expo #3

Salam hangat sahabat sharehubid. Pada article lalu kita sudah membuat header component, melakukan instalalsi axios, dan melakukan end point test. Pada article kali ini, akan saya lanjutkan dengan membuat component - component lainnya yang kita butuhkan.

Baiklah, kembali pada text editor anda lalu buat file baru dengan nama "CardSection.js" pada directory components. Bila sudah, tambahkan beberapa code sebagai berikut.

Setelah membuat CardSection component, maka kita akann membuat component lagi pada directory components dengan nama "Card.js". Bila sudah, tambahkan code sebagai berikut.

Selanjutnya kita lanjutkan dengan component lain yang kita butuhkan lagi. Masih pada text editor anda, buat file component baru pada directory components dengan nama "Button.js" dan tambahkan code sebagai berikut.

Sampai disini, component - component pendukung yang kita butuhkan sudah kita buat. Untuk selanjutnya akan dilanjutkan dengan pembuatan component inti. Baiklah, sekarang buat component baru pada directory components dengan nama "AlbumList.js" dan tambahkan code seperti berikut.

Pada gambar dapat dilihat pada line 1 dimana kita melakukan import Library "Component" yang kita gunakan untuk pembuatan class component AlbumList pada line 6. Lalu kita juga melakukan import library "ScrollView", yang dari namanya saja bisa anda tebak kegunaannya untuk apa, yaitu agar dapat melakukan scrolling pada tampilan mobile app yang kita buat. Selanjutnya ada axios yang sudah kita install pada aarticle lalu, dan kita juga melakukan import terhadap component "AlbumDetail" yang nanti akan kita buat setelah ini.

Pada line 7, dapat anda lihat dimana kita menggunakan "state". Ada dua jenis type data yang mengontrol component, yaitu props yang sudah kita gunakan sebelumnya dan juga state. Perbedaannya adalah props sudah di set terlebih dahulu oleh parent nya dan data yang digunakan fixed sepanjang component tersebut belum berganti. Untuk data yang akan berubah kita harus menggunakan state.

Umumnya anda harus menginisialisasi state pada constructor lalu menggunakan "setState" ketika anda ingin memanipulasi state tersebut. Untuk lebih jelasnya bisa anda lihat pada gambar mulai dari line 7 hingga line 11 atau tepatnya pada method "componentWillMount".

Pada method tersebut kita juga menggunakan "axios.get" untuk meretrieve data dari API Link tersebut sebagai response lalu mengubah isi state albums dengan data dari API tersebut.

Selanjutnya pada method "renderAlbums" kita melakukan array maping dari state albums dan manipulasi datanya pada component "AlbumDetail". 

Selanjutnya buat satu file baru lagi pada directory components dengan nama "AlbumDetail.js" dan tambahkan code seperti berikut.

Lalu dilanjutkan dengan beberapa style yang akan kita butuhkan seperti berikut.

Component - component pendukung yang telah kita buat sebelumnya kita panggil pada component ini seperti terlihat pada line 3 sampe dengan line 5. Dan pada line 2 dapat dilihat bahwa kita memanggil library yang baru kita gunakan pada component ini yaitu Image, dan Linking.

Pada deklarasi const AlbumDetail kita juga menggunakan props namun dideklarasikan dengan nama "album" yang disesuaikan dengan parameter yang kita buat pada component AlbumList untuk memudahkan.

Untuk selanjutnya buka file App.js kembali lalu tambahkan beberapa code sehingga App.js akan menjadi seperti ini.

Baiklah, sampai disini maka kembali pada command prompt dan pastikan active directory sudah pada first-project, lalu ketik perintah "expo start", tunggu hingga muncul QR Code kemudian melalui expo client pada mobile device anda, lakukan scan terhadap QR Code tersebut. Dan, voila, seperti inilah simple app yang kita buat.

Lalu bila anda sentuh pada button "Buy Now", maka akan mengalihkan anda ke browser di mobile device anda dan menuju link dari amazon untuk album tersebut seperti gambar berikut.

 

Pada article kali ini kita sudah belajar menggunakan library Image untuk menampilkan data image, penggunaan axios get, dan jg Library Linking untuk melakukan open URL. Cukup sekian yang dapat saya sampaikan, semoga article ini bermanfaat untuk pembelajaran anda. Selebihnya, saya ucapkan terimakasih.