• Tidak ada hasil yang ditemukan

BAB III METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM. dijabarkan berdasarkan hasil wawancara yang dilakukan dengan managing

N/A
N/A
Protected

Academic year: 2022

Membagikan "BAB III METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM. dijabarkan berdasarkan hasil wawancara yang dilakukan dengan managing"

Copied!
65
0
0

Teks penuh

(1)

21 BAB III

METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM 3.1 Metodologi Penelitian

Tahapan metode yang akan dilakukan dalam penelitian ini antara lain.

a. Analisis Kebutuhan

Dalam tahap ini dilakukan analisis kebutuhan penelitian. Kebutuhan akan dijabarkan berdasarkan hasil wawancara yang dilakukan dengan managing director PT Fiture Teknologi Inovasi, Bapak Zainal Arifin. Akan ditentukan penggunaan software dan hardware yang akan menunjang proses penelitian.

b. Telaah Literatur

Melalui tahap ini, teori yang berkaitan dengan penelitian penerapan metode gamifikasi akan dipelajari. Beberapa teori yang akan dipelajari adalah task management, gamifikasi, enterprise gamification taxonomy, unified theory of acceptance and use of technology dan perceived enjoyment.

c. Perancangan dan Pemograman Sistem

Framework Sustainable Gamification Design akan digunakan dalam penelitian ini dalam aplikasi berbasis mobile. Fitur-fitur dan mekanisme game yang ada dalam penelitian ini akan dibangun berdasarkan framework tersebut.

d. Pengujian Sistem

Pengujian system akan dilakukan dengan metode studi lapangan dengan meminta karyawan PT Fiture Teknologi Inovasi menggunakan aplikasi task list manager berbasis mobile dengan metode gamifikasi dalam jangka waktu tertentu.

Kemudian, para karyawan akan diminta untuk mengisi kuesioner mengenai

(2)

22 tingkat penerimaan karyawan ketika menggunakan aplikasi task list manager berbasis mobile dengan metode gamifikasi tersebut.

e. Analisis Hasil Pengujian

Tahap selanjutnya yaitu mengolah data yang didapatkan dari kuesioner kemudian melakukan analisis agar didapatkan hasil yang mencerminkan hasil penelitian ini.

f. Konsultasi dan Penulisan

Pada tahap ini dilakukan dokumentasi terhadap penelitian dengan tujuan menjadi sarana ilmu pengetahuan. Dengan saran yang diberikan diharapkan penelitian dapat terus dikembangkan dan bermanfaat bagi masyarakat luas.

3.2 Teknik Pengumpulan Data

Pada tahap merancang dan mengembangan sistem, pengumpulan data dilakukan dengan mempelajari berbagai sumber yakni buku, jurnal, dan sumber- sumber terpercaya lainnya. Selain itu dilakukan wawancara untuk mendapatkan data terkait masalah yang akan dipecahkan dan kebutuhan dari pengguna ke depannya. Data tersebut menjadi acuan dalam menentukan elemen gamifikasi yang akan diimplementasi. Pada tahap pengujian, pengguna akan diberikan akses ke aplikasi dan pengguna akan mencoba menggunakan aplikasi dalam periode waktu tertentu. Setelah itu, penggunan akan diminta mengisi kuesioner dalam bentuk skala Likert.

3.3 Teknik Pengambilan Sampel

Teknik pengambilan sampel saat tahap pengujian adalah non-probability

sampling. Non-probability sampling adalah teknik yang tidak memberikan

(3)

23 peluang atau kesempatan yang sama bagi setiap unsur atau anggota populasi untuk dipilih menjadi sampel. Teknik yang dipilih sampling jenuh yaitu metode pengambilan sampel bila semua anggota populasi dijadikan sebagai sampel. Hal ini dilakukan apabila jumlah populasi kecil kurang dari 30 orang (Nadiro, 2014).

3.4 Analisis Gamifikasi

Dengan framework Sustainable Gamification Design terdapat tujuh langkah metodologi dalam menentukan kunci desain keputusan dalam gamifikasi enterprise yaitu.

a) Setting project objectives, menentukan tujuan dari proyek yang dikerjakan.

Berdasarkan Element Enterprise Gamification Taxonomy, tujuan dalam membuat aplikasi atau sistem gamifikasi adalah meningkatkan motivasi dan produktivitas dari Staff atau pegawai.

b) Mapping project motivation, methods, and outcomes, motivasi dari aplikasi task manager ini adalah meningkatkan motivasi dan produktivitas Staff dalam mengerjakan task secara sistematis. Metode yang akan digunakan adalah metode gamifikasi dengan hasil akhir yaitu Staff atau pegawai dapat menggunakan aplikasi tasklist manager dalam mengerjakan task harian yang bersangkutan.

c) Mapping stakeholder and user personas, menentukan stakeholder dan

pengguna dari aplikasi yang akan digunakan. Berdasarkan Element

Enterprise Gamification Taxonomy, maka sistem atau aplikasi yang akan

dibuat akan digunakan oleh internal Staff atau karyawan internal PT Fiture

Teknologi Inovasi. User persona aplikasi direpresentasikan sebagai user

(4)

24 dengan nama user sama dengan nama Staff yang sebenarnya serta juga terdapat jabatan dari user. User memiliki tujuan untuk mengerjakan task-task yang sudah direncanakan atau dibuat oleh supervisornya. Kesulitan user yaitu sulit mendapatkan informasi seputar task yang akan dikerjakan dan juga revisi jika task tersebut mengalami perubahan. Aktivitas user berbeda dipisahkan berdasarkan task divisi, task proyek, dan juga task produk.

Karakteristik general dari semua user adalah semua user memiliki kemampuan dalam menggunakan aplikasi atau sistem secara otodidak tanpa perlu pengarahan secara penuh.

d) Creative problem-solving through participatory design, solusi dari latar belakang yang adalah menggunakan task list manager di mana dilengkapi dengan gamifikasi. Task yang dikerjakan akan menjadi sebuah quest di mana ketika diselesaikan user akan mendapatkan poin. Setiap task yang dikerjakan akan diakumulasi dan jika mencapai target tertentu user akan mendapatkan achievement. Poin yang diakumulasi dalam kurun waktu tertentu akan dicatat dan dirangking dalam bentuk leaderboard.

e) Exploring suitable technology platform, dalam pengerjaan sistem atau aplikasi, jenis platform yang dipilih adalah Platform B, yaitu platform yang dibuat custom untuk menyesuaikan kebutuhan perusahaan. Platform yang akan digunakan dalam pembuatan aplikasi task list manager adalah mobile apps.

f) Selecting appropriate gameplay and game mechanics, dalam pengembangan

aplikasi atau sistem, jenis permainan utama yang akan diimplementasikan

(5)

25 adalah collection, yaitu aktivitas mengumpulkan poin atau item untuk mendapatkan score.

Selain itu, untuk menunjang jenis permainan maka akan diterapkan beberapa mekanisme dalam game yakni.

- Status

Elemen ini akan menunjukkan kemampuan dari user dalam aplikasi permainan. Elemen ini akan ditampilkan dalam bentuk profile user.

