LAPORAN PRAKTIKUM

PEMROGRAMAN BERORENTASI OBJECT 2

Dosen Pembimbing:
Riyadh Arridha, S.Kom., M.T

Disusun oleh:

Abu Sofyan Tianotak (16319033)

La Abdul Rifail (16319058)
Suci Salsabila (16319041)
Rosmina Laode Goho (16319060)

KEMENTRIAN RISET DAN TEKNOLOGI PENDIDIKAN

TINGGI POLITEKNIK NEGERI FAKFAK JURUSAN
TEKNIK ELEKTRO PROGRAM STUDI
MANAJEMEN INFORMATIKA
TAHUN 2021
 Kata Pengantar

Segala puji hanya milik Allah SWT. Shalawat dan salam selalu tercurahkan kepada
Rasulullah SAW. Berkat limpahan dan rahmat-Nya , sehingga kami diberi kesempatan yang
luar biasa ini yaitu kesempatan untuk menyelesaikan laporan ini. Tidak lupa penyusun juga
mengucapkan banyak terimakasih atas bantuan dari pihak yang telah berkontribusi dalam
pembuatan laporan ini.

Dalam melakukan percobaan ini, tentunya banyak sekali hambatan yang telah penulis
rasakan dan semoga kedepanya dapat memperbaiki bentuk maupun menambah isi laporan
agar menjadi lebih baik. Karena keterbatasan pengetahuan maupun pengalaman penulis, oleh
karena itu penulis sangat mengharapkan saran dan kritik yang membangun dari pembaca
demi kesempurnaan laporan ini.

Fakfak , 21 April 2021

Penulis

I
 Daftar Isi

Kata Pengantar............................................................................................................................I
Daftar Isi....................................................................................................................................II
BAB I Pendahuluan....................................................................................................................1
A. Latar Belakang.............................................................................................................1
B. Tujuan...........................................................................................................................1
BAB II Dasar Teori....................................................................................................................2
A. Impor dan Expor...........................................................................................................2
B. Core Componen............................................................................................................2
C. View.............................................................................................................................2
D. Text...............................................................................................................................2
E. Image............................................................................................................................3
F. Scrollview.....................................................................................................................3
G. Flatlist...........................................................................................................................3
H. Touchableopacity.........................................................................................................4
I. Textinput......................................................................................................................4
BAB III Praktikum.....................................................................................................................5
A. Membuat Impor dan Expor..........................................................................................5
B. Membuat View.............................................................................................................5
C. Membuat Text..............................................................................................................6
D. Membuat Image............................................................................................................7
E. Membuat Scrollview....................................................................................................8
F. Membuat Flatlist...........................................................................................................9
G. Membuat Touchableopacity.......................................................................................10
H. Membuat Textinput....................................................................................................10
BAB IV Tugas..........................................................................................................................11
A. Mempersiapkan folder................................................................................................11
B. Mendownload data yang diperlukan..........................................................................11
C. Langkah Pembuatan Project:......................................................................................11
BAB V Penutup........................................................................................................................14
A. Kesimpulan.................................................................................................................14
B. Saran...........................................................................................................................14

II
III
 BAB I
Pendahuluan
A. Latar Belakang
React native adalah sebuah framework milik JavaScript yang biasa dikembangkan
oleh platform Facebook untuk membuat aplikasi pada Android atau juga iOS. Seperti
yang sudah Anda ketahui bahwa membuat aplikasi berbasis Android atau iOS bukanlah
perkara yang mudah. Kegiatan tersebut pasti membutuhkan coding khusus yang akan
memakan waktu cukup lama.

Dengan menggunakan react native, Anda sudah tidak perlu membuat aplikasi hybrid
yang akan memakan waktu cukup lama. Bahkan, ia juga memungkinkan Anda untuk
melakukan kompilasi aplikasi ke native code pada iOS atau juga Android. Bagi Anda
para web developer tentu saja hal ini sangat cocok terlebih jika ingin menghemat

anggaran yang ada. Cara Kerja React native.Dalam prosesnya, ia juga menggunakan
sebuah fitur yang disebut dengan Bridging. Dalam hal ini, bridging seringkali digunakan
sebagai penghubung antara smartphone dengan perangkat lain menggunakan JavaScript.

Kelebihan React native. Sama seperti framework dan aplikasi lain pada umumnya
yang pasti memiliki kelebihan khusus yang membuatnya berbeda dengan yang lain.
Setelah Anda mengetahui pengertiannya secara umum sekaligus juga cara kerjanya. Pada
pembahasan kali ini, Anda akan mengetahui beberapa kelebihan React Native yang bisa
menjadi pertimbangan saat akan menggunakannya :Kode yang Digunakan Lebih Mudah,
Banyak Digunakan Perusahaan Besar, Lebih Hemat Anggaran, Cocok Untuk Startup,

