implementasi front end pada aplikasi alan finance …

LAPORAN

PRAKTIK KERJA LAPANGAN

IMPLEMENTASI FRONT END PADA APLIKASI ALAN

FINANCE BERBASIS MOBILE DI PT. ALAN MEDIATECH

INDONESIA

FAHMIA AMELIA

4817070044

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER

POLITEKNIK NEGERI JAKARTA

DEPOK

2020

i

HALAMAN PENGESAHAN

LAPORAN PRAKTIK KERJA LAPANGAN

ii

KATA PENGANTAR

Puji syukur saya panjatkan kepada Tuhan Yang Maha Esa, karena atas berkat dan

rahmat-Nya, penulis dapat menyelesaikan laporan Praktik Kerja Lapangan ini.

Penulisan laporan Praktik Kerja Lapangan ini dilakukan dalam rangka memenuhi

salah satu syarat untuk mencapai gelar Diploma Empat Politeknik. Penulis

menyadari bahwa, tanpa bantuan dan bimbingan dari berbagai pihak, sangatlah sulit

bagi penulis untuk menyelesaikan Laporan Praktik Kerja Lapangan ini. Oleh karena

itu, penulis mengucapkan terima kasih kepada:

1. Bapak Mauldy Laya, S.Kom., M.Kom. selaku Ketua Jurusan Teknik

Informatika dan Komputer.

2. Ibu Risna Sari, S.kom.,M.T.I, selaku Kepala Program Studi Teknik

Informatika.

3. Bapak Yoyok Sabar Waluyo, S.S., M.Hum., selaku dosen pembimbing yang

telah meluangkan waktu, pikiran, dan tenaga dalam mengarahkan dan

membimbing penulis dalam menyelesaikan Praktik Kerja Lapangan serta

pembuatan laporan.

4. Bapak Erwin Rahayu, selaku pembimbing Praktik Kerja Lapangan yang

telah banyak membimbing penulis selama melaksanakan Praktik Kerja

Lapangan.

5. PT. Alan Mediatech Indonesia yang telah memberikan kesempatan kepada

penulis untuk melaksanakan Praktik Kerja Lapangan.

6. Orang Tua dan keluarga serta sahabat penulis yang telah memberikan

bantuan dukungan moral dan material.

Akhir kata, penulis berharap Allah SWT membalas segala kebaikan semua pihak

yang telah terlibat dan membantu penulis. Harapan penulis semoga laporan ini

dapat memberikan manfaat dan dampak positif untuk kedepannya.

Bogor, 24 Desember 2020

Fahmia Amelia

iii

DAFTAR ISI

HALAMAN PENGESAHAN .................................................................................. i

KATA PENGANTAR ............................................................................................ ii

DAFTAR ISI .......................................................................................................... iii

DAFTAR TABEL ................................................................................................... v

DAFTAR GAMBAR ............................................................................................. vi

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

PENDAHULUAN................................................................................................... 1

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

1.2 Ruang Lingkup Praktik Kerja Lapangan .................................................. 2

1.3 Waktu dan Tempat Pelaksanaan ............................................................... 2

1.4 Tujuan dan Kegunaan ............................................................................... 3

1.4.1 Tujuan ............................................................................................... 3

1.4.2 Kegunaan........................................................................................... 3

BAB II ..................................................................................................................... 4

TINJAUAN PUSTAKA.......................................................................................... 4

2.1 Deskripsi Sistem Informasi Manajemen .................................................. 4

2.1.1 Sistem Informasi ............................................................................... 4

2.1.2 Manajemen ........................................................................................ 4

2.1.3 Sistem Informasi Manajemen ........................................................... 5

2.1.4 Sistem Informasi Keuangan .............................................................. 6

2.2 Mobile Based Application ........................................................................ 6

2.2.1 Aplikasi ............................................................................................. 6

2.2.2 Mobile Application ........................................................................... 7

2.2.3 Android ............................................................................................. 8

2.2.4 iOS..................................................................................................... 8

2.3 Front-End .................................................................................................. 8

2.4 Scrum ........................................................................................................ 9

2.5 Unified Modelling Language (UML) ..................................................... 10

2.6 Alat Bantu Pemrograman ....................................................................... 11

2.6.1 React Native .................................................................................... 11

2.6.2 API (Application Programming Interface)...................................... 12

iv

2.6.3 REST (Representational State Transfer) ......................................... 12

2.6.4 Visual Studio Code ......................................................................... 13

2.6.5 Trello ............................................................................................... 14

2.6.6 Bitbucket ......................................................................................... 16

BAB III.................................................................................................................. 18

HASIL PELAKSANAAN PKL ............................................................................ 18

3.1 Unit Kerja PKL....................................................................................... 18

3.2 Uraian Praktek Kerja Lapangan ............................................................. 19

3.3 Pembahasan Hasil PKL .......................................................................... 22

3.3.1 Product Backlog .............................................................................. 23

3.3.2 Sprint Planning ................................................................................ 23

3.3.3 Perancangan Diagram ..................................................................... 25

3.3.4 Implementasi ................................................................................... 35

3.4 Identifikasi kendala yang dihadapi ......................................................... 52

3.4.1 Kendala Pelaksanaan Tugas ............................................................ 52

3.4.2 Cara Mengatasi Kendala ................................................................. 52

BAB IV ................................................................................................................. 53

PENUTUP ............................................................................................................. 53

4.1 Kesimpulan ............................................................................................. 53

4.2 Saran ....................................................................................................... 53

DAFTAR PUSTAKA ........................................................................................... 55

Lampiran 1 Surat Keterangan PKL ....................................................................... 58

Lampiran 2 Logbook Perusahaan.......................................................................... 59

Lampiran 3 Logbook Dosen Pembimbing ............................................................ 65

Lampiran 4 User Requirement .............................................................................. 69

Lampiran 5 Foto Kegiatan PKL ............................................................................ 72

v

DAFTAR TABEL

Tabel 3.1 Product Backlog Untuk Aplikasi Alan Finance .................................... 23

Tabel 3.2 Sprint Planning ...................................................................................... 23

vi

DAFTAR GAMBAR

Gambar 2.1 Contoh Use Case Diagram ................................................................ 10

Gambar 2.2 Contoh Activity Diagram .................................................................. 11

Gambar 2.3 Aplikasi Visual Studio Code ............................................................. 14

Gambar 2.4 Aplikasi Trello................................................................................... 15

Gambar 2.5 Halaman Utama Bitbucket ................................................................ 16

Gambar 3.1 Struktur Organisasi Alan Creative .................................................... 18

Gambar 3.2 Use Case Diagram Alan Finance ...................................................... 26

Gambar 3.3 Activity Diagram Login .................................................................... 27

Gambar 3.4 Activity Diagram Register ................................................................ 28

Gambar 3.5 Activity Diagram Home .................................................................... 28

Gambar 3.6 Activity Diagram Buku Kas .............................................................. 29

Gambar 3.7 Activity Diagram Hutang Piutang ..................................................... 30

Gambar 3.8 Activity Diagram Surat Menyurat Invoice Letter ............................. 31

Gambar 3.9 Activity Diagram Surat Menyurat Quotation Letter ......................... 32

Gambar 3.10 Activity Diagram Surat Menyurat Offering Letter ......................... 33

Gambar 3.11 Activity Diagram Surat Menyurat Daftar Pelanggan ...................... 34

Gambar 3.12 Activity Diagram Surat Menyurat Daftar Pelanggan ...................... 35

Gambar 3.13 Splash Screen .................................................................................. 36

Gambar 3.14 Welcome Page ................................................................................. 36

Gambar 3.15 Login ............................................................................................... 37

Gambar 3.16 Register............................................................................................ 38

Gambar 3.17 Home ............................................................................................... 38

Gambar 3.18 History Pemasukan dan Pengeluaran .............................................. 39

Gambar 3.19 Menu Buku Kas ............................................................................... 39

Gambar 3.20 Form Tambah Buku Kas ................................................................. 40

Gambar 3.21 Buku Kas Detail .............................................................................. 41

Gambar 3.22 Catat Pemasukan ............................................................................. 41

Gambar 3.23 Catat Pengeluaran ............................................................................ 42

Gambar 3.24 Menu Hutang Piutang...................................................................... 42

Gambar 3.25 Form Catat Hutang .......................................................................... 43

Gambar 3.26 Form Catat Piutang.......................................................................... 43

Gambar 3.27 Menu Surat Menyurat...................................................................... 44

Gambar 3.28 Daftar Invoice Letter ....................................................................... 44

vii

Gambar 3.29 Form Buat Invoice Letter ................................................................ 45

Gambar 3.30 Form Edit Invoice Letter ................................................................. 45

Gambar 3.31 Daftar Quotation Letter ................................................................... 46

Gambar 3.32 Form Buat Quotation Letter ............................................................ 46

Gambar 3.33 Form Edit Quotation........................................................................ 47

Gambar 3.34 Daftar Offering Letter ..................................................................... 47

Gambar 3.35 Form Buat Offering Letter .............................................................. 48

Gambar 3.36 Form Edit Offering Letter ............................................................... 48

Gambar 3.37 Daftar Pelanggan ............................................................................. 49

Gambar 3.38 Form Tambah Pelanggan ................................................................ 49

Gambar 3.39 Menu Profil ..................................................................................... 50

Gambar 3.40 Change Profile ................................................................................. 50

Gambar 3.41 Change Password ............................................................................ 51

Gambar 3.42 FAQ, Privacy Policy, dan Terms & Condition ............................... 51

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pada era digital saat ini, teknologi informasi memiliki kekuatan untuk

mengembangkan industri dan mentransformasikan bagaimana bisnis dijalankan.

Penggunaan teknologi informasi dalam bisnis membuat sebuah perusahaan mampu

bertahan bersaing dengan perusahaan lainnya, serta memiliki tingkat mobilitas yang

tinggi. Dalam menunjang tingginya mobilitas sebuah perusahaan, teknologi

informasi saja tidak cukup. Dibutuhkan juga Sistem Informasi Manajemen (SIM).

Sistem Informasi Manajemen dikemukakan oleh Kadir (2003:56) yang