- Points

Elemen ini akan menunjukkan nilai atau score dari user. Untuk mendapatkan point, user diharuskan untuk menyelesaikan task dan juga melakukan presensi.

- Mission and Quest

Elemen ini akan menampilkan task yang akan dikerjakan oleh user. Task ini dapat dibuat oleh user yang memiliki jabatan tertentu dalam perusahaan sehingga tidak semua user dapat membuat task. Task yang telah selesai akan memberikan poin kepada user. Untuk nilai poin, dapat ditentukan oleh user yang membuat task.

- Achievement

Elemen ini menampilkan pencapaian dari user melalui serangkaian aktivitas yang dicatat oleh sistem. Perwujudan elemen ini adalah badges.

Pencapaian yang dapat diselesaikan oleh user adalah sebagai berikut.

o Melakukan meeting pertama kali

o Melakukan meeting 10 kali

(6)

26 o Melakukan calling pertama kali

o Melakukan calling 10 kali o Menyelesaikan Fix task 2 kali o Menyelesaikan Fix task 10 kali o Menyelesaikan Update task 2 kali o Menyelesaikan Update task 10 kali o Menyelesaikan Create task 2 kali o Menyelesaikan Create task 10 kali - Leaderboard

Elemen ini akan menampilkan posisi user dibandingkan dengan user lain sebagai wujud peforma dalam kinerjanya dalam menyelesaikan task. Untuk menentukan posisi user, leaderboard akan melihat point yang dikumpulkan user dalam kurun waktu tertentu.

g) Prototyping, piloting, testing, and launching the gamified enterprise application, membuat aplikasi kemudian melakukan pengujian yang kemudian berakhir dengan peluncuran aplikasi

3.5 Perancangan Sistem

Penelitian ini dibuat menggunakan aplikasi berbasis mobile dengan react

native dan menggunakan rest API yang terhubung ke admin panel. Database yang

digunakan adalah MySQL. Dalam membuat aplikasi dilakukan beberapa tahap

perancangan sistem yang dimulai dengan perancangan Unified Modeling

Language (UML) yang terdiri dari beberapa bagian yakni Use Case Diagram,

Activity Diagram, Sequence Diagram, dan Class Diagram.

(7)

27 Kemudian dilakukan pembuatan database schema, perancangan kuesioner, perancangan tampilan antarmuka, dan perancangan aset yang digunakan dalam sistem.

3.5.1 Use Case Diagram

Use case diagram dalam aplikasi ini memiliki dua aktor yaitu Staff dan Supervisor. Staff akan terhubung dengan lima use case yakni Get Task, Get Leaderboard, Get Achievement, Get Attendance, Get User, Manage Personal Data. Sedangkan Supervisor terhubung dengan dua use case yaitu Check Task dan Create Task.

Use case untuk Staff yang terhubung dengan use case lain dengan hubungan include adalah Get Task, Get Leaderboard, Get Achievement, Get Attendance, Get User, Manage Personal Data. Semua use case yang disebutkan terhubung dengan use case Sign In. use case Sign In terhubung dengan use case Validate Account dengan hubungan include kemudian dilanjutkan lagi dengan hubungan include antara use case Validate Account terhadap use case Validate Data. Use case lain untuk Staff yang memiliki hubungan include adalah Get Task yang terhubung dengan use case Check Reward.

Adapula hubungan extend pada use case yang digunakan Staff yaitu pada

Get Task terhubung dengan use case Mark For Checking. Pada use case Manage

Personal Data juga terhubung secara extend dengan use case Edit Profile.

(8)

28 Untuk user Supervisor, use case yang memiliki hubungan adalah Check Task memiliki hubungan Extend dengan use case Mark As Complete, dan Mark As Revision. Use case Mark As Complete sendiri memiliki hubungan include dengan use case Give Point.

Supervisor juga memiliki use case Create Task, use case Create Task

terhubung dengan relasi include terhadap Validasi Data. Semua use case yang

telah disebutkan dapat dilihat dengan detail pada Gambar 3.1.

(9)

29

Gambar 3.1 Use Case Diagram

(10)

30 3.5.2 Activity Diagram

Activity diagram adalah diagram yang menggambarkan urutan aktivitas dalam sebuah sistem. Dalam perancangan aplikasi mobile berbasis gamifikasi terdapat 14 activity diagram yang menjelaskan lebih mendetail alur yang terjadi di dalam use case diagram.

Proses sign in adalah use case pertama yang dilalui user sebelum melalui use case lainnya. Pada proses ini, user menginput data pada form sign in di mana nantinya akan dilakukan pengecekan pada use case Validate Account. Apabila dari Validate Account mengirimkan status tidak valid, maka akan muncul error message. Jika data benar dan valid, maka akan dilakukan simpan session dan dilanjutkan ke homepage. Aktivitas sign in digambarkan pada Gambar 3.2.

Gambar 3.2 Activity Diagram Sign In

(11)

31 Ketika melakukan proses sign in, terdapat activity Validate Account.

Validate Account ini bertujuan untuk mengecek apakah email dan password yang diinput sudah sesuai dan tersimpan di dalam database. Data yang diinput akan divalidasi terlebih dahulu oleh validate data yang akan memberikan return inputan dapat diproses atau tidak. Activiy diagram Validate Account digambarkan pada Gambar 3.3.

Gambar 3.3 Activity Diagram Validate Account

Data yang diinput pada form sign in maupun pada saat mengubah profile

memerlukan validasi inputan terlebih dahulu agar semua data yang masuk

seragam jenisnya. Proses validasi ini dilakukan pada activity diagram Validate

Data. Aktivitas ini dijabarkan pada Gambar 3.4.

(12)

32 Gambar 3.4 Activity Diagram Validate Data

Setelah user melakukan sign in dan masuk ke halaman Homepage, aplikasi

akan melakukan pengecekan data user yang tersimpan terlebih dahulu melalui

activity diagram Get User. Tidak ada inputan dalam activity ini karena user sudah

diassign dengan unique token saat login. Data yang akan didapatkan adalah data

personal seperti nama, data poin user, data jabatan dan juga divisi tempat user

bekerja. Activitas Get User digambarkan pada Gambar 3.5.

(13)

33 Gambar 3.5 Actvity Diagram Get User

Selain mendapatkan data user, pada homepage juga dilakukan pengecekan

status presensi, apakah user sudah melakukan presensi atau belum. Proses ini

dilakukan oleh activity diagram Get Attendance. Ketika menekan tombol hadir

atau lonceng, akan dilakukan pengecekan data di database, jika belum ada data

presensi maka akan dilakukan input data presensi di database kemudian

pembaruan ulang status presensi. Proses presensi ini dijabarkan pada Gambar 3.6.

(14)

34 Gambar 3.6 Activity Diagram Get Attendance

Di halaman Homepage juga menampilkan beberapa task secara keseluruhan milik user. Untuk itu dilakukan pengecekan melalui activity Get Task yang mengambil task khusus user berdasarkan unique token yang dikirim ke API.

Activity diagram Get Task terhubung dengan activity diagram get task detail guna

