RANCANG BANGUN E-COMMERCE CUSTOM T-SHIRT BERBASIS …

i

RANCANG BANGUN E-COMMERCE CUSTOM T-SHIRT BERBASIS

WEBSITE DENGAN MENGGUNAKAN LIBRARY FABRICJS

TUGAS AKHIR

Disusun dalam rangka memenuhi salah satu persyaratan

Untuk menyelesaikan Program Strata-1 Departemen Teknik Informatika

Fakultas Teknik Universitas Hasanuddin

Makassar

Disusun Oleh :

SYARIF HIDAYATULLAH

D42114514

DEPARTEMEN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS HASANUDDIN

MAKASSAR

2020

ii

LEMBAR PENGESAHAN

iii

PERNYATAAN KEASLIAN

iv

ABSTRAK

Usaha dibidang jasa sablon baju kaos sedang banyak digeluti karena sangat

menguntungkan sebab baju kaos adalah salah satu dari kebutuhan primer dari setiap

orang. Namun selama ini usaha jasa sablon baju kaos maupun pelanggannya hanya

mengandalkan desainer grafis untuk merancang gambar yang ingin dicetak pada baju

kaos dan tentu saja hal tersebut kurang efisien. Rancang Bangun E-commerce Custom

T-shirt berbasis Website dengan menggunakan Library FabricJS merupakan salah satu

alternatif yang dirancang untuk membantu pelanggan dalam membuat desain pada baju

kaos tanpa harus mempunyai keahlian khusus dalam hal menggambar. Rancang

bangun sistem secara keseluruhan dibangun menggunakan teknologi Single Page

Application (SPA) yang merupakan aplikasi yang bekerja di dalam browser sehingga

tidak membutuhkan reload page saat digunakan. Dengan kata lain, pengguna tidak

akan berpindah halaman dengan melakukan request kepada server setiap kali terjadi

interaksi pada aplikasi. Salah satu framework JavaScript yang dapat menggunakan

konsep SPA adalah AngularJS. Untuk fitur kustomisasi yang dibuat memanfaatkan

library FabricJS. Sehingga AngularJS dan FabricJS akan saling diintegrasikan hingga

menjadi satu kesatuan sistem. Proses pengujian usability pada penelitian ini akan

menggunakan metode Cognitive Walkthrough yang bertujuan untuk menyelesaikan

skenario tugas agar menemukan masalah usability pada aspek effectiveness dan

efficiency. Sedangkan metode System Usability Scale (SUS) bertujuan untuk mengukur

aspek satisfaction pada pengguna sistem. Hasil penelitian menunjukkan bahwa proses

pengintegrasian AngularJS dan FabricJS berhasil dilakukan dengan baik sehingga

didapatkan hasil pengujian usability dengan nilai rata–rata setiap responden dapat

menyelesaikan skenario tugas sebanyak 79.5% dengan benar, nilai rata – rata error rate

yang didapatkan sebesar 0.07 atau 7%, setiap responden menyelesaikan 1 skenario

tugas dalam waktu 50 detik, serta tingkat kepuasan pengguna didapatkan nilai rata –

rata sebesar 74,68 yang berarti masuk ke dalam kategori grade scale “B” dengan

adjective ratings “Excellent” serta untuk acceptability ranges masuk ke dalam

kategori “Acceptable”.

Kata kunci: Single Page Application, AngularJS, FabricJS, Usability, Cognitive

Walkthrough, System Usability Scale.

v

KATA PENGANTAR

Segala puji dan syukur kami panjatkan ke hadirat Allah S.W.T Tuhan Yang

Maha Esa yang dengan limpahan rahmat dan hidayah-Nya sehingga tugas akhir yang

judul “Rancang Bangun E-Commerce Custom T-Shirt berbasis Website dengan

menggunakan Library FabricJS” ini dapat diselesaikan sebagai salah satu syarat

dalam menyelesaikan jenjang Strata-1 pada Departemen Teknik Informatika Fakultas

Teknik Universitas Hasanuddin.

Penulis menyadari bahwa tanpa bantuan dan bimbingan dari berbagai pihak,

mulai dari masa perkuliahan sampai dengan masa penyusunan tugas akhir, tidaklah

mudah untuk menyelesaikan tugas akhir ini. Oleh karena itu, pada kesempatan ini

penulis menyampaikan ucapan terima kasih sedalam-dalamnya kepada:

1) Tuhan Yang Maha Esa, Allah Subhanahu Wataala atas semua berkat, karunia serta

