MODUL PRAKTIKUM

PEMROGRAMAN MOBILE (REACT NATIVE)

STMIK PRIMAKARA
 MODUL V
Authentication and Firebase Connection

Tujuan :

1. Mahasiswa mampu menghubungkan project react-native dengan firebase

​ enggunakan firebase
2. Mahasiswa mampu melakukan ​authentication m

Dasar Teori
1. Firebase
Firebase Realtime Database adalah database yang di-host di cloud. Data disimpan sebagai
JSON dan disinkronkan secara realtime ke setiap klien yang terhubung. Ketika Anda membuat
aplikasi lintas-platform dengan SDK Android, iOS, dan JavaScript, semua klien akan berbagi
sebuah instance Realtime Database dan menerima update data terbaru secara otomatis.

Firebase Realtime Database memungkinkan Anda untuk membuat aplikasi kolaboratif dan kaya
fitur dengan menyediakan akses yang aman ke database, langsung dari kode sisi klien. Data
disimpan di drive lokal. Bahkan saat offline sekalipun, peristiwa realtime terus berlangsung,
sehingga pengguna akhir akan merasakan pengalaman yang responsif. Ketika koneksi
perangkat pulih kembali, Realtime Database akan menyinkronkan perubahan data lokal dengan
update jarak jauh yang terjadi selama klien offline, sehingga setiap perbedaan akan otomatis
digabungkan.

Realtime Database adalah database NoSQL, sehingga memiliki pengoptimalan dan

fungsionalitas yang berbeda dengan database terkait. API Realtime Database dirancang agar
hanya mengizinkan operasi yang dapat dijalankan dengan cepat. Hal ini memungkinkan Anda
untuk membangun pengalaman realtime yang luar biasa dan dapat melayani jutaan pengguna
tanpa mengorbankan kemampuan respons. Oleh karena itu, perlu dipikirkan bagaimana
pengguna mengakses data, kemudian ​buat struktur data sesuai dengan kebutuhan tersebut​.

Tugas Pendahuluan
1. Apa itu Firebase?
2. Apa itu RNFirebase?
3. Apa perbedaan native SDK Firebase dengan web SDK Firebase?

Kegiatan Praktikum
Setup Project ​React-Native (Menghubungkan project react-native
dengan firebase)

Buat project react-native baru dengan perintah (sesuaikan nama project masing - masing)
react-native init reactfirebase
Lalu install package package react-navigation karena kita akan menggunakan navigasi
nantinya.
yarn add react-navigation@2.18.2
atau
npm install react-navigation@2.18.2 --save

