BAB VI

React Progressive Web Application (PWA) I

6.1. Tujuan (Min 5)

6.2. Alat dan Bahan

6.2.1. Laptop

Gambar 6.2.1 Laptop

Laptop adalah suatu perangkat keras portabel yang digunakan para

praktikan untuk menjalankan IDE android studio yang digunakan pada praktikum.

6.2.2. Smartphone

Gambar 6.2.2 Smartphone

Smartphone adalah sebuah perangkat mobile yang digunakan praktikan
untuk menampilkan hasil running program aplikasi yang telah dibuat.
6.2.3. Aplikasi web browser
 Gambar 6.2.3 Aplikasi web browser
Web browser adalah sebuah perangkat lunak, yang digunakan untuk
menampilkan hasil running program aplikasi yang dibuat pada praktikum modul 5
ini.

6.2.4. Text editor

Gambar 6.2.4 Text editor VSCode

Visual Studio Code (disingkat VSCode) adalah text editor yang dibuat
oleh Microsoft dan dapat digunakan pada Linux, macOS, dan Windows.

6.2.5. Node.js

Gambar 6.2.5 Node.js

Node.js adalah perangkat lunak yang didesain untuk mengembangkan
aplikasi berbasis web dan ditulis dalam sintaks bahasa pemrograman JavaScript.
6.3. Dasar Teori
6.3.1. Progressive web app (PWA)
 Gambar 6.3.1 Progressive web app (PWA)
