PENGEMBANGAN TAMPILAN ANTAR MUKA WEBSITE DAN INTEGRASI API “PETLOKA” PADA PT SATWA TEKNOLOGI
UTAMA
LAPORAN KERJA MAGANG
Alvin Yahya 00000015944
PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIANUSANTARA
TANGERANG 2020
PERNYATAAN
Dengan ini saya menyatakan bahwa telah melaksanakan praktek kerja magang pada:
Nama Perusahaan : PT Satwa Teknologi Utama
Divisi : Junior Front-End Developer
Alamat : JL. Scientia Square, Dalton Utara No.050
Gading Serpong, Tangerang, Banten 15332
Periode Magang : 10 Juni 2019 – 12 September 2019 Pembimbing Lapangan : James Roberto
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 penulisan 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, 20 Februari 2020
Alvin Yahya
PENGEMBANGAN TAMPILAN ANTAR MUKA WEBSITE DAN INTEGRASI API “PETLOKA” PADA PT SATWA TEKNOLOGI UTAMA
ABSTRAK Oleh: Alvin Yahya
Hewan peliharaan membuat setiap orang merasa dicintai. Setiap orang perlu merasa dicintai dan hewan peliharaan dapat menawarkan hal ini. PT Satwa Teknologi Utama merupakan sebuah perusahaan startup di bidang marketplace untuk mempertemukan vendor-vendor yang bergerak di bidang servis hewan peliharaan, baik pet grooming ataupun pet hotel, PT Satwa Teknologi Utama merasa perlu untuk mengembangkan website yang lebih bagus dikarenakan website yang sudah ada sekarang pada Petloka merupakan website yang sudah out-of-date. Dengan penggunaan framework Angular untuk mengembangkan website, pembuatan integrasi API dengan metode HttpClient dan juga bagaimana menggunakan Git. Website yang dikembangkan memiliki tampilan yang sesuai dengan mock-up, serta fungsionalitasnya yang sudah berjalan membuat perusahaan mengubah website out- of-date menjadi website yang baru dengan framework angular.
Kata kunci: Angular, Petloka, Internship, Git, API Integration, Pet Grooming, Pet Hotel, website.
v
PENGEMBANGAN TAMPILAN ANTAR MUKA WEBSITE DAN INTEGRASI API “PETLOKA” PADA PT SATWA TEKNOLOGI UTAMA
ABSTRACT By: Alvin Yahya
Our pets made us feel loved. Every person wants to be loved and pets can give us the feeling of being loved.PT Satwa Teknologi Utama is a startup company in marketplace to bring together vendors engaged in pet services, both pet or pet hotels, with potential customers who certainly have pets and want to use the services of these vendors.PT Satwa Teknologi Utama feels the need to create a brand new website because the currently used website is out-of-date. Using angular framework to develop website and HttpClient for API integration and the uses of Git. The website that is created had a similar view with the mock-up, and a working functionality made the industry to change the out-of-date website to the new website that use angular framework.
Keywords: Angular, Petloka, Internship, Git, API Integration, Pet Grooming, Pet Hotel, website.
KATA PENGANTAR
Puji dan syukur kepada Tuhan Yang Masa Kuasa sehingga laporan kerja magang yang berjudul “PENGEMBANGAN TAMPILAN ANTAR MUKA WEBSITE DAN INTEGRASI API “PETLOKA” PADA PT SATWA TEKNOLOGI
UTAMA” dapat selesai tepat pada waktunya.
Dengan berakhirnya proses kerja magang dan penulisan laporan kerja magang ini, penulis ingin mengucapkan terima kasih kepada PT Satwa Teknologi Utama yang telah memberi kesempatan bagi penulis untuk dapat melaksanakan kerja magang di divisi IT tepatnya pada bagian junior front-end developer.
Selain itu, penulis juga ingin mengucapkan terima kasih kepada:
1. Dr. Ninok Leksono selaku Rektor Universitas Multimedia Nusantara,
2. Friska Natalia, S.Kom, M.T., Ph.D. selaku Dekan Fakultas Teknik dan Informatika Universitas Multimedia Nusantara,
3. Nunik Afriliana, S.Kom., MMSI. selaku Kepala Program Studi Informatika Universitas Multimedia Nusantara,
4. Alexander Waworuntu, S.Kom., M.T.I. selaku dosen pembimbing yang telah mendukung dan juga membimbing selama proses kerja magang dan juga pengerjaan laporan kerja magang,
5. Orang tua dan adik saya yang telah memberikan dukungan dan doa,
vii
6. Alvin Lim, James Roberto, Andrew Jason Gunawan, dan Albert Sudartanto selaku founder dan co- founder dari PT Satwa Teknologi Utama yang telah memberikan
kesempatan kerja magang di PT Satwa Teknologi Utama,
7. Johanes Riandy selaku senior dari tim developer PT Satwa Teknologi Utama yang memberikan arahan jarak jauh,
8. Rekan-rekan kerja di tempat magang yang bekerja sama dan berkoordinasi dengan baik selama proses kerja magang,
9. Semua pihak yang ikut terlibat dalam mendukung dan membantu baik dalam proses kerja magang maupun pengerjaan laporang kerja magang
Semoga laporan kerja magang ini dapat memberikan informasi dan inspirasi bagi mahasiswa yang akan melakukan kerja magang. Kritik dan saran dapat disampaikan untuk memperbaiki laporan kerja magang yang belum sempurna ini.
Tangerang, 20 Februari 2020
Penulis
DAFTAR ISI
PERNYATAAN ... ii
HALAMAN PENGESAHAN ... iii
ABSTRAK ... iv
ABSTRACT ... v
KATA PENGANTAR ...vi
DAFTAR ISI ...viii
DAFTAR GAMBAR ... xi
DAFTAR TABEL ...xiii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Maksud dan Tujuan Pelaksanaan Kerja Magang ... 2
1.3 Waktu dan Prosedur Pelaksanaan Kerja Magang ... 7
BAB II GAMBARAN UMUM PERUSAHAAN ... 10
2.1 Tentang PT Satwa Teknologi Utama ... 10
2.2 Visi dan Misi Perusahaan... 11
2.3 Struktur Organisasi Perusahaan... 12
BAB III PELAKSANAAN KERJA MAGANG ... 13
3.1 Kedudukan dan Koordinasi ... 14
3.2 Tugas yang Dilakukan ... 15
3.3 Rancangan Aplikasi ... 16
3.4 Uraian Pelaksanaan Kerja Magang... 18
3.4.1 Instalasi Tools untuk Kerja Magang dan Mempelajari Library Angular (Minggu Pertama) ... 18
3.4.2 Mempelajari Struktur data Angular Petloka (Minggu Kedua) ... 22
3.4.3 Pembuatan Authorization Module untuk Login, Register, Logout, dan JSON Parse(Minggu Ketiga)... 23
3.4.4 Pembuatan Catalog Module (Minggu Keempat) ... 26
3.4.5 Pembuatan User Module(Minggu Kelima) ... 28
3.4.6 Pembuatan Booking Module (Minggu Keenam) ... 29
3.4.7 Pembaharuan UI dan dependencies (Minggu Ketujuh dan Minggu Kedelapan) ... 31
3.4.8 Production Build (Minggu Kesembilan) ... 32
3.4.9 Pembuatan Mobile Page dan Manage Product (Minggu Kesepuluh) . 33 3.4.10 Pemanggilan API Google Maps (Minggu Kesebelas) ... 34
3.4.11 Production Build II (Minggu Keduabelas) ... 36
3.4.12 Finalize Build untuk dokumentasi dan maintain website (Minggu Ketigabelas dan Minggu Keempatbelas) ... 37
ix
3.5 Runtime Aplikasi ... 38
3.6 Kendala yang Dihadapi ... 46
3.7 Solusi atas Kendala... 46
BAB IV SIMPULAN DAN SARAN ... 47
4.1 Kesimpulan ... 47
4.2 Saran ... 48
DAFTAR PUSTAKA ... 49
LAMPIRAN ... 50
DAFTAR GAMBAR
Gambar 2.1 Logo PT Satwa Teknologi Utama ... 10
Gambar 2.2 Struktur Organisasi PT Satwa Teknologi Utama ... 12
Gambar 3.1 Flowchart Petloka ... 17
Gambar 3.2 Flowchart Petloka ... 17
Gambar 3.3 Contoh isi dari card pada Trello ... 20
Gambar 3.4 Tampilan Fork ... 21
Gambar 3.5 Contoh penggunaan Authorization Module pada halaman login ... 24
Gambar 3.6 Contoh penggunaan Authorization Module pada halaman register ... 25
Gambar 3.7 Contoh password salah ... 26
Gambar 3.8 Contoh data duplikat… ... 26
Gambar 3.9 Contoh Catalog Module ... 27
Gambar 3.10 Contoh tampilan homepage ... 28
Gambar 3.11 Contoh tampilan user module ... 29
Gambar 3.12 Contoh tampilan booking form... 30
Gambar 3.13 Contoh tampilan fitur pembayaran ... 30
Gambar 3.14 Contoh tampilan live server ... 31
Gambar 3.15 Contoh tampilan homepage mobile ... 32
Gambar 3.16 Contoh tampilan catalog mobile ... 33
Gambar 3.17 Contoh tampilan product mobile ... 34
Gambar 3.18 Contoh tampilan order mobile ... 35
Gambar 3.19 Tampilan pemanggilan API Google Maps... 36
Gambar 3.20 Contoh tampilan Homepage live server ... 37
Gambar 3.21 Contoh tampilan login live server ... 38
Gambar 3.22 Contoh tampilan register live server ... 38
Gambar 3.23 Contoh tampilan view service live server... 39
Gambar 3.24 Contoh tampilan list product mock-up ... 39
Gambar 3.25 Contoh tampilan booking live server ... 40
Gambar 3.26 Contoh tampilan payment mobile mock-up ... 41
Gambar 3.27 Contoh tampilan my account mock-up ... 42
Gambar 3.28 Contoh tampilan order list mock-up... 43
Gambar 3.29 Contoh tampilan order details mock-up ... 45
xi
DAFTAR TABEL
Tabel 1.1 Tabel rincian kerja magang (mingguan) ... 5 Tabel 3.2 Variabel pada komponent authorization module ... 24 Tabel 3.3 Komponen pada pembuatan HttpClient website Petloka ... 25
