JNATIA Volume 1, Nomor 1, November 2022

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Perancangan aplikasi E-wallet berbasis website

Anak Agung Gede Agung Angga Adityaa1, Ida Bagus Made Mahendraa2

aInformatics Department, Udayana University Bali, Indonesia 1agungangga2001@gmail.com 2ibm.mahendra@unud.ac.id

Abstract

In this modern era many new technology have been create for support human life. One of them is electronic wallet, where this technology can save electronic money. Electronic wallet make life easier, like can help for transaction in shopping and another transaction. User also can do topup, transfer, and withdraw from electronic wallet. This electronic wallet win run in website, create using JavaScript Framework that is Vue.js and database using GraphQL.Then for create this UI/UX will using user centered design method.

Keywords: Electronic Wallet, Electronic Money, JavaScript Framework, Vue.Js, graphQL

  • 1.    Introduction

Pada era digital ini sudah banyak kegiatan manusia yang di bantu oleh teknologi dari berbelanja, mencari barang, sampai mencari hiburan. Pada masa pandemi covid 2019 yang terjadi pada 2019 ini telah meningkatkan kewaspadaan orang orang akan virus covid dan penyebarannya. Salah satu perantara penularan virus covid adalah bersentuhan fisik langsung maupun lewat benda yang ada di sekitar kita. Uang merupakan salah satu perantara yang dapat menyebarkan virus covid dimana setelah di gunakan dari tangan ke tangan dapat meningkatkan penyebaran covid 19. Di Jepang sejak minggu lalu sudah ada kekhawatiran tentang menyentuh uang tunai saat berbelanja termasuk menyentuh barang belanjaan juga bisa menularkan infeksi virus corona [1]. Oleh karena itu penelitian ini ditujukan untuk membantu mengurangi bersentuhan secara langsung maupun tidak langsung. Penelitian ini akan menggunakan metode user centered design dalam membangun sistem ini.

Maka dari itu penggunaan e-wallet akan sangat menguntungkan dan dapat meminimalisir penyebaran virus corona. E-wallet merupakan layanan yang bersifat elektronik dan berfungsi untuk menyimpan data serta instrumen dari pembayaran. Dengan e-wallet, pengguna dapat menyimpan uangnya untuk melakukan transaksi keuangan, baik online maupun offline[2]. Dibandingkan dengan penggunaan mata uang koin atau kertas, proses transaksi dengan menggunakan e-Wallet relatif menjadi lebih cepat [3]. Masa pandemi Covid-19 di Indonesia dengan penetapan kebijakan physical distancing ternyata meningkatkan transaksi perdagangan barang dan jasa sebagai pemenuhan kebutuhan ekonomi melalui e-commerceyang juga menawarkan pilihan sistem pembayaran online melalui e-wallet [4].

  • 2.    Reseach Methods

    2.1    Gambaran Aplikasi

Rancangan aplikasi E-wallet yang dibuat menggunakan Vue.JS terdapat tiga fitur utama yaitu fungsi topup, transfer, dan withdraw. Pada bagian topup user dapat menginputkan berapa jumlah uang yang akan mereka gunakan sebagai penambah saldo pada akun mereka. Pada transfer pengguna dapat menginputkan berapa jumlah uang yang akan mereka kirim ke orang lain dan saldo dalam e-wallet akan berkurang. Pada proses withdraw saldo pengguna akan berkurang.

  • 2.2    Desain Aplikasi

Antarmuka aplikasi yang dibuat menggunakan framework dari JavaScript yaitu Vue.js. Menggunakan database Apollo dan Vuetify sebagai Ui framework. Berikut adalah Flowchart yang di gunakan dalam mengimplementasikan aplikasi e-wallet.

Gambar 1. Flowchart E-wallet

Penjelasan diagram alur flowchart:

  • 1.    Pada aplikasi terdapat 3 menu yaitu topup, transfer, dan withdraw and program melakukan pengecekan apa yang akan di pilih oleh user.

  • 2.    Jika user memilih menu topup maka user akan di minta memasukkan jumlah saldo topup.

  • 3.    Program akan melakukan pengecekan jika inputan berupa angka maka saldo akan bertambah jika tidak maka user diminta memasukkan input lagi.

  • 4.    Jika user memilih menu transfer maka user akan di minta memasukkan jumlah saldo transfer.

  • 5.    Program akan melakukan pengecekan jika inputan berupa angka maka saldo akan berkurang jika tidak maka user diminta memasukkan input lagi.

  • 6.    Jika user memilih menu withdraw maka user akan di minta memasukkan jumlah saldo withdraw.

  • 7.    Program akan melakukan pengecekan jika inputan berupa angka maka saldo akan berkurang jika tidak maka user diminta memasukkan input lagi.

  • 2.3    Alur Penelitian

Metode penelitian yang digunakan dalam penelitian yang dilakukan oleh penulis adalah User Centered Design atau sering disebut dengan UCD. Pada metode UCD terdapat beberapa tahapan yang perlu dilakukan:

Gambar 2. Alur User Centered Design

  • 1.    Analysis

Pada tahap ini penulis akan memberikan kusisioner yang berisi pertanyaan mengenai penggunaan e-wallet. Hasil dari kuisioner ini akan diambil dari beberapa orang secara acak.

  • 2.    Planning

Pada tahap ini penulis akan menjabarkan hasil rancangan dari analysis yang sudah diambil dari kuisioner pada tahap analysis dan akan berupaya membuat use case diagram dan activity diagram.

  • 3.    Implemetation

Pada tahap ini penulis akan mengimplementasikan berdasarkan dari hasil perencanaan yang sudah dilakukan pada tahap sebelumnya.

  • 4.    Testing

Pada tahap ini akan dilakukan sebuah pengujian pada sistem yang sudah dibuat akan dilakukan dengan beberapa responden.

  • 2.4    User Centered Design

User Centered Design (UCD) merupakan metode dalam perancangan desain yang berfokus pada pengguna. Dimana UCD juga merupakan bagian dari System Development Life Cycle, dengan ini akan mengoptimalkan desain yang dibuat berdasarkan kebutuhan pengguna sehingga diharapkan pengguna tidak perlu beradaptasi dalam waktu yang lama saat menggunakan sebuah platform.

  • 2.5    Vue.Js

Vue.js merupakan sebuah framework dari bahasa pemrograman javascript yang memungkinkan untuk membangun sebuah user interface (UI) suatu website. Vue.js juga merupakan open source project sehingga dapat dikembangkan oleh semua orang secara bebas.

  • 3.    Result and Discussion

    3.1    Analysis

Analisis dilakukan untuk mengetahui kebutuhan pengguna, dengan melakukan sebuah wawancara terhadap beberapa orang pengguna berikut hasil yang didapat dari responden.

Apakah anda sering menggunakan Electronic Wallet?

15 responses


  • •    Sering

  • •    Jarang

  • •    Tidak pernah

    Gambar 3. Kuisioner Wawancara

    Apakah anda kesulitan dalam menggunakan Electronic Wallet?

    15 responses

    Gambar 4. Kuisioner Wawancara

    Apakah anda merasa asing dengan Ul pada Electronic Wallet?

    15 responses



Gambar 5. Kuisioner Wawancara

Apakah anda kesulitan dalam menggunakan website?

15 responses


• Kesulitan

Φ Cukup kesulitan

9 Tidak kesulitan

Gambar 6. Kuisioner Wawancara

Apakah hal diatas dapat jika terdapat pada sebuah website akan membantu?

15 responses


φ Tidak membantu φ Cukup membantu ⅜ Sangat membantu

Gambar 7. Kuisioner Wawancara

  • 3.2    Planning

Membuat sistem electronic wallet membutuhkan beberapa requipment untuk pengengembangan awal dimana akan dibuat use case diagram dan activity diagram terlebih dahulu.

  • 3.2.1    Use Case Diagram

Use Case Diagram berguna untuk menjelaskan hal apa saja yang bisa dilakukan oleh pengguna dalam menggunakan sistem.

Gambar 8. Use Case Diagram


  • 3.2.2    Activity Diagram

Activity diagram menggambarkan aktivitas sistem yang akan dirancang, bagaimana setiap aktivitas dimulai, apa yang akan terjadi, dan keputusan tentang bagaimana program akan berakhir

Gambar 9. Activity diagram

Pengguna

Sistem

Membuka

w Vlenampilkar

Website

e-wallet

menuju

halaman <--------

—

transfer

Vlenampilkar

—

--------> halaman

Melakukan

transfer

transfer

saldo

berkurang

Jumlah

saldo <--------

—

Gambar 10. Activity diagram

Gambar 11. Activity diagram

  • 3.3    Implemetation

Pada halaman awal terdapat tiga menu pada aplikasi yaitu topup, transfer, dan withdraw kemudian pada bagian footer terdapat tiga menu juga yaitu home, history, dan account dapat dilihat pada gambar 2. Jika pengguna memencet tombol topup maka program akan beralih ke menu topup. Pada menu topup pengguna dapat memasukkan jumlah saldo yang ingin mereka tambahkan kedalam e-wallet mereka dapat diliat pada gambar 3. Pada menu transfer pengguna dapat mengirim sejumlah saldo yang dimiliki kepada pengguna lain dimana ini akan mengurangi jumlah saldo yang dimiliki pada akun dapat dilihat pada gambar 4. Pada bagian withdraw pengguna dapat memasukkan jumlah saldo yang ingin di tarik oleh pengguna dan ini akan membuat jumlah uang pengguna berkurang dapat dilihat pada gambar 5. Database yang di gunakan untuk menyimpan data yang pada web yang dibuat dapat dilihat pada gambar 6.

Gambar 12. Tampilan halaman awal

Gambar 13. Tampilan halaman topup

Gambar 14. Tampilan halaman transfer

