Computer Laboratory Handbook

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

Lab. Mobile Applications

Development
TI0074

Suminar Ariwibowo
Course Version: 2018 V 1.0
Information Systems Program, Copyright ©2018
Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

COURSE OVERVIEW
COURSE PREREQUISITES
Algoritma dan Pemrograman, Perancangan Web, Pengembangan Aplikasi Web

COURSE GOALS
Setelah mempelajari dan mempraktikkan mata kuliah ini, mahasiswa diharapkan mampu membangun
aplikasi mobil yang dapat dijalankan pada sistem operasi Android, dan IOS dengan memanfaatkan
React Native. Mahasiswa akan mempraktikkan project React Native dalam menghasilkan aplikasi
mobil yang akan dijalankan pada mobile device sesuai dengan masing-masing sistem operasi yang
telah disebutkan sebelumnya.

COURSE OBJECTIVES
Setelah mempelajari dan mempraktikkan mata kuliah ini, mahasiswa diharapkan mampu:
• mempraktikkan konsep, struktur, dan metode dalam pengembangan aplikasi mobil
• mempraktikkan cara kerja React Native ketika membangun aplikasi mobil
• mempraktikkan interaksi dengan perangkat lunak yang telah terpasang pada kernel sistem operasi
• mempraktikkan setiap perangkat keras yang tersedia pada kernel Android dengan memanfaatkan
plug-in yang dipasang pada project aplikasi mobil
• membangun sebuah aplikasi mobil yang dapat dijalankan pada Android dengan memanfaatkan
React Native
• mengembangkan aplikasi mobil seusai dengan kebutuhan bisnis

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-1

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

MODUL 6
REACT COMPONENTS
MODULE OVERVIEW
Modul ini akan membahas, dan mempraktikkan beberapa komponen yang tersedia dari react-native.
Library react-native menyediakan komponen dan API yang dapat digunakan dalam membangun UI/UX
aplikasi mobile.

MODULE OBJECTIVES
Setelah mempelajari dan pempraktikkan Modul 6, mahasiswa diharapkan dapat :
• Memahami konsep react components
• Mampu memahami dan mengimplementasikan Scroll View
• Mampu memahami dan mengimplementasikan dalam menampilkan file image pada aplikasi
mobile
• Mampu memahami dan mengimplementasikan List View dalam menampilkan data array

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-2

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

SCROLL VIEW

Secara default container View pada react native tidak memiliki scroll jika terjadi overflow. Untuk
kita membutuhkan komponen ScrollView yang akan meng-generate scroll ketika konten pada
container terjadi overflow. ScrollView dapat diatur berdasarkan flexDirection, yaitu horizontal dan
vertical (default).

LATIHAN 6.1

Berikut adalah contoh penggunaan sederhana ScrollView. Buatlah file baru dengan nama
src/WithScroll.js dan tulis code berikut :

import React, { Component } from 'react';

import { View, ScrollView } from 'react-native';

export default class WithScroll extends Component {

render() {
return (
<ScrollView>
<View style={{ height: 400, backgroundColor: 'powderblue'}} />
<View style={{ height: 400, backgroundColor: 'red'}} />
<View style={{height: 400, backgroundColor: 'steelblue'}} />
</ScrollView>
);
}
};

LATIHAN 6.2

Berikut adalah contoh penggunaan props horizontal pada ScrollView untuk menentukan arah dari
scroll. Biasanya ini diikuti dengan flexDirection row pada style container.

import React, { Component } from 'react';

import { View, ScrollView } from 'react-native';

export default class WithScroll extends Component {

render() {
return (
<ScrollView
horizontal
style={{flexDirection : 'row'}}
>
<View style={{width : 400,height: 400, backgroundColor:
'powderblue'}} />
2018 <View style={{width
©2018 : 400,height:
STMIK 400,
Mikroskil. All backgroundColor:
rights reserved. 'red'}} />
1-3
<View style={{width : 400,height: 400, backgroundColor:
'steelblue'}} />
Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

<View style={{width : 400,height: 400, backgroundColor:

'powderblue'}} />
<View style={{width : 400,height: 400, backgroundColor: 'red'}} />
<View style={{width : 400,height: 400, backgroundColor:
'steelblue'}} />
</ScrollView>
);
}
}

