PEMBUATAN USER INTERFACE PADA ADMIN

FIELD SERVICE DAN PENGUJIAN MOBILE APPS

LAUTAN LUAS DENGAN METODE BLACKBOX

LAPORAN KERJA MAGANG

WILLSEN

00000011592

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNIK DAN INFORMATIKA

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2020

ii

PERNYATAAN

Dengan ini saya menyatakan bahwa telah melaksanakan praktik kerja magang pada:

Nama Perusahaan : PT. Fiture Teknologi Inovasi

Divisi : IT Analyst & Quality Control

Alamat : Ruko Daan Mogot Baru, Jl. Bedugul 1A no

14, Kalideres - Jakarta Barat 11840

Periode Magang : 30 Januari 2020 – 30 April 2020

Pembimbing Lapangan : Wike Hestiwinrum

Laporan kerja magang ini adalah karya tulis saya sendiri, bukan plagiat dari karya

tulis yang ditulis oleh orang lain atau lembaga lain, dan semua karya tulis orang lain

atau lembaga lain yang dirujuk dalam laporan kerja magang ini telah disebutkan

sumber kutipannya serta dicantumkan di Daftar Pustaka.

Jika di kemudian hari terbukti ditemukan kecurangan / penyimpangan, baik dalam

pelaksanaan kerja magang maupun dalam mahasiswaan laporan kerja magang, saya

bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah

kerja magang yang telah saya tempuh dan status kesarjanaan strata satu yang sudah

diterima akan dicabut.

Tangerang, 8 November 2020

Willsen

iii

HALAMAN PENGESAHAN

Laporan Kerja Magang dengan Judul

“Pembuatan User Interface pada Admin Field Service dan Pengujian Mobile Apps

Lautan Luas dengan Metode Blackbox”

Oleh

Willsen

Telah diujikan pada hari Jumat, 8 Januari 2021,

Pukul 15.00 s.d. 16.00 dan dinyatakan lulus

dengan susunan penguji sebagai berikut.

Menyetujui

Disahkan oleh

Ketua Program Studi Sistem Informasi – UMN

Ririn Ikana Desanti, S.Kom., M.Kom.

Dosen Pembimbing Penguji

Melissa Indah Fianty, S.Kom., M.MSI. Suryasari, S.Kom., M.T.

iv

Pembuatan User Interface pada Admin Field Service dan

Pengujian Mobile Apps Lautan Luas dengan Metode

Blackbox

ABSTRAK Oleh: Willsen

Mobile apps field service merupakan sebuah aplikasi yang dapat membantu

pekerja dalam mengelola kegiatan kerja, penjadwalan pekerjaan dan lokasi untuk

melakukan pekerjaan dimana kegiatan yang dikelola sistem ini langsung terhubung

pada pengelolaan inventori, billing dan accounting perusahaan.

IT analyst pada PT. Fiture Teknologi Inovasi saat ini sedang melakukan

perancangan aplikasi field service management dan mobile apps field service untuk

itu sebelum masuk ke dalam tahap development perlu dilakukannya analisa yaitu

membuat dokumen flowchart, ERD dan use case, lalu menurut dokumen ini, dapat

dibuatnya perancangan user interface. Dalam perancangan user interface, tool yang

digunakan menggunakan software axure, setelah proses perancangan user interface

selesai, dokumen pendukung dan rancangan user interface diserahkan kepada tim

programmer untuk masuk ke dalam tahap development. Pada saat tahap

development tim quality control juga harus menguji aplikasi dengan metode

blackbox atau manual untuk memastikan bahwa aplikasi yang dibuat sudah sesuai

dengan modul-modul yang telah dibuat dan terhindar dari bug dan error.

Dengan demikian, setelah keseluruhan kegiatan tersebut telah dilaksanakan,

diharapkan aplikasi yang telah dikembangkan dapat digunakan tanpa error atau

masalah baik dari sisi UI/UX maupun fungsi dari fitur-fitur yang ada sesuai dengan

harapan yang diinginkan.

Kata kunci: Blackbox, IT Analyst dan Quality Control, PT. Fiture Teknologi

Inovasi, UI/UX.

v

User Interface creation in Admin Field Service and Testing

Mobile Apps Lautan Luas with Blackbox Method

ABSTRACT By: Willsen

Mobile Apps Field Service is an application that can assist workers in

managing work activities, job scheduling and location to do work, where the

activities managed by this system are directly connected to the management of

inventory, billing and accounting of the company.

IT Analyst at PT. Fiture Teknologi Inovasi is currently designing Field

Service Management and Mobile Apps Field Service applications for that before

entering the development stage, the analysis needs to be done, namely creating

Flowchart, ERD and Use Case documents, and according to this document, the

