Membuat Aplikasi Android dengan React Native

Di kalangan Programmer , Pernahkah kalian mendengar slogan JavaScript “Write Once , Run Anywhere”.

Ya betul , itu membuat JavaScript dapat diakses di berbagai Device , bahkan hampir semua platform kita dapat menemukan Engine JavaScript itu sendiri.

Sehubungan dengan itu diantaranya kita dapat menggunakan JavaScript untuk membangun Aplikasi Android . Ada berbagai pilihan Framework untuk mendukung pembuatan Aplikasi Android , salah satunya adalah React Native .

React Native merupakan Framework yang akan mengubah kode JavaScript anda ke Native Application .

Mungkin anda tertarik untuk memulai membuat aplikasi . Kira-kira apakah yang akan anda buat menggunakan Framework React Native ini ? Apakah Store , Market , E-book atau Aplikasi istimewa buatan anda sendiri .

Baiklah , sebagai contoh kita akan mencoba membuat Aplikasi Note yang sederhana .

“Anda dapat menyalin kode dibawah ini dan menjalankannya , sebagai bentuk pengalaman dan pembelajaran “

Fungsi dari Aplikasi Note ini sebagai berikut ,

1. Memiliki Teks Editor

2. Dapat menyimpan Catatan

3. Catatan yang tidak berubah saat exit

Sebelumnya untuk awal perkenalan dan instalasi , dapat diakses disini ;

[Artikel]

Overview dari apa yang akan anda pelajari pada artikel ini adalah ;

1. Mengenal struktur React Native

2. Mengenal Fungsi- komponen nya

3. Mengenal Library

4. Mengenal Styling

Mari kita lihat Ilustrasi simple yang akan kita buat

Buka IDE Favorit anda ke direktori Project yang telah di inisialisasi sebelumnya. Disini saya akan menggunakan Visual Studio Code dan Expo CLI untuk membuat React Native Project

Oke , Kita lihat Struktur Direktori , Mari kita buat seperti digambar dengan membuat folder screens > AllNotes.js , CreateNote.js , Note.js

Quick Description ;

App.js disini sebagai Event Handler yang akan dieksekusi pertama kali oleh React Native .

screens > AllNotes.js nantinya kita akan membuat ini sebagai Fungsi Storage, dengan Note yang telah dibuat

screens>CreateNotes.js nantinya akan digunakan sebagai Fungsi pembuatan Note

screens>Note.js sebagai kode fungsi yang menyatukan CreateNotes dan AllNotes

App.js

import * as eva from “@eva-design/eva”
import { createBottomTabNavigator } from “@react-navigation/bottom-tabs”
import { NavigationContainer } from “@react-navigation/native”
import { ApplicationProvider, BottomNavigation, BottomNavigationTab } from “@ui-kitten/components”
import React from “react”
import { StyleSheet } from “react-native”
import AllNotes from “./screens/AllNotes”
import CreateNote from “./screens/CreateNote”
import Note from “./screens/Note”
const { Navigator, Screen } = createBottomTabNavigator()
const BottomTabBar = ({ navigation, state }) => (
<BottomNavigation selectedIndex={state.index} onSelect={(index) => navigation.navigate(state.routeNames[index])}>
<BottomNavigationTab title=”Create” />
<BottomNavigationTab title=”All Notes” />
</BottomNavigation>
)
const TabNavigator = () => (
<Navigator tabBar={(props) => <BottomTabBar {…props} />}>
<Screen name=”Create” component={CreateNote} />
<Screen name=”AllNotes” component={AllNotes} />
<Screen name=”Note” component={Note} />
</Navigator>
)
export default function App() {
return (
<ApplicationProvider {…eva} theme={eva.dark}>
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
</ApplicationProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
alignItems: “center”,
justifyContent: “center”
}
})

Kita akan mencoba membedah singkat dan memahami kode fungsinya pada App.js , semoga ini efektif untuk dimengerti ;

Struktur

import * as eva from “@eva-design/eva”
import { createBottomTabNavigator } from “@react-navigation/bottom-tabs”
import { NavigationContainer } from “@react-navigation/native”
import { ApplicationProvider, BottomNavigation, BottomNavigationTab } from “@ui-kitten/components”

Pada bagian import berguna untuk meng import Libraries yang ada , Biasanya Libraries diinstall melalui Node Package Manager dan berada di node_modules.