Gambar 6 1 | Hasil Latihan 6.2

IMAGE

Image adalah komponen pada react-native yang digunakan untuk menampilkan data image dari
berbagai jenis/lokasi file baik itu dari network, local disk, ataupun data base64. Khusus untuk data
image dari network dan local disk, dimensi (widht & height) wajib diatur secara manual. Berbeda
dengan image pada aplikasi web yang dapat menentukan dimensi image secara otomatis, Image di
react native (khusus local & network) harus diatur secara manual.

Untuk menampilkan file image pada komponen Image kita dapat menggunakan props source, dengan
metode load yang berbeda untuk local disk & network.

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-4

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

Contoh load image local disk menggunakan require :

<Image source={require('../assets/images/my-image.jpg')} />

Contoh load image dari network menggunakan {uri : ‘’} :

<Image source={{uri : 'http://mywebsite.com/images/user.png'}} />

LATIHAN 6.3

Berikut adalah contoh penggunaan Image untuk menampilkan file image dari local disk. Downloadlah
file image dari cloud lab, dan copy-paste ke folder project anda (pastikan file image terletak di folder
assets/images). Buatlah file baru dengan nama src/LogoMikroskil.js :

import React, { Component } from 'react';

import { View, Image } from 'react-native';

export default class LogoMikroskil extends Component {

render() {
return (
<View style={{alignItems : 'center', margin : 20}}>
<Image
style={{width: 300, height : 300}}
source={require('../assets/images/logo-mikroskil.png')} />
</View>
);
}
}

Gambar 6 2 | Hasil Latihan 6.3

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-5

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

LATIHAN 6.4

Dari contoh diatas, terlihat bahwa ketika komponen Image menampilkan file image, dimensi image
tidak mengikuti aspect ratio nilai width di style sehingga terdapat bagian image yang terpotong.

Gambar 6 3 | Perbandingan file asli dengan aplikasi

Agar tampilan image dapat mengikuti ratio width yang telah ditentukan, maka kita perlu menghitung
aspect ratio yang akan menentukan nilai height dari Image. Untuk mendapatkan aspect ratio kita
dapat menggunakan function dan props onLoad pada komponen Image, seperti contoh berikut :

import React, { Component } from 'react';

import { View, Image } from 'react-native';

export default class LogoMikroskil extends Component {

constructor(props){
super(props)

this.state = {
width : 300,
height : 0
}
}

resizeImage = (event)=>{
let widthOrigin = event.nativeEvent.source.width
let heightOrigin = event.nativeEvent.source.height
let aspectRatio = widthOrigin / heightOrigin
this.setState({
height : this.state.width / aspectRatio
})
}

render() {
return (
<View style={{alignItems : 'center', margin : 20}}>
<Image
onLoad={this.resizeImage}
style={{width: this.state.width, height : this.state.height}}
source={require('../assets/images/logo-mikroskil.png')} />
</View>
);
2018 } ©2018 STMIK Mikroskil. All rights reserved. 1-6
}
Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

</View>
);
}
}

Gambar 6 4 |Hasil Latihan 6.4

IMAGE BACKGROUND

Komponen ImageBackground pada react-native dapat digunakan untuk membuat container dengan
berlatar image. Secara garis besar, dalam menentukan load source file image dari ImageBackground
masih sama dengan komponen Image yaitu dengan props source dengan perbedaan lokasi file local
dan network.

LATIHAN 6.5

Berikut adalah contoh penggunaan komponen ImageBackground yang akan digunakan sebagai
container parent dari komponen screen. Buatlah file baru dengan nama
src/WithImageBackground.js dan tulislah kode berikut :

import React, { Component } from 'react';

import { View, ImageBackground } from 'react-native';

export default class WithImageBackground extends Component {

render() {
return (
<ImageBackground style={{width : '100%', height : '100%'}}
source={require('../assets/images/background-image.jpg')}>
<View
style={{height : 400, borderRadius : 10,
marginHorizontal : 10, marginTop : 50,
backgroundColor : '#fff'}}>

</View>

</ImageBackground>
);
}
2018 ©2018 STMIK Mikroskil. All rights reserved. 1-7
}
Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

</ImageBackground>
);
}
}