user interface design can be created. In the design of the User Interface, a tool

using Axure software, after the User Interface design process is completed,

supporting documents and user interface designs are submitted to the team of

programmers to enter the development stage. At the development stage the Quality

Control team must also test the application by blackbox or manual method to ensure

that the application created is in accordance with the modules that have been

created and avoided bugs and errors.

Thus, after the whole activity has been implemented, it is expected that the

application that has been developed can be used without errors or problems either

in terms of UI/UX or the functionality of the existing features in accordance with

the desired expectations.

Keyword: Blackbox, IT Analyst and Quality Control, PT. Fiture Teknologi Inovasi,

UI/UX.

vi

KATA PENGANTAR

Puji dan syukur kepada Tuhan Yang Maha Esa atas berkat yang telah diberikan

kepada mahasiswa sehingga laporan kerja magang yang berjudul “Analisa

Perancangan Sistem PT Fiture Teknologi Inovasi Menggunakan” dapat selesai tepat

pada waktunya.

Dengan berakhirnya mahasiswaan laporan kerja magang ini, mahasiswa ingin

mengucapkan terima kasih kepada PT. Fiture Teknologi Inovasi yang telah

memberi kesempatan bagi mahasiswa untuk dapat melaksanakan kerja magang di

divisi “IT Analyst”.

Selain itu, mahasiswa juga ingin mengucapkan terima kasih kepada:

1. Ibu Ririn Ikana Desanti S.Kom., M.Kom. selaku Ketua Program Studi

Sistem Informasi atas dukungan selama proses pengerjaan laporan magang

hingga selesai,

2. Ibu Melissa Indah Fianty, S.Kom., M.MSI. yang telah memberikan

bimbingan dan saran kepada mahasiswa selama proses pengerjaan laporan

magang hingga selesai,

3. Bapak Zainal Arifin selaku Direktur Perusahaan yang telah memberikan

kesempatan dan membantu mahasiswa selama melaksanakan kerja magang,

4. Ibu Wike Hestiwinrum selaku pembimbing lapangan yang telah membantu

mahasiswa selama melaksanakan kerja magang,

5. Rekan-rekan kerja di tempat magang yang telah bekerja sama dan

membantu mahasiswa sewaktu ada kesulitan di tempat magang.

vii

Terima kasih juga dihaturkan kepada keluarga dan teman-teman yang selalu

mendukung hingga terealisasinya laporan kerja magang ini.

Akhir kata, diharapkan dengan adanya laporan kerja magang ini pembaca dapat

mendapatkan informasi yang bermanfaat baik dari bidang ilmu pengetahuan

teknologi maupun teknik menulis laporan yang baik dan benar.

Tangerang, 8 November 2020

Willsen

viii

DAFTAR ISI

PERNYATAAN ..................................................................................................... ii

HALAMAN PENGESAHAN .............................................................................. iii

ABSTRAK ............................................................................................................ iv

ABSTRACT ............................................................................................................ v

KATA PENGANTAR .......................................................................................... vi

DAFTAR ISI ....................................................................................................... viii

DAFTAR GAMBAR ............................................................................................. x

DAFTAR TABEL ............................................................................................... xii

BAB I PENDAHULUAN ..................................................................................... 1

1.1 Latar Belakang ......................................................................................... 1

1.2 Maksud dan Tujuan Pelaksanaan Magang ............................................... 3

1.3 Waktu, Lokasi dan Prosedur Kerja Magang............................................. 4

1.3.1 Waktu dan Lokasi Pelaksanaan Magang............................................. 4

1.3.2 Prosedur Pelaksanaan Kerja Magang .................................................. 4

BAB II GAMBARAN PERUSAHAAN .............................................................. 6

2.1 Gambaran Umum Perusahaan .................................................................. 6

2.2 Visi dan Misi Perusahaan ......................................................................... 7

2.3 Struktur Organisasi Perusahaan ................................................................ 8

BAB III PELAKSANAAN KERJA MAGANG .............................................. 10

3.1 Kedudukan dan Koordinasi .................................................................... 10

3.2 Tugas yang Dilakukan ............................................................................ 11

3.3 Timeline Kegiatan Magang .................................................................... 13

3.3.1 Membuat Flowchart FI-RP ............................................................... 13

3.3.2 Mempelajari Lebih dalam Soal Flowchart ....................................... 16

3.3.3 Memperbaiki Model dan Flowchart FI-RP, dan Membuat Flowchart

Project Baru (Lautan Luas) ............................................................... 17

3.3.4 Membuat, dan Memperbaiki Wireframe Lautan Luas ...................... 31

3.3.5 Membuat, Memperbaiki, Membantu Finishing Touch, dan Testing

Project Lautan Luas .......................................................................... 33

ix

