LAPORAN SINGKAT

FINAL PROJECT FRONTEND ENGINEERING

MAGANG DAN STUDI INDEPENDEN BERSERTIFIKAT
BATCH 3

DISUSUN OLEH
Feby Desna Yunita
2001092018

DOSEN PEMBIMBING
Defni, S.Si., M.Kom
NIP: 19811207 200812 2 001

PROGRAM STUDI MANAJEMEN INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI PADANG
2022
 Front End Engineering

A. Final Project di Ruangguru

Program Ruangguru CAMP pada setiap courses diberikan Final Project untuk
pengimplementasian selama pembelajaran, berikut daftar final project yang dikerjakan.

1. General Competence
Pada materi ini diberikan project tentang Mengidentifikasi, menganalisa, lalu
memecahkan dan mengomunikasikan /mempresentasikan solusi satu permasalahan atau isu
yang tengah beredar di masyarakat dan mencoba memberikan alternatif pemecahan masalah
dengan tugas yang diberikan berupa membuat pdf dan power point menggunakan Canva dan
mempresentasikannya.
a. Permasalahan atau Isu

Gambar 1. 1 Permasalahan atau Isu Final Project General Competence

b. Problem Tree

Gambar 1. 2 Problem Tree Final Project General Competence

c. Smart / Solusi

Gambar 1. 3 Smart / Solusi Final Project General Competence

 d. Power point

Gambar 1. 4 Power Point Final Project General Competence

2. Software Engineering
Pada materi ini diberikan project untuk membuat Pseudocode dan Flowchart dari
sebuah aplikasi dan pengimplementasian penggunaan git ke Github serta membuat video
presentasi. Pada project ini saya memilih untuk membuat pseudocode dan flowchart dari
aplikasi Food Order. Food Order adalah layanan pemesanan makanan secara online, kita bisa
melakukan pembayaran secara cash ataupun bank. Jika kita telah melakukan pemesanan maka
makanan yang kita pesan akan di antarkan oleh driver ke alamat kita. Saya memilih aplikasi ini
karena saat sekarang banyak orang yang melakukan pemesanan makanan secara online
sehingga saya ingin mempelajari alur logika aplikasi.
 Gambar 2. 1 Repositori Github Final Project Software Engineering

Berikut ini saya lampirkan hasil pengerjaan final project software engineering.

a. Flowchart
Pembuatan flowchart ini saya buat dengan menggunakan extensions pada vscode
yaitu Draw.io Integration.
 Gambar 2. 2 Flowchart Aplikasi Food Order Final Project Software Engineering

b. Pseudocode
Pseudocode adalah cara penulisan algoritma yang hampir menyerupai bahasa
pemrograman, namun pseudocode ditulis dengan lebih sederhana menggunakan bahasa
baku yang mudah dipahami oleh manusia. Kita dapat menggunakan bahasa apapun
dalam membuat pseudocode ini.
 Gambar 2. 3 Psedocode Aplikasi Food Order Final Project Software Engineering

c. Video presentasi
Berisi tentang alasan pemilihan aplikasi yang dibuat, tools yang digunakan, hasil
pengerjaan Pseudocode dan Flowchart, alur pembuatan, Commit message yang dibuat,
alur dari flow pada repository melalui Git history/Network.
 Gambar 2. 4 Video Presentasi Final Project Software Engineering

3. Frontend Web Development With HTML & CSS

Pada materi ini diberikan project untuk membuat Web Portopolio yang responsive,
ketika layar dikecilkan atau dibesarkan, layout akan mengikuti dan tidak berantakan.
Menggunakan HTML & CSS serta menggunakan framework Tailwind CSS sebagai alat bantu
styling serta mendeploy ke salah satu PaaS yaitu Netlify.

Website ini dapat dibuka diberbagaidevice seperti sebagai berikut :

a. Dekstop Version

Gambar 3. 1 Final Project HTML & CSS Desktop Version

b. Mobile Version

Gambar 3. 2 Final Project HTML & CSS Mobile Version

Tampilan Web Portopolio secara keseluruhan :

a. Dashboard

Gambar 3. 4 Final Project HTML & CSS Dashboard

b. Profil
Pada bagian kunjungan terdapat icon linkedin, github, Instagram, youtube. Icon ini bisa
di klik dan akan muncul akun profil saya.

Gambar 3. 5 Final Project HTML & CSS Profil

c. Portfolio
Terdapat portofolio dummy, beserta gambar dummy untuk masing-masing portofolio.

Gambar 3. 6 Final Project HTML & CSS Portfolio

d. Kontak
Disini kita bisa input kan nama email dan pesan yang ingin disampaikan, lalu klik
tombol kirim.

Gambar 3. 7 Final Project HTML & CSS Kontak

 e. Footer

Gambar 3. 8 Final Project HTML & CSS Footer

4. Programming with Javascript

Pada materi ini diberikan project berupa membuat sebuah program Ruang Cinema yang
akan merekomendasikan film-film yang dapat ditonton oleh setiap user sesuai dengan genre
yang mereka sukai.
Dalam pengerjaanya diminta harus memiliki berbagai fitur seperti berikut :
a. Findmovies yaitu fitur agar user bisa mencari atau memfilter film berdasar genrenya
yang disukainya.

Gambar 4. 1 Final Project JavaScript FindMovies

b. FindTicketAvaibility yang akan mendeteksi jumlah tiket yang akan dibeli user masih
tersedia atau tidak. Function ini akan mengembalikan sebuah boolean tentang
ketersediaan sebuah movie.

