MATERI WORKSHOP MEMBUAT APLIKASI DENGAN REACT NATIVE PDF

Preview

Summary

MATERI WORKSHOP MEMBUAT APLIKASI DENGAN REACT NATIVE KERJA SAMA HIMPUNAN PENDIDIKAN TEKNOLOGI INFORMATIKA UNIVERSITAS NEGERI SEMARANG (UNNES) Dengan SEMARANG ANDROID DEVELOPER CENTER (SANDEC) x Apa itu React Native? Adalah framework untuk membuat aplikasi mobile multi-platform dengan hanya menggunak...

Description

Accelerat ing t he world's research.

MATERI WORKSHOP MEMBUAT APLIKASI DENGAN REACT NATIVE Ahmad Arif Faizin

Related papers React Nat ive JESUS EMMANUEL VIDAL CUEVAS

Download a PDF Pack of t he best relat ed papers 

MATERI WORKSHOP MEMBUAT APLIKASI DENGAN REACT NATIVE

KERJA SAMA HIMPUNAN PENDIDIKAN TEKNOLOGI INFORMATIKA UNIVERSITAS NEGERI SEMARANG (UNNES) Dengan SEMARANG ANDROID DEVELOPER CENTER (SANDEC)

x

Apa itu React Native? Adalah framework untuk membuat aplikasi mobile multi-platform dengan hanya menggunakan Javascript. Jadi kita bisa membuat dua aplikasi sekaligus yaitu Android dan iOS dalam waktu yang bersamaan, dengan begitu tentunya akan mengurangi waktu dan biaya. Framework React Native memang ditujukan untuk membuat aplikasi mobile yang benarbenar real native, sehingga tidak dapat dibedakan dengan aplikasi native. Berbeda dengan aplikasi hybrid yang menggunakan dasar web, seperti framework Ionic, Cordova, dll.

Bagaimana Cara Kerja React Native? React native bekerja dengan memanggil file javascript yang disiapkan di setiap aplikasi. File tersebut berfungsi untuk memanggil komponen-komponen native di setiap platform.

Perusahaan yang sudah menggunakan React Native?

Sumber : https://facebook.github.io/react-native/showcase.html

Persiapan Aslinya untuk memnggunakan Reactnative kita perlu menginstall Node.js, Android Studio / Xcode, Android SDK, namun semua itu sudah diatur oleh Expo XDE, yang merupakan versi UI untuk membuat project React Native dan menjalankannya. Maka yang kita perlukan adalah : 1. Install Expo XDE 2. Install Sublime (Text Editor) + Babel Package 3. Install Expo di Smartphone dengan Debugging Mode atau Emulator 4. Gunakan Adb Driver Universal (optional) jika Adb tidak terdeteksi

React Native Dasar //import stuff import React from 'react'; import { Text, View } from 'react-native'; //create stuff class App extends React.Component { render() { return (

Welcome to React Native!

); } } //export stuff export default App;

Prinsip dasarnya yaitu kita perlu Import Component-component yang dibutuhkan terlebih dahulu, kemudian kita buat isinya di dalam render(), dan terakhir yaitu di Export. Yang perlu diperhatikan disini yaitu dalam return hanya boleh berisi 1 View di component yang paling atas sebagai View Dasar, jika ingin menambahkan View lain lakukan di dalam View dasar. JSX yaitu ekstensi dari Javascript yang membuat kode menjadi lebih mudah dibaca, dimana dia merubah React.createElement() menjadi berbasis tag seperti XML / HTML. Berikut ini contoh jika menerjemahkan JSX

Styles dan Component //import stuff import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; //create stuff class App extends React.Component { render() { return (

Catatanku

Welcome to React Native!

); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, toolbarView:{ backgroundColor: '#48afdb', paddingTop: 30, paddingBottom: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, textTitle:{ fontSize: 30, color: 'white', fontWeight: 'bold' }, }); //export stuff export default App;

   