B. Tujuan

1. Memahami React naratif

2. Mengenal Komponen React naratif
3. Membuat komponen React naratif
4. Membuat Project tampilan YouTube

1
 BAB II
Dasar Teori

A. Impor dan Expor

Sebelum membahas lebih mendalam terkait component dalam react native, ada
sedikit materi tambahan yang perlu dibahas terlebih dahulu, yaitu terkait import dan
export.
Import merupakan sintaks yang digunakan untuk memanggil suatu modul (bisa
berupa object, variable, function, atau class) atau komponen sehingga dapat digunakan
pada modul/file yang sedang berjalan.
Export adalah sintaks yang digunakan untuk membuat suatu object, variable,
function, maupun class bisa digunakan pada modul/file lainnya dengan menggunakan
sintaks Import.
C. Core Componen
React Native memiliki berbagai komponen inti (Core Components) yang bisa
digunakan secara langsung (tanpa install package tambahan). Berbagai komponen yang
lebih kompleks dapat dibangun dari komponen inti dengan cara/metode yang unik.
Hampir semua komponen merupakan bagian dari komponen “<View>” yang
memiliki prop “style” masing-masing. Prop “style” dapat mengatur tampilan komponen
seperti warna, border, dan konfigurasi layout. Dalam melakukan konfigurasi layout dapat
menggunakan pendekatan / algoritma flexbox yang akan dibahas nanti.
D. View
Komponen View merupakan blok dasar dalam pembangunan aplikasi React
Native, seperti tag <div> dalam HTML. Dalam implementasinya, View merupakan
lapisan/komponen dengan hirarki tertinggi yang dapat mengatur style dan layout dari
komponen di bawahnya (children-nya). Umumnya props yang digunakan dari komponen
View ini adalah “style”. Selengkapnya, props yang terdapat pada komponen View dapat
dilihat pada dokumentasi React Native
E. Text
Sesuai namanya, komponen Text digunakan untuk menampilkan teks, dimana teks
yang ingin ditampilkan harus berada dalam tag Text (contoh: <Text>Nama
User</Text>). Text juga memiliki beberapa property, termasuk style yang dapat
mengubah ukuran teks, warna, dekorasi, dan lainnya. Property Text yang lebih lengkap
dapat dilihat pada dokumen React Native

2
F. Image
Komponen Image digunakan untuk menampilkan gambar, baik dari dalam aplikasi
(asset) maupun yang diambil dari web/API.

