modul perkuliahan mobile programming · project yang dibuat bernama myproject dan akan terbentuk...
TRANSCRIPT
1
MODUL PERKULIAHAN
MOBILE
PROGRAMMING Dasar Membangun Aplikasi Mobile Dengan Menggunakan React Native & Firebase Disusun oleh:
Meriska Defriani, S.Komp, M.Kom – 0416129004
TEKNIK INFORMATIKA STT WASTUKANCANA PURWAKARTA
2020
1
DAFTAR ISI
OVERVIEW .................................................................................................................... 3
Mengapa Harus Mempelajari Pemrograman Mobile Android? .................................. 3
Bahasa Pemrograman Untuk Pemrograman Mobile .................................................. 3
REACT NATIVE ............................................................................................................... 7
React Native? ............................................................................................................ 7
Instalasi dan Menjalankan React Native .................................................................... 9
EXPO SNACK ............................................................................................................... 13
GET STARTED! ............................................................................................................. 18
Struktur Kode .......................................................................................................... 18
Komponen ............................................................................................................... 18
Prop ........................................................................................................................ 19
State ........................................................................................................................ 19
Kapan saat yang tepat untuk menggunakan props atau state? ................................ 21
Latihan 1 ................................................................................................................. 21
STYLING ...................................................................................................................... 22
View ........................................................................................................................ 22
Text ......................................................................................................................... 22
Styling ..................................................................................................................... 22
HEIGHT AND WIDTH ................................................................................................... 24
Dimensi Flex ............................................................................................................ 24
LAYOUTING ................................................................................................................. 26
Flex Direction .......................................................................................................... 26
Latihan 2 ................................................................................................................. 29
TUGAS 1 ...................................................................................................................... 30
MAKE SOMETHING INTERESTING ................................................................................ 32
Image ...................................................................................................................... 32
Text Input ................................................................................................................ 32
Alert ........................................................................................................................ 34
Touchable Oppacity ................................................................................................. 34
Latihan 3 ................................................................................................................. 35
2
Tugas 2 ....................................................................................................................... 36
GO FURTHER ............................................................................................................... 37
Scroll View............................................................................................................... 37
List View .................................................................................................................. 37
Switch & Picker ....................................................................................................... 38
NAVIGATION ............................................................................................................... 41
Navigation Using Button .......................................................................................... 41
Navigation Using Tab ............................................................................................... 44
FIREBASE..................................................................................................................... 47
READ, UPDATE, DELETE IN FIREBASE VIA REACT NATIVE ............................................. 53
BUILD AN APK FILE ...................................................................................................... 64
MAKE YOUR OWN PROJECT ........................................................................................ 65
3
OVERVIEW
Mengapa Harus Mempelajari Pemrograman Mobile Android?
Seiring berkembangnya sistem operasi Android, jumlah pengguna perangkat mobile
yang menggunakan sistem operasi Andoid pun meningkat. Hal tersebut berpengaruh
pada varian dan jumlah aplikasi yang dapat ditawarkan oleh perangkat mobile
bersistem operasi android kepada penggunanya. Semakin banyak penggunanya,
semakin banyak varian dan jumlah aplikasi yang dapat ditawarkan. Hal tersebut
menandakan bahwa peluang untuk bekerja menjadi android developer ataupun
membangun start up sendiri, menjadi lebih besar.
Seseorang yang sebelumnya sudah memiliki dasar kemampuan pemrograman yang
kuat tidak akan kesulitan untuk mempelajari pemrograman mobile. Pada dasarnya
alur berpikir untuk menyelesaikan suatu permasalahan pemrograman adalah sama,
yang membedakan adalah cara penulisan sintaks dari bahasa pemrogramannya.
Untuk mempelajari pemrograman mobile android, pengguna tidak perlu mengeluarkan
banyak modal seperti membeli lisensi karena tools, platforms, dan frameworks yang
dapat digunakan untuk membangun aplikasi mobile android sangatlah banyak dan
tidak berbayar.
Bahasa Pemrograman Untuk Pemrograman Mobile
Ada banyak bahasa pemrograman yang dapat digunakan untuk membangun aplikasi
mobile. Berikut ini adalah berapa contoh bahasa pemrograman tersebut:
1. Android
a. Java
Menurut TIOBE Index pada bulan Juni 2017, Java merupakan bahasa
pemrograman paling populer. Java merupakan pilihan terbaik jika ingin
membuat aplikasi Android. Java memiliki komunitas yang sangat besar, baik di
Indonesia maupun di dunia. Dengan adanya komunitas yang besar tersebut,
kamu aplikasi tidak akan kesulitan untuk mencari jawaban saat menemukan
kesulitan dalam kamuan aplikasi android.
4
b. Kotlin
Kotlin merupakan bahasa yang didesain dan dikembangkan oleh JetBrains,
perusahaan asal Ceko yang mengembangkan berbagai IDE populer seperti
IntelliJ IDEA, PyCharm, RubyMine, dan PhpStorm. Bahkan Android Studio yang
dipakai setiap programmer Android professional merupakan IDE yang
dikembangkan di atas IDEA. Pada bulan Mei 2017 di event Google I/O 2017, tim
Android Google secara resmi mengumumkan dukungan penuh untuk bahasa
pemrograman Kotlin untuk membuat aplikasi Android.
Kotlin dikembangkan untuk mengatasi kekurangan-kekurangan yang dimiliki
oleh Java. Selain itu, salah satu fitur paling penting dari Kotlin adalah bahasa ini
dapat dipakai bersamaan dengan Java dalam satu aplikasi yang sama.
2. iOS
a. Swift
Jika ingin mengembangkan aplikasi untuk iOS, sistem operasi untuk iPhone dan
iPad, maka Swift merupakan opsi yang terbaik untuk dipilih. Bahasa ini
diperkenalkan pada tahun 2014 dan dirilis source code-nya pada tahun 2015.
Swift sangat populer diantara developer iOS terutama untuk startup.
Apple telah menambahkan fitur-fitur yang lebih baik ke bahasa pemrograman
ini, seperti sintaks yang sederhana dan pemberitahuan mengenai penyebab
kesalahan (error) yang terjadi.
b. Objective-C
Objective-C merupakan bahasa yang dipakai untuk iOS sebelum adanya bahasa
pemrograman Swift. Meski Swift sudah hampir mengambil alih sebagai bahasa
utama pemrogramaan iOS, namun masih banyak proyek iOS yang bergantung
pada kode-kode Objective-C. Oleh karena itu, transisi dari Objective-C ke Swift
akan berlangsung agak lambat dan mungkin kamu akan butuh kedua bahasa
untuk beberapa proyek aplikasi.
3. Cross Platform
a. JavaScript
JavaScript merupakan bahasa pemrograman yang sangat populer dikalangan
web developer dan juga menjadi salah satu bahasa yang dapat dipakai untuk
membuat aplikasi mobile. Framework JavaScript yang paling populer untuk
membuat aplikasi mobile adalah Ionic 2 dan React Native. Dengan
5
menggunakan salah satu dari framework tersebut, kamu dapat
mempublikasikan aplikasinya untuk dapat dijalankan di iOS dan Android dari
satu sumber yang sama.
b. TypeScript
TypeScript adalah superset dari JavaScript yang menawarkan keamanan lebih
lewat opsi static typing. Bahasa ini memberikan dukungan yang lebih baik
untuk menulis aplikasi berskala besar. TypeScript memungkinkan developer
menulis aplikasi mobile cross platform menggunakan frameowrk seperti
NativeScript.
c. C#
C# adalah bahasa pemrograman untuk Windows Mobile. Sintaksnya sangat
mirip dengan C++ dan Java. Microsoft, kamunya, mengadopsi beberapa fitur
Java untuk menyederhanakan arsitektur C# sambil menjaga desain tetap mirip
dengan C++. C# juga memiliki komunitas yang cukup besar dan aktif pada
masanya.
d. C
Sebagai salah satu bahasa paling populer menurut indeks TIOBE, sama seperti
Java, bahasa C memiliki komunitas developer yang berpengalaman. Bahasa C
dapat dipakai untuk membuat aplikasi mobile dengan Android NDK (Native
Development Kit).
e. C++
Kamu yang familiar dengan bahasa pemrograman C, maka besar kemungkinan
akan suka menulis dan membaca kode C++. C++ adalah kamuan dari bahasa C
yang menambahkan fitur high-level dan dukungan untuk pemrograman
berorientasi objek. C++ juga menjadi bahasa favorit developer Android NDK
juga bahasa yang dipakai untuk mengembangkan aplikasi Tizen juga Windows
Mobile.
f. Python
Python adalah bahasa pemrograman yang populer karena mudah dipelajari dan
juga memungkinkan untuk membangun aplikasi mobile. Jika kamu sudah
terbiasa menulis kode Python, framework Kivy menjadi pilihan untuk
mengembangkan aplikasi mobile.
6
g. Ruby
Bahasa pemrograman Ruby juga bisa dipakai untuk membangun aplikasi
mobile. RubyMotion merupakan framework dari bahasa pemrograman Ruby
yang sangat baik untuk membuat aplikasi mobile yang native dan cross
platform.
(Sumber: www.codepolitan.com)
7
REACT NATIVE
React Native?
React Native adalah sebuah framework javascript yang dikembang kan oleh facebook.
React Native memungkinkan kamu untuk membuat aplikasi mobile android atau ios
menggunakan teknologi web. Banyak framework javascript yang bisa digunakan untuk
membuat aplikasi android atau ios, akan tetapi React Native ini berbeda dengan
framework-framework javascript yang lainya. React Native tidak membuat aplikasi
hybrid dimana aplikasi berjalan di javascript runtime tetapi membuat real aplikasi
dimana untuk android akan di compile di java dan untuk IOS akan di compile di
Objective-C.
Dalam React Native terdapat beberapa kompenen yang membuat React Native dapat
digunakan untuk membuat aplikasi mobile cross-platform. Berikut ini adalah beberapa
fitur dari React Native:
1. ReactJS
Sebelum React Native dikeluarkan oleh facebook, framework yang pertama dikenal
adalah ReactJS, yaitu framework javascript yang bisa digunakan untuk membuat
aplikasi web dengan java script.
2. Native
Android dan IOS memiliki arsitektur yang berbeda, fitur native inilah yang berfungsi
untuk mengatur komponen dari masing - masing platform.
3. Platform
Untuk saat ini platform yang telah terintegrasi dengan react native adalah Android
dan IOS.
Berikut ini adalah kelebihan dari penggunaan React Native:
1. JavaSript
JavaScript adalah salah satu bahasa pemrogramman yang paling banyak digunakan
oleh developer di dunia. Hal tersebut menandakan bahwa kamu akan sangat
mudah untuk mempelajari JavaScript karna komunitas yang besar dan kemudahan
mencari tempat bertanya ketika mengalami kebingunan saat membangun aplikasi.
Namun jika kamu sudah berpengalaman dengan web development tentunya sudah
8
akrab dengan javascript dan sudah memiliki dasar untuk mulai membuat aplikasi
dengan react native.
2. Code Sharing
Sebagian codebase yang ditulis dapat digunakan untuk platform yang berbeda,
yaitu android dan ios.
3. Community
React Native memiliki cukup banyak peminat dari kalangan developer di dunia.
Berikut ini adalah screenshoot dari repository react native:
Selain memiliki kelebihan, React Native sendiri juga memiliki kelemahan. Berikut ini
adalah beberapa kelemahan dari react native:
1. Components
Untuk mengembangkan aplikasi mobile dengan react native, kamu harus banyak
memahami komponen dari masing-masing platform. Android dan iOS memiliki
arsitektur yang berbeda sehingga komponen dari kedua platform tersebut juga
berbeda. Namun, ketersediaan komponen untuk kedua platform tersebut masih
terbatas sehingga jika kamu ingin menggunakan komponen yang belum tersedia maka
kamu harus membuat komponen itu sendiri.
2. JavaScript
React native menggynakan bahasa pemrograman java script, namun perkembangan
java script tidak begitu cepat sehingga perubahan atau penyesuaian tidak dapat
dilakukan dengan cepat.
3. Framework
Framework React Native berubah dan berkembang sangat cepat sehingga ketika kamu
memperbarui react native ke versi yang baru terkadang terdapat beberapa fungsi dari
versi lama yang tidak dapat digunakan.
9
4. Platform
Untuk kamu yang ingin mengembangkan react native untuk ios maka akan lebih baik
dan maksimal jika menggunakan macbook karena ekosistem dari ios seluruhnya harus
menggunakan produk dari Apple. Sedangkan untuk android, kamu membutuhkan java
dan gradle dimana dua hal ini yang menjadi issue dikalangan developer karena
kebutuhan spesifikasi perangkat yang cukup tinggi, yaitu perangkat memori minimal
4gb untuk bisa bekerja maksimal. Jadi, salah satu tantangan di kamuan aplikasi mobile
ialah kebutuhan perangkat yang memadai.
(Sumber: www.codepolitan.com)
Instalasi dan Menjalankan React Native
Kamu dapat membangun aplikasi mobile dengan menggunakan react native dengan
beberapa cara. Berikut ini adalah cara instalasi dari react native:
1. Expo CLI
Cara yang pertama adalah dengan menggunakan Expo CLI. Sebelum melakukan
instalasi Expo CLI, kamu harus melakukan instalasi NodeJS (minimal Node 10 LTS).
Setelah itu, kamu dapat melakukan instalasi Expo CLI melalui npm dengan perintah di
bawah ini (instalasi melalui command prompt):
npm install –g expo-cli
Pastikan koneksi internet stabil sehingga proses instalasi dapat terselesaikan dengan
baik. Harap bersabar karena proses instalasi ini berlangsung cukup lama (tergantung
kecepatan internet yang digunakan). Gambar berikut ini merupakan contoh ketika
expo cli telah berhasil diinstalkan:
10
Jika proses instalasi telah selesai, maka untuk menjalankan react native kamu perlu
membuat projectnya terlebih dahulu. Pembuatan project dapat dilakukan dengan
menggunakan perintah di bawah ini:
expo init myproject
Project yang dibuat bernama myproject dan akan terbentuk sebuah folder dengan
nama yang sama, tempat dimana seluruh library dan file yang berkaitan dengan
project akan disimpan. Pada saat pembuatan project, kamu akan diminta untuk
memilih template dari project yang akan dibuat. Terdapat dua pilihan template, yaitu
blank dan tabs. Jika memilih template blank, maka project yang dibuat akan
menjalankan aplikasi yang kosong. Sedangkan jika memilih template tabs, maka
project akan menjalankan aplikasi yang sudah tersedia tabs sebagai navigasi dalam
aplikasi.
Setelah berhasil membuat project, pengguna dapat mencoba untuk menjalankan
project-nya dengan menggunakan perintah di bawah ini. Namun jangan lupa untuk
masuk terlebih dahulu ke direktori project.
cd myproject
npm start #atau juga dapat menggunakan perintah expo start
Jika proses running telah berhasil maka pada workspace command prompt akan
muncul QR Code seperti di bawah ini:
11
Expo CLI menggunakan smartphone pengguna sebagai emulatornya. Pengguna harus
menginstal Expo Client pada smartphone-nya dan mengoneksikan smartphone dan
komputer ke jaringan yang sama. Untuk yang menggunkan laptop dapat menggunakan
jaringan yang di tethering melalui hotspot smartphone-nya. Agar aplikasi dapat
dijalankan di perangkat smartphone, kamu dapat memindai QR Code melalui Expo
Client atau jika kamu sudah melakukan registrasi dan sign in ke akun Expo Client maka
project akan otomatis muncul pada bagian recently in development. Berikut ini adalah
tampilan aplikasi yang telah berhasil berjalan di Expo Client:
Pengunaan Expo CLI dalam pembuatan aplikasi memiliki kelebihan dan kekurangan.
Kelebihan Expo CLI diantaranya adalah instalasinya lebih sederhana dan mudah, tidak
membutuhkan banyak dependencies, dan dapat menggunakan perangkat smartphone
sebagai emulator sehingga tidak perlu menginstal gradle. Namun, kekurangannya
adalah perlu melakukan instalasi komponen tertentu ketika akan digunakan, seperti
navigasi.
2. React Native CLI
Cara yang kedua adalah dengan menggunakan React Native CLI. Namun, instalasi
untuk React Native CLI lebih rumit dibandingkan dengan Expo CLI sehingga untuk kamu
pemula akan lebih baik menggunakan Expo CLI terlebih dahulu. Untuk melakukan
instalasi React Native CLI, kamu harus melakukan instalasi NodeJS, Python2, dan JDK
terlebih dahulu. Instalasi dapat dilakukan melalui Chocolatey yang merupakan package
12
manager untuk Windows. Untuk menjalankan aplikasi yang dibangun dengan React
Native CLI, pengguna perlu melakukan instalasi Android SDK yang dapat diinstal
melalui Android Studio. Setelah itu pastikan untuk melakukan konfigurasi
environtment variable ANDROID_HOME dan menambahkan platform-tools pada path
windows. Aplikasi dapat dijalankan di perangkat smartphone kamu dengan
menghubungkan smartphone dan computer dengan kabel data atau dijalankan di
virtual device.
Keterangan lebih lengkap mengenai instalasi dan menjalankan aplikasi dengan React
Native CLI dapat dilihat pada situs web https://facebook.github.io/react-
native/docs/getting-started.html.
3. Expo Snack
Expo Snack dapat menjadi pilihan untuk membangun aplikasi android. Kamu dapat
mengunjungi situs https://snack.expo.io. Untuk dapat membangun dan menjalankan
aplikasi yang dibuat, perangkat komputer dan smartphone harus memiliki koneksi
internet. Aplikasi dapat dijalankan pada emulator yang disediakan oleh website
tersebut atau juga dijalankan pada Expo Client kamu. Berikut ini adalah tampilan
workspace dari Expo Snack:
Kelebihan menggunakan Expo Snack adalah kamu tidak perlu melakukan instalasi
apapun terkait dengan react native dan aplikasi dapat juga dijalankan pada web
browser. Namun, kelemahannya, kamu membutuhkan koneksi internet untuk dapat
membangun aplikasi dan aplikasi yang dibangun tidak dapat dibundle menjadi file apk.
(Pembuatan file apk hanya dapat dilakukan melalui Expo CLI dan React Native CLI).
13
EXPO SNACK
Pada bagian ini akan dibahas mengenai workspace dari Expo Snack karena selama
pembelajaran akan lebih sering menggunakan Expo Snack. Berikut ini adalah
pembahasan fitur-fitur dari Expo Snack:
Pada bagian kiri atas, terdapat nama project yang biasanya diambil dari nama-nama
snack. Nama project ini dapat diubah dengan melakukan klik pada tulisan nama
prokject-nya. Jika kamu telah melakukan registrasi akun di Expo tapi belum log in,
kamu dapat melakukan log in melalui link ‘log in’ yang ada di bawah nama project.
Untuk dapat menyimpan project yang sedang dikembangkan, kamu harus melakukan
log in. Di bagian samping kanan nama project terdapat symbol (i) yang jika diklik akan
menampilkan informasi mengenai project yang dibuat. Jika kamu belum menuliskan
deskripsinya, maka kamu dapat mengubahnya pada menu edit details.
Pada bagian kanan atas terdapat fitur untuk melakukan pencarian project yang
sebelumnya sudah pernah dibuat oleh kamu yang lain. Kemudian disampingnya
merupakan fitur untuk menjalankan project yang sedang aktif di workspace. Project
dijalankan pada perangkat pengguna sehingga pengguna akan diminta untuk
melakukan log in seperti gambar tampilan pop up di bawah ini:
14
Untuk dapat menjalankan aplikasi ke perangkat kamu melalui Expo Snack, selain
dengan melakukan log in, kamu juga dapat memasukan nomor Device ID seperti
gambar tampilan pop up di bawah ini:
Nomor Device ID dapat ditemukan pada bagian bawah Tab Projects pada Expo Client
yang terinstal di perangkat smartphone kamu. Opsi lainnya adalah dengan
menggunakan QR Code seperti gambar tampilan pop up di bawah. Pengguna dapat
melakukan pemindaian QR Code melalui Expo Client yang terinstal di perangkat
smartphone kamu.
Fitur lainnya adalah Export. Kamu dapat melakukan export project yang saat ini sedang
aktif pada workspace. Kamu dapat mengunduh hasil export tersebut dalam bentuk file
15
yang telah dikompres. Hasil export tersebut kemudian bisa dijalankan dengan
menggunakan Expo CLI namun membutuhkan penyesuaian lingkungan. Untuk dapat
melakukan export project, kamu harus menyimpan project-nya terlebih dahulu.
Fitur selanjutnya adalah Embed. Kamu dapat menanamkan (embed) project yang
dibuat ke workspace lain. Fitur Embed digunakan untuk mendapatkan Embed Code.
Untuk dapat menggunakan fitur ini, kamu juga harus meyimpan project-nya terlebih
dahulu.
Disamping kanan fitur Embed, terdapat button Save yang berfungsi untuk menyimpan
project yang saat ini sedang aktif di workspace. Untuk dapat menyimpan project,
pengguna harus melakukan log in terlebih dahulu. Log in dapat dilakukan dengan
melakukan klik pada lingkaran hitam yang berada pada sisi kanan button Save.
Fitur yang selanjutnya adalah jendela project seperti gambar di bawah ini:
Pada jendela project ini, kamu dapat melihat file apa saja yang sedang terbuka pada
workspace dan file serta folder apa saja yang terdapat pada project. Kamu juga dapat
menambahkan file baru pada project dengan melakukan klik pada symbol yang
dilingkari merah. Kamu dapat menambahkan folder baru pada project dengan
melakukan klik pada symbol yang dilingkari hijau. Kamu juga dapat melakukan import
file dari perangkat computer atau git repository dengan melakukan klik pada symbol
yang dilingkari biru. Selain itu, pada symbol yang dilingkari biru juga terdapat fitur
export project.
Kamu dapat meng-copy, menggandakan (duplicate), merubah nama, dan menghapus
file atau folder dengan melakukan klik pada titik tiga di bagian kiri setiap file atau
folder yang dipilih atau juga dengan melakukan klik kanan pada file atau folder yang
dipilih.
16
Fitur lainnya adalah bagian editor, yaitu bagian yang menampilkan ini file yang sedang
dibuka. Pada bagian inilah kamu menuliskan kode-kode untuk membangun aplikasi
mobile. Dalam bagian editor, setiap baris kode diberi penomoran yang memudahkan
kamu untuk menelusuri ketika terdapat kesalahan. Gambar dibawah ini adalah
tampilan dari bagian editor pada Expo Snack:
Expo Snack juga menyediakan emulator untuk menjalankan aplikasi yang dibuat kamu.
Selain dijalankan di perangkat smartphone kamu, aplikasi juga dapat dijalankan pada
emulator ini. Terdapat tiga ops tampilan aplikasi, yaitu aplikasi disajikan dalam
tampilan perangkat iOS, Android, dan Web. Gambar di bawah ini adalah tampilan dari
emulator yang ada pada Expo Snack. Namun penggunaan emulator ini memiliki
kekurangan, yaitu ketika jumlah kamu yang sedang menggunakan Expo Snack dan
sedang menjalankan projectnya banyak, maka akan dibuat sistem antrian. Kamu harus
menunggu aplikasinya tampil sesuai urutam antrian.
17
Pada bagian kiri bawah, terdapat jendela seperti gambar di bawah. Apabila bagian
tersebut di-klik, maka akan muncul panel yang menginformasikan status error dan log
dari project yang dijalankan.
Jika terjadi kesalahan pada kode program maka tampilan workspace Expo Snack akan
menjadi seperti gambar tampilan di bawah ini:
Pada bagian kanan bawah terdapat fitur Prettier, Editor, Expo, Devices dan Preview.
Fitur-fitur tersebut seperti gambar di bawah ini:
Fitur Prettier akan membuat barisan kode program menjadi rapi dan memiliki
indentasi sehingga kamu akan lebih mudah membaca kembali kode program yang
telah ditulisanya ataupun menelusuri kesalahan pada kode program.
Fitur Editor menyediakan beberapa pilihan untuk mengatur tampilan beberapa fitur di
Expo Snack, seperti jendela file, panel error dan log, mengubah tema Expo Snack, dan
mengubah mode Vim.
Fitur Expo menyediakan beberapa pilihan versi Expo, yaitu mulai dari Expo versi 33
sampai versi 36.
Angka yang ditunjukan pada fitur Devices menunjukan ada berapa perangkat yang
terhubung dengan Expo Snack saat ini.
Fitur Preview digunakan untuk menentukan apakah kamu akan mengaktifkan elumator
pada Expo Snack atau tidak denggan cara menggeser toggle.
18
GET STARTED!
Struktur Kode
//Memuat library dari komponen-komponen yang digunakan import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; //Class komponen dimana komponen-komponen di dalam aplikasi akan ditampilkan, komponen dituliskan di dalam fungsi return export default class App extends Component<{}> { render(){ return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } } //styling pada komponen di dalam aplikasi const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, } });
Komponen
React is all about components. Komponen adalah bagian-bagian kecil dari suatu
aplikasi yang nantinya diracik menjadi sebuah aplikasi. Terdapat dua unsur penting
dalam komponen, yaitu UI (User Interface) dan Data. Tipe data dalam komponen react
ada dua, yaitu prop dan state. Komponen dapat dibangun dengan functional
component atau class component. Perbedaan kedua komponen tersebut adalah
19
functional component tidak memiliki state, sedangkan class component bisa memiliki
prop dan state. Berikut ini adalah bentuk dari kedua komponen tersebut:
Terdapat dua tipe komponen, yaitu stateless dan statefull. Komponen stateless tidak
memiliki state, hanya memiliki prop. Umumnya komponen ini dibuat dengan function
karena kode programnya lebih ringkas. Komponen statefull memiliki state dan props.
Komponen ini dibuat dengan class. Kelebihan dari class component adalah memiliki
lifecycle.
Prop
Prop merupakan singkatan dari Property. Prop pada react native mirip seperti atribut
pada tag HTML. Dalam functional component, prop ini adalah parameternya. Dalam
classcomponent, prop adalah property dari class yang biasa diakses melalui keyword
‘this’. Berikut ini adalah contoh dari penggunaan prop pada fungsional component dan
class component:
Terdapat beberapa hal yang perlu diperhatikan terkait dengan prop, yaitu prop bersifat
read-only. Pada contoh function ComponentA diatas, function ini hanya bisa membaca
parameter props tetapi tidak bisa merubahnya. Yang bisa merubahnya adalah
pemanggilnya yaitu <ComponentA />. Selain itu, prop umumnya digunakan untuk
komunikasi data component dari parent component ke child component.
State
State adalah data private dari sebuah komponen. Data ini hanya tersedia untuk
komponen tersebut dan tidak bisa di akses dari komponen lain. Komponen dapat
20
merubah nilai state-nya sendiri. Agar lebih jelas, berikut ini adalah contoh
implementasi pada component counter:
Komponen counter memiliki nilai default 0. Tombol minus (-) dan plus (+) berfungsi
untuk mengubah nilai counternya. Berikut ini adalah kode program dari komponen
counter berikut penjelasan bagian-bagian kode programnya:
1. Inisialisi state : pada beberapa contoh inisialisasi di buat dengan menggunakan
constructor() namun bisa juga diimplementasikan seperti gambar di atas.
2. Update State : untuk merubah nilai state digunakan perintah this.setState(). Ketika
nilai state berubah secara otomatis komponen akan dirender ulang. Method
menggunakan arrow function untuk menghindari problem javascript bind.
3. Read Component State : Untuk membaca nilai state digunakan perintah
this.state.[keyName].
21
4. Call Method : semua perubahan state dilakukan di dalam method render().
Agar dapat merubah nilai prop-nya sendiri, dilakukan callback atau dengan kata lain
child component meminta parent component untuk merubah nilai prop-nya.
Contohnya dapat dilihat pada gambar kode program di bawah ini:
Kapan saat yang tepat untuk menggunakan props atau state?
1. Props digunakan untuk komunikasi data antar komponent (parent to child
component).
2. State digunakan untuk komunikasi data internal, yaitu hanya dalam component itu
sendiri.
3. Props dan state bisa memiliki default value.
(Sumber: Sastra Panca Nababan @ www.medium.com)
Latihan 1
Buatlah aplikasi yang memiliki variable bernama ‘nama’ , inisialisasikan nilai awal dari
variable nama tersebut, kemudian ubah nilai dari variable nama tersebut melalui
functional component dan class component!
22
STYLING
View
View adalah elemen yang paling umum dalam React Native. Dalam pemrograman web,
view sama seperti elemen div. Berikut ini adalah penggunaan View dalam
pembangunan aplikasi mobile dengan menggunakan React Native:
1. Ketika kamu perlu membungkus elemen-elemen ke dalam suatu wadah
(container), kamu dapat menggunakan elemen View sebagai container.
2. Ketika kamu ingin membuat lebih banyak elemen di dalam elemen induk, elemen
induk dan anak keduanya adalah View. Elemen View dapat memiliki anak elemen
sejumlah yang diinginkan.
3. Ketika kamu ingin mendesain elemen yang berbeda, kamu dapat menempatkannya
di dalam elemen View selama itu masih mendukung property style, flexbox, dan
yang lainnya.
Text
Komponen Text digunakan untuk menampilkan tulisan pada project React Native.
Komponan Text dapat bersarang dan dapat mewarisi properti dari komponen induk ke
anak.
Styling
Dengan React Native, kamu tidak perlu menggunakan bahasa atau sintaks khusus
untuk menuliskan styling di React Native. Pengguna cukup mendesain aplikasi dengan
menggunakan JavaScript. Nama dan nilai value pada styling di React Native hampir
sama seperti bagaimana CSS bekerja di web. Perbedaannya adalah cara penulisan
namanya, pada React Native dituliskan dengan menggunakan camel case. Nama styling
warna latar pada CSS dituliskan background-color sedangkan pada React Native
dituliskan backgroundColor.
Terdapat dua cara penulisan style di React Native. Cara yang pertama property style
dituliskan langsung pada komponen, sedangkan cara yang kedua dituliskan dengan
menggunakan Stylesheet. Contoh cara penulisan style dengan Stylesheet adalah
sebagai berikut:
23
ex_style.js
import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; const styles = StyleSheet.create({ bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); export default class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigBlue}>just bigBlue</Text> <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text> <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text> </View> ); } }
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
24
HEIGHT AND WIDTH
Tinggi dan lebar suatu komponen menentukan ukurannya di layar perangkat. Berikut
ini adalah contoh penggunaan tinggi dan lebar komponen secara fix dimana komponen
akan memiliki ukuran yang tetap walaupun ukuran layar perangkatnya berbeda :
ex_fix_dim.js
import React, { Component } from 'react'; import { View } from 'react-native'; export default class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } }
Dimensi Flex
Untuk membuat komponen dengan ukuran tinggi lebar yang dapat melebar dan
menyusut secara dinamis berdasarkan ruang yang tersedia digunakan property flex.
Flex akan menentukan bagaimana elemen-elemen di dalam aplikasi mengisi ruang
yang tersedia. Ruang akan dibagi sesuai dengan property flex setiap elemen. Pada
contoh di bawah ini elemen View berwarna merah, kuning, dan hijau adalah anak dari
View container yang memiliki nilai flex 1.
25
Flex bernilai 1 artinya elemen akan mengisi seluruh ruang yang tersedia. Elemen View
merah memiliki nilai flex 1, kuning memiliki nilai flex 2, dan hijau memiliki nilai flex 3.
Total seluruh flex adalah 6 sehingga View merah akan menempati 1/6 bagian layar,
kuning 2/6, dan hijau 3/6. Berikut ini adalah contoh penggunaan tinggi dan lebar
menggunakan Flex:
ex_flex.js
import React, { Component } from 'react'; import { View } from 'react-native'; export default class FlexDimensionsBasics extends Component { render() { return ( <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View> ); } }
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
26
LAYOUTING
Untuk mendapatkan posisi tata letak yang sesuai dengan keinginan, kamu dapat
menggunakan kombinasi dari property flexDirection, alignItems, dan justifyContent.
Properti Nilai Deskripsi
flexDirection column, row, row-reverse, column-reverse
Digunakan untuk menentukan apakah elemen akan diletakan sejajar secara vertical atau horizontal
alignItems center, flex-start, flex-end, stretch, baseline
Digunakan untuk menentukan bagaimana elemen didistribusikan di dalam secondary axis container (kebalikan dari flexDirection)
justifyContent Center, flex-start, flex-end, space-around, space-between, space-evenly
Digunakan untuk menentukan bagaimana elemen didistribusikan di dalam container
Flex Direction
ex_flex_dir.js
import React, { Component } from 'react'; import { View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'red'}} /> <View style={{width: 50, height: 50, backgroundColor: 'yellow'}} /> <View style={{width: 50, height: 50, backgroundColor: 'green'}} /> </View> ); } };
27
ex_just.js
import React, { Component } from 'react'; import { View } from 'react-native'; export default class JustifyContentBasics extends Component { render() { return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <View style={{width: 50, height: 50, backgroundColor: 'red'}} /> <View style={{width: 50, height: 50, backgroundColor: 'yellow'}} /> <View style={{width: 50, height: 50, backgroundColor: 'green'}} /> </View> ); } };
28
ex_align.js import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; export default class AlignItemsBasics extends Component { render() { return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch', }}> <View style={{width: 50, height: 50, backgroundColor: 'red'}} /> <View style={{height: 50, backgroundColor: 'yellow'}} /> <View style={{height: 100, backgroundColor: 'green'}} /> </View> ); } };
29
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
Latihan 2
Cobalah seluruh nilai dalam flexDirection, justifyContent, dan alignItems pada file app-
layout.js dan app-layout-1.js! Bagaimanakah tampilannya?
30
TUGAS 1
Keterangan :
1. Gunakan flex dengan 3 flex child dimana perbandingan child flex = 3 : 10 : 1
2. Bagian Header :
a. Background warna steelblue
b. Posisi teks di tengah
c. Ukuran teks 30 dengan warna putih
3. Bagian Body:
a. Background warna skyblue
Header
Body
Footer
31
b. Ukuran padding 10
c. Posisi gambar dan teks di tengah
d. Ukuran gambar 250x250
e. Ukuran teks 25, cetak tebal
4. Bagian Footer:
a. Background warna steelblue
b. Posisi teks di tengah
c. Ukuran teks 15 dengan warna powderblue
5. Teks dan gambar harus sama dengan contoh kecuali teks pada bagian Footer
diganti dengan NIM, NAMA, dan Kelas
32
MAKE SOMETHING INTERESTING
Image
Kamu dapat menambahkan gambar pada aplikasi android yang dibangunnya. Gambar
dapat diambil dari file yang sudah ada di perangkat computer atau juga diambil dari
internet. Untuk dapat menambahkan gambar yang diambil dari perangkat komputer,
pengguna harus melakukan import gambar ke dalam folder project. File gambar lebih
baik disimpan pada folder khusus untuk mempermudah akses. Pastikan penulisan url
gambar betul agar gambar dapat diakses dengan benar dan muncul pada halaman
aplikasi. Sedangkan gambar yang diambil dari internet harus menyertakan tautan
gambar. Berikut ini adalah perintah yang dapat digunakan untuk menambahkan
gambar, baik yang diambil dari perangkat computer atau juga dari internet:
<Image source = {require('../../img/myImage.png')} />
<Image
source = {{ uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x
400.png' }}
style = {{ width: 200, height: 200 }}
/>
Text Input
Text input dapat digunakan jika aplikasi yang dibuat membutuhkan pembacaan
masukan dari keyboard. Komponen Text input memiliki property onChangeText yang
memanggil sebuah fungsi setiap kali teks yang dimasukkan berubah dan property
onSubmitEditing yang memanggil sebuah fungsi ketika teks dikirimkan.
App-TextInput.js
import React from 'react'; import { StyleSheet, Text, View, TextInput, Button } from 'react-native'; export default class App extends React.Component { constructor(props){ super(props)
33
this.state = { nim:"NIM", nama:"NAMA" }; } render() { return ( <View style = {{flex:1,backgroundColor:'#bbdefb'}}> <View style={{backgroundColor:'#2196f3'}}> <Text style = {{padding: 50, fontSize: 20, color: 'white', textAlign:'center'}} > BIODATA </Text> </View> <View style={{margin:20,padding: 10, backgroundColor:'#e3f2fd'}}> <TextInput style = {{height: 40}} placeholder="Masukkan NIM" onChangeText={(nim)=>this.setState({nim})} keyboardType = 'numeric' /> <TextInput style = {{height: 40}} placeholder="Masukkan Nama" onChangeText={(nama)=>this.setState({nama})} /> <Button onPress={()=>this.setState({ biodata: ("Hai " + this.state.nama + "!\nNim kamu adalah " + this.state.nim) })} title="INPUT" accessibilityLabel="Klik untuk memasukkan biodata" /> </View> <View style={{margin:10, backgroundColor:'#90caf9'}}> <Text style = {{padding: 50, fontSize: 20}} > {this.state.biodata} </Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
34
Alert
Elemen alert memunculkan sebuah kotak dialog yang memiliki judul dan isi pesan. Pada
android terdapat 3 tombol yang dapat ditentukan. Android memiliki konsep tombol netral,
positif, dan negative. Jika kamu menentukan 1 tombol, maka tombol tersebut berkonsep
positif seperti ‘YA’. Jika 2 tombol, maka berkonsep positif dan negative seperti ‘YA’ dan
‘TIDAK’. Jika 3 tombol, maka berkonsep positif, negative, dan netral seperti ‘YA’, ‘TIDAK’, dan
‘KEMBALI’. Contoh perintah penggunaan alert adalah sebagai berikut:
Alert.alert( 'Alert Title', 'My Alert Msg', [ {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel', }, {text: 'OK', onPress: () => console.log('OK Pressed')}, ], {cancelable: false}, );
static alert(title, message?, buttons?, options? type?)
Touchable Oppacity
Pada React Native terdapat komponen yang memiliki property onPress sehingga dapat
berfungsi seperti tombol yang bernama Touchable. Berikut ini adalah contoh penggunaan
komponen touchable:
hello-touch.js
import React, { Component } from 'react'; import { StyleSheet, TouchableOpacity, Text, TextInput, View, Alert } from 'react-native'; export default class Hello extends Component { state = { nama:'' }; setStateNama = (text) => {
35
this.setState({ nama: text }) } hello = (nama) => { alert('Hello ' + nama + '!') } render() { return ( <View style = {styles.container}> <TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Nama" placeholderTextColor = "#000000" autoCapitalize = "none" onChangeText = {this.setStateNama}/> <TouchableOpacity style = {styles.submitButton} onPress={ () => this.hello(this.state.nama)} > <Text>Submit </Text> </TouchableOpacity> </View> ) } } const styles = StyleSheet.create({ container: { paddingTop: 23 }, input: { padding : 10, margin: 15, height: 40, borderColor: '#000000', borderWidth: 1 }, submitButton: { backgroundColor: 'skyblue', padding: 10, margin: 15, height: 40, alignItems: 'center', } });
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
Latihan 3
Buatlah program untuk menghitung keliling persegi panjang!
36
Tugas 2
Kembangkan program yang sudah dibuat pada Latihan 3 dengan menambahkan
perhitungan luas dan volume!
Variabel yang dibutuhkan sesuaikan dengan perhitungan.
37
GO FURTHER
Scroll View
Pembangunan aplikasi terkadang membutuhkan banyak komponen, elemen, dan
halaman yang panjang. Untuk mendukung hal tersebut, React Native memiliki elemen
ScrollView. Elemen ini harus diletakkan di dalam komponen View dan memiliki tag
penutup.
List View
Dalam React Native, untuk membuat sebuah list digunakan method map(). Method
tersebut akan melakukan iterasi pada sebuah array dari item dan merendernya
masing-masing. Berikut ini adalah contoh penggunaan List View:
App-list.js
import React, {Component} from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native'; export default class App extends React.Component { state = { names: [ { id: 0, name: 'Ben' }, { id: 1, name: 'Susan' }, { id: 2, name: 'Robert' }, { id: 3, name: 'Mary' } ] } alertItemName = (item) => { Alert.alert('Say Hai',"Hai " + item.name + " ! ") } render() { return ( <View> { this.state.names.map((item, id) => ( <TouchableOpacity key = {item.id} style = {styles.container} onPress = {() => this.alertItemName(item)} > <Text style={styles.text}> {item.name} </Text> </TouchableOpacity> )) } </View> );
38
} } const styles = StyleSheet.create ({ container: { padding: 10, marginTop: 3, backgroundColor: '#d9f9b1', alignItems: 'center', }, text: { color: '#4f603c' } });
Switch & Picker
Switch_picker.js import React, {Component} from 'react'; import { View, Switch, StyleSheet, Text, Alert, Picker, TextInput, Button} from 'react-native'; export default class App extends React.Component { state = { switchValue: false, prodi:'', nama:'' }; setStateNama = (text) => { this.setState({ nama: text }) } SwitchGo(value){ this.setState({ switchValue:value }); } text(){ if(this.state.switchValue == true){ return <Text style = {styles.text}>Hello {this.state.nama}! Kamu mahasiswa {this.state.prodi}. </Text>; } if(this.state.switchValue == false){ return <Text>Hello {this.state.nama}! Kamu mahasiswa {this.state.prodi}. </Text>; } } render(){ return ( <View style = {styles.container}> <TextInput style = {styles.input} underlineColorAndroid = "transparent"
39
placeholder = "Nama" placeholderTextColor = "#000000" autoCapitalize = "none" onChangeText = {this.setStateNama}/> <View style={styles.picker}> <Picker selectedValue={this.state.prodi} onValueChange={(itemValue, itemIndex) => this.setState({prodi: itemValue})} > <Picker.Item label="Program Studi" value="null" /> <Picker.Item label="Teknik Informatika" value="Teknik Informatika" /> <Picker.Item label="Teknik Mesin" value="Teknik Mesin" /> <Picker.Item label="Teknik Industri" value="Teknik Industri" /> </Picker> </View> <Switch style = {styles.switch} onValueChange = {(value) => this.SwitchGo(value)} value = {this.state.switchValue} /> {this.text()} </View> ); } } const styles = StyleSheet.create ({ container: { paddingTop: 23, alignItems: "center" }, input: { padding : 10, margin: 15, height: 50, width: 300, borderBottomColor: '#000000', borderWidth: 1, fontSize: 15 }, picker:{ marginLeft: 10, marginRight: 10, height: 50, width: 300, borderWidth : 1, fontSize: 15, }, switch:{ alignItems: "center", marginTop : 15 }, text:{
40
marginLeft: 10, marginRight: 10, marginTop: 20, height: 300, width: 300, fontSize: 25, color : "blue", fontWeight : "bold", textAlign :"center" }, });
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
41
NAVIGATION
Sebuah aplikasi, baik mobile ataupun web, biasanya memiliki struktur menu yang
memungkinkan pengguna untuk beralih dari satu menu ke menu yang lain. Untuk
mendukung hal tersebut, React Native memiliki komponen navigasi, yaitu navigation.
Navigasi pada React Native dapat dibuat dengan elemen createStackNavigator dan
createBottonTabNavigator yang diletakkan di dalam sebuah container dimana
container tersebut dibuat dengan elemen createAppContainer. Jika menggunakan
elemen createStackNavigator, pengguna dapat beralih dari satu menu ke menu yang
lain menggunakan tombol sedangkan jika menggunakan createBottonTabNavigator
pengguna dapat beralih dari satu menu ke menu yang lain dengan menggunakan
Menu Tab di bagian bawah layar. Pada kedua bagian di bawah ini akan dibuat dua
buah aplikasi menggunakan navigasi yang berbeda.
Navigation Using Button
App.js
import React from "react"; import { View, Text, StyleSheet } from "react-native"; import { createStackNavigator, createAppContainer } from "react-navigation"; import Home from './Home' import Profile from './Profile' import Feed from './Feed' const RootStack = createStackNavigator({ Home : Home, Profile : Profile, Feed : Feed, }) const AppContainer = createAppContainer(RootStack); export default class App extends React.Component{ render(){ return <AppContainer/>; } } const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
42
Home.js
import React from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; export default class Home extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Home!\n"} </Text> <Button title="Profile" onPress={ ()=> this.props.navigation.navigate('Profile') } /> <Text> {"\n"} </Text> <Button title="Feed" onPress={ ()=> this.props.navigation.navigate('Feed') } /> </View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Profile.js
import React from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; export default class Profile extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Profile!\n"} </Text> <Button title="Home" onPress={ ()=> this.props.navigation.navigate('Home') }
43
/> <Text> {"\n"} </Text> <Button title="Feed" onPress={ ()=> this.props.navigation.navigate('Feed') } /> </View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Feed.js
import React from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; export default class Feed extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Feed!\n"} </Text> <Button title="Home" onPress={ ()=> this.props.navigation.navigate('Home') } /> <Text> {"\n"} </Text> <Button title="Profile" onPress={ ()=> this.props.navigation.navigate('Profile') } /> </View> ); } } const styles = StyleSheet.create({ container:{
44
flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Navigation Using Tab
App.js
import React from "react"; import { View, Text, StyleSheet } from "react-native"; import { createBottomTabNavigator, createAppContainer } from "react-navigation"; import Home from './Home' import Profile from './Profile' import Feed from './Feed' const TabNavigator = createBottomTabNavigator({ Home : Home, Profile : Profile, Feed : Feed, },{ swipeEnabled: true, tabBarOptions:{ activeTintColor: '#f2f2f2', activeBackgroundColor: '#2EC4B6', inactiveTintColor: '#666', labelStyle:{ fontSize: 22, padding: 12 } } } ); const AppContainer = createAppContainer(TabNavigator); export default class App extends React.Component{ render(){ return <AppContainer/>; } }
Home.js
import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class Home extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Home!\n"} </Text>
45
</View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Profile.js
import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class Profile extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Profile!\n"} </Text> </View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Feed.js
import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; export default class Feed extends React.Component { render(){ return( <View style={styles.container}> <Text> {"Hello from Feed!\n"} </Text> </View> ); } } const styles = StyleSheet.create({ container:{
46
flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
(Sumber: www.tutorialpoint.com & https://facebook.github.io/react-native )
47
FIREBASE
Firebase adalah platform yang memberikan beberapa opsi layanan, yaitu real time
database, authentication, dan cloud storage yang dapat digunakan untuk berinteraksi
dengan aplikasi yang dibangun. Selain itu, Firebase menawarkan tautan dinamis
seperti analytic, adwords, admobs, crash reporting, notofocations, testing, dan masih
banyak lagi. Kamu dapat melihat semua opsi tersebut di dalam Firebase Console
setelah membuat akun di Firebase dan melakukan log in. Pembuatan akun dapat
dilakukan dengan menggunakan akun Google di halaman website
https://firebase.google.com. Gambar di bawah ini adalah tampilan halaman website
Firebase:
Untuk memulai membuat project Firebase, kamu dapat klik tombol ‘Get started’ atau
melakukan ‘Sign in’ dulu di bagian pojok kanan atas. Jika suda melakukan sign in
sebelumnya, kamu bisa juga langsung klik ‘Go to console’ yang ada di sebelah tautan
sign in. Gambar di bawah ini adalah tampilan ketika kamu sudah masuk ke halaman
console dan belum pernah membuat project firebase sebelumnya. Jika sebelumnya
sudah pernah membuat project Firebase maka project-project tersebut akan muncul di
halaman ini.
48
Untuk memulai membuat project, kamu dapat klik tombol ‘Create a project’. Terdapat
3 tahapan yang perlu diisi dan diatur terlebih dahulu. Pada tahapan yang pertama
kamu diminta untuk menuliskan nama project yang akan kamu buat dan menyetujui
Firebase Terms. Pada tahap kedua dan ketiga ada beberapa Term juga yang harus
disetujui dengan melakukan klik pada kotak dialog yang tersedia.
Jika project telah selesai dibuat dan siap untuk digunakan, maka akan tampilan
halaman Firebase akan seperti di bawah ini:
Klik tombol ‘Continue’ dan kamu akan diarahkan pada halaman seperti gambar di
bawah ini:
49
Untuk menghubungkan Firebase dengan project React Native yang sedang dibuat,
kalian dapat klik symbol yang dilingkari merah untuk mendapatkan informasi
mengenai aplikasi firebase dan url database. Sebelum informasi tersebut didapatkan,
kalian perlu melakukan registrasi aplikasi dengan mengisi nama aplikasi pada halaman
yang muncul seperti di bawah ini (kotak dialog mengenai firebase hosting tidak perlu
dicentang):
Setelah meregistrasikan aplikasi, maka akan muncul informasi mengenai firebase dan
url database seperti di bawah ini:
50
Salin informasi yang ada pada variable FirebaseConfig dan tempelkan informasi
tersebut pada project react native kamu. Contoh informasi tersebut adalah sebagai
berikut:
Jika informasi di atas telah disalin dan ditempelkan, selanjutnya yang perlu dilakukan
adalah membuat database-nya. Pada pembelajaran, database yang digunakan adalah
Realtime Database. Gambar di bawah ini adalah tampilan halaman project Firebase.
Pada bagian menu ‘Develop’ pilih fitur ‘Database’, maka akan muncul beberapa pilihan
database. Selanjutnya pilih ‘Realtime Database’ dan klik tombol ‘Create Database’.
Ketika membuat database, kamu akan diminta untuk mengatur pola keamanan dari
database yang kamu buat. Untuk pembelajaran ini pilih ‘Start in test mode’ sehingga
rules yang akan digunakan adalah database dapat melakukan pembacaan (read) dan
penulisan (write). Kemudian klik tombol ‘Enable’.
51
Gambar di bawah ini adalah tampilan halaman database yang telah dibuat. Pada
halaman ini kamu dapat melihat data atau isi dari database kamu, melihat rules,
melakukan backup, dan melihat usage-nya. Jika database belum terisi maka nilainya
masih null.
Gambar di bawah ini adalah tampilan contoh database yang telah diisi. Seperti yang
terlihat pada gambar di bawah, realtime database tidak seperti relational database.
Realtime database berbentuk hirarki. Kamu tidak perlu memberikan id atau primary
52
key pada database yang dibuat karena Firebase secara otomatis telah men-generate
sebuah kunci (key) untuk membedakan satu record dengan record lainnya.
Untuk memastikan jika project React Native telah terhubung dengan database, kamu
dapat mencoba menjalankan project dan mencoba untuk memasukan beberapa data
ke dalam database-nya.
53
READ, UPDATE, DELETE IN FIREBASE VIA REACT NATIVE
Setelah selesai melakukan konfigurasi database pada Firebase dan melakukan koneksi
ke React Native, kamu perlu menambahkan kode program agar dapat membaca,
menyimpan, dan menghapus data dari dan ke database melalui project react native
yang dibuat. Mari kita buat aplikasi inventory sedernaha untuk menyimpan informasi
ketersediaan barang-barang kebutuhan rumah.
App.js
import React from "react"; import { View, Text, StyleSheet } from "react-native"; import { createStackNavigator, createAppContainer } from "react-navigation"; import Home from './Home'; import NewThing from './NewThing'; import EditThing1 from './EditThing1'; import EditThing2 from './EditThing2'; const RootStack = createStackNavigator({ Home : Home, NewThing : NewThing, EditThing1 : EditThing1, EditThing2 : EditThing2 }, { defaultNavigationOptions: { headerStyle: { backgroundColor: 'blue', height: 5 }, }, } ) const AppContainer = createAppContainer(RootStack); export default class App extends React.Component{ render(){ return <AppContainer/>; } }
Reference.js
import * as firebase from 'firebase'; var config = { //copy your firebase reference here };
54
if (!firebase.apps.length) { firebase.initializeApp(config); } export const dataRef = firebase.database().ref();
Home.js
import React, {Component} from 'react'; import {StyleSheet, Text, View, Button, TouchableOpacity, ScrollView} from 'react-native'; import { dataRef } from './Reference'; import PropTypes from 'prop-types'; export default class Home extends React.Component { state = { dbarang :[], }; componentDidMount() { dataRef.on('value', (snapshot) => { let data = snapshot.val(); let dbarang = Object.values(data); this.setState({dbarang}); }); } render(){ return( <View style={styles.container}> <ScrollView> <View style={styles.header}> <Text style={styles.textHeader}> Gudang Bunda </Text> </View> <View> <View style= {styles.buttonTop}> <View style={{flex:2, margin:2}}> <Button title = 'Tambah' onPress={ ()=> this.props.navigation.navigate('NewThing') } /> </View> <View style={{flex:2,margin:2}}> <Button title = 'Ubah' onPress={ ()=> this.props.navigation.navigate('EditThing1') } />
55
</View> </View> <View style={styles.content}> <View style = {{flex :3, alignItems : 'center', borderBottomWidth:1}}> <Text style={{fontSize:17}}> Nama Barang </Text> </View> <View style = {{flex :2, alignItems : 'center', borderBottomWidth:1}}> <Text style={{fontSize:17}}> Jumlah </Text> </View> </View> <View> {this.state.dbarang.map((item, index) => ( <TouchableOpacity key={item.id} style = {styles.listDisplay} > <View style={styles.content}> <View style = {styles.listItemBarang}> <Text> {item.barang} </Text> </View> <View style = {styles.listItemJumlah}> <Text> {item.jumlah} </Text> </View> </View> </TouchableOpacity> ))} </View> </View> </ScrollView> </View> ); } } const styles = StyleSheet.create({ container:{ backgroundColor: 'skyblue', flex : 1, flexDirection : 'column', justifyContent : 'flex-start' }, header:{
56
backgroundColor : 'blue', height : 40, alignItems : 'center' }, textHeader:{ fontSize: 20, color: 'white', }, buttonTop:{ padding : 15, flex: 1, flexDirection: 'row', alignItems : 'center' }, content:{ padding : 5, flex: 1, flexDirection: 'row', alignItems : 'center' }, listDisplay: { padding: 10, marginTop: 3, backgroundColor: '#7acaff', alignItems: 'center' }, listItemBarang:{ flex :3, }, listItemJumlah:{ flex :2, alignItems : 'center' } });
New Thing.js
import React from 'react'; import {StyleSheet, Text, View, Button, TextInput} from 'react-native'; import {dataRef} from './Reference'; export default class NewThing extends React.Component { constructor(props){ super(props); this.state = { barang : '', jumlah : '', key : '', dbarang : [] }} componentDidMount() { dataRef.on('value', (snapshot) => { let data = snapshot.val();
57
let dbarang = Object.values(data); this.setState({dbarang}); }); } handleSubmit = () => { alert('Data berhasil ditambahkan!'); const newData = { key : this.state.key.trim(), barang: this.state.barang.trim(), jumlah: this.state.jumlah.trim() }; const ref = dataRef.push(newData); const key = ref.key; dataRef.child(key).update({'key': key}) this.props.navigation.navigate('Home') }; setStateBarang = (text) => { this.setState({ barang: text }) } setStateJumlah = (text) => { this.setState({ jumlah: text }) } render(){ return( <View style={styles.container}> <View style={styles.header}> <Text style={styles.textHeader}> Gudang Bunda </Text> </View> <View style={styles.contentNew}> <Button style={styles.submitButton} title = 'Kembali' onPress={ ()=> this.props.navigation.navigate('Home') } /> <TextInput style={styles.input} placeholder="Nama Barang" value={this.state.barang} onChangeText={this.setStateBarang} /> <TextInput style={styles.input} placeholder="Jumlah" value={this.state.jumlah} onChangeText={this.setStateJumlah} />
58
<Button style={styles.submitButton} title = 'Tambah' onPress={this.handleSubmit} /> </View> </View> ); } } const styles = StyleSheet.create({ container:{ backgroundColor: 'skyblue', flex : 1, flexDirection : 'column', justifyContent : 'flex-start' }, header:{ backgroundColor : 'blue', height : 40, alignItems : 'center' }, textHeader:{ fontSize: 20, color: 'white', }, submitButton:{ margin : 15 }, contentNew:{ padding : 15, flex: 1, alignItems : 'center' }, input: { padding : 10, margin: 10, height: 50, width: 300, borderBottomColor: '#000000', borderWidth: 1, fontSize: 15, backgroundColor : 'white' }, });
EditThing1.js
import React, {Component} from 'react'; import {StyleSheet, Text, View, Button, TouchableOpacity, ScrollView} from 'react-native'; import { dataRef } from './Reference';
59
import PropTypes from 'prop-types'; export default class EditThing1 extends React.Component { state = { dbarang :[], }; componentDidMount() { dataRef.on('value', (snapshot) => { let data = snapshot.val(); let dbarang = Object.values(data); this.setState({dbarang}); }); } sendData = (item) => { this.props.navigation.navigate('EditThing2',{key:item.key, barang:item.barang, jumlah:item.jumlah }) } render(){ return( <View style={styles.container}> <ScrollView> <View style={styles.header}> <Text style={styles.textHeader}> Gudang Bunda </Text> </View> <View> <View style= {styles.submitButtonView}> <Button title = 'Kembali' onPress={ ()=> this.props.navigation.navigate('Home') } /> </View> <View style={styles.content}> <View style = {{flex :3, alignItems : 'center', borderBottomWidth: 1}}> <Text style={{fontSize:17}}> Nama Barang </Text> </View> <View style = {{flex :2, alignItems : 'center', borderBottomWidth: 1}}> <Text style={{fontSize:17}}> Jumlah </Text> </View>
60
</View> <View> {this.state.dbarang.map((item, index) => ( <TouchableOpacity key={item.id} style = {styles.listDisplay} onPress ={()=>this.sendData(item)} > <View style={styles.content}> <View style = {styles.listItemBarang}> <Text> {item.barang} </Text> </View> <View style = {styles.listItemJumlah}> <Text> {item.jumlah} </Text> </View> </View> </TouchableOpacity> ))} </View> </View> </ScrollView> </View> ); } } const styles = StyleSheet.create({ container:{ backgroundColor: 'skyblue', flex : 1, flexDirection : 'column', justifyContent : 'flex-start' }, header:{ backgroundColor : 'blue', height : 40, alignItems : 'center' }, textHeader:{ fontSize: 20, color: 'white', }, submitButtonView:{ margin : 15, alignItems: 'center' }, content:{ padding : 15, flex: 1,
61
flexDirection: 'row', alignItems : 'center' }, listDisplay: { padding: 10, marginTop: 3, backgroundColor: '#7acaff', alignItems: 'center', }, listItemBarang:{ flex :3, }, listItemJumlah:{ flex :2, alignItems : 'center' } });
EditThing2.js
import React from 'react'; import {StyleSheet, Text, View, Button, TextInput} from 'react-native'; import { dataRef } from './Reference'; export default class EditThing2 extends React.Component { state={ key : this.props.navigation.state.params.key, barang : this.props.navigation.state.params.barang, jumlah : this.props.navigation.state.params.jumlah, } setStateBarang = (text) => { this.setState({ barang: text }) } setStateJumlah = (text) => { this.setState({ jumlah: text }) } ubahData = (key) =>{ dataRef.child(key).update({'barang': this.state.barang, 'jumlah' : this.state.jumlah }); alert('Data telah diubah!'); this.props.navigation.navigate('Home'); } hapusData = (key) =>{ dataRef.child(key).remove(); alert('Data telah dihapus!'); this.props.navigation.navigate('Home'); } render(){ return( <View style={styles.container}>
62
<View style={styles.header}> <Text style={styles.textHeader}> Gudang Bunda </Text> </View> <View style={styles.contentNew}> <View> <Button style={styles.submitButton} title = 'Kembali' onPress={ ()=> this.props.navigation.navigate('EditThing1') } /> </View> <View> <TextInput style={styles.input} value={this.state.barang} onChangeText={this.setStateBarang} /> <TextInput style={styles.input} value={this.state.jumlah} onChangeText={this.setStateJumlah} /> </View> <View style= {styles.buttonTop}> <View style={{flex:2, margin:2}}> <Button title = 'Ubah' onPress={ ()=> this.ubahData(this.state.key) } /> </View> <View style={{flex:2,margin:2}}> <Button title = 'Hapus' onPress={ ()=> this.hapusData(this.state.key) } /> </View> </View> </View> </View> ); } } const styles = StyleSheet.create({ container:{
63
backgroundColor: 'skyblue', flex : 1, flexDirection : 'column', justifyContent : 'flex-start' }, header:{ backgroundColor : 'blue', height : 40, alignItems : 'center' }, textHeader:{ fontSize: 20, color: 'white', }, contentNew:{ padding : 15, flex: 1, alignItems : 'center', justifyContent : 'flex-start' }, input: { padding : 10, margin: 10, height: 50, width: 300, borderBottomColor: '#000000', borderWidth: 1, fontSize: 15, backgroundColor : 'white' }, buttonTop:{ padding : 15, flex: 1, flexDirection: 'row' }, submitButton:{ margin : 15, }, });
64
BUILD AN APK FILE
Pembangunan file APK hanya bisa dilakukan di Expo CLI atau React Native CLI. Cara
untuk membangunnya adalah sebagai berikut:
1. Tambahkan source code di bawah ini ke dalam file app.json:
"android":{
"package": "com.[namacompany].[namaproject]"
}
2. Install exp command tool melalui command promt dengan perintah di bawah ini:
npm install –g exp
3. Build file APK dengan perintah di bawah ini:
Exp build:android
4. Setelah selesai proses pembangunan file APK, maka akan muncul link untuk
download file APK tersebut
65
MAKE YOUR OWN PROJECT
Buatlah sebuah aplikasi mobile sederhana yang memuat komponen-komponen yang
telah kita pelajari sebelumnya, serta terkoneksi dengan database!
Dapatkan nilai tambahan jika kamu berhasil membuat file APK-nya.