RANCANG BANGUN FRONT END APLIKASI FORUM LEXICON PADA KODEFOX, INC.
LAPORAN KERJA MAGANG
Carissa Komalasari 00000019971
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG 2020
ii
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG
RANCANG BANGUN FRONT END APLIKASI FORUM LEXICON PADA KODEFOX, INC.
Oleh
Nama : Carissa Komalasari
NIM : 00000019971
Program Studi : Informatika
Fakultas : Teknik dan Informatika
Tangerang, 28 Oktober 2020 Dosen Pembimbing
Eunike Endariahna Surbakti, S.Kom., M.T.I.
Dosen Penguji
Adhi Kusnadi, S.T., M.Si.
Mengetahui, Ketua Program Studi
Informatika
Marlinda Vasty Overbeek, S.Kom., M.Kom
iii
Lembar Pernyataan Tidak Melakukan Plagiat Dalam Penyusunan Laporan Kerja Magang
Dengan ini saya:
Nama : Carissa Komalasari
NIM : 00000019971
Program Studi : Informatika
Menyatakan bahwa saya telah melaksanakan praktek kerja magang:
Nama Perusahaan : KodeFox, Inc.
Divisi : Engineering
Alamat : Jl. Boulevard Raya Gading Serpong, Tangerang, Periode Magang : 14 Juni 2020 - 30 September 2020
Pembimbing Lapangan : Gabriella Putri Wiratama
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 kemudian hari terbukti ditemukan kecurangan atau 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, 8 Oktober 2020
Carissa Komalasari
iv
RANCANG BANGUN FRONT END APLIKASI FORUM LEXICON PADA KODEFOX, INC.
ABSTRAK
Forum diskusi di internet merupakan salah satu media bagi para pengembang aplikasi dalam mencari solusi atas masalah yang dihadapi. Walaupun memiliki peran yang penting, forum diskusi yang tersedia saat ini nyatanya masih terbatas, terutama forum berbasis mobile. Oleh sebab itu, KodeFox, Inc. memulai proyek Lexicon yang bertujuan untuk membuat aplikasi forum mobile cross- platform. Aplikasi ini pada mulanya akan digunakan oleh pihak internal untuk saling membantu menyelesaikan permasalahan yang ada, kemudian akan dibuat menjadi proyek open-source di masa yang akan datang. Dalam praktek kerja magang yang dilaksanakan, pembuatan front end aplikasi ini menggunakan framework React Native dengan bahasa pemrograman Typescript. Pengerjaan hanya dilakukan hingga tahap penyelesaian layout untuk seluruh halaman dikarenakan skala proyek yang cukup besar, adanya keterbatasan tenaga kerja untuk back end, dan ditambah dengan keterbatasan waktu. Pembuatan tampilan telah selesai dibuat, dan saat ini aplikasi masih terus dikembangkan, dibenahi, dan mulai diintegrasikan dengan back end.
Kata Kunci: Aplikasi Mobile, Forum, Front End, Lexicon, React Native
v
DESIGNING FRONT END FOR LEXICON FORUM APPLICATION IN KODEFOX, INC.
ABSTRACT
Discussion forum on the internet is one of the mediums for application developers in finding solutions to the problems at hand. Despite being often used, the available discussion forums are still in fact limited, especially mobile-based forums. This fact intrigues KodeFox, Inc. to start developing a cross-platform mobile-based forum app, named Lexicon. Lexicon will initially be used internally to help each other solve existing problems, then will be made into an open-source project in the following future. The front end of this application was made using React Native framework along with Typescript as the programming language. The internship is carried out only until the completion stage of the layout for the entire scene, due to large project scope, limited manpower on the back end, and limited time. All layout scenes have been made completely and this application is still being developed, improved, and integrated with the back end.
Key Words: Mobile Application, Forum, Front End, Lexicon, React Native
vi
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa atas Karunia-Nya, sehingga laporan kerja magang dengan judul: RANCANG BANGUN FRONT END APLIKASI FORUM LEXICON PADA KODEFOX, INC. yang dibuat untuk memenuhi salah satu syarat memperoleh gelar sarjana strata satu Jurusan Informatika Universitas Multimedia Nusantara dapat terselesaikan.
Penulis mengucapkan terima kasih kepada :
1. Dr. Ninok Leksono MA selaku Rektor Universitas Multimedia Nusantara yang telah memberikan kesempatan kepada penulis untuk melakukan kerja magang.
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 selaku Ketua Program Studi Informatika Universitas Multimedia Nusantara.
4. Eunike Endariahna Surbakti, S.Kom., M.T.I. yang membimbing pembuatan laporan Kerja Magang dan yang telah mengajarkan tata cara menulis karya ilmiah dengan benar.
5. Gabriella Putri Wiratama selaku mentor selama praktek kerja magang yang telah membimbing dan memberikan banyak pengetahuan baru.
6. Seluruh rekan kerja KodeFox yang telah memberikan bantuan dan saran selama praktek kerja magang.
7. Keluarga yang telah memberikan motivasi dan dukungan dalam pelaksanaan praktek kerja magang serta penyusunan laporan ini.
vii
Semoga laporan Kerja Magang ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi bagi para pembaca.
Tangerang, 8 Oktober 2020
Carissa Komalasari
viii DAFTAR ISI
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG ... ii
Lembar Pernyataan Tidak Melakukan Plagiat Dalam Penyusunan Laporan Kerja Magang ... iii
ABSTRAK ... iv
KATA PENGANTAR ... vi
DAFTAR ISI ... viii
DAFTAR TABEL ... ix
DAFTAR GAMBAR ... x
DAFTAR LAMPIRAN ... xii
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Maksud dan Tujuan Kerja Magang ... 4
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 5
BAB 2 GAMBARAN UMUM PERUSAHAAN ... 6
2.1 Sejarah Singkat Perusahaan ... 6
2.2 Struktur Organisasi Perusahaan ... 9
BAB 3 PELAKSANAAN KERJA MAGANG... 10
3.1 Kedudukan dan Koordinasi ... 10
3.2 Tugas yang Dilakukan ... 11
3.3 Uraian Pelaksanaan Kerja Magang ... 12
3.3.1. Analisa Kebutuhan ... 15
3.3.2. Perancangan Aplikasi ... 17
3.3.3. Perancangan Tampilan ... 23
3.3.4. Daftar Core UI... 30
3.3.5. Daftar Komponen ... 39
3.3.6. Hasil Implementasi Halaman ... 57
3.3.7. Kendala yang Ditemukan ... 74
3.3.8. Solusi Atas Kendala yang Ditemukan... 74
BAB 4 SIMPULAN DAN SARAN ... 76
4.1 Simpulan ... 76
4.2 Saran ... 77
DAFTAR PUSTAKA ... 78
ix
DAFTAR TABEL
Tabel 3.1 Deskripsi Pekerjaan Setiap Minggu Selama Mengerjakan Lexicon ... 13
x
DAFTAR GAMBAR
Gambar 2.1 Logo KodeFox... 6
Gambar 2.2 Struktur Organisasi KodeFox ... 9
Gambar 3.1 Diagram Site Map Aplikasi Lexicon ... 18
Gambar 3.2 Flowchart Tampilan Login ... 19
Gambar 3.3 Flowchart Tampilan Two Factor Authentication ... 20
Gambar 3.4 Flowchart Tampilan Home ... 21
Gambar 3.5 Flowchart Tampilan Post Preview ... 22
Gambar 3.6 Flowchart Tampilan Badges ... 23
Gambar 3.7 Tampilan Antarmuka Halaman Login pada iOS dan Android ... 25
Gambar 3.8 Tampilan Antarmuka Halaman Two Factor Authentication pada iOS dan Android ... 26
Gambar 3.9 Tampilan Antarmuka Halaman Home pada iOS dan Android ... 27
Gambar 3.10 Tampilan Antarmuka Halaman Post Preview pada iOS dan Android ... 28
Gambar 3.11 Tampilan Antarmuka Halaman Badges pada iOS dan Android ... 29
Gambar 3.12 Tampilan Letter Avatar dan Avatar ... 30
Gambar 3.13 Potongan Kode Avatar ... 31
Gambar 3.14 Potongan Kode Letter Avatar ... 31
Gambar 3.15 Potongan Kode Fungsi Automatic Font Color ... 32
Gambar 3.16 Tampilan Chat Bubble ... 33
Gambar 3.17 Potongan Kode Chat Bubble ... 33
Gambar 3.18 Tampilan Custom Image ... 34
Gambar 3.19 Potongan Kode Custom Image Bagian Properties ... 34
Gambar 3.20 Potongan Kode Custom Image ... 35
Gambar 3.21 Potongan Kode Floating Button ... 36
Gambar 3.22 Potongan Kode Icon with Label ... 37
Gambar 3.23 Tampilan Text Input ... 38
Gambar 3.24 Potongan Kode Text Input Bagian Properties ... 38
Gambar 3.25 Potongan Kode Text Input ... 39
Gambar 3.26 Tampilan Author ... 40
Gambar 3.27 Potongan Kode Author ... 40
Gambar 3.28 Tampilan Avatar Row ... 41
Gambar 3.29 Potongan Kode Avatar Row ... 41
Gambar 3.30 Tampilan Badge Item ... 42
Gambar 3.31 Potongan Kode Badge Item... 42
Gambar 3.32 Potongan Kode Header Item ... 43
Gambar 3.33 Potongan Kode Custom Header ... 44
Gambar 3.34 Potongan Kode Modal Header ... 45
Gambar 3.35 Potongan Kode Loading or Error ... 46
Gambar 3.36 Potongan Kode Metric ... 47
Gambar 3.37 Potongan Kode Fungsi Format Counter ... 47
Gambar 3.38 Tampilan Post Item ... 48
Gambar 3.39 Potongan Kode Images pada Post Item ... 49
Gambar 3.40 Potongan Kode Tags ... 50
Gambar 3.41 Potongan Kode Post Item Footer ... 51
Gambar 3.42 Potongan Kode Post Item ... 52
xi
Gambar 3.43 Potongan Kode Fungsi Format Relative Time ... 53
Gambar 3.44 Potongan Kode Fungsi Format Date Time ... 53
Gambar 3.45 Potongan Kode Post List ... 55
Gambar 3.46 Tampilan Segmented Control pada iOS ... 56
Gambar 3.47 Tampilan Segmented Control pada Android ... 56
Gambar 3.48 Potongan Kode Segmented Control ... 57
Gambar 3.49 Implementasi Halaman Login dan Tampilan Alert pada iOS ... 58
Gambar 3.50 Implementasi Halaman Login Loading dan Tampilan Alert pada Android ... 59
Gambar 3.51 Potongan Kode Halaman Login Bagian Properties... 60
Gambar 3.52 Potongan Kode Fungsi Show Error Form Alert ... 61
Gambar 3.53 Implementasi Halaman Two Factor Authentication pada iOS... 62
Gambar 3.54 Implementasi Halaman Two Factor Authentication pada Android 63 Gambar 3.55 Potongan Kode Halaman Two Factor Authentication Bagian Properties ... 63
Gambar 3.56 Potongan Kode Halaman Two Factor Authentication Bagian Layout ... 64
Gambar 3.57 Implementasi Halaman Home pada iOS ... 65
Gambar 3.58 Implementasi Halaman Home Loading dan Tidak Ada Post pada iOS ... 66
Gambar 3.59 Tampilan Halaman Home pada Android ... 67
Gambar 3.60 Potongan Kode Halaman Home Bagian Logika Header ... 68
Gambar 3.61 Potongan Kode Halaman Home Bagian States ... 68
Gambar 3.62 Potongan Kode Halaman Home Bagian Page State ... 69
Gambar 3.63 Potongan Kode Halaman Home Bagian Tampilan ... 69
Gambar 3.64 Implementasi Halaman Post Preview pada iOS dan Android ... 70
Gambar 3.65 Potongan Kode Halaman Post Preview ... 71
Gambar 3.66 Implementasi Halaman Badges pada iOS ... 72
Gambar 3.67 Implementasi Halaman Badges pada Android ... 73
Gambar 3.68 Potongan Kode Halaman Badges ... 73
xii
DAFTAR LAMPIRAN 1. Form KM-03 (Kartu Kerja Magang)
2. Form KM-04 (Kehadiran Kerja Magang) 3. Form KM-05 (Laporan Realisasi kerja Magang) 4. Form KM-07 (Lembar Verifikasi Laporan Magang) 5. Riwayat Hidup (Curriculum Vitae)
6. Surat Keterangan Selesai Magang 7. Form Bimbingan Magang
