PENGEMBANGAN SUBSISTEM APLIKASI PRUHUB
MENGGUNAKAN FRAMEWORK VISION-UI DI
PT PRIMA TEKNOLOGI KODEFOX
LAPORAN KERJA MAGANG
Andre Julian Irawan 00000022705
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG
PENGEMBANGAN SUBSISTEM APLIKASI PRUHUB MENGGUNAKAN FRAMEWORK VISION-UI DI PT PRIMA TEKNOLOGI KODEFOX
Oleh
Nama : Andre Julian Irawan NIM : 00000022705 Program Studi : Informatika
Fakultas : Teknik dan Informatika
Tangerang, 16 April 2021 Dosen Pembimbing
Alethea Suryadibrata, S.Kom., M.Eng.
Dosen Penguji
Marlinda Vasty Overbeek, S.Kom., M.Kom
Mengetahui, Ketua Program Studi
Informatika
Marlinda Vasty Overbeek, S.Kom., M.Kom
Digitally signed
by Marlinda
Vasty Overbeek
Date: 2021.04.21
07:52:58 +07'00'
Digitally signed by Marlinda Vasty Overbeek Date: 2021.04.21 07:53:11 +07'00'LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG
Dengan ini saya :
Nama : Andre Julian Irawan
NIM : 00000022705
Program Studi : Informatika
Menyatakan dengan ini bahwa saya telah melaksanakan praktek kerja magang: Nama Perusahaan : PT Prima Teknologi KodeFox
Divisi : Software Engineer
Alamat : New Media Tower lantai 12 Skystar Ventures, Universitas Multimedia Nusantara, Gading Serpong, Curug Sangereng, Tangerang Selatan, Banten.
Periode magang : 20 April – 26 Juni 2020 Pembimbing lapangan : Joshua Setiawan
Laporan kerja magang merupakan hasil karya saya sendiri, dan saya tidak melakukan plagiat. Semua kutipan karya ilmiah orang lain atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah saya sebutkan sumber kutipannya serta saya cantumkan di Daftar Pustaka.
Jika di kemudian hari terbukti ditemukan kecurangan/penyimpangan, baik dalam pelaksanaan kerja magang maupun dalam penulisan laporan kerja magang, saya bersedia menerima konsekuensi dinyatakan tidak lulus untuk mata kuliah kerja magang yang telah saya tempuh.
Tangerang, 27 Januari 2021
PENGEMBANGAN SUBSISTEM APLIKASI PRUHUB
MENGGUNAKAN FRAMEWORK VISION-UI DI
PT PRIMA TEKNOLOGI KODEFOX
ABSTRAK
PruHub merupakan aplikasi internal Prudential yang bertujuan untuk memudahkan pekerjaan admin Prudential dalam mengubah data nasabah. PruHub pada awalnya dibuat dengan menggunakan bahasa pemrograman Angular tetapi biaya Angular developer sangat tinggi. Oleh sebab itu, Prudential bekerja sama dengan PT. Prima Teknologi KodeFox untuk mengembangkan PruHub dengan menggunakan
framework Vision-UI. Vision-UI merupakan framework yang memiliki konsep protoyping sehingga pengguna yang belum mengerti programming. Vision-UI
mengubah sebuah JSON yang dibuat oleh pengguna menjadi komponen React Native. Tugas yang dilakukan selama praktek kerja magang adalah mengembangkan subsistem aplikasi PruHub dengan menggunakan framework Vision-UI seperti Client Detail, Filter Policy Detail, Form Surrender Individu, dan Form Surrender Corporate. Selain itu, tugas yang dilakukan adalah menambahkan fitur pada aplikasi PruHub yang tidak didukung oleh framework Vision-UI.
Kata Kunci: JSON, KodeFox, Prudential, PruHub, React Native, Subsistem,
DEVELOPING PRUHUB APPLICATION SUBSYSTEM WITH
VISION-UI FRAMEWORK IN PT PRIMA TEKNOLOGI
KODEFOX
ABSTRACT
PruHub is a Prudential internal application that helps to ease the works of the Prudential admin to change client’s data. PruHub was made using Angular but the cost for Angular developer is high. With that reason, Prudential and KodeFox work together to develop PruHub using Vision-UI framework. Vision-UI itself is a framework that have prototyping concept to help user that didn’t understand programming. Vision-UI takes a JSON and change it into React Native. Task that have been done in the internship is develop PruHub application subsystem with Vision-UI framework such as Client Detail, Filter Policy Detail, Form Surrender Individu, and Form Surrender Corporate. Other task that has been done is adding feature on PruHub application that Vision-UI framework didn’t support.
Keywords: JSON, KodeFox, Prudential, PruHub, React Native, Subsystem, Vision-UI
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa yang telah memberikan karunia-Nya, sehingga laporan kerja magang yang berjudul “PENGEMBANGAN SUBSISTEM APLIKASI PRUHUB MENGGUNAKAN FRAMEWORK VISION-UI DI PT PRIMA TEKNOLOGI KODEFOX” di PT Prima Teknologi KodeFox dapat diselesaikan sebelum waktu yang telah ditentukan.
Penulis juga ingin mengucapkan terima kasih kepada:
1. Dr. Ninok Leksono, Rektor Universitas Multimedia Nusantara, yang memberi inspirasi bagi penulis untuk berprestasi,
2. Dr. Eng. Niki Prastomo, S.T., M.Sc., Dekan Fakultas Teknik dan Informatika Universitas Multimedia Nusantara,
3. Marlinda Vasty Overbeek, S.Kom., M.Kom., Ketua Program Studi Informatika Universitas Multimedia Nusantara,
4. Alethea Suryadibrata, S.Kom., M.Eng., selaku Dosen Pembimbing laporan Kerja Magang yang telah mengajar penulis tata cara menulis karya ilmiah dengan benar.
5. Simon Sturmer, selaku Founder dan CTO PT Prima Teknologi KodeFox, yang telah membantu dan memberi pengarahan dengan sangat baik selama kerja magang,
6. Paul Sturmer, selaku CEO PT Prima Teknologi KodeFox, yang telah memberikan kesempatan dan pengarahan selama proses kerja magang,
7. Jesslyn Tanmas dan Jordy Rio, selaku Project Manager dari proyek Vision-UI di PT Prima Teknologi KodeFox, yang telah membantu dan memberikan pengarahan dengan sangat detil selama proses kerja magang,
8. Joshua Setiawan, selaku pembimbing proses kerja magang, yang telah sabar memberikan arahan dan masukan,
9. Keluarga yang telah tanpa henti memberikan dukungan dan doa dalam penyelesaian laporan ini,
10. Seluruh rekan kerja di PT Prima Teknologi KodeFox, yang terus mendukung dan menyemangati selama proses kerja magang maupun pembuatan laporan, 11. Teman-teman lain yang tidak dapat disebutkan satu per satu.
Semoga laporan kerja magang ini dapat memberikan manfaat, baik sebagai sumber informasi maupun sumber inspirasi bagi para pembaca.
Tangerang, 27 Januari 2021
DAFTAR ISI
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG ... ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG ... iii
ABSTRAK ... iv
ABSTRACT ... v
KATA PENGANTAR ... vi
DAFTAR ISI ... viii
DAFTAR TABEL ... ix
DAFTAR GAMBAR ... x
DAFTAR LAMPIRAN ... xi
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Maksud dan Tujuan Kerja Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3
BAB 2 GAMBARAN UMUM PERUSAHAAN ... 4
2.1 Sejarah Singkat Perusahaan ... 4
2.2 Struktur Organisasi Perusahaan ... 5
BAB 3 PELAKSANAAN KERJA MAGANG ... 6
3.1 Kedudukan dan Koordinasi ... 6
3.2 Tugas yang Dilakukan ... 8
3.3 Uraian Pelaksanaan Kerja Magang ... 8
3.3.1 Proses Pelaksanaan ... 9 3.3.2 Sitemap ... 10 3.3.3 Flowchart ... 12 3.3.5 Response API ... 23 3.3.4 Rancangan Tampilan ... 18 3.3.6 Daftar Komponen ... 27 3.3.7 Tampilan Halaman ... 36
3.3.8 Kendala yang Ditemukan ... 46
3.3.9 Solusi Atas Kendala yang Ditemukan ... 46
BAB 4 SIMPULAN DAN SARAN ... 48
DAFTAR TABEL
Tabel 3.1 Pembagian Tugas Tim KodeFox ... 6 Tabel 3.2 Pembagian Tugas Tim Prudential ... 7 Tabel 3.3 Realisasi Kerja Magang ... 9
DAFTAR GAMBAR
Gambar 2.1 Logo KodeFox ... 4
Gambar 2.2 Struktur Organisasi Perusahaan ... 5
Gambar 3.1 Sitemap Aplikasi PruHub ... 11
Gambar 3.2 Flowchart Halaman Client Detail ... 13
Gambar 3.3 Flowchart Halaman Filter Policy Detail ... 14
Gambar 3.4 Flowchart Form Surrender Individu ... 15
Gambar 3.5 Flowchart Modal Compare Document ... 17
Gambar 3.6 Flowchart Form Surrender Corporate ... 17
Gambar 3.7 Rancangan Tampilan Client Detail ... 19
Gambar 3.8 Rancangan Tampilan Filter Policy Detail ... 20
Gambar 3.9 Rancangan Tampilan Form Surrender Individu ... 21
Gambar 3.10 Rancangan Tampilan Form Surrender Corporate ... 22
Gambar 3.11 Hasil Response API Halaman Client Detail ... 23
Gambar 3.12 Hasil Response API Form Dropdown Filter Policy Detail ... 24
Gambar 3.13 Hasil Response API Filter Policy Detail ... 25
Gambar 3.14 Hasil Response API BRMS ... 26
Gambar 3.11 Tampilan Komponen Form Dropdown ... 28
Gambar 3.12 Potongan Kode Penggunaan Komponen Form Dropdown ... 28
Gambar 3.13 Schema JSON dari Komponen Form Dropdown ... 29
Gambar 3.14 Potongan Kode React Native dari Komponen Form Dropdown ... 31
Gambar 3.14 Tampilan Komponen Form Date Picker ... 32
Gambar 3.15 Potongan Kode Penggunaan Komponen Form Date Picker ... 32
Gambar 3.16 Schema JSON dari Komponen Form Date Picker ... 33
Gambar 3.17 Potongan Kode React Native dari Komponen Form Date Picker ... 35
Gambar 3.18 Tampilan Halaman Client Detail ... 37
Gambar 3.19 Tampilan Halaman Filter Policy Detail ... 39
Gambar 3.20 Tampilan Setelah Get Policy Detail Ditekan ... 40
Gambar 3.21 Tampilan Halaman Form Surrender Individu ... 42
Gambar 3.22 Tampilan Modal Compare Document ... 43
DAFTAR LAMPIRAN
1. CV (Curriculum Vitae)
2. FORM KM-03 (Kartu Kerja Magang) 3. FORM KM-04 (Kehadiran Kerja Magang) 4. FORM KM-05 (Laporan Realisasi kerja Magang) 5. FORM KM-07 (Lembar Verifikasi Laporan Magang) 6. Formulir Bimbingan Magang