pertolongannya yang tiada batas, yang telah diberikan kepada penulis disetiap

langkah dalam pembuatan program hingga penulisan laporan skripsi ini.

2) Kedua Orang Tua tercinta, Ibu Ernawaty S.P dan Bapak Prof. Dr. Ir. La Ode M.

Aslan, M.Sc. yang senantiasa memberikan kekuatan, motivasi, bimbingan moral,

materi, kepercayaan serta kasih sayang yang tidak terbatas.

3) Kepada adik-adikku tercinta, Akiko Qathrunnada, Abid Athallah, Muhammad Afif

Nauval dan Khalid Khisyam Al-Fatih yang selalu menjadi alasan untuk tetap

semangat dalam menjalankan tanggung jawab penulis.

vi

4) Bapak Prof. Dr. Laode Asrul, M.P yang menjadi orangtua kedua yang telah banyak

memberi perhatian, nasihat serta dukungan kepada penulis selama ini.

5) Bapak Dr. Amil Ahmad Ilham, S.T., M.IT. selaku pembimbing I dan Bapak Dr.

Eng. Zulkifli Tahir, S.T., M.Sc. selaku pembimbing II yang selalu menyediakan

waktu, tenaga, pikiran dan perhatian yang luar biasa serta telah banyak

memberikan motivasi dan masukan yang bermanfaat hingga tugas akhir ini selesai.

6) Bapak Dr. Ir. Zahir Zainuddin, M.Sc. dan Ibu Anugrayani Bustamin, S.T., M.T.

selaku dosen penguji yang telah memberikan saran-saran sehingga skripsi ini

menjadi lebih baik.

7) Bapak Dr. Amil Ahmad Ilham, S.T., M.IT. selaku Ketua Departemen Teknik

Informatika Fakultas Teknik Universitas Hasanuddin atas bantuan dan

bimbingannya selama masa-masa indah di kampus, terlebih dengan kerjasamanya

selama saya menerima amanah di OKIF FT-UH.

8) Bapak A. Ais Prayogi Alimuddin, S.T., M.Eng. selaku dosen pembimbing

akademik yang telah memberikan bimbingan selama masa perkuliahan dan hingga

tugas akhir ini selesai.

9) Bapak Robert, Bapak Zainuddin dan Ibu Santi serta segenap staf Departemen

Teknik Informatika Fakultas Teknik Universitas Hasanuddin yang telah

membantu kelancaran penyelesaian tugas akhir.

10) Azizah Fauziah Misbahuddin SH S.T. yang selalu mengingatkan terhadap

kewajiban dan tanggungjawab penulis. Tak pernah letih membantu, setia

vii

menemani serta terus memberikan semangat kepada penulis selama sejak

penyusunan skripsi hingga detik ini.

11) Teman-teman Jurusan Elektro Angkatan 2014, terima kasih atas segala

dukungannya serta momen-momen indah yang terajut selama ini.

12) Para sahabat-sahabatku, Kanda M. Fariqussalam Malik, Abdillah Satari Rahim

S.T, Hermawan Safrin, Yakip, Rahmat Firman, Al Riefqy Dasmito S.T,

Jamaluddin, M. Zulfikri Al Qowy, Zulfiqar Islahqamat S.T, Muh. Nur Alamsyah,

Arya Jaka Putra, Filza Khairi Nur, Ulfah Rojiyyah, yang telah memberikan doa,

nasihat, dan semangat selama proses kuliah hingga penyelesaian tugas akhir ini.

13) Para responden yang bersedia meluangkan waktunya untuk berpartisipasi sebagai

bagian penting dalam kesuksesan penelitian ini.

14) Serta seluruh pihak yang tidak sempat disebutkan satu persatu yang telah banyak

meluangkan tenaga, waktu dan pikiran selama penyusunan laporan tugas akhir ini

Akhir kata, penulis berharap semoga Tuhan Yang Maha Esa berkenan membalas

segala kebaikan dari semua pihak yang telah banyak membantu. Dan utamanya semoga

tugas akhir ini dapat memberikan manfaat bagi pengembangan ilmu selanjutnya. Amin.

Makassar, 17 Agustus 2020

Syarif Hidayatullah

viii

DAFTAR ISI

HALAMAN JUDUL ................................................................................... i

LEMBAR PENGESAHAN ....................................................................... ii

PERNYATAAN KEASLIAN .................................................................... iii

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

KATA PENGANTAR ............................................................................... v

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

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

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

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

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

