BAB VI

React Progressive Web Application (PWA) I

6.1. Tujuan
1. Praktikan dapat memahami konsep dasar teknologi Progressive Web App.
2. Praktikan dapat mengunggah suatu project PWA.
3. Praktikan dapat membuat aplikasi PWA sederhana.
4. Praktikan dapat memahami penggunaan PWA.
5. Praktikan dapat memahami penggunaan Node.js pada PWA.
6.2. Alat dan Bahan
6.2.1. PC/Laptop

Gambar 6. 1 Laptop
Laptop adalah komputer bergerak (bisa dipindahkan dengan mudah) yang
berukuran relatif kecil dan ringan, beratnya berkisar dari 1-6 kg, tergantung
ukuran, bahan, dari spesifikasi laptop tersebut, laptop dapat digunakan dalam
lingkungan yang berbeda dari komputer. Laptop digunakan untuk
mengembangkan program yang dibuat dalam praktikum.
6.2.2. Smartphone

Gambar 6. 2 Smartphone
Smartphone Berfungsi sebagai device untuk menjalankan hasil percobaan.
Smartphone yang digunakan berjenis android. Android adalah Sistem Operasi
Perangkat Bergerak berbasis pada kernel
Linux yang telah dimodifikasi, Android didesain umumnya untuk perangkat
bergerak layar sentuh seperti Smartphone dan Tablet.
6.2.3. Aplikasi Web Browser

Gambar 6. 3 Aplikasi Web Browser

Web browser adalah salah satu aplikasi yang digunakan untuk menjelajah,
menyajikan hingga mengambil konten dari berbagai sumber informasi pada
jaringan internet. Peramban website ini dapat mengidentifikasi sumber informasi
dari jaringan internet, berupa halaman website, video, gambar atau konten
lainnya. Pada praktikum modul 5 ini, web browser b erfungsi sebagai
software output.
6.2.4. Text Editor

Gambar 6. 4 Visual Studio Code

Text Editor yang digunakan pada praktikum modul 5 adalah Visual studio
Code yaitu aplikasi cross platform yang dapat
digunakan berbagai sistem operasi seperti Windows, Linux, dan Mac OS. VS
Code
termasuk software yang ringan namun kuat. Visual Studio Code dapat digunakan
untuk mengembangkan berbagai macam bahasa pemrograman seperti Java,
JavaSkrip, Go, C++, dan masih banyak yang lainnya. Komponen dari Visual
Studio juga sama seperti yang digunakan di Azura DevOps. Visual Studio
memiliki lintas platform 158 kode editor yang ringan, dapat digunakan oleh siapa
saja untuk membuat atau membangun aplikasi web.
6.2.5. Node.js

Gambar 6. 5 Node.js
Node.js adalah runtime environment untuk JavaScript yang bersifat open-
source dan cross-platform. Dengan Node.js kita dapat menjalankan kode
JavaScript di mana pun, tidak hanya terbatas pada lingkungan browser. Node.js
menjalankan V8 JavaScript engine (yang juga merupakan inti dari Google
Chrome) di luar browser. Ini memungkinkan Node.js memiliki performa yang
tinggi.
6.3. Dasar Teori
6.3.1 Progressive Web App (PWA)
 Gambar 6. 6 PWA
PWA adalah singkatan dari Progressive Web App, sebuah aplikasi yang
dibangun dengan melakukan optimasi pada sebuah website. Optimasi yang
dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga
mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. Selain
itu, Anda juga tidak perlu membuat aplikasi mobile secara terpisah.
Beberapa contoh website yang menggunakan PWA
adalah Twitter, Pinterest, OLX dan Trivago.
PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan
penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi
mobile di ponsel atau tablet. 
Berikut ini karakteristik yang dimiliki oleh masing-masing aplikasi:
1. Web App
a. Dibuat dengan mengandalkan browser dan cross platform
b. Update berjalan otomatis
c. Hanya berjalan dalam kondisi online
d. Fitur terbatas
e. Biaya development murah
2. Aplikasi Mobile
a. Dibuat untuk platform tertentu menggunakan bahasa khusus, seperti
Swift untuk iOS dan Java untuk Android
b. Update harus dilakukan manual
c. Bisa berjalan dalam kondisi offline
d. Fitur lengkap yang menjamin kenyamanan pengguna
e. Biaya development cenderung mahal
3. PWA
a. Dibuat mengandalkan browser dan cross platform
 b. Update berjalan otomatis