mengartikan Sistem Informasi Manajemen adalah : “Sistem yang digunakan untuk

menyajikan informasi untuk mendukung operasi, manajemen, dan pengambilan

keputusan dalam sebuah organisasi” (Nurdin, 2015). Perusahaan yang tidak

mengikuti perkembangan teknologi informasi pada dewasa ini tidak akan unggul

didalam persaingan. Banyak faktor yang memengaruhi perkembangan sebuah

perusahaan salah satunya dari sisi Sistem Informasi Keuangan.

Sistem Informasi Keuangan adalah sistem informasi yang memberikan informasi

mengenai masalah keuangan perusahaan kepada orang atau kelompok. (Peter,

2008). Sistem Informasi Keuangan merupakan bagian dari Sistem Informasi

Manajemen. Sistem informasi manajemen keuangan digunakan untuk membantu

proses pengolahan data keuangan yang disajikan dalam laporan ataupun grafik.

Implementasi dari sistem informasi manajemen keuangan yang digunakan disebuah

perusahaan dapat berbasis website ataupun aplikasi mobile.

Sebuah sistem informasi keuangan yang berupa website ataupun aplikasi mobile

harus diakses menggunakan internet. Berdasarkan survei yang dilakukan oleh

Asosiasi Penyelenggara Jasa Internet Indonesia (APJI) untuk 2019 hingga kuartal

kedua 2020 menunjukkan jumlah pengguna internet di Tanah Air kembali naik.

Survei menemukan jumlah pengguna internet mencapai 196,7 juta atau 73,7% dari

total populasi di Indonesia. Angka penetrasi itu naik 8,9% dibanding jumlah

2

Jurusan Teknik Informatika dan Komputer- Politeknik Negeri Jakarta

pengguna sebelumnya. Selain itu survei memperoleh 73,2% responden sudah tidak

menggunakan komputer pribadi (PC) untuk berselancar internet. Sementara itu,

responden yang menggunakan smartphone untuk berinternet sebanyak 95,4%

(Herman, 2020). Berdasarkan data tersebut dapat disimpulkan bahwa banyak

responden yang sudah beralih ke mobile baik itu smartphone ataupun tablet.

Aplikasi mobile atau sering juga disingkat dengan istilah Mobile Apps adalah

aplikasi dari sebuah perangkat lunak yang dalam pengoperasiannya dapat berjalan

diperangkat mobile (Smartphone, Tablet, iPod, dll), dan memiliki sistem operasi

yang mendukung perangkat lunak secara standalone. Sistem informasi manajemen

keuangan berbasis mobile apps cukup diminati para pelaku bisnis saat ini, karena

aplikasi mobile lebih user friendly dan pengaksesan jauh lebih cepat dibandingkan

website. Pengguna hanya perlu melakukan satu kali instalasi, sedangkan aplikasi

website perlu diakses melalui browser terlebih dahulu. Oleh karena itu, penulis

mengusulkan untuk membuat implementasi front-end aplikasi sistem informasi

manajemen keuangan bernama Alan Finance berbasis mobile.

1.2 Ruang Lingkup Praktik Kerja Lapangan

Adapun ruang lingkup praktik kerja lapangan yang diberikan kepada penulis adalah

sebagai berikut:

1. Membuat Front-End Mobile Alan Finance.

2. Menghubungkan Front-End Alan Finance ke database menggunakan REST

API.

1.3 Waktu dan Tempat Pelaksanaan

Pelaksanaan Praktik Kerja Lapangan yang dilakukan oleh penulis yaitu kurang

lebih selama 4 bulan. Adapun waktu dan tempat secara keseluruhan adalah sebagai

berikut :

a. Nama Perusahaan : PT. Alan Mediatech Indonesia

b. Waktu Pelaksanaan : 10 Agustus s.d. 27 November 2020

c. Alamat Perusahaan : Graha Mandiri, Jl. Tugu Raya, Tugu, Kec.

Cimanggis, Kota Depok, 11530, Jawa Barat

3


1.4 Tujuan dan Kegunaan

Pelaksanaan kegiatan Praktik Kerja Lapangan di PT. Alan Mediatech Indonesia

memiliki tujuan dan kegunaan sebagai berikut:

1.4.1 Tujuan

Tujuan dari Praktik Kerja Lapangan ini adalah untuk membuat aplikasi sistem

informasi manajemen keuangan bernama Alan Finance berbasis mobile.

1.4.2 Kegunaan

Adapun kegunaan dari kegiatan Praktik Kerja Lapangan ini sebagai berikut:

1. Aplikasi Alan Finance dapat menampilkan data saldo dan grafik berdasarkan

mingguan, bulanan, ataupun tahunan.

2. Aplikasi Alan Finance dapat menampilkan data pemasukan, pengeluaran,

hutang, dan piutang.

3. Aplikasi Alan Finance dapat menampilkan data Surat Menyurat seperti Invoice

Letter, Quotation Letter, dan Offering Letter.

4

BAB II

TINJAUAN PUSTAKA

2.1 Deskripsi Sistem Informasi Manajemen

2.1.1 Sistem Informasi

Sistem merupakan kesatuan komponen yang saling berhubungan untuk mencapai

tujuan tertentu (Fahmi & Sianturi, 2019). Sistem juga merupakan suatu sistem yang

memproses masukan (input) yang akan diolah oleh sistem sampai menghasilkan

keluaran (output) yang diinginkan (Nurdin, 2015). Sementara informasi adalah data

yang diolah menjadi bentuk yang bermanfaat dan menjadi berarti bagi

penerimanya. Kegunaan informasi adalah untuk mengurangi ketidakpastian suatu

proses pengambilan keputusan tentang suatu keadaan. Kualitas informasi sangat

dipengaruhi atau ditentukan oleh beberapa hal yaitu: relevan (relevancy), akurat

(accurancy), tepat waktu (time liness), ekonomis (economy), efisien (efficiency),

ketersediaan (availability), dapat dipercaya (reliability), konsisten (Nurdin, 2015).

Berdasarkan pendapat diatas dapat disimpulkan bahwa sistem informasi merupakan

sebuah sistem yang membantu memproses informasi dalam mengambil keputusan

menjadi lebih efektif dan efisien.

2.1.2 Manajemen

Manajemen sebagai sebuah proses yang khas, yang terdiri atas tindakan-tindakan

perencanaan, pengorganisasian, menggerakkan, dan pengawasan, yang dilakukan

untuk menentukan serta mencapai sasaran-sasaran yang telah ditetapkan melalui

pemanfaatan sumber daya manusia serta sumber-sumber lain untuk mencapai

tujuan tertentu. Manajemen adalah proses untuk mencapai tujuan-tujuan organisasi

dengan melakukan kegiatan dari empat fungsi utama yaitu merencanakan

(planning), mengorganisasikan (organizing), memimpin (leading), dan

mengendalikan (controlling). Dengan demikian, manajemen adalah suatu kegiatan

yang berkesinambungan. Untuk mencapai efisiensi serta efektivitas dalam

manajemen, maka segala tindakan dan kegiatan baru sebaiknya dilaksanakan

5

Jurusan Teknik Informatika dan Komputer - Politeknik Negeri Jakarta

dengan pertimbangan dan perhitungan yang rasional. Untuk itu diperlukan langkah-

langkah kegiatan dengan perumusannya secara jelas dan tegas, agar tujuan program

yang dimasudkan dapat berjalan dengan sebaik mungkin (Djafar & Mirfan, 2017).

Berdasarkan pendapat diatas dapat diambil kesimpulan bahwa manajemen

mengandung arti kegiatan optimalisasi sumber-sumber daya seperti sumber daya

manusia dan sumber daya pendukung lainnya, untuk mencapai tujuan yang telah

ditetapkan. Adapun langkah-langkahnya adalah perencanaan, pengorganisasian,

pelaksanaan, dan pengendalian.

Manajemen bagi setiap organisasi atau lembaga merupakan unsur pokok yang harus

dijalankan oleh setiap pimpinan organisasi atau lembaga tersebut. Para pimpinan

tersebut bertindak sebagai manajer sehingga harus menggunakan sumber daya

organisasi, keuangan, peralatan, dan informasi serta sumber daya manusia dalam

mencapai tujuan-tujuan yang telah ditetapkan sebelumnya (Djafar & Mirfan, 2017).

2.1.3 Sistem Informasi Manajemen

Sistem informasi manajemen dibentuk oleh tiga kata yaitu sistem, informasi, dan

manajemen. Sistem informasi manajemen merupakan suatu sistem yang dapat

membantu manajemen didalam pengumpulan data, pengolahan serta analisis

evaluasi data dan menyajikan ke dalam batas informasi yang bernilai dan akhirnya

sampai pada pengambilan keputusan dimana informasi ini berguna untuk

mendukung fungsi operasi manajemen (Yanto & Akfir, 2019). Sistem informasi

manajemen memiliki peranan yang sangat penting, terutama untuk sebuah

organisasi atau perusahaan yang cukup besar. Sistem informasi manajemen

seharusnya mampu memberikan informasi yang tepat dan akurat sesuai dengan

kebutuhan akan informasi masing-masing bagian berdasarkan tingkatan yang

diperbolehkan untuk diketahui oleh bagian tersebut (Peter, 2008).

Berdasarkan pengertian-pengertian diatas sistem informasi manajemen memiliki

beberapa karakteristik sebagai berikut (Ahmad & Munawir, 2018):

a. Beroperasi pada tugas-tugas yang terstruktur, dimana prosedur, pengambilan

keputusan, arus informasi, format laporan dsb, sudah terdefinisi.

6


b. Bertujuan untuk meningkatkan efisiensi dan mengurangi biaya.

c. Menyediakan laporan untuk keperluan pengambilan keputusan.

d. Mempermudah akses informasi untuk keperluan manajemen.

Berdasarkan pendapat-pendapat diatas dapat disimpulkan bahwa sistem informasi

manajemen merupakan suatu sistem yang membantu manajemen dalam

pengumpulan data / informasi yang tepat dan akurat sesuai dengan kebutuhan.

2.1.4 Sistem Informasi Keuangan

Sistem informasi keuangan adalah sistem informasi yang memberikan informasi