1.2 Rumusan Masalah ........................................................................ 2

1.3 Tujuan Penelitian ........................................................................ 2

1.4 Manfaat Penelitian ....................................................................... 3

1.5 Batasan Masalah Penelitian ......................................................... 3

1.6 Sistematika Penulisan ................................................................. 4

BAB II TINJAUAN PUSTAKA ................................................................ 6

2.1 E-commerce ................................................................................ 6

2.1.1 Klasifikasi E-commerce .................................................... 6

2.2 ExpressJS .................................................................................... 7

2.3 AngularJS .................................................................................... 8

2.4 NodeJS ........................................................................................ 11

ix

2.5 Canvas ........................................................................................ 11

2.6 FabricJS ...................................................................................... 12

2.7 Pengujian Usability ..................................................................... 13

2.7.1 Effectiveness ..................................................................... 14

2.7.2 Efficiency .......................................................................... 15

2.7.3 Satisfaction ....................................................................... 15

2.8 Cognitive Walkthrough ............................................................... 15

2.9 System Usability Scale ................................................................ 16

BAB III METODOLOGI PENELITIAN.................................................... 18

3.1 Waktu dan Lokasi Penelitian ....................................................... 20

3.2 Metode Penelitian ........................................................................ 20

3.2.1 Analisis Kebutuhan Sistem ............................................... 20

3.2.2 Desain Sistem ................................................................... 26

3.2.2.1 Use Case Diagram ............................................... 27

3.2.2.2 Activity Diagram .................................................. 32

3.2.2.3 Hardware & Software Kebutuhan Sistem ........... 35

3.2.3 Implementasi Sistem ........................................................ 37

3.2.4 Proses Pengintegrasian AngularJS dan FabricJS ...................... 37

3.2.5 Skenario Pengujian ........................................................... 39

3.2.5.1 Pengujian Cognitive Walkthrough ....................... 39

3.2.5.2 Analisis Hasil Uji Cognitive Walkthrough ........... 44

3.2.5.3 Pengujian System Usability Scale ........................ 47

x

3.2.5.4 Analisis Hasil Uji System Usability Scale ............ 49

BAB IV HASIL DAN PEMBAHASAN .................................................... 51

4.1 Hasil Pembuatan Sistem .............................................................. 51

4.1.1 Halaman Utama Sistem .................................................... 51

4.1.2 Halaman Kustomisasi ....................................................... 52

4.1.2.1 Fitur-Fitur Kustomisasi ........................................ 53

4.2 Hasil Pengujian Cognitive Walkthrough .................................... 54

4.2.1 Tingkat Keberhasilan Skenario Tugas ....................................... 61

4.2.2 Jumlah Kesalahan yang Dilakukan .......................................... 64

4.2.3 Jumlah Waktu Penyelesaian Skenario Tugas ............................ 67

4.3 Hasil Pengujian System Usability Scale ..................................... 70

4.3.1 Tingkat Kepuasan Pengguna ............................................ 70

BAB V PENUTUP ..................................................................................... 75

5.1. Kesimpulan ................................................................................ 75

5.2. Saran .......................................................................................... 76

DAFTAR PUSTAKA ................................................................................ 78

LAMPIRAN ............................................................................................... 81

xi

DAFTAR GAMBAR

Gambar 2.1 Arsitektur Aplikasi Angular ................................................... 10

Gambar 2.2 Konsep Single Page Application ............................................ 10

Gambar 2.3 Usability Framework ............................................................. 14

Gambar 3.1 Model Waterfall Sommerville ................................................ 18

Gambar 3.2 Formulir Wawancara Pra-Implementasi ................................ 22

Gambar 3.3 Arsitektur Sistem .................................................................... 26

Gambar 3.4 Use Case Diagram Rancangan Sistem .................................. 27

Gambar 3.5 Activity Diagram Halaman Utama ......................................... 32

Gambar 3.6 Activity Diagram Halaman Kustomisasi T-shirt .................... 33

Gambar 3.7 Activity Diagram Halaman Kustomisasi Sweater .................. 34

Gambar 3.8 Activity Diagram Halaman Kustomisasi Tank Top ................ 34

Gambar 3.9 Diagram Alur Pengujian ......................................................... 40

Gambar 3.10 Skala Penilaian Pertanyaan SUS .......................................... 48

Gambar 3.11 Persentasi Peringkat Skor SUS ............................................ 50