PWA adalah kepanjangan dari Progressive Web App, yaitu 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, kita tidak perlu membuat aplikasi mobile secara terpisah.
PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan
penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi
mobile di ponsel atau tablet. Beberapa contoh website yang menggunakan PWA
adalah Twitter, Pinterest, OLX dan Trivago.
Berikut ini karakteristik yang dimiliki oleh progressive web app:
● Dibuat mengandalkan browser dan cross platform
● Update berjalan otomatis
● Bisa berjalan dalam kondisi offline
● Menghadirkan UX yang lebih intuitif dari web app
● Biaya development murah
(Sumber: https://psti.unisayogya.ac.id/2020/02/05/berkenalan-dengan-progressive-web-apps-pwa/)

6.3.2. React JS

Gambar 6.3.2 React JS

 React JS adalah sebuah pustaka/library javascript yang bersifat open
source untuk membangun user interface yang dibuat oleh Facebook. React JS
dapat mendesain tampilan sederhana untuk setiap level dalam aplikasi, sehingga
dapat digunakan untuk membuat dan mengembangkan pembuatan aplikasi
berbasis web. React JS menjadi pilihan oleh developer – developer untuk
mengembangkan aplikasi berbasis web dikarenakan banyaknya template –
template yang sudah tersedia di internet seperti contohnya material-ui dan core-ui.
React JS memiliki beberapa fitur yang diunggulkan sebagai berikut:
● Declarative
React dapat membuat UI(User Interfaces) yang interaktif, sehingga dapat
dengan mudah membuat desain yang simple untuk di setiap state di dalam
aplikasi. Declarative views dapat membuat kode lebih mudah untuk di
prediksi dan lebih mudah untuk di debug.
● Components– Based
React dapat membuat encapsulated component yang dapat mengatur setiap
tahapannya, lalu dapat membuat complex UIs berdasarkan kemampuan
tersebut.
● Learn Once, Write Anywhere
Developer dapat men-develop fitur baru menggunakan react tanpa
mengubah kode sebelumnya, react juga dapat bekerja menggunakan Node
JS dan mobile apps menggunakan React Native.
(Sumber: https://socs.binus.ac.id/2019/12/30/apa-itu-react-js/)

6.3.3. Component dan Props

Gambar 6.3.2 Component dan Props

 Component memungkinkan kamu membagi User Interface (UI) menjadi
bagian-bagian yang independen dan dapat digunakan kembali, dan memikirkan
setiap bagian secara terpisah. Secara konseptual, komponen seperti fungsi
JavaScript. Mereka menerima input (Props) dan mengembalikan elemen React
yang menggambarkan apa yang akan muncul di layar.
Props merupakan singkatan dari property yaitu sebuah “model” data yang
memiliki fungsi ganda yaitu selain untuk menyimpan data, Props juga berfungsi
untuk “melempar data” antar components view jika ada perubahan data di state.
(Sumber: https://www.techfor.id/pengertian-component-dan-props-pada-react-js/ ;
https://devsaurus.com/react-props-state-event )

6.3.4. Javascript

Gambar 6.3.4 Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada
fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa
ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa
pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML
dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di
sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil
halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di
dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau
penerjemah khusus untuk menjalankannya (pada kenyataannya kompilator
Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan
bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang
memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.
 (Sumber: https://repository.unikom.ac.id/46889/1/Modul%20Lengkap%20Javascript.pdf)

6.3.5. Node JS

Gambar 6.3.5 Node.js

Node.js merupakan salah satu platform pengembang yang dapat digunakan
untuk membuat aplikasi berbasis Cloud. Node.js dikembangkan dari engine
JavaScript yang dibuat oleh Google untuk browser Chrome ditambah dengan
libuv serta beberapa pustaka lainnya. Node.js menggunakan JavaScript sebagai
bahasa pemrograman dan event-driven, non-blocking I/O (asynchronous) model
yang membuatnya ringan dan efisien. Node.js memiliki fitur built-in HTTP server
library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan
software lainnya seperti Apache dan Nginx.
Pada dasarnya, Node.js adalah sebuah runtime environment dan script
library. Sebuah runtime environment adalah sebuah software yang berfungsi
untuk mengeksekusi, menjalankan dan mengimplementasikan fungsi-fungsi serta
cara kerja inti dari suatu bahasa pemrograman. Sedangkan script library adalah
kumpulan, kompilasi atau bank data berisi skrip/kode-kode pemrograman.
(Sumber: https://eprints.utdi.ac.id/3948/3/3-125410225_BAB_2.pdf)

6.3.6. Node Package Management

Gambar 6.3.5 Node Package Management

 NPM merupakan singkatan dari Node Package Manager yaitu salah satu
package management yang tersedia untuk bahasa pemrograman JavaScript. Selain
itu, NPM juga merupakan manager paket default untuk Node.js. Manager paket
sendiri merupakan kumpulan alat perangkat lunak yang dapat digunakan
developer untuk mengautomasi pengelolaan paket dengan cara standar. Dengan
begitu, developer tidak perlu lagi mengelola paket dari pihak ketiga. Developer
dapat berfokus pada pengembangan daripada pemeliharaan paket.
NPM berfungsi sebagai project open source Node.js yaitu NPM menjadi
tempat bagi developer untuk berbagi paket JavaScript di npmjs.org. Selain itu
NPM digunakan sebagai command line interface (CLI) untuk mengelola,
mengunduh, dan mengunggah paket JavaScript. Tampilan dari CLI mirip dengan
Command Prompt di Windows atau Terminal di Linux.
NPM bekerja sesuai dengan dua fungsi yang dimilikinya. Pertama, sebagai
tempat penyimpanan paket JavaScript dan kedua sebagai CLI yang berguna untuk
mengelola paket yang tersedia di repository NPM. Aturan umum dalam
menggunakan Node.js adalah kamu akan membutuhkan file package.json. File
package.json pada dasarnya adalah panel kontrol untuk NPM. File package.json
berisikan metadata, seperti: Nama proyek, Versi, Deskripsi, Entry point, Test
command, Repository git, Keyword, Lisensi, Dependency, dan devDependency.
(Sumber: https://ids.ac.id/apa-itu-node-package-manager/)

6.4. Langkah Kerja

1. Membuat projek react pada folder yang dinginkan dengan mengetikan
command npx create-react-app modul5-kel10
 Membuat projek react pada CMD
2. Pindah direktori ke folder project dan instal react-router-dom, http-
server, dan react-icons.
3. Buka folder projek react pada visual studio code

Isi folder dari prjek modul5_kel10

4. Masukkan source code berikut pada “App.js”.
Source Code App,js
import React from 'react';
import { BrowserRouter, Routes, Route, NavLink } from
'react-router-dom';
import { HiHome } from 'react-icons/hi';
import { MdGroup } from 'react-icons/md';
import './App.css';
import Movie from './Pages/Movie';
import Profile from './Pages/Profile';

function App() {
return (
<BrowserRouter>
<header>
<p id="titleGroup">Kelompok 10</p>
</header>
<Routes>
 <Route path="" element={<Movie />} />
<Route path="/profile" element={<Profile />} />
</Routes>
<footer>
<NavLink to="" className="iconWrapper">
<HiHome className="icon" />
Movie
</NavLink>
<NavLink to="/profile" className="iconWrapper">
<MdGroup className="icon" />
Profile
</NavLink>
</footer>
</BrowserRouter>
);
}

export default App;

5. Masukan source code berikut pada file App.css

Source Code App.css
body {
background-color: rgb(40, 40, 68);
}

#titleGroup {
margin: 0;
font-size: 18px;
color: white;
font-family: Verdana;
font-weight: bolder;
font-size: 16px;
}

header {
background-color: rgb(65, 65, 233);
margin: auto;
text-align: center;
padding: 10px 0;
}

footer {
display: flex;
 position: fixed;
bottom: 0;
left: 0;
background-color: rgb(23, 23, 43);
width: 100%;
justify-content: space-around;
align-items: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top: black;
border-width: 2px;
}

.iconWrapper {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: white;
font-family: Verdana;
padding: 5px 0;
font-size: 12px;
}

.icon {
color: white;
margin-bottom: 4px;
font-size: 22px;
}

.active {
color: rgb(65, 65, 233);
}

::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background: #4141e9;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #4141e9;
}
::-webkit-scrollbar-track {
background: #24233b;
box-shadow: inset 0px 0px 0px 0px #f0f0f0;
}
6. Buatlah folder baru bernama “component” dan “pages” pada “src”.
7. Buat file “CardBig.js” dan “CardBig.css” pada folder “component”.
8. Masukkan source code berikut pada file baru saja dibuat.
Source code CardBig.js :
import React from 'react';
import { AiFillStar } from 'react-icons/ai';
import './CardBig.css';

export default function CardBig(props) {

return (
<div className="containerBig">
<img src={props.img} alt="" className="posterBig" />
<div className="descriptionBig">
<div>
<p id="title">{props.title}</p>
<p id="genre">{props.genre}</p>
</div>
<div>
<AiFillStar color={props.color}
size={props.size} />
<AiFillStar color={props.color}
size={props.size} />
<AiFillStar color={props.color}
size={props.size} />
<AiFillStar color={props.color}
size={props.size} />
<AiFillStar color={props.color}
size={props.size} />
</div>
</div>
</div>
);
}

Source code CardBig.css

containerBig {
padding-left: 40px;
}

.posterBig {
width: 280px;
height: 160px;
border-radius: 2px;
border-radius: 20px;
}

.descriptionBig {
display: flex;
justify-content: space-between;
align-items: center;
}

#title {
color: white;
font-size: 22px;
font-weight: bold;
font-family: Verdana;
}
 #genre {
color: grey;
font-family: Verdana;
font-weight: 500;
font-size: 12px;
margin-top: 5px;
}
9. Buat file “CardSmall.js” dan “CardSmall.css” pada folder “component”.
10. Masukkan source code berikut pada file yang baru saja dibuat.
Source code CardSmall.js :
import React from 'react';
import { AiFillStar } from 'react-icons/ai';
import './CardSmall.css';

export default function CardSmall({ title, genre, img, size,

color, onClick }) {
return (
<div className="card" onClick={onClick}>
<img src={img} alt="" className="photo" />
<div className="description">
<div>
<p id="title">{title}</p>
<p id="genre">{genre}</p>
</div>
<div>
<AiFillStar color={color} size={size} />
<AiFillStar color={color} size={size} />
<AiFillStar color={color} size={size} />
<AiFillStar color={color} size={size} />
<AiFillStar color={color} size={size} />
</div>
</div>
</div>
);
}
Source code CardSmall.js :
.card {
display: flex;
margin-bottom: 20px;
padding-left: 40px;
cursor: pointer;
}

.photo {
width: 90px;
height: 120px;
border-radius: 12px;
}

.description {
display: flex;
padding-left: 20px;
flex-direction: column;
 justify-content: space-around;
}

#title {
color: white;
font-size: 22px;
font-weight: bold;
font-family: Verdana;
}

#genre {
color: grey;
font-family: Verdana;
font-weight: 500;
font-size: 12px;
margin-top: 5px;
}
11. Pada folder “pages” yang tadi sudah dibuat. Buat file “Movie.js”,
“Movie.css”, dan “Profile.js”.
12. Masukkan source code berikut ke file yang baru saja dibuat.
Source code Movie.js :
import React from 'react';
import { Fragment } from 'react';
import CardBig from '../Components/CardBig';
import CardSmall from '../Components/CardSmall';
import './Movie.css';

export default function Movie() {

const STAR_COLOR = 'rgb(220, 117, 21)';
const STAR_SIZE = 20;

const poster = [
{
title: 'John Wick',
id: 1,
rate: 4,
genre: 'action, crime',
img:
'https://dafunda.com/wp-content/uploads/2019/05/john-wick-
4.jpg',
},
{
title: 'John Wick',
id: 2,
rate: 4,
genre: 'action, crime',
img:
'https://dafunda.com/wp-content/uploads/2019/05/john-wick-
4.jpg',
},
{
title: 'John Wick',
 id: 3,
rate: 4,
genre: 'action, crime',
img:
'https://dafunda.com/wp-content/uploads/2019/05/john-wick-
4.jpg',
},
];
const data = [
{
title: 'John Wick',
id: 1,
rate: 4,
genre: 'action, crime',
img:
'https://i.pinimg.com/originals/ee/ff/46/eeff468a7cde5720e45
c4f7a1daf8d95.png',
},
{
title: 'John Wick',
id: 2,
rate: 4,
genre: 'action, crime',
img:
'https://i.pinimg.com/originals/ee/ff/46/eeff468a7cde5720e45
c4f7a1daf8d95.png',
},
{
title: 'John Wick',
id: 3,
rate: 4,
genre: 'action, crime',
img:
'https://i.pinimg.com/originals/ee/ff/46/eeff468a7cde5720e45
c4f7a1daf8d95.png',
},
];

return (
<>
<p id="movies">Top Movies</p>
<div className="containerTop">
{poster.map((item, index) => (
<Fragment key={item.id}>
<CardBig title={item.title} img={item.img}
genre={item.genre} size={STAR_SIZE} color={STAR_COLOR} />
{data.length === index + 1 ? <div
style={{ marginRight: 40 }} /> : null}
</Fragment>
))}
</div>
<p id="movies">All Movies</p>
{data.map((item, index) => (
<Fragment key={item.id}>
 <CardSmall title={item.title} img={item.img}
genre={item.genre} size={STAR_SIZE} color={STAR_COLOR}
onClick={() => alert('item id = ' + item.id)} />
{data.length === index + 1 && <div
style={{ marginBottom: 80 }} />}
</Fragment>
))}
</>
);
}
Source Code Movie.css
p {
padding: 0;
margin: 0;
}

.containerTop {
display: flex;
overflow: auto;
padding-bottom: 10px;
}

.card {
display: flex;
margin-bottom: 20px;
padding-left: 40px;
}

.photo {
width: 90px;
height: 120px;
border-radius: 12px;
}

.description {
display: flex;
padding-left: 20px;
flex-direction: column;
justify-content: space-around;
}

#movies {
padding: 20px 0 20px 40px;
color: white;
font-size: 24px;
font-weight: bolder;
font-family: Verdana;
}