Untuk menambahkan Component baru kita harus menambahkan juga komponennnya di dalam import. Untuk membuat style, buat const di luar class app, Kemudian panggil dengan cara style={styles.container} Untuk mengatur layout biasanya kita https://facebook.github.io/react-native/docs/flexbox

menggunakan

Flexbox

FlexDirection digunakan untuk mengatur orientation, defaultnya ‘column’ / vertikal

Handling Touches //import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method _onPressButton() { Alert.alert('You tapped the button!') } //render ui render() { return (

Catatanku



Add!

Welcome to React Native!

); } } //style ui const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, toolbarView:{ backgroundColor: '#48afdb', paddingTop: 30, paddingBottom: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, textTitle:{ fontSize: 30, color: 'white', fontWeight: 'bold' }, inputcontainer: { marginTop: 5,

padding: 10, flexDirection: 'row' }, button: { height: 36, flex: 2, flexDirection: 'row', backgroundColor: '#48afdb', justifyContent: 'center', borderRadius: 4, }, btnText: { fontSize: 18, color: '#fff', marginTop: 6, }, input: { height: 36, padding: 4, marginRight: 5, flex: 4, fontSize: 18, borderWidth: 1, borderColor: '#48afdb', borderRadius: 4, color: '#48BBEC' }, }); //export stuff export default App;

Pada dasarnya fungsinya yaitu seperti ini :

{ Alert.alert('You tapped the button!'); }} title="Press Me" />

Dimana ketika tombol diklik akan menampilkan Alert Dialog, disini kita bisa memindahkan fungsi menampilkan Alert menjadi sebuah method bernama _onPressButton() supaya bisa dipakai lagi di tombol lain. Method tersebut kita taruh di sebelum render() Namun Button yang biasa terlihat aneh karena tidak ada efek ketika disentuh, untuk itu kita bisa menggunakan Touchable. Ada 3 jenis Touchable TouchableHighlight (efek ganti warna), , TouchableNativeFeedback (untuk seperti efek ripple di Android), TouchableOpacity (untuk transparan), TouchableWithoutFeedback (untuk tanpa feedback).. Selengkapnya lihat : https://facebook.github.io/react-native/docs/handling-touches

Handling Text Input //import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method _onPressButton() { Alert.alert('You tapped the button!') } state = { text: 'Wellcome To React Native' }

//render ui render() { return (

Catatanku

this.setState({text})} />

Add!

{this.state.text}

); } } . . .

Disana kita membuat variabel baru untuk menampung data masukan dan kemudian memasukkannya ke dalam Text Disini kita mengenal yang namanya Props and State. Props berasal dari Properties, mirip seperti attribute pada tag HTML, atau paramater jika dalam functnional programming. Sedangkan state untuk nilai yang berubah-rubah. Selengkapnya : https://medium.com/coderupa/react-prop-state-apa-bedanya-7ee61df8257f

onChangeText berfungsi untuk membaca ketika terjadi perubahan pada Input sehingga kalau dicoba bisa dilihat bahwa teks yang dibawah akan berubah setiap kali teks berubah. Lalu bagaimana caranya teks berubah hanya ketika tombol Add ditekan? //import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method _onPressButton() { Alert.alert('You tapped the button!') } addTodo= () => { this.setState({ todo : this.state.text }); } state = { text: 'Welcome To React Native', todo: '' } //render ui render() { return (

Catatanku

this.setState({text})} />

Add!

{this.state.todo}

); } } ....

Disini kta membuat method addTodo yang berfungsi untuk menyimpan state text dari Input ke dalam variabel state todo, baru setelah itu ditampilkan di Text.

Create List

//import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method addTodo= () => { this.setState({ todo : this.state.text }); } state = { text: 'Welcome To React Native', todo: ["Hallo","Ini","Nyoba","List"] } createList= () =>{ return this.state.todo.map(t=>{ return( {t} ) }) } //render ui render() { return (

Catatanku

this.setState({text})} />

Add!

{this.todo} {this.createList()}

); } } .....

