Membuat Aplikasi Android Sistem Informasi DesaKu - Part 6

android Dec 12, 2019

Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 6, jadi jika anda belum mengikuti Part 5 diharapkan anda untuk mengikuti tutorial Part 5 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 6 ini.

Pada  Part 5 kita telah menginstall React Navigation dan sekarang kita akan mengimplementasikan React Navigation pada project React Native kita yaitu DesaKu.

  • Buka Project DesaKu dengan Visual Studio Code
vscode
Buka Project DesaKu dengan Visual Studio Code
  • Setelah itu kita buat folder baru dengan nama src, untuk membuat nya dengan cara klik kanan dibagian bawah kosong kemudian klik new folder.
newfolder
Klik New Folder
  • Setelah itu berikan nama folder nya src kemudian tekan Enter
src
Berikan Nama Folder

Kemudian buat folder 3  folder baru yaitu assets, screen dan navigasi didalam folder src.

  • Folder assets difungsikan untuk menampung gambar/icon.
  • Folder screen difungsikan untuk menampung file - file component JavaScript.
  • Folder navigasi difungsikan untuk mengrouting antara file component 1 ke file componet lainya.

Cara membuat folder baru di dalam folder src dengan cara klik kanan pada folder src dan Klik New Folder.

klik
Buat Folder Baru di Dalam Folder src
  • Kita Membuat Folder assets
assets
Buat Folder assets
  • Kita Membuat Folder screen
screen
Buat Folder Screen
  • Kita Membuat Folder navigasi
navigasi
Buat Folder navigasi

Setelah anda mengikuti pembuatan tiga folder tersebut yaitu folder assets, screen , dan navigasi maka anda akan melihat ada tiga folder yang ada didalam folder src seperti berikut ini.

all
Folder assets, screen dan navigasi
  • Setelah kita selesai membuat ketiga folder tersebut, maka sekarang kita membuat File beberapa Javascript didalam folder screen. Berikut nama - nama File Javascript yang akan kita buat yaitu Home.js,  Daftar_DesaKu.js , Suara_DesaKu.js , Wisata_DesaKu.js , Artikel_DesaKu.js dan Admin_DesaKu.js.
  • Untuk cara pembuatan file tersebut dengan cara `Klik Kanan pada Folder screen kemudian Klik New File setelah itu masukan Nama File. Tanda ini .js merupakan tanda bahwa file tersebut merupakan File JavaScript.
file
Buat File
  • Selanjutnya Masukan Nama File sesuai nama file pada langkah sebelumnya dan ulangi proses pembuatan untuk membuat file lainya.
buatfile
Membuat File Component Javascript
  • Jika semua file telah selesai dibuat, maka hasil seperti berikut.
hsl
Hasil File Javascript Yang Kita Buat
  • Sekarang setiap File Javascript yang kita buat tadi masukan kode berikut.
import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native'

class NamaClass extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <View>
                <Text>NamaClass</Text>
            </View>
         );
    }
}
 
export default NamaClass;

Keterangan:

  • NamaClass diganti sesuai dengan Nama File JavaScript
  • Berikut Untuk File Home.js
HOme
Home.js
  • Berikut Untuk File Daftar_DesaKu.js
desaki
Daftar_DesaKu.js
  • Berikut Untuk File Suara_DesaKu.js
suara
Suara_DesaKu.js
  • Berikut Untuk File Wisata_DesaKu.js
wisata
Wisata_DesaKu.js
  • Berikut Untuk File Artikel_DesaKu.js
Atikel
Artikel_DesaKu.js
  • Berikut Untuk File Admin_DesaKu.js
admin
Admin_Desaku.js
  • Kemudian setelah selesai, sekarang kita buat File index.js didalam folder navigasi.
  • Masukan/Import Package React Navigation berikut kedalam file index.js didalam folder navigasi
import {createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
Import React Navigation 
  • Masukan/Import File Componet Javascript yang telah kita buat didalam folder screen, letakan code ini dibawah code sebelumnya.
import Home from '../screen/Home'
import Admin_DesaKu from '../screen/Admin_DesaKu'
import Artikel_DesaKU from '../screen/Artikel_DesaKU'
import Daftar_DesaKu from '../screen/Daftar_DesaKu'
import Suara_DesaKu from '../screen/Suara_DesaKu'
import Wisata_DesaKu from '../screen/Wisata_DesaKu'
Import File Componet Javascript
  • Membuat sebuah Variabel menggunakan const dengan nama variabel AuthStackNavigator dan Nilai menggunakan function createStackNavigator() kemudian untuk paramenter menggunakan objek yang memiliki key dan value dari Nama Import Dari File Componet Javascript.
const AuthStackNavigator = createStackNavigator({
    Home : Home,
    Admin_DesaKu : Admin_DesaKu,
    Artikel_DesaKU : Artikel_DesaKU,
    Daftar_DesaKu : Daftar_DesaKu,
    Suara_DesaKu : Suara_DesaKu,
    Wisata_DesaKu : Wisata_DesaKu
})
  • Kemudian jangan lupa variabel AuthStackNavigator  di export agar file index.js ini dapat dijalankan di file lain.
export default createAppContainer(AuthStackNavigator)
  • Berikut Code Lengkapnya
import {createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

import Home from '../screen/Home'
import Admin_DesaKu from '../screen/Admin_DesaKu'
import Artikel_DesaKU from '../screen/Artikel_DesaKU'
import Daftar_DesaKu from '../screen/Daftar_DesaKu'
import Suara_DesaKu from '../screen/Suara_DesaKu'
import Wisata_DesaKu from '../screen/Wisata_DesaKu'


const AuthStackNavigator = createStackNavigator({
    Home : Home,
    Admin_DesaKu : Admin_DesaKu,
    Artikel_DesaKU : Artikel_DesaKU,
    Daftar_DesaKu : Daftar_DesaKu,
    Suara_DesaKu : Suara_DesaKu,
    Wisata_DesaKu : Wisata_DesaKu
})

export default createAppContainer(AuthStackNavigator)

Berikut Penjelasan Insyaallah Cukup Jelas. Semoga mudah dipahami.

route
Penjelasan Detail

Jangan Lupa disimpan code yang kita tambahkan pada file index.js di folder navigasi.

  • Sekarang Agar file index.js yang ada di folder navigasi dijalankan diaplikasi kita. Caranya ada kita Masuk ke File index.js yang berada diroot project dilihat digambar dan Hapus semua code yang ada di File index.js tersebut setelah itu ganti  dengan code berikuti ini.
import {AppRegistry} from 'react-native';
import Navigasi from './src/navigasi'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Navigasi);
Code index.js yang ada di root project
index
Code index.js yang ada di root project
  • Sekarang anda hapus file App.js berikut ini.
delapp
Menghapus File App.js diroot Project
  • Sekarang silakan anda jalankan Server Debug jika anda lupa silkan baca lagi Tutorial Part4. Dan jika tidak error maka tampil seperti berikut.
part6

Demkian Tutorial Part 6, selanjutnya ikuti juga tutorial Part 7.

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin