MODUL PRAKTIKUM PEMROGRAMAN MOBILE

PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
PERTEMUAN 1

PENGANTAR REACT NATIVE

PERTEMUAN 1: PENGANTAR REACT NATIVE

1.1 Maksud dan Tujuan

1. Mahasiswa mampu mempersiapkan prasarana untuk melakukan
pemrograman dengan React Native.
2. Mahasiswa mampu menjelaskan pemgrograman dengan pendekatan Hybird.
3. Mahasiswa mampu membuat program sederhada dengan React Native

1.2 Teori Singkat

Target render adalah abstrak sejauh menyangkut pemrogram React. Misalnya, di
React, target render bisa berupa string atau bisa juga Document Object Model (DOM).
Inilah sebabnya mengapa komponen tidak pernah langsung berinteraksi dengan target
render, karena hal ini tidak pernah bisa membuat asumsi tentang di mana rendering
berlangsung.

Platform seluler memiliki pustaka widget UI yang dapat dimanfaatkan oleh

pengembang untuk membangun aplikasi pada platform itu. Di Android, pengembang
mengimplementasikan aplikasi Java, sedangkan di iOS, pengembang
mengimplementasikan aplikasi Swift. Jika menginginkan aplikasi seluler yang berfungsi,
maka harus memilih salah satu. Namun, harus mempelajari kedua bahasa tersebut, karena
hanya mendukung satu dari dua platform utama tidak realistis untuk sukses.

Pengembangan pada React Native, menunjukkan bahwa hal ini bukan masalah.
Komponen React yang sama yang dibuat berfungsi di semua tempat, bahkan di browser
seluler! Harus mempelajari dua bahasa pemrograman lagi untuk membangun dan
mengirimkan aplikasi seluler membutuhkan biaya dan waktu yang mahal. Solusi untuk
ini adalah dengan memperkenalkan platform React Native baru yang mendukung target
render baru — widget UI seluler asli.
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
React Native menggunakan teknik yang membuat panggilan asinkron ke OS
seluler yang mendasarinya, yang memanggil API widget asli. Ada mesin JavaScript, dan
React API sebagian besar sama dengan React untuk web. Perbedaannya ada pada target;
alih-alih DOM, ada panggilan API asinkron. Konsepnya divisualisasikan di sini pada
Gambar 1.

Gambar 1. Komponen React Native

Hal ini terlalu menyederhanakan semua yang terjadi di balik sampul, tetapi ide dasarnya
adalah sebagai berikut:

1. Library React yang sama yang digunakan di web digunakan oleh React Native dan
berjalan di JavaScriptCore.
2. Pesan yang dikirim ke API platform asli bersifat asinkron dan dikelompokkan untuk
tujuan kinerja.
3. React Native dikirimkan dengan komponen yang diimplementasikan untuk platform
seluler, bukan komponen yang merupakan elemen HTML. Sekarang setelah
mengetahui apa itu React Native, sekarang saatnya untuk melihat apa yang menarik
pengembang React ke React Native.
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
1.3 Praktik

1.3.1 Pengenalan Editor Kode Program

Praktik pada pertemuan ini diawali dengan penggunaan editor kode program atau
disebut dengan Intergrated Development Environment (IDE). IDE yang digunakan
bersifat online dan tidak perlu lagi menjalani proses instalasai. IDE yang digunakan dapat
diakses pada halaman URL: https://codesandbox.io/

CodeSandbox adalah editor kode online dan alat pembuatan prototipe yang membuat
pembuatan dan berbagi aplikasi web menjadi lebih cepat. Setelah mengakses halaman
tersebut akan muncul tampilan ditunjukkan pada Gambar 2.

Gambar 2. Tampilan awal Code Sandbox

1.3.2 Memulai Pemrograman React Native

Permulaan dalam mulai Pemrograman React Native menggunakan Code Sandbox
dapat mengikuti langkah-langkah sebagai berikut:
1. Buka browser yang dimiliki direkomendasikan memakai Google Chrome, Firefox,
Safari, atau Opera.
2. Pada praktikum ini, direkomendasikan sudah memiliki akun google, sehingga pada
praktikum ini harus sudah login pada halaman google.
3. Akses alamat url https://codesandbox.io/ pada browser. Selanjutnya, klik tombol
Create Sandbox sehingga muncul tampilan seperti Gambar 3.
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
4. Klik Tombol React seperti yang dilingkarai pada Gambar 3.
5. Setelah Tombol React diklik kemudian muncul tampilan seperti pada Gambar 4. Tab
Files merupakan susunan kode sumber dari proyek React ini. Selanjutnya Tab Browser
berfungsi untuk menampilkan keluaran dari hasil penulisan kode program. Keluaran
program ini bersifat realtime sehingga setelah menuliskan kode program, seketika juga
keluarannya muncul. Jika salah satu ikon file pada tab Files diklik maka akan muncul
tab baru dengan nama seperti nama file tersebut. Dalam hal ini muncul tab seperti
App.js.

Gambar 3. Tampilan Awal Membuat Proyek React

Gambar 4. Editor Pemrograman React

MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
1.3.3 Praktik Pemrograman React Native
Untuk memulai pemrograman React Native, lakukanlah langkah-langkah berikut
ini secara terurut:
1. Ketikkan kode program pada file App.js sebagai berikut dan amatilah keluaran
programnya.
import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {

return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default HelloWorldApp;

2. Ketikkan kode program berikut, amatilah keluarannya dan jelaskan prosesnya.

import React from "react";

import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Saya sedang belajar Pemrograman React Native.
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
text: {
fontWeight: "bold",
backgroundColor: "yellow"
}
});
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
3. Ketikkan kode program berikut, amatilah keluarannya dan jelaskan prosesnya.

import React from 'react';

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

const styles = StyleSheet.create({

center: {
alignItems: 'center'
}
})

const Greeting = (props) => {

return (
<View style={styles.center}>
<Text>Hello {props.name}!</Text>
</View>
);
}

const LotsOfGreetings = () => {

return (
<View style={[styles.center, {top: 50}]}>
<Greeting name='Andi' />
<Greeting name='Susilo' />
<Greeting name='Mahmud' />
</View>
);
}

export default LotsOfGreetings;

4. Ketikkan kode program berikut, amatilah keluarannya dan jelaskan prosesnya.

import React, { Component } from 'react'

import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'

class App extends Component {

state = {
count: 0
}

onPress = () => {
this.setState({
count: this.state.count + 1
})
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021
}

render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text>Click me</Text>
</TouchableOpacity>
<View>
<Text>
You clicked { this.state.count } times
</Text>
</View>
</View>
)
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10
}
})

export default App;

1.4 Tugas 1
Buatlah tampilan sederhana dengan variasi jenis dan warna huruf untuk
menampilkan data diri Anda sesuai dengan data berikut:
NPM :
Nama :
Alamat :
Kelas :
No. Telepon :
Gender :
MODUL PRAKTIKUM PEMROGRAMAN MOBILE
PERTEMUAN 1
ERNA DANIATI, M.KOM.
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
GENAP 2020/2021

E-mailkan di email [email protected]

Paling lambat sebelum pertemuan berikutnya
Dengan subjek : Tugas1_PraktikPemrogMobile_Nama_NPM