Menggunakan tag <Image> Untuk gambar yang berasal dari dalam aplikasi
(bagian dari bundle aplikasi), digunakan prop source = {require(“./path”)}. Sementara
untuk gambar yang berasal dari web/API digunakan source
={{uri(“https://url/path”)}}. Setiap komponen Image mendefinisikan ukuran gambar
yang akan ditampilkan dengan menambahkan atribut height dan width pada prop style-
nya, misal style={{width: ‘100’, height: ‘100’}}.

G. Scrollview
Komponen ScrollView digunakan pada konten yang dapat digeser. Cocok
digunakan untuk jumlah konten yang sedikit (<30 konten). Dan dapat disusun secara
vertikal (default) dan horizontal. Pada jumlah konten yang banyak, disarankan
menggunakan FlatList agar performa aplikasi menjadi lebih baik.

Cara menggunakan ScrollView adalah dengan menjadikan konten sebagai children.

Setiap menampilkan konten yang berulang memerlukan key di setiap kontennya. Jika
konten tersebut dibungkus oleh komponen View, maka key dapat disimpan dalam View
tersebut dengan menambahkan prop “key”.

H. Flatlist
Komponen FlatList digunakan untuk menampilkan sejumlah konten dalam jumlah
yang banyak dan dapat digeser. Komponen ini memiliki fungsi yang menyerupai
ScrollView tetapi dengan performa yang lebih baik, yaitu dengan menampilkan konten
sebatas ukuran layar atau dibatasi per jumlah tertentu (misal dari 100 konten yang
dimiliki, hanya menampilkan per 10 konten, sementara konten yang lain baru muncul
ketika layar digeser). Sama seperti ScrollView, FlatList juga dapat disusun secara
vertikal (default) dan horizontal.

Dalam menampilkan konten, FlatList hanya membutuhkan data array dari

sekumpulan object dan dimasukkan dalam prop “data”, kemudian tampilan dari konten
dapat diatur dalam prop “renderItem”. Dan dalam setiap menampilkan konten yang
berulang selalu dibutuhkan “key” untuk membedakan konten yang satu dengan konten
yang lain (menghindari terjadi duplikasi konten) yang dapat diatur dalam prop
“keyExtractor”.

3
I. Touchableopacity
Pada React Native terdapat komponen Button yang merupakan komponen tombol
dasar yang dapat tampil dengan baik pada berbagai platform. Namun komponen ini
hanya didukung oleh tingkat kustomisasi yang minimal. Seringkali Button ini dirasa
tidak tampil dengan cukup baik pada aplikasi, sehingga disarankan untuk
membuat/desain tombol sendiri menggunakan TouchableOpacity atau
TouchableNativeFeedback.
TouchableOpacity merupakan pembungkus dari suatu komponen View, yang dapat
merespon ketika dilakukan sentuhan oleh user. Ketika komponen ini disentuh, maka
opacity pada komponen tersebut akan berkurang, atau terlihat menjadi semakin samar.

J. Textinput
Merupakan komponen dasar dalam melakukan input teks pada aplikasi
menggunakan keyboard. Props pada komponen ini memiliki berbagai fitur yang dapat
diatur, seperti auto-correction, auto-capitalization, placeholder, dan memilih tipe
keyboard tertentu, seperti numeric keypad.
Contoh paling dasar dalam penggunaan komponen ini adalah dengan memperhatikan
event onChangeText dalam membaca input dari user. Terdapat juga beberapa event lain,
seperti onSubmitEditing dan onFocus yang dapat kita konfigurasikan.

4
 BAB III
Praktikum
A. Membuat Impor dan Expor
Import:

Export:

K. Membuat View
Pemrograman:

Hasil:

5
L. Membuat Text
Pemrograman:

Hasil:

6
M. Membuat Image
Pemrograman:

Hasil:

7
N. Membuat Scrollview
Pemrograman:

Hasil:

8
O. Membuat Flatlist
Pemrograman:

Hasil:

9
P. Membuat Touchableopacity
Pemrograman:

Hasil:

Q. Membuat Textinput
Pemrograman:

Hasil:

10
 BAB IV
Tugas
A. Mempersiapkan folder
Dalam mengerjakan tugas ini, silahkan membuat folder “App” terlebih dahulu di dalam
folder proyek Expo/React Native yang telah dibuat. Dan di dalam folder “app” buatlah
folder “images”. Dan di dalam folder “components”, Anda bisa membuat file App.js
dimana file ini sama dengan file App.js yang digunakan pada video tutorial tersebut.
Selanjutnya Anda bisa melanjutkan ke tahap berikutnya.

R. Mendownload data yang diperlukan

Pada tutorial tersebut, terdapat 2 data yang digunakan, yaitu data.json dan logo Youtube.
Logo Youtube digunakan pada bagian header dari tampilan aplikasi. Dan file data.json
merupakan suatu object yang didalamnya terdapat informasi seperti alamat url
gambar/thumbnail video, nama video, nama channel youtube, dan jumlah tayangan.
Logo dan data.json tersebut.
S. Langkah Pembuatan Project:
 Mendownload (data.json dan Logo.png)
 Data.json

 Logo.png (simpan di folder images)

11
 Membuat file App.js

12
 Hasil Pemrograman:

13
 BAB V
Penutup
A. Kesimpulan
Reacnative yaitu adalah sebuah framework yang milik JavaScript yang biasa
dikembangkna oleh platform Facebook untuk membuat aplikasi pada Androin atau
juga ios. Dengan mengggunakan Reactnative kita sudah tidak perlu untuk membuat
aplikasi hybrid yang akan memakan dan membutuhkan waktu yang cukup lama.
Bahkan ia juga memungkinkan kita untuk komlilasi aplikasi ke native kode pada ios
atau juga Android.
Di dalam proses ini juga dapat menggunakan sebuah fitur yang dapat disebut
dengan Bridging. Bridging juga sering kali dapat digunakan sebagai penghubung
antara smartphone dengan perangkat lain menggunakan JavaScript.
Dan kelebihan Reacnative juga sama dengan framework dan aplikasi lain pada
umumnya yang pasti memiliki kelebihan ksusus yang membuatnya berbeda dengan
aplikasi yang lain.
T. Saran
Pada praktikum ini agar diperhatikan ssecara detail dalam penulisan
pemrograman sehingga untuk dapat mengetahui kesalahan yang dapat terjadi.
Pengumpulan informasi yang ditentukan dan didalam pembuatan project harus
dilakukan secara bertahap sehingga project dapat diselesaikan dengan waktu yang
tepat.

14