kepada orang atau kelompok baik didalam perusahaan maupun diluar perusahaan

mengenai masalah keuangan perusahaan. Informasi yang diberikan disajikan dalam

bentuk laporan khusus, laporan periodik, hasil dari simulasi matematika, saran dari

sistem pakar, dan komunikasi elektronik (Peter, 2008). Sistem informasi keuangan

merupakan bagian dari sistem informasi manajemen.

2.2 Mobile Based Application

2.2.1 Aplikasi

Aplikasi berasal dari bahasa Inggris application yang berarti penerapan, lamaran

ataupun penggunaan. Menurut kamus komputer eksekutif, aplikasi mempunyai arti

yaitu pemecahan masalah yang menggunakan salah satu teknik pemrosesan data

aplikasi yang biasanya berpacu pada sebuah komputasi yang diinginkan atau

diharapkan maupun pemrosesan data yang diharapkan (Yulianti, 2018). Adapun

pengertian Aplikasi menurut para ahli:

Menurut R. Eko. I & Djokopran aplikasi adalah proses atau prosedur aliran data

dalam infrastruktur teknologi informasi yang dapat dimanfaatkan oleh para

pengambil keputusan yang sesuai dengan jenjang dan kebutuhan (relevan) (Annisa,

Budi & Mauladi, 2017).

Berdasarkan pendapat para ahli dapat disimpulkan bahwa aplikasi merupakan

perangkat lunak yang bertujuan untuk memudahkan pengguna dalam pengolahan

data seperti pembuatan dokumen dan lain sebagainya.

7


2.2.2 Mobile Application

Mobile dapat juga diartikan sebuah benda yang berteknologi tinggi dan dapat

bergerak tanpa menggunakan kabel, contohnya seperti smartphone dan tablet

(Efendi, 2018). Semakin banyaknya perangkat lunak aplikasi untuk perangkat

mobile merupakan salah satu dampak dari pesatnya perkembangan teknologi

mobile computing. Mobile application tidak hanya mampu melakukan proses

layanan dasar seperti telepon dan pesan, tetapi sudah mampu melakukan tugas-

tugas yang rumit seperti melakukan pencarian lokasi, menampilkan dan memproses

informasi dalam peta digital (Ramadhan, 2015).

Terdapat tiga kategori dalam mobile application menurut Nripin & Bhat dalam

laporan skripsi Dayan Ramly (2015) yaitu mobile native application, mobile web

application, dan mobile hybrid application. Perbedaan kategori tersebut

berdasarkan bahasa pemrograman yang digunakan dan layanan yang dapat

didukung oleh aplikasi mobile dimana masing-masing memiliki kelebihan dan

kekurangan (Ramadhan, 2015). Aplikasi Alan Finance yang akan dikembangkan

merupakan mobile hybrid application.

Mobile hybrid application merupakan bagian dari aplikasi native dan bagian dari

mobile web app. Seperti aplikasi native, hybrid app dapat di upload ke toko

penyedia aplikasi dan pengguna harus menginstalnya terlebih dahulu. Seperti

mobile web app, hybrid app dibuat dengan menggunakan teknologi yang sama

dengan teknologi mobile web app yaitu HTML, CSS, dan Javascript yang di render

didalam browser (Ramadhan, 2015).

Berdasarkan pengertian para ahli dapat disimpulkan bahwa mobile application

merupakan perangkat lunak aplikasi untuk perangkat mobile dan dalam bahasa

pemrogramannya mobile application dibedakan menjadi 3 kategori yaitu mobile

native application, mobile web application, dan mobile hybrid application. Dalam

pembuatan aplikasi mobile perlu adanya platform sebagai dasar agar aplikasi

mobile tersebut dapat berjalan, platform yang populer saat ini adalah Android dan

iOS.

8


2.2.3 Android

Android merupakan platform yang berbasis Linux versi 2.6. Untuk

mengembangkan aplikasi pada platform Android dibutuhkan Android Software

Development Kit (SDK) yang menyediakan tools dan Application Programming

Interface (API) yang diperlukan. Sistem layanan seperti keamanan, manajemen

memori, manajemen proses dikendalikan oleh Linux (Holla & Katti, 2012).

Aplikasi android yang dikembangkan merupakan mobile hybrid application yang

ditulis dalam bahasa pemrograman Javascript menggunakan framework React

Native. Sesuai dengan kelebihan dari mobile hybrid application yang telah

dijelaskan oleh Nripin & Bhat dalam laporan skripsi Dayan Ramly (2015) maka

kode Javascript ditulis dan dikompilasi menggunakan bantuan Node JS yang

nantinya akan menghasilkan file apk. File apk tersebut merupakan aplikasi yang

dapat diinstal dalam perangkat mobile. Selain itu, untuk mengakses sisi server

menggunakan REST API Web Service (Ramadhan, 2015).

2.2.4 iOS

iOS atau yang dulu dikenal iPhone OS merupakan sistem operasi mobile yang

dikembangkan dan didistribusikan oleh Apple Inc. Sistem operasi ini pertama

diluncurkan tahun 2007 untuk iPhone dan iPod Touch, dan telah dikembangkan

untuk mendukung perangkat Apple lainnya seperti iPad dan Apple TV dan tidak

melisensikan iOS untuk diinstal di perangkat keras non-Apple. iOS diturunkan dari

OS X yang memiliki fondasi Darwin dan karena itu iOS merupakan sistem operasi

Unix. iOS adalah versi bergerak dari sistem operasi OS X yang dipakai di

komputer-komputer Apple (Yuliani & Sari, 2019).

2.3 Front-End

Front-end merupakan bagian depan program perangkat lunak atau situs web yang

digunakan pengguna untuk berinteraksi. Dari sudut pandang pengguna, front-end

identic dengan antarmuka pengguna. Dari sudut pandang pengembang atau

developer, front-end adalah desain antarmuka dan pemrograman yang membuat

fungsi antarmuka (Christensson, 2020). Front-end mencakup semua yang dialami

9


pengguna secara langsung seperti: warna dan gaya teks, gambar, grafik dan tabel,

tombol, warna, dan menu navigasi. Bahasa pemrograman yang digunakan untuk

pengembangan Front-end adalah HTML, CSS, dan Javascript. Struktur, desain,

perilaku, dan konten semua yang terlihat di layer browser saat situs web, aplikasi

web, atau aplikasi mobile dibuka, diimplementasikan oleh Front-end developer.

Front-end developer harus memastikan bahwa situsnya responsif yaitu muncul

dengan benar pada perangkat dengan semua ukuran, tidak ada bagian dari situs web

yang berperilaku tidak normal terlepas dari ukuran layar (Singhal, 2020).

2.4 Scrum

Scrum merupakan sebuah kerangka kerja untuk dapat mengatasi masalah kompleks

adaptif, dan disaat bersamaan juga menghantarkan produk dengan nilai setinggi

mungkin secara produktif dan kreatif (Scrumguides.org, 2017).

Scrum sering digunakan untuk pengembangan software namun Scrum juga bisa

digunakan untuk pengembangan produk kompleks. Scrum menggunakan

pendekatan dengan menggunakan data yang ditemukan dari proses inspeksi dan

adaptasi ini sebagai bahan pembelajaran untuk dapat mencari jalan keluar (Akbar,

2016).

Scrum memiliki perangkat yang merepresentasikan pekerjaan atau nilai bisnis.

Perangkat Scrum dirancang sedemikian rupa untuk memaksimalkan transparansi

informasi agar setiap orang paham mengenai perangkat tersebut (Scrumguides.org,

2017). Perangkat-perangkat scrum antara lain:

a. Product Backlog

Menurut Subekti dkk, product backlog merupakan proses pengumpulan kebutuhan

dengan cara membuat daftar kebutuhan (Saudah, Oktaviani & Bunyamin, 2019).

Product Backlog adalah daftar dari pekerjaan yang akan dilakukan. Product

Backlog bersifat dinamis dan dapat berubah seiring dengan kebutuhan user.

10


b. Sprint Backlog

Menurut Dafitri dan Elsera, sprint backlog adalah proses pemenuhan kebutuhan

sesuai dengan product backlog yang telah ditentukan (Saudah, Oktaviani &

Bunyamin, 2019). Sprint backlog menampilkan seluruh pekerjaan dari product

backlog yang telah dibuat.

2.5 Unified Modelling Language (UML)

Menurut Rosa dan Shalahuddin dalam Suhendar dan Sarifah (2017) UML adalah

salah satu standar bahasa visual yang digunakan untuk mengidentifikasi

requirement, membuat analisis & desain, serta menggambarkan arsitektur dalam

pemrograman berorientasi objek.

Berikut penjelasan mengenai diagram-diagram yang akan penulis gunakan dalam

menggambarkan bagaimana sistem berjalan sehingga dapat mengetahui bagaimana

alur dari implementasi front-end yang akan dibuat:

a. Use Case Diagram

Use case diagram merupakan pemodelan untuk menggambarkan

kelakuan/kebiasaan (behavior) dari sistem informasi yang akan dibuat. Use case

digunakan untuk mengetahui fungsi-fungsi yang ada di dalam sistem informasi dan

siapa-siapa yang berhak menggunakan fungsi-fungsi tersebut (Widarma & Kumala,

2017).

Gambar 2.1 Contoh Use Case Diagram

(Sumber : Lia Avita Sari, Yuli Adam Prasetyo, Budi Santosa, 2016)

11


a. Activity Diagram

Diagram aktivitas menggambarkan aliran kerja atau aktivitas dari sebuah sistem

atau proses bisnis pada perangkat lunak (Simatupang & Sianturi, 2019). Sedangkan

menurut Rosa dalam Yunahar Heriyanto (2018), Activity Diagram menggambarkan

workflow atau aktivitas dari sebuah sistem atau proses bisnis. Pada activity diagram

menggambarkan aktivitas sistem bukan apa yang dilakukan oleh aktor.

Gambar 2.2 Contoh Activity Diagram

(Sumber : Danu Setiawan, 2017)

2.6 Alat Bantu Pemrograman

2.6.1 React Native

React Native merupakan kerangka kerja javascript yang digunakan untuk

membangun aplikasi mobile Android maupun iOS. React Native ini memiliki dasar