#title {
color: white;
font-size: 22px;
font-weight: bold;
font-family: Verdana;
}
 #genre {
color: grey;
font-family: Verdana;
font-weight: 500;
font-size: 12px;
margin-top: 5px;
}
Source Code Profile.js
import React from 'react';
import { Card } from 'react-bootstrap';

export default function Profile() {

return (
<div style={{ display: 'flex', justifyContent:
'center' }}>
<h1 style={{ color: 'white' }}>Profile</h1>
</div>
);

6.5. Hasil Percobaan & Analisis

Halaman home

Dapat dilihat pada gambar di atas merupakan hasil dari program percobaan
modul 1. Gambar di atas merupakan bagian dari home atau bagian menampilkan
list movie – movie dari John Wick. Halaman home tersebut di Kelola pada file
movie.js dan movie.css. Terdapat beberapa konstanta pada source code movie.js
yaitu: poster,STAR_COLOR,STAR_SIZE,dan data. Pada konstanta poster dan
data merupakan array object yang di mana terdapat nama – nama dari list film
yang akan ditampilkan. STAR_COLOR dan STAR_SIZE berfungsi untuk
memberikan warna dan ukuran pada bintang di setiap card.

Lalu untuk memanggil component cardbig dan cardsmall harus

menggunakan mapping di setiap array. Hal ini dilakukan agar pada cardbig dan
cardsmall dapat membaca data dari konstanta array object. Dalam file cardbig.js
dan cardsmall.js terdapat props yang di mana berfungsi untuk melakukan lalu
lintas data pada setiap component.

Halaman profile

Pada halaman profile tidak berisi apapun dikarenakan halaman terebut

masih belum diisi source code lagi. Dapat dilihat pada gambar di atas terdapat
navigasi di bawah halaman. Hal ini memungkinkan dapat berpindah dengan
meng-klik icon pada halaman. Tag navlink berfungsi untuk membuat sebuah
navigasi bar dan untuk menghubungkan antar halaman adalah element path pada
tag route
6.6. Tugas
Pada bagian tugas untk modul 5 ini, praktikan diberikan tugas dimana kita
harus membuat list nama akun GitHub kami dimana halaman tersebut dapat
menayangkan akun GitHub masing-masing anggota termasuk dengan nama
lengkan, email, avatar dan username dari GitHub. Halaman profile baru ini telah
diimplementasikan pada bagian Profile.js
Profile.js

/* Profile.js Tugas Mod5 */

import React, { useState, useEffect } from "react";

import "./Profile.css";
import axios from "axios";

const githubAccount = ["HafidzPR", "anandazahir", "renaldyap",

"AnggaRafi"];

export default function Profile() {

const [count, setCount] = useState(0);
const [data, setData] = useState("");

const prev = () => {

const nextCount = count - 1;
count === 0 ? setCount(githubAccount.length - 1) :
setCount(nextCount);
}

const next = () => {

const nextCount = count + 1;
count === githubAccount.length - 1 ? setCount(0) :
setCount(nextCount);
}

useEffect(() => {
const fetchData = async () => {
await axios
.get(`https://api.github.com/users/$
{githubAccount[count]}`)
.then(res => setData(res.data))
.catch(error => alert("Gagal!", error));
};
fetchData();
}, [count]);

return (
<div className="profile">
<h1>Profile</h1>
<div className="avatar">
<img src={data.avatar_url} alt={data.login} />
</div>
 <div className="full-name">{data.name}</div>
<div className="username">{data.login}</div>
<div className="bio">{data.bio}</div>
<div className="follow-stat">
<span className="followers">{data.followers}
followers</span>
<span> · </span>
<span className="following">{data.following}
following</span>
</div>
<div className="stat">
<span className="repo">{data.public_repos} public
repositories</span>
<span> · </span>
<span className="gists">{data.public_gists} public
gists</span>
</div>
<div className="navigation-left" onClick={prev}>
<img src="/images/svg/chevron-left.svg" alt="Left" />
</div>
<div className="navigation-right" onClick={next}>
<img src="/images/svg/chevron-right.svg" alt="Right" />
</div>
</div>
);
}

Source Code diatas memiliki array yang telah diisi dengan username
GitHub dari para anggota kelompok 10. Array pada source code ini memiliki
fungsi sebagai proses fetch API dimana kita menggunakan library Axios. Pada
halaman profile ini pun juga memiliki tombol yang dapat diinteraksi dengan
simbol (<) untuk pindah halaman dan menampilkan data akun GitHub pada
halaman sebelumnya dan tombol (>) untuk pindah halaman dan menampilkan
data akun GitHub pada halaman selanjutnya. Urutan akun GitHub yang
ditampilkan pada halaman-halaman ini akan sesuai dengan urutan yang telah
dicantumpkan pada array.

Halaman-halaman data akun GitHub ini akan menampilkan foto profil

GitHub, username, bio, followers, following, public repositories dan juga public
gists.

Style yang dapat dilihat pada tampilan halaman profile ini telah
dikonfigurasikan pada bagian Profile.css seperti berikut. Warna pada halaman
profile dimiripkan dengan halaman yang lainya untuk untuk transisi yang mulus.
Profile.css

/* Profile.css Tugas Mod5 */

.profile {
color: #f0f0f0;
text-align: center;
}

.profile h1 {
text-align: center;
padding: 1rem 0;
}

.avatar img {
border-radius: 50%;
width: 222px;
height: 222px;
}

.full-name {
font-weight: bold;
font-size: 1.3rem;
}

.username {
color: #ccc;
}

.bio {
padding: 1rem 0;
}

.stat {
padding-top: 1rem;
}

.navigation-left, .navigation-right {
position: fixed;
top: 45%;
background-color: rgba(41, 41, 233, .5);
cursor: pointer;
}

.navigation-right {
right: 0;
}

.navigation-left img, .navigation-right img {

width: 60px;
 height: 60px;
padding: .8rem;
}

Gambar 6.6.1 Tampilan halaman profile akun GitHub

6.7. Kesimpulan
1. Komponen CardBig dan CardSmall digunakan pada aplikasi ini untuk
menampilkan foto beserta detail yang akan muncul pada aplikasi ini.
2. CSS digunakan untuk memberikan styling tampilan pada aplikasi PWA
modul 5 ini.
3. Pengguna aplikasi dapat melakukan navigasi diantara berbagai halaman
pada aplikasi PWA ini dengan menggunakan library React Router
(reactrouter-dom).
4. Pada percobaan modul 5 ini, pembuatan Aplikasi PWA dibuat
menggunakan bahasa pemrograman JavaScript dengan IDE Visual Studio
Code.

5. Pada komponen CardSmall.js memiliki function onClick yang dapat

digunakan para pengguna agar dapat mengeluarkan aksi saat event klik
pada elemen.