Libraries ini merupakan komponen yang akan dimasukkan ke dalam Aplikasi . Tersedia banyak sekali Libraries untuk React Native yang akan membuat Aplikasi anda menjadi unik .

import React from “react”
import { StyleSheet } from “react-native”

Pada bagian import ini adalah komponen Official dari React dan React Native

import AllNotes from “./screens/AllNotes”
import CreateNote from “./screens/CreateNote”
import Note from “./screens/Note”

Sedangkan yang ini , berguna untuk meng –import kode yang telah kita buat berasal dari direktori kita .

Import diletakan diposisi paling atas , ditujukan untuk memanggil komponen atau module libraries yang telah ada sebelumnya agar dideklarasikan ke komponen atau variable .

const { Navigator, Screen } = createBottomTabNavigator()
const BottomTabBar = ({ navigation, state }) => (
<BottomNavigation selectedIndex={state.index} onSelect={(index) => navigation.navigate(state.routeNames[index])}>
<BottomNavigationTab title=”Create” />
<BottomNavigationTab title=”All Notes” />
</BottomNavigation>
)
const TabNavigator = () => (
<Navigator tabBar={(props) => <BottomTabBar {…props} />}>
<Screen name=”Create” component={CreateNote} />
<Screen name=”AllNotes” component={AllNotes} />
<Screen name=”Note” component={Note} />
</Navigator>
)

Ini adalah bagian Variable , dimana Logika dan Proses dilakukan .

Dibagian ini terdapat Elements , Components dan props.

Dalam React const dapat juga dikatakan sebagai Elements

Anda bisa memilih penggunaan sesuai dengan aturan dari Java ES6 dengan kode Var , Let , atau Const .

Const = Untuk Constant , artinya data dalam variable tetap dan tidak berubah

Let = Digunakan untuk data yang sering berubah-ubah

Var = adalah keduanya , neutral dalam penggunaan

Dalam pemakaian Const dan Var paling sering digunakan

Lihat kode dibawah ini

<BottomNavigation selectedIndex={state.index} onSelect={(index) => navigation.navigate(state.routeNames[index])}>

Ini adalah props .

Apa itu props ?

Kepanjangannya adalah Property . props merupakan input atau nilai bagaimana kode itu bekerja . Biasanya props ini ada terdapat guide dari halaman Libraries si pembuat seperti React JS agar mengetahui input apa yang harusnya diisi . props juga dapat diturunkan menjadi props.children untuk digunakan ke Components .

export default function App() {
return (
<ApplicationProvider {…eva} theme={eva.dark}>
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
</ApplicationProvider>
)
}

Ini adalah bagian Components , berfungsi untuk me render Variable yang akan ditampilkan pada halaman

Salah satu keunikan Components adalah adanya kode return

Pada kode export default digunakan untuk meng eksport kode kita yang nantinya bisa di panggil dan re-useable menggunakan import .

Anda dapat me –wrap kode Components sesuai penggunaan seperti <NavigationContainer> </NavigationContainer>

Perlu diingat , penulisan Components harus diawali huruf kapital sebagai contoh <NavigationContainer> dan bukan <navigationcontainer>

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
alignItems: “center”,
justifyContent: “center”
}
})

Dan bagian ini adalah untuk Styling , React Native menggunakan Kode Styling tersendiri yang hampir sama dengan CSS namun untuk komponen Native .

AllNotes.js