mendapatkan detail task yang akan dikerjakan beserta nilai poin. Gambar 3.7

mengambarkan proses dari activity diagram Get Task.

(15)

35 Gambar 3.7 Activity Diagram Get Task

Task yang akan ditampilkan akan mengalami pengecekkan data. Detail task akan ditampilkan kemudian akan muncul button yang merepresentasikan aksi untuk mengubah status task. Pada user Staff, button akan terhubung dengan activity Mark As Checking untuk mengirim request pengecekan kepada Supervisor. Proses ini digambarkan pada Gambar 3.8.

Gambar 3.8 Activity Diagram Get Task Detail

(16)

36 Pada saat task ditandai untuk di cek, activity diagram Mark For Checking akan mengirim status request yang akan mengubah status task dari not-complete menjadi checking. Setelah status dikirim, task akan diupdate dan menampilkan tampilan sedang menunggu diperiksa, di mana akan mengunci task tersebut dari perubahan yang dapat terjadi ke depannya. Proses ini dijabarkan pada Gambar 3.9.

Gambar 3.9 Activity Diagram Mark As Checking

Kemudian pada halaman profil, terdapat proses mengambil data user dengan

activity diagram Manage Profile. Data yang diambil akan ditampilkan pada

halaman profile. Pada halaman profile terdapat button edit, yang ketika diklik

akan menghubungkan pada form edit profile. Activity Manager Profile

digambarkan pada Gambar 3.10.

(17)

37 Gambar 3.10 Activity Diagram Manage Profile

Form edit profile akan menjalankan activity diagram Edit Profile. Pada

halaman edit profile, muncul beberapa field dari profile user yang dapat diubah,

kemudian user dapat melakukan input data. Ketika user melakukan submit, maka

data akan di validate terlebih dahulu. Apabila inputan valid, data akan diupdate

dan tampilan akan berubah. Apabila tidak valid, maka akan muncul error

message. Proses ini dijabarkan pada Gambar 3.11.

(18)

38 Gambar 3.11 Activity Diagram Edit Profile

Pada halaman profile terdapat button leaderboard, button ini ketika diklik akan masuk ke dalam halaman leaderboard. Proses ini dijelaskan pada activity diagram Get Leaderboard, di mana user akan melakukan request data user kemudian akan dilakukan proses user sorting berdasarkan poin terbesar. Aktivitas Get Leaderboard dijabarkan pada Gambar 3.12.

Gambar 3.12 Activity Diagram Get Leaderboard

(19)

39 Selain leaderboard, terdapat button Achievement Saya pada halaman profile. Proses yang terjadi adalah pengambilan data achievement dan menampilkan achievement tersebut. Proses ini tercermin pada activity diagram Get Achievements. Activity diagram Get Achievements digambarkan pada Gambar 3.13.

Gambar 3.13 Activity Diagram Get Achievement

Selain proses yang dialami oleh Staff, ada pula proses yang dialami oleh

para Supervisor dalam melakukan pengecekan task. Proses tersebut terjadi pada

activity diagram Check Task. Proses ini akan menampilkan task yang sudah

berstatus checking, user dapat menandai task tersebut selesai apabila tidak ada

revisi. Jika terdapat revisi, user harus menginput deskripsi revisi. Data task akan

diupdate dan diteruskan kepada user yang mengerjakan task tersebut. Proses

Check Task, Mark As Revision, dan Mark As Complete ini digambarkan pada

Gambar 3.14, Gambar 3.15, dan Gambar 3.16.

(20)

40 Gambar 3.14 Activity Diagram Check Task

Gambar 3.15 Activity Diagram Mark As Revision

(21)

41 Gambar 3.16 Activity Diagram Mark As Complete

Pada saat task ditandai selesai, terdapat proses penambahan poin kepada user yang mengerjakan task. Proses ini digambarkan pada activity diagram Give Poin pada Gambar 3.17.

Gambar 3.17 Activity Diagram Give Poin

(22)

42 Selain memberikan revisi dan menyetujui task, Supervisor pun dapat membuat task bagi para Staff seperti pada activity diagram Create Task. Data pertama akan diinput kemudian divalidasi pada API, apabila valid, data akan disimpan dan kembali ke task list. Apabila tidak valid, Supervisor harus memperbaiki inputan agar task bisa disimpan. Activity diagram ini digambarkan pada Gambar 3.18.

Gambar 3.18 Activity Diagram Create Task

3.5.3 Sequence Diagram

Sequence diagram digunakan untuk memberikan gambaran function yang digunakan dalam sistem dan juga class yang digunakan. Terdapat empat belas diagram dalam perancangan aplikasi mobile ini. Berikut penjelasan lebih lanjut untuk masing-masing sequence diagram.

Tampilan awal aplikasi adalah halaman LoginPage, halaman ini dapat

diakses dengan membuka aplikasi. Pada halaman LoginPage, user harus

menginput email dan password dari akun mereka kemudian dengan menekan

(23)

43 tombol login maka akan memanggil function login. Apabila user berhasil login, akan dilanjutkan dengan menjalankan function getUserDetail dari EmployeeAPI.

Dari function ini akan direturn detail dari user dan dilanjutkan berpindah ke halaman homepage. Alur proses ini digambarkan pada Gambar 3.19.

Gambar 3.19 Sequence Diagram Sign In

Saat melakukan login, data yang dikirim akan melalui proses validasi akun.

Ketika melakukan validasi akun, data akan melalui proses authentication dengan

function getAuthentication. Jika data ditemukan, controller Auth akan

mengenerate unique token yang kemudian dikirim bersama dengan status

autentikasi. Alur proses ini digambarkan pada Gambar 3.20.

(24)

44 Gambar 3.20 Sequence Diagram Validate Account

Setelah berhasil login, user akan diarahkan pada halaman homepage.

Halaman homepage memuat beberapa informasi dan menyimpan beberapa

informasi penting. Informasi yang disimpan adalah data user. Sesaat setelah login,

user akan me-request data ke EmployeeAPI dan API akan menjalankan function

getUserDetail untuk mengambil data user secara spesifik. Data yang sudah

didapatkan akan direturn kembali kepada user untuk disimpan dan sebagian

ditampilkan. Alur proses ini digambarkan pada Gambar 3.21.

(25)

45 Gambar 3.21 Sequence Diagram Get User

Selain data user, adapun status presensi yang menunjukkan status kehadiran

user. Setelah mendapatkan data user, aplikasi akan langsung melanjutkan

mengambil status presensi dengan melempar request getAttendanceStatus kepada

AttendanceAPI, AttendanceAPI akan melanjutkan request dengan menjalankan

function getAttendanceData. Setelah melakukan pengecekkan ketersediaan data

presensi hari tersebut, maka status akan dikirimkan kembali ke halaman

homepage guna menampilkan button presensi. Apabila button menampilkan

warna merah, user dapat melakukan presensi. Ketika menekan presensi, halaman

homepage akan menjalankan function doAttendance yang diteruskan ke

AttendanceAPI untuk melakukan insert data presensi dengan function

(26)

