Framework User Interface Elevenia Berbasis LAPORAN SKRIPSI

Pembuatan Framework User Interface Elevenia Berbasis

Web Menggunakan ReactJS

LAPORAN SKRIPSI

MUTIA AYU DIANITA

4815040034

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA DAN

KOMPUTER

POLITEKNIK NEGERI JAKARTA

2020

Pembuatan Framework User Interface Elevenia Berbasis


LAPORAN SKRIPSI

Dibuat untuk Melengkapi Syarat-Syarat yang Diperlukan untuk

memperoleh Diploma Empat Politeknik

MUTIA AYU DIANITA

4815040034

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER

POLITEKNIK NEGERI JAKARTA

2020

ii

HALAMAN PERNYATAAN ORISINALITAS

Skripsi ini adalah hasil karya saya sendiri, dan semua sumber baik yang

dikutip maupun dirujuk telah saya nyatakan dengan benar.

Nama : Mutia Ayu Dianita

NPM : 4815040034

Tanggal : 3 Agustus 2020

Tanda Tangan :

iii

LEMBAR PENGESAHAN

Skripsi diajukan oleh :


NIM : 4815040034

Program Studi : Teknik Informatika

Judul Skripsi : Pembuatan Framework User Interface Elevenia Berbasis


Telah diuji oleh tim penguji dalam Sidang Skripsi pada hari Senin, Tanggal 3 Bulan

Agustus Tahun 2020 dan dinyatakan LULUS.

iv

KATA PENGANTAR

Puji syukur atas kehadirat Allah Swt yang telah memberikan rahmat dan

karunianya kepada penulis, sehingga penulis dapat menyelesaikan laporan skripsi.

Penulisan skripsi ini bertujuan untuk memenuhi salah satu syarat untuk mencapai

gelar diploma empat Politeknik. Tentu sangat disadari bahwa, dalam penyusunan

laporan ini menemui banyak kendala, sehingga membutuhkan bantuan dari

berbagai pihak. Ucapan terima kasih diberikan kepada pihak-pihak terkait,

diantaranya:

1. Iwan Sonjaya, S.T., M.T. selaku dosen pembimbing yang telah

memberikan arahan dalam penyusunan laporan skripsi.

2. Pihak PT Elevenia Digital Teknologi Sukses yang telah memberikan izin

untuk menggunakan Elevenia sebagai topik skripsi.

3. Hendra Kosasih selaku mantan leader tim frontend PT XL Planet yang telah

memberi ide dan arahan dalam pembuatan topik skripsi.

4. Bayu Utomo selaku leader tim frontend PT Elevenia Digital Teknologi

Sukses yang telah mengarahkan dan membimbing pengerjaan skripsi.

5. Anggota tim frontend dan product design PT Elevenia Digital Teknologi

Sukses yang telah banyak membantu dalam pembuatan skripsi.

6. Orangtua dan keluarga yang telah memberikan bantuan dan dukungan

dalam bentuk moral dan materil dalam menyelesaikan laporan skripsi.

7. Teman-teman Topeng Betmen yang telah menemani, mendukung, dan

memberikan banyak bantuan dalam menyelesaikan laporan skripsi.

8. Siti Aisyah, Melinda Nur Puspita Dewi dan Rahmawati Putri selaku sahabat

yang telah banyak membantu dan mendukung penulis dalam menyelesaikan

penyusunan laporan skripsi.

Akhir kata, semoga Allah SWT berkenan membalas kebaikan semua pihak

yang telah membantu dan semoga penulisan Laporan Skripsi ini dapat memberikan

manfaat bagi penulis khususnya dan para pembaca pada umumnya.

Depok, Agustus 2020

Penulis

v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI

UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Politeknik Negeri Jakarta, saya yang bertanda tangan di

bawah ini:


NIM : 4815040034

Program Studi : Teknik Informatika

Jurusan : Teknik Informatika dan Komputer

Jenis karya : Skripsi

demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

Politeknik Negeri Jakarta Hak Bebas Royalti Noneksklusif (Non-exclusive Royalty-

Free Right) atas karya ilmiah saya yang berjudul :

Pembuatan Framework User Interface Elevenia Berbasis Web Menggunakan ReactJS

beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Noneksklusif

ini Politeknik Negeri Jakarta berhak menyimpan, mengalihmedia/format-kan,

mengelola dalam bentuk pangkalan data (database), merawat, dan memublikasikan

skripsi saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan

sebagai pemilik Hak Cipta.

Demikian pernyataan ini saya buat dengan sebenarnya.

Dibuat di : Depok Pada tanggal : 3 Agustus 2020

Yang menyatakan

Mutia Ayu Dianita

vi

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

Pembuatan Framework User Interface Elevenia Berbasis Web Menggunakan

ReactJS

Abstrak

Elevenia membutuhkan sebuah framework user interface untuk membantu tim developer

membangun web secara cepat agar fitur elevenia tidak tertinggal kompetitor, karena

tampilan web elevenia saat ini desainnya tidak konsisten dan struktur kodenya buruk.

Menggunakan metodologi atomic design yang memecah komponen tampilan menjadi

atom, molekul, dan organisme agar desain lebih terstruktur dan konsisten dengan

tambahan utility class untuk menunjang penggunaan komponen. Komponen-komponen

tersebut dibangun dengan bahasa javascript menggunakan framework ReactJS yang

berbasis komponen. Pengembangannya menggunakan metode agile agar dapat

menyesuaikan kebutuhan desain dan teknologi yang ada. Framework user interface yang

dibuat dipublish menjadi package NPM dan dapat diinstall ke projek Elevenia. Selain

package NPM, dibuat juga web dokumentasi cara penggunaan dari framework. Dengan

framework user interface yang dibuat, web elevenia memiliki desain yang konsisten,

struktur kodenya mudah dibaca, dan developer dapat membangun tampilan web dengan

mudah dan cepat.

Kata kunci: Framework, User interface, ReactJS, Elevenia, NPM, Atomic Design

vii


DAFTAR ISI

KATA PENGANTAR .......................................................................................... iv

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI

UNTUK KEPENTINGAN AKADEMIS ............................................................ v

ABSTRAK ............................................................................................................ vi

DAFTAR ISI ........................................................................................................ vii

DAFTAR GAMBAR ............................................................................................ ix

DAFTAR TABEL .............................................................................................. xiii

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

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

1.2 Perumusan Masalah .................................................................................. 2

1.3 Batasan Masalah ....................................................................................... 2

1.4 Tujuan dan Manfaat .................................................................................. 2

1.5 Metode Pelaksanaan Skripsi ..................................................................... 3

BAB II TINJAUAN PUSTAKA ........................................................................... 4

2.1 Framework User Interface ....................................................................... 4

2.1.1 Framework ............................................................................................... 4

2.1.2 User Interface ........................................................................................... 4

2.1.3 Framework User Interface ....................................................................... 4

2.2 Web .......................................................................................................... 4

2.3 Javascript .................................................................................................. 5

2.4 ReactJS ..................................................................................................... 5

2.5 NPM ......................................................................................................... 6

2.6 SASS ........................................................................................................ 6

2.7 Metodologi Desain Atomik ...................................................................... 7

2.8 Metodologi Agile ...................................................................................... 8

2.9 Elevenia .................................................................................................... 9

BAB III PERENCANAAN DAN REALISASI ................................................. 10

3.1 Deskripsi Program Aplikasi ................................................................... 10

3.2 Cara Kerja Program Framework ............................................................ 11

3.3 Rancangan Program Framework ............................................................ 12

3.3.1 Use Case Framework ............................................................................. 12

3.3.2 Komponen pada Framework .................................................................. 14

3.3.3 Desain Mockup Dokumentasi ................................................................. 16

viii


3.4 Program Aplikasi .................................................................................... 17

3.4.1 Tampilan Dokumentasi Framework ....................................................... 17

3.4.2 Tahap Pembuatan Package NPM ........................................................... 61

BAB IV PEMBAHASAN .................................................................................... 64

4.1 Pengujian ................................................................................................ 64

4.2 Deskripsi Pengujian ............................................................................... 64

4.3 Prosedur Pengujian................................................................................. 64

4.4 Data Hasil Pengujian .............................................................................. 64

4.4.1 Data Hasil Pengujian Alpha ................................................................... 64

4.4.2 Data Hasil Pengujian Beta ..................................................................... 70

4.5 Evaluasi .................................................................................................. 81

BAB V PENUTUPAN ......................................................................................... 82

DAFTAR PUSTAKA .......................................................................................... 83

LAMPIRAN ......................................................................................................... 84

ix


DAFTAR GAMBAR

Gambar 2. 1 Contoh atom pada antarmuka ............................................................. 7

Gambar 2. 2 Contoh molekul pada antarmuka........................................................ 7

Gambar 2. 3 Contoh organisme pada antarmuka .................................................... 8

Gambar 2. 4 Model Pengembangan Agile .............................................................. 9

Gambar 3. 1 Flowchart instalasi framework ......................................................... 11

Gambar 3. 2 Flowchart cara kerja program aplikasi dokumentasi ....................... 12

Gambar 3. 3 Use case Elevenia saat ini secara garis besar ................................... 12

Gambar 3. 4 Use case Elevenia dengan fitur tambahan ........................................ 13

Gambar 3. 5 Use case program aplikasi................................................................ 13

Gambar 3. 6 Tombol pada halaman deals Elevenia .............................................. 14

Gambar 3. 7 Tombol pada halaman produk Elevenia ........................................... 14

Gambar 3. 8 Tombol pada footer Elevenia ........................................................... 14

Gambar 3. 9 Tombol pada halaman My Elevenia ................................................. 14

Gambar 3. 10 Tombol pada live chat Elevenia ..................................................... 14

Gambar 3. 11 Desain mockup instalasi ................................................................. 16

Gambar 3. 12 Desain mockup dokumentasi .......................................................... 16

Gambar 3. 13 Tampilan dokumentasi ................................................................... 17

Gambar 3. 14 Utility Border Color ....................................................................... 18

Gambar 3. 15 Utility Border Additive dan Border Substractive ........................... 18

Gambar 3. 16 Utility Border Radius ..................................................................... 18

Gambar 3. 17 Utility Clearfix................................................................................ 19

Gambar 3. 18 Utility Text Color ........................................................................... 19

Gambar 3. 19 Utility Background Color ............................................................... 19

Gambar 3. 20 Utility Display ................................................................................ 20

Gambar 3. 21 Utility Overlay dan Cursor ............................................................ 21

Gambar 3. 22 Utility Display Flex dan Display Inline Flex ................................. 21

Gambar 3. 23 Utility Flex Row, Flex Column, Justify Content dan Align Items .. 22

Gambar 3. 24 Utility Float .................................................................................... 23

Gambar 3. 25 Utility Sizing .................................................................................. 23

Gambar 3. 26 Utility Spacing ............................................................................... 24

x


Gambar 3. 27 Utility Position ............................................................................... 25

Gambar 3. 28 Utility Typhography ....................................................................... 26

Gambar 3. 29 Utility Vertical Align ..................................................................... 26

Gambar 3. 30 Utility Z-Index................................................................................ 27

Gambar 3. 31 Layout Container ............................................................................ 27

Gambar 3. 32 Layout Grid .................................................................................... 28

Gambar 3. 33 Atom Alert Box .............................................................................. 29