Gambar 4.1 Tampilan Halaman Utama ..................................................... 52

Gambar 4.2 Tampilan Halaman Kustomisasi ............................................ 53

Gambar 4.3 Fitur Add Text ......................................................................... 54

Gambar 4.4 Fitur T-shirt Color .................................................................. 54

Gambar 4.5 Fitur Add Images .................................................................... 55

Gambar 4.6 Fitur Upload Images .............................................................. 56

Gambar 4.7 Fitur Add Shape ...................................................................... 56

xii

Gambar 4.8 Fitur Canvas ........................................................................... 57

Gambar 4.9 Fitur Count Price .................................................................... 58

Gambar 4.10 Fitur Options ........................................................................ 58

Gambar 4.11 Fitur Custom ......................................................................... 59

Gambar 4.12 Fitur Background Canvas ..................................................... 60

Gambar 4.13 Fitur Hasil Kustomisasi ........................................................ 60

Gambar 4.14 Nilai SUS Dari Tiap Responden .......................................... 73

Gambar 4.15 Presentase Nilai SUS ............................................................ 74

xiii

DAFTAR TABEL

Tabel 3.1 Hasil Wawancara Pra Implementasi .......................................... 23

Tabel 3.2 Daftar Fitur Awal Halaman Kustomisasi ................................... 24

Tabel 3.3 Penjelasan Use Case Diagram Halaman Utama ........................ 28

Tabel 3.4 Penjelasan Use Case Diagram Halaman Kustomisasi ............... 28

Tabel 3.5 Skenario Tugas (ST) Yang Harus Dikerjakan Responden ......... 42

Tabel 4.1 Tingkat Keberhasilan Responden .............................................. 62

Tabel 4.2 Rekapitulasi Jumlah Kesalahan ................................................. 65

Tabel 4.3 Rekapitulasi Jumlah Waktu Penyelesaian (detik) ...................... 68

Tabel 4.4 Hasil Perhitungan System Usability Scale ................................. 71

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Masyarakat di era modern ini digerakkan oleh basis konsumsinya. Konsumsi

bukan hanya didorong atas dasar kebutuhan semata, namun hal tersebut menjelma

sebagai objek konsumsi yang di dalamnya menyimpan makna yang menuntun

masyarakat untuk membeli atau tidak membelinya, salah satunya adalah fashion.

Salah satu bisnis di bidang fashion yang sedang laris adalah bisnis jasa sablon

baju kaos. Banyak yang menggeluti bisnis ini dikarenakan sangat menguntungkan

sebab baju kaos adalah salah satu dari kebutuhan primer dari setiap orang.

Namun selama ini usaha jasa sablon baju kaos maupun pelanggannya hanya

mengandalkan peran dari desainer grafis untuk merancang atau mengolah gambar yang

ingin dicetak pada baju kaos. Tentu saja hal tersebut kurang efisien. Sehingga untuk

menjawab keresahan tersebut, diperlukan sebuah teknologi dalam bentuk website

kustomisasi yang bertujuan untuk membantu pelanggan dalam membuat desain pada

baju kaos tanpa harus mempunyai keahlian khusus dalam hal menggambar.

Rancang bangun sistem secara keseluruhan dibangun menggunakan teknologi

Single Page Application yang merupakan aplikasi yang bekerja di dalam browser yang

tidak membutuhkan reload page saat digunakan. Dengan kata lain, pengguna atau user

tidak akan berpindah halaman dengan melakukan request kepada server setiap kali

terjadi interaksi pada aplikasi. Salah satu framework JavaScript yang dapat memakai

2

konsep SPA adalah AngularJS. Untuk fitur kustomisasi yang dibuat memanfaatkan

elemen canvas pada HTML5 dan JavaScript yaitu FabricJS. Sehingga AngularJS dan

FabricJS akan saling diintegrasikan hingga menjadi satu kesatuan sistem.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, maka didapatkan rumusan masalah sebagai

berikut:

1. Bagaimana membuat Rancang Bangun E-Commerce Custom T-Shirt berbasis

website untuk melakukan proses kustomisasi desain pada baju kaos?

2. Bagaimana cara mengintegrasikan antara library FabricJS dan AngularJS

sehingga menjadi Rancang Bangun website E-Commerce Custom T-shirt?

3. Bagaimana hasil yang didapatkan setelah melakukan pengujian usability pada

penggunaan sistem menggunakan metode Cognitive Walkthrough dan System

Usability Scale?

1.3 Tujuan Penelitian