dari React dan library javascript dan JSX, lalu React Native ini juga memaparkan

antarmuka javascript untuk platform API dimana pengembang dalam membangun

aplikasi ini dapat mengakses fitur-fitur seperti kamera, lokasi, dll yang ada pada

ponsel (Eisenman, 2018).

12


React Native adalah framework open source besutan facebook yang dibuat setelah

facebook sebelumnya membuat React.JS, React.JS sendiri merupakan sebuah

library dari facebook yang dapat digunakan untuk membangun antarmuka

pengguna (UI). Jadi, react native adalah framework open source untuk membuat

aplikasi multi-platform (android, ios, dan windows platform “dalam tahap

pengembangan”) dengan bahasa Javascript, sesuai dengan deskripsi di situs

resminya “Learn once, write anywhere” (Wiguna, 2018).

Aplikasi yang dibangun menggunakan Framework React Native hasilnya akan

sama seperti aplikasi mobile native yang dibuat menggunakan Objective-C atau

Java. React Native menggunakan blok bangunan User Interface dasar yang sama

seperti aplikasi Android dan iOS biasa. Sehingga kita hanya perlu memasang atau

menginstal blok-blok tersebut menggunakan Javascript.

2.6.2 API (Application Programming Interface)

Application Programming Interface atau API merupakan suatu dokumentasi yang

terdiri dari interface, fungsi, kelas, struktur dan sebagainya untuk membangun

sebuah perangkat lunak. Dengan adanya API ini, maka memudahkan programmer

untuk “membongkar” suatu software, kemudian dapat dikembangkan atau

diintegrasikan dengan perangkat lunak yang lain. API dapat dikatakan sebagai

penghubung suatu aplikasi dengan aplikasi lainnya yang memungkinkan

programmer menggunakan sistem function. Proses ini dikelola melalui sistem

operasi. Keunggulan dari API ini adalah memungkinkan suatu aplikasi dengan

aplikasi lainnya dapat saling terhubung dan berinteraksi (Ramadhani, 2015).

2.6.3 REST (Representational State Transfer)

Nama Representational State Transfer (REST) diciptakan oleh Roy Fielding dari

University of California. Ini adalah layanan web yang sangat sederhana dan ringan

dibandingkan dengan SOAP. Kinerja, skalabilitas, kesederhanaan, portabilitas, dan

kemampuan modifikasi adalah prinsip utama dibalik desain REST (Choirudin and

Adil, 2019).

13


REST adalah suatu arsitektur metode komunikasi yang sering diterapkan dalam

pengembangan layanan berbasis web. Arsitektur REST yang umumnya dijalankan

via HTTP (Hypertext Transfer Protocol), melibatkan proses pembacaan laman web

tertentu yang memuat sebuah file XML atau JSON. File inilah yang menguraikan

dan memuat konten yang hendak disajikan. Setelah melalui sebuah proses definisi

tertentu, konsumen akan bisa mengakses antarmuka aplikasi yang dimaksudkan

(Firdaus et al., 2019).

REST menggunakan kata benda dan kata kerja untuk keterbacaan. Sumber

diidentifikasi dalam permintaan. Representasi sumber daya yang dikirim ke klien

tergantung pada permintaan dan bagaimana server mengirim data (Indrawan & Adil

2018). Ada empat prinsip utama teknologi yang mendasari metode REST

(Indrawan and Adil, 2018), yaitu:

a. Resource identifier melalui Uniform Resource Identifier (URI), yaitu

sekumpulan sumber daya interaksi antar client diidentifikasi oleh REST Web

service.

b. Uniform interface, menggunakan operasi PUT, GET, POST, dan DELETE

untuk memanipulasi CRUD (Create, Read, Update, Delete).

c. Self-descriptive messages, disamping metadata dapat digunakan, sumber daya

informasi tidak terikat, juga berbagai format konten (HTML, XML, PDF,

JPEG, Plain Text dan lainnya) dapat diakses.

d. Stateful interactions, dapat berinteraksi dengan suatu sumber daya bersifat

stateless, dengan request messages tergantung jenis kontennya melalui

hyperlink.

2.6.4 Visual Studio Code

Visual Studio Code adalah kode editor sumber yang dikembangkan oleh Microsoft

untuk Windows, Linux, dan macOS. Ini termasuk dukungan untuk debugging, GIT

Control yang disematkan, penyorotan sintaks, penyelesaian kode cerdas, cuplikan,

dan kode refactoring. Hal ini juga dapat disesuaikan, sehingga pengguna dapat

mengubah tema editor, shortcut keyboard, dan preferensi. Visual Studio Code gratis

14


dan open-source, meskipun unduhan resmi berada dibawah lisensi proprietary

(Wastito, 2018).

Gambar 2.3 Aplikasi Visual Studio Code

Visual Studio Code telah dirancang untuk bekerja dengan alat-alat yang ada, dan

Microsoft menyediakan dokumentasi untuk membantu pengembang bersama,

dengan bantuan untuk bekerja dengan ASP.NET 5, Node.js, dan Microsoft naskah,

serta alat-alat yang dapat digunakan untuk membantu membangun dan mengelola

aplikasi Node.js. Visual Studio Code benar-benar sedang ditargetkan pada

pengembang Javascript yang ingin alat pengembangannya lengkap untuk scripting

server-side mereka dan yang mungkin ingin usaha dari Node.js untuk kerangka

berbasis NET. Visual Studio Code, adalah belum solid, lintas platform kode Editor

ringan, yang dapat digunakan oleh siapa saja untuk membangun aplikasi untuk Web

(Rosidah, 2018).

2.6.5 Trello

Trello adalah aplikasi berbasis Web untuk berkolaborasi antar tim untuk mengatur

proyek pekerjaan pada satu layar. Trello juga dapat dibilang sebagai to do list online

dengan fitur yang cukup lengkap dan user friendly. Dengan menggunakan trello

memudahkan tim untuk membedakan suatu pekerjaan yang menjadi prioritas

dengan memberikan label warna sebagai tandanya (Atlassian, 2018).

15


Gambar 2.4 Aplikasi Trello

Adapun fitur-fitur yang terdapat pada aplikasi trello, yaitu:

a. Board

Board atau papan menjadi dashboard pekerjaan yang sedang dikerjakan

bersama tim.

b. List

List ini berfungsi untuk melihat progress pekerjaan sudah sampai mana.

c. Card

Card merupakan isi dari list, jadi card ini detail tentang task-task dari pekerjaan

utama yang harus diselesaikan.

d. Label

Label merupakan fitur yang terdapat pada card, setiap card dapat diberikan

label berdasarkan warna. Nantinya setiap warna dipakai untuk membedakan

mana pekerjaan yang menjadi prioritas.

e. Add Member

Add member memungkinkan untuk menambahkan member atau user yang bisa

mengerjakan tugas tersebut, jadi hanya member yang berkepentingan yang

dapat melihat dan mengerjakan tugas tersebut.

f. Due Date

Due date atau disebut juga sebagai deadline. Setiap card dapat diatur sampai

kapan batas waktu tugas tersebut dikerjakan. Fitur ini digunakan sebagai

reminder.

g. Check List

16


Ketika dalam sebuah card terdapat pekerjaan yang mengharuskan untuk

dipecah-pecah menjadi beberapa bagian, maka dapat menggunakan fitur

checklist sebagai penanda pekerjaan mana saja yang sudah selesai dan belum

dikerjakan.

h. Attachment

Trello juga memungkinkan untuk attachment file pekerjaan dari komputer

langsung, Google Drive, Dropbox, dan OneDrive.

2.6.6 Bitbucket

Bitbucket adalah manajemen repositori Git yang dikembangkan khusus untuk tim

profesional. Hub pusat untuk menangani semua repositori git berkolaborasi pada

kode sumber dan memandu semua siklus pengembangan perangkat lunak.

Bitbucket merupakan bagian dari keluarga Atlassian dengan alat-alat seperti

Confluence, Jira, dan lainnya yang dibuat untuk mendukung tim teknis untuk

mengeksplorasi seluruh potensi. Penyebaran Bitbucket dibuat dalam tiga opsi

berbeda, yaitu: Bitbucket Cloud, Bitbucket Server, dan Bitbucket Data Center

(Atlassian, 2018).

Gambar 2.5 Halaman Utama Bitbucket

Bitbucket menyediakan beberapa fitur, yaitu:

a. Akses kontrol untuk membatasi akses ke source code.

b. Kontrol alur kerja untuk menerapkan proyek atau alur kerja tim.

c. Pull request atau tarik permintaan dengan komentar sebaris untuk kolaborasi

pada code review.

17


d. Jira integration untuk ketertelusuran pengembangan penuh.

e. Full Rest API untuk membuat fitur yang disesuaikan dengan alur kerja jika

belum tersedia dari Marketplace Atlassian.

18

BAB III

HASIL PELAKSANAAN PKL

3.1 Unit Kerja PKL

Praktek kerja lapangan dilaksanakan di Alan Creative dibawah naungan PT. Alan

Mediatech Indonesia. Alan Creative merupakan salah satu perusahaan yang

bergerak di bidang IT Consultant. Awal mula berdirinya Alan Creative yaitu dari

komunitas kampus di lingkup Universitas Paramadina yang beranggotakan tim inti

sebanyak 6 orang dan beroperasi pada 15 Mei 2015. Pada akhir tahun 2016, secara

resmi Alan melakukan merger dan mengakuisisi perusahaan agency bernama

BRANDKIT yang berpusat di Depok, Jawa Barat. Dengan begitu anggota tim yang

ada di Alan semakin bertambah dan membuka jasa baru, yaitu pengembangan

aplikasi berbasis Android & iOS.

Pada awal tahun 2017, Alan secara resmi menjadi Perseroan Terbatas (PT) dibawah

Kementrian Hukum dan HAM (Menkomham) dengan berbagai macam brand, jasa,

dan produk yang dihasilkan seperti AlanDesa, AlanHospital, AlanSchool,

AlanCamat, TemanLes, SmartGov, TemanPasar, dan lainnya. Hingga sampai saat

ini Alan Creative semakin berkembang dalam mengembangkan Website Apps,

