Membuat Aplikasi Android Sistem Informasi DesaKu - Part 6

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

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.

Klik New Folder

• Setelah itu berikan nama folder nya src kemudian tekan Enter

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.

Buat Folder Baru di Dalam Folder src

• Kita Membuat Folder assets

Buat Folder assets

• Kita Membuat Folder screen

Buat Folder Screen

• Kita Membuat Folder 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.

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.

Buat File

• Selanjutnya Masukan Nama File sesuai nama file pada langkah sebelumnya dan ulangi proses pembuatan untuk membuat file lainya.

Membuat File Component Javascript

• Jika semua file telah selesai dibuat, maka hasil seperti berikut.

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.js

• Berikut Untuk File Daftar_DesaKu.js

Daftar_DesaKu.js

• Berikut Untuk File Suara_DesaKu.js

Suara_DesaKu.js

• Berikut Untuk File Wisata_DesaKu.js

Wisata_DesaKu.js

• Berikut Untuk File Artikel_DesaKu.js

Artikel_DesaKu.js

• Berikut Untuk File Admin_DesaKu.js

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.

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

Code index.js yang ada di root project

• Sekarang anda hapus file App.js berikut ini.

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.

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

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 12 Desember 2019.