LAPORAN PRAKTEK BAB 5

Mohd.Irvan Ardiansyah 1810128262069

AGENDA
Daftar Pembahasan
Agenda
Ruang Lingkup
01

Pengolahan Data
02

Pengembangan Metode DevOps

03

Kesimpulan Dan Saran

04
 Ruang Lingkup
Pengembangan
Aplikasi ini dikembangkan dengan menggunakan
IDE VS Code dengan framework node js yaitu
Angular dan teknologi firebase.

Usia Dinamis
Aplikasi Form Dinamis untuk Aplikasi ini mencakup
usia remaja 18-25 dan tua Aplikasi pembuatan form secara
keatas dinamis dan dapat diubah
sesuai kemauan pengguna.
Form Dinamis

Pengaplikasian
Aplikasi ini dikembangkan untuk web platform
dengan versi browser yang terbaru
PENGOLAHAN
DATA
Pengolahan data ialah tahapan untuk mendesain
database yang nantiknya akan kita integrasi ke
sistem aplikasi. Database yang digunakan ialah
Firebase dan firebase ini termasuk kedalam noSQL.

Adapun Data Tabel Yang Digunakan ialah:

1. Tabel Authentication
2. Tabel User
3. Tabel Menu
4. Tabel Forms
Tabel Authentication

Nama Tipe Data

Identifier String
Providers Email/Password
Created Date
Signed In Date
User UID String Hash
Tabel User

Nama Tipe Data

UID String Hash
Email String
Key String Hash
Level Enum
Name String
Password String Hash
Tabel Menu

Nama Tipe Data

UID String Hash
Moment ID String
canBeShared Boolean
formType Enum
Name String
oneFillOnly Boolean
type String
Tabel Form

Nama Tipe Data

Form ID String
UID String Hash
Moment ID String
Template Array of String
Dynamic Fields String
PENGEMBANGAN
Metode DevOps
Pengembangan Metode DevOps

Metode DevOps yang akan kita gunakan kali ini adalah Plan
development, untuk metode ini terdapat beberapa
tahapan yaitu tahapan:
1. plan
Code
2. code
3. build
4. dan test
Berguna untuk mengembangkan aplikasi sistem form Build
dinamis.

Test
 Plan
Flowchart

P Menampilkan alur kerja aplikasi form dinamis

dalam bentuk flowchart

Mockup

C Menampilkan rancangan tampilan aplikasi yang

hendak di desain

Penjadwalan

B Pada penjadwalan disusun secara rapi apa saja

yang perlu dikerjakan pertama, kedua, dan
seterusnya

T Persyaratan

Persyaratan yang akan digunakan dalam

pembuatan aplikasi form dinamis
Plan Flowchart
Plan UML Activty Diagram
 Code
Bahasa Pemograman

P Bahasa pemograman yang digunakan dalam

pembuatan aplikasi

Class Diagram

C Menampilkan struktur database dan relasinya

melalui class diagram

Sequence Diagram

B Menampilkan hubungan alur kerja user client

dengan server firebase

T
Pengintegrasian File IDE

Pengintegrasian file Integrated development

environment atau lingkungan tempat
pengembangan aplikasi
 Bahasa Pemograman

01 Javascript
02 Typescript
03 HTML
04 SCSS
Code Class Diagram
Code Sequence Diagram
Code IDE & Struktur File

Struktur File

Lingkungan Kerja VS Code

 Build
Enkripsi

P Program teknisi yang mengonversi data informasi

menjadi informasi rahasia

Dekripsi

C Proses teknis yaitu mengonversi kode menjadi

kode yang dapat dibaca

Environment

B Lingkungan pengembangan yang digunakan

dalam aplikasi form dinamis

T
Release / Product Build

Proses aplikasi dimana aplikasi telah terenkripsi

dan telah selesai melalui uji testing, dan aplikasi
ini telah siap untuk dipakai.
 Dekripsi & Enkripsi
Main Contents
Dekripsi Enkripsi
You can simply impress your audience
Proses teknis yaitu mengonversi kode and add a unique zing. Program teknisi yang mengonversi data
menjadi kode yang dapat dibaca informasi menjadi informasi rahasia
. .

Contoh Contoh

eyj0exai0ijkv1 My test secret

My test secret eyj0exai0ijkv1

 Build Product Release

Proses Build

Menjalankan Perintah Build

 Test
Black Box Testing

P Pengujian yang didasarkan pada detail aplikasi

seperti tampilan, fungsi-fungsi, dan kesesuaian alur

White Box Testing

C Pengujian yang didasarkan pada detail prosedur

dan logika kode program

Karma Test

B Pengujian angular untuk memeriksa hubungan

frontend dan backend

T
End To End Test

Pengujian yang bertujuan untuk memeriksa

komponen dalam frontend
Test Blackbox Testing
Aktivitas Realisasi yang Hasil Pengujian Kesimpulan
Pengujian diharapkan
Masuk halaman Tampil halaman Halaman login Berhasil
awal login berhasil tampil
Klik tombol Tampil halaman Berhasil Berhasil
signup register menampilkan
halaman register
Klik tombol Menambahkan Berhasil Berhasil
Save di halaman id baru dengan menambahkan id baru
register level user dan terdaftar sebagai
user
Klik tombol Masuk halaman Halaman dashboard Berhasil
signin dashboard berhasil tampil
Klik menu icon Masuk Halaman Halaman Create Form Berhasil
Form Create Form Berhasil Tampil
Testing Input dan Data sesuai Data output sesuai Berhasil
tombol select dengan inputan dengan inputan
form
Klik tombol save Data form Data form berhasil Berhasil
di create form disimpan disimpan
Klik tombol menu Tampil halaman Tabel form berhasil Berhasil
Form yang telah form data tabel ditampilkan dengan
dibuat datanya
Klik tombol menu Tampil halaman Berhasil Berhasil
add data form data menampilkan
halaman form data
Klik tombol save Simpan form Berhasil menyimpan Berhasil
di halaman form data baru ke data baru ke tabel
data tabel form form
Test Whitebox Testing
 Test Karma Test

Proses Build

Menjalankan Perintah Test

 Test End To End

Proses Build

Menjalankan Perintah Test

 Kesimpulan

Memudahkan pengguna untuk mengakses data tabel form yang telah dibuat.

Memudahkan pengguna mendapatkan form yang diiinginkan

Memudahkan pembuatan form secara dinamis melalu aplikasi

website

Menambah wawasan bahwa semua aplikasi bisa dibuat secara

dinamis dan otomatis.

Saran
Sistem aplikasi form dinamis dibuat dengan tahapan yang terstruktur dan terintegrasi dengan baik, namun aplikasi ini belum sempurna dan masih
banyak kekurangan seperti unexpected behavior yang akan dialami oleh pengguna. Untuk itu diharuskan ada nya pihak ketiga selain developer untuk
melakukan unit testing dengan secara menyeluruh agar kejadian yang tak terduga bisa diatasin dengan baik dan cepat
THANK YOU