Cara Membuat Aplikasi Dengan React Native dan Expo
Mengingat perkembangan pembuatan aplikasi smartphone yang semakin maju, saat ini banyak cara mudah dan cepat bagi para mobile apps developer dalam mengembangkan sebuah aplikasi. Dalam artikel ini kita akan membahas cara termudah untuk membuat suatu aplikasi dengan React Native dan Expo. Seperti yang sudah kamu ketahui, secara singkat React Native adalah framework JavaScript yang digunakan untuk mengembangkan aplikasi mobile yang dapat berjalan pada platform berbasis Android dan iOS sekaligus. Sedangkan Expo adalah adalah framework yang memudahkan Developer dalam mengembangkan aplikasi dengan React Native. 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 membutuhkan 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)
React Native Expo Tutorial
Setelah kamu memahami apa itu React Native dan Expo, selanjutnya kita akan membahas pembuatan mobile app sederhana dengan menggunakan Create React Native App dan Expo. Berikut langkah - langkah Membuat login sederhana berikut.
- Sebelumnya pastikan kamu telah download dan Instal Node.js terlebih dahulu.
- Lalu Install Expo di smartphone yang bisa kamu download melalui playstore. Aplikasi Expo ini berfungsi sebagai Live Preview hasil compile ReactJS anda di HP untuk melihat hasil atau debugging.
- Setelah itu install React native dengan cara buka cmd atau terminal kalian. sebelum kita install react native di windows kita akan coba install expo CLI terlebih dahulu.
npm install -g expo-cli
- Jika expo CLI sudah terinstall, selanjutnya kita akan membuat React Native project nya.
D:\>expo init babastudioapknew
- Di drive D pada komputer, kita akan membuat folder aplikasi dengan nama babastudioapknew, lalu tunggu proses instalasinya hingga selesai.
- Jika sudah terinstall sekarang buka text editor, di tutorial ini kita akan menggunakan Visual Studio Code. Di dalam folder projek atau di dalam folder babastudioapknew kita membuat folder src => dan di dalam folder src buat folder baru yaitu scren dan config, di dalam folder scren buat tiga file.js yang pertama buat file Navbar.js yang kedua Footer.js dan yang terakhir Login.js
- Pertama buka file Navbar.js dan tambahkan script seperti berikut.
import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button, Icon,Form, Item, Input, Label,Textarea,Left,Body,Title,Right, Row, Tabs, Tab } from 'native-base';
export default class Navbar extends Component {
render() {
return (
<Header noShadow>
<Left>
<Button transparent>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title style={{marginLeft:40}}>Babastudio</Title>
</Body>
<Right>
<Button transparent>
<Icon name="menu" />
</Button>
</Right>
</Header>
);
}
}
- Kemudian Buka file Footer.js dan tambahkan script berikut:
import React, { Component } from 'react';
import { Container, Header, Content, Footer, FooterTab, Button, Icon, Badge,Text } from 'native-base';
import { AppLoading } from 'expo';
import { Ionicons } from '@expo/vector-icons';
export default class FooterTabs extends Component {
state = {
fontsAreLoaded: false,
};
async componentWillMount() {
await Expo.Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({ fontsAreLoaded: true });
}
render() {
if (!this.state.fontsAreLoaded) {
return <AppLoading />;
}
return (
<Footer >
<FooterTab>
<Button badge vertical>
<Badge><Text>2</Text></Badge>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button vertical>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button active badge vertical>
<Badge ><Text>51</Text></Badge>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
- Kemudian buka lagi file Login.js
import React, { Component } from 'react';
import { Container, Header, Content, Item, Input,Label,Button,Text,H1 } from 'native-base';
export default class Login extends Component {
render() {
return (
<Container>
<Text style={{marginTop:60,textAlign:'center'}}><H1>Login Sistem Academy</H1></Text>
<Content style={{marginHorizontal:12,marginTop:30}}>
<Item rounded>
<Input placeholder='Masukan Username Anda'/>
</Item>
<Item rounded style={{marginTop:30}}>
<Input placeholder='Masukan Password Anda'/>
</Item>
<Button rounded block style={{marginTop:20, }}>
<Text>Login Sistem</Text>
</Button>
</Content>
</Container>
);
}
}
- Jika sudah membuat form Login langkah selanjutnya kita buka file App.js dan tambahkan script berikut.
import React, { Component } from 'react';
import { Container, Header, Content, Footer, FooterTab, Button, Icon,Form, Item, Input, Label,Textarea,Left,Body,Title,Right, Row } from 'native-base';
import { StyleSheet, Text, View } from 'react-native';
import Navbar from './src/scren/Navbar';
import FooterTabs from './src/scren/Footer';
import Login from './src/scren/Login';
export default class App extends Component {
render() {
return (
<Container>
<Navbar/>
<Login/>
<FooterTabs/>
</Container>
);
}
}
const styles = StyleSheet.create({
headermenu: {
marginTop: 20,
color:'white',
alignItems: 'center',
justifyContent: 'center',
},
});
- Jika sudah jalankan cmd atau terminal kalian.
D:\>expo init babastudioapknew
- Langkah terakhir, silahkan buka aplikasi Expo di smartphone dan scan QR Code nya.
Demikian penjelasan serta tutorial membuat aplikasi dengan React Native dan Expo. Untuk kamu yang ingin mempelajari React Native dan Expo lebih dalam lagi, kamu bisa mengikuti program Full Stack JavaScript di Bootcamp Hacktiv8. Kamu akan mempelajari Expo React Native ini di Fase 3 untuk membuat Final Project. Materi - materi yang akan dipelajari secara umum yaitu, React Native, React Navigation, dan React Native Gesture Handler. Nah, untuk keterangan lebih lanjut dan pendaftaran, kamu bisa mengunjungi tautan berikut.
