Membuat Aplikasi Android Sistem Informasi DesaKu - Part 9

Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 9, jadi jika anda belum mengikuti Tutorial Part 8 diharapkan anda untuk mengikuti Tutorial Part 8 terlebih dahulu untuk memudahkan anda dalam memahami Tutorial Part 9 ini.

Pada Tutorial Part 8 kita telah membuat Header dan Galeri Slide didalam file Home. Sekarang kita akan menambahkan Fitur Lainnya dan letak posisi Fitur Lainnya berada di bagian akhir setelah Galeri Slide. Didalam Fitur Lainnya ini memiliki 3 Fitur Utama yaitu Daftar DesaKu , Suara DesaKu dan  Wisata DesaKu.

Sebelum kita memulai ngoding, ada beberapa hal yang perlu kita siapkan yaitu Icon untuk Daftar DesaKu , Suara DesaKu dan  Wisata DesaKu. Anda bisa membuat sendiri Icon atau anda juga bisa mendownload Icon Gratis yang ada diinternet sudah banyak. Setelah anda mendapatkan Icon untuk Daftar DesaKu , Suara DesaKu dan  Wisata DesaKu, sekarang letakkan Icon - Icon tersebut didalam folder src/assets.

Kemudian kita sudah bisa untuk memulai ngoding untuk membuat Fitur Lainnya . Baiklah sekarang buka file Home  kemudian buat Variabel Daftar DesaKu , Suara DesaKu dan  Wisata DesaKu menggunakan  const untuk memanggil Icon - Icon yang telah kita letakkan di folder src/assets. Jadi berikut Code nya dan Letakkan setelah variabel Icon_Admin seperti berikut,

const Daftar_DesaKu = require('../assets/Daftar_DesaKu.png')
const Suara_DesaKu = require('../assets/Suara_DesaKu.png')
const Wisata_DesaKu = require('../assets/Wisata_DesaKu.png')

Kemudian kita tambahkan codingan berikut ini kedalam retrun dan letakkan posisi nya setelah Slideshow . Perhatikan gambar di bawah ini untuk lebih jelasnya.

Kemudian Tambahkan style untuk mengatur tampilan Judul Fitur Lainnya. Codingan nya seperti ini.

FiturLainnya:{
    margin:10
  },
  textNamaFiturLainnya:{
    fontSize: 20,
    fontWeight:'bold'
  }

Untuk posisi peletakannya bisa perhatikan gambar dibawah ini.

Berikut tampilan nya di aplikasi android.

Baiklah sekarang kita lanjutkan membuat 3 button yaitu Daftar DesaKu , Suara DesaKu dan Wisata DesaKu dengan menampilkan juga Icon dari masing - masing ketiga button tersebut. Tambahkan Code dibawah ini setelah </View> penutup dari <Text>Fitur Lainnya</Text> .

<View style={styles.buttonFiturLainnya}>
            <View style={styles.flex}>
              <View style={styles.flexContainer}>
                <Image source={Daftar_DesaKu} style={styles.IconFitur} />
                <Text>Daftar DesaKu</Text>
              </View>
              <View style={styles.flexContainer}>
                <Image source={Suara_DesaKu} style={styles.IconFitur} />
                <Text>Suara DesaKu</Text>
              </View>
              <View style={styles.flexContainer}>
                <Image source={Wisata_DesaKu} style={styles.IconFitur} />
                <Text>Wisata DesaKu</Text>
              </View>
            </View>
          </View>

Setelah menambakan Code diatas selanjutnya kita akan menambahkan styling untuk mengatur tinggi, lebar, ukuran text dan yang lainnya.

 buttonFiturLainnya: {
    margin: 10,
  },
  flex: {
    flexDirection: 'row',
    justifyContent:'space-between'
  },
  flexContainer:{
    height:80,
    width:'30%',
    justifyContent:'center',
    alignItems:'center'
  },
  IconFitur: {
    height: 50,
    width: 50,
    borderRadius:15
  }

Letakan  Code Style Button Fitur Lainnya di dalam Variabel styles dengan posisi setelah textNamaFiturLainnya.

Setelah beberapa Code tersebut tambahkan sesuai dengan langkah - langkah yang telah selesai dibahas diatas. Sekarang kita lihat tampilan di android nya dengan menjalankan Server Debug jika belum paham silakan anda baca lagi di Tutorial Part 4 mengenai menjalankan Server Debug.

Baiklah untuk membuat button fitur lainnya sudah selesai. Sekarang  kita tambahkan action . Action adalah apa yang terjadi jika button - button tersebut diklik. Jadi kita akan menambahka Action pada setiap Button Fitur Lainnya tersebut akan masukan File Component sesuai Nama Button dan Nama File Componet yang pernah kita difolder src/screen yang pernah kita buat pada Tutorial Part 6.

Kemudian kita juga telah mengimport file component ke dalam file index.js difolder src/navigasi.

Sekarang buka file Home dan tambahkan TouchableOpacity dibagian import component.

Kemudian tambahkan ini code ini pada button fitur lainnya.

Ketika anda klik button Daftar DesaKu akan ditampilkan File Component Daftar_DesaKu.js yang berada difolder src/screen.

Ketika anda klik button Suara DesaKu akan ditampilkan File Component Suara_DesaKu.js yang berada difolder src/screen.

Ketika anda klik button Wisata DesaKu akan ditampilkan File Component Wisata_DesaKu.js yang berada difolder src/screen.

Demikianlah Tutorial Part 9 ini, silakan lanjut ke Tutorial Part 10