Merujuk pada rumusan masalah yang ada, maka tujuan yang ingin dicapai

dalam penelitian ini adalah:

1. Membuat Rancang Bangun E-Commerce Custom T-Shirt berbasis website

untuk digunakan sebagai media dalam melakukan kustomisasi desain pada

baju kaos.

2. Mengetahui bagaimana mengintegrasikan antara library FabricJS dan

AngularJS pada Rancang Bangun website E-Commerce Custom T-shirt.

3

3. Mengetahui seberapa mudah dan interaktif penggunaan sistem dalam

melakukan kustomisasi desain pada baju kaos menggunakan usability

testing dengan metode Cognitive Walkthrough dan System Usability Scale.

1.4 Manfaat Penelitian

Adapun manfaat dalam penelitan ini adalah:

1. Untuk menghasilkan teknologi atau media daring yang digunakan dalam

proses kustomisasi desain pada baju kaos.

2. Untuk mempermudah pelanggan dari usaha sablon baju kaos dalam

melakukan kustomisasi desain pada baju kaos.

3. Untuk mendapatkan masukan kelebihan serta kekurangan dari pengujian

usability pada penggunaan sistem sebelum dirilis secara resmi.

1.5 Batasan Masalah Penelitian

Mengingat banyaknya perkembangan yang bisa ditemukan dalam

permasalahan ini, maka perlu adanya batasan-batasan masalah yang jelas mengenai apa

yang akan dibuat dan diselesaikan dalam program ini. Adapun batasan-batasan masalah

pada penelitian ini sebagai berikut:

1. E-Commerce yang dimaksud berupa Rancang Bangun website untuk

melakukan proses kustomisasi desain menggunakan teknologi Single Page

Application.

2. Rancang Bangun website yang dibuat secara keseluruhan menggunakan

AngularJS.

4

3. Library yang digunakan dalam membuat elemen canvas untuk kustomisasi

desain pada baju kaos adalah FabricJS.

4. Proses pengujian usability yang dilakukan pada fitur-fitur kustomisasi

desain menggunakan metode Cognitve Walkthrough serta System Usability

Scale (SUS).

1.6 Sistematika Penulisan

Untuk memberikan gambaran singkat mengenai isi tulisan secara keseluruhan,

maka akan diuraikan beberapa tahapan dari penulisan secara sistematis, yaitu:

BAB I. PENDAHULUAN

Pada bab ini membahas latar belakang penelitian yang menjelaskan alasan yang

mendasari mengapa sistem ini dibuat, ruang lingkup yang menjelaskan batasan-batasan

penelitian dalam pembuatan rancang bangun website, serta tujuan dan manfaat dari

pembuatan sistem ini bagi para pengguna.

BAB II. TINJAUAN PUSTAKA

Pada bab ini akan dijelaskan teori-teori yang menunjang percobaan penelitian

seperti ExpressJS, AngularJS, NodeJS, Canvas, FabricJS dan serta teori yang

digunakan dalam pengujian sistem seperti Cognitive Walkthrough dan System Usability

Scale (SUS).

5

BAB III. METODOLOGI PENELITIAN

Pada bab ini berisi tentang metode yang digunakan dalam penelitian yaitu

Waterfall Method meliputi Requirement Definition, System and Software Design,

Implementation and Unit Testing, Integration and System Testing, dan Operation and

Maintenance.

BAB IV. HASIL DAN PEMBAHASAN

Dalam bab ini menjelaskan tentang hasil pembuatan sistem dimulai dari

halaman utama sistem hingga penyajian data hasil pengujian usability menggunakan

metode Cognitve Walkthrough serta System Usability Scale (SUS), proses-proses yang

dilakukan terhadap data-data yang telah diperoleh, serta pembahasan atau evaluasi

hasil implementasi sistem secara keseluruhan.

BAB V. PENUTUP

Bab ini berisi kesimpulan dan penelitian yang telah dibuat, serta saran-saran

untuk dapat meningkatkan dan mengembangkan sistem pada masa yang akan datang.

6

BAB II

TINJAUAN PUSTAKA

2.1 E-commerce

E-commerce adalah electronic commerce, merupakan kumpulan teknologi,

aplikasi, dan bisnis yang menghubungkan perusahaan atau perseorangan sebagai

konsumen untuk melakukan transaksi elektronik, pertukaran barang, dan pertukaran

informasi melalui internet atau televisi, www, atau jaringan komputer lainnya (R. S.

Mishra, 2016).

2.1.1 Klasifikasi E-commerce

Menurut (Orbeta, 2002), e-commerce dapat diklasifikasikan sebagai

berikut:

Business to Business (B2B)

Bisnis menawarkan untuk menjual atau membeli barang dan jasa kepada

entitas bisnis lainnya.

Business to Consumer (B2C)


konsumen.

Business to Government (B2G)


pemerintah.

Consumer to Business (C2B)

7

Konsumen menawarkan untuk menjual atau membeli barang dan jasa

kepada Bisnis.

Consumer to Consumer (C2C)


kepada konsumen lainnya.

Consumer to Government (C2G)


kepada pemerintah.

Government to Business (G2B)

Pemerintah menawarkan untuk menjual atau membeli barang dan jasa

kepada Bisnis.

Government to Consumer (G2C)


kepada konsumen.

Government to Government (G2G)


kepada entitas pemerintah lainnya.

2.2 ExpressJS

ExpressJS merupakan framework yang bersifat open source yang

bekerja di sisi server yang dibangun dalam ruang lingkup NodeJS. Framework

8

ini digunakan untuk mengelola request dari klien ke server termasuk untuk

pengelolaan routing dan operasi HTTP (PUT, GET, POST dan sebagainya).

ExpressJS dapat dikatakan sebagai suatu middleware yang

bertanggungjawab dalam mengelola siklus request-response dan menjamin

tidak ada suatu request yang tertinggal (S. Kavya, 2015).

Dengan ExpressJS, kita dapat mempersingkat waktu untuk memulai

proses development dan juga memudahkan kita dalam pembuatan sebuah

aplikasi NodeJS. ExpressJS juga sudah menyiapkan sistem routing, file static,

middleware, database integration dan juga sistem templating-nya.

2.3 AngularJS

Angular merupakan framework javascript yang dikembangkan oleh

Google dan digunakan dalam menangani seluruh aplikasi client side dan

interaksinya. Secara spesifik framework ini mengembangkan single page

application (SPA) yang memuat seluruh halaman website kedalam satu

halaman (page) saja seperti yang diilustrasikan pada gambar 2.2.

SPA memiliki beberapa keunggulan, diantaranya:

Tidak ada page refresh

User experience yang lebih baik

Kemampuan untuk bekerja secara offline

9

AngularJS juga memiliki kemampuan untuk melakukan routing

protocol dari sisi klien. Hal ini membantu meringankan beban di sisi server

dengan beban margin proses yang cukup besar. Keistimewaan lain dari Angular

adalah konsep arsitekturnya bersifat Model-View-Whatever (MVW) yaitu

pengembang bebas memilih metode apa yang mereka inginkan dalam

mengimplementasikan Angular dalam proyek yang dikembangkan. (S. Kavya,

2015).

AngularJS mendukung untuk mengembangkan front–end dari sebuah

aplikasi web yang berbasis open source. Platform ini menggunakan bahasa

Typescript. Aplikasi yang dibuat dengan Angular dipisahkan ke dalam template

HTML, kelas komponen yang ditulis untuk mengelola template dan service

yang berisi logika bisnis dari aplikasi. Pendekatan modular ini, juga

diilustrasikan pada gambar 2.1, memungkinkan pengembangan aplikasi yang

cepat dan logis dan memudahkan pengujian mereka. (N. Ninaad, Singh. Pooja,

2017).

10

Gambar 2.1 Arsitektur Aplikasi Angular

Gambar 2.2 Konsep Single Page Application

11

2.4 NodeJS

NodeJS adalah salah satu teknologi baru yang dapat digunakan untuk membuat

sebuah aplikasi (Frontend, Backend, API, dll). Yang mengesankan adalah NodeJS

menggunakan JavaScript sebagai bahasa pemrogramannya, yang biasanya hanya

digunakan untuk development bagian Frontend saja. Sampai saat ini, NodeJS adalah

salah satu teknologi yang paling banyak digunakan oleh para web developer.

NodeJS juga menyediakan lingkungan web server dengan performa tinggi dan

ringan, serta ideal untuk membangun webservice API (D. Sheppard, 2017). NodeJS

memungkinkan pengembang untuk membuat web server dan networking tools

menggunakan javascript dan sekumpulan modul yang mengelola berbagai fungsi

utama. Modul tersebut menyediakan file system I/O, networking, binary data,

kriptografi, data stream, dll. Saat ini node telah digunakan oleh beberapa perusahaan

