Components

Touchable Highlight
• Komponen untuk merespon sentuhan dari user
• Komponen ini hanya diperbolehkan memiliki satu komponen
child
• Komponen <TouchableHighlight></TouchableHighlight>
Animations
• Animations diperlukan untuk
menciptakan user experience yang
menarik
• Animated API dirancang untuk secara
ringkas mengekspresikan berbagai
macam animasi dan pola interaksi
• Animated menyediakan 6 jenis komponen
animasi yaitu : View, Text, Image,
ScrollView, FlatList, dan SectionList
• import {Animated} from ‘react-native’
Progress Bar
• Komponen yang digunakan untuk
menampilkan indikator progress
• React Native hanya menyediakan
komponen progress bar khusus
Android
• Untuk iOS disarankan menggunakan
komponen progress bar dari package
community (third party)
• Komponen : <ProgressBarAndroid />
Modal
• Cara dasar untuk menampilkan
konten diatas konten lain
• Komponen Modal disediakan oleh
react-native library
• Atribut visible (boolean)
digunakan untuk menampilkan
atau menutup modal
Question & Answers
Networking
Nodejs
• Platform server-side dan aplikasi jaringan
• Ditulis dengan bahasa Javascript
• Berjalan di multi-platform (Windows, Mac OSX, dan
Linux)
• Single-threaded, non-blocking, asynchronously
programming
File Request PHP/ASP vs Nodejs
PHP/ASP
Sends the task to the computer’s file system
Waits while the file system opens and reads
the file
Return the content to the client
Ready to handle the next request
Nodejs
Sends the task to the computer’s file sytem
Ready to handle the next request
When the file system has opened and read
the file, the server returns the content to the
client
Modul HTTP
• Built-in module dari Nodejs
• Membuat server HTTP yang mendengarkan port server
dan memberikan respon kembali ke client
Nodejs Packages
• NPM adalah package manager untuk Nodejs packages,
atau Nodejs modules
• Package di Nodejs berisi semua file yang dibutuhkan
untuk sebuah module
• Module adalah library Javascript yang dapat dimasukkan
dalam file project
Nodejs Packages
• Download package

• Using package
Express
• Framework aplikasi web untuk Nodejs
• Dirancang untuk membangung aplikasi web dan web API
• Framework standard untuk Nodejs
• Menyediakan router url untuk menangani request dari
client
Request Express
• Penanganan request dari client
• Client men-request ke sever melalui router url yang
dibuat dengan Express
• Method request : get, post, delete, put, & options
Response Express
• Mengembalikan response ke client
• Response bisa berupa text, JSON, download, header, dan
status response
JavaScript Object Notation (JSON)
• Sintaks untuk storing dan data exchange
• JSON merupakan text yang ditulis dengan notasi object
Javascript
• JSON text dapat dikonversi menjadi object Javascript
(Array), begitu juga sebaliknya
MySql
• Open-source Relational Database
• MySql banyak dipakai untuk aplikasi-aplikasi berbasis
web
• Dapat berjalan di multi-platform seperti Windows, Mac
OS X, dan Linux
• Dijalankan di Nodejs menggunakan module mysql
Fetching API Data
• Request HTTP ke server dan mendapatkan response
• API yang sering digunakan pada Reactjs adalah fetch, dan
axios
Fetch
• API standard Javascript untuk request HTTP
• Attribute fetch : URL, Request Params
Axios
• API request HTTP dari pihak ketiga
• Npm install axios --save
File I/O
• Setup di Web Server
• Menggunakan multer pada nodejs
Question & Answers
 Thank You

Suminar Ariwibowo, S.Kom

Phone & WA : 0853 6090 5815
Email : suminarariwibowo@gmail.com
NoSQL & Firebase
NoSQL
Database NoSQL dibuat dengan tujuan khusus untuk
model data spesifik dan memiliki skema fleksibel untuk
membuat aplikasi modern. Database NoSQL dikenal
secara luas karena kemudahan pengembangan,
fungsionalitas, dan kinerja dalam berbagai skala.
NoSQL
• Fleksibilitas: Database NoSQL umumnya menyediakan skema
fleksibel yang memungkinkan pengembangan yang lebih cepat
dan lebih berulang.
• Skalabilitas: Database NoSQL umumnya didesain untuk
meningkatkan skala dengan menggunakan klaster perangkat
keras yang terdistribusi alih-alih meningkatkan skala dengan
menambah server yang mahal dan robust.
• Kinerja tinggi: Database NoSQL dioptimalkan untuk model data
spesifik dan pola akses yang memberikan kinerja yang lebih tinggi
dibandingkan jika Anda mencoba mendapatkan fungsionalitas
yang mirip dengan database relasional.
• Fungsionalitas tinggi: Database NoSQL menyediakan API dan
jenis data fungsional yang dibuat secara khusus untuk setiap
model data yang sesuai.