Gambar 3. 34 Lanjutan gambar Alert Box ............................................................ 30

Gambar 3. 35 Atom Button Size ............................................................................ 30

Gambar 3. 36 Atom Button Type .......................................................................... 31

Gambar 3. 37 Atom Button Level dan Floating .................................................... 32

Gambar 3. 38 Atom Box ....................................................................................... 33

Gambar 3. 39 Atom Checkbox .............................................................................. 34

Gambar 3. 40 Atom Datepicker ............................................................................ 35

Gambar 3. 41 Atom Divider ................................................................................. 35

Gambar 3. 42 Atom Icon Glyphs 16px ................................................................. 36

Gambar 3. 43 Atom Icon Glyphs 24px ................................................................. 37

Gambar 3. 44 Atom Icon Special 36px ................................................................. 38

Gambar 3. 45 Atom Icon Special 40px ................................................................. 38

Gambar 3. 46 Atom Modal Box ukuran small dan medium ................................. 39

Gambar 3. 47 Atom Modal Box ukuran large dan extra large ............................. 40

Gambar 3. 48 Atom Tipe Modal ........................................................................... 40

Gambar 3. 49 Lanjutan Gambar Tipe Modal ........................................................ 41

Gambar 3. 50 Atom Toast Modal ......................................................................... 42

Gambar 3. 51 Atom Modal Box with Banner ....................................................... 43

Gambar 3. 52 Atom Modal Box ............................................................................ 44

Gambar 3. 53 Atom Modal ................................................................................... 44

Gambar 3. 54 Atom Next-Navigation Button ........................................................ 45

Gambar 3. 55 Atom Radio Button ........................................................................ 46

Gambar 3. 56 Atom Select Button......................................................................... 46

Gambar 3. 57 Atom Table ..................................................................................... 47

Gambar 3. 58 Atom Textfield untuk desktop ........................................................ 48

xi


Gambar 3. 59 Atom Textfield untuk desktop ........................................................ 48

Gambar 3. 60 Atom Lanjutan gambar Textfield untuk desktop ............................ 49

Gambar 3. 61 Atom Lanjutan gambar Textfield condition untuk desktop ............ 49

Gambar 3. 62 Atom Textfield ................................................................................ 50

Gambar 3. 63 Atom Lanjutan gambar Textfield condition ................................... 50

Gambar 3. 64 Atom Toggle Default, Default Checked, Disabled ........................ 51

Gambar 3. 65 Atom Toggle Label Right, Label Left, Label Inside ....................... 51

Gambar 3. 66 Molekul Accordion ......................................................................... 52

Gambar 3. 67 Molekul Breadcrumbs .................................................................... 52

Gambar 3. 68 Molekul Button Popover ................................................................ 52

Gambar 3. 69 Molekul Option Box ....................................................................... 53

Gambar 3. 70 Molekul Pagination ....................................................................... 53

Gambar 3. 71 Molekul Range Slider .................................................................... 54

Gambar 3. 72 Molekul Search Bar ....................................................................... 54

Gambar 3. 73 Lanjutan gambar molekul search bar .......................................... 555

Gambar 3. 74 Molekul Stepper Enabled ............................................................... 55

Gambar 3. 75 Molekul Stepper Disabled .............................................................. 56

Gambar 3. 76 Molekul Uploader .......................................................................... 57

Gambar 3. 77 Organisme Header ......................................................................... 58

Gambar 3. 78 Organisme Footer .......................................................................... 58

Gambar 3. 79 Organisme Mega Menu .................................................................. 58

Gambar 3. 80 Organisme Progress Tracker ......................................................... 59

Gambar 3. 81 Lanjutan gambar Organisme Progress Tracker (code) .................. 59

Gambar 3. 82 Organisme Tabs Default ................................................................ 60

Gambar 3. 83 Organisme Tabs Vertical dan Tabs Logo ....................................... 60

Gambar 3. 84 Organisme Tabs Fitted ................................................................. 611

Gambar 3. 85 Akun npm ....................................................................................... 61

Gambar 3. 86 Script build ..................................................................................... 62

Gambar 3. 87 Branch build ................................................................................... 62

Gambar 3. 88 Script npm login ............................................................................. 62

Gambar 3. 89 Inisiasi package npm ...................................................................... 63

Gambar 3. 90 Publish Script ................................................................................. 63

xii


Gambar 3. 91 Hasil publish package .................................................................... 63

xiii


DAFTAR TABEL

Tabel 1. Komponen pada framework .................................................................... 15

Tabel 2. Hasil pengujian alpha ............................................................................. 64

Tabel 3. Hasil pengujian User Acceptance Test desainer ..................................... 70

Tabel 4. Pengujian User Acceptance Test developer ............................................ 76

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Elevenia merupakan platform e-commerce dengan konsep open marketplace di

Indonesia. Maraknya e-commerce yang ada di Indonesia, membuat persaingan

antara e-commerce semakin ketat sehingga menyebabkan setiap e-commerce

berusaha untuk mengembangkan produknya menjadi yang terbaik. Setiap e-

commerce berupaya membuat aplikasi yang dengan fitur yang semakin beragam

dan dengan waktu pengerjaan yang singkat. Hal ini dilakukan agar dapat merilis

fitur baru dengan cepat agar dapat bersaing dengan kompetitor e-commerce lainnya.

Saat ini, situs web Elevenia menggunakan teknologi lama, dan fitur yang ada masih

tertinggal dibandingkan kompetitor lainnya. Desain yang tidak konsisten menjadi

masalah bagi desainer untuk memilih dasar acuan desain untuk desain baru dan juga

bagi user karena mempengaruhi user dari segi pengalaman user (Arkan, 2020).

Selain itu, struktur kode, file, serta folder yang buruk membuat developer kesulitan

mengembangkan web dengan cepat dan efektif. Maka dari itu tim user interface

dan frontend Elevenia ingin membuat ulang tampilan websitenya dengan

framework user interface menggunakan teknologi terbaru yang memiliki desain

konsisten, alur kode berstandar, dan dapat dikembangkan dengan waktu yang cepat.

ReactJS merupakan perpustakaan frontend dengan bahasa dasar Javascript. ReactJS

dikenal sebagai pemain yang sangat efisien yang memungkinkan pengembangan

aplikasi berbasis web yang besar dan kompleks. Ini adalah salah satu faktor kunci

yang membuat ReactJS menjadi framework yang menonjol dari puluhan framework

di luar sana. Alasan dari kinerja yang sangat efisien adalah framework dasarnya

adalah fitur DOM virtual framework.

Berdasarkan masalah di atas, penulis bekerja sama dengan Elevenia (PT XL Planet)

untuk melakukan “Pembuatan Framework User Interface Elevenia Berbasis

Web Menggunakan ReactJS”. Dalam melakukan penelitian, PT XL Planet

mendukung penuh penelitian ini dengan menyediakan desain dari framework yang

akan dibuat.

2


1.2 Perumusan Masalah

Bagaimana membuat framework user interface Elevenia dengan komponen yang

mudah digunakan ulang dengan desain yang konsisten serta struktur kode yang

memiliki standar?

1.3 Batasan Masalah

Agar penelitian yang dilakukan lebih fokus, tepat sasaran, serta menghindari

pelebaran pokok masalah dan kesalahpahaman, maka masalah yang akan dibahas

perlu diberikan batasan. Adapun batasan-batasan masalah dalam penelitian ini

diantaranya adalah:

1. Ruang lingkup pembahasan hanya meliputi framework user interface

Elevenia berbasis web desktop.

2. Aplikasi yang dibangun menggunakan teknologi HTML5, SASS, dan

bahasa pemrograman Javascript dengan framework yang digunakan adalah

ReactJS.

3. Menggunakan panduan standar desain user interface yang dibuat oleh user

interface designer Elevenia.

4. Framework user interface yang dibuat sebatas framework tampilan web

menggunakan data statis, tidak terhubung dengan data maupun fungsi

backend.

1.4 Tujuan dan Manfaat

1.4.1 Tujuan

Membuat framework user interface Elevenia berbasis web serta

dokumentasinya.

1.4.2 Manfaat

1. Membantu developer Elevenia membangun tampilan web secara cepat

dengan desain yang konsisten agar Elevenia dapat bersaing dengan

kompetitor.

2. Membantu developer Elevenia membangun tampilan web dengan

penulisan kode yang memiliki standar, mudah dibaca, serta mudah

digunakan.

3


1.5 Metode Pelaksanaan Skripsi

Metode yang digunakan dalam pembuatan sistem ini adalah metode agile. Agile

merupakan pendekatan berulang yang dilakukan dengan mengedepankan

kolaborasi serta menggunakan dokumen formal yang terbatas dan tepat untuk

membangun perangkat lunak yang berkualitas dalam hal biaya yang efektif serta

waktu yang sesuai dengan kebutuhan stakeholder yang bisa berubah-ubah

(Raharjana, 2017).

Tahapan pengembangan sistem dengan metode agile yang akan dilakukan dalam

pembuatan skripsi:

1. Perencanaan, menentukan komponen apa yang dibuat bersama dengan tim

desainer antarmuka, serta menentukan struktur folder, kode, dan

metodologi pembuatan framework dengan ketua tim frontend Elevenia.

2. Perancangan, setelah dilakukan perencanaan dilakukan perancangan

berdasarkan metodologi yang telah ditentukan yaitu metodologi desain

atomik. Komponen yang dibuat diklasifikasikan menjadi atom, molekul,

dan organisme, serta ditentukan utility apa saja yang akan ditambahkan.

Pengklasifikasian komponen menjadi atom, molekul dan organisme

dilakukan dengan desainer dan frontend developer Elevenia.

3. Pengembangan, setelah rancangan dibuat, dilakukan pengembangan

komponen berdasarkan desain komponen yang telah dibuat oleh desainer

dan penulisan dokumentasinya.

4. Pengujian, dilakukan untuk menguji komponen menggunakan whitebox

testing yang dibuat apakah sudah berfungsi sebagai mestinya, kode dibuat

efektif, sesuai dengan standar dan sesuai dengan desain dari desainer.

5. Distribusi, setelah lolos pengujian dilakukan distribusi dengan cara

mempublish package NPM Elevenia.

6. Peninjauan, setelah didistribusikan, dilakukan pertemuan bersama ketua

tim frontend serta tim desainer antarmuka Elevenia untuk meninjau apakah

diperlukan penambahan komponen dan perubahan komponen yang telah

dibuat. Jika diperlukan pengembangan lagi, maka dapat dilakukan

perencanaan untuk penambahan maupun perbaikan.

4

BAB II

TINJAUAN PUSTAKA

2.1 Framework User Interface

2.1.1 Framework

Framework adalah sekumpulan perintah atau fungsi dasar yang membentuk

aturan-aturan tertentu dan saling berinteraksi dengan yang lainnya, sehingga

dalam pembuatan aplikasi harus menggunakan aturan yang telah ditetapkan

dari framework yang digunakan. Pembuatan aplikasi menjadi lebih cepat

dengan adanya framework karena fungsi dasar telah ada dan dapat digunakan

ulang, jadi tidak harus membuat fungsi dasar dan aturan dari awal. (Wardana,

2010)

2.1.2 User Interface

Menurut (Shidqi, et al., 2017), user interface adalah komponen yang

berkomunikasi langsung dengan pengguna melalui perangkat keras maupun