Untuk package yang digunakan untuk menghubungkan project react native dengan firebase kita
akan menggunakan react native sdk (bisa dilihat di ​https://rnfirebase.io ). Pada modul ini kita
hanya melakukan setup project untuk platform android jika ingin melakukan setup untuk ios bisa
dilihat pada website ​https://rnfirebase.io
Install package react-native-firebase dengan perintah berikut,
yarn add react-native-firebase@5.0.0
atau
npm install --save react-native-firebase@5.0.0

Selanjutnya masuk ke console firebase masing - masing ( ​https://console.firebase.google.com )

lalu login dengan akun google kalian miliki.

Kemudian buat project baru dengan meng-klik ​Add Project,

Lalu isikan semua data yang diperlukan kemudian klik ​create project

Lalu klik icon android untuk menambahkan project android pada firebase.

Isikan nama project kemudian klik register app

Download google-service.json kemudian klik next terus, kemudian klik skip this step.

Kembali pada project react native, pada command line kita perlu melakukan link terhadap
firebase sdk yang telah kita install dengan perintah berikut
react-native link react-native-firebase

Kemudian pindahkan file google-services.json yang telah didapatkan dari config pada firebase
ke folder project ​android/app/google-services.json

Pada file ​android/build.gradle​​ tambahkan code berikut pada bagian dependencies

buildscript​ {
​// ...
​dependencies​ {
​// ...
​classpath​ ​'com.google.gms:google-services:4.0.1'
}
}

Kemudian pada file ​android/app/build.gradle tambahkan ​code berikut pada bagian paling
bawah
apply plugin: ​'com.google.gms.google-services'

Masih pada file android/app/build.gradle pada bagian dependencies tambahkan code berikut ini
dependencies​ {
​// This should be here already
implementation ​project​(​':react-native-firebase'​)

​// Firebase dependencies

implementation ​"com.google.android.gms:play-services-base:15.0.1"
implementation ​"com.google.firebase:firebase-core:16.0.3"

...

Membuat Auth
Untuk menggunakan module auth kita perlu melakukan import dan menambahkan module pada
file ​android/app/build.gradle ​pada bagian dependencies tambahkan baris berikut
dependencies​ {
​// ...
implementation ​"com.google.firebase:firebase-auth:16.0.3"
}

Kemudian tambahkan RNFirebaseAuthPackage pada file

android/app/src/main/java/com/[app_name]/MainApplication.java ​dengan menambahkan
code berikut
// ...
import​ io.invertase.firebase.RNFirebasePackage;
import​ io.invertase.firebase.auth.RNFirebaseAuthPackage; ​// <-- Add this
line

public​ ​class​ MainApplication ​extends​ Application ​implements

ReactApplication {
​// ...

@Override
​protected​ List<ReactPackage> getPackages() {
​return​ Arrays.<ReactPackage>​asList​(
​new​ MainReactPackage(),
​new​ RNFirebasePackage(),
​new​ RNFirebaseAuthPackage() ​// <-- Add this line
);
}
};
 ​// ...
}

Setup Project Directory

Pada folder project masing - masing buat folder ​src ​kemudian pindahkan file ​App.js kedalam
folder ​src, ​dalam folder src buat buat sebuah folder baru bernama ​pages yang akan berisi file
setiap page yang kita gunakan.
Dalam folder pages buat 4 file baru dengan nama ​Home.js​​, Login.js​​, Signup.js
SplashScreen.js ​hasil akhir dari struktur directory adalah sebagai berikut

Sebelum melanjutkan ke ​coding ​pertama kita harus melakukan setup authentication pada
firebase, masuk ke console firebase masing - masing, lalu pilih menu authentication

Klik ​Set Up sign-in method ​kemudian enable ​login ​with ​email

Lalu isikan coding berikut sesuai dengan nama filenya
Index.js
// index.js
import​ {AppRegistry} ​from​ ​'react-native'​;
import​ App ​from​ ​'./src/App'​;
import​ {name ​as​ appName} ​from​ ​'./app.json'​;

AppRegistry.registerComponent(appName, () => App);

App.js
// App.js
import​ { createStackNavigator, createSwitchNavigator } ​from​ ​'react-navigation'​;

import​ SplashScreen ​from​ ​'./pages/SplashScreen'​;

import​ Signup ​from​ ​'./pages/Signup'​;
import​ Login ​from​ ​'./pages/Login'​;
import​ Home ​from​ ​'./pages/Home'​;

const​ AuthStack = createStackNavigator(

{
SplashScreen: { screen: SplashScreen },
Login: { screen: Login },
Signup: { screen: Signup }
},
{
navigationOptions: {
header: ​null
}
}
);
const​ MainStack = createStackNavigator({
Home: { screen: Home }
});

​ efault​ createSwitchNavigator({
export​ d
Auth: { screen: AuthStack },
Main: { screen: MainStack }
});

Home.js
import​ React, { Component } ​from​ ​'react'​;
import​ { StyleSheet, View, Text, Button } ​from​ ​'react-native'​;
import​ firebase ​from​ ​'react-native-firebase'​;

export​ ​default​ ​class​ ​Home​ ​extends​ ​Component​ {

handleLogout = ​async​ () => {
​await​ firebase.auth().signOut();
​this​.props.navigation.navigate(​'Login'​);
};

render() {
​return​ (
​<​View​​ style=​{styles.wrapper}​>
​<​Text​​>​Home​</​Text​​>
​<​Button​​ title=​"LOGOUT"​ color=​"blue"​ onPress=​{this.handleLogout}​ />
​</​View​​>
);
}
}

const styles = StyleSheet.create({

wrapper: {
height: '100%'
}
});

Login.js
import​ React, { Component } ​from​ ​'react'​;
import​ { StyleSheet, View, Text, TextInput, Button } ​from​ ​'react-native'​;
import​ firebase ​from​ ​'react-native-firebase'​;

export​ ​default​ ​class​ ​Login​ ​extends​ ​Component​ {

​constructor​() {
​super​();
​this​.state = {
email: ​''​,
password: ​''
};
}

handleChangeInput = field => text => {

​this​.setState({ [field]: text });
};

handleOnSubmit = ​async​ () => {

​const​ { email, password } = ​this​.state;
​await​ firebase.auth().signInWithEmailAndPassword(email, password);
​this​.props.navigation.navigate(​'Home'​);
};

render() {
​return​ (
<View style={styles.wrapper}>
<Text style={styles.title}>LOGIN</Text>
<TextInput
style={styles.input}
placeholder="Email"
onChangeText={this.handleChangeInput('email')}
/>
<TextInput
style={styles.input}
placeholder="Password"
onChangeText={this.handleChangeInput('password')}
/>
<Button title="Submit" color="blue" onPress={this.handleOnSubmit} />
<Text style={styles.textAccount}>Doesn't have an account?</Text>
<Button
title="Signup Now"
color="blue"
onPress={() => this.props.navigation.navigate('Signup')}
/>
</View>
);
 }
}

const styles = StyleSheet.create({

wrapper: {
display: 'flex',
justifyContent: 'center',
height: '100%',
padding: 16
},
title: {
fontWeight: 'bold',
fontSize: 32,
textAlign: 'center',
marginBottom: 24
},
input: {
borderColor: 'grey',
borderWidth: 1,
marginBottom: 16
},
textAccount: {
textAlign: 'center',
marginVertical: 24
}
});

Signup.js
import​ React, { Component } ​from​ ​'react'​;
import​ { StyleSheet, View, Text, TextInput, Button } ​from​ ​'react-native'​;
import​ firebase ​from​ ​'react-native-firebase'​;

export​ ​default​ ​class​ ​Signup​ ​extends​ ​Component​ {

​constructor​() {
​super​();
​this​.state = {
email: ​''​,
password: ​''
};
}

handleChangeInput = field => text => {

 ​this​.setState({ [field]: text });
};

handleOnSubmit = ​async​ () => {

​const​ { email, password } = ​this​.state;
​await​ firebase.auth().createUserWithEmailAndPassword(email, password);
​this​.props.navigation.navigate(​'Home'​);
};

render() {
​return​ (
<View style={styles.wrapper}>
<Text style={styles.title}>SIGNUP</Text>
<TextInput
style={styles.input}
placeholder="Email"
onChangeText={this.handleChangeInput('email')}
/>
<TextInput
style={styles.input}
placeholder="Password"
onChangeText={this.handleChangeInput('password')}
/>
<Button title="Submit" color="blue" onPress={this.handleOnSubmit} />
</View>
);
}
}

const styles = StyleSheet.create({

wrapper: {
display: 'flex',
justifyContent: 'center',
height: '100%',
padding: 16
},
title: {
fontWeight: 'bold',
fontSize: 32,
textAlign: 'center',
marginBottom: 24
},
input: {
borderColor: 'grey',
 borderWidth: 1,
marginBottom: 16
}
});

SplashScreen.js
import​​ React, { Component } ​from​​ ​'react'​​;
import​​ { StyleSheet, View, ActivityIndicator } ​from​​ ​'react-native'​​;
import​​ firebase ​from​​ ​'react-native-firebase'​​;

export​​ ​default​​ ​class​​ ​SplashScreen​​ ​extends​​ ​Component​​ {

componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
setTimeout(() => {
​if​​ (user) {
​this​​.props.navigation.navigate(​​'Home'​​);
} ​else​​ {
​this​​.props.navigation.navigate(​​'Login'​​);
}
}, ​1000​​);
});
}

render() {
​return​​ (
​<View style=​​{styles.wrapper}​​>
​<ActivityIndicator size=​​"large"​​ color=​​"white"​​ />
​</View>
);
}
}

const styles = StyleSheet.create({

wrapper: {
backgroundColor: 'blue',
height: '100%',
display: 'flex',
justifyContent: 'center'
}
});
Hasil akhir dari aplikasi yang dibuat adalah sebagai berikut

Tugas Mandiri
1. Buat project akhir masing - masing dengan menggunakan firebase sebagai backend
sehingga project tersebut sudah dapat melakukan pendaftaran dan login. Sesuaikan
tampilannya dengan project yang akan anda buat.

Referensi
https://firebase.google.com/docs/database/?hl=id
https://rnfirebase.io