FSD 106 - Advanced Mobile Programming

Module 1.1 – Introduction

Dalam pengembangan suatu mobile apps dengan operasi sistem Android dan iOS
memiliki bahasa programnya sendiri sendiri. Sehingga dalam pembuatannya memerlukan
setidaknya dua bahasa untuk dapat menguasai program antar sistem tersebut

Untuk pengembangan android membutuhkan bahasa tertentu seperti java dan ataupun
javascript. Java memang dikhususkan untuk membuat sebuah aplikasi simpel dengan sistem
operasi android, sedangkan javascript dapat menggabungkan kedua operasi sistem tetapi
membutuhkan resource yang banyak karena kedua operasi sistem tersebut membutuhkan syntax
dan tampilan yang berbeda

Sedangkan pengembangan iOS membutuhkan bahasa Swift atau Objective C. Sama

seperti android, kedua bahasa tersebut tidak memungkinkan untuk dapat dikembangkan dalam
satu program untuk kedua operasi sistem. Bahasa Swift dan Objective C dikhususkan untuk
mengembangkan aplikasi android berbasis iOS dan memang terbukti dapat menghasilkan
aplikasi yang dapat bekerja dengan baik di kedua bahasa tersebut

Dalam hal ini, akan mempelajari bagaimana mengembangkan sebuah aplikasi yang dapat
digunakan dalam kedua operasi sistem, dari Android maupun iOS. Dari bahasanya terdapat
flutter, kotlin, React Native, Xamarin, Swiftic, Ionic, dan lain lain. Dari berbagai framework
yang sudah disebutkan, framework itu sendiri adalah sebuah sebuah program yang
dikembangkan menggunakan bahasa dasarnya, salah satunya dari flutter dari bahasa java
dikembangkan menjadi sebuah framework, yaitu React Native

Penggunaan React Native merupakan bahasa Javascript dengan library dari React sebagai
pendukung pembuatan sebuah fungsi interaktif dan juga handle API dengan hanya menggunakan
sebuah Javascript, sedangkan Native ini merupakan sebuah komponen yang dapat digunakan
khusus untuk mengembangkan tampilan android dan iOS. React Native itu sendiri dibuat oleh
facebook dan sejak 2015 sudah berkembang menjadi lebih baik
 Untuk tools yang dapat digunakan dapat menggunakan Visual Studio Code sebagai
landasan pembuatan program berbasis Native tersebut. Kemudian, terdapat node.js sebagai tools
pendukung untuk membuat sebuah project dengan framework react
 Module 1.2 – Setup Environment

Quiz (Reminder Previous Module) :

1. Bahasa apa saja yang digunakan untuk mengembangkan dengan operasi sistem Android?
2. Apakah betul Visual Studio Code digunakan untuk menuliskan program kita dalam
pengembangan menggunakan React Native?
3. React Native merupakan ?
4. Apa perbedaan dari penggunaan framework salah satunya React Native dengan bahasa
pemrograman seperti Java, Swift?

