Post

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

Salam hangat para sahabat sharehubid. Pada article sebelumnya kita sudah memulai membuat project baru menggunakan Expo. Kali ini pembuatan simple mobile app akan saya lanjutkan kembali. Baiklah, buka project "first-project" yang sudah kita buat menggunakan text editor anda masing - masing. Untuk saya sendiri, saya menggunakan VSCODE dengan extensions yang sudah saya jabarkan pada article sebelumnya.

Pertama - tama, siapkan dulu directory yang akan kita gunakan untuk menyimpan semua components yang kita buat. Pada directory project kita, tambahkan directory baru dengan nama "src", lalu tambahkan directory "components" pada directory tersebut. Untuk lebih jelas, anda bisa lihat pada gambar.

Setelah itu kita lanjutkan dengan membuat compnent yang dibutuhkan. Pertama - tama mari kita buat terlebih dahulu header component -nya. Buat new file dengan nama " header.js " pada directory components dan tambahkan code sebagai berikut.

Pada gambar, dapat dilihat bahwa kita melakukan import beberapa library element yaitu Text dan View dari react-native yang kita gunakan sebagai element untuk menampilkan view dan text. Pada element - element tersebut juga kita menambahkan sedikit styling seperti terlihat pada line 12 hingga line 27. Pada bagian tersebut kita mendeklarasikan sebuah "const" dengan nama "styles" yang berisikan style untuk Text element dengan nama "textStyle", dan style untuk View element dengan nama "viewStyle". Lalu pada line 28 yaitu bagaimana agar file component ini bisa di import dari file component yang lainnya.

Pada component ini kita juga menggunakan "props". Sebagian besar component dapat disesuaikan saat dibuat dengan parameter berbeda. Nah, parameter untuk pembuatan ini yang disebut dengan props. Untuk lebih jelasnya buka file "App.js" lalu ubah code yang sudah ada sebelumnya dengan code seperti berikut.

Setelah anda tambahkan code sperti pada gambar, dapat anda lihat pada bagian yang ditandai dengan kotak berwarna merah. Disitulah penggunaan props pada component header.js tadi, dimana kita mengirimkan parameter "headerText" yang berisi string dengan value "Album". Agar lebih jelas, buka comand prompt ataupun terminal anda dan alihkan active directory pada "first-project" dan ketik perintah " expo start ". Sembari menunggu, buka expo client pada mobile device anda dan scan QR Code yang muncul pada jendela command prompt anda.

Pada mobile device anda akan tampil tampilan seperti berikut.

 

Agar lebih paham penggunaan props, anda dapat mengganti - ganti element yang dibuat pada component header.js maupun app.js lalu reload kembali aplikasi pada mobile device anda. Sebagai tips, untuk melakukan reload pada aplikasi di mobil device anda, anda cukup mengguncangkan mobile device anda dan pilih pilihan reload. Saya sarankan pula untuk mematikan fitur reload otomatis agar log dari pembuatan aplikasi anda dapat anda pantau berkala.

Baiklah, untuk selanjutnya kita akan melakukan installasi axios pada aplikasi yang kita buat karena kedepannya kita akan menggunakan axios untuk melakukan retrieve data dri API yang akan kita gunakan nanti.

Tetap pada comand prompt anda, namun hentikan dulu proses expo yang sedang berjalan dan pastikan active directory masih pada "first-project" lalu ketik perintah "npm install --save axios". Sebagai tips, perhatikan penggunaan character dan space seperti yang saya contohkan.

Sembari menunggu, anda dapat melakukan endpoint test terlebih dahulu dari API yang akan kita gunakan. Bila anda sudah mengikuti article saya sebelumnya, saya sudah membagikan cara bagaimana melakukan end point test menggunakan Postman. Bila anda belum mengikuti anda dapat melihatnya disini . Baiklah, buka aplikasi Postman anda atau aplikasi apa saja yang dapat anda lakukan untuk melakukan end point test dan masukan API link berikut : https://rallycoding.herokuapp.com/api/music_albums

 dan dapat anda lihat data yang kita dapatkan seperti berikut.

Kira - kira seperti itulah data dri API link yang akan kita manipulasi nanti. Pada article kali ini kita sudah melakukan pembuatan component dan menggunakan props serta melakukan isntallasi axios dan melakukan end point test. Selanjutnya pembuatan simple example mobile app ini akan saya lanjutkan pada article selanjutnya. Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.