Disini kita membuat List dengan menggunakan teks yang ada di variabel todo, namun ketika ditekan tombol Add masih crash karena tidak dapat memasukkan teks ke variabel todo

//import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method addTodo= () => { var toDoBaru = this.state.text; var listToDo = this.state.todo; listToDo.push(toDoBaru); this.setState({ todo : listToDo, text : '' }); } state = { text: 'Welcome To React Native', todo: [] } createList= () =>{ return this.state.todo.map(t=>{ return( {t} ) }) } //render ui render() { return (

Catatanku

this.setState({text})} value={this.state.text} />

Add!

{this.createList()}

); } } ...

Sekarang, kita sudah dapat memasukkan teks input ke dalam list, tanda hijau supaya ketika setelah menekan tombol Add, Input kembali kosong. Sekarang kita percantik tampilannya

//import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method _onPressButton() { Alert.alert('You tapped the button!') } addTodo= () => { var toDoBaru = this.state.text; var listToDo = this.state.todo; listToDo.push(toDoBaru); this.setState({ todo : listToDo, text:'' }); } state = { text: '', todo: [] } createList= () =>{ return this.state.todo.map(t=>{ return( // {t}

Add!

{this.todo} {this.createList()}

); } } //style ui const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, toolbarView:{ backgroundColor: '#48afdb', paddingTop: 30, paddingBottom: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, textTitle:{ fontSize: 30, color: 'white', fontWeight: 'bold' }, inputcontainer: { marginTop: 5, padding: 10, flexDirection: 'row' }, button: { height: 36, flex: 2, flexDirection: 'row', backgroundColor: '#48afdb', justifyContent: 'center', borderRadius: 4, }, btnText: { fontSize: 18, color: '#fff', marginTop: 6, }, input: { height: 36, padding: 4, marginRight: 5, flex: 4, fontSize: 18, borderWidth: 1, borderColor: '#48afdb',

borderRadius: 4, color: '#48BBEC' }, row: { flexDirection: 'row', padding: 12, height: 44 }, separator: { height: 1, backgroundColor: '#CCCCCC', }, }); //export stuff export default App;

Maka tampilannya menjadi lebih enak dipandang karena terdapat jarak antar list

Delete List

//import stuff import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Alert} from 'react-native'; //create stuff class App extends React.Component { //method _onPressButton() { Alert.alert('You tapped the button!') } addTodo= () => { var toDoBaru = this.state.text; var listToDo = this.state.todo; listToDo.push(toDoBaru); this.setState({ todo : listToDo, text:'' }); } deleteTodo=(t) =>{ var listToDo = this.state.todo; var posisi = listToDo.indexOf(t); listToDo.splice(posisi, 1); this.setState({todo: listToDo}) } state = { text: '', todo: [] } createList= () =>{ return this.state.todo.map(t=>{ return( // {t} this.deleteTodo(t)}>

{t}



) }) } //render ui render() { return (

Catatanku

this.setState({text})} value={this.state.text} />

Add!

{this.todo} {this.createList()}

); } } //style ui const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, toolbarView:{ backgroundColor: '#48afdb', paddingTop: 30, paddingBottom: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, textTitle:{ fontSize: 30, color: 'white', fontWeight: 'bold' }, inputcontainer: { marginTop: 5, padding: 10, flexDirection: 'row' }, button: { height: 36, flex: 2, flexDirection: 'row', backgroundColor: '#48afdb', justifyContent: 'center', borderRadius: 4, }, btnText: { fontSize: 18,

color: '#fff', marginTop: 6, }, input: { height: 36, padding: 4, marginRight: 5, flex: 4, fontSize: 18, borderWidth: 1, borderColor: '#48afdb', borderRadius: 4, color: '#48BBEC' }, row: { flexDirection: 'row', padding: 12, height: 44 }, separator: { height: 1, backgroundColor: '#CCCCCC', }, }); //export stuff export default App;

HasIl Akhir Aplikasi...