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 3
INPUT & FUNCTION
MODULE OVERVIEW
Dalam pengembangan sebuah aplikasi dibutuhkan komponen-komponen untuk menampung masukkan
dari pengguna. Masukkan dari pengguna dapat berupa text, numerik, atau bentuk nilai yang lainnya.
Di React Native terdapat komponen untuk menampung input text, yaitu TextInput. Pada modul ini
kita akan membahas penggunaan TextInput beserta attribute-attributenya.

MODULE OBJECTIVES
Setelah mempelajari dan pempraktikkan Modul 3, mahasiswa diharapkan dapat :
 Merancang antar-muka TextInput
 Mampu memahami gesture, dan event input dari aplikasi mobile
 Mampu mengimplementasikan event, dan gesture pada aplikasi mobile

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

TEXT INPUT

Komponen React untuk menampung masukkan teks dari pengguna. TextInput mendukung
penanganan masukkan teks, numerik, email, dll. TextInput adalah bagian dari library react-native.

LATIHAN 3.1

Berikut adalah contoh penggunaan hanya komponen TextInput di react native. Buatlah file baru di
project react native anda dengan nama src/ContohTextInput.js, dan buat kode seperti berikut :

import React, {Component} from 'react';

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

export default class ContohTextInput extends Component{

render(){
return(
<View >
<TextInput
placeholder="Masukkan email anda" />

</View>
)
}
}

Untuk menampilkan ContohText diatas, modifikasilah file index.js anda seperti berikut :

import {AppRegistry} from 'react-native';

import ContohTextInput from './src/ContohTextInpug'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => ContohTextInput);

Simpan, dan jalankan perintah di command prompt : react-native run-android untuk menjalankan
aplikasi di emulator/device. Hasil dari source diatas akan menampilkan komponen TextInput tanpa
style yang akan menghasilkan tampilan antar-muka TextInput yang polos.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

LATIHAN 3.2

Berikut adalah contoh penggunaan style pada TextInput, dengan menambahkan beberapa property
stylesheet :

import React, {Component} from 'react';

import {TextInput, View, StyleSheet} from 'react-native';

const styles = StyleSheet.create({ //create new stylesheet

container : {
padding : 10,
textAlign : 'center',
margin: 10
},
input : {
height : 40,
borderBottomWidth : 1,
borderColor : '#fcfcfc',
backgroundColor : 'rgba(0,0,0,0.1)',
color: '#444',
marginBottom : 10
}
})

export default class ContohTextInput extends Component{

render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Masukkan email anda"
placeholderTextColor="rgba(0,0,0,0.3)" />

</View>
)
}
}

placeholderTexColor adalah props di TextInput untuk merubah warna teks dari placeholder.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

PROPS TEXT INPUT

TextInput memiliki beberapa props yang dapat digunakan untuk memberikan pengalaman pengguna
yang lebih baik pada aplikasi mobile. Misalnya menentukan jenis dan event return key pada keyboard
device, dll.

LATIHAN 3.3

Berikut adalah contoh penggunaan returnKeyType untuk menentukan jenis return key yang akan
ditampilkan pada keyboard device. Tetapi props ini tidak menangani event, hanya memberikan
tampilan label saja. Modifikasilah file ContohTextInput.js yang sudah anda kerjakan sebelumnya,
dengan menambahkan props returnKeyType pada TextInput :

export default class ContohTextInput extends Component{

render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
returnKeyType="next"
placeholder="Masukkan email anda"
placeholderTextColor="rgba(0,0,0,0.3)" />

</View>
)
}
}

Nilai dari returnKeyType yang dapat kita coba di TextInput adalah next, go, done, search, send,
emergency-call, dll.

LATIHAN 3.4

Berikut adalah contoh props onSubmitEditing, yang dapat digunakan untuk menjalankan function
tertentu ketika pengguna penekan return key atau enter setelah selesai masukkan di TextInput.
Seperti contoh berikut kita memiliki 2 TextInput dengan menambahkan onSubmitEditing di salah satu
input untuk memindahkan focus ke input yang lain.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

export default class ContohTextInput extends Component{

render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
returnKeyType="next"
placeholder="Masukkan email anda"
placeholderTextColor="rgba(0,0,0,0.3)"
onSubmitEditing={()=> this.inputPassword.focus()}
/>

<TextInput
style={styles.input}
returnKeyType="go"
placeholder="Masukkan password anda anda"
placeholderTextColor="rgba(0,0,0,0.3)"
ref={(input)=> this.inputPassword = input }
secureTextEntry
/>

</View>
)
}
}

Pada contoh diatas, terlihat ketika pengguna selesai mengetikkan di TextInput email dan menekan
return key atau enter, maka focus input akan berpindah ke TextIput password yang telah diberikan
variable ref (this.inputPassword). Sedangkan directive secureTextEntry adalah untuk
menyembunyikan nilai dari TextInput seperti input type=”password” pada tag HTML.

LATIHAN 3.5

Berikut adalah contoh penggunaan props keyboardType yang digunakan untuk menentukan jenis
keyboard yang muncul pada device mobile kita ketika fokus pada TextInput. Beberapa jenis keyboard
yang dapat kita gunakan adalah decimal-pad, numeric, email-address, phone-pad, url, twitter,
dll. Pada contoh ini kita akan menggunakan email-address pada TextIput email.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

export default class ContohTextInput extends Component{

render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
returnKeyType="next"
placeholder="Masukkan email anda"
placeholderTextColor="rgba(0,0,0,0.3)"
onSubmitEditing={()=> this.inputPassword.focus()}
keyboardType="email-address"
/>

<TextInput
style={styles.input}
returnKeyType="go"
placeholder="Masukkan password anda anda"
placeholderTextColor="rgba(0,0,0,0.3)"
ref={(input)=> this.inputPassword = input }
secureTextEntry
/>

</View>
)
}
}

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

LATIHAN 3.6

Berikut adalah contoh penggunaan state untuk mendapatkan nilai dari TextInput diatas, dengan
memanfaatkan props onChangeText. onChangeText adalah props event yang akan dijalankan ketika
terjadi perubahan nilai pada TextInput.

export default class ContohTextInput extends Component{

constructor(props){
super(props)

this.state = {
email : '',
password : ''
}
}

render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
returnKeyType="next"
placeholder="Masukkan email anda"
placeholderTextColor="rgba(0,0,0,0.3)"
onSubmitEditing={()=> this.inputPassword.focus()}
keyboardType="email-address"
onChangeText={(value)=> this.setState({email : value})}
autoCapitalize="none"
/>

<TextInput
style={styles.input}
returnKeyType="go"
placeholder="Masukkan password anda anda"
placeholderTextColor="rgba(0,0,0,0.3)"
ref={(input)=> this.inputPassword = input }
secureTextEntry
onChangeText={(value)=> this.setState({password :
value})}
autoCapitalize="none"
/>

</View>
)
}
}

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

Props autoCapitalize=”none” dimaksudkan supaya ketika fokus ke TextInput dan keyboard tampil
di layar, maka capital lock tidak aktif. Ini dilakukan karena terkadang di beberapa device mobile
keyboard secara otomatis mengaktifkan capital lock.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

TUGAS 3.1

Tambahkan lah komponen TouchableOpacity sebagai komponen button, dan TextInput tambahan
pada script yang sudah anda kerjakan, dan tambahkan lah stylesheet untuk memberikan style pada
komponen-komponen aplikasi anda.

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

Suminar Ariwibowo Information Systems Program Lab. Mobile Apps Development

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