46 insertAttendanceData. Setelah insert selesai, status penginputan akan dikirimkan dan mengupdate status presensi serta mengubah warna tombol menjadi hijau. Alur proses ini digambarkan pada Gambar 3.22.

Gambar 3.22 Sequence Diagram Get Attendance

Setelah status presensi didapatkan, aplikasi juga akan mengambil data task

secara keseluruhan untuk ditampilkan di halaman homepage. Aplikasi akan me-

request data dengan function getAllTask kepada TaskAPI, kemudian TaskAPI

(27)

47 yang menerima request akan mengambil data task yang berhubungan dengan user tersebut. Alur proses ini digambarkan pada Gambar 3.23.

Gambar 3.23 Sequence Diagram Get Task

Ketika list task sudah muncul, user dapat memilih salah satu task yang

ditampilkan. Sesudah task dipilih, aplikasi akan mengirim request melalui

function getTaskDetail, setelah terhubung dengan TaskAPI, TaskAPI akan

menjalankan function getTaskDetail terhadap model Task untuk mendapatkan

detail plan. Data yang sudah didapatkan akan ditampilkan di halaman detail. Pada

halaman detail terdapat button aksi yang dapat dipilih untuk mengirimkan request

checking. Ketika button ini dipilih, request checking dikirim ke sequence Mark for

checking untuk kemudian akan berubah status task tersebut. Setelah task berubah,

(28)

48 user tinggal menunggu status selanjutnya dari user Supervisor. Alur proses ini digambarkan pada Gambar 3.24.

Gambar 3.24 Sequence Diagram Get Task Detail

Untuk memanage data dari user, terdapat halaman profile yang dapat diakses

via navigation bar. Saat pertama memasuki halaman profile, user akan

mengirimkan request ke EmployeeAPI dengan function getProfile, kemudian dari

EmployeeAPI akan melanjutkan request dan mengakses data user dengan function

getUserDetail. Data yang sudah didapatkan dikembalikan ke halaman profile

untuk ditampilkan. Pada halaman profile pun terdapat tombol edit profile yang

(29)

49 mengarahkan user menuju form edit profile. Alur proses ini digambarkan pada Gambar 3.25.

Gambar 3.25 Sequence Diagram Manage Profile

Setelah memasuki halaman edit profile, akan muncul beberapa field yang

dapat diisi untuk mengubah data dari user. Ketika sudah mengisi field yang

disediakan, user dapat menekan tombol ubah data untuk mengirim data dan

request ke EmployeeAPI yang kemudian akan mengubah data dengan function

updateProfile. Data user yang sudah diupdate akan dikirim ke halaman profile dan

tampilan diupdate. Alur proses ini digambarkan pada Gambar 3.26.

(30)

50 Gambar 3.26 Sequence Diagram Edit Profile

Pada halaman profile terdapat button leaderboard yang berguna

menampilkan posisi user berdasarkan poin yang dikumpulkan. Request akan

dikirim seketika masuk ke halaman leaderboard, aplikasi akan me-request list

leaderboard melalui function getLeaderboard. Terhubung dengan

leaderboardAPI, API akan mengambil data users kemudian diurutkan berdasarkan

urutan poin terbesar kemudian mengirimkannya kembali kepada user untuk

ditampilkan. Alur proses ini digambarkan pada Gambar 3.27.

(31)

51 Gambar 3.27 Sequence Diagram Get Leaderboard

Adapula button Achievemenet saya yang terhubung dengan halaman

achievement. Ketika masuk ke halaman achievement request akan dikirim kepada

API melalui function getAllAchievement. Pada AchievementAPI, data achievement

user yang bersangkutan akan dikumpulkan kemudian data akan dikembalikan

dalam bentuk list. Data tersebut akan digenerate dalam bentuk badges dan

deskripsi pencapaian. Alur proses ini digambarkan pada Gambar 3.28.

(32)

52 Gambar 3.28 Sequence Diagram Get Achievement

Pada user Supervisor, user dapat melakukan pengecekkan semua task oleh

user Staff. Halaman Task akan mengirim request getAllTask yang me-request

kepada TaskAPI untuk mengambil semua task tanpa melihat user tertentu. Semua

task akan direturn kemudian ditampilkan pada halaman Task. User Supervisor pun

memiliki piihan untuk menekan tombol selesai maka akan dialihkan pada

sequence Mark For Checking dan jika menekan tombol revisi maka akan

dialihkan ke sequence Mark As Revision. Alur proses ini digambarkan pada

Gambar 3.29.

(33)

53 Gambar 3.29 Sequence Diagram Check Task

Ketika user supervisor mengisi inputan revisi dan juga menekan tombol

revisi, maka data akan dikirim ke TaskAPI yang kemudian akan mengubah status

dari task yang bersangkutan. Selain itu, terdapat tambahan revisi terhadap task

tersebut yang akan ditampilkan kepada user Staff. Alur proses ini digambarkan

pada Gambar 3.30.

(34)

54 Gambar 3.30 Sequence Diagram Mark As Revision

Ketika user supervisor menekan tombol selesai, maka data status complete akan dikirim ke TaskAPI. TaskAPI akan menjalankan function sendReward untuk menambahkan poin kepada user Staff yang bersangkutan. Setelah poin user Staff berubah, barulah TaskAPI menjalankan function updateTaskStatus kepada task yang bersangkutan dan merubah status menjadi complete. Alur proses ini digambarkan pada Gambar 3.31.

Gambar 3.31 Sequence Diagram Mark As Complete

(35)

55 Pada saat user Supervisor menekan tombol selesai, maka halaman Task akan mengirim status complete dan mengupdate status task tersebut. Karena status sudah selesai, maka TaskAPI akan mengirim poin kepada user bersangkutan dan mengupdate profile user tersebut. Setelah itu TaskAPI akan mengirim notifikasi dengan function addNotification kepada user. Alur proses ini digambarkan pada Gambar 3.32.

Gambar 3.32 Sequence Diagram Give Poin

Pada halaman task, user Supervisor dapat membuat task dengan masuk ke

halaman AddTaskPage, kemudian mengisi data yang dibutuhkan. Setelah tombol

submit dipilih, AddTaskPage akan mengirim request ke TaskAPI untuk

menyimpan task dengan function saveTask. Setelah data tersimpan, TaskAPI akan

(36)

56 mengirimkan request ke UserNotification untuk membuat notifikasi kepada user Staff yang diassign. Alur proses ini digambarkan pada Gambar 3.33.

Gambar 3.33 Sequence Diagram Create Task

Staff yang berhasil mengerjakan task dapat melakukan update status task

kepada supervisor agar dilakukan pengecekan. Dengan menekan tombol check,

maka status request check akan dikirim dari TaskAPI untuk mengupdate task yang

bersangkutan. Alur proses ini dapat dilihat pada Gambar 3.34.

(37)

57 Gambar 3.34 Sequence Diagram Mark For Checking

3.5.4 Class Diagram

