Gojek Clone

Expo
Expo sendiri merupakan suatu set tools, library, dan services yang digunakan untuk
memudahkan kode React Native apps. Berikut beberapa keunggulan menggunakan Expo.

Expo menggunakan SDK Expo, jadi kita tidak membut uhkan Android Studio dan Xcode.

Pengaturan aplikasi lebih mudah, sehingga bisa langsung ditambahkan pada file
app.json.

Mode debug aplikasi dapat dijalankan langsung di device dengan aplikasi Expo pada
Android dan iOS dengan membagikan link ataupun QR Code dari project yang telah
dibuat.

Beberapa fitur yang sering digunakan seperti Push Notification dan Social Media
Authentication (facebook login) sudah disediakan oleh Expo.

Beberapa library seperti maps, camera, dan gallery sudah di sediakan Expo sehingga
tidak perlu menambahkan library serta juga dapat berjalan pada Android maupun iOS.

Membuat versi rilis aplikasi menjadi lebih mudah karena dilakukan oleh server Expo
(Expo akan memberikan link untuk mendownload versi rilis aplikasi kita)

Snack Expo
Snack expo adalah salah satu teks editor online yang dapat membuat aplikasi react native
expo. Kelebihan dari snack expo kita bisa langsung melakukan simulasi tanpa
membut uhkan AVD (Android Virtual Device).

Silahkan akses https://snack.expo.dev/ jika belum memiliki akun silahkan mendaftar dan
login pada snack expo.
1. Struktur Folder Projek

Nama Folder/File Fungsi

assets untuk menyimpan file assets

seperti gambar, icon, video dll

components folder yang digunakan untuk

menyimpan komponen file dari
projek.

App.js Default Komponen utama

dalam project React-Native

package.json List komponen library yang

digunakan dalam projek

Struktur Coding
Coding Fungsi

Melakukan import komponen

atau libaray yang akan
digunakan pada

Main method App()

mengembalikan/ret urn
komponen dari react native
untuk menghasilkan sebuah
output tampilan mobile apps.
Note: setiap komponen wajib
dibungkus dengan fragment

Stylesheet merupakan salah

satu object yang mirip dengan
CSS pada web yang berguna
untuk mendefinisikan style
agar tampilan UI dari mobile
lebih menarik.
2. Implementasi UI Gojek

Sebagai front end mobile developer, kita harus dapat mengimplementasikan desain yang
sudah dibuat oleh UI/UX desainer. Pada modul ini kita akan terapkan desain dari UI/UX
desainer ke dalam react native menggunakan expo. Untuk desainnya bisa dilihat di
https://www.figma.com/proto/Jye1gdSH6OmGHyKjqkK3fA/Gojek-UI-Clone-PKM-
Politeknik-Calt ex-Riau?node-id=1%3A33&scaling=min-zoom&page-id=0%3A1.

Sebelum kita masuk ke coding kita harus analisa komponen yang akan diimplementasikan
pada coding.

Catatan :

1. Kotak warna merah : menu dari aplikasi

2. Kotak warna ungu : search bar

3. Kotak warna kuning : menu gopay

4. Kotak warna biru : menu utama

Sebelum kita membuat komponen-komponen diatas langkah awal yang harus kita lakukan
adalah mendefinisikan komponen UI yang akan kita gunakan seperi warna dan gambar.

Warna.js

Agar warna yang kita gunakan dalam projek konsisten, kita buat file warna.js untuk
mendifinisikan code warna yang akan kita turunkan pada setiap komponen.
 1.
2. Buat file Warna.js pada folder components
Masukkan coding dibawah ini. Code warna sudah disesuaikan dengan figma.

Icon dan Gambar

import gambar berikut ini pada folder assets atau download di

https://drive.google.com/file/d/1J0kNgPaLgJrTGbLMOw1_DE7BsqULZMLu/view?
usp=sharing

Nama File Gambar

avatar.png

car.png

club.png

food.png

gopay.png

lainnya.png

mart.png

motor.png

mobile.png

send.png
Menu.js

Search.js

Gopay.js
App.js

import * as React from 'react';

import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import Menu from './components/Menu'

import Search from './components/Search'
import Gopay from './components/Gopay'

export default function App() {

return (
<View style={{marginTop:Constants.statusBarHeight}}>
<Menu />
<Search />
<Gopay />
</View>
);

Menu.JS

Silahkan tambahkan coding pada diantara <view styles={styles.main}></view>

<View style={styles.mainMenu}>
<View style={styles.kotakActive}>
<Text style={styles.textActive}>Beranda</Text>
</View>
<View style={styles.kotak}>
<Text style={styles.textUnActive}
>Promo</Text>
</View>
<View style={styles.kotak}>
 <Text style={styles.textUnActive}>Pesanan</Text>
</View>
<View style={styles.kotak}>
<Text style={styles.textUnActive}>Chat</Text>
</View>
</View>

Silahkan tambahkan stylesheet berikut.

// Some code
main:{
justifyContent:'center',
backgroundColor:Hijau2,
height:80
},
mainMenu:{
height:50,
backgroundColor:Hijau1,
marginLeft:15,
marginRight:15,
borderRadius:30,
flexDirection:'row',
alignItems:'center',
paddingLeft:5,
paddingRight:5,
},
textUnActive:{
fontSize:14,
fontWeight:'700',
color:'white',
justifyContent:'center',
alignItems:'center'
},
textActive:{
fontSize:14,
fontWeight:'700',
color:Hijau1
},
kotak:{
height:40,
borderRadius:100,
flex:1,
justifyContent:'center',
alignItems:'center'
},
 kotakActive:{
backgroundColor:'white',
height:40,
borderRadius:100,
flex:1,
justifyContent:'center',
alignItems:'center'

Search.JS

Silahkan tambahkan coding pada diantara <view styles={styles.main}></view>

Silahkan tambahkan stylesheet berikut.

// Some code
main:{
paddingLeft:15,
paddingRight:15,
marginTop:23,
marginBottom:15,
flexDirection:'row'
},
formCari:{
height:35,
borderRadius:30,
borderWidth:1,
borderColor:Hitam5,
color:Hitam4,
paddingLeft:40,
flex:1
Gopay.JS

Silahkan Buat function GopayCard untuk tampilan card putih dari gopay.

Silahkan Buat function Menu untuk beberapa menu atau fitur dari gopay ( top up,
kirim)
 Silahkan tambahkan coding pada diantara <view styles={styles.main}></view>

<View style={styles.card}>
<GopayCard />
<Menu />
</View>

Silahkan tambahkan stylesheet berikut.

// Some code
main:{
justifyContent:'center',
paddingLeft:15,
paddingRight:15,
},
card:{
backgroundColor:Biru1,
borderRadius:15,
padding:16,
flexDirection:'row'
},
cardMenu:{
backgroundColor:'white',
width:24,
justifyContent:'center',
alignItems:'center',
height:24,
borderRadius:8
MenuUtama js

Silahkan buat data object untuk menampilkan menu