besar seperti: IBM, LinkedIn, Paypal, Yahoo, Walmart, dll.

2.5 Canvas

Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis.

Biasanya menggunakan pensil dan cat. Dalam pemrograman, canvas adalah elemen

yang bisa digambar dengan kode. Canvas adalah salah satu fitur dari HTML5 yang

digunakan untuk menggambar (grafik, objek, animasi, game, komposisi gambar, dll)

di website, dan untuk menggambarnya kita harus melalui script, misalnya Javascript.

Programmer dapat mengatur tampilan pada layar sebelum diterjemahkan sehingga

12

piksel yang sesuai ditampilkan, dengan menggunakan Canvas API (Application

Programing Interface) yang dapat dipanggil dengan menggunakan Javascript.

Pada tahun 2004, Canvas awalnya diperkenalkan oleh Apple untuk digunakan

dalam komponennya sendiri (OS Mac X WebKit), seperti untuk menggerakkan aplikasi

widget, Dashboard dan browser Safari. Kemudian pada tahun 2005, canvas diadopsi

dalam versi 1,8 browser Gecko dan pada tahun 2006 oleh Opera.

Canvas API memiliki dasar meliputi konteks 2 Dimensi yang dapat

dipergunakan untuk menggambar berbagai bentuk, membuat teks, dan menampilkan

gambar langsung ke area yang ditentukan dari jendela browser.

2.6 FabricJS

Canvas memungkinkan untuk membuat beberapa gambar yang benar-benar

luar biasa pada aplikasi website saat ini, tetapi Application Programming Interface

(API) yang disediakannya sangat rendah. Sehingga hanya bisa menggambar beberapa

bentuk dasar pada canvas. Namun jika memerlukan segala jenis interaksi, untuk

mengubah gambar di titik mana pun, atau untuk menggambar bentuk yang lebih

kompleks, situasinya berubah secara dramatis. FabricJS inilah yang bertujuan untuk

mengatasi masalah ini.

FabricJS adalah kerangka kerja yang mempermudah melakukan berbagai tugas

yang berhubungan dengan elemen canvas pada HTML5. Dengan menggunakan

FabricJS, kita dapat membuat dan mengisi objek di atas kanvas seperti bentuk

13

geometris sederhana misalnya persegi panjang, lingkaran, kotak, segitiga, atau bentuk

yang lebih kompleks.

Selain itu, pada FabricJS kita dapat mengatur skala, memindahkan, dan

memutar objek-objek yang terdapat pada canvas dengan mouse, mengubah warna,

melakukan transparansi pada objek, memanipulasi objek sekaligus

mengelompokkannya dengan cara sederhana. FabricJS juga memiliki parser atau

fungsi input dari SVG-ke-kanvas (dan kanvas-ke-SVG).

2.7 Pengujian Usability

Informasi langsung dari pengguna tentang bagaimana pengguna menggunakan

sistem serta permasalahannya yang dihadapi akan diperoleh dari proses uji usability

yang melibatkan pengguna. Dengan mengamati bagaimana pengguna berinteraksi

dengan fitur-fitur situs web, akan mendapatkan pembelajaran usaha keras dan

keberhasilan pengguna dalam mengakses situs web.

Pada uji usability tidak hanya feasible (layak) tetapi praktik sustainable

(berkelanjutan), memiliki potensi yang mengakibatkan perubahan atau perbaikan yang

besar pada content (isi), design (desain) dan layout (tampilan) situs web. Hasil uji

usability mengarahkan keputusan dan memungkinkan untuk mengambil lompatan

besar menuju user experience (pengalaman pengguna) yang lebih baik (Blakiston,

2015).

14

Gambar 2.3 Usability Framework

Standar ISO 9241-11 mendefinisikan usability sebagai sejauh mana suatu

produk dapat digunakan oleh pengguna tertentu untuk mencapai tujuan tertentu. Metrik

ISO / IEC 9126-4 merekomendasikan bahwa metrik kegunaan harus mencakup

effectiveness, efficiency dan satisfaction.

2.7.1 Effectiveness

Effectiveness adalah ukuran seberapa baik situs web melakukan apa

yang dirancang untuk dilakukannya. Situs web yang dirancang menjadi efektif

jika pengguna bisa dengan mudah menemukan informasi yang mereka cari

sehingga efektivitas situs web dapat diukur menggunakan jumlah keberhasilan

(success rate) dan jumlah kesalahan (error rate) yang dilakukan oleh pengguna.

15