Class diagram terdiri dari 18 class utama, diantaranya terdapat class API, Page, dan Model. Class Page pada perancangan ini memiliki function yang berfungsi melakukan request data kepada API. Atribut pada page berupa data yang dikirimkan dari API maupun data form yang akan dikirimkan ke API. Untuk class model, tidak terdapat function dikarenakan Laravel menggunakan magic class nya untuk melakukan CRUD ke database.

Class model hanya digunakan untuk mendeklarasikan beberapa atribut

penting seperti nama tabel, timestamp, primary key, dan fillable yang menandakan

apakah boleh dilakukan create data di model tersebut. Semua class digambarkan

pada Gambar 3.35.

(38)

58 Gambar 3.35 Class Diagram

3.5.5 Database Schema

Database yang digunakan oleh aplikasi adalah MySQL yang terdiri dari 18

tabel utama yaitu employees, employee_roles, divisions, products, projects,

achievements, product_employees, project_employees, achievements_employee,

tasks, task_types, task_counters, employee_attendances, priorities, poin_histories,

task_revisions, attendance_settings dan user_notifications. Semua tabel utama

yang digunakan pada aplikasi mobile dijabarkan pada Gambar 3.36.

(39)

59

Gambar 3.36 Database Schema

(40)

60 Tabel employees digunakan untuk menyimpan data dari karyawan dan data pemain milik user. Struktur tabel employees secara lengkap dapat dilihat pada Tabel 3.1.

Tabel 3.1 Struktur Tabel employees

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 ktp_id char 36 Nomor ktp

3 npwp_id char 36 Nomor NPWP

4 employee_role_id char 36 Foreign key terhadap

tabel employee_roles

5 division_id char 36 Foreign key terhadap

tabel divisions

6 supervisor_id char 36 Foreign key terhadap

tabel employees

7 code varchar 191 Kode karyawan

8 name varchar 191 Nama karyawan atau

user

9 email varchar 191 Email karyawan atau

user

10 password varchar 191 Password login

aplikasi user

11 gender varchar 191 Jenis kelamin

karyawan atau user

12 birth_date date Tanggal lahir

karyawan atau user

13 birth_place varchar 191 Tempat lahir

karyawan atau user

14 phone_number varchar 191 Nomor telepon

karyawan atau user

15 province_id char 36 Foreign key terhadap

raja_ongkir_provinces

16 city_id char 36 Foreign key terhadap

raja_ongkir_cities

17 address text Alamat tinggal

karyawan atau user

18 start_working_date date Tanggal karyawan

atau user mulai bekerja

19 resign_date date Tanggal karyawan

atau user resign

(41)

61 Tabel 3.1 Struktur Tabel employees (Lanjutan)

No Nama Kolom Tipe Data Panjang Keterangan

20 point int 11 Poin yang

dikumpulkan karyawan atau user

21 created_by char 36 Id user yang membuat

data

22 updated_by char 36 Id user yang

mengubah data

23 deleted_by char 36 Id user yang

menghapus data

24 created_at timestamp Tanggal data dibuat

25 updated_at timestamp Tanggal data diubah

26 deleted_at timestamp Tanggal data dihapus

Tabel employee_roles adalah tabel yang berisi data jabatan dari karyawan.

Tabel 3.2 menunjukkan struktur tabel employee_roles.

Tabel 3.2 Struktur Tabel employee_roles

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode jabatan

3 name varchar 191 Nama jabatan

4 description varchar 191 Deskripsi detail

tentang jabatan

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

(42)

62 Tabel divisions adalah tabel yang berisi data divisi yang berada di perusahaan. Tabel 3.3 menunjukkan struktur tabel divisions.

Tabel 3.3 Struktur Tabel divisions

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode divisi

3 name varchar 191 Nama divisi

4 description varchar 191 Deskripsi detail

tentang divisi

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

Tabel task_types adalah tabel yang berisi data jenis task yang dapat dikerjakan. Struktur tabel task_types dijabarkan pada Tabel 3.4.

Tabel 3.4 Struktur Tabel task_types

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode jenis task

3 name varchar 191 Jenis task

4 description varchar 191 Deskripsi detail

tentang jenis task

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

(43)

63 Tabel priorities adalah tabel yang berisi data prioritas dari task. Tabel 3.5 menunjukkan struktur tabel priorities.

Tabel 3.5 Struktur Tabel priorities

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode prioritas

3 name varchar 191 Jenis prioritas

4 description varchar 191 Deskripsi detail

tentang prioritas

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

Tabel employee_attendances adalah tabel yang berisi data kehadiran user.

Tabel 3.6 menunjukkan struktur tabel employee_attendances.

Tabel 3.6 Struktur Tabel employee_attendances

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 employee_id char 36 Foreign key terhadap

tabel employees

3 attendance_id char 36 Foreign key terhadap

tabel

attendance_settings

4 time timestamp Waktu presensi

5 status varchar 191 Status presensi

6 point int 11 Poin dari presensi

7 latitude varchar 191 Koordinat latitude

8 longitude varchar 191 Koordinat longitude

9 created_by char 36 Id user yang membuat

data

(44)

64

Tabel 3.6 Struktur Tabel employee_attendances ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

10

updated_by char 36 Id user yang

mengubah data

11

deleted_by char 36 Id user yang

menghapus data

12

created_at timestamp Tanggal data dibuat

13

updated_at timestamp Tanggal data diubah

14

deleted_at timestamp Tanggal data dihapus

Tabel achievements adalah tabel yang berisi data achievement yang dapat diberikan kepada user. Struktur tabel achievements dijabarkan pada Tabel 3.7.

Tabel 3.7 Struktur Tabel achievements

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 task_type_id char 36 Foreign key terhadap

tabel task_types

3 name varchar 191 Nama achievement

4 level varchar 191 Level achievement

5 description varchar 191 Deskripsi

achievement

6 requirement int 11 Requirement untuk

mendapatkan achievement

7 emblem text nama gambar emblem

achievement terkait

8 created_by char 36 Id user yang membuat

data

9 updated_by char 36 Id user yang

mengubah data

10 deleted_by char 36 Id user yang

menghapus data

11 created_at timestamp Tanggal data dibuat

12 updated_at timestamp Tanggal data diubah

13 deleted_at timestamp Tanggal data dihapus

(45)

65 Tabel achievement_employees adalah tabel yang berisi data list achievement yang sudah didapatkan oleh user. Struktur tabel achievement_employees dijabarkan pada Tabel 3.8.

Tabel 3.8 Struktur Tabel achievement_employees No Nama Kolom Tipe Data Panjang Keterangan

1 achievement_id char 36 Foreign key terhadap

tabel achievements

2 employee_id char 36 Foreign key terhadap

tabel employees

3 created_by char 36 Id user yang membuat

data

4 updated_by char 36 Id user yang

mengubah data

5 deleted_by char 36 Id user yang

menghapus data

6 created_at timestamp Tanggal data dibuat

7 updated_at timestamp Tanggal data diubah

8 deleted_at timestamp Tanggal data dihapus

Tabel products adalah tabel yang berisi data produk yang dimiliki perusahaan. Tabel 3.9 menunjukkan struktur tabel products.

Tabel 3.9 Struktur Tabel products

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode produk