perangkat lunak. Dapat berbentuk tampilan, suara, maupun sentuhan secara

langsung ataupun tidak langsung. Konsep desain visual, interaksi, dan

infrastruktur informasi tergabung menjadi sebuah user interface. Tujuan dari user

interface adalah untuk meningkatkan kegunaan serta pengalaman pengguna dalam

menggunakan perangkat lunak maupun perangkat keras.

2.1.3 Framework User Interface

Framework user interface berbasis web adalah kerangka kerja yang berisikan

sekumpulan komponen, perintah, fungsi dasar yang membentuk aturan-aturan

tertentu dan saling berinteraksi dengan yang lainnya yang dapat digunakan

untung membuat tampilan antarmuka.

2.2 Web

Web adalah halaman yang dikumpulkan berisi informasi berupa teks, gambar,

animasi, suara, dan atau gabungan dari semuanya yang bersifat statis maupun

dinamis. Halaman-halaman tersebut saling terkoneksi dan membentuk jaringan

yang disebut dengan web (Syaripudin dan Cahyana, 2015).

5


2.3 Javascript

Javascript merupakan bahasa skrip populer yang dipakai untuk menciptakan

halaman web yang dapat berinteraksi dengan pengguna dan dapat merespon event

yang terjadi pada halaman. Javascript merupakan perekat yang menyatukan

halaman-halaman web. Javascript dibangun secara langsung ke dalam browser dan

terintegrasi dengan HTML. Ketika browser memuat sebuah halaman, server akan

mengirim konten utuh dari dokumen, termasuk statement-statement Javascript.

Konten HTML kemudian dibaca dan diinterpretasi baris demi baris sampai tag

pembuka Javascript dibaca, pada saat itu interpreter Javascript mengambil alih.

Ketika tag penutup Javascript diraih, pemrosesan HTML berlanjut. (Siahaan dan

Sianipar, 2018)

2.4 ReactJS

ReactJS adalah perpustakaan Javascript yang digunakan untuk mengembangkan

komponen antarmuka pengguna yang dapat digunakan kembali. Menurut

dokumentasi resmi ReactJS (ReactJS, 2019), React adalah perpustakaan untuk

membangun antarmuka pengguna modular Javascript yang deklaratif, efisien dan

fleksibel untuk membangun tampilan antarmuka pada web. ReactJS dibuat oleh

Facebook dan komunitas React yang terdiri dari developer-developer dan

perusahaan-perusahan. React dapat digunakan sebagai dasar development single-

page web.

ReactJS pada dasarnya memungkinkan pengembangan aplikasi berbasis web yang

besar dan kompleks yang dapat mengubah datanya tanpa harus me-refresh halaman

berikutnya. React menggunakan View (V) dalam Model-View-Controller (MVC).

Digunakan juga Document Object Model (DOM), sehingga menawarkan aplikasi

yang sederhana, berkinerja dan kuat.

ReactJS dikenal sebagai pemain yang sangat efisien. Ini adalah salah satu faktor

kunci yang membuat framework yang menonjol dari puluhan framework di luar

sana. Alasan dari kinerja yang sangat efisien adalah framework dasarnya adalah

fitur DOM virtual framework. ReactJS memelihara model objek dokumen virtual

di dalam memori. Setiap perubahan hanya pada komponen yang berganti bukan

mengubah seluruh tampilan halamannya.

6


2.5 NPM

NPM (Node Package Manager) dirilis pada 13 Januari 2010 dan dimasukkan

sebagai bagian dari kerangka kerja Node.js (NPM, 2020), NPM sekarang menjadi

pengelola paket dominan untuk JavaScript berdasarkan pangsa pasar, memiliki

lebih dari setengah jumlah pengguna, yaitu 60% basis user Javascript saat terakhir

diperiksa pada tahun 2018, membantu banyak project untuk dibundel dengan

Node.js (NodeJS, 2018).

Saat ini paket manajer NPM dikelola oleh NPM Inc., sebuah perusahaan yang

didirikan pada tahun 2014 dengan tujuan mempertahankan perangkat lunak NPM

dan repositori paket, sambil menawarkan layanan berbayar dan dukungan untuk

penggunaan perusahaan. Pengembangan paket manajer NPM saat ini sangat aktif,

dengan versi stabil terbarunya adalah versi 6.9.0 yang dirilis pada 6 Maret 2019

(NPM, 2020).

Registri NPM, yang merupakan layanan yang menampung paket yang dikirimkan

oleh pengembang, adalah paket registri online tunggal terbesar pada 2017, melayani

lebih dari dua kali lipat dari registri terbesar berikutnya, registri Apache Maven

untuk paket Java (Linux, 2017).

2.6 SASS

