RANCANG BANGUN FRONT-END APLIKASI MOBILE
FORUM LEXICON DENGAN
FRAMEWORK REACT NATIVE
LAPORAN KERJA MAGANG
Kenny Cornelius 00000019757
PROGRAM STUDI INFORMATIKA
FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2020
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG
RANCANG BANGUN FRONT-END APLIKASI MOBILE
FORUM LEXICON DENGAN
FRAMEWORK REACT NATIVE
oleh
Nama : Kenny Cornelius NIM : 00000019757
Fakultas : Teknik dan Informatika Program Studi : Informatika
Tangerang, 10 Desember 2020
Dosen Pembimbing Dosen Penguji
Ir. Andrey Andoko, M.Sc. Farica Perdana Putri, S.Kom., M.Sc.
Mengetahui, Ketua Program Studi
Informatika
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT DALAM PENYUSUNAN LAPORAN KERJA MAGANG
Dengan ini saya:
Nama : Kenny Cornelius NIM : 00000019757 Program Studi : Informatika
Menyatakan bahwa saya telah melaksanakan praktek kerja magang: Nama perusahaan : Kodefox, Inc.
Divisi : Engineering
Alamat : Universitas Multimedia Nusantara, Skystar Ventures, lt. 11, Corvus Room, Jl. Scientia Boulevard, Gading Serpong, Tangerang, Banten 15811
Periode Magang : 15 Juni 2020 30 September 2020 Pembimbing Lapangan : Jovita Zhang
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, 12 November 2020
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa karena atas segala karunia dan rahmat-Nya, penulis dapat melakukan pelaksanaan kerja magang dan menyelesaikan laporan elak a aa ke ja maga g a g be j d l RANCANG BANGUN FRONT-END APLIKASI MOBILE FORUM LEXICON DENGAN FRAMEWORK REACT NATIVE de ga ha il a g mem a ka da e a waktu.
Penulis juga mengucapkan terima kasih kepada:
1. Bapak Dr. Ninok Leksono, selaku Rektor Universitas Multimedia Nusantara, yang memberi inspirasi bagi penulis untuk berprestasi,
2. Bapak Dr. Eng. Niki Prastomo S.T., M.Sc., selaku Dekan Fakultas Teknik dan Informatika Universitas Nusantara,
3. Ibu Marlinda Vasty Overbeek, S.Kom., M.Kom., selaku Ketua Program Studi Informatika Universitas Multimedia Nusantara,
4. Bapak Ir. Andrey Andoko, M.Sc., selaku dosen pembimbing yang telah memberikan arahan dalam penyusunan laporan pelaksanaan kerja magang ini,
5. Bapak dan Ibu Dosen Program Studi Informatika yang telah memberikan ilmu-ilmu yang sangat berharga,
6. Bapak Simon Sturmer dan Paul Sturmer, selaku CTO dan CEO dari Kodefox, Inc. yang memberikan kesempatan pada penulis untuk melaksanakan kerja magang sebagai Software Engineer,
7. Ibu Jovita Zhang, selaku HR & PR Manager dari Kodefox, Inc. dan Project Manager dari aplikasi Lexicon yang telah memberikan panduan dalam pembuatan aplikasi Lexicon,
8. Bapak Nicholas Hadi Chie, selaku mentor dan Senior Software Engineer yang telah memberikan arahan untuk menyelesaikan permasalahan yang dihadapi penulis dalam pengerjaan proyek,
9. Rekan-rekan di Kodefox, Inc. yang sudah memberikan inspirasi bagi penulis,
10. Semua anggota keluarga yang telah memberikan motivasi dan semangat kepada penulis,
11. Teman-teman Program Studi Informatika angkatan 2017 yang telah berjuang bersama penulis sejak awal masa kuliah hingga sekarang.
Semoga laporan kerja magang ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi, bagi para pembaca.
Tangerang, 12 November 2020
RANCANG BANGUN FRONT-END APLIKASI MOBILE
FORUM LEXICON DENGAN
FRAMEWORK REACT NATIVE
ABSTRAK
Pada zaman modern ini, kemajuan teknologi memudahkan proses pertukaran informasi. Dengan bantuan internet, proses pertukaran informasi dapat berlangsung dari berbagai belahan dunia dalam waktu yang sangat singkat. Salah satu media yang dapat membantu proses pertukaran informasi adalah forum diskusi online. Melalui internet, forum diskusi tersebut dapat diakses melalui berbagai platform berbeda, antara lain: komputer, tablet, dan mobile phone. Di antara ketiganya, mobile phone adalah platform dengan jumlah pengguna terbanyak. Perusahaan Kodefox, Inc. yang sebagian besar dari anggotanya adalah software engineer, seringkali menemukan masalah pada saat mengerjakan sebuah proyek. Masalah tersebut biasanya terkait bug, error, algoritma, dan lain-lain. Seringkali masalah tersebut timbul secara berulang pada tim proyek yang berbeda, yang akhirnya berdampak pada produktivitas tim. Maka dari itu, dibangunlah aplikasi mobile forum yang bernama Lexicon, yang dikhususkan untuk software engineer di perusahaan Kodefox, Inc. Laporan magang ini menjelaskan tentang pelaksanaan kerja magang dalam membangun front-end aplikasi Lexicon tersebut. Aplikasi tersebut ditujukan untuk menjadi wadah pertukaran informasi terkait teknologi terbaru / menarik, permasalahan / bug yang sering terjadi dalam pengerjaan suatu proyek, tips dan best practices, dan lain-lain oleh sesama software engineer. Aplikasi Lexicon dibangun dengan basis cross-platform sehingga dapat diakses dari perangkat iOS dan Android. Aplikasi Lexicon dibuat dengan bahasa pemrograman TypeScript, framework React Native, API open source Discourse, dan query language GraphQL. Aplikasi tersebut sudah diselesaikan MVP (Minimum Viable Product) yang ditetapkan.
DESIGNING FRONTEND OF MOBILE FORUM
APPLICATION LEXICON WITH
REACT NATIVE FRAMEWORK
ABSTRACT
In modern times, advances in technology facilitate the process of exchanging information. With the help of the internet, the process of exchanging information can take place from various parts of the world in a very short time. One of the media that can help the process of exchanging information is online discussion forums. Through the internet, these discussion forums can be accessed through various different platforms, including: computers, tablets, and mobile phones. Among the three, mobile phones are the platform with the highest number of users. Kodefox, Inc. most of whose members are software engineers, often encounter problems when working on a project. These problems are usually related to bugs, errors, algorithms, and so on. Often these problems occur repeatedly in different project teams, which ultimately has an impact on team productivity. Therefore, a mobile forum application called Lexicon was built, which is specifically for software engineers at Kodefox, Inc. This internship report describes the implementation of internships in building the front-end of the Lexicon application. The application is intended to be a forum for the exchange of information related to the latest / interesting technology, problems / bugs that often occur in project work, tips and best practices, etc. by fellow software engineers. The Lexicon application is built on a cross-platform basis so that it can be accessed from iOS and Android devices. The Lexicon application is made with the TypeScript programming language, the React Native framework, the open source Discourse API, and the GraphQL query language. The application has been completed by the established MVP (Minimum Viable Product).
DAFTAR ISI
LEMBAR PENGESAHAN LAPORAN KERJA MAGANG ... ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... iii
KATA PENGANTAR ... iv
ABSTRAK ... 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 ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 3
BAB 2 GAMBARAN UMUM PERUSAHAAN ... 6
2.1 Profil Singkat Perusahaan ... 6
2.2 Struktur Organisasi Perusahaan ... 7
BAB 3 PELAKSANAAN KERJA MAGANG... 8
3.1 Kedudukan dan Koordinasi ... 8
3.2 Tugas yang dilakukan ... 8
3.3 Uraian Kerja Magang ... 9
3.4 Kendala yang Ditemukan ... 64
3.5 Solusi atas Kendala yang Ditemukan ... 64
BAB 4 SIMPULAN DAN SARAN ... 66
4.1 Simpulan ... 66
4.2 Saran ... 66
DAFTAR TABEL
DAFTAR GAMBAR
Gambar 2.1 Logo Perusahaan Kodefox, Inc. ... 6
Gambar 2.2 Struktur Organisasi Kodefox, Inc... 7
Gambar 3.1 Flowchart Halaman Home ... 12
Gambar 3.2 Flowchart Halaman Register ... 12
Gambar 3.3 Flowchart Halaman Home ... 13
Gambar 3.4 Flowchart Halaman Channels Selection ... 14
Gambar 3.5 Flowchart Halaman Post Detail... 15
Gambar 3.6 Flowchart Halaman Flag Post ... 15
Gambar 3.7 Flowchart Halaman Reply Post ... 16
Gambar 3.8 Flowchart Halaman Post Preview ... 17
Gambar 3.9 Flowchart Halaman New Post ... 18
Gambar 3.10 Flowchart Halaman Tags Selection ... 19
Gambar 3.11 Flowchart Halaman Profile ... 20
Gambar 3.12 Flowchart Halaman Notification ... 21
Gambar 3.13 Flowchart Halaman Messages ... 22
Gambar 3.14 Flowchart Halaman Message Details ... 23
Gambar 3.15 Flowchart Halaman New Message ... 24
Gambar 3.16 Flowchart Halaman Select User ... 25
Gambar 3.17 Flowchart Halaman Activity ... 25
Gambar 3.18 Flowchart Halaman Edit Profile ... 26
Gambar 3.19 Flowchart Halaman Change Email ... 26
Gambar 3.20 Flowchart Halaman Change Password ... 27
Gambar 3.21 Contoh Implementasi Core-UI Divider ... 28
Gambar 3.22 Source Code Core-UI Divider (Props) ... 29
Gambar 3.23 Source Code Core-UI Divider (View) ... 29
Gambar 3.24 Source Code Core-UI Bottom Sheet (Props) ... 31
Gambar 3.25 Source Code Bottom Sheet (View) ... 31
Gambar 3.26 Contoh Implementasi Core-UI Dot ... 32
Gambar 3.27 Source Code Core-UI Dot (Props) ... 33
Gambar 3.28 Source Code Core-UI Dot (View) ... 33
Gambar 3.29 Contoh Implementasi Core-UI Chip ... 34
Gambar 3.30 Source Code Core-UI Chip (Props) ... 34
Gambar 3.31 Source Code Core-UI Chip (View) ... 35
Gambar 3.32 Contoh Implementasi Core-UI Button ... 36
Gambar 3.33 Source Code Core-UI Button (Props) ... 36
Gambar 3.34 Source Code Core-UI Button (View) ... 37
Gambar 3.35 Contoh Implementasi Core-UI Icon ... 38
Gambar 3.36 Daftar Icon yang Digunakan pada Aplikasi Lexicon ... 38
Gambar 3.41 Source Code BottomMenu Tipe 1 (Props) ... 43
Gambar 3.42 Source Code BottomMenu Tipe 2 (Props) ... 43
Gambar 3.43 Source Code Bottom Menu Tipe 1 (View) ... 45
Gambar 3.44 Source Code Bottom Menu Tipe 2 (View) ... 46
Gambar 3.45 Tampilan New Post Screen Android dan iOS ... 47
Gambar 3.46 Source Code New Post Screen (Imports & Props) ... 48
Gambar 3.47 Source Code New Post Screen (States) ... 49
Gambar 3.48 Source Code New Post Screen (Header & Title Input) ... 50
Gambar 3.49 Source Code New Post Screen (Channel) ... 50
Gambar 3.50 Source Code New Post Screen (Tags)... 51
Gambar 3.51 Source Code New Post Screen (Post Markdown) ... 51
Gambar 3.52 Source Code New Post Screen (Upload Image) ... 53
Gambar 3.53 Tampilan Tags Selection Screen Android dan iOS ... 55
Gambar 3.54 Source Code Tags Selection Screen (Imports & Props) ... 56
Gambar 3.55 Source Code Tags Selection Screen (States)... 56
Gambar 3.56 Source Code Tags Selection Screen (Header)... 57
Gambar 3.57 Source Code Tags Selection Screen (View) ... 57
Gambar 3.58 Format Tag Helper Function ... 59
Gambar 3.59 Source Code Tags Selection Screen (Tags Handler) ... 60
Gambar 3.60 Tampilan Activity Screen Android dan iOS ... 61
Gambar 3.61 Source Code Activity Screen (Imports) ... 61
Gambar 3.62 Source Code Activity Screen (State & Query) ... 62
DAFTAR LAMPIRAN
1. Daftar Riwayat Hidup
2. Surat Keterangan Penerimaan Magang Kodefox, Inc. 3. Surat Keterangan Selesai Magang Kodefox, Inc. 4. Form KM-03
5. Form KM-04 6. Form KM-05 7. Form KM-07