c. Bisa berjalan dalam kondisi offline
d. Menghadirkan UX yang lebih intuitif dari web app
e. Biaya development murah
(Sumber: https://www.niagahoster.co.id/blog/progressive-web-app/#Apa_Itu_PWA)

6.3.2 React JS

Gambar 6. 7 React JS
React Js adalah sebuah library JavaScript yang dibuat oleh facebook.
React bukanlah sebuah framework MVC. React adalah library yang bersifat
composable user interface, yang artinya kita dapat membuat berbagai UI yang
bisa kita bagi menjadi beberapa komponen.
Kenapa harus React?
1. Cepat dan efisien
Karena berbasis komponen maka react hanya perlu me-render
resource yang berhubungan dengan data yang berganti, tidak perlu me-
render seluruh resource .
2. Reusable (dapat digunakan berulangkali)
Komponen yang telah kita buat dapat kita gunakan berkali-kali pada
saat dibutuhkan. Ini sangat berguna bagi kita untuk mempersingkat waktu
dan mengurangi resource yang ada.
3. Library JavaScript
JSX (JavaScript Extension) singkatnya kita dapat menyematkan
syntax HTML kedalam Javascript. Ini sangat membantu kita dalam proses
development, apalagi dengan adanya  fungsi dari ES6 (Ecma Script).

4. Immutable State
 Kita dapat memanajemen state yang ada dengan
menggunakan Redux. Kita dapat mengatasi permasalahan mutable state
dengan RamdaJs. Untuk state yang berinteraksi dengan API kita dapat
menggunakan Redux-Saga.
(Sumber: https://www.kodingindonesia.com/react-js-dan-installasi/)

6.3.3 Component dan Props

Component & Props

Gambar 6. 8 Component dan Props
Komponen mempermudah untuk memecah antarmuka pengguna menjadi
bagian tersendiri, bagian yang bisa digunakan kembali, dan berpikir tentang setiap
potongan dalam isolasi. Halaman ini memberikan pengantar tentang ide
komponen. Anda dapat menemukan rujukan API komponen terperinci di sini
Secara konsep, komponen mirip dengan fungsi pada Javascript. Komponen
menerima beberapa masukan (biasa disebut “props”) dan mengembalikan
element React yang mendeskripsikan apa yang seharusnya tampil pada layar.
(Sumber: https://www.techfor.id/pengertian-component-dan-props-pada-react-js/)

6.3.4 JavaScript

Gambar 6. 9 Javascript
JavaScript adalah suatu bahasa kode atau pemrograman yang digunakan
untuk menciptakan sekaligus mengendalikan konten website agar menjadi
dinamis. Contoh konten situs yang dinamis adalah apapun yang dapat bergerak
atau mengubah yang tampak dilayar tanpa mengharuskan memuat ulang laman
situs tersebut secara manual.
Beberapa fitur yang dapat membuat situs menjadi dinamis (dan tentunya
membutuhkan bahasa pemrograman) diantaranya adalah gambar
animasi, slideshow foto, saran pengisian teks otomatis, form otomatis, dan banyak
lagi. Dibalik semua animasi interaktif dan form otomatis pada disuatu situs, ada
kumpulan rumus bahasa pemrograman seperti JavaScript. 
Berikut ini daftar singkat beberapa fungsi JavaScript.
 Membuat situs tampak lebih interaktif dan menarik karena akan lebih dari
sekadar laman statis yang penuh tulisan.
 Berfungsi untuk mobile app development atau menciptakan aplikasi yang
beroperasi di smartphone  dan tablet.
 Menciptakan game  berbasis web browser. 
 Meskipun JavaScript umumnya digunakan untuk menciptakan
bagian frontend  pada sebuah situs, bahasa pemrograman ini sangat
serbaguna sehingga bisa digunakan untuk bagian backend situs.
JavaScript memiliki berbagai tipe data yang digunakan saat menuliskan
variabel. Berikut ini beberapa diantaranya:
 String, yaitu variabel dengan rangkaian karakter yang membentuk teks. 
 Number, yaitu untuk variabel angka.
 Boolean, yaitu untuk variabel yang memberikan nilai benar atau salah
(true/false).
 Array, yaitu untuk variabel yang memiliki lebih dari satu nilai dalam satu
variabel.
 Object, yaitu tipe data yang dapat digunakan untuk menyimpan semua
bentuk dalam JavaScript.
 Function, yaitu potongan kode yang dapat dikumpulkan dan digunakan
kembali. 
(Sumber: https://www.softwareseni.co.id/blog/pengertian-javascript-yang-mudah-untuk-
dipahami)

6.3.5 Node.js
 Gambar 6. 10 Node Js
Node.js adalah platform buatan Ryan Dahl untuk menjalankan aplikasi
web berbasis JavaScript yang dikenalkan pada tahun 2009. Dengan platform ini,
dapat menjalankan JavaScript dari sisi server. Untuk mendukung kemampuan
tersebut, Node.js dibangun dengan engine Javascript V8 milik Google.
Node.js juga memiliki pustaka server sendiri sehingga tidak perlu
menggunakan program server web seperti Nginx dan Apache. Dengan model
event-driven dan non-blocking I/O-nya, Node.js lebih mampu menangani banyak
proses secara bersamaan daripada platform bersifat thread-based networking.
Node.js memiliki dua komponen utama, yaitu engine JavaScript V8
Google dan Libuv Library. Selain itu, platform tersebut menggunakan dua design
pattern: object pool dan facade. Berikut adalah penjelasan singkat atas masing-
masing komponen.
1. Engine V8
Engine V8 milik Google adalah sebuah compiler JavaScript yang
dibuat menggunakan bahasa pemrograman C++. Dengan komponen ini,
input berupa kode JavaScript dapat di-compile menjadi kode dalam tingkat
assembly. V8 sendiri terdiri dari tiga komponen:
 Compiler yaitu mengubah JavaScript menjadi bahasa pemrograman
lain.
 Optimizer yaitu menciptakan sebuah abstract syntax tree yang akan
diubah menjadi static single assignment dan dioptimasi.
 Garbage collector yaitu V8 membagi penyimpanan yang ada
menjadi dua, yaitu penyimpanan lama dan baru. Ketika
penyimpanan baru sudah penuh, garbage collector memindahkan
objek-objek lama ke penyimpanan lama agar kinerja Node.js tetap
ringan.
2. Libuv library
Library C++ ini bertugas mengelola operasi asynchronous I/O
(input/output) di Node.js dan main event loop. Didalamnya juga terdapat
thread pool reserve yang menangani thread setiap operasi I/O.
3. Design pattern
Ada dua jenis design pattern yang digunakan oleh Node.js, yaitu
object pool dan facade. Berikut penjelasannya:
 Object pool yaitu design pattern berisi kumpulan objek yang dapat
digunakan untuk task tertentu.
 Facade yaitu design pattern yang memberikan tampilan antarmuka
untuk body kode.
(Sumber: https://www.niagahoster.co.id/blog/node-js-adalah/)

6.3.6 Node Package Management

Gambar 6. 11 NPM
Node Package Manager (NPM) merupakan pengelola package untuk
JavaScript yang dapat memudahkan kita dalam mengelola package yang tersedia
pada https://www.npmjs.com/. NPM ini merupakan standard package manager
yang disediakan oleh Node.js dan otomatis terpasang ketika memasang Node.js
pada komputer kita.
Melalui NPM, dapat menggunakannya pada proyek yang berbeda. Package
yang tersedia pada NPM adalah sebuah module.Dalam menggunakan NPM, dapat
menulis perintah pada terminal (Linux/macOS) atau command
prompt/PowerShell (Windows). Ada banyak command yang tersedia pada NPM.
Untuk melihat daftarnya, kita dapat menjalankan perintah npm help pada
terminal/command prompt.
(Sumber: https://www.dicoding.com/blog/node-package-manager/)
6.4. Kesimpulan
1. Perintah npx create-react-app modul5-kel02 pada terminal untuk
membuat projek baru.
2. Perintah npm install react-router-dom http-server react-icons
untuk install modul yang dibutuhkan.
3. Perintah npm start pada terminal untuk menjalankan projek.
4. ‘cardbig.js’ digunakan untuk mengambil gambar, judul, dan genre film dari
API
5. ‘cardbig.css’ digunakan untuk penempatan, warna, ukuran font maupun
gambar, serta padding dan margin
6. Pada ‘cardsmall.js’ terdapat function onclick yang menunjukkan informasi
item id