3 name varchar 191 Jenis produk

4 description varchar 191 Deskripsi detail

tentang produk 5 project_manager_id char 36 Foreign ket terhadap

tabel employees

6 project_lead_id char 36 Foreign ket terhadap

tabel employees

7 start_date date Tanggal mulai

pembuatan produk

8 end_date date Tanggal produk

selesai dikembangkan

(46)

66

Tabel 3.9 Struktur Tabel products ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

9

status varchar 191 Status pengembangan

produk

10

point int 11 Poin atas

penyelesaian produk

11

created_by char 36 Id user yang membuat

data

12

updated_by char 36 Id user yang

mengubah data

13

deleted_by char 36 Id user yang

menghapus data

14

created_at timestamp Tanggal data dibuat

15

updated_at timestamp Tanggal data diubah

16

deleted_at timestamp Tanggal data dihapus

Tabel projects adalah tabel yang berisi data proyek yang dimiliki perusahaan. Tabel 3.10 menunjukkan struktur tabel projects.

Tabel 3.10 Struktur Tabel projects

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 code varchar 191 Kode proyek

3 name varchar 191 Jenis proyek

4 description varchar 191 Deskripsi detail

tentang proyek 5 project_manager_id char 36 Foreign ket terhadap

tabel employees

6 project_lead_id char 36 Foreign ket terhadap

tabel employees

7 start_date date Tanggal proyek

dimulai

8 end_date date Tanggal proyek

selesai

9 status varchar 191 Status penyelesaian

proyek

10 point int 11 Poin atas

penyelesaian proyek

11 created_by char 36 Id user yang membuat

data

(47)

67

Tabel 3.10 Struktur Tabel projects ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

11

updated_by char 36 Id user yang

mengubah data

12

deleted_by char 36 Id user yang

menghapus data

13

created_at timestamp Tanggal data dibuat

14

updated_at timestamp Tanggal data diubah

15

deleted_at timestamp Tanggal data dihapus

Tabel product_employees adalah tabel yang berisi data karyawan yang mengerjakan produk. Struktur tabel product_employees dijabarkan pada Tabel 3.11.

Tabel 3.11 Struktur Tabel product_employees

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 product_id char 36 Foreign key terhadap

tabel products

3 employee_id char 36 Foreign key terhadap

tabel employees

4 created_by char 36 Id user yang membuat

data

5 updated_by char 36 Id user yang

mengubah data

6 deleted_by char 36 Id user yang

menghapus data

7 created_at timestamp Tanggal data dibuat

8 updated_at timestamp Tanggal data diubah

9 deleted_at timestamp Tanggal data dihapus

Tabel project_employees adalah tabel yang berisi data karyawan yang

mengerjakan proyek. Struktur tabel project_employees dijabarkan pada Tabel

3.12.

(48)

68 Tabel 3.12 Struktur Tabel project_employees

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 project_id char 36 Foreign key terhadap

tabel projects

3 employee_id char 36 Foreign key terhadap

tabel employees

4 created_by char 36 Id user yang membuat

data

5 updated_by char 36 Id user yang

mengubah data

6 deleted_by char 36 Id user yang

menghapus data

7 created_at timestamp Tanggal data dibuat

8 updated_at timestamp Tanggal data diubah

9 deleted_at timestamp Tanggal data dihapus

Tabel tasks adalah tabel yang berisi task yang dibuat oleh user untuk dikerjakan. Struktur tabel task dijabarkan pada Tabel 3.13.

Tabel 3.13 Struktur Tabel tasks

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 project_id char 36 Foreign key terhadap

tabel projects

3 product_id char 36 Foreign key terhadap

tabel products

4 division_id char 36 Foreign key terhadap

tabel divisions

5 employee_id char 36 Foreign key terhadap

tabel employees

6 priority_id char 36 Foreign key terhadap

tabel priorities

7 task_type_id char 36 Foreign key terhadap

tabel task_types

8 name varchar 191 Nama task

9 description varchar 191 Deskripsi detail task

10 start_date date Tanggal proyek

dimulai

11 end_date date Tanggal proyek

selesai

(49)

69

Tabel 3.13 Struktur Tabel tasks ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

12 completed_at timestamp Waktu task selesai

13 approved_by char 36 User yang

mengapprove penyelesaian task

14 status varchar 191 Status penyelesaian

task

15 point int 11 Poin atas

penyelesaian task

16 created_by char 36 Id user yang membuat

data

17 updated_by char 36 Id user yang

mengubah data

18 deleted_by char 36 Id user yang

menghapus data

19 created_at timestamp Tanggal data dibuat

20 updated_at timestamp Tanggal data diubah

21 deleted_at timestamp Tanggal data dihapus

Tabel task_revisions adalah tabel yang berisi revisi atas task yang sudah dikerjakan oleh user. Struktur tabel task_revisions dijabarkan pada Tabel 3.14.

Tabel 3.14 Struktur Tabel task_revisions

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 task_id char 36 Foreign key terhadap

tabel tasks

3 description varchar 191 Deskripsi detail revisi dari task

4 status varchar 191 Status penyelesaian

revisi

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

(50)

70

Tabel 3.14 Struktur Tabel task_revisions ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

8 Created_at timestamp Tanggal data dibuat

9 Updated_at timestamp Tanggal data diubah

10 Deleted_at timestamp Tanggal data dihapus

Tabel task_counters adalah tabel yang berisi data perhitungan jumlah task yang sudah dikerjakan guna mendapatkan achievement. Tabel task_counter memiliki struktur seperti pada Tabel 3.15.

Tabel 3.15 Struktur Tabel task_counters

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 task_type_id char 36 Foreign key terhadap

tabel task_types

3 employee_id char 36 Foreign key terhadap

tabel employees

4 count int 11 Jumlah task yang

dikerjakan

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

Tabel poin_histories adalah tabel yang berguna untuk mencatat histori poin

yang didapatkan dalam kurun waktu tertentu. Struktur tabel poin_histories

dijabarkan pada Tabel 3.16.

(51)

71 Tabel 3.16 Struktur Tabel poin_histories

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 employee_id char 36 Foreign key terhadap

tabel employees

3 point int 11 Jumlah poin yang

diterima user

4 inputed_at timestamp Waktu poin masuk ke

user

5 created_by char 36 Id user yang membuat

data

6 updated_by char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

Tabel user_notifications adalah tabel yang berguna untuk mencatat notifikasi dari aktivitas yang dilakukan user. Struktur tabel user_notifications dijabarkan pada Tabel 3.17.

Tabel 3.17 Struktur Tabel user_notifications

No Nama Kolom Tipe Data Panjang Keterangan

1 id char 36 Primary key

2 employee_id char 36 Foreign key terhadap

tabel employees

3 description varchar 191 Deskripsi dari

notifikasi

4 status varchar 191 Status terbacanya

notifikasi

5 type varchar 191 Jenis notifikasi

6 created_by char 36 Id user yang membuat

data

7 updated_by char 36 Id user yang

mengubah data

(52)

72

Tabel 3.17 Struktur Tabel user_notifications ( Lanjutan )