import AsyncStorage from “@react-native-community/async-storage”
import { useFocusEffect, useNavigation } from “@react-navigation/native”
import { Divider, List, ListItem, Text } from “@ui-kitten/components”
import React, { useState } from “react”
import { StyleSheet, View } from “react-native”
export default function AllNotes() {
const [ notes, setNotes ] = useState([])
const navigation = useNavigation()
useFocusEffect(
React.useCallback(() => {
getNotes()
}, [])
)
const getNotes = () => {
AsyncStorage.getItem(“NOTES”).then((notes) => {
setNotes(JSON.parse(notes))
})
}
const renderItem = ({ item, index }) => (
<ListItem
title={<Text category=”h5">{item}</Text>}
onPress={() =>
navigation.navigate(“Note”, {
singleNote: item
})}
/>
)
return (
<View style={{ backgroundColor: “#222B45”, flex: 1 }}>
<Text style={styles.title} category=”h1">
Notes
</Text>
<List
style={styles.container}
data={notes.reverse()}
ItemSeparatorComponent={Divider}
renderItem={renderItem}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
fontSize: 20
},
item: {
marginVertical: 4
},
title: {
textAlign: “center”,
marginTop: 50
},
notes: {
fontSize: 24
}
})

CreateNote.js

import AsyncStorage from “@react-native-community/async-storage”
import { useNavigation } from “@react-navigation/native”
import { Button } from “@ui-kitten/components”
import React, { useState } from “react”
import { Dimensions, KeyboardAvoidingView, StyleSheet, TextInput, View } from “react-native”
export default function CreateNote() {
const [ note, setNote ] = useState(“”)
const navigation = useNavigation()
const saveNote = async () => {
const value = await AsyncStorage.getItem(“NOTES”)
const n = value ? JSON.parse(value) : []
n.push(note)
await AsyncStorage.setItem(“NOTES”, JSON.stringify(n)).then(() => navigation.navigate(“AllNotes”))
setNote(“”)
}
return (
<View style={styles.container}>
<TextInput
value={note}
onChangeText={setNote}
style={{ color: “#fff”, fontSize: 22 }}
multiline={true}
autoFocus
selectionColor=”#fff”
/>
<KeyboardAvoidingView behavior={Platform.OS === “ios” ? “padding” : “height”} style={styles.bottom}>
<Button style={StyleSheet.button} appearance=”filled” onPress={saveNote}>
Create Note
</Button>
</KeyboardAvoidingView>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#222B45”,
color: “white”,
padding: 30,
paddingTop: 80,
width: Dimensions.get(“window”).width
},
bottom: {
flex: 1,
justifyContent: “flex-end”,
marginBottom: 36
},
button: {
marginBottom: 30
}
})

Note.js

import AsyncStorage from “@react-native-community/async-storage”
import { useFocusEffect, useNavigation } from “@react-navigation/native”
import { Button, Text } from “@ui-kitten/components”
import React, { useState } from “react”
import { StyleSheet, View } from “react-native”
export default function Note({ route }) {
const [ notes, setNotes ] = useState([])
const { singleNote } = route.params
const navigation = useNavigation()
useFocusEffect(
React.useCallback(() => {
getNotes()
}, [])
)
const getNotes = () => {
AsyncStorage.getItem(“NOTES”).then((notes) => {
setNotes(JSON.parse(notes))
})
}
const deleteNote = async () => {
const newNotes = await notes.filter((note) => note !== singleNote)
await AsyncStorage.setItem(“NOTES”, JSON.stringify(newNotes)).then(() => navigation.navigate(“AllNotes”))
}
return (
<View style={{ backgroundColor: “#222B45”, flex: 1 }}>
<Text style={styles.title} category=”h1">
Notes
</Text>
<Text style={{ fontSize: 22, margin: 20 }}>{singleNote}</Text>
<View style={styles.bottom}>
<Button onPress={deleteNote} style={styles.button}>
Delete
</Button>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#fff”,
alignItems: “center”,
justifyContent: “center”
},
item: {
marginVertical: 4
},
title: {
textAlign: “center”,
marginTop: 50
},
notes: {
fontSize: 24
}
})

Setelah semua kode ditulis , Pastikan Developer Tools dari Bundler berjalan dengan begitu hasilnya dapat kita lihat di Expo Go pada Android kita .

Struktur JSX dengan Function Component akan memudahkan kita untuk dapat memahami kode sebagai awal untuk start . Dengan terus Praktik dan membaca Guideline adalah salah satu proses Debugging Developer , anda mungkin akan mengalami hal itu . Tetapi jangan khawatir , lingkungan komunitas React dan JavaScript cukup besar , semua yang anda butuhkan ada di internet dan kreatifitas yang berkembang .

Jika anda menemukan kesulitan dalam praktik gunakan ini sebagai Source code Prototype nya

[Code]

$ cd direktori
$ npm install 
atau 
$ yarn install
$ expo start

Semoga panduan singkat dalam tulisan ini bermanfaat dan jangan lupa untuk tetap berlatih dan membaca petunjuk pada halaman Official nya sebab itu adalah pedoman bagi Programmer yang baik , Semangat ~!