Mobile Apps, Desain Grafis, animasi, video / film.

Gambar 3.1 Struktur Organisasi Alan Creative

19


Pada gambar 3.1 merupakan struktur organisasi Alan Creative. Pada pelaksanaan

Praktik Kerja Lapangan di Alan Creative, penulis ditempatkan di bidang Mobile

Developer.

3.2 Uraian Praktek Kerja Lapangan

Praktik Kerja Lapangan di Alan Creative dilakukan selama kurang lebih 4 bulan,

terhitung dari tanggal 10 Agustus 2020 sampai dengan 27 November 2020 secara

offline. Penulis memiliki tugas utama yaitu membuat implementasi front-end

Aplikasi Alan Finance menggunakan Framework React Native.

Berikut uraian kegiatan yang telah dilakukan selama melakukan kegiatan Praktik

Kerja Lapangan di Alan Creative.

a. 10 – 14 Agustus 2020

Pada minggu pertama, penulis beserta rekan Praktik Kerja Lapangan lainnya

mendapatkan arahan dari CEO mengenai ruang kerja dan melakukan perkenalan

dengan staf dari setiap divisi dan pembimbing industri yang akan membimbing

selama kegiatan Praktik Kerja Lapangan berlangsung. Setelah itu, penulis diberikan

waktu selama seminggu untuk mempelajari materi tentang React Native yang akan

digunakan sebagai penunjang dalam pengembangan aplikasi mobile.

b. 18 – 21 Agustus 2020

Pada minggu ini, penulis melakukan presentasi hasil pembelajaran selama

seminggu pertama mengenai React Native didepan CEO dan CTO. Setelah itu,

penulis diberikan latihan untuk membuat Bottom Navigator, Stack Navigation,

Halaman Form Login, Home, dan Profil. Selanjutnya, implementasi membuat

bottom navigator dan Halaman Form Login.

c. 24 – 28 Agustus 2020

Pada minggu ini, penulis melanjutkan latihan di minggu sebelumnya yaitu membuat

Stack Navigation, Halaman Home, dan Profil. Latihan ini sebagai salah satu tes

untuk penulis mendapatkan proyek.

20


d. 31 Agustus – 4 September 2020

Pada minggu ini, penulis diberikan tugas untuk mempelajari Source Code pada

proyek Kruuu Mobile. Setelah itu, penulis merapihkan halaman notification,

membuat fungsi upload foto pada halaman edit Profil Talent, dan melakukan GET

data untuk halaman Search Jobs, Talent, dan Service.

e. 7 – 11 September 2020

Pada minggu ini, penulis mulai mempelajari konsep Redux dan AsyncStorage pada

React Native untuk digunakan ketika GET dan POST data pada proyek Kruuu

Mobile.

f. 14 – 18 September 2020

Pada minggu ini, penulis melakukan implementasi hasil pembelajaran mengenai

konsep Redux dan AsyncStorage untuk POST data di Halaman Login proyek Kruuu

Mobile.

g. 21 – 24 September 2020

Pada minggu ini, penulis diberikan arahan tentang proyek baru yaitu membuat

implementasi Front-end aplikasi Alan Finance berbasis mobile. Setelah itu, penulis

melakukan instalasi proyek baru bernama Alan Finance menggunakan React

Native, mengumpulkan asset dari User Interface yang sudah dibuat, dan mulai

membuat tampilan Splash Screen. Welcome Page, dan Form Login.

h. 28 September – 2 Oktober 2020

Pada minggu ini, penulis sudah mulai mengerjakan fitur-fitur yang tersedia di Alan

Finance yaitu Home Screen dan Buku Kas. Pada halaman Home terdapat logo Alan

Finance, informasi total keseluruhan saldo, carousel saldo, pemasukan, dan

pengeluaran berdasarkan buku kas tertentu, history pemasukan dan pengeluaran.

Pada halaman Buku Kas terdapat CardView Buku Kas yang menunjukan informasi

saldo tiap buku kas. Ketika CardView dipilih maka akan menuju halaman Detail

Buku Kas, pada halaman Detail Buku Kas berisi informasi pemasukan dan

21


pengeluaran dari Buku Kas tersebut. Kemudian, setelah selesai penulis

mempresentasikan progress pekerjaan kepada CEO untuk dikoreksi.

i. 5 – 9 Oktober 2020

Pada minggu ini, penulis menambahkan Component pada halaman Buku Kas yaitu

Component List Item untuk informasi Pemasukan dan Pengeluaran. Kemudian,

penulis membuat halaman baru yaitu Hutang Piutang.

j. 12 – 16 Oktober 2020

Pada minggu ini, penulis memperbaiki hasil presentasi 2 minggu yang lalu pada

halaman Buku Kas yaitu shadow CardView Buku Kas, menambahkan date time

picker dan dropdown kategori pada Form Catat Pemasukan dan Catat Pengeluaran,

dropdown tahun untuk filter data pemasukan dan pengeluaran. Pada halaman Home

menambahkan dropdown saldo untuk filter data Buku Kas yang ditampilkan di

Home. Kemudian, kembali melanjutkan mengerjakan halaman Hutang Piutang

yaitu membuat list item Hutang dan Piutang, membuat tombol modal untuk Catat

Hutang dan Catat Piutang, membuat form untuk catat hutang dan piutang.

k. 19 – 23 Oktober 2020

Pada minggu ini, penulis sedikit memperbaiki halaman Home lagi yaitu

menambahkan grafik berdasarkan mingguan, bulanan, dan tahunan. Bottom

Navigator juga sedikit diperbaiki yaitu menghilangkan border atas. Karena satu

kendala, penulis dialihkan ke proyek baru lagi yaitu TemanAntar. Penulis

melakukan instalasi untuk proyek baru dan mulai pembuatan proyek dengan

membuat halaman Login dan Home. Pada halaman Login berisi logo TemanPasar

dan form login. Pada halaman Home penulis membuat bottom navigator untuk

mempersiapkan menu-menu yang tersedia pada TemanAntar.

l. 26 – 28 Oktober 2020

Pada minggu ini, penulis mulai mengerjakan isi dari halaman Home. Halaman

Home TemanAntar berisi tentang Carousel Pagination iklan, toggle status aktif

atau tidak aktif, button Notifikasi. Selanjutnya mengerjakan isi dari fitur Notifikasi.

22


Fitur ini berisi tentang informasi list item pesanan. Setiap list item pesanan berisi

tentang informasi detail belanja.

m. 2 – 6 November 2020

Pada minggu ini, penulis mengerjakan halaman Dompet dan Pesanan TemanAntar.

Pada halaman Dompet berisi mengenai informasi saldo e-money, list aktifitas

terakhir, CardView untuk transfer ke rekening bank. Pada halaman Pesanan berisi

mengenai list item pesanan yang berlangsung dan pesanan yang sudah selesai.

Kemudian, mempresentasikan progress pekerjaan bersama tim didepan CEO.

Setelah itu, mulai kembali mengerjakan projek Alan Finance, yaitu mengatur

tampilan agar responsive di semua ukuran smartphone.

n. 9 – 13 November 2020

Pada minggu ini, penulis mengerjakan halaman Detail Pesanan pada proyek

TemanAntar yaitu membuat Step Indikator untuk Tracking Pesanan. Setelah itu,

mengerjakan proyek Alan Finance kembali untuk menyeting action, reducer, dan

store pada Redux untuk mengaktifkan fungsi halaman Login.

o. 16 – 20 November 2020

Pada minggu ini, penulis membuat halaman Profil pada proyek Alan Finance.

Halaman Profil berisi menu update profil, change password, FAQ, Term &

Condition, dan Privacy Policy.

p. 23 – 27 November 2020

Pada minggu ini, penulis menyelesaikan proyek Alan Finance untuk membuat

halaman Surat Menyurat dan menghubungkan front-end ke database untuk GET

dan POST data menggunakan REST API. Halaman Surat Menyurat berisi data

Invoice, Quotation, Offering Letter, dan Daftar Pelanggan.

3.3 Pembahasan Hasil PKL

Hasil dari Praktik Kerja Lapangan yang dilakukan selama kurang lebih 4 bulan di

PT. Alan Mediatech Indonesia yaitu implementasi front-end pada aplikasi Alan

23


Finance berbasis Mobile yang bertujuan untuk memudahkan sistem informasi

manajemen keuangan di PT. Alan Mediatech Indonesia. Pembahasan hasil Praktik

Kerja Lapangan ini akan difokuskan pada implementasi front-end pada aplikasi

Alan Finance menggunakan Framework React Native. Berikut pembahasan hasil

Praktik Kerja Lapangan.

3.3.1 Product Backlog

Product Backlog (daftar yang harus dikerjakan) pada implementasi front-end

aplikasi Alan Finance adalah sebagai berikut:

Tabel 3.1 Product Backlog Untuk Aplikasi Alan Finance

No. Backlog Item

1. Splash Screen

2. Welcome Page

3. Login

4. Register

5. Home

6. Buku Kas

7. Hutang Piutang

8. Surat Menyurat

9. Profil

3.3.2 Sprint Planning

Tabel 3.2 Sprint Planning

Bagian Deskripsi

Splash Screen Dapat menampilkan logo aplikasi selama dua

detik

Welcome Page Dapat menampilkan ilustrasi

Dapat menampilkan tombol untuk ke halaman

Login

Login Menerapkan autentikasi email dan password

24


Register Dapat menyimpan data identitas nama, email,

password ke dalam database

Home Dapat menampilkan informasi saldo,

pemasukan, pengeluaran

Dapat menampilkan grafik mingguan,

bulanan, dan tahunan

Buku Kas Dapat menampilkan daftar buku kas

Dapat melakukan tambah buku kas

Dapat menampilkan detail buku kas

Dapat melakukan tambah dan hapus pada

kategori pemasukan dan pengeluaran

Dapat menampilkan daftar pemasukan dan

pengeluaran

Dapat menambah catatan pemasukan dan

pengeluaran

Hutang Piutang Dapat menampilkan informasi total hutang

dan piutang

Dapat menampilkan daftar hutang dan

piutang

Dapat menambah catatan hutang dan piutang

Surat Menyurat Dapat memilih surat