Sumber : aws.amazon.com
NoSQL vs SQL
Firebase
• Database NoSql
• Realtime
• Backend as Service
• JSON
Backend as a Service (BaaS)
• Model layanan cloud yang memungkinkan developer
mengalihdayakan semua aspek back-end, sehingga
developer hanya focus pada aspek front-end.
• BaaS mencakup :
• Database management
• Cloud storage (for user-generated content)
• User authentication
• Push notifications
• Remote updating
• Hosting
Realtime
• Realtime Database menggunakan sinkronisasi data setiap
kali data berubah
• Semua perangkat terhubung akan menerima update
Cloud Firestore
 Realtime Database

Tentukan jenis database : https://firebase.google.com/docs/firestore/rtdb-vs-firestore?hl=id

Offline
• Realtime database menyimpan data ke memory client
• Setelah konektivitas normal akan melakukan sinkronisasi
ke server
Cloud Storage
• Media penyimpanan dari service Firebase
• Menyimpan dan membagikan file seperti image, audio,
video, atau konten lainnya
Authentication
• Mengelolah pengguna Firebase atau aplikasi
• Menawarkan beberapa metode autentikasi seperti email,
facebook, google, dll
Question & Answers
 Thank You

Suminar Ariwibowo, S.Kom

Phone & WA : 0853 6090 5815
Email : suminarariwibowo@gmail.com
Geolocation
Geolocation
• Interface untuk mendapatkan posisi device
• Object posisi mengandung nilai longitude dan latitude
• Geolocation terdapat pada Javascript dengan sintaks
navigator.geolocation
Geolocation Javascript
• Geolocation pada Javascript secara default dapat diakses
dengan perintah navigator
• Navigator javascript tersedia pada React Native
environment
• navigator.geolocation digunakan tanpa import di React
Native
React Native Geolocation Service
• Install : npm install react-native-geolocation-
service –-save
• atau yarn add react-native-geolocation-service
• Doc : https://github.com/Agontuk/react-native-
geolocation-service
React Native Geolocation Service
Geolocation Android
• Pada Android perlu mendapatkan izin akses lokasi pada
device
• Akses lokasi device pada AndroidManifest.xml :
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
Map View
• Menampilkan UI map view berdasarkan object
geolocation (longitude, latitude)
• Menggunakan library : react-native-maps
• Install : npm install react-native-maps –save
• Atau yarn add react-native-maps
• Doc : https://github.com/react-native-community/react-
native-maps
Referensi
• https://facebook.github.io/react-
native/docs/geolocation
• https://developer.mozilla.org/en-
US/docs/Web/API/Geolocation
Question & Answers
 Thank You

Suminar Ariwibowo, S.Kom

Phone & WA : 0853 6090 5815
Email : suminarariwibowo@gmail.com
Camera
Camera
• Tidak ada library resmi dari React Native untuk camera
• Beberapa library dapat digunakan dari pihak ke-tiga
• Untuk mengakses camera pada device, aplikasi harus
mendapatkan izin akses dari user
• User permission camera pada Android dapat dibuat pada
file AndroidManifest.xml :
<uses-permission
android:name="android.permission.CAMERA" />
React Native Camera
• Dapat digunakan untuk men-capture foto dan video
• Hasil dari capture foto dan video berupa base64
• Install :
npm install --save react-native-camera@git+https://git@github.com/react-
native-community/react-native-camera.git

• Doc : https://github.com/react-native-community/react-
native-camera
React Native Camera
• Uses Permission di AndroidManifest.xml :
React Native Camera
• Edit file android/app/build.gradle :
React Native Camera + MLKit
• Implementasi MLKit untuk face detection/text
recognition/bar code di RNCamera
• Edit file android/app/build.gradle :

• Edit file build.gradle :

React Native Camera + MLKit
• Tambahkan di android/app/build.gradle :
 Camera Roll
• Library untuk mendapat images dari gallery atau photo library
device
• Install : npm install @react-native-community/cameraroll --save
• Penggunaan :
import CameraRoll from "@react-native-community/cameraroll";
• Hasil berupa data Array images
• Doc : https://github.com/react-native-cameraroll/react-native-
cameraroll
Camera Roll
Camera Roll
• AndroidManifest.xml
Camera Roll Permission
• Membutuhkan permission akses storage external
• Uses permission ManifestAndroid.xml :
<manifest>
...
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
...
<application>
Referensi
• https://github.com/react-native-community/react-
native-camera
• https://github.com/react-native-community/react-
native-camera/blob/master/docs/RNCamera.md
• https://facebook.github.io/react-native/docs/cameraroll
Question & Answers
 Thank You

Suminar Ariwibowo, S.Kom

Phone & WA : 0853 6090 5815
Email : suminarariwibowo@gmail.com