Membuat Aplikasi Android Sistem Informasi DesaKu - Part 8

android Dec 13, 2019

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
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
prop
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.
modul
cari folder react-native-slideshow
  • Setelah ketemu folder react-native-slideshow, sekarang buka file Slideshow.js kemudian hapus prop-types dari import react.
types
Hapus PropTypes
  • Kemudian Tambahkan code berikut ini, fungsinya untuk mengimport PropTypes dari library react-native-slideshow yang tadi kita install.
satubae
Import PropTypes dari react-native-slideshow
  • Sekarang buka file Home dan tambahkan code berikut ini.
import Slideshow from 'react-native-slideshow';
import Slideshow
1slide
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
2slide
Menambahkan state
  • Untuk dataSource anda bisa nambahkan dengan mengikuti format code yang sudah ada.
format
Format dataSource
  • Jika ingin menambahkan gambar yang akan ditampilan dalam bentuk galeri slide, caranya seperti berikut ini.
danau
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
sini
Function componentWillMount
  • Kemudian tambahkan juga code berikut setelah-nya
  componentWillUnmount() {
    clearInterval(this.state.interval);
  }
Function componentWillUnmount()
sini
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.
posisi
Code Slideshow
npm start
Server Debug
  • Maka akan Tampil Galeri Slide nya seperti ini
slidetampil
Galeri Slide Sudah Tampil
  • Untuk menghilangkan Warnning tambahkan code berikut ini seperti digambar.
warnning
YellowBox
  • Setelah itu tidak ada lagi Warnning
tdkwarnning
Tidak Ada Warnnig

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

Wandi Pratama

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