Dapat menampilkan daftar invoice letter,

quotation letter, offering letter, dan daftar

pelanggan

Dapat menambah invoice letter, quotation

letter, offering letter, dan daftar pelanggan

Dapat mengubah data invoice letter,


pelanggan

25


Dapat mengekspor data invoice letter,

quotation letter, dan offering letter ke dalam

bentuk PDF

Dapat menghapus data invoice letter,


pelanggan

Profil Dapat menampilkan data profil secara

lengkap

Dapat mengubah data profil

Dapat mengubah password

Dapat melihat FAQ, Privacy Policy, Terms &

Condition

3.3.3 Perancangan Diagram

a. Use Case Diagram

Pada gambar 3.2 menjelaskan tentang use case dari aplikasi Alan Finance

berdasarkan pengumpulan requirement yang sudah dilakukan. Dalam pembuatan

use case diagram penulis menggunakan aplikasi online berbasis website yaitu

Draw.io. Diagram use case pada gambar 3.2 menunjukkan bahwa kegiatan yang

dapat dilakukan oleh user adalah sebagai berikut:

a. Melihat tampilan welcome page sebelum menuju ke halaman login.

b. Seorang user yang belum memiliki akun untuk melakukan proses login dapat

melakukan registrasi akun terlebih dahulu.

c. Semua aktifitas yang dapat dilakukan harus melalui proses login terlebih

dahulu.

Berikut ini merupakan aktifitas yang dapat dilakukan setelah user melakukan

proses login:

a. Melihat informasi total saldo, pemasukan, dan pengeluaran

b. Melihat informasi grafik mingguan, bulanan, dan tahunan

c. Melihat list history pemasukan dan pengeluaran

26


d. Mengelola buku kas seperti menambah buku kas baru

e. Mengelola kategori pemasukan dan pengeluaran seperti menambah kategori

baru dan menghapus kategori yang ditambahkan

f. Mengelola data pemasukan dan pengeluaran seperti menambah, edit, hapus

data pemasukan dan pengeluaran

g. Mengelola data hutang dan piutang seperti menambah, edit, hapus data hutang

dan piutang

h. Mengelola surat menyurat seperti menambah, edit, hapus, ekspor surat ke

dalam bentuk PDF

i. Mengelola profil seperti update profil, ubah password, melihat FAQ, Privacy

Policy, dan Term & Condition

Gambar 3.2 Use Case Diagram Alan Finance

b. Activity Diagram

Activity Diagram menggambarkan workflow (aliran kerja) dari sebuah sistem atau

menu yang terdapat pada aplikasi. Hal ini perlu diperhatikan bahwa activity

27


diagram menggambarkan sistem bukan apa yang dilakukan aktor, jadi aktivitas

yang dapat dilakukan oleh sistem adalah sebagai berikut:

1. Activity Diagram Login

Activity Diagram pada gambar 3.3 dibawah menunjukkan bagaimana alur aktivitas

Login. Pertama, user membuka aplikasi kemudian akan muncul halaman Welcome

Page, pada halaman ini terdapat tombol bertuliskan ”Login or Register” untuk

mengarahkan ke halaman Login. Setelah masuk ke halaman Login, user harus

memasukkan email dan password yang sudah terdaftar. Sistem akan melakukan

autentikasi email dan password. Apabila autentikasi email dan password berhasil

maka sistem akan memvalidasi data yang dikirim oleh user dan user akan masuk

ke halaman utama. Namun apabila email dan password dikatakan tidak valid, maka

sistem akan memberikan respon “Login Gagal” dan tetap berada di halaman Login.

Gambar 3.3 Activity Diagram Login

2. Activity Diagram Register

Pada gambar 3.4 menjelaskan bagaimana alur aktivitas Register. Pertama, user

membuka aplikasi kemudian akan muncul halaman Welcome Page, pada halaman

ini terdapat tombol bertuliskan ”Login or Register”. User akan diarahkan ke

halaman Login terlebih dahulu. Setelah itu, pada halaman Login akan tersedia

28


tombol yang bertuliskan ”Free Register” untuk mengarahkan user ke halaman

Register. Setelah masuk ke halaman Register, user harus mengisi data berupa nama,

email, dan password. Format karakter data yang dimasukkan akan divalidasi oleh

sistem. Apabila format karakter data telah sesuai maka data akan tersimpan ke

dalam database. Namun, apabila format karakter data salah maka sistem akan

memberikan respon “Register Gagal” dan tetap berada di halaman Register.

Gambar 3.4 Activity Diagram Register

3. Activity Diagram Home

Pada gambar 3.5 menjelaskan bagaimana alur aktivitas user untuk masuk ke

halaman utama atau Home, user hanya perlu melakukan register akun dan login

menggunakan akun yang telah di daftarkan.

Gambar 3.5 Activity Diagram Home

29


4. Activity Diagram Buku Kas

Sama seperti mengakses halaman Home pengguna atau user harus sudah memiliki

akun terlebih dahulu jika ingin masuk ke halaman Buku Kas dan mengelola data

Buku Kas. Aktivitas yang dapat dilakukan oleh user pada halaman Buku Kas adalah

membuat buku kas, melihat daftar buku kas, detail buku kas, serta menambah data

pencatatan pemasukan dan pengeluaran di setiap buku kas. Pada gambar 3.6

dibawah menjelaskan bagaimana alur aktivitasnya.

Gambar 3.6 Activity Diagram Buku Kas

30


5. Activity Diagram Hutang Piutang

Sama dengan mengakses halaman Buku Kas, seorang user yang ingin mengakses

halaman Hutang Piutang sudah harus memiliki akun untuk bisa masuk ke aplikasi.

Aktivitas yang dapat dilakukan user di halaman Hutang Piutang adalah melihat

daftar list hutang, piutang, total hutang, total piutang, dan menambah pencatatan

hutang maupun piutang. Pada gambar 3.7 dibawah ini menjelaskan bagaimana alur

aktivitas terjadi.

Gambar 3.7 Activity Diagram Hutang Piutang

6. Activity Diagram Surat Menyurat (Invoice Letter)

Dalam activity diagram surat menyurat terbagi menjadi empat, yaitu Invoice Letter,

Quotation Letter, Offering Letter, dan Daftar Pelanggan. Pada gambar 3.8

menjelaskan tentang bagaimana alur aktivitas surat menyurat invoice letter. Invoice

Letter merupakan sebuah surat permintaan atau surat penagihan untuk melakukan

31


pembayaran. Pada halaman Invoice Letter aktivitas yang dapat dilakukan oleh user

adalah melihat daftar invoice letter yang sudah dibuat, membuat invoice letter baru,

mengubah dan menghapus invoice letter yang pernah dibuat, selain itu file yang

dibuat dapat di ekspor ke dalam bentuk PDF. Pada gambar 3.8 dibawah ini

menjelaskan bagaimana alur aktivitas pada halaman surat menyurat invoice letter.

Gambar 3.8 Activity Diagram Surat Menyurat Invoice Letter

7. Activity Diagram Surat Menyurat (Quotation Letter)

Sama seperti surat menyurat kategori Invoice Letter, aktivitas yang dapat dilakukan

pada surat menyurat kategori Quotation Letter adalah melihat daftar quotation

letter yang sudah dibuat, membuat quotation letter baru, mengubah dan menghapus

quotation letter yang pernah dibuat, selain itu file yang dibuat dapat di ekspor ke

dalam bentuk PDF. Quotation Letter merupakan sebuah surat penawaran yang

32


diberikan kepada pelanggan setelah perusahaan melakukan permintaan. Pada

gambar 3.9 dibawah ini menjelaskan bagaimana alur aktivitas pada halaman surat

menyurat quotation letter.

Gambar 3.9 Activity Diagram Surat Menyurat Quotation Letter

8. Activity Diagram Surat Menyurat (Offering Letter)

Aktivitas yang dapat dilakukan pada halaman surat menyurat offering letter sama

dengan invoice letter dan quotation letter, yaitu melihat daftar offering letter yang

pernah dibuat, membuat offering letter baru, mengubah dan menghapus offering

letter yang pernah dibuat, serta mengekspor data ke dalam bentuk PDF. Offering

Letter merupakan sebuah surat keterangan untuk menyatakan bahwa seseorang

diterima kerja atau magang di perusahaan. Pada gambar

33


Gambar 3.10 Activity Diagram Surat Menyurat Offering Letter

9. Activity Diagram Surat Menyurat (Daftar Pelanggan)

Berbeda dengan Invoice Letter, Quotation Letter, dan Offering Letter aktivitas yang

dapat dilakukan pada halaman surat menyurat daftar pelanggan adalah melihat

daftar pelanggan yang telah dibuat, membuat daftar pelanggan baru, mengubah dan

menghapus daftar pelanggan yang pernah dibuat. Daftar pelanggan ini digunakan

pada pembuatan invoice letter dan quotation letter. Pada gambar 3.11 dibawah ini

menjelaskan bagaimana alur aktivitas halaman surat menyurat daftar pelanggan.

34


Gambar 3.11 Activity Diagram Surat Menyurat Daftar Pelanggan

10. Activity Diagram Profil

Pada gambar 3.12 dibawah ini menjelaskan bagaimana alur aktivitas user melihat

detail profil. User yang sudah terdaftar dan masuk ke dalam aplikasi dapat

mengelola data profilnya pada halaman profil. Aktivitas yang dapat dilakukan oleh

user adalah mengubah data profil, mengubah password, melihat FAQ, Terms &

Condition, dan Privacy Policy.

35


Gambar 3.12 Activity Diagram Surat Menyurat Daftar Pelanggan

3.3.4 Implementasi

Sub bab ini akan menjelaskan tentang hasil implementasi dari perancangan diagram

yang telah dibuat. Pada Kegiatan Praktik Kerja Lapangan di PT. Alan Mediatech

Indonesia, penulis bertanggung jawab untuk mengimplementasikan front-end pada

aplikasi Alan Finance menggunakan React Native. Hasil implementasi bertujuan

sebagai sebuah sistem informasi manajemen keuangan pada PT. Alan Mediatech

Indonesia. Adapun hasil implementasi front-end aplikasi Alan Finance sebagai

berikut:

1. Splash Screen

