Membuat Aplikasi Android Sistem Informasi DesaKu - Part 8

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

Pada Tutorial Part 7 kita telah membuat Header Pada File Home , sekarang kita akan melanjutkan penambahan fitut pada File Home yaitu kita akan nambahkan galeri gambar dalam bentuk slide dibagian bawah setelah Header di File Home.

Dalam membuat Galeri Gambar Slide tersebut kita perlu sebuah library react-native-slideshow. library ini berfungsi untuk menampilkan galeri gambar berupa bentuk slide dengan cepat dan mudah untuk react native. Anda bisa lihat di Sini untuk lebih detailnya.

Menginstall react-native-slideshow

• Buka terminal anda dan jalankan perintah berikut untuk menginstall react-native-slideshow dan tunggu hingga proses instalasi selesai.

sudo npm install --save react-native-slideshow 

Install react-native-slideshow

Install react-native-slideshow

• Setelah selesai menginstal library react-native-slideshow , kita perlu menginstal modul prop-types. Untuk menginstal prop-types di project react native kita yaitu DesaKu cukup menjalankan perintah berikut ini.

sudo npm install --save prop-types

Modul Prop-Types

Modul Prop-Types

• Jika proses install modul prop-types selesai, ada beberapa yang perlu kita setting atau merubah code pada file Slideshow.js. Untuk File Slideshow.js ini terletak didalam folder DesaKu-> node_modules -> react-native-slideshow -> Slideshow.js.
• Klik Folder node_modules dan cari folder react-native-slideshow.

cari folder react-native-slideshow

• Setelah ketemu folder react-native-slideshow, sekarang buka file Slideshow.js kemudian hapus prop-types dari import react.

Hapus PropTypes

• Kemudian Tambahkan code berikut ini, fungsinya untuk mengimport PropTypes dari library react-native-slideshow yang tadi kita install.

Import PropTypes dari react-native-slideshow

• Sekarang buka file Home dan tambahkan code berikut ini.

import Slideshow from 'react-native-slideshow';

import Slideshow

import Slideshow

• Kemudian Tambahkan Code ini didalam class.

constructor (props) {
    super(props)
    this.state = {
      position: 1,
      interval: null,
      dataSource: [
        {
          title: 'Matahari Terbit Pantai Samas',
          caption: 'Pandang Yang Indah',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-38-35.jpg?raw=true',
        }, {
          title: 'Ombak Pantai Samas',
          caption: 'Ombak Yang Membuat Tegang',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-01.jpg?raw=true',
        }, {
          title: 'Bersepeda dan Beristirahat',
          caption: 'Gegunung Krete Bantul Yogyakarta',
          url: 'https://github.com/thisWandiPratama/Documentghost/blob/master/Slide/photo_2019-12-12_22-39-06.jpg?raw=true',
        },
      ],
    };
    }

Menambahkan state

Menambahkan state

• Untuk dataSource anda bisa nambahkan dengan mengikuti format code yang sudah ada.

Format dataSource

• Jika ingin menambahkan gambar yang akan ditampilan dalam bentuk galeri slide, caranya seperti berikut ini.

Menambahkan Gambar di dataSource

• Setelah anda selesai menambahkan gambar pada dataSource, sekarang berikat jeda waktu perpindahan dari gambar 1 ke gambar selanjutnya dengan nambahkan code berikut ini, untuk lebih jelas perhatikan gambar.

componentWillMount() {
    this.setState({
      interval: setInterval(() => {
        this.setState({
          position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1
        });
      }, 5000)
    });
  }

Function componentWillMount

Function componentWillMount

• Kemudian tambahkan juga code berikut setelah-nya

  componentWillUnmount() {
    clearInterval(this.state.interval);
  }

Function componentWillUnmount()

Function componentWillUnmount()

• Setelah beberapa code diatas kita tambahkan sekarang kita tambahkan code ini ke return agar code - code yang kita tulisan sebelumnya tadi bisa render untuk ditampilkan di aplikasi androidnya.

 <Slideshow
    dataSource={this.state.dataSource}
    position={this.state.position}
    onPositionChanged={position => this.setState({ position })}
 />

• Untuk posisi letak code nya bisa anda lihat di gambar bawah ini.

Code Slideshow

• Sekarang kita jalankan Server Debug, anda bisa lihat di Toturial Part 4

npm start

Server Debug

• Maka akan Tampil Galeri Slide nya seperti ini

Galeri Slide Sudah Tampil

• Untuk menghilangkan Warnning tambahkan code berikut ini seperti digambar.

YellowBox

• Setelah itu tidak ada lagi Warnning

Tidak Ada Warnnig

Demikian untuk Tutorial Part 8 ini, jangan lupa ikuti pembahasan materi selanjutnya di Tutorial Part 9

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