Untuk membuat sebuah project React Native membutuhkan beberapa tahapan, pertama tama kita
perlu untuk menyiapkan tools nya terlebih dahulu

 Node.js (https://nodejs.org/en/)
 Visual Studio Code (https://code.visualstudio.com/download)
 Emulator:
- Google Chrome (Updated Version)
- NoxPlayer Emulator (https://id.bignox.com/)
- Android Studio (https://developer.android.com/studio?hl=id)
 Setelah melakukan instalasi dari tools di atas, langkah selanjutnya adalah menginisiasi
project dengan framework React Native. Di komputer lokal membuat project kosongandengan
caranya:

Pilih tempat kosong di komputer atau buat folder baru -> Buka Command Prompt pada
directory tersebut -> Ketik "npx create-expo-app NamaProjectBebas" -> Tunggu hingga
selesai

Document : https://reactnative.dev/docs/environment-setup
(Dapat menggunakan React Native CLI Quick Start, dengan tambahan harus menginstall
beberapa package lagi sesuai dokumentasinya)

Langkah selanjutnya adalah menginstalasi emulator sesuai dengan pilihan yang sesuai dengan
komputer lokal

1. Web Emulator (Disarankan Google Chrome)

- Pada visual studio code, lebih tepatnya terminal-nya ketik "npm start" atau "yarn start" atau
 "expo start"
- Tunggu beberapa saat, dan akan muncul menu baru yang dapat kalian pilih salah satunya
website, ketik "w"
- Setelah itu, pada terminal akan menginstall beberapa komponen untuk pertama kali, dan
aplikasi yang dibuat akan tampil pada website

2. NoxPlayer Emulator (Dari berbagai emulator, disarankan NoxPlayer)

- Buka NoxPlayer, sebelum masuk aplikasi... konfigurasi NoxPlayer terlebih dahulu

dengan klik icon setting
- Ikuti arahan gambar di bawah ini

- Pilih perangkatnya dari "Tablet" menjadi "Telepon" atau "Phone"

Untuk resolusi ataupun settingan lain dibebaskan, pada gambar adalah settingan low
graphic
- Pilih "Boot Root" atau "Root", kemudian pilih "Simpan perubahan" atau "Save Change:
Lakukan restart pada aplikasi apabila diperlukan
- Selanjutnya, masih pada NoxPlayer sekarang masuk aplikasinya pilih "Setting" (ada di
folder "Tools")
- Langsung ke bagian paling bawah sampai ketemu "About Tablet" atau "Tentang
Tablet", diklik
- Sama seperti tahapan sebelumnya, paling bawah tapi ini diklik terus sampai muncul teks
"Anda sudah menjadi developer" atau "You already developer"
- Kembali 1x atau back 1x, Paling bawah ada option "Opsi Developer" atau "Developer
Option" diklik
- Scroll dikit ke bawah, akan ada option "Debugging USB" silahkan dinyalakan atau
diaktifkan
- Pencet Home

- Selanjutnya, kita buka folder random dan buka folder NoxPlayer kalian
Contoh: D:\program files\Nox\bin
- Setelah itu buka Command Prompt dan ketik "nox_adb.exe connect 127.0.0.1:62001"
- Jika berhasil, langsung ke visual studio code dan ke project-nya langsung dijalankan
saja
- "npm start" tunggu beberapa saat dan akan muncul berbagai menu, ketik "a" untuk
emulator android
 - terminal akan menginstall beberapa komponen dan NoxPlayer jangan ditutup
- Tunggu hingga selesai

3. Android Studio
- Buka folder SDK android studio, apabila tidak tahu silahkan ikutin tahapan berikut:
Buka Android Studio -> Pilih opsi "Projects" -> Pilih icon tiga garis atau titik atau
"more" -> Pilih "SDK Manager". Silahkan Copy directory path tersebut
- Contoh path SDK Manager aku : C:\Users\xxx\AppData\Local\Android\Sdk\
- Masuk ke folder "emulator" dan buka Command Prompt dari directory tersebut
- Ketik "emulator -list-avds", akan muncul beberapa nama perangkat device
- Silahkan pilih salah satu dan ketik lagi di Command Prompt "emulator -avd
Pixel_3a_30API" sesuaikan dengan nama perangkat device emulator yang ada pada
komputer kalian
- Kembali ke visual studio code, ke terminal ketik "npm start" atau "yarn start"
- Kemudian, buka lagi terminal baru dan ketik "npm android" atau "yarn android"
- Akan terjadi fail atau error, maka dari itu kalian perlu membuat file pada root folder
project
- Buat file "local.properties" dan isinya "sdk.dir = ..\..\..\Users\xxx\AppData\Local\
Android\Sdk\ " (diisikan sesuai dengan directory path project kalian ke SDK Android
Studio
- Setelah itu jalankan kembali npm/yarn android, tunggu hingga instalasi selesai
 Module 2.1 – Basic Coding (Introduction)

Quiz (Reminder Previous Module) :

1. Untuk melakukan inisiasi project React Native ke komputer lokal menggunakan tools
apa?
2. Perintah yang digunakan untuk nomor soal satu, menggunakan perintah apa pada
command prompt / terminal?
3. Sebutkan emulator apa saja yang dapat digunakan untuk melihat hasil dari project React
Native yang dibuat ?
4. Apakah benar, penggunaan kodingan React Native hanya menggunakan Javascript?

Tampilan project React Native akan tampak seperti berikut, sama seperti dengan
pemrograman website, disini akan terlihat ada beberapa penggunaan bahasa yang sama dengan
html, css, dan juga javascript tentunya

Dalam membuat sebuah project React Native, dibagi menjadi beberapa bagian utama
dalam penulisannya, bagian bagian ini perlu diingat karena akan menjadi pacuan utama dan
fondasi utama dalam membuat sebuah file berbentuk .js atau tipe file javascript
Document : https://reactnative.dev/docs/getting-started
 Yang pertama adalah bagian import, import digunakan untuk mengambil resource,
component, library, ataupun dijadikan sebuah parameter untuk menerima nilai dari file lainnya
Document: https://reactjs.org/docs/code-splitting.html

Yang kedua adalah eksekusi perintah, barisan ini biasanya terdapat sebuah class dan
function dimana semua interaksi terjadi sepenuhnya di dalam bagian tersebut. Pastikan untuk
menuliskan “export default …” sebagai acuan barisan yang dijalankan pertama kali ketika
project dijalankan
Document: https://reactjs.org/docs/rendering-elements.html

Dan yang terakhir adalah bagian styling, apabila dalam pemrograman website kita
dibiasakan untuk styling di luar file bertipe .html. Disini kita akan menggunakan styling di dalam
file .js tersebut. Kenapa? Karena di react ini memang dikhususkan untuk menggunakan bahasa
yang semuanya itu javascript tanpa ada html ataupun css
Document: https://reactjs.org/docs/faq-styling.html
 Pertama tama kita perlu mengenal yang namanya JSX, yaitu ekstensi React untuk sintaks
bahasa Javscript yang menyediakan penggunanya untuk menuliskan semua bahasa yang
dibutuhkan dalam mengembangkan program dari html, css, dan javascript itu sendiri menjadi
satu bahasa, JavaScript Syntax Extension
Document: https://reactjs.org/docs/introducing-jsx.html

Penggunaan sebuah variabel dalam React Native sedikit berbeda dengan javascript
biasanya. Disini akan menggunakan sebuah variabel yang dapat menampung dan juga
mengupdate sekaligus di dalamnya, dalam react ini disebut sebagai useState. useState bisa
digunakan untuk menampung data primitive, array, object, array of object, maupun web storage.
Untuk penggunaannya seperti pada gambar (Live Coding)
Document: https://reactjs.org/docs/state-and-lifecycle.html
 Penggunaan component yang dimaksud adalah mengambil komponen yang sudah
disediakan dari dari library React Native dan dijadikan sebuah satu paket yang dapat digunakan
langsung sehingga dinamakna menjadi sebuah component. Komponen React Native terdapat
banyak, mulai dari yang sering digunakan <View>, <TextInput>, <StyleSheet>,<Button>, dan
lain lain (Live Coding)
Document: https://reactnative.dev/docs/components-and-apis
 Module 2.2 Basic Coding II (Function & React)

Penggunaan sebuah data pada sebuah aplikasi yang menggunakan React Native biasanya
berupa Array, Object, Array of Object, dan lain lain. Semua data tersebut dapat dibuat dalam file
tipe javascript ataupun membuatnya dalam bentuk .json. Object dapat menyimpan berbagai tipe
data dan juga sebuah method dalam fungsi object tersebut (Live Coding)
Document: https://reactjs.org/docs/lists-and-keys.html

Membuat sebuah Guest List atau Todo List sebagai patokan dalam membuat project
React Native, menggunakan kombinasi dari konsep tipe data, dan juga useState disertai dengan
styling yang sudah dikembangkan menjadi lebih bagus dan responsive
 Penggunaan styling di dalam satu file project React Native

Penggunaan sebuah useState untuk mengubah data pada Guest List / Todo List menjadi
realtime dan dapat dimodifikasi
 Hasil akhirnya akan dapat terlihat terdapat berbagai list yang dapat dilihat lagi sampai
dengan bawah bawahnya sesuai dengan panjang dari list yang sudah dibuat
 Module 3.1 – Advance Coding I (Component)

Penggunaan komponen dengan kondisi tertentu pada React Native, pada beberapa
komponen di React Native terdapat komponen yang memerlukan data tertentu untuk dapat
menggunakannya. Salah satunya pada kompponen <FlatList> (Live Coding)

Penggunaan styling dengan menerapkan flexbox agar konten dapat mengikuti dari ukuran
display setiap handphone yang digunakan, mulai dari ukuran yang kecil, hingga panjang (Live
Coding)
 Penggunaan library react yang menyediakan berbagai komponen yang sudah siap
digunakan seperti sebuah Icon. Icon berguna dalam memasukkan sebuah gambar simpel ke
dalam project React Native tanpa perlu download dari google
Document: https://react-icons.github.io/react-icons/
 Penggunaan React library dalam penerapan memanggil sebuah page lain di dalam
project yang sedang dibuat. Pemanggilan ini sudah dibuat di dalam React dan dalam
penerapannya cukup membuat sebuah file baru di dalam folder lainnya dan memanggilnya
dengan membuat sebuah <import> di dalam file utama (Live Coding)
Document: https://reactrouter.com/en/main
 Module 3.2 Advance Coding II (Navigation & API)

Bagaimana apabila dalam membuat halaman mobile ingin dibuatkan sebuah halaman
lainnya? Caranya adalah menggunakan React Navigation. React Navigation merupakan sebuah
komponen yang khusus untuk mengatur jalannya routing untuk mobile apps dan juga web
development dalam mengatur halaman per halamannya

Dan apabila melihat dari halaman handphone, pastinya ketika pengguna klik halaman
lain, dia akan menuju ke halaman baru dan apabila ingin kembali ke halaman sebelumnya dapat
menggunakan tombol “back”. Nah, inilah yang dibuat dari React Navigation sehingga dapat
langsung digunakan
 Langkah yang pertama adalah melakukan instalasi React Navigation pada project React
Native agar nantinya dapat menggunakan berbagai komponen yang telah disediakan dari
Navigation tersebut
 Sebelum masuk ke dalam bagian Navigation, diperlukan sebuah database secara online
yang dapat digunakan seperti aslinya. Database ini disediakan oleh Google.inc yang ditujukan
untuk mendevelop sebuah aplikasi tanpa perlu mementingkan bagian back-end. Aplikasi tersebut
bernama Firebase.

Langkah langkah setup Firebase ke dalam project sangat mudah, cukup dengan membuat
sebuah database terlebih dahulu di website Firebase
 Setelah itu, melakukan instalasi ke dalam project React Native sebelumnya untuk dapat
menggunakan berbagai fitur Firebase yang sudah dibuat

Firebase sudah terinstall, langkah selanjutnya melakukan config pada project React
Native. Beberapa API Key dapat disalin melalui website Firebase yang terdapat pada akun
masing masing, sesuaikan key agar dapat tersambung ke Firebase sebelumnya
 Penggunaan React Navigation pada project Todo List / Guest List dengan menggunakan
komponen dari Navigation dapat dengan mudah dalam mengarahkan aplikasi utama ke halaman
lainnya tanpa perlu membuat sebuah function baru untuk route ke halaman lain

Pengguna useEffect untuk menangkap dan menyambungkan data dari Firebase yang
sudah dibuat ke dalam project yang dibuat, disini menggunakan ForEach karena data yang
disimpan memiliki tipe Array
Document: https://firebase.google.com/docs/firestore
 Membuat JSX untuk menaruh data yang ditangkap sebelumnya menggunakan useEffect
agar dapat ditampilkan pada tampilan mobile

Membuat styling agar sesuai dengan tampilan baru yang sudah responsive dan
diperbagus
 Penggunaan method .then & .catch sebagai fungsi apabila ketika mengambil sebuah data
dari API tidak gagal dan tidak memunculkan error yang muncul pada pengguna, maka
menggunakan .catch sebagai handling untuk mengalihkan error tersebut menampilkan apa yang
diinginkan

Hasil yang diharapkan ketika berhasil membuat project React Native dari Live Coding
adalah sebagai berikut dengan React Navigation dan Firebase berhasil dijalankan dan terhubung
ke server melalui akun masing masing