Splash screen merupakan tampilan yang muncul sementara ketika pertama kali

membuka sebuah aplikasi. Pada splash screen akan menampilkan logo dari Alan

Finance selama dua detik.

36


Gambar 3.13 Splash Screen

2. Welcome Page

Welcome Page merupakan halaman awal setelah Splash Screen sebelum masuk ke

halaman Login. Halaman ini hanya halaman pembuka atau introduction pada

aplikasi Alan Finance.

Gambar 3.14 Welcome Page

37


3. Login

Halaman Login merupakan halaman untuk autentikasi data menggunakan email dan

password user yang sebelumnya sudah terdaftar didalam database aplikasi Alan

Finance. Untuk dapat melakukan autentikasi data penulis melakukan konfigurasi

untuk mengintegrasikan front-end aplikasi mobile dengan REST API menggunakan

method POST. Setelah front-end aplikasi terhubung dengan database, data yang

dikirim oleh user akan diperiksa oleh sistem. Jika data berhasil tervalidasi maka

user akan diarahkan ke halaman utama. Namun, jika tidak akan mendapatkan

respon “Login Gagal” dan tetap berada di halaman Login.

Gambar 3.15 Login

4. Register

Halaman Register merupakan halaman yang berisi form input nama, email, dan

password untuk user yang ingin mendaftarkan akun pada aplikasi Alan Finance.

Halaman ini juga telah dikonfigurasi dengan REST API menggunakan method

POST. Sehingga data yang dikirim user akan diperiksa oleh sistem, jika data telah

tervalidasi maka data akan tersimpan ke dalam database. Namun jika tidak, user

akan mendapatkan respon ”Register Gagal” dan tetap berada di halaman register.

38


Gambar 3.16 Register

5. Home

Halaman Home merupakan halaman utama pada sebuah aplikasi, dalam halaman

ini berisi informasi total saldo dari seluruh buku kas yang dimiliki ataupun

berdasarkan buku kas tertentu, selain itu juga terdapat informasi pemasukan,

pengeluaran, grafik mingguan, bulanan, dan tahunan berdasarkan buku kas yang

dipilih. Pada halaman ini data yang dipakai masih menggunakan data dummy.

Gambar 3.17 Home

39


Pada halaman ini juga terdapat fitur history, dalam fitur ini akan menampilkan

informasi pemasukan dan pengeluaran yang baru dikelola.

Gambar 3.18 History Pemasukan dan Pengeluaran

6. Buku Kas

Pada halaman ini user dapat melihat informasi buku kas yang terdapat di database.

Untuk dapat menampilkan data buku kas yang terdapat di database penulis

melakukan konfigurasi untuk mengintegrasikan front-end aplikasi mobile dengan

REST API menggunakan method GET. Selain itu, user juga dapat mengelola buku

kas, yaitu menambah data buku kas baru.

Gambar 3.19 Menu Buku Kas

40


Untuk menambah data buku kas baru, user dapat memilih card yang bertuliskan

“Tambah Buku Kas” maka akan tampil modal seperti pada gambar 3.20 dibawah

ini yang berisi form input buku kas. Tombol simpan akan dalam keadaan disable

apabila form masih kosong. Tombol simpan akan otomatis aktif ketika form sudah

terisi dengan data yang benar. Untuk menyimpan data buku kas yang baru ke dalam

database, penulis telah menambahkan konfigurasi untuk mengintegrasikan front-

end aplikasi mobile dengan REST API menggunakan method POST. Setelah

terintegrasi dengan database maka data yang dikirim akan diperiksa oleh sistem.

Apabila data tervalidasi maka data akan tersimpan ke dalam database, jika tidak

akan mendapatkan respon ”Tambah Buku Kas Gagal”.

Gambar 3.20 Form Tambah Buku Kas

Pada gambar 3.21 menampilkan detail dari buku kas, gambar tersebut menampilkan

data pemasukan dan pengeluaran. Setiap buku kas memiliki data pemasukan dan

pengeluaran masing-masing, sehingga memudahkan user dalam mengelola data

keuangan. Data yang ditampilkan merupakan data nyata yang ada di database

karena pada halaman ini sudah terhubung dengan REST API menggunakan method

GET.

41


Gambar 3.21 Buku Kas Detail

Tombol “Catat Pemasukan” berfungsi untuk menampilkan form input menambah

data pemasukan.

Gambar 3.22 Catat Pemasukan

Tombol “Catat Pengeluaran” berfungsi untuk menampilkan form input menambah

data pengeluaran.

42


Gambar 3.23 Catat Pengeluaran

7. Hutang Piutang

Halaman Hutang Piutang menampilkan data total hutang, piutang, dan list data

hutang, piutang. Data yang ditampilkan merupakan data nyata yang ada di

database. Halaman ini sudah terhubung dengan REST API menggunakan method

GET.

Gambar 3.24 Menu Hutang Piutang

Untuk menampilkan form input catat hutang, user harus menekan tombol biru yang

bertuliskan “Catat Hutang”. User dapat memilih apakah catatan hutang ini tercatat

kedalam data pemasukan didalam buku kas atau tidak.

43


Gambar 3.25 Form Catat Hutang

Sama halnya dengan catat hutang, untuk menampilkan form piutang, user harus

menekan tombol pink yang bertuliskan ”Catat Piutang”. Catatan piutang pun dapat

dipilih apakah ingin tercatat ke dalam pengeluaran di buku kas atau tidak.

Gambar 3.26 Form Catat Piutang

8. Surat Menyurat

Pada halaman surat menyurat terdapat tiga kategori surat yaitu Invoice Letter,

Quotation Letter, dan Offering Letter. Daftar pelanggan merupakan list data

pelanggan yang datanya akan dipakai dalam invoice letter dan quotation letter.

44


Gambar 3.27 Menu Surat Menyurat

a. Invoice Letter

Gambar 3.28 menggambarkan list data invoice letter yang sudah dibuat. Data yang

ditampilkan masih data dummy. Setiap invoice letter dapat diubah, dihapus, dan

diekspor ke dalam bentuk PDF nantinya.

Gambar 3.28 Daftar Invoice Letter

45


Gambar 3.29 menampilkan form untuk tambah invoice letter. Dalam invoice letter

terdapat empat kategori standar pembayaran yaitu: Standar, Medium, High,

Excellent.

Gambar 3.29 Form Buat Invoice Letter

Gambar 3.30 menggambarkan form edit invoice letter, seharusnya pada form

tersebut akan menampilkan kembali data invoice yang akan diubah. Tetapi karena

pada halaman surat menyurat belum terhubung dengan REST API sehingga form

edit masih kosong sama seperti form tambah invoice.

Gambar 3.30 Form Edit Invoice Letter

46


b. Quotation Letter

Secara tampilan Quotation Letter dan Invoice Letter memang terlihat sama, yang

membedakan hanya dibagian form input saja. Karena quotation letter bertujuan

sebagai surat penawaran sementara invoice letter merupakan surat penagihan

pembayaran. Data yang ditampilkan masih berupa data dummy.

Gambar 3.31 Daftar Quotation Letter

Apabila pada form input invoice letter terdapat pilih standar pembayaran, pada

halaman quotation letter tidak terdapat pilihan tersebut.

Gambar 3.32 Form Buat Quotation Letter

47


Gambar 3.33 mengambarkan form input untuk edit quotation letter, form masih

belum berfungsi dengan sebagai mana mestinya. Karena halaman ini belum

terhubung dengan database.

Gambar 3.33 Form Edit Quotation

c. Offering Letter

Sama seperti dengan invoice letter dan quotation letter, data yang ditampilkan juga

masih berupa data dummy. Data ini juga nantinya dapat ditambah, edit, hapus, dan

ekspor ke dalam bentuk PDF.

Gambar 3.34 Daftar Offering Letter

48


Gambar 3.35 dibawah ini menampilkan form input untuk membuat offering letter

yang baru. Offering letter ini ditujukan untuk seseorang yang diterima sebagai

karyawan baru ataupun karyawan magang.

Gambar 3.35 Form Buat Offering Letter

Yang membedakan apakah surat nantinya akan ditujukan kepada karyawan baru

atau karyawan magang adalah pada form input tanggal selesai. Apabila surat

ditujukan kepada karyawan baru maka tidak ada form input tanggal selesai.

Gambar 3.36 Form Edit Offering Letter

49


d. Daftar Pelanggan

Berbeda dengan invoice letter, quotation letter, dan offering letter, pada halaman

daftar pelanggan tidak terdapat tombol ekspor karena ini hanya daftar pelanggan

yang datanya dipakai untuk membuat invoice letter ataupun quotation letter. Data

yang ditampilkan masih berupa data dummy, karena halaman ini masih belum

terhubung dengan database.

Gambar 3.37 Daftar Pelanggan

Gambar 3.38 menggambarkan bagaimana form input untuk tambah pelanggan.

Untuk form input edit pelanggan juga sama seperti dengan form input tambah

pelanggan.

Gambar 3.38 Form Tambah Pelanggan

50


9. Profil

Pada gambar 3.39 menunjukkan detail halaman profil, data yang ditampilkan masih

data dummy. Karena halaman ini juga belum terhubung dengan database.

Gambar 3.39 Menu Profil

Apabila user ingin mengubah data profil maka user dapat memilih “Change Profil”.

Pada halaman change profil berisi form input identitas diri, karena halaman ini

belum terhubung dengan database, maka form input change profil masih kosong.

Gambar 3.40 Change Profile

51


Selain dapat mengubah identitas pribadi, user juga dapat mengubah password.

Gambar 3.41 dibawah ini menggambarkan bagaimana form input change password

nantinya.

Gambar 3.41 Change Password

Selain itu, dalam halaman profil user juga dapat melihat tentang FAQ, Privacy

Policy, dan Terms & Condition. Tetapi pada bagian ini semuanya masih

menampilkan data dummy.

Gambar 3.42 FAQ, Privacy Policy, dan Terms & Condition

52


3.4 Identifikasi kendala yang dihadapi

Selama melaksanakan kegiatan Praktik Kerja Lapangan di PT. Alan Mediatech

Indonesia, penulis mendapati beberapa kendala dalam menyelesaikan pekerjaan

