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 

• 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

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

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

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

• Sekarang buka file Home dan tambahkan code berikut ini.

import Slideshow from 'react-native-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',
        },
      ],
    };
    }

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

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

• 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)
    });
  }

• Kemudian tambahkan juga code berikut setelah-nya

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

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

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

npm start

• Maka akan Tampil Galeri Slide nya seperti ini

• Untuk menghilangkan Warnning tambahkan code berikut ini seperti digambar.

• Setelah itu tidak ada lagi Warnning

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