Gambar 15. Tampilan halaman withdraw

Gambar 16. Hasura database yang digunakan

  • 3.4    Testing

Sistem akan diuji menggunakan metode blackbox. Hasil dari pengujian black box sebagai berikut :

Table 1. Pengujian topup

No.

Skenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1

Input field diisi dengan huruf

Input field berupa huruf

Sistem akan menampilkan pesan error yang harus diinput berupa angka

Sesuai harapan

valid

2

Input field diisi dengan angka

Input field berupa angka

Sistem tidak menampilkan status error apapun

Sesuai harapan

valid

3

Input field diisi dengan angka dan tombol topup di klik

Input field berupa angka

Tombol topup di klik untuk menambah saldo kedalam e-wallet sebesar jumlah inputan

Sistem akan menambahkan saldo sesuai dengan inputan user

Tidak sesuai harapan

Invalid

Table 2. Pengujian transfer

No.

Skenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1

Input field diisi dengan huruf

Input field berupa huruf

Sistem akan menampilkan pesan error

Sesuai harapan

valid

yang harus diinput berupa angka

2

Input field diisi dengan angka

Input field berupa angka

Sistem tidak menampilkan status error apapun

Sesuai harapan

valid

3

Input field diisi dengan angka dan tombol transfer di klik

Input field berupa angka

Tombol transfer di klik untuk mengurangi saldo e-wallet sebesar jumlah inputan

Sistem akan mengurangi saldo sesuai dengan inputan user

Tidak sesuai harapan

Invalid

Table 3. Pengujian withdraw

No.

Skenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1

Input field diisi dengan huruf

Input field berupa huruf

Sistem akan menampilkan pesan error yang harus diinput berupa angka

Sesuai harapan

valid

2

Input field diisi dengan angka

Input field berupa angka

Sistem tidak menampilkan status error apapun

Sesuai harapan

valid

3

Input field diisi dengan angka dan tombol withdraw di klik

Input field berupa angka

Tombol withdraw di klik untuk mengurangi saldo e-wallet sebesar jumlah inputan

Sistem akan mengurangi saldo sesuai dengan inputan user

Tidak sesuai harapan

Invalid

Table 4. Pengujian database

No.

Skenario Pengujian

Test Case

Hasil yang Diharapkan

Hasil Pengujian

Kesimpulan

1

menambah data angka

Membuat logic dari menambahkan angka yang ada pada data base

Angka pada database akan bertambah sesuai dengan yang diinputkan user

Sesuai harapan

valid

2

mengurangi data angka

Membuat logic dari mengurangi angka yang ada pada data base

Angka pada database akan berkurang sesuai dengan yang diinputkan user

Sesuai harapan

valid

  • 4. Conclusion

Dapat disimpulkan bahwa rancangan e-wallet dengan metode user centered design dengan menggunakan vue.js. Sehingga dapat membantu pengguna dari segi efisien, dapat mempermudah pengguna dalam menggunakan website tersebut, memberikan kemudahan untuk pengguna yang memakai website tersebut, dan tampilan yang sudah dibuat juga tidak menyulitkan pengguna.

References

  • [1]     Agustina, Dewi. “Penularan Virus Corona Lewat Uang, Kasus Pertama di Bank

Jepang.” Tribun, 28 February 2020,

https://www.tribunnews.com/internasional/2020/02/28/penularan-virus-corona-lewat-uang-kasus-pertama-bank-jepang. Accessed 25 September 2022.

  • [2]     Asmaaysi, Alifian. “Apa Itu E-Wallet? Pengertian, Jenis, dan Kelebihan.” Finansial

Bisnis, 2 March 2022, https://finansial.bisnis.com/read/20220302/55/1506199/apa-itu-e-wallet-pengertian-jenis-dan-kelebihan. Accessed 26 September 2022.

  • [3]     Kumalasari, Retna. “Macam-Macam E-Wallet, Definisi, Kelebihan, dan

Kekurangannya.” Majoo, 24 September 2022, https://majoo.id/solusi/detail/ewallet-adalah. Accessed 29 September 2022.

  • [4]     Rangkuty, Dewi Mahrani. “PROSIDINGKonferensi Nasional Universitas Nahdlatul

Ulama Indonesia.” Apakah Penggunaan E-walletMasaPandemi Covid-19Semakin Meningkat di Indonesia?, vol. 1, no. 1, 2021, pp. 251-260, http://journal.unusia.ac.id/index.php/Conferenceunusia/article/view/205/155. Accessed 29 September 2022.

Accessed 25 September 2022.

2022.

Accessed 26 September 2022.

  • [8]     Intan Sandra Yatana Sapu, et al. “Jurnal Nasional Teknologi dan Sistem Informasi.”

Penerapan Metode UCD (User Centered Design) pada E-Commerce Putri Intan Shop Berbasis Web, vol. 03, no. 02, 2017, pp. 268-278.

Halaman ini sengaja dibiarkan kosong

650