yang diberikan oleh pembimbing industry. Adapun kendala selama kegiatan Praktik

Kerja Lapangan dan cara mengatasi kendala tersebut sebagai berikut:

3.4.1 Kendala Pelaksanaan Tugas

Kendala-kendala yang dihadapi selama pelaksanaan kegiatan Praktik Kerja

Lapangan terbagi menjadi dua, yaitu berdasarkan kendala teknis dan non-teknis.

Kendala non-teknis yang penulis alami adalah kurang jelasnya desain UI/UX yang

diberikan oleh pihak perusahaan. Sementara kendala teknis yang dialami oleh

penulis adalah sebagai berikut:

a. Terdapat beberapa halaman yang tidak terdapat di UI/UX, seperti halaman

Surat Menyurat dan Profil.

b. Kurangnya pemahaman penulis tentang React Native.

3.4.2 Cara Mengatasi Kendala

Adapun cara mengatasi kendala-kendala yang dihadapi selama pelaksanaan

kegiatan Praktik Kerja Lapangan, antara lain:

a. Menanyakan dan meminta penjelasan secara detail tentang UI/UX yang akan

di implementasikan ke dalam bentuk front-end.

b. Melakukan diskusi dengan rekan kerja / Praktik Kerja Lapangan dan

pembimbing industri untuk diajarkan tentang React Native secara detail.

c. Lebih banyak explore atau latihan membuat proyek menggunakan React

Native.

53

BAB IV

PENUTUP

4.1 Kesimpulan

Berdasarkan dari hasil Praktik Kerja Lapangan (PKL) yang dilaksanakan di PT.

Alan Mediatech Indonesia, dapat disimpulkan bahwa:

a. Praktik Kerja Lapangan ini menghasilkan implementasi front-end pada

Aplikasi Alan Finance untuk sistem informasi manajemen keuangan berbasis

mobile.

b. Aplikasi Alan Finance yang dibuat dinilai telah sesuai dengan rancangan

UI/UX yang diberikan perusahaan.

c. Hasil uji coba implementasi front-end juga sudah user friendly, tetapi untuk

data yang ditampilkan pada beberapa halaman masih berupa data dummy.

4.2 Saran

Selama masa pengerjaan tugas front-end aplikasi Alan Finance, terdapat beberapa

hal yang dapat dimaksimalkan dari aplikasi ini. Penulis merangkum hal-hal yang

perlu dikembangkan pada aplikasi Alan Finance dalam beberapa uraian saran.

Adapun uraian saran tersebut adalah sebagai berikut:

a. Untuk jangka Panjang, halaman Buku Kas user sebaiknya dapat lebih bebas

lagi dalam pengelolaannya, seperti mengedit buku kas dan menghapus buku

kas yang telah dimilikinya.

b. Tidak hanya halaman Buku Kas yang perlu dikembangkan dalam

pengelolaannya, tetapi halaman Buku Kas Detail dan Hutang Piutang juga

perlu dikembangkan agar dapat mengedit data dan menghapus data yang telah

dimiliki.

c. Pada menu history pemasukan dan pengeluaran sebaiknya dapat dipilih dan di-

redirect ke halaman Buku Kas Detail untuk di kelola.

d. Bahasa yang digunakan pada aplikasi belum konsisten. Pada beberapa halaman

di aplikasi Alan Finance mobile di implementasikan dengan dua bahasa yaitu

54


Bahasa Inggris dan dominan Bahasa Indonesia. Sebaiknya aplikasi Alan

Finance lebih memperhatikan teknik penulisan.

55

DAFTAR PUSTAKA

Ahmad, L. and Munawir (2018) Sistem Informasi Manajemen. Pertama. Edited by

Syarifuddin.

Akbar, R. (2016) ‘Pengenalan Scrum’. Available at:

https://www.slideshare.net/rizalakbar/pengenalan-scrum.

Annisa, A. R., Budi, A. S. and Mauladi, K. F. (2017) ‘Aplikasi Penjualan Baju Batik

Di Kabupaten Lamongan Berbasis Android Invoice Sistem’, J-Tiies, 1(1), pp. 565–

572.

Atlassian (2018) Bitbucket: What is Bitbucket?, Atlassian Support. Available at:

https://confluence.atlassian.com/ (Accessed: 16 December 2020).

Choirudin, R. and Adil, A. (2019) ‘Implementasi Rest API dalam Membangun

Aplikasi Multiplatform untuk Usaha Jasa’, Jurnal MATRIK, 18, p. 285.

Christensson, P. (2020) Frontend Definition. Available at: https://techterms.com

(Accessed: 15 December 2020).

Djafar, I. and Mirfan (2017) ‘Perancangan Sistem Informasi Manajemen Keuangan

Berbasis Web Dalam Menunjang Kinerja Usaha Pada Usaha Dagang Toko Aman

di Parepare’, Prosiding Seminar Ilmiah Sistem Informasi dan Teknologi Informasi,

VI, p. 2.

Efendi, Y. (2018) ‘Rancangan Aplikasi Game Edukasi Berbasis

MobileMenggunakan App Inventor’, JurnalIntra-Tech, 2, p. 41.

Eisenman, B. (2018) Learning React Native. 2nd edn. California: O’Reilly Media,

Inc.

Fahmi, M. and Sianturi, F. A. (2019) ‘nalisa Algoritma Apriori Pada Pemesanan

Konsumen di Café The l . Co Coffe’, SAINTEK (Jurnal Sains dan Teknol, 1, pp.

52–57.

Firdaus, A. et al. (2019) ‘Rancang Bangun Sistem Informasi Perpustakaan

Menggunakan Web Service Pada Jurusan Teknik Komputer Polsri’, Jurnal

Informatika, 5(2407–1730), p. 83.

56


Herman (2020) APJII: Pengguna Internet di Indonesia Capai 196,7 Juta, 9

November. Available at: https://www.beritasatu.com/.

Holla, S. and Katti, M. M. (2012) ‘Android Based Mobile Application

Development And Its Security’, International Journal of Computer Trends and

Technology.

Indrawan, M. E. and Adil, A. (2018) ‘“Implementasi Restful Web Service One Chip

Multi-Client Untuk Mengoptimalkan Penjualan Pulsa All Operator’, J. Matrik, 15,

p. 11.

Nurdin, R. R. (2015) Analisis dan Perancangan Sistem Informasi Manajemen

Keuangan Rumah Sakit Berbasis Web. Universitas Islam Negeri Alauddin

Makassar.

Peter (2008) ‘Sistem Informasi Keuangan Terintegrasi dengan Dukungan Sistem

Pengambilan Keputusan (DSS) dalam Organisasi’, Jurnal Manajemen, Vol.8, p.

70.

Ramadhan, D. R. (2015) Pengembangan dan Analisis Kualitas Aplikasi Mobile

School MAPS (MooMaps) Berbasis Mobile Application untuk Pemetaan

Universitas di Yogyakarta. Universitas Negeri Yogyakarta.

Ramadhani, M. F. (2015) ‘Pembangunan Aplikasi Informasi, Pengaduan, Kritik,

dan Saran Seputar Kota Cimahi pada Platform Android’, Jurnal Ilmiah Komputer

dan Informatika (KOMPUTA).

Rosidah (2018) ‘Bab Ii Landasan Teori’, Journal of Chemical Information and

Modeling, 53(9), p. 11.

Saudah, S., Oktaviani, N. and Bunyamin, M. (2019) ‘Implementasi Metode Scrum

Dalam Pengembangan Test Engine Try Out Sertifikasi’, JISKA (Jurnal Informatika

Sunan Kalijaga), p. 70.

Scrumguides.org (2017) Panduan Scrum. Available at:

https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-

Indonesian.pdf.

57


Simatupang, J. and Sianturi, S. (2019) ‘Perancangan Sistem Informasi Pemesanan

Tiket Bus Pada PO. Handoyo Berbasis Online’, Jurnal Intra-Tech, pp. 11–25.

Singhal, P. (2020) Frontend vs Backend. Available at: www.geeksforgeeks.org

(Accessed: 15 December 2020).

Suhendar, A. and Sarifah (2017) ‘Healthcare Facility Area Mapping (HEFAM)

Sebagai Media Informasi Letak dan Fasilitas Kesehatan ( Study kasus Penerapan

Aplikasi Smart City Kota Serang Untuk Pelayanan Kesehatan)’, Seminar Nasional

Riset Terapan 2017.

Wastito, G. H. (2018) ‘Bab II Landasan Teori’, Journal of Chemical Information

and Modeling, 53(9), p. 21.

Widarma, A. and Kumala, H. (no date) ‘Perancangan Aplikasi Gaji Karyawan pada

PT. PP London Sumatra Indonesia Tbk. Gunung Malayu Estate - Kabupaten

Asahan’, Jurnal Teknologi Informasi, p. 166.

Wiguna, P. D. A. (2018) ‘Rancang Bangun Aplikasi Point of Sales Distro

Management System dengan Menggunakan Framework React Native’, Jurnal

Nasional Teknologi dan Sistem Informasi, 04, p. 150.

Yanto, E. and Akfir (2019) ‘Analisis Penerapan Sistem Informasi Manajemen

Keuangan Daerah (SIMDA KEUANGAN)’, Indonesian Journal Of Strategic

Management, 3(1), p. 48.

Yuliani, N. and Sari, Y. (2019) ‘Pelatihan Aplikasi Mobile IOS Menggunakan

Pemrograman Swift dalam Membentuk Kompetensi Diri Bagi Siswi SMKN 34

JAKARTA’, IKRAITH-ABDIMAS, 2, p. 164.

Yulianti (2018) Rancang Bangun Sistem Pengolaan Data Keuangan Perusahaan

CV. Rahmat Jaya Berbasis Android. UNIVERSITAS ISLAM NEGERI

ALAUDDIN MAKASSAR.

58

Lampiran 1 Surat Keterangan PKL

59

Lampiran 2 Logbook Perusahaan

65

Lampiran 3 Logbook Dosen Pembimbing

69

Lampiran 4 User Requirement

72

Lampiran 5 Foto Kegiatan PKL

implementasi front end pada aplikasi alan finance …

Documents