Gambar 6 5 | Image Background

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-8

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

FLAT LIST

FlatList adalah salah satu komponen react-native untuk menampilkan data item dalam bentuk list.
FlatList memiliki fitur direction yang dapat menentukan arah dari scroll list yaitu horizontal dan
vertical (default). FlatList memiliki props data untuk data sumber (array) yang akan ditampilkan dan
renderItem untuk render item dari masing-masing item list. FlatList sendiri akan mengenerate scroll
jika terjadi overflow tanpa harus menggunakan komponen ScrollView.

LATIHAN 6.6

Berikut adalah contoh sederhana untuk menampilkan data list dari variable state array. Buatlah file
baru dengan nama src/ListMahasiswa.js dan tulislah kode berikut :

import React, { Component } from 'react';

import { View, FlatList, Text } from 'react-native';

export default class ListMahasiswa extends Component {

constructor(props){
super(props)
this.state = {
mahasiswa : [
'Jon Doe', 'Jon Snow', 'Daenrys Targaryen', 'Sansa Stark',
'Tyrion Lannister', 'Arya Stark'
]
}
}
render() {
return (
<View style={{flex : 1}}>
<FlatList
keyExtractor={(item, index)=> index.toString()}
data={this.state.mahasiswa}
renderItem={({item, index})=>(
<View
style={{padding : 10, borderBottomColor: '#dedede',
borderBottomWidth : 1}}
key={index}>
<Text>{item}</Text>
</View>
)}
/>
</View>
)
}
}

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-9

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

LATIHAN 6.7

Berikut adalah contoh kombinasi FlatList dengan Image dengan direction vertical (default). Buatlah
file baru dengan nama src/ListImages.js dan tulislah kode berikut :

import React, { Component } from 'react';

import { View, StyleSheet, Image, Dimensions, FlatList } from 'react-
native';

const styles = StyleSheet.create({

container : {
flex : 1
}
})

export default class ShowImages extends Component {

constructor(props){
super(props)

this.state = {
images : [{
image : require('../assets/images/lion-king.jpg'),
width : '100%',
height : 1
},
{
image : require('../assets/images/shazam.jpg'),
width : '100%',
height : 1
},
{
image : require('../assets/images/spiderman-animated.jpg'),
width : '100%',
height : 1
}, {
image : require('../assets/images/dragon.jpg'),
width : '100%',
height : 1
}]
}
}

resizeImageKeepAspectRatio = (event, index)=>{

let widthScreen = Dimensions.get('window').width
let widthOrigin = event.nativeEvent.source.width
let heightOrigin = event.nativeEvent.source.height
let aspectRatio = widthOrigin / heightOrigin
var items = this.state.images
items[index].width = widthScreen
items[index].height = widthScreen / aspectRatio
this.setState({
2018 images : items
©2018 STMIK Mikroskil. All rights reserved. 1 - 10
})
}
Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

resizeImageKeepAspectRatio = (event, index)=>{

let widthScreen = Dimensions.get('window').width
let widthOrigin = event.nativeEvent.source.width
let heightOrigin = event.nativeEvent.source.height
let aspectRatio = widthOrigin / heightOrigin
var items = this.state.images
items[index].width = widthScreen
items[index].height = widthScreen / aspectRatio
this.setState({
images : items
})
}

render() {
return (
<View style={styles.container}>
<FlatList
style={{flex : 1}}
keyExtractor={(item,index)=> index.toString()}
data={this.state.images}
renderItem={({item, index})=>(
<Image key={index}
onLoad={(event)=>
this.resizeImageKeepAspectRatio(event,index)}
style={{width : item.width, height : item.height}}
source={item.image} />
)} />
</View>
)
}
}

2018 ©2018 STMIK Mikroskil. All rights reserved. 1 - 11

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

Gambar 6 6 | Hasil Latihan 6.7

2018 ©2018 STMIK Mikroskil. All rights reserved. 1 - 12

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

TUGAS 6.1
Buatlah FlatList & Image dengan direction horizontal yang diambil dari contoh latihan 6.7 diatas.

2018 ©2018 STMIK Mikroskil. All rights reserved. 1 - 13

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

2018 ©2018 STMIK Mikroskil. All rights reserved. 1-1