No Nama Kolom Tipe Data Panjang Keterangan

8 deleted_by char 36 Id user yang

menghapus data

9 created_at timestamp Tanggal data dibuat

10 updated_at timestamp Tanggal data diubah

11 deleted_at timestamp Tanggal data dihapus

Tabel attendance_settings adalah tabel yang berguna untuk mencatat pengaturan waktu presensi yang diingikan. Struktur tabel attendance_settings dijabarkan pada Tabel 3.18.

Tabel 3.18 Struktur Tabel attendance_settings

No Nama Kolom Tipe Data Panjang Keterangan

1 Id char 36 Primary key

2 Name varchar 191 Nama absensi

3 Start time Waktu presensi

dimulai

4 end time Waktu presensi

selesai

5 created_by char 36 Id user yang membuat

data

6 updated_by Char 36 Id user yang

mengubah data

7 deleted_by char 36 Id user yang

menghapus data

8 created_at timestamp Tanggal data dibuat

9 updated_at timestamp Tanggal data diubah

10 deleted_at timestamp Tanggal data dihapus

3.5.6 Rancangan Kuesioner Evaluasi

Kuesioner evaluasi terhadap aplikasi task list manager berbasis mobile

dirancang berdasarkan model UTAUT. Terdapat enam bagian utama dari

kuesioner, yaitu Performance Expectancy (PE), Effort Expectancy (EE), Attitude

(53)

73 toward using technology (ATUT), Facilitating Conditions (FC), Anxiety (ANX), dan Behavioral Intention (BI). Pertanyaan dengan sifat reversal scaled akan ditandai dengan lambang asterisk (*). Rancangan pertanyaan kuesioner yang akan dilakukan ditunjukkan pada Tabel 3.19.

Tabel 3.19 Rancangan Pertanyaan Kuesioner Performance Expectancy

U6 Tugas dapat diselesaikan dengan cepat dengan menggunakan aplikasi RA1 Menggunakan aplikasi dapat meningkatkan kualitas kerja saya RA5 Menggunakan aplikasi meningkatkan produktivitas saya

OE7 Jika menggunakan aplikasi, saya menghabiskan waktu lebih sedikit dalam mengerjakan task

Effort Expectancy

EOU3 Interaksi saya di dalam aplikasi jelas dan mudah dipahami EOU6 Aplikasi mudah digunakan

EU4 Mudah untuk mempelajari penggunaan aplikasi Attitude Toward Using Technology A1 Menggunakan aplikasi adalah ide yang baik

AF1 Menggunakan aplikasi membuat pekerjaan lebih menarik AF2 Menggunakan aplikasi menyenangkan

Affect1 Saya merasa bosan dalam menggunakan aplikasi * Self Efficacy

Saya akan menyelesaikan task dengan aplikasi..

SE1 Jika tidak ada orang yang menyuruh saya menggunakan aplikasi SE4 Jika saya dapat menghubungi orang lain ketika mengalami masalah

Anxiety

ANX1 Saya merasa gelisah ketika menggunakan sistem *

ANX2 Saya merasa takut kehilangan informasi bila menekan tombol yang salah

*

ANX3 Saya merasa ragu menggunakan aplikasi karena takut melakukan kesalahan yang tidak dapat diperbaiki *

ANX4 Aplikasi mengintimidasi saya ketika menggunakan * Behavioral Intention To Use System

BI1 Saya berniat menggunakan aplikasi untuk bulan selanjutnya

(54)

74 Tabel 3.19 Rancangan Pertanyaan Kuesioner ( Lanjutan )

Social Influence

SN1 Orang yang mempengaruhi kebiasaan saya menganjurkan saya menggunakan aplikasi

SN2 Orang yang penting bagi saya menganjurkan saya menggunakan aplikasi SF2 Manajemen senior merasa terbantu dengan aplikasi ini

SF4 Secara umum, perusahaan mendukung penggunaan aplikasi ini Perceived Enjoyment

Aplikasi gamifikasi sangat mengesalkan *

Pengalaman menggunakan aplikasi gamifikasi menyenangkan Aplikasi gamifikasi membuat saya tidak puas*

Pengukuran kuesioner menggunakan Skala Likert untuk tiap pertanyaan dengan tujuh tingkatan dimulai dari paling rendah sampai paling tinggi yaitu:

- Sangat tidak setuju - Tidak setuju - Agak Tidak Setuju - Netral

- Agak Setuju

- Setuju

- Sangat Setuju

(55)

75 3.5.7 Rancangan Tampilan Antarmuka

Saat pertama kali pengguna membuka aplikasi, pengguna akan langsung masuk ke halaman LoginPage. Pada halaman ini, terdapat form login yang terdiri dari kolom email dan password. Terdapat button sign in untuk melakukan proses autentikasi agar bisa menggunakan aplikasi. Gambar 3.37 menampilkan rancangan tampilan LoginPage.

Gambar 3.37 Rancangan Tampilan LoginPage

Pengguna yang sudah berhasil login akan diarahkan ke Homepage. Halaman ini terdapat button presensi. Button ini digunakan untuk melakukan presensi.

Selain itu terdapat juga nama user, poin yang dikumpulkan user, waktu user

melakukan presensi. Di bawah sesi presensi, terdapat daftar task hari ini yang

menampilkan task yang harus dikerjakan. Rancangan tampilan Homepage

digambarkan pada Gambar 3.38.

(56)

76 Gambar 3.38 Rancangan Tampilan Homepage

Pengguna dapat memasukki halaman TaskGrupPage untuk melihat task

yang sudah dikelompokkan berdasarkan divisi, produk, dan proyek. Ketika salah

satu grup dipilih maka akan mengarahkan ke halaman TaskList. Rancangan

tampilan TaskGroupPage digambarkan pada Gambar 3.39.

(57)

77 Gambar 3.39 Rancangan Tampilan TaskGroupPage

Pada halaman TaskListPage, task akan ditampilkan secara keseluruhan.

Setiap task memiliki logo yang menandakan status task tersebut. Task diurutkan

berdasarkan status not-complete, revision, checking, dan complete. Selain itu pada

halaman ini, user dapat menambahkan task dengan menekan tombol + yang

tersedia di pojok kanan atas aplikasi. Rancangan tampilan TaskListPage

digambarkan pada Gambar 3.40.

(58)

78 Gambar 3.40 Rancangan Tampilan TaskListPage

Ketika menekan tombol +, user akan diarahkan ke halaman AddTask. Di

halaman AddTask, user harus memasukkan beberapa input yang dibutuhkan

dalam membuat task. Terdapat juga dua dropdown selection untuk memilih

prioritas dan jenis task. Setelah selesai mengisi form, user dapat mengonfirmasi

task dengan menekan button buat task. Rancangan tampilan AddTask

digambarkan pada Gambar 3.41.

(59)

79 Gambar 3.41 Rancangan Tampilan Halaman AddTask

Selain membuat task dan memperbaharui status task, user dapat melihat data user di ProfilePage. Di halaman profile terdapat beberapa aksi yaitu melihat Leaderboard, melihat achievement, dan juga keluar dari aplikasi. Terdapat pula nama user, jabatan user, dan juga poin yang sudah dikumpulkan oleh user.