Menurut (O'Donnell, 2019), SASS (Syntactically Awesome Style Sheets) adalah

bahasa styling open source yang mudah digunakan, SASS membantu mengurangi

pengulangan dan kesulitan yang ada pada CSS (Cascading Stylesheet) tradisional.

SASS memungkinkan penggunanya untuk menstyling saat mengerjakan proyek

pengembangan web berskala besar, membuatnya lebih cepat dan lebih efisien untuk

menulis styling yang dapat digunakan kembali dari awal untuk proyek yang lebih

kecil.

SASS adalah bahasa skrip preprocessor yang mengkompilasi ke CSS menggunakan

aplikasi kompiler GUI yang banyak di antaranya adalah open source. Seperti bahasa

berorientasi objek, SASS menggunakan variabel, nesting, mixin dan fungsi untuk

menulis styling yang dapat digunakan kembali. Setelah selesai, file SASS kemudian

diterjemahkan ke dalam file CSS menggunakan kompiler (O'Donnell, 2019).

7


2.7 Metodologi Desain Atomik

Menurut (Frost, 2016), desain atomik didasari dari reaksi kimia, dimana satuan

terkecil merupakan atom. Atom yang bergabung membantuk molekul. Gabungan

molekul membentuk organisme yang kompleks. Desain atom adalah metodologi

yang terdiri dari lima tahap berbeda yang bekerja bersama untuk membuat sistem

desain antarmuka dengan cara yang lebih disengaja dan hierarkis. Lima tahap

desain atom adalah:

1. Atom

Atom pada antarmuka berfungsi sebagai blok bangunan dasar. Atom-atom

ini termasuk HTML dasar elemen seperti label formulir, input, tombol, dan

lainnya yang tidak bisa dipecah lagi fungsinya.

Gambar 2. 1 Contoh atom pada antarmuka

Sumber: (Frost, 2016)

Gambar 2.1 menunjukkan label, input dan button merupakan atom, yaitu

bagian terkecil pada antarmuka.

2. Molekul

Molekul adalah kelompok elemen UI yang relatif sederhana yang berfungsi

bersama sebagai satu kesatuan. Misalnya, label formulir, input pencarian,

dan tombol dapat bergabung bersama untuk membuat molekul form

pencarian.

Gambar 2. 2 Contoh molekul pada antarmuka


8


Contoh molekul pada antarmuka terdapat pada gambar 2.2. Atom label

formulir, input pencarian dan tombol pencarian digabung menjadi molekul

form pencarian.

3. Organisme

Organisme adalah komponen UI yang relatif kompleks, terdiri dari

kelompok molekul dan / atau atom dan / atau organisme lain. Organisme ini

membentuk bagian yang berbeda dari suatu antarmuka. Contoh dari

organisme adalah komponen header seperti yang tertera pada gambar 2.3

berikut:

Gambar 2. 3 Contoh organisme pada antarmuka


Berdasarkan gambar 2.3, menunjukkan organisme header yang terdiri dari

atom logo, molekul navigasi yang terdiri dari teks dan link, serta molekul

form pencarian yang terdiri dari form, label, input teks, dan tombol

pencarian.

2.8 Metodologi Agile

Agile merupakan pendekatan berulang yang dilakukan dengan mengedepankan

kolaborasi serta menggunakan dokumen formal yang terbatas dan tepat untuk

membangun perangkat lunak yang berkualitas dalam hal biaya yang efektif serta

waktu yang sesuai dengan kebutuhan stakeholder yang bisa berubah-ubah.

(Raharjana, 2017)

Kata agile berarti bersifat cepat, ringan, bebas bergerak, waspada. Agile juga

merupakan model yang lebih efektif dari pada model tradisional. Namun, metode

agile bukan suatu proses yang bersifat menentukan, dengan kata lain tidak

mendefinisikan prosedur secara detail untuk bagaimana membuat tipe model yang

telah diberikan, meskipun terdapat cara untuk menjadi suatu modeler yang efektif.

(Malik, et al., 2017)

9


Gambar 2. 4 Model Pengembangan Agile

Sumber: (Stoica, et al., 2016)

Berdasarkan gambar 2.6 tahapan pengembangan sistem dengan metode agile yang

dilakukan terdiri dari perencanaan, perancangan dan pengembangan, pengujian,

distribusi, dan peninjauan.

2.9 Elevenia

PT XL Planet yang merupakan sebuah perusahaan joint venture antara PT XL

Axiata, Tbk., dan SK Planet dari Korea Selatan. PT XL Axiata merupakan

perusahaan operator terbesar kedua di Indonesia dan SK Planet adalah anak

perusahaan dari SK Telecom Korea Selatan, perusahaan operator terbesar di Korea

Selatan. Per paruh kedua 2017, Elevenia berada di bawah grup Salim lewat PT Jaya

Kencana Mulia Lestari dan Superb Premium Pte. Ltd.

PT XL Planet didirikan pada tanggal 11 Maret 2014 dengan nama lain Elevenia,

nama Elevenia diambil dari angka 11 (eleven), yaitu tanggal PT XL Planet berdiri.

Elevenia juga merupakan nama produk utama PT XL Planet.

Elevenia adalah situs belanja online dengan konsep open marketplace di Indonesia

yang memberikan kemudahan dan keamanan berbelanja online. Situs ini

menawarkan berbagai macam produk yang terbagi dalam 8 kategori antara lain:

fashion, beauty/health, babies/kids, home/garden, gadget/komputer, elektronik,

sports/hobby, dan service/food (Elevenia, 2019).

10

BAB III

PERENCANAAN DAN REALISASI

3.1 Deskripsi Program Aplikasi

Framework yang akan dibangun merupakan framework antarmuka berbasis web

dengan komponen yang dapat digunakan ulang untuk keperluan Elevenia dalam

membangun web. Framework ini akan dibuatkan dokumentasi penggunaan dari

cara menginstalasi dan juga menggunakan komponen yang ada. Tahapan-tahapan

proses pengerjaan aplikasi diantaranya adalah:

3.1.1 Tahapan Perencanaan

Perencanaan dilakukan bersama dengan tim desainer serta kepala tim

frontend elevenia. Untuk perencanaan awal meliputi penentuan komponen

yang akan dibuat. Perencanaan iterasi selanjutnya meliputi perencanaan

komponen yang akan ditambahkan. diperbarui maupun yang perlu

diperbaiki.

3.1.2 Tahapan Perancangan

Perancangan meliputi klasifikasi komponen menjadi atom, molekul dan

organisme, menentukan class utility tambahan serta menentukan struktur

folder, file, kode yang akan digunakan. Perancangan dilakukan Bersama

dengan desainer dan frontend developer Elevenia. Iterasi selanjutnya

meliputi klasifikasi komponen serta menentukan penempatan komponen

pada folder, nama file, serta mengikuti struktur kode yang dibuat pada awal

rancangan.

3.1.3 Tahapan Pengembangan

Pengembangan dilakukan berdasarkan rancangan yang telah dibuat.

Pengembangan meliputi pengembangan komponen pada framework user

interface dan dokumentasinya.

3.1.4 Tahapan Pengujian

Pengujian dilakukan menggunakan whitebox testing, selain menguji

komponen yang sesuai dengan desain yang dibuat dan fungsi yang berjalan

dengan baik. Struktur kode dipastikan sesuai dengan standar dan efektif

untuk digunakan.

11


3.2 Cara Kerja Program Framework

Agar dapat menggunakan framework user interface Elevenia berbasis web,

diperlukan instalasi pada projek yang akan digunakan. Berikut merupakan

flowchart dari instalasi framework:

Gambar 3. 1 Flowchart instalasi framework

Sumber: pribadi

Untuk dapat menggunakan framework, dilakukan instalasi pada projek yang dipilih

menggunakan NPM (Node Package Manager). Setelah berhasil login, lalu instal

framework dan framework siap untuk digunakan. Untuk menggunakan framework,

terdapat dokumentasi sebagai panduan penggunaan komponen yang ada pada

framework.

12


Gambar 3. 2 Flowchart cara kerja program aplikasi dokumentasi

Sumber: pribadi

Setelah instalasi berhasil, dapat dilihat penggunaan framework dalam dokumentasi.

Untuk mengakses dokumentasi diperlukan untuk terhubung dengan jaringan lokal

Elevenia. Setelah itu baru dapat melihat dokumentasinya.

3.3 Rancangan Program Framework

3.3.1 Use Case

Gambar 3. 3 Use case Elevenia saat ini secara garis besar

Sumber: pribadi

Berdasarkan use case Elevenia saat ini secara garis besar, fitur masih berupa

fitur dasar untuk jual beli tanpa adanya pengalaman lebih untuk pengguna.

13


Gambar 3. 4 Use case Elevenia dengan fitur tambahan

Sumber: pribadi

Berdasarkan use case Elevenia dengan fitur tambahan flash sale dan melihat

post toko favorit, untuk menyediakan pengalaman lebih untuk pengguna

dengan komponen user interface yang berbeda dari sebelumnya. Kedua fitur

baru tersebut baru rencana awal, tidak menutup kemungkinan akan adanya fitur

baru yang lebih banyak ke depannya.

Gambar 3. 5 Use case program aplikasi

Sumber: pribadi

Untuk framework user interface yang akan dibangun. terdapat 2 aktor, yaitu UI

dan Frontend Developer yang dapat melihat dokumentasi serta menggunakan

framework dengan menginstalasi dan login NPM terlebih dahulu. Lalu UI

Designer yang dapat melihat dokumentasi untuk memastikan desain yang

dibuat cocok dengan desain yang dibuat oleh UI Designer.

14


3.3.2 Komponen pada Framework

Sistem saat ini tidak menggunakan framework dan terdapat inkonsistensi

desain pada antarmukanya. Contoh inkosistensi desain terdapat pada

komponen tombol/button.

Gambar 3. 6 Tombol pada halaman deals Elevenia

Sumber: (Elevenia, 2020)

Tombol pada gambar 3.6 memiliki efek timbul dengan border radius 2 pixel

dan warna tema utama merah dan warna alternatif abu-abu.

Gambar 3. 7 Tombol pada halaman produk Elevenia


Tombol pada gambar 3.7 memiliki efek datar dengan border radius 2 pixel dan

warna tema utama jingga dan warna alternatif putih dengan garis jingga.

Gambar 3. 8 Tombol pada footer Elevenia


Tombol pada gambar 3.8 memiliki efek gradasi dengan border radius 2 pixel

dan warna tema utama putih abu dengan garis abu.

Gambar 3. 9 Tombol pada halaman My Elevenia


Tombol pada gambar 3.9 memiliki efek datar dengan border radius 2 pixel

dan warna tema utama jingga dan warna alternatif putih dengan garis abu.

Gambar 3. 10 Tombol pada live chat Elevenia


Tombol pada gambar 3.10 memiliki efek datar dengan border radius 4 pixel

dan warna tema utama jingga yang lebih muda dari gambar 3.7.

15


Selain inkosistensi desain pada komponen tombol/button, masih ada banyak

inkosistensi desain serta kode pada situs web Elevenia. Diperlukan desain yang

konsisten dan komponen yang jelas. Maka dari itu, telah dibuat rancangan

komponen apa saja yang akan dibuat agar terstandarisasi desain dan kodenya.

Berdasarkan desain atomik, komponen dibagi menjadi atom, molekul,

organisme dengan dukungan utility. Karena templat dan halaman tidak

termasuk dalam desain dasar, maka tidak dimasukkan ke dalam daftar

komponen yang akan dibuat.

Tabel 1. Komponen pada framework

Sumber: pribadi

Atom Molekul Organisme Utility

• AlertBox

• Button

• Box

• Checkbox

• DatePicker

• Divider

• IconGlyph

• IconSpecial

• ModalBox

• Modal

• NextNavButton

• Radiobutton

• SelectButton

• Table

• TextField

• Toggle

• Accordion

• Breadcrumbs

• ButtonPopover

• OptionBox

• Pagination

• RangeSlider

• SearchBar

• Stepper

• Uploader

• Footer

• Header

• MegaMenu

• ProgressTracker

• Tabs

• Border

• Clearfix

• Color

• Display

• Flex

• Float

• Sizing

• Spacing

• Position

• Typography

• VerticalAlign

• Z-Index

Tabel 1 menunjukkan atom, molekul, organisme, dan utility apa saja yang akan

dibangun pada framework ini. Komponen-komponen di atas merupakan

rancangan awal dan dapat berubah sewaktu-waktu tergantung permintaan dan

kebutuhan. Desain dari komponen akan dibuat oleh UI designer.

16


3.3.3 Desain Mockup Dokumentasi

Desain dari dokumentasi yang akan dibuat terdiri dari halaman instalasi dan

dokumentasi.

Gambar 3. 11 Desain mockup dokumentasi

Sumber: pribadi

Desain pada gambar 3.11 merupakan desain tutorial dari penggunaan dan instalasi

framework

Gambar 3. 12 Desain mockup dokumentasi

Sumber: pribadi

17


Desain pada gambar 3.12 merupakan desain halaman penggunaan komponen-

komponen pada framework

3.4 Program Aplikasi

Program Aplikasi tediri atas framework dan juga dokumentasinya, dimana

framework dipasang menggunakan NPM (Node Package Manager). Sedangkan

dokumentasinya dapat dilihat untuk penggunaan framework.

3.4.1 Tampilan Dokumentasi Framework

Aplikasi berbentuk dokumentasi web, tampilan dari dokumentasi dapat dilihat pada

gambar berikut:

Gambar 3. 13 Tampilan dokumentasi

Sumber: pribadi

Tampilan dokumentasi terdiri atas utilities, atom, molekul, organisme, sesuai

dengan rancangan metodologi atomic design. Berikut merupakan macam utilities,

atom, molekul dan organisme:

1. Utilities

Utilities merupakan style tambahan pada kelas untuk mempermudah dalam

membuat tampilan. Berikut merupakan tampilan kelas utilities:

a. Border

Border merupakan utility yang digunakan untuk mengatur ketebalan garis

tepi.

18


Gambar 3. 14 Utility Border Color

Sumber: pribadi

Gambar 3.14 merupakan Border Color yang digunakan untuk mewarnai garis

tepi.

Gambar 3. 15 Utility Border Additive dan Border Substractive

Sumber: pribadi

Gambar 3.15 merupakan Border additive dan border substractive yang

digunakan untuk mengatur tata letak garis tepi.

Gambar 3. 16 Utility Border Radius

Sumber: pribadi

19


Gambar 3.16 menunjukkan Border Radius yang digunakan untuk mengatur

ketebalan garis tepi.

b. Clearfix

Gambar 3. 17 Utility Clearfix

Sumber: pribadi

Gambar 3.17 menunjukkan clearfix, yaitu kelas tambahan utility yang

digunakan untuk menghapus konten dengan cepat dan mudah.

c. Color

Color merupakan kelas tambahan untuk text dan background color

Gambar 3. 18 Utility Text Color

Sumber: pribadi

Gambar 3.18 merupakan gambar yang menunjukkan text color.

Gambar 3. 19 Utility Background Color

Sumber: pribadi

Gambar 3.19 merupakan gambar yang menunjukkan background color,

digunakan untuk mewarnai latar belakang teks.

20


d. Display

Display merupakan kelas tambahan utility untuk mengatur style tampilan

elemen.

Gambar 3.20 merupakan gambar yang menunjukkan display, digunakan untuk

mengatur tampilan nilai elemen yang dimasukkan ke dalam atribut class pada

komponen.

Gambar 3. 20 Utility Display

Sumber: pribadi

21


Gambar 3. 21 Utility Overlay dan Cursor

Sumber: pribadi

Gambar 3.21 merupakan gambar yang menunjukkan tampilan berupa overlay

dan cursor, digunakan untuk mengatur tampilan nilai elemen.

e. Flex

Flex digunakan untuk mengelola layout, posisi dan tampilan dari suatu

konten.

Gambar 3. 22 Utility Display Flex dan Display Inline Flex

Sumber: pribadi

Gambar 3.22 merupakan gambar yang menunjukkan display flex dan display

inline flex, digunakan untuk mengatur container.

22


Gambar 3. 23 Utility Flex Row, Flex Column, Justify Content dan Align Items

Sumber: pribadi

Gambar 3.23 merupakan gambar yang menunjukkan Flex Row, Flex Column,

Justify Content dan Align Items, digunakan untuk mengatur item dalam

container serta mengontrol posisi horizontal (main axis) maupun vertikal

(cross axis).

f. Float

Float merupakan utility untuk memposisikan suatu elemen, nilai dari float

sendiri adalah left, right, none.

23


Gambar 3. 24 Utility Float

Sumber: pribadi

Gambar 3.24 menunjukkan gambar float untuk memposisikan elemen left,

right dan none.

g. Sizing

Sizing merupakan utility yang mengatur lebar dan tinggi elemen.

Gambar 3. 25 Utility Sizing

Sumber: pribadi

Gambar 3.25 menunjukkan gambar sizing untuk mengatur lebar dan tinggi

elemen.

24


h. Spacing

Spacing merupakan utility yang digunakan untuk memodifikasi margin

dan padding.

Gambar 3.26 menunjukkan gambar spacing, digunakan untuk mengatur

margin dan padding.

Gambar 3. 26 Utility Spacing

Sumber: pribadi

25


i. Position

Position merupakan utility yang digunakan untuk mengkonfigurasi posisi

elemen.

Gambar 3. 27 Utility Position

Sumber: pribadi

Gambar 3.27 menunjukkan gambar position, digunakan untuk

mengkonfigurasi posisi elemen.

j. Typhography – Desktop

Typhography – Desktop merupakan utility yang mengatur dan menampilkan

desain teks typhographic.

26


Gambar 3. 28 Utility Typhography

Sumber: pribadi

Gambar 3.28 menunjukkan gambar typhography, digunakan untuk mengatur

teks elemen dengan desain typhographic.

k. Vertical Align

Vertical Align merupakan utility yang mengatur posisi vertikal dan hanya

mempengaruhi inline, inline-block, inline-table, dan table cell elements.

Gambar 3. 29 Utility Vertical Align

Sumber: pribadi

Gambar 3.29 menunjukkan gambar Vertical Align, digunakan untuk mengatur

posisi vertikal.

27


l. Z – index

Z – index merupakan utility yang mengatur layout dalam membuat elemen yang

bertumpuk-tumpuk (stack order)

Gambar 3. 30 Utility Z-Index

Sumber: pribadi

Gambar 3.30 menunjukkan gambar Z-Index, digunakan untuk membuat

tumpukan elemen.

2. Layout

Layout adalah desain dasar untuk membuat tampilan suatu website terutama

pada penataan elemen-elemen sebuah website. Berikut merupakan bagian dari

layout:

a. Container

Container merupakan tempat untuk menampung elemen grid sistem.

Gambar 3. 31 Layout Container

Sumber: pribadi

Gambar 3.31 menunjukkan gambar layout container, digunakan untuk

menampung elemen.

28


b. Grid

Grid merupakan pengaturan ukuran tampilan yang ditampilkan sesuai

dengan ukutan layar.

Gambar 3. 32 Layout Grid

Gambar 3.32 menunjukkan gambar grid, digunakan untuk mengatur tampilan

elemen.

3. Atom

Atom pada antarmuka berfungsi sebagai blok bangunan dasar. Atom-atom ini

termasuk HTML dasar elemen seperti label formulir, input, tombol, dan

lainnya yang tidak bisa dipecah lagi fungsinya. Berikut merupakan macam

komponen atom:

29


a. Alert Box

Alert box digunakan sebagai komponen untuk memberikan peringatan kepada

pengguna, terdiri dari 3 varian yaitu success, warning, dan danger. Terdiri dari

atom icon, teks, dan box.

Gambar 3. 33 Atom Alert Box

Sumber: pribadi

30


Gambar 3. 34 Lanjutan gambar Alert Box

Sumber: pribadi

Gambar 3.33 dan 3.34 menunjukkan gambar Alert Box, digunakan untuk

menampilkan sebuah dialog peringatan kepada user.

b. Button

Button digunakan sebagai tombol dengan 3 variasi ukuran yaitu: small, default,

dan large. Button juga memiliki properti variant untuk mengganti warna.

Gambar 3. 35 Atom Button Size

Sumber: pribadi

31


Gambar 3.35 menunjukkan gambar Button Size, digunakan untuk mengatur ukuran

tombol dari ukuran small, default dan large.

Gambar 3. 36 Atom Button Type

Sumber: pribadi

32


Gambar 3.36 menunjukkan gambar Button Type, digunakan untuk mengatur jenis

tombol.

Gambar 3. 37 Atom Button Level dan Floating

Sumber: pribadi

33


Gambar 3.37 menunjukkan gambar Button Level dan Floating, digunakan untuk

mengatur level dan floating tombol.

c. Box

Box digunakan sebagai komponen untuk menampung komponen lainnya. Box

didesain dengan menggunakan box shadow.

Gambar 3. 38 Atom Box

Sumber: pribadi

Gambar 3.38 menunjukkan gambar Box, digunakan untuk menampung

komponen lainnya. Terdiri dari default, action dan disable.

34


d. Checkbox

Checkbox adalah bagian dari form untuk mencentang satu atau lebih pilihan.

Dengan kotak yang dapat diceklis jika diklik dan teks di sebelah kanannya.

Gambar 3. 39 Atom Checkbox

Sumber: pribadi

Gambar 3.39 menunjukkan gambar checbox, digunakan untuk membuat kotak

isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa

digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.

e. Datepicker

Date picker adalah input date dengan kalender dan input yang desainnya telah

disesuaikan dengan desain dari Elevenia.

35


Gambar 3. 40 Atom Datepicker

Sumber: pribadi

Gambar 3.40 menunjukkan gambar Datepicker, digunakan untuk memilih

tanggal yang telah disesuaikan.

f. Divider

Divider merupakan pembatas section yang terdiri dari garis dan teks

Gambar 3. 41 Atom Divider

Sumber: pribadi

Gambar 3.41 menunjukkan gambar Divider, digunakan sebagai pembatas.

g. Icon Glyph

Icon Glyph merupakan simbol grafis dasar yang menyediakan tampilan atau

bentuk font yang di styling sesuai dengan kriteria dari desainer, dimana variasi

icon disesuaikan dengan kebutuhan.

36


Gambar 3. 42 Atom Icon Glyphs 16px

Sumber: pribadi

Gambar 3.42 menunjukkan gambar Icon Glyphs ukuran 16pixel yang terdiri

dari 90 gambar, digunakan untuk menambah simbol. Teks di bawah icon pada

dokumentasi merupakan nama class yang dapat kita tambahkan pada

komponen icon.

37


Gambar 3. 43 Atom Icon Glyphs 24px

Sumber: pribadi

Gambar 3.43 menunjukkan gambar Icon Glyphs ukuran 24pixel yang terdiri

dari 90 gambar, digunakan untuk menambah simbol. Teks di bawah icon pada

dokumentasi merupakan nama class yang dapat kita tambahkan pada

komponen icon.

38


h. Icon Special

Icon special merupakan bagian dari icon khusus yang memiliki 2 warna dan

hanya terdapat pada komponen tertentu seperti tab.

Gambar 3. 44 Atom Icon Special 36px

Sumber: pribadi

Gambar 3.44 menunjukkan gambar Icon Special ukuran 36pixel yang terdiri

dari 16 gambar, digunakan untuk menambah simbol.

Gambar 3. 45 Atom Icon Special 40px

Sumber: pribadi

Gambar 3.45 menunjukkan gambar Icon Special ukuran 40pixel yang terdiri

dari 16 gambar, digunakan untuk menambah simbol.

39


i. Modal Box

Moda Boxl adalah komponen box yang muncul pada layar berupa sebuah kotak

dialog atau sering di sebut dengan popup yang menampilkan pesan atau

konfirmasi untuk suatu aksi.

Gambar 3. 46 Atom Modal Box ukuran small dan medium

Sumber: pribadi

40


Gambar 3. 47 Atom Modal Box ukuran Large dan Extra Large

Sumber: pribadi

Gambar 3. 48 Atom Tipe Modal

Sumber: pribadi

41


Gambar 3. 49 Lanjutan Gambar Tipe Modal

Sumber: pribadi

42


Gambar 3. 50 Atom Toast Modal

Sumber: pribadi

Gambar 3.50 adalah atom toast modal, yaitu modal dengan tipe toast yang

dapat diatur menjadi vertical maupun horizontal

43


Gambar 3. 51 Atom Modal Box with Banner

Sumber: pribadi

44


Gambar 3. 52 Atom Modal Box untuk Mobile

Sumber: pribadi

j. Modal

Modal adalah komponen yang muncul pada layar ketika komponen triggernya

diklik.

Gambar 3. 53 Atom Modal

Sumber: pribadi

k. Next-Navigation Button

Next navigation button adalah tombol untuk bernavigasi ke komponen sebelum

maupun sesudahnya (left, right, both direction).

45


Gambar 3. 54 Atom Next-Navigation Button

Sumber: pribadi

Gambar 3.54 menunjukkan gambar Next-Navigation Button, digunakan untuk

bernavigasi ke komponen sebelum maupun sesudahnya.

l. Radio Button

Radio Button adalah tombol pilihan yang diisi dengan cara memilih dari salah

satu tombol radio yang ada. Radio biasa digunakan untuk pilihan yang

membatasi user untuk memilih satu dari pilihan yang ada.

46


Gambar 3. 55 Atom Radio Button

Sumber: pribadi

Gambar 3.55 menunjukkan gambar Radio Button, digunakan untuk

mencentang satu dari banyaknya pilihan.

m. Select Button

Select Button adalah tombol yang funginya untuk memilih pilihan

Gambar 3. 56 Atom Select Button

Sumber: pribadi

Gambar 3.56 menunjukkan gambar Select Button, digunakan untuk memilih

pilihan yang dipilih user

47


n. Table

Tabel merupakan struktur yang digunakan untuk menampilkan informasi

dalam bentuk baris dan kolom.

Gambar 3. 57 Atom Table

Sumber: pribadi

Gambar 3.57 menunjukkan gambar Table, merupakan tabel seperti pada

umumnya namun distyling demikian rupa agar sesuai dengan desain yang

diberikan oleh desainer dengan warna yang berbeda dari tabel pada umunya.

o. Textfield

Textfield adalah area satu baris yang memungkinkan pengguna untuk

memasukkan teks. Textfield terdiri dari berbagai macam input yang ada

pada form, textfield juga dapat diartikan sebagai input text pada html.

Textfield yang ada pada framework ini telah sesuai dengan ukuran yang

ditentukan serta gaya yang dibuat oleh desainer Elevenia.

48


Gambar 3. 58 Atom Textfield untuk desktop

Sumber: pribadi

Gambar 3.58 menunjukkan atom Textfield dengan kondisi basic full width,

basic dengan multiple field inline, label and helptext full width, dan label

and helptext multiple field inline.

Gambar 3. 59 Atom Textfield untuk desktop

Sumber: pribadi

49


Gambar 3. 60 Atom Lanjutan gambar Textfield untuk desktop

Sumber: pribadi

Gambar 3.60 menunjukkan atom Textfield kecil dengan kondisi basic full

width, basic dengan multiple field inline, label and helptext full width, label

and helptext multiple field inline, logo di kiri dan juga logo di kanan.

Gambar 3. 61 Atom Lanjutan gambar Textfield condition untuk desktop

Sumber: pribadi

Gambar 3.58 menunjukkan atom Textfield dengan kondisi basic default,

basic with helptext, basic disabled, success default, success with helptext,

success disabled, error default, error with helptext, error disabled,

autocomplete default, dan autocomplete with helptext.

50


Gambar 3. 62 Atom Textfield untuk Mobile

Sumber: pribadi

Gambar 3. 63 Atom Lanjutan gambar Textfield condition untuk Mobile

Sumber: pribadi

p. Toggle

Toggle adalah elemen yang dibuat menggunakan bagian dari elemen input,

yaitu checkbox. Elemen switch toggle sendiri memiliki dua fungsi yaitu true

atau false (aktif atau tidak aktif) seperti layaknya juga peran elemen checkbox

pada html.

51


Gambar 3. 64 Atom Toggle Default, Default Checked, Disabled

Sumber: pribadi

Gambar 3. 65 Atom Toggle Label Right, Label Left, Label Inside

Sumber: pribadi

4. Molekul

Molekul adalah kelompok elemen UI yang relatif sederhana yang berfungsi

bersama sebagai satu kesatuan. Berikut merupakan tampilan kelas molekul:

52


a. Accordion

Gambar 3. 66 Molekul Accordion

Sumber: pribadi

Gambar 3.66 menunjukkan gambar Accordion, terdiri dari teks dan icon yang

membentuk komponen show-hide.

b. Breadcrumbs

Gambar 3. 67 Molekul Breadcrumbs

Sumber: pribadi

Gambar 3.67 menunjukkan gambar Breadcrumb digunakan untuk melihat

menu yang memiliki sub-menu. Terdiri dari atom teks dan icon.

c. Button Popover

Gambar 3. 68 Molekul Button Popover

Sumber: pribadi

53


Gambar 3.68 menunjukkan gambar Button popover, yaitu berfungsi sama

seperti tombol pada umumnya, namun jika diklik akan muncul action lainnya

yang dapat diklik.

d. Option Box

Gambar 3. 69 Molekul Option Box

Sumber: pribadi

Gambar 3.69 menunjukkan gambar option box, yaitu input dengan berbagai

macam pilihan. Pada html biasa option box disebut juga dengan select option.

e. Pagination

Gambar 3. 70 Molekul Pagination

Sumber: pribadi

Gambar 3.73 menunjukkan gambar pagination, yaitu komponen pendukung

jika konten pada suatu halaman terlalu banyak. Terdiri dari atom button, icon

dan teks.

54


f. Range Slider

Gambar 3. 71 Molekul Range Slider

Sumber: pribadi

Gambar 3.71 menunjukkan gambar range slider, digunakan sebagai

komponen untuk menentukan range nilai seperti filter untuk harga.

g. Search Bar

Gambar 3. 72 Molekul Search Bar

Sumber: pribadi

55


Gambar 3. 73 Lanjutan gambar molekul search bar

Sumber: pribadi

Gambar 3.72 dan 3.73 menunjukkan gambar Search bar, yaitu komponen

untuk mencari dengan kata kunci. Terdiri dari icon, tombol, list dan textfield.

h. Stepper

Gambar 3. 74 Molekul Stepper Enabled

Sumber: pribadi

56


Gambar 3. 75 Molekul Stepper Disabled

Sumber: pribadi

Gambar 3.74 dan 3.75 menunjukkan gambar Search bar, Molekul yang

menentukan interval antara angka legal dalam elemen <input>.

i. Uploader

Uploader adalah input file yang didesain sedemikian rupa agar sesuai dengan

desain yang ada.

57


Gambar 3. 76 Molekul Uploader

Sumber: pribadi

58


5. Organisme

Organisme adalah komponen UI yang relatif kompleks, terdiri dari kelompok

molekul dan / atau atom dan / atau organisme lain. Berikut merupakan kelas

organisme:

a. Header

Gambar 3. 77 Organisme Header

Sumber: pribadi

Gambar 3.77 menunjukkan gambar Header, yaitu organisme yang terdiri dari

HeaderLeft dengan logo, HeaderBody dengan SearchBar, dan HeaderRight

dengan Icon.

b. Footer

Gambar 3. 78 Organisme Footer

Sumber: pribadi

Gambar 3.78 menunjukkan gambar Footer, yaitu organisme yang terdiri dari

FooterLeft dengan logo dan teks, serta FooterRight dengan Button.

c. Mega Menu

Gambar 3. 79 Organisme Mega Menu

Sumber: pribadi

Gambar 3.79 menunjukkan gambar Mega Menu, yaitu dropdown yang dipicu

oleh tautan atau area yang ditentukan.

59


d. Progress Tracker

Gambar 3. 80 Organisme Progress Tracker

Sumber: pribadi

Gambar 3. 81 Lanjutan gambar Organisme Progress Tracker (code)

Sumber: pribadi

Gambar 3.81 menunjukkan gambar Progress tracker, yaitu komponen kustom

Elevenia untuk melihat progres, seperti progres pengiriman barang maupun

pembelian.

60


e. Tabs

Gambar 3. 82 Organisme Tabs Default

Sumber: pribadi

Gambar 3. 83 Organisme Tabs Vertical dan Tabs Logo

Sumber: pribadi

61


Gambar 3. 84 Organisme Tabs Fitted

Sumber: pribadi

Gambar 3.82, 3.83 dan 3.84 menunjukkan gambar Tabs, merupakan tombol menu

untuk berpindah tab. Terdiri dari tombol, box, dan garis yang telah dikustomisasi.

3.4.2 Tahap Pembuatan Package NPM

Framework harus diupload dalam bentuk package NPM agar dapat diinstall dan

digunakan, maka dari itu diperlukan beberapa tahapan untuk membuat package

NPM:

1. Membuat akun npm di website npmjs.com

Gambar 3. 85 Akun npm

Sumber: (npmjs.com)

Gambar 3.85 menunjukkan gambar akun npm, pembuatan akun dilakukan di

website npmjs.com.

62


2. Membuat script build untuk memisahkan folder yang akan dibuild

Gambar 3. 86 Script build

Sumber: pribadi

Gambar 3.86 menunjukkan script build npm, dilakukan untuk memisahkan

folder yang akan dibuild.

3. Membuat branch build pada github dan mengunggah seluruh folder build

ke branch build

Gambar 3. 87 Branch build

Sumber: (github.com/mutiadianita)

Gambar 3.87 menunjukkan branch build pada github dan mengunggah seluruh

folder build ke branch build.

4. Buka terminal atau command prompt lalu login ke npm dengan

menjalankan script npm login

Gambar 3. 88 script npm login

Sumber: pribadi

Gambar 3.88 menunjukkan gambar login npm melalui command prompt.

63


5. Inisiasi package npm dengan script npm init

Gambar 3. 89 Inisiasi package npm

Sumber: pribadi

Gambar 3.89 menunjukkan gambar inisiasi package npm dengan script npm

init.

6. Terakhir, publish dengan script npm publish

Gambar 3. 90 Publish Script

Sumber: pribadi

Gambar 3.90 menunjukkan gambar publish framework dengan script npm

publish

7. Package npm yang sudah dipublish dapat dilihat di npmjs.com

Gambar 3. 91 Hasil publish package

Sumber: pribadi

Gambar 3.91 menunjukkan gambar hasil package npm yang telah dipublish dan

dapat dilihat di website npmjs.com.

64

BAB IV

PEMBAHASAN

4. 1 Pengujian

Pengujian ini bertujuan untuk mengetahui kecacatan dari framework dan kesesuaian

framework dengan requirement sehingga kualitas dari aplikasi dapat terjamin.

Framework diharapkan memiliki kualitas yang baik sehingga mampu memenuhi

kebutuhan pengembangan web oleh user.

4. 2 Deskripsi Pengujian

Pengujian framework dilakukan menggunakan pengujian metode black box.

Pengujian black box bertujuan agar sistem terbebas error dan sesuai dengan desain.

Pengujian black box berfokus untuk mengetahui apakah semua komponen dapat

digunakan sesuai dengan desain dan fungsinya.

4. 3 Prosedur Pengujian

Pengujian terhadap framework dilakukan dengan tujuan memastikan framework

yang dibuat telah bekerja sebagaimana mestinya dan memenuhi tujuannya.

Pengujian dilakukan setelah perancangan dan pembuatan sistem selesai dilakukan.

Pengujian terdiri atas pengujian alpha dan juga User Acceptance Test yang

dilakukan oleh designer dan developer.

4.4 Data Hasil Pengujian

4.4.1 Data Hasil Pengujian Alpha

Pengujian framework dilakukan pada utility, layout, atom, molekul, dan organisme

penulis. Kolom item uji adalah item yang diuji, butir uji adalah pengujian yang

dilakukan, sedangkan kolom hasil yang diharapkan merupakan hasil dari butir uji.

Tabel 2. Hasil pengujian alpha

Kode Item Uji Butir Uji Hasil

1 2 3 4

A.1 Utility

Border

Menyesuaikan desain utility border

dengan desain dari desainer

Sesuai

A.2 Menyesuaikan penggunaan className

border

Sesuai

65


1 2 3 4

B.1 Utility

Clearfix

Menyesuaikan desain utility clearfix


Sesuai

B.2 Menyesuaikan penggunaan className

clearfix

Sesuai

C.1

Utility Color

Menyesuaikan desain utility color dengan

desain dari desainer

Sesuai

C.2 Menyesuaikan penggunaan className

color

Sesuai

D.1 Utility

Display

Menyesuaikan desain utility display


Sesuai

D.2 Menyesuaikan penggunaan className

display

Sesuai

E.1

Utility Flex

Menyesuaikan desain utility flex dengan


Sesuai

E.2 Menyesuaikan penggunaan className

flex

Sesuai

F.1

Utility Float

Menyesuaikan desain utility float dengan


Sesuai

F.2 Menyesuaikan penggunaan className

float

Sesuai

G.1

Utility Sizing

Menyesuaikan desain utility sizing dengan


Sesuai

G.2 Menyesuaikan penggunaan className

sizing

Sesuai

H.1 Utility

Spacing

Menyesuaikan desain utility spacing


Sesuai

H.2 Menyesuaikan penggunaan className

spacing

Sesuai

I.1 Utility

Position

Menyesuaikan desain utility position


Sesuai

66


1 2 3 4

I.2 Utility

Position

Menyesuaikan penggunaan className

clearfix

Sesuai

J.1 Utility

Typography

Menyesuaikan desain utility typography


Sesuai

J.2 Menyesuaikan penggunaan className

typography

Sesuai

K.1 Utility

Vertical

Align

Menyesuaikan desain utility vertical align


Sesuai

K.2 Menyesuaikan penggunaan className

vertical align

Sesuai

L.1 Utility Z-

Index

Menyesuaikan desain utility z-index


Sesuai

L.2 Menyesuaikan penggunaan className z-

index

Sesuai

M.1

Layout Grid

Menyesuaikan desain layout grid dengan


Sesuai

M.2 Menyesuaikan penggunaan className

layout grid

Sesuai

N.1 Atom Alert

Box

Menyesuaikan desain atom alert box


Sesuai

N.2 Menyesuaikan penggunaan className

dan komponen AlertBox

Sesuai

O.1

Atom Button

Menyesuaikan desain atom button dengan


Sesuai

O.2 Menyesuaikan penggunaan className

dan komponen Button

Sesuai

P.1

Atom Box

Menyesuaikan desain atom box dengan


Sesuai

P.2 Menyesuaikan penggunaan className

dan komponen Box

Sesuai

67


1 2 3 4

Q.1 Atom Check

Box

Menyesuaikan desain atom checkbox


Sesuai

Q.2 Menyesuaikan penggunaan className

dan komponen CheckBox

Sesuai

R.1 Atom Date

Picker

Menyesuaikan desain atom date picker


Sesuai

R.2 Menyesuaikan penggunaan className

dan komponen DatePicker

Sesuai

S.1 Atom

Divider

Menyesuaikan desain atom divider


Sesuai

S.2 Menyesuaikan penggunaan className

dan komponen Divider

Sesuai

T.1 Atom Icon

Glyph

Menyesuaikan desain atom icon glyph


Sesuai

T.2 Menyesuaikan penggunaan className

dan komponen Icon

Sesuai

U.1 Atom Icon

Special

Menyesuaikan desain atom icon special


Sesuai

U.2 Menyesuaikan penggunaan className

dan komponen IconSpecial

Sesuai

V.1 Atom Modal

Box

Menyesuaikan desain atom modal box


Sesuai

V.2 Menyesuaikan penggunaan className

dan komponen ModalBox

Sesuai

W.1

Atom Modal

Menyesuaikan desain atom modal dengan


Sesuai

W.2 Menyesuaikan penggunaan className

dan komponen Modal

Sesuai

X.1 Atom Next

Nav Button

Menyesuaikan desain atom next nav

button dengan desain dari desainer

Sesuai

68


1 2 3 4

X.2 Atom Next

Nav Button


dan komponen NextNavButton

Sesuai

Y.1 Atom Radio

Button

Menyesuaikan desain atom radio button


Sesuai

Y.2 Menyesuaikan penggunaan className

dan komponen RadioButton

Sesuai

Z.1 Atom Select

Button

Menyesuaikan desain atom select button


Sesuai

Z.2 Menyesuaikan penggunaan className

dan komponen SelectButton

Sesuai

AA.1

Atom Table

Menyesuaikan desain atom table dengan


Sesuai

AA.2 Menyesuaikan penggunaan className

dan komponen Table

Sesuai

AB.1 Atom Text

Field

Menyesuaikan desain atom text field


Sesuai

AB.2 Menyesuaikan penggunaan className

dan komponen TextField

Sesuai

AC.1

Atom Toggle

Menyesuaikan desain atom toggle dengan


Sesuai

AC.2 Menyesuaikan penggunaan className

dan komponen Toggle

Sesuai

AD.1 Molekul

Accordion

Menyesuaikan desain molekul accordion


Sesuai

AD.2 Menyesuaikan penggunaan className

dan komponen Accordion

Sesuai

AE.1

Molekul

Breadcrumbs

Menyesuaikan desain molekul

breadcrumbs dengan desain dari desainer

Sesuai

AE.2 Menyesuaikan penggunaan className

dan komponen Breadcrumbs

Sesuai

69


1 2 3 4

AF.1 Molekul

Button

Popover

Menyesuaikan desain molekul button

popover dengan desain dari desainer

Sesuai

AF.2 Menyesuaikan penggunaan className

dan komponen ButtonPopover

Sesuai

AG.1 Molekul

Option Box

Menyesuaikan desain molekul option box


Sesuai

AG.2 Menyesuaikan penggunaan className

dan komponen OptionBox

Sesuai

AH.1 Molekul

Pagination

Menyesuaikan desain molekul pagination


Sesuai

AH.2 Menyesuaikan penggunaan className

dan komponen Pagination

Sesuai

AI.1 Molekul

Range Slider

Menyesuaikan desain molekul range

slider dengan desain dari desainer

Sesuai

AI.2 Menyesuaikan penggunaan className

dan komponen RangeSlider

Sesuai

AJ.1 Molekul

Search Bar

Menyesuaikan desain molekul search bar


Sesuai

AJ.2 Menyesuaikan penggunaan className

dan komponen SearchBar

Sesuai

AK.1 Molekul

Stepper

Menyesuaikan desain molekul stepper


Sesuai

AK.2 Menyesuaikan penggunaan className

dan komponen Stepper

Sesuai

AL.1 Molekul

Uploader

Menyesuaikan desain molekul uploader


Sesuai

AL.2 Menyesuaikan penggunaan className

dan komponen Uploader

Sesuai

AM.1 Organisme

Header

Menyesuaikan desain organisme header


Sesuai

70


1 2 3 4

AM.2 Organisme

Header


dan komponen Header

Sesuai

AN.1 Organisme

Footer

Menyesuaikan desain organisme header


Sesuai

AN.2 Menyesuaikan penggunaan className

dan komponen Header

Sesuai

AO.1 Organisme

Mega Menu

Menyesuaikan desain organisme mega

menu dengan desain dari desainer

Sesuai

AO.2 Menyesuaikan penggunaan className

dan komponen MegaMenu

Sesuai

AP.1 Organisme

Progress

Tracker

Menyesuaikan desain organisme progress

tracker dengan desain dari desainer

Sesuai

AP.2 Menyesuaikan penggunaan className

dan komponen ProgressTracker

Sesuai

AQ.1 Organisme

Tabs

Menyesuaikan desain organisme tabs


Sesuai

AQ.2 Menyesuaikan penggunaan className

dan komponen Tabs

Sesuai

4.4.2 Data Hasil Pengujian Beta

1. User Acceptance Test Desainer


oleh desainer. Desainer yang menguji desain framework adalah Faruza Arkan, UI

designer dari tim product design Elevenia.

Tabel 3. Hasil pengujian User Acceptance Test desainer

Kode Item Uji Hasil yang

diharapkan

Hasil yang

didapat Kesimpulan

A.1 Utility

Border

Menyesuaikan desain

utility border dengan


Utility border

sesuai dengan

desain

[✓] Diterima [ ] Ditolak

71


1 2 3 4 5

B.1 Utility

Clearfix

Menyesuaikan desain

utility clearfix dengan


Utility clearfix

sesuai dengan

desain


C.1 Utility

Color

Menyesuaikan desain

utility color dengan


Utility color

sesuai dengan

desain


D.1 Utility

Display

Menyesuaikan desain

utility display dengan


Utility display

sesuai dengan

desain


E.1 Utility Flex

Menyesuaikan desain

utility flex dengan


Utility flex sesuai

dengan desain


F.1 Utility

Float

Menyesuaikan desain

utility float dengan


Utility float

sesuai dengan

desain


G.1 Utility

Sizing

Menyesuaikan desain

utility sizing dengan


Utility sizing

sesuai dengan

desain


H.1 Utility

Spacing

Menyesuaikan desain

utility spacing dengan


Utility spacing

sesuai dengan

desain


I.1 Utility

Position

Menyesuaikan desain

utility position dengan


Utility position

sesuai dengan

desain


J.1

Utility

Typograph

y

Menyesuaikan desain

utility typography

dengan desain dari

desainer

Utility

typography

sesuai dengan

desain


K.1

Utility

Vertical

Align

Menyesuaikan desain

vertical align dengan


Utility vertical

align sesuai

dengan desain


72


1 2 3 4 5

L.1 Utility Z-

Index

Menyesuaikan desain

utility z-index dengan


Utility z-index

sesuai dengan

desain


M.1 Layout

Grid

Menyesuaikan desain

layout grid dengan


Layout grid

sesuai dengan

desain


N.1 Atom Alert

Box

Menyesuaikan desain

atom alert box dengan


Atom alert box

sesuai dengan

desain


O.1 Atom

Button

Menyesuaikan desain

atom button dengan


Atom button

sesuai dengan

desain


P.1 Atom Box

Menyesuaikan desain

atom box dengan


Atom box sesuai

dengan desain


Q.1 Atom

Check Box

Menyesuaikan desain

atom checkbox dengan


Atom checkbox

sesuai dengan

desain


R.1 Atom Date

Picker

Menyesuaikan desain

atom date picker

dengan desain dari

desainer

Atom date picker

sesuai dengan

desain


S.1 Atom

Divider

Menyesuaikan desain

atom divider dengan


Atom divider

sesuai dengan

desain


T.1 Atom Icon

Glyph

Menyesuaikan desain

atom icon glyph

dengan desain dari

desainer

Atom icon sesuai

dengan desain


73


1 2 3 4 5

U.1 Atom Icon

Special

Menyesuaikan desain

atom icon special

dengan desain dari

desainer

Atom icon

special sesuai

dengan desain


V.1 Atom

Modal Box

Menyesuaikan desain

atom modal box

dengan desain dari

desainer

Atom modal box

sesuai dengan

desain


W.1 Atom

Modal

Menyesuaikan desain

atom modal dengan


Atom modal

sesuai dengan

desain


X.1 Atom Next

Nav Button

Menyesuaikan desain

atom next nav button

dengan desain dari

desainer

Atom next nav

button sesuai

dengan desain


Y.1

Atom

Radio

Button

Menyesuaikan desain

atom radio button

dengan desain dari

desainer

Atom radio

button sesuai

dengan desain


Z.1

Atom

Select

Button

Menyesuaikan desain

atom select button

dengan desain dari

desainer

Atom select

button sesuai

dengan desain


AA.1 Atom

Table

Menyesuaikan desain

atom table dengan


Atom table

sesuai dengan

desain


AB.1 Atom Text

Field

Menyesuaikan desain

atom text field dengan


Atom text field

sesuai dengan

desain


74


1 2 3 4 5

AC.1 Atom

Toggle

Menyesuaikan desain

atom toggle dengan


Atom toggle

sesuai dengan

desain


AD.1 Molekul

Accordion

Menyesuaikan desain

molekul accordion

dengan desain dari

desainer

Molekul

accordion sesuai

dengan desain


AE.1

Molekul

Breadcrum

bs

Menyesuaikan desain

molekul breadcrumbs

dengan desain dari

desainer

Molekul

breadcrumbs

sesuai dengan

desain


AF.1

Molekul

Button

Popover

Menyesuaikan desain

molekul button

popover dengan


Molekul button

popover sesuai

dengan desain


AG.1 Molekul

Option Box

Menyesuaikan desain

molekul option box

dengan desain dari

desainer

Molekul option

box sesuai

dengan desain


AH.1 Molekul

Pagination

Menyesuaikan desain

molekul pagination

dengan desain dari

desainer

Molekul

pagination sesuai

dengan desain


AI.1

Molekul

Range

Slider

Menyesuaikan desain

molekul range slider

dengan desain dari

desainer

Atom range

slider sesuai

dengan desain


AJ.1 Molekul

Search Bar

Menyesuaikan desain

molekul search bar

dengan desain dari

desainer

Molekul search

bar sesuai

dengan desain


75


1 2 3 4 5

AK.1 Molekul

Stepper

Menyesuaikan desain

molekul stepper

dengan desain dari

desainer

Molekul stepper

sesuai dengan

desain


AL.1 Molekul

Uploader

Menyesuaikan desain

molekul uploader

dengan desain dari

desainer

Atom uploader

sesuai dengan

desain


AM.1 Organisme

Header

Menyesuaikan desain

organisme header

dengan desain dari

desainer

Organisme

header sesuai

dengan desain


AN.1 Organisme

Footer

Menyesuaikan desain

organisme header

dengan desain dari

desainer

Organisme footer

sesuai dengan

desain


AO.1

Organisme

Mega

Menu

Menyesuaikan desain

organisme mega menu

dengan desain dari

desainer

Organisme mega

menu sesuai

dengan desain


AP.1

Organisme

ProgressTr

acker

Menyesuaikan desain

organisme progress

tracker dengan desain

dari desainer

Organisme

progress tracker

sesuai dengan

desain


AQ.1 Organisme

Tabs

Menyesuaikan desain

organisme tabs

dengan desain dari

desainer

Organisme tabs

sesuai dengan

desain


76


2. User Acceptance Test Developer


oleh developer. Kolom item uji adalah item yang diuji, hasil yang diharapkan adalah

hasil yang diharapkan diterima, kolom hasil yang didapat merupakan hasil dari butir

uji, sedangkan kesimpulan adalah kesimpulan dari hasil yang didapat apakah hasil

yang diharapkan diterima atau tidak. Developer yang menguji desain framework

adalah Ali Syahidin, frontend developer dari tim frontend Elevenia.

Tabel 4. Pengujian User Acceptance Test Developer

Kode Item

Uji

Hasil yang

diharapkan Hasil yang didapat Kesimpulan

1 2 3 4 5

A.2 Utility

Border

Menyesuaikan

penggunaan

className border

className border

sesuai dan dapat

digunakan


B.2 Utility

Clearfix

Menyesuaikan

penggunaan

className clearfix

className clearfix

sesuai dan dapat

digunakan


C.2 Utility

Color

Menyesuaikan

penggunaan

className color

className color

sesuai dan dapat

digunakan


D.2 Utility

Display

Menyesuaikan

penggunaan

className display

className display

sesuai dan dapat

digunakan


E.2 Utility

Flex

Menyesuaikan

penggunaan

className flex

className flex

sesuai dan dapat

digunakan


F.2 Utility

Float

Menyesuaikan

penggunaan

className float

className float

sesuai dan dapat

digunakan


G.2 Utility

Sizing

Menyesuaikan

penggunaan

className sizing

className sizing

sesuai dan dapat

digunakan


77


1 2 3 4 5

H.2 Utility

Spacing

Menyesuaikan

penggunaan

className spacing

className spacing

sesuai dan dapat

digunakan


I.2 Utility

Position

Menyesuaikan

penggunaan

className clearfix

className position

sesuai dan dapat

digunakan


J.2

Utility

Typogra

phy

Menyesuaikan

penggunaan

className typography

className

typography sesuai

dan dapat digunakan


K.2

Utility

Vertical

Align

Menyesuaikan

penggunaan

className vertical

align

className vertical

align sesuai dan

dapat digunakan


L.2 Utility

Z-Index

Menyesuaikan

penggunaan

className z-index

className z-index

sesuai dan dapat

digunakan


M.2 Layout

Grid

Menyesuaikan

penggunaan

className layout grid

className layout

grid sesuai dan

dapat digunakan


N.2

Atom

Alert

Box

Menyesuaikan

penggunaan

className dan

komponen AlertBox

className dan

attribute Atom alert

box sesuai dan dapat

digunakan


O.2 Atom

Button

Menyesuaikan

penggunaan

className dan

komponen Button

className dan

attribute Atom

button sesuai dan

dapat digunakan


P.2 Atom

Box

Menyesuaikan

penggunaan

className dan

komponen Box

className dan

attribute Atom box

sesuai dan dapat

digunakan


78


1 2 3 4 5

Q.2

Atom

Check

Box

Menyesuaikan

penggunaan

className dan

komponen CheckBox

className dan

attribute Atom

checkbox sesuai dan

dapat digunakan


R.2

Atom

Date

Picker

Menyesuaikan

penggunaan

className dan

komponen DatePicker

className dan

attribute Atom date

picker sesuai dan

dapat digunakan


S.2 Atom

Divider

Menyesuaikan

penggunaan

className dan

komponen Divider

className dan

attribute Atom

divider sesuai dan

dapat digunakan


T.2

Atom

Icon

Glyph

Menyesuaikan

penggunaan

className dan

komponen Icon

className dan

attribute Atom icon

sesuai dan dapat

digunakan


U.2

Atom

Icon

Special

Menyesuaikan

penggunaan

className dan

komponen

IconSpecial

className dan

attribute Atom icon

special sesuai dan

dapat digunakan


V.2

Atom

Modal

Box

Menyesuaikan

penggunaan

className dan

komponen ModalBox

className dan

attribute Atom

modal box sesuai

dan dapat digunakan


W.2 Atom

Modal

Menyesuaikan

penggunaan

className dan

komponen Modal

className dan

attribute Atom

modal sesuai dan

dapat digunakan


79


1 2 3 4 5

X.2

Atom

Next

Nav

Button

Menyesuaikan

penggunaan

className dan

komponen

NextNavButton

className dan

attribute Atom next

nav button sesuai

dan dapat digunakan


Y.2

Atom

Radio

Button

Menyesuaikan

penggunaan

className dan

komponen

RadioButton

className dan

attribute Atom

radio button sesuai

dan dapat digunakan


Z.2

Atom

Select

Button

Menyesuaikan

penggunaan

className dan

komponen

SelectButton

className dan

attribute Atom

select button sesuai

dan dapat digunakan


AA.2 Atom

Table

Menyesuaikan

penggunaan

className dan

komponen Table

className dan

attribute Atom table

sesuai dan dapat

digunakan


AB.2

Atom

Text

Field

Menyesuaikan

penggunaan

className dan

komponen TextField

className dan

attribute Atom text

field sesuai dan

dapat digunakan


AC.2 Atom

Toggle

Menyesuaikan

penggunaan

className dan

komponen Toggle

className dan

attribute Atom

toggle sesuai dan

dapat digunakan


AD.2

Molekul

Accordi

on

Menyesuaikan

penggunaan

className dan

komponen Accordion

className, attribute

dan fungsi Molekul

button sesuai dan

dapat digunakan


80


1 2 3 4 5

AE.2

Molekul

Breadcr

umbs

Menyesuaikan

penggunaan

className dan

komponen

Breadcrumbs

className dan

attribute Molekul

breadcrumbs sesuai

dan dapat digunakan


AF.2

Molekul

Button

Popover

Menyesuaikan

penggunaan

className dan

komponen

ButtonPopover


dan fungsi Molekul

button popover

sesuai dan dapat

digunakan


AG.2

Molekul

Option

Box

Menyesuaikan

penggunaan

className dan

komponen OptionBox


dan fungsi Molekul

option box sesuai

dan dapat digunakan


AH.2

Molekul

Paginati

on

Menyesuaikan

penggunaan

className dan

komponen Pagination


dan fungsi Molekul

pagination sesuai

dan dapat digunakan


AI.2

Molekul

Range

Slider

Menyesuaikan

penggunaan

className dan

komponen

RangeSlider

className,

attribute, dan fungsi

Molekul range

slider sesuai dan

dapat digunakan


AJ.2

Molekul

Search

Bar

Menyesuaikan

penggunaan

className dan

komponen SearchBar

className dan

attribute Molekul

search bar sesuai

dan dapat digunakan


AK.2 Molekul

Stepper

Menyesuaikan

penggunaan

className dan

komponen Stepper

className,attribute,

dan fungsi Molekul

stepper sesuai dan

dapat digunakan


81


1 2 3 4 5

AL.2

Molekul

Uploade

r

Menyesuaikan

penggunaan

className dan

komponen Uploader

className,

attribute, dan fungsi

Molekul uploader

sesuai dan dapat

digunakan


AM.2

Organis

me

Header

Menyesuaikan

penggunaan

className dan

komponen Header

className dan

attribute organisme

header sesuai dan

dapat digunakan


AN.2

Organis

me

Footer

Menyesuaikan

penggunaan

className dan

komponen Footer

className dan

attribute organisme

footer sesuai dan

dapat digunakan


AO.2

Organis

me

Mega

Menu

Menyesuaikan

penggunaan

className dan

komponen MegaMenu

className dan

attribute organisme

mega menu sesuai

dan dapat digunakan


AP.2

Organis

me

Progres

s

Tracker

Menyesuaikan

penggunaan

className dan

komponen

ProgressTracker

className dan

attribute organisme

progress tracker

sesuai dan dapat

digunakan


AQ.2 Organis

me Tabs

Menyesuaikan

penggunaan

className dan Tabs

className d

attribute tabs sesuai

dan dapat digunakan


4.5 Evaluasi

Setelah pengujian, evaluasi dilakukan untuk mengetahui hasil pengujian.

Berdasarkan hasil pengujian, seluruh komponen yang ada telah sesuai dengan

desain dari UI Designer maupun kebutuhan developer, dan dapat digunakan

langsung untuk pengembangan website elevenia.

82

BAB V

PENUTUP

5.1. Simpulan

Berdasarkan framework yang telah dibuat, maka kesimpulan yang didapat adalah:

1. Framework user interface elevenia berbasis web telah berhasil dibuat sesuai

dengan desain dari desainer dan kebutuhan developer,

2. Dokumentasi framework user interface elevenia telah berhasil dibuat sesuai

dengan desain dari desainer dan kebutuhan developer.

5.2. Saran

Berdasarkan framework yang telah dibuat menggunakan atomic design, masih

banyak kekurangan sehingga saran untuk penelitian selanjutnya adalah:

1. Komponen atom, molekul, dan organisme masih perlu ditambahkan seiring

dengan perkembangan desain elevenia,

2. Dokumentasi ke depannya dapat ditulis bersama dengan UX writer agar

dapat lebih dimengerti.

83


DAFTAR PUSTAKA

Arkan, F., 2020. Pengaruh Desain yang Tidak Konsisten Bagi Desainer dan User

[Wawancara] (18 Februari 2020).

Elevenia, 2019. Elevenia Blog. [Online] Available at:

https://blog.elevenia.co.id/about-us/ [Diakses 2 Februari 2020].

Elevenia, 2020. Elevenia. [Online] Available at: https://www.elevenia.co.id

[Diakses 2 Februari 2020].

Frost, B., 2016. Atomic Design. Pittsburgh: Brad Frost.

Linux, 2017. Linux. [Online] Available at: https://www.linux.com/news/state-

union-npm/ [Diakses 16 Maret 2020].

Malik, R. F., Fachrurrozi, M. dan Prabowo2, R., 2017. Sistem Informasi

Manajemen Laboratorium Menggunakan Metode Agile Dengan Konsem

Model-View-Controller Data Access Object. KNTIA, Volume 4, p. 65.

NodeJS, 2018. Node JS User Survey Report. [Online] Available at:

https://nodejs.org/en/user-survey-report/ [Diakses 16 Maret 2020].

NPM, 2020. NPM Github. [Online] Available at:

https://github.com/npm/npm/releases?after=v0.1.1 [Diakses 16 Maret

2020].

O'Donnell, J., 2019. SASS (syntactically awesome style sheets). Journal of

Computing Sciences in Colleges, XXXIV(4).

Raharjana, I. K., 2017. Pengembangan Sistem Informasi Menggunakan Metodologi

Agile. Yogyakarta: Deepublish.

ReactJS, 2019. React JS Community. [Online] Available at: https://www.reactjs.org

[Diakses 19 November 2019].

Shidqi, L., Effendy, V. dan Herdiani, A., 2017. Model User Interface Aplikasi

Pembelajaran Doa-doa Harian Sesuai User Experience Anak Usia Dini

Menggunakan Metode User Centered Design. Telkom University Journal.

Siahaan, V. dan Sianipar, R. H., 2018. JavaScript Untuk Profesional. Jogjakarta:

Sparta Publisher.

Stoica, M., Ghilic-micu, B., Mircea, M. dan Uscatu, C., 2016. Analyzing Agile

Development – from Waterfall Style to Scrumban. Informatica Economică

Bucharest University of Economics, Romania, 20(4), p. 5.

Syaripudin, G. A. dan Cahyana, R., 2015. Pengembangan Aplikasi Web Untuk

Pengajuan Cuti Pegawai Secara Online. Jurnal STT Garut, XII(2), p. 526.

Wardana, 2010. Menjadi Master PHP dengan Framework Codeigniter. Jakarta:

Elex Media Komputindo.

84


Lampiran 1 Daftar Riwayat Hidup

DAFTAR RIWAYAT HIDUP

Mutia Ayu Dianita, lahir di Bogor, 5 September 1997.

Telah menyelesaikan pendidikan di SDN Ciriung 04

pada tahun 2009, SMPN 1 Cibinong pada tahun 2012,

SMKN 1 Cibinong jurusan Multimedia pada tahun

2015, dan CCIT FTUI jurusan Teknologi Informasi

pada tahun 2017. Saat ini sedang menempuh

pendidikan Diploma IV di Politeknik Negeri Jakarta,

jurusan Teknik Informatika dan Komputer, program

studi Teknik Informatika.

Framework User Interface Elevenia Berbasis LAPORAN SKRIPSI

Documents

Transcript of Framework User Interface Elevenia Berbasis LAPORAN SKRIPSI