7
BAB 3
PELAKSANAAN KERJA MAGANG
3.1. Kedudukan dan Koordinasi
Pelaksanaan kerja magang di PT. Kencana Dua Sinergi dijalani dengan mengemban posisi Front-End Web Developer dan Android Developer dengan status intern. Di bawah naungan bapak Matthew Evans sebagai pembimbing lapangan selama kerja magang, di mana Bapak Evans memberikan requirement apa saja yang dibutuhkan untuk membangun projek ini. Untuk koordinasi biasanya akan disampakan secara langsung saat di kantor atau melalui google meet maupun zoom untuk memahami requirement dan juga mencari solusi yang tepat dalam pembangunan projek ini.
3.2. Tugas yang dilakukan
Tugas selama magang yang dilakukan yaitu membangun web sebagai Backoffice yang akan diberikan pada klien pada 4 minggu pertama dan menjadi android developer untuk mobile pusaka pada sisa waktunya. Projek ini dibagi menjadi tiga yaitu BackEnd, Backoffice(web), dan mobile. Untuk desain dari projek ini sudah dibuatkan dari klien sehingga mempermudah pembuatan tampilan dari projek ini. Selama pengerjaan projek, untuk menyimpan perubahan menggunakkan Version
Control System (VCS) untuk mempermudah dalam proses development dari projek ini.
8 3.3. Uraian Pelaksanaan
Berikut penguraian pelaksaan magang yang dibagi ke dalam 2 bagian yaitu Minggu 1-4 (web Backoffice) dan Minggu 5-13 (aplikasi Pusaka).
3.3.1. Minggu 1 – 4 (web Backoffice)
Dalam implementasi web ini, diperlukan beberapa perangkat lunak dan perangkat keras. Berikut adalah perangkat lunak yang digunakan dalam pembuatan web ini:
1. Adobe XD
2. Visual Studio Code 3. Google Chrome 4. Discord
5. Google Meet
Adapun perangkat keras yang digunakan adalah sebagai berikut: 1. Processor Laptop : Intel Core I7-6700HQ 2.60 GHz 2. RAM Laptop : 12 GB
3. Sistem Operasi Latop : Windows 10 4. Hard disk Laptop : 150 GB
Untuk version control system menggunakan Github. Design dari Backoffice sudah disediakan oleh klien yang dibuat di Adobe XD. Dengan melihat design tersebut sudah memberikan rancangan antar muka dan flow dari web. Untuk implementasi
9
dilakukan dengan menyesuaikan dari design tersebut. Web ini dibuat dengan menggunakkan perangkat lunak Visual Studio Code yang di run pada Google Chrome. Berikut penjelasan implementasi aplikasi yang dibuat. Dikarenakan keterbatasan waktu pembuatan dan masukknya karyawan baru untuk memegang Backoffice ini, untuk pembuatan backoffice baru selesai hingga tahap pembuatan user interface saja. Untuk fungsionalitas dari Backoffice dilanjutkan oleh karyawan baru.
Untuk membuka web backoffice Pusaka diperlukan login terlebih dahulu.Karena tidak ada rancangan dari klien menggunakan tampilan sederhana untuk sementara waktu.Gambar 3.1 merupakan rancangan sementara untuk halaman login. Lalu Gambar 3.2 merupakan halaman login dari Backoffice. Pengguna akan memasukkan email dan password. Dan untuk email dan password akan diregister lewat API terlebih dahulu.
10
Gambar 3.2 Halaman Login Sementara
Setelah login, pengguna akan dihadapkan pada tampilan dashboard dari kelas seperti yang ada di Gambar 3.3. Di halaman ini pengguna dapat melihat semua kelas yang ada. Di bagian kiri terdapat sidebar untuk berpindah-pindah halaman. Di kanan atas terdapat tombol untuk menambahkan kelas baru. Dan jika card kelas dipilih akan menampilkan detail dari kelas untuk diedit atau isi.
11
Gambar 3.3 Halaman Dashboard
Gambar 3.4 merupakan UI untuk kelas baru. Dengan halaman ini pengguna dapat membuat kelas baru yang dapat diikuti oleh siswa nanti. Terdapat beberapa inputan seperti judul kelas, harga kelas, kapasitas kelas, tanggal awal pelaksanaan, tanggal akhir pelaksanaan, waktu pelaksanaan, durasi kelas, deskripsi kelas, tujuan pelaksanaan dan Gambar banner kelas. Kelas ini bisa disimpan sebagai draft atau menjadi kelas aktif. Di sebelah kiri terdapat sidebar kedua yang berisi button kembali untuk kembali ke halaman dashboard kelas.
Gambar 3.4 Halaman Kelas Baru
Halaman Info utama merupakan halaman untuk mengedit kelas yang sudah ada seperti pada Gambar 3.5. Baik itu kelas aktif, draft maupun lalu. Tampilan ini diambil dari halaman kelas baru lalu dipakai ulang. Di bagian kiri terdapat sidebar kedua untuk berpindah-pindah halaman. Dari atas terdapat halaman informasi utama, data peserta, meeting & aktifitas, dan penilaian aktifitas.
12
Gambar 3.5 Halaman Informasi Utama
Halaman data peserta berisi data dari peserta yang mengikuti kelas tersebut seperti Gambar 3.6.
13
Ketika tombol tambah peserta baru diklik akan memunculkan dialog seperti pada Gambar 3.7.
Gambar 3.7 Dialog Data Peserta Baru
Halaman ini memuat semua meeting yang akan dibuat oleh pengguna seperti pada Gambar 3.8. Jika tombol jadwal baru dipilih maka akan menampilkan halaman tambah meeting seperti pada Gambar 3.9.
14
Gambar 3.8 Halaman Meeting & Aktifitas
Gambar 3.9 Halaman Tambah Meeting
Halaman aktifitas menampilkan daftar aktifitas yang ada pada suatu meeting seperti pada Gambar 3.10. Jika tombol aktivitas baru diklik maka akan membuka dialog aktivitas baru seperti pada Gambar 3.11. Dan jika salah satu aktivitas di klik maka akan berpindah ke halaman daftar pengumpulan seperti pada Gambar 3.12.
15
Gambar 3.10 Halaman Aktifitas
16
Gambar 3.12 Daftar Pengumpulan
Halaman Penilaian Aktivitas berisi daftar input untuk memasukkan nilai dari masing-masing siswa seperti Gambar 3.13. Halaman ini belum diselesaikan karena dipindahkan menjadi android developer.
17
Di halaman ini pengguna dapat melihat games yang sudah dibuat oleh pengguna seperti Gambar 3.14. Di atas kanan terdapat tombol untuk berpindah ke halaman Tambah Games seperti pada Gambar 3.15.
Gambar 3.14 Dashboard Games
Dari halaman tambah game ini bisa berpindah ke halaman Buat Pertanyaan seperti pada Gambar 3.16.
18
Gambar 3.15 Tambah Games
Di halaman buat pertanyaan pegguna dapat menambahkan pertanyaan berupa Essay atau Pilihan Ganda dengan 4 pilihan.
19 3.3.2. Minggu 5 – 13 (aplikasi Pusaka)
Dalam pembuatan aplikasi ini, diperlukan beberapa perangkat lunak dan perangkat keras. Berikut adalah perangkat lunak yang digunakan dalam pembuatan aplikasi ini:
1. Adobe XD 2. Android Studio 3. Google Chrome 4. Discord
5. Google Meet
Adapun perangkat keras yang digunakan adalah sebagai berikut: 1. Processor Laptop : Intel Core I7-6700HQ 2.60 GHz 2. RAM Laptop : 12 GB
3. Sistem Operasi Latop : Windows 10 4. Hard disk Laptop : 150 GB
Dan untuk testingnya aplikasinya dijalankan pada gawai Samsung J7 Prime dengan spesifikasi sebagai berikut.
1. Chipset : Exynos 7870 Octa (14 nm) 2. RAM & Memori : 3 GB & 32 GB
3. Baterai : Li-Ion 3300 mAh
Pada minggu 5-13 melakukan pembuatan fitur-fitur aplikasi yang sudah diberikan tampilannya oleh klien. Halaman yang ditugaskan yaitu Halaman
20
classSchedule, classZoom, classActivities, classActivitiesDetail, listGames, dan gamesPertanyaan. Untuk version control system menggunakan Github.
1) Flowchart
Berikut flowchart yang digunakan dalam pembuatan aplikasi ini. a) Flowchart classSchedule
Flowchart classSchedule adalah diagram yang menujukkan proses saat widget classSchedule dipilih. Untuk masuk ke classSchedule sebelumnya pengguna perlu memilih kelas terlebih dahulu. Dengan kelas yang dipilih user akan memberikan classId yang akan dikirim ke widget classSchedule. Lalu classSchedule yang menerima classId tersebut mengirimkan request ke API untuk melakukan read schedule dengan mengirimkan classId tadi. API membalas dengan memberikan listSchedule dari kelas tersebut dan classSchedule akan menampilkan listSchedule yang ada pada kelas tersebut. ListSchedule ini bisa diklik untuk berpindah ke halaman ke classZoom. Untuk flowchart dari classSchedule dapat dilihat pada Gambar 3.17.
21
Gambar 3.17 Flowchart classSchedule b) Flowchart classZoom
Flowchart classZoom akan menjelaskan proses saat page classZoom dibuka. Di classSchedule ketika salah satu schedule dipilih akan membuka page classZoom dan mengirimkan scheduleModel dari schedule yang dipilih. Saat di classZoom, scheduleModel tersebut akan diproses sesuai dengan tanggal dan waktu daripada kelas tersebut. Jika kelas tersebut sudah dimulai maka akan menampilkan tampilan kelas yang dimulai. Lalu jika kelas tersebut belum dimulai maka akan menampilkan tampilan
22
kelas yang belum dimulai. Dan jika kelas tersebut telah selesai maka akan menampilkan tampilan kelas selesai. Untuk flowchart daripada classZoom dapat dilihat pada Gambar 3.18.
Gambar 3.18 Flowchart classZoom c) Flowchart classActivities
23
Flowchart classActivities akan menggambarkan proses yang terjadi pada widget classActivities. Saat berpindah ke tab Activities, id kelas yang dipilih akan dikirim ke widget classActivities. Id tersebut akan dilakukan request untuk mendapatkan list schedule ke API. Lalu setelah mendapatkan list schedule tersebut untuk setiap schedule yang dikembalikan akan melakukan request pembacaan activity ke API. Dengan setiap schedule dan activity yang sudah dibaca lewat API akan dipetakan ke dalam expansion panel list dan menjadi tampilan classActivities. Untuk flowchart classActivities dapat dilihat pada Gambar 3.19.
24
Gambar 3.19 Flowchart classActivities
d) Flowchart classActivitiesDetail
Flowchart classActivitiesDetail akan menggambarkan proses yang terjadi pada widget classActivitiesDetail. Dengan memilih aktifitas yang ada pada widget
25
classActivities. Pengguna akan dipindahkan ke halaman classActivitiesDetail dan dikirimkan activitiesModel dari activities yang dipilih. Jika status dari classActivitiesModel adalah “Not Done” maka akan menampilkan tampilan pengumpulan tugas. Pengguna dapat mengumpulkan tugas yang sudah diberikan dan disubmit ke server untuk nanti dinilai oleh guru lewat backoffice. Jika status dari classActivitiesModel adalah “Done” maka akan menampilkan tampilan yang sudah menampilkan tugas. Tampilan ini akan mengambil data dari API untuk mengambil data apa saja yang sudah dikumpulkan oleh pengguna. Dan terakhir jika status dari classActivitiesModel adalah “Graded” maka akan menampilkan tampilan yang sudah dinilai. Tampilan ini akan mengambil data dari API yang berisi submission dari pengguna dan nilai yang diberikan oleh guru. Untuk flowchart classActivitiesDetail dapat dilihat pada Gambar 3.20.
26
Gambar 3.20 Flowchart classActivitiesDetail e) Flowchart listGames
Flowchart listGames akan menggambarkan proses yang terjadi pada halaman listGames. Di halaman listGames pengguna akan ditampilkan games-games yang sudah dibuat dari backoffice. List games yang dimunculkan akan dilakukan request lewat Pusaka API untuk ditampilkan kembali di halaman listGames. Untuk flowchart listGames dapat dilihat pada Gambar 3.21.
27
Gambar 3.21 Flowchart Halaman listGames f) Flowchart gamesPertanyaan
Pada halaman gamesPertanyaan, sistem akan meminta list pertanyaan dari Pusaka API dengan mengirimkan idGames lalu ditampilkan per pertanyaan yang ada berdasarkan pada game yang dipilih. Pengguna jika sudah menjawab pertanyaan tersebut akan ditampilkan benar atau salah jawaban tersebut dan alert dialog tergantung kepada jawaban user benar atau salah. Dan jika semua pertanyaan sudah dijawab maka akan memunculkan dialog yang menampilkan poin yang diperoleh oleh user. Dan poin tersebut akan dikirimkan ke Pusaka API untuk diupdate poin yang ada pada pengguna. Untuk flowchart halaman gamesPertanyaan dapat dilihat pada Gambar 3.22.
28
Gambar 3.22 Flowchart gamesPertanyaan 2) Implementasi
Bagian ini akan menjelaskan implementasi dari aplikasi yang dibuat. 1. Implementasi classSchedule
29
Gambar 3.23 merupakan tampilan halaman tab classSchedule user dari halaman sebelumnya akan mengirimkan classId. Variabel classId ini akan dikirimkan ke API untuk meminta list dari schedule pada classId tersebut.
30 2. Implementasi classZoom
Tampilan kelas zoom akan menyesuaikan daripada status dari schedule dari kelas yang dipilih jika pertemuan tersebut sudah selesai maka akan menampilkan tampilan sudah selesai seperti Gambar 3.24. Jika pertemuan belum dimulai maka akan menampilkan tampilan belum dimulai seperti Gambar 3.25. Dan jika pertemuan sedang berlangsung akan menampilkan tampilan sedang berlangsung seperti Gambar 3.26. Kelas yang sedang berlangsung dapat masuk ke dalam Zoom Meeting yang sudah disediakan lewat API. Jika terlambat atau berhalangan hadir pengguna diminta mengisi form perizinan pada link yang sudah disediakan dari klien. Password Zoom Meeting akan disediakan di halaman ini juga.
31
32
33
Gambar 3.26 classZoom Kelas sedang Berlangsung 3. Implementasi classActivities
Halaman classActivities akan menampilkan list dari schedule yang ada. Dan schedule tersebut berisikan list activity yang ada di dalam schedule tersebut. Untuk tampilan dari halaman classActivities dapat dilihat pada Gambar 3.27.
34
Gambar 3.27 Tab classActivity 4. Implementasi classActivitiesDetail
User akan ditampilan dengan tampilan classActivitiesDetail yang sama seperti Gambar 3.28. Halaman ini berisikan deskripsi, file pendukung dan
35
DraggableScrollSheet yang berbeda sesuai dengan status activity tersebut. Untuk DraggableScrollSheet bisa dibuka dengan di drag atau menekan tombol panah ke atas.
36
Jika aktifitas tersebut belum dilakukan maka akan menampilkan halaman classActivitiesDetail dan DragableScrollSheet dengan tampilan untuk pengumpulan tugas seperti Gambar 3.29. User dapat mengisi pengumpulan aktifitas seperti deskripsi atau mengumpulkan file yang diminta. User juga akan ditampilkan kriteria penilain pada aktifitas tersebut. Jika sudah selesai user perlu menekan tombol “KUMPULKAN” dan akan ditampilkan dialog untuk memastikan tugas dan juga menekan kembali tombol “KUMPULKAN SEKARANG” pada dialog tersebut. Untuk tampilan dialog tersebut dapat dilihat pada Gambar 3.30.
37
38
Gambar 3.30 Dialog Pengumpulan Tugas
Jika tugas sudah dikumpulkan tapi belum dinilai maka akan menampilkan tampilan DraggableScrollableSheet yang sudah mengumpulkan tugas. User akan ditampilkan tugas yang sudah user kumpulkan. Untuk tampilan DraggableScrollableSheet yang sudah mengumpulkan dapat dilihat pada Gambar 3.31.
39
Gambar 3.31 Tampilan DraggableScrollableSheet sudah Mengumpulkan Jika tugas sudah dinilai maka akan menampilkan tampilan DraggableScrollableSheet yang sudah dinilai. Nilai akan dirata-ratakan berdasarkan kriteria yang diberikan. Tampilan tersebut dapat dilihat pada Gambar 3.32.
40
Gambar 3.32 Tampilan DraggableScrollableSheet sudah Dinilai 5. Implementasi listGames
41
Pada halaman listGames akan menampilkan games – games yang dapat dimainkan oleh user. Untuk tampilan halaman listGames dapat dilihat pada Gambar 3.33.
42 6. Implementasi gamesPertanyaan
Halaman ini berisi pertanyaan dari Games yang dipilih oleh user. Halaman akan memberikan pertanyaan terus menerus selama pertanyaan masih ada. Halaman ini saat pelaporan masih dalam tahap pengerjaan sehingga belum semua fitur sudah diimplementasikan. Untuk tampilan halaman gamesPertanyaan dapat dilihat pada Gambar 3.34. Lalu jika user menjawab pertanyaan dengan benar dapat dilihat pada Gambar 3.35. Lalu jika user menjawab pertanyaan dengan jawaban yang salah dapat dilihat pada Gambar 3.36.
43
44
45
Gambar 3.36 Tampilan Jawaban Salah
3.4. Kendala yang ditemukan
Berikut ini adalah kendala yang ditemukan selama pelaksanaan kerja magang di PT. Kencana 2 Sinergi (K2S).
46
1. Adanya bug saat post ke API untuk data berbentuk Array saat submit
submissions.
2. Response yang diberikan oleh API terdapat kekurangan dengan data-data yang dibutuhkan oleh halaman yang dibuat.
3. Model data yang rumit.
3.5. Solusi atas Kendala yang Ditemukan
Dari beberapa kendala yang ditemukan ditemukan solusi sebagai berikut. 1. Melakukan JSON encode pada body dari data yang akan dilakukan POST. 2. Meminta kepada back-end kekurangan data dari halaman yang dibuat. 3. Berkonsultasi kepada atasan dan IT konsultan dari PT.K2S.