Gambar 4. 2 Final Project JavaScript FindTicketAvailable

c. FindRecomendation adalah fitur yang akan menampilkan film berdasar genre yang
disukai user dan tersedia.

Gambar 4. 3 Final Project JavaScript FindRecomendation

d. GenerateRecommendation adalah fitur yang akan menampikan film berdasar genre yang dipilih
serta biaya pembelian tiketnya.
 Gambar 4. 4 Final Project JavaScript GenerateRekomendation

5. Interacting with Web APIs

Pada materi ini diberikan project untuk membuat sebuah Calculator App yaitu sebuah
aplikasi kalkulator yang bisa melakukan perhitungan sederhana seperti penjumlahan,
pengurangan, perkalian, dan pembagian. Calculator App ini dibuat dengan bahasa
pemograman HTML dan Javascript. Fitur -fitur yang ada pada Calculator App:
• Calculator App memiliki button angka 0-9.
• Calculator App memiliki button . (titik) sebagai pemisah bilangan desimal.
• Calculator App memiliki button operator +, -, x, dan /
• Calculator App memiliki button sama dengan (=).
• Apabila button angka ditekan, maka angka tersebut akan ditampilkan pada layar
kalkulator.
• Apabila button operator ditekan, maka operator tersebut akan ditampilkan pada layar
kalkulator.
• Apabila button sama dengan (=) ditekan, maka kalkulasi akan dilakukan dan
hasilnya akan ditampilkan pada layar kalkulator.
• Apabila button AC ditekan, maka layar kalkulator akan di-clear.
• Apabila button Del ditekan, maka layar kalkulator akan di-clear satu per satu dari
kanan ke kiri.
• Setelah hasil kalkulasi ditampilkan, kemuadian button angka ditekan, maka hasil
kalkulasi akan di-clear dan angka baru akan ditampilkan pada layar kalkulator.
 Berikut Tampilam Calculator App :
a. Penjumlahan
• Inputan :

Gambar 5. 1 Calculator App Penjumlahan Input

• Hasil : Klik button “=”

Gambar 5. 2 Calculator App Penjumlahan Hasil

b. Pengurangan
• Inputan :

Gambar 5. 3 Calculator App Pengurangan Input

• Hasil

Gambar 5. 4 Calculator App Pengurangan Hasil

c. Perkalian
• Inputan

Gambar 5. 5 Calculator App Perkalian Input

• Hasil

Gambar 5. 6 Calculator App Perkalian Hasil

d. Pembagian
• Inputan

Gambar 5. 7 Calculator App Pembagian Input

• Hasil

Gambar 5.8 Calculator App Pembagian Hasil

6. Intro to Node.js
Pada materi ini diberikan project berupa pengimplementasian import export
menggunakan ES Modules serta Environment Variable.
 Gambar 6. 1 Final Project Intro To Node.js
7. Frontend Web Development with React
Pada materi ini diberikan project untuk membuat sebuah web Yu-Gi OH! application
single page menggunakan library ReactJS untuk menampilkan beberapa kartu dengan
melakukan fetch data dari sebuah 3rd party API. Yu-Gi OH! merupakan sebuah web sederhana
untuk menampilkan beberapa kartu.

Gambar 7. 1 Tampilan Final Project Frontend Web Development with React

Pada web Yu-Gi OH ini kita bisa melakukan sorting di komponen Select berdasarkan
name, attack, dan defence dari setiap kartu.
 Gambar 7. 2 Sorting

Gambar 7. 3 Halaman Detail Project ReactJS

8. Consuming RESTful API

Pada materi ini diberikan project untuk membuat web application yang bernama “Photo
Gallery App” yang mana aplikasi ini dapat menampilakan, menambah, mengedit dan
menghapus foto yang ada pada aplikasi tersebut.
a. Home

Gambar 8. 1 Tampilan Final Project RestFull API

b. My photos

Gambar 8. 2 My Photos Final Project RestFull API

Pada tampilan My Photos kitab isa melakukan sorting data secara Ascending dan
Descending serta dapat mencari gambar tertentu menggunakan search query, contoh nya
:
 Gambar 8. 3 Sorting Final Project RestFull API

Button Edit digunakan untuk mengedit data, contohnya :

Gambar 8. 4 Sebelum Data di Edit

Gambar 8. 5 Setelah di Edit

Button Delete digunakan untuk menghapus
 c. Add Photo

Gambar 8. 6 Halaman Add Photo

9. Frontend Deployment to Production
Pada materi ini diberikan project untuk mendeploy web application yang telah dibuat
pada final project Restfull API. Di deploy ke platform PaaS firebase.

Gambar 9. 1 Deploy Firebase

 Gambar 9. 2 Web Application yang telah di Deploy

B. Proses Pengerjaan Final Project di Ruangguru

Pada pelaksanaannya selama mengerjakan semua final project tidak selalu

berjalan dengan baik, dikarenakan saya dan teman – teman yang lain ada yang baru
pertama kali terjunke dunia programmer, tetapi tidak menutup usaha saya untuk belajar
dan memahami project –project yang diberikan.

Solusi dari permasalahan yang saya dan teman – teman yang lain hadapi yaitu
mengadakan diskusi bersama untuk menyelesaikan kendala yang dihadapi, serta
dibuatnya channel ruang konsultasi oleh tim Ruangguru untuk berkonsultasi terkait
project yang tengah dikerjakan.