3.4 Kendala dan Solusi ................................................................................. 53

3.4.1 Kendala yang Dihadapi ..................................................................... 53

3.4.2 Solusi yang Dilakukan ...................................................................... 53

BAB IV KESIMPULAN DAN SARAN............................................................. 54

4.1 Kesimpulan ............................................................................................. 54

4.2 Saran ....................................................................................................... 55

4.2.1 Saran untuk Mahasiswa..................................................................... 55

4.2.2 Saran untuk Perusahaan .................................................................... 55

4.2.3 Saran untuk Universitas .................................................................... 56

DAFTAR PUSTAKA .......................................................................................... 57

LAMPIRAN ......................................................................................................... 58

x

DAFTAR GAMBAR

Gambar 2.1 Logo Perusahaan ................................................................................. 6

Gambar 2.2 Struktur Organisasi PT Fiture Teknologi Inovasi ............................... 8

Gambar 2.3 Struktur Organisasi Proyek PT Fiture Teknologi Inovasi ................... 9

Gambar 3.1 Flowchart Tax ................................................................................... 13

Gambar 3.2 Flowchart Religion ............................................................................ 14

Gambar 3.3 Flowchart Account Bank ................................................................... 15

Gambar 3.4 Flowchart Bank ................................................................................. 16

Gambar 3.5 Tampilan Model Tax ......................................................................... 17

Gambar 3.6 Tampilan Pop Up Tax ....................................................................... 17

Gambar 3.7 Tampilan Model Religion.................................................................. 18

Gambar 3.8 Tampilan Pop Up Religion ................................................................ 18

Gambar 3.9 Tampilan Model Account Bank......................................................... 19

Gambar 3.10 Tampilan Pop Up Account Bank ..................................................... 19

Gambar 3.11 Tampilan Model Bank ..................................................................... 20

Gambar 3.12 Tampilan Pop Up Bank ................................................................... 20

Gambar 3.13 Flowchart Tax Fix ........................................................................... 21

Gambar 3.14 Flowchart Religion Fix ................................................................... 22

Gambar 3.15 Flowchart Account Bank Fix .......................................................... 23

Gambar 3.16 Flowchart Bank Fix ........................................................................ 24

Gambar 3.17 Flowchart Kategori ......................................................................... 25

Gambar 3.18 Flowchart Jenis ............................................................................... 26

Gambar 3.19 Flowchart Merek ............................................................................. 27

Gambar 3.20 Flowchart Unit ................................................................................ 28

Gambar 3.21 Flowchart Tipe ................................................................................ 29

Gambar 3.22 Flowchart Gudang .......................................................................... 30

Gambar 3.23 Wireframe Calendar dan Work Order Lautan Luas........................ 31

Gambar 3.24 Wireframe Calendar dan Work Order Lautan Luas Fix #1 ............ 32

Gambar 3.25 Wireframe Calendar dan Work Order Lautan Luas Fix #2 ............ 32

Gambar 3.26 Tampilan Aplikasi Axure RP 9 ....................................................... 33

xi

Gambar 3.27 Rancangan UI Calendar Field Service ............................................ 34

Gambar 3.28 Rancangan UI Kategori Admin Panel Field Service ....................... 35

Gambar 3.29 Rancangan UI Jenis Admin Panel Field Service ............................. 36

Gambar 3.30 Rancangan UI Unit Admin Panel Field Service.............................. 37

Gambar 3.31 Rancangan UI Merek Admin Panel Field Service .......................... 38

Gambar 3. 32 Rancangan UI Type Work Order Admin Panel Field Service ....... 39

Gambar 3.33 Rancangan UI Warehouse Admin Panel Field Service ................... 40

Gambar 3.34 Rancangan UI Work Order List Admin Panel Field Service .......... 41

Gambar 3.35 Rancangan UI Customer Admin Panel Field Service ..................... 42

Gambar 3.36 Rancangan UI Produk Admin Panel Field Service ......................... 43

Gambar 3.37 Tampilan Login Mobile Apps .......................................................... 45

Gambar 3.38 Tampilan Awal Mobile Apps........................................................... 46

Gambar 3.39 Bug Rating Tampilan Awal dengan Menu Profil ............................ 47

Gambar 3.40 Bug pada Menu Jadwal ................................................................... 48

Gambar 3.41 Bug Tampilan Harian Pada Menu Jadwal ....................................... 49

Gambar 3.42 Bug Detail pada Menu Riwayat Kunjungan .................................... 50

Gambar 3.43 Fitur Edit Profil dan Kebijakan Privasi pada Menu Profil .............. 51

Gambar 3.44 Padding pada Menu Forgot Password............................................ 52

xii

DAFTAR TABEL

Tabel 3.1 Timeline Program Kerja Magang .......................................................... 12