Rancangan tampilan ProfilePage digambarkan pada Gambar 3.42.

(60)

80 Gambar 3.42 Rancangan Tampilan ProfilePage

Ketika user memilih button Leaderboard, user akan diarahkan pada halaman

Leaderboard. Di halaman ini, tiga user dengan poin tertinggi akan mendapatkan

piala atau tropi berdasarkan urutan. User lain akan berada di bawah tiga user poin

teratas. Rancangan tampilan Leaderboard digambarkan pada Gambar 3.43.

(61)

81 Gambar 3.41 Rancangan Tampilan Halaman Leaderboard

3.5.8 Daftar Aset

Rancangan aplikasi task list manager berbasis mobile tidak terlepas dari

penggunaan aset-aset yang ada. Berikut adalah daftar penggunaan aset beserta

dengan referensinya.

(62)

82 A. Aset Fitur Attendance

Terdapat 3 aset yang digunakan pada halaman homepage. 2 aset digunakan untuk fitur attendance dan 1 aset digunakan pada bagian task. 2 aset pada fitur attendance meliputi asset lonceng pada button presensi dan asset coin pada poin user. 1 aset pada bagian task adalah asset tasklist sebagai penanda user tidak memiliki task. Aset untuk fitur attendance ditunjukkan pada Tabel 3.20.

Tabel 3.20 Aset Untuk Attendance

No Aset Deskripsi Sumber

1 Tanda presensi dapat

dilakukan.

https://www.flaticon.co m/free-

icon/bell_347568

2 Icon poin pada

homepage.

https://www.flaticon.co m/free-

icon/coin_2140361

3 Icon bahwa tidak ada

task yang tersedia.

https://www.flaticon.co m/free-

icon/test_167709

B. Aset Fitur Task

Pada halaman tasklist, terdapat 4 jenis aset yang digunakan. 1 aset

sebagai penanda bahwa user tidak memiliki task. 3 aset lainnya sebagai

penanda status dari task yang dikerjakan. List aset pada fitur task ditunjukkan

pada Tabel 3.21.

(63)

83 Tabel 3.21 Aset untuk Task

No Aset Deskripsi Sumber

1 Icon bahwa tidak ada task yang tersedia.

https://www.flaticon.co m/free-

icon/test_167709 2 Icon pada task menandakan

task sudah selesai dikerjakan.

https://www.flaticon.co m/free-icon/tick_87932 3 Icon pada task menandakan

task harus dikerjakan.

https://www.flaticon.co m/free-

icon/exclamation- mark_179386 4 Icon pada task menandakan

task sedang dalam proses pengecekan Supervisor.

https://www.flaticon.co m/free-icon/circular- clock_265690

C. Aset Fitur Profile

Pada halaman profile, terdapat 4 jenis aset yang digunakan. 1 aset

berupa aset coin untuk menunjukkan poin dari user. 3 aset lainnya digunakan

sebagai icon dari button navigasi ke halaman lain. Button yang digunakan

akan melakukan navigaisi ke beberapa halaman yaitu halaman Leaderboard,

halaman EditProfile, dan halaman MyAchivemenent. Untuk daftar aset

halaman profile, dapat dilihat pada Tabel 3.22.

(64)

84 Tabel 3.22 Aset untuk Profile

No Aset Deskripsi Sumber

1 Icon pada tombol

leaderboard.

https://www.flaticon.co m/free-

icon/bell_347568 2 Icon poin pada profile. https://www.flaticon.co

m/free-

icon/coin_2140361

3 Icon pada button lihat

pencapaian

https://www.flaticon.co m/free-

icon/medal_167747

4 Icon pada button profile

saya

https://www.flaticon.co m/free-

icon/student_167750

D. Aset Fitur Leaderboard

Untuk halaman Leaderboard terdapat 4 jenis aset yang digunakan untuk menandakan peringkat dari user. Daftar aset yang digunakan pada halaman Leaderboard dapat dilihat pada Tabel 3.23.

Tabel 3.23 Aset untuk Leaderboard

No Aset Deskripsi Sumber

1 Tropi leaderboard posisi

pertama.

https://www.flaticon.co m/free-

icon/trophy_1603863

2 Tropi leaderboard posisi

kedua.

https://www.flaticon.co m/free-icon/second- prize_1435701

3 Tropi leaderboard posisi

ketiga.

https://www.flaticon.co m/free-icon/third- prize_1435702

4 Medali bagi semua user di

leaderboard.

https://www.flaticon.co m/free-

icon/medal_167747

(65)

85 E. Aset Fitur Achievement

Pada halaman Achievement, terdapat 4 jenis aset yang digunakan. Aset digunakan sebagai representasi jenis task yang dilakukan. Daftar aset untuk achievement ditunjukkan pada Tabel 3.24.

Tabel 3.24 Aset Untuk Achievement

No Aset Deskripsi Sumber

1. Icon pada emblem task

call

https://www.flaticon.co m/free-

icon/call_1764947

2 Icon pada emblem task

meeting

https://www.flaticon.co m/free-

icon/conversation_608 968

3 Icon pada emblem task

create dan fix

https://www.flaticon.co m/free-

icon/bell_347568

4 Icon pada emblem task

update

https://www.flaticon.co m/free-

icon/medal_411830

Referensi

Garis besar

Dokumen terkait

Jika karakter (huruf) tersebut adalah sebuah angka, maka aplikasi akan menjalankan modul instantiateObject untuk megnhasilkan objek pukulan sesuai dengan karakter (huruf) yang ada.

Tenaga atau pancaran yang memancar melalui jari2 kanan itu adalah ia bersifat QUDRAT (kuasa) ILAHIAH,ianya berfungsi mentadbir atau mengadakan sesuatu yang bersifat

Mızrak (çekirdek) Bölgesi: Bu bölgede hiçbir reaksiyon olmaz C2H2+O2 karışımı alevlenme sıcaklığının altındadır. Normal Alevdeki Bölgeler.. Oksi-asetilen alevin

adalah karya tulis ilmiah berupa paparan hasil penelitian yang membahas suatu masalah dalam bidang ilmu hukum untuk mencari pemecahan masalahnya dengan menggunakan teori-teori,

Gambar 3.22 merupakan rancangan antarmuka halaman daftar tanaman yang ada pada database pada rancangan antarmuka halaman terdapat sebuah data table yang berisi kolom nama

Konveksi UKM Avos Jaya dalam pembelian bahan baku belum menerapkan standar yang dibutuhkan, hanya menggunakan perkiraan, padahal keuntungan menggunakan biaya

Tugas Akhir yang berjudul “Analisis dan Implementasi Klasifikasi Data Menggunakan Soft Decision Tree - ID3 (SDT - ID3)” ini merupakan teknik induksi pohon keputusan

Pemeriksaan variasi periode kawin pertama postpartus dikumpulkan dari data reproduksi sapi FH dara dan induk di kedua lokasi yang dikumpulkan oleh stasiun bibit BPTU