2.7.2 Efficiency

Efficiency diukur dalam hal waktu dalam menyelesaikan tugas. Yaitu,

waktu (dalam detik dan/atau menit) yang dibutuhkan pengguna untuk

menyelesaikan tugas dengan akurat dan berhasil atau sukses. Waktu yang

dibutuhkan untuk menyelesaikan tugas dapat dihitung dengan menggunakan

persamaan Task Time lalu persamaan Time Based Efficiency.

2.7.3 Satisfaction

Satisfaction adalah kenyamanan pengguna dan sikap positif terhadap

penggunaan sistem. Menurut Sauro (2011), kepuasan pengguna dapat diukur

dengan menggunakan metode System Usability Scale (SUS) yang berupa

kuesioner resmi yang diberikan kepada pengguna. Hal ini mengukur kesan

pengguna secara keseluruhan tentang kegunaan dan pengalaman dalam

menggunakan sistem.

2.8 Cognitive Walkthrough

Cognitive walkthrough pertama kali dicetuskan oleh Polson & rekan dalam

upaya memperkenalkan teori yang bersifat psikologi kepada teknik subjektif

walkthrough dan informal. Pada cognitive walkthrough, urutan tindakan merujuk

kepada langkah-langkah pada antarmuka yang diperlukan pengguna untuk mencapai

tujuan tertentu. Menurut Lewis dalam Bligard dan Osvalder (2013) Cognitive

Walkthrough adalah metode evaluasi usability di mana satu atau lebih evaluator bekerja

melalui serangkaian skenario tugas dan meminta sejumlah pertanyaan dari perspektif

16

pengguna. Menurut Hwang (2010), Cognitive Walkthrough merupakan metode

berbasis teori, di mana evaluator mengevaluasi setiap langkah yang diperlukan untuk

melakukan skenario tugas berbasis scenario dan mencari masalah usability yang akan

mengganggu belajar dengan eksplorasi.

Cognitive walkthrough dapat dilakukan menggunakan deskripsi tekstual dari

urutan aksi (tindakan), sketsa, kertas prototipe, dan produk yang sudah bekerja (Wilson

2014). Dalam cognitive walkthrough, ahli, atau kadang-kadang non ahli,

mengoperasikan situs web dan menyelesaikan skenario tugas nyata untuk menemukan

masalah usability (George 2008). Penelitian ini bertujuan melakukan pengujian

usability menggunakan metode Cognitive Walkthrough untuk mengukur aspek

effectiveness dan efficiency terhadap rancang bangun sistem.

2.9 System Usability Scale

System usability scale (SUS) adalah sebuah metode yang digunakan untuk

mengukur tingkat usability pada aspek kepuasan (satisfaction) pengguna. System

Usability Scale mempunyai pertanyaan yang berjumlah sebanyak sepuluh macam

pernyataan dengan (5) lima opsi respon untuk responden, opsi – opsi respon tersebut

dimulai dari sangat setuju sampai sangat tidak setuju. Menurut Brooke, System

usability scale (SUS) memungkinkan untuk mengevaluasi berbagai macam produk dan

jasa, termasuk hardware, software, website dan aplikasi (Brooke, 1996). System

usability scale sendiri mempunyai beberapa keunggulan diantaranya sangat mudah

untuk dilakukan dan mudah dimengerti oleh paritsipan, dapat digunakan oleh jumlah

17

sampel yang tidak banyak dan menghasilkan hasil yang reliabel dan valid. SUS

mempunyai 10 pertanyaan yang harus dijawab pengguna setelah menggunakan sistem

yang akan dilakukan evaluasi. Metode SUS menggunakan skala likert yang dapat

mengindikasikan pendapat pengguna terhadap sistem mulai dari sangat tidak setuju

sampai dengan sangat setuju.

System Usability Scale telah menjadi standar industri, dengan referensi dari

lebih dari 1.300 artikel dan publikasi. Manfaat yang dicatat dari penggunaan SUS

meliputi:

Merupakan skala yang sangat mudah untuk diberikan kepada pengguna

(responden).

Dapat digunakan pada ukuran sampel kecil dengan hasil yang dapat diandalkan.

Secara valid dan efektif dapat membedakan antara sistem yang dapat digunakan dan

tidak dapat digunakan.

RANCANG BANGUN E-COMMERCE CUSTOM T-SHIRT BERBASIS …

Documents

Transcript of RANCANG BANGUN E-COMMERCE CUSTOM T-SHIRT BERBASIS …