BAB 3 PELAKSANAAN KERJA MAGANG

Transkripsi

1 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 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. Penggunaan VCS membantu juga untuk berkolaborasi dengan rekan-rekan. 7

2 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) 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 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 8

3 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 dan password. Dan untuk dan password akan diregister lewat API terlebih dahulu. Gambar 3.1 Rancangan halaman login 9

4 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. 10

5 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. 11

6 Gambar 3.5 Halaman Informasi Utama Halaman data peserta berisi data dari peserta yang mengikuti kelas tersebut seperti Gambar 3.6. Gambar 3.6 Halaman Data Peserta 12

7 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

8 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 Jika tombol aktivitas baru diklik maka akan membuka dialog aktivitas baru seperti pada Gambar Dan jika salah satu aktivitas di klik maka akan berpindah ke halaman daftar pengumpulan seperti pada Gambar

9 Gambar 3.10 Halaman Aktifitas Gambar 3.11 Dialog Aktifitas Baru 15

10 Gambar 3.12 Daftar Pengumpulan Halaman Penilaian Aktivitas berisi daftar input untuk memasukkan nilai dari masing-masing siswa seperti Gambar Halaman ini belum diselesaikan karena dipindahkan menjadi android developer. Gambar 3.13 Penilaian Aktivitas 16

11 Di halaman ini pengguna dapat melihat games yang sudah dibuat oleh pengguna seperti Gambar Di atas kanan terdapat tombol untuk berpindah ke halaman Tambah Games seperti pada Gambar Gambar 3.14 Dashboard Games Dari halaman tambah game ini bisa berpindah ke halaman Buat Pertanyaan seperti pada Gambar

12 Gambar 3.15 Tambah Games Di halaman buat pertanyaan pegguna dapat menambahkan pertanyaan berupa Essay atau Pilihan Ganda dengan 4 pilihan. Gambar 3.16 Buat Pertanyaan 18

13 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 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 19

14 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

15 b) Flowchart classzoom Gambar 3.17 Flowchart classschedule 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 21

16 kelas yang belum dimulai. Dan jika kelas tersebut telah selesai maka akan menampilkan tampilan kelas selesai. Untuk flowchart daripada classzoom dapat dilihat pada Gambar c) Flowchart classactivities Gambar 3.18 Flowchart classzoom 22

17 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

18 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 24

19 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

20 e) Flowchart listgames Gambar 3.20 Flowchart classactivitiesdetail 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

21 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

22 Gambar 3.22 Flowchart gamespertanyaan 2) Implementasi Bagian ini akan menjelaskan implementasi dari aplikasi yang dibuat. 1. Implementasi classschedule 28

23 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. Gambar 3.23 Tab classschedule 29

24 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 Jika pertemuan belum dimulai maka akan menampilkan tampilan belum dimulai seperti Gambar Dan jika pertemuan sedang berlangsung akan menampilkan tampilan sedang berlangsung seperti Gambar 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. 30

25 Gambar 3.24 classzoom Kelas Belum Dimulai 31

26 Gambar 3.25 classzoom Kelas Sudah Selesai 32

27 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

28 Gambar 3.27 Tab classactivity 4. Implementasi classactivitiesdetail User akan ditampilan dengan tampilan classactivitiesdetail yang sama seperti Gambar Halaman ini berisikan deskripsi, file pendukung dan 34

29 DraggableScrollSheet yang berbeda sesuai dengan status activity tersebut. Untuk DraggableScrollSheet bisa dibuka dengan di drag atau menekan tombol panah ke atas. Gambar 3.28 Halaman classactivitiesdetail 35

30 Jika aktifitas tersebut belum dilakukan maka akan menampilkan halaman classactivitiesdetail dan DragableScrollSheet dengan tampilan untuk pengumpulan tugas seperti Gambar 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

31 Gambar 3.29 Tampilan DraggableScrollSheet Pengumpulan Tugas 37

32 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

33 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

34 Gambar 3.32 Tampilan DraggableScrollableSheet sudah Dinilai 5. Implementasi listgames 40

35 Pada halaman listgames akan menampilkan games games yang dapat dimainkan oleh user. Untuk tampilan halaman listgames dapat dilihat pada Gambar Gambar 3.33 Halaman listgames 41

36 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 Lalu jika user menjawab pertanyaan dengan benar dapat dilihat pada Gambar Lalu jika user menjawab pertanyaan dengan jawaban yang salah dapat dilihat pada Gambar

37 Gambar 3.34 Halaman gamespertanyaan 43

38 Gambar 3.35 Tampilan jawaban benar 44

39 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). 45

40 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 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. 46