KLIK: Kajian Ilmiah Informatika dan Komputer ISSN 2723-3898 (Media Online) Vol 4, No 2, Oktober 2023, Hal 1021-1031 DOI 10.30865/klik.v4i2.1259 https://djournals.com/klik

## Perancangan Aplikasi Manajemen Keuangan Berbasis Mobile Menggunakan React Native Untuk Meningkatkan Literasi Keuangan Individu
Hielmi Sulaeman * , Anita Fira Waluyo
Fakultas Sains & Teknologi, Program Studi Informatika, Universitas Teknologi Yogyakarta, Yogyakarta, Indonesia Email: 1,* hielmisulaeman10@gmail.com, 2 anitafira@uty.ac.id Email Penulis Korespondensi: hielmisulaeman10@gmail.com
Abstrak− Manajemen  keuangan  merupakan  salah  satu  permasalahan  terpenting  dalam  kehidupan  manusia.  Dengan  melakukan pengelolaan keuangan akan mudah dalam merencanakan keuangan mereka. Namun kurangnya literasi keuangan ini menjadi penyebab terjadinya salah satu penyebab banyak orang yang belum mengelola keuangannya dengan baik adalah kurangnya waktu untuk mencatat keuangannya. Penulis mengusulkan untuk membuat sebuah aplikasi Manajemen Keuangan yang berbasis mobile untuk meningkatkan literasi  keuangan  individu.  Tujuan  pembuatan  aplikasi ini  adalah  untuk  membantu  individu  dalam  mengelola keuangannya  seperti mencatat  pemasukan,  mencatat  pengeluaran,  dan  menerapkan  metode  budgeting  dalam  melakukan  perencanaan  keuangannya. Penelitian dilakukan dengan menggunakan metode penelitian Waterfall . Proses pembuatan ini meliputi analisis sistem, perancangan sistem, implementasi dan testing. Desain yang digambarkan berupa Data Flow Diagram , Database yang dibuat, dan Wireframe aplikasi yang  akan  dibuat.  Aplikasi  yang  telah  dibuat  menggunakan framework React  Native  dan  menggunakan  API  dalam  melakukan pertukaran data antara client dan server yang kemudian data akan disimpan ke database. Aplikasi akan diuji untuk melihat kelayak an aplikasi dan  apakah dapat  membantu pengguna dalam masalah  pencatatan  keuangan. Hasil dari  pengujian  menggunakan  blackbox testing aplikasi ini layak digunakan dan berfungsi secara baik. Dengan demikian, aplikasi ini memiliki potensi untuk meningkatkan pemahaman  dan  kesadaran  keuangan  individu  dan  mendorong  penerapan  praktik  keuangan  yang  lebih  baik.  Teknologi  ini membuktikan dirinya sebagai alat yang berharga dalam manajemen keuangan pribadi.
Kata Kunci: Manajemen keuangan; Aplikasi Mobile; REST API; React Native; Literasi Keuangan
Abstract− Financial management is one of the most important problems in human life. By doing financial management, it will be easy to plan their finances. However, this lack of financial literacy is the cause of one of the causes of many people who have not managed their finances well is the lack of time to record their finances. The author proposes to create a mobile-based Financial Management application to improve individual financial literacy. The purpose of making this application is to help individuals manage their finances such as recording income, recording expenses, and applying budgeting  methods in doing their financial planning. The research was conducted using the Waterfall research method. This manufacturing process includes system analysis, system design, implementation and testing. The design depicted is in the form of a Data Flow Diagram, Database created, and Wireframe application to be created. Applications that have been created using the React Native framework and use APIs in exchanging data between client and server which then the data will be saved to the database. The app will be tested to see if it's eligible and whether it can help users with financial recordkeeping issues. The results of testing using blackbox testing this application is worth using and works properly. As such, the app has  the  potential  to  increase  an  individual's  financial  understanding  and  awareness  and  encourage  the  adoption  of  better  financial practices. This technology is proving itself as a valuable tool in personal financial management.
Keywords : Financial management; Mobile Applications; REST API; React Native; Financial Literacy

## 1. PENDAHULUAN
Pengertian  manajemen  keuangan  mencakup  seluruh  kegiatan  yang  berkaitan  dengan  perolehan,  pembiayaan,  dan pengelolaan aset  dengan sejumlah tujuan yang komprehensif  [1]. Saat  mengelola keuangan pribadi, semua orang tahu tujuan apa yang ingin dicapai. Oleh karena itu, setiap orang hendaknya memanfaatkan pengelolaan sumber daya keuangan secara optimal untuk  mencapai  tujuannya  [2]. Pengelolaan keuangan merupakan sebuah realita yang  dihadapi   setiap individu  dalam  kehidupan  sehari-hari  mereka,  yang  mana  masyarakat  mengharuskan  mengelola  keuangannya  dengan baik  untuk menyeimbangkan pemasukan dan pengeluaran, mencukupi kebutuhan hidup, dan jangan biarkan diri Anda terjebak. karena kesulitan keuangan [3]. Jadi, dengan pengelolaan  keuangan yang baik, Anda bisa terhindar dari terjebak dalam kegagalan finansial.
Ada banyak  platform e-commerce yang melayani berbagai jenis kebutuhan melalui belanja online, serta metode pembayaran  online  yang  mudah  sehingga  memudahkan  konsumen  untuk  membeli  produk  yang  diinginkan.  Namun kemudahan  ini  terkadang  dapat  merangsang  perilaku  konsumen  sehingga  menyebabkan  ketidakseimbangan  keuangan [4]. Sikap konsumtif yang didorong oleh budaya konsumerisme yang marak ini sering mengakibatkan orang mengabaikan pentingnya mengelola keuangannya secara efektif, termasuk menabung dan berinvestasi untuk masa depan [5]. Beberapa penelitian  telah  menyoroti  bahwa  sebagian  besar  populasi  tetap  tidak  menyadari  peran  penting  yang  dimainkan manajemen keuangan dalam kesejahteraan keuangan pribadi mereka. [6]. Kurangnya kesadaran mengenai pengelolaan keuangan  mereka  sering  kali  disebabkan  oleh  keterbatasan  dalam  akses  media  pencatatan  yang  praktis.  Apalagi  bagi masyarakat  yang  selalu  berpindah-pindah  dan  memiliki  gaya  hidup  mobile,  membawa  media  penyimpanan  keuangan konvensional adalah hal yang tidak efisien. Salah satu penyebab banyak orang tidak mengelola keuangannya dengan baik adalah kurangnya waktu untuk memikirkan keuangan pribadinya [7].
Studi  lain  yang  membahas  penerapan  manajemen  keuangan  sebagai  acuan  dan  acuan  bagi  penulis  dalam melakukan  penelitian  adalah  oleh  penelitian  dari  [8]  dengan judul  Perancangan  Aplikasi  Pengelola  Keuangan  Pribadi

## Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
Berbasis  Android.  Penelitian  ini  menggunakan  desain  kualitatif  dan  metode  kreatif.  sistem  aplikasi  mobile  yang menampilkan informasi keuangan, baik pemasukan maupun pengeluaran. Namun  aplikasi yang dibuat masih memiliki kekurangan  desain yang kurang menarik bagi pengguna yang lebih menyukai desain yang futuristik dan fitur yang sedikit, karena aplikasi  yang telah dibuat ini dibuat dengan sangat  sederhana dan memiliki memori  yang kecil serta tidak ada fungsi diagram dalam menampilkan pemasukan serta pengeluaran. kontribusi dan biaya. Penelitian lain oleh [9] dengan judul Pengembangan Aplikasi Pengaturan Keuangan Pribadi Berbasis Android. Penelitian ini dilakukan dari melihat dari cara yang biasa dilakukan pengguna dalam mengelola keuangan pribadinya adalah dengan menggunakan buku harian keuangan secara manual, dan pencatatannya tidak dapat dilakukan kapan pun dan dapat digunakan dimana saja. Penelitian dilakukan dengan menggunakan metodologi SDLC ( System Development  Life  Cycle ). Hasil dari  penelitian yang telah dilakukan ini adalah sebuah aplikasi mobile berbasis Android untuk mengelola dan mencatat keuangan pribadi. Penelitian lain  oleh  [10]  dengan  judul  Implementasi  Aplikasi  Perencanaan  Keuangan  Keluarga  Berbasis  Mobile.  Penelitian  ini dilakukan untuk menjaga stabilitas keuangan keluarga dengan menetapkan skala prioritas untuk merencanakan anggaran keuangan keluarga ke arah kebutuhan yang berguna dan mengurangi keinginan yang tidak penting. Hasil dari penelitian ini  berupa  sebuah  aplikasi  perencanaan  keuangan  yang  digunakan  untuk  mengelola  keuangan  keluarga  dan  akan memberikan  informasi  keuangan  keluarga.  Penelitian  lain  oleh  [11]  Pengelolaan  Keuangan  Pribadi  yang  Interaktif Berbasis  Android.  Penelitian  ini  mengacu  pada  aplikasi  keuangan  yang  pribadi  yang  sudah  ada  di  Android  yaitu AndroMoney. Peneliti menambahkan beberapa fitur seperti penghargaan ketika user dapat lebih hemat dari orang lain, fitur transaksi berulang secara otomatis yang masuk dalam pengeluaran sesuai dengan jadwal tertentu, fitur speech to text, dan  menghitung  cicilan  dengan  melihat  pemasukan  dan  pengeluaran.  Penelitian  lain  oleh  [12]  dengan  judul  Aplikasi Mobile  Money  Management  Dengan  Fitur  Optical  Character  Recognition  Menggunakan Framework React  Native. Penelitian ini dilakukan dengan melihat permasalahan karakter individu dalam mengelola keuangan dan masih mengelola keuangan  dengan  cara  manual.  Penggunaan  pengenalan  karakter  optik  untuk  mencatat  pemasukan  dan  pengeluaran dengan gambar digital akan membantu pengguna menghemat waktu saat membuat catatan. Hasil dari penelitian ini adalah sebuah aplikasi pengelola keuangan dengan fitur Optical Character Recognition.
Salah satu cara yang dapat dilakukan ialah dengan melakukan pencatatan keuangan agar keuangan dapat dikelola dengan baik [13]. Oleh karena itu, penulis mengusulkan untuk membuat aplikasi Manajemen Keuangan  yang berjalan pada smartphone untuk meningkatkan literasi keuangan individu. Tujuan dari pembuatan aplikasi ini, aplikasi tersebut diharapkan  dapat  membantu  individu  dalam  mengelola  keuangannya  seperti  mencatat  pemasukan,  pencatatan pengeluaran, dan menerapkan metode budgeting dalam melakukan perencanaan keuangannya. Dengan demikian, aplikasi ini  diharapkan  meningkatkan  pengetahuan  literasi  keuangan  individu  tentang  pentingnya  pengelolaan  keuangan  yang cerdas  dan  membuat  mereka  dapat  mengembangkan  keterampilan  dalam  mengambil  keputusan  finansial  yang  bijak. Melalui akses mudah ke informasi dan alat-alat yang berguna, aplikasi ini bertujuan untuk membantu individu mencapai stabilitas finansial dan merencanakan masa depan keuangan yang lebih cerah.

## 2. METODOLOGI PENELITIAN

## 2. 1 Tahapan Penelitian
Penelitian  mengenai  pembuatan  aplikasi  manajemen  keuangan  ini  akan  dilakukan  dengan  menggunakan  metode penelitian waterfall . Metode waterfall akan digunakan dalam desain sistem pada penelitian ini. Hal ini karena metode ini menjalankan langkah-langkah pekerjaan satu demi satu.  Sehingga jika ada tahap yang belum selesai maka tidak dapat melanjutkan  ke  langkah  berikutnya  [14].  Penggunaan  metode waterfall ini  banyak  dilakukan  dalam  berbagai pengembangan  aplikasi. Tahapan  pertama  dalam penelitian  ini  yaitu  melakukan  analisis  dari  sistem  yang  sebelumnya sudah dilakukan dan sistem yang baru akan diimplementasikan. Selanjutnya adalah tahapan untuk merancang dari hasil analisis yang baru, seperti merancang alur data dari sistem yang baru, pembuatan wireframe dari aplikasinya, merancang tabel-tabel  pada  database  serta  membuat  relasi  dari  tabel-tabel  tersebut.  Tahapan  penelitian  menggunakan  metode waterfall yang dilakukan dapat dilihat pada Gambar 1.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk

## Meningkatkan Literasi Keuangan Individu
a. Analisis Sistem
Tahap  Analisis  sistem  merupakan  tahap  dimana  peneliti  menganalisis  sistem  yang  diusulkan  agar  dapat memecahkan masalah yang telah ditentukan dan dapat berjalan dengan baik serta menyiapkan alat yang digunakan untuk melaksanakan implementasi. Tahap ini peneliti melakukan analisis terhadap sistem yang  telah  berjalan yaitu mencatat keuangan dengan cara konvensional menggunakan media buku tulis ataupun buku khusus keuangan. Sehingga ditemukan kebutuhan apa saja yang dapat diimplementasikan ke aplikasi yang dibuat serta melihat kekurangan dari penggunaan cara konvensional  tersebut.  Selanjutnya  akan  menganalisis  sistem  yang  baru  atau  sistem  yang  diusulkan  dengan  metode pencatatan keuangan menggunakan aplikasi yang di pasang di ponsel pengguna dalam melakukan pencatatan keuangan. Kegiatan  analisis  sistem  baru  ini  meliputi  Teknologi  yang  akan  digunakan  dan  alat-alat  yang  dibutuhkan  dalam pengembangan.

## b. Perancangan Sistem
Pada tahap perancangan sistem adalah tahap dimana peneliti melakukan penggambaran dari hasil analisis yang telah  dilakukan.  Tahapan  ini  berupa  merancang  alur  data  dari  aplikasi  menggunakan Data  Flow  Diagram (DFD), kemudian membuat tabel-tabel dari database yang akan digunakan serta relasi dari tiap tabel-tabel pada database serta penggambaran wireframe dari aplikasi. Dengan melakukan penggambaran ini akan memudahkan pada tahap selanjutnya. Penggunaan  DFD  dalam  penggambaran  alur  data  dari  aplikasi  ini  memudahkan  dalam  mendeteksi  proses  yang  akan terjadi pada aplikasi. Penggambaran DFD akan digambarkan dengan notasi  dan  simbol-simbol  standar yang ada pada aturan DFD. DFD dibangun dengan bantuan notasi dan simbol standar untuk mewakili aliran informasi antara berbagai komponen  sistem[15].  Pembuatan  relasi  database  digambarkan  awal  dengan  menggunakan  ERD  ( Entity  Relation Diagram ).  ERD  ini  merepresentasikan  bagaimana  keterkaitan  antar  entitas  yang  ada  di  dalam  database  [16].  Dan selanjutnya  pembuatan wireframe ,  penggunaan wireframe ini  untuk  penggambaran  kerangka  awal  dari  tampilan  pada aplikasi serta penentuan konten-konten pada aplikasi yang akan ditampilkan. Wireframe adalah  kerangka awal sebelum merancang antarmuka situs web atau aplikasi. [17].
c. Implementasi
Pada  tahap  implementasi  ini,  program  mulai  menjalani  proses  aktif,  di  mana  solusi  yang  telah  dirancang sebelumnya  akan  diwujudkan  dalam  bentuk  nyata.  Penulis  akan  menjalankan  rencana  yang  telah  disusun  dengan menggunakan  alat-alat  yang  telah  dipersiapkan  dan  mengikuti  aturan-aturan  yang  telah  ditetapkan  untuk  mengatasi permasalahan yang dihadapi. Proses ini terutama melibatkan mengkodekan aplikasi dengan menggunakan teknologi yang telah  dipilih  pada  tahap  sebelumnya.  Dengan  demikian,  langkah  implementasi  menjadi  tahapan  krusial  dalam menjalankan konsep yang telah diatur sebelumnya menjadi sebuah produk atau solusi yang dapat berfungsi dengan baik.
d. Testing
Tahap  pengujian  ini  menjadi  langkah  krusial  dalam  evaluasi  aplikasi  pengelolaan  keuangan  yang  telah diimplementasikan sebelumnya. Pengujian ini akan memberikan gambaran tentang kelayakan aplikasi dan sejauh mana kemampuannya  dalam  membantu  pengguna  dalam  hal  pencatatan  keuangan.  Dalam  proses  pengujian  yang  akan dilakukan, pendekatan yang digunakan adalah pengujian Black Box . Pengujian Black Box dilakukan dengan tujuan untuk memeriksa apakah masukan yang diberikan pada sistem sesuai dengan keluaran yang dihasilkan tanpa memperhatikan detail  cara  kerja  aplikasi    di  dalamnya.  Pengujian Black  Box melibatkan  pengecekan  ketersesuaian  dari  input  yang diberikan  dengan  output  yang  dihasilkan  oleh  sistem  [18].  Dengan  demikian,  tahap  pengujian  ini  akan  memberikan pemahaman yang mendalam mengenai sejauh mana aplikasi ini mampu memenuhi kebutuhan pengguna dalam mengelola keuangan mereka.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Analisis Sistem
Sistem yang masih digunakan saat pencatatan pemasukan dan pengeluaran masih menggunakan cara konvensional dan masih banyak kekurangannya. Pengelolaan keuangan bisa dilakukan secara manual, namun pengelolaan keuangan manual kurang efisien karena tidak bisa dilakukan sepanjang waktu [19]. Deskripsi sistem dengan cara konvensional dapat dilihat pada Gambar 2.
Pada  Gambar  2  menunjukkan  sebuah  arsitektur  model  konvensional  sederhana  dalam  pencatatan  keuangan. Namun, dalam kenyataannya, model ini memiliki sejumlah kekurangan yang cukup signifikan. Salah satu masalah utama adalah  ketergantungan  pada  media-media  tradisional  seperti  bolpoin  dan  buku  keuangan  untuk  mencatat  transaksi

## Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
keuangan. Cara konvensional ini  juga cenderung tidak efektif karena untuk memperoleh laporan bulanan yang akurat, Anda harus melakukan perhitungan secara manual. Dengan kata lain, pencatatan keuangan dengan metode konvensional ini masih sangat terbatas dalam efisiensi pelaksanaannya Selain itu, pendekatan manual dalam pencatatan keuangan tidak hanya menghadirkan keterbatasan dalam mengelola data dan informasi keuangan, tetapi juga berpotensi menyebabkan terjadinya kesalahan dan keterlambatan dalam pengambilan keputusan finansial yang sangat  penting. Oleh karena itu, bisa dikatakan bahwa dalam metode pencatatan keuangan manual ini, pengelolaan keuangan yang optimal tidak tercapai dengan baik. Pencatatan keuangan secara manual bukanlah cara yang baik dalam mengelola keuangan [20].
Dengan  adanya  masalah  tersebut,  diperlukan  pendekatan  yang  lebih  modern  dan  efisien  dalam  pencatatan  dan pengelolaan keuangan untuk mengatasi berbagai kelemahan yang dimiliki oleh model konvensional tersebut. Maka dari itu penulis mengusulkan metode perekaman baru, yaitu menggunakan aplikasi media yang terpasang pada smartphone. Membuat  aplikasi  pencatatan  keuangan  di  smartphone  lebih  efektif  dibandingkan  metode  konvensional  karena memudahkan pencatatan keuangan, dapat melakukan pencatatan diaman saja dan kapan saja. Sistem yang diusulkan ini merupakan sebuah aplikasi yang akan bekerja pada smartphone yang memiliki sistem operasi Android. Karena mengacu pada [21] Pengguna Android khususnya di Indonesia sudah menjangkau segala sektor. Arsitektur model sistem aplikasi manajemen keuangan yang diusulkan dapat dilihat pada Gambar 3.
Gambar 3. Arsitektur model yang diusulkan
Pada  Gambar  3  pengguna  dapat  mencatat  keuangannya  menggunakan  aplikasi  yang  terinstal  di  smartphone. Aplikasi  yang  dibangun  menggunakan framework React  Native.  Penggunaan framework React  Native  adalah  karena penulisan kodenya dekat dengan native dan dapat dijalankan secara multiplatform . React Native adalah kerangka kerja untuk menulis aplikasi seluler nyata dan hampir asli untuk iOS dan Android [12]. Di sisi backend , penulis menggunakan REST API untuk menerima request dari aplikasi pengguna dan untuk response aplikasi pengguna. Penggunaan REST API ini mengacu pada [22] REST ( Representational State Transfer ) API adalah metode standar untuk membangun layanan web.  Dengan  standar  pengiriman  data,  dapat  memudahkan  pertukaran  data  dari  sisi  server  dan  client,  seperti  aplikasi mobile. Di sisi penyimpanan, penulis menggunakan Database MySQL untuk menyimpan data dari aplikasi manajemen keuangan.
Pembuatan  aplikasi  ini  memerlukan  beberapa  peralatan  pendukung  seperti  perangkat  keras  ( hardware )  dan perangkat lunak ( software )  untuk mengembangkan aplikasi.. Beberapa perangkat keras yang akan dibutuhkan antara lain: 1. Processor minimal i5 gen 2 atau setara
2. RAM minimal 8 GB
3. Layar minimal 13 inches
4. Smartphone
5. Mouse
6. Keyboard
Software juga membantu memudahkan dalam pengembangan aplikasi. Adapun pada bagian perangkat lunak hal- hal yang dibutuhkan antara lain:
1. Code Editor (Visual Studio Code)
2. XAMPP
3. Emulator Android
4. JavaScript runtime Environment (NodeJS)
5. Postman
6. React Native Environment
3.2 Perancangan Sistem
Di tahap ini akan dijelaskan fungsionalitas sistem dari aplikasi yang akan dibangun berdasarkan hasil analisis sistem yang dilakukan. Penggunaan diagram aliran data dalam desain aplikasi melibatkan penggambaran aliran data dari sistem dan proses  aplikasi yang akan dibuat. Data Flow Diagram (DFD) digunakan dalam proses pemodelan  [23]. Merujuk pada [24] Diagram konteks ialah tingkatan teratas dari DFD yang akan menggambarkan semua masukan atau keluaran sistem. Penggambaran DFD diawali dengan pembuatan diagram konteks. Konteks diagram dapat dilihat pada Gambar 4.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
Gambar 4. Diagram Konteks
Setelah pembuatan diagram konteks, Penulis akan melihat input dan output yang akan digunakan dalam sistem. Input ini akan dimasukkan ke dalam aplikasi untuk kemudian diproses secara internal oleh aplikasi tersebut, menghasilkan output  yang  sesuai.  Dalam  rangka  menggambarkan  dengan  lebih  detail  proses  yang  terjadi  di  dalam  aplikasi  dan bagaimana aliran data berjalan, digunakanlah Diagram Alur Data (DFD). DFD digunakan untuk mengilustrasikan secara visual  bagaimana  data  mengalir  melalui  sistem. Data  Flow  Diagram (DFD ) adalah  diagram  yang  simbol  untuk penggambaran  aliran  data  suatu  sistem  secara  logis.  Dalam  DFD,  proses-proses  yang  ada  dalam  aplikasi  akan diidentifikasi  dan  dijelaskan  secara  terperinci.  Ini  mencakup  langkah-langkah  apa  yang  terjadi  ketika  data  masuk  ke sistem,  bagaimana  data  tersebut  diproses,  dan  bagaimana  hasilnya  dihasilkan  sebagai  output.  DFD  juga  akan mencerminkan bagaimana berbagai entitas atau komponen sistem berkomunikasi satu sama lain untuk mencapai tujuan akhir. Dengan adanya DFD, kita dapat dengan jelas memahami cara sistem bekerja, bagaimana data mengalir, dan proses apa yang terlibat dalam menghasilkan output yang dibutuhkan. Diagram DFD dapat dilihat pada Gambar 5.
Gambar 5. Data Flow Diagram (DFD)
Pada  DFD  di  Gambar  5  terdapat  5  proses  dalam aplikasi,  5  penyimpanan  dan  1  aktor.  Satu  aktor adalah user . Adapun Proses tersebut  adalah proses login, proses Data Saldo  untuk memasukkan saldo, proses Data Kategori untuk menyimpan kategori, proses Data Tabungan untuk menyimpan tabungan, dan proses Data Laporan untuk memberikan laporan kepada pengguna. Pada bagian penyimpanan, terdapat 5 yaitu User, Saldo, Transaksi, Kategori dan Tabungan.
Setelah  menyusun Context  Diagram dan Data  Flow  Diagram ,  penulis  kemudian  membuat  relasi  tabel  dalam database yang akan dibuat. RAT ( Relation Between Tables ) berguna sebagai deskripsi hubungan antar tabel dimana tabel yang  memiliki  hubungan  dapat  saling  berkomunikasi [19].  Penggambaran  Relasi  tabel  dapat  dimudahkan  dengan membuat ERD ( Entity Relation Diagram ). Representasi ERD ini akan menggambarkan hubungan antar entitas sistem. Diagram ERD yang telah dibuat bisa dilihat pada Gambar 6.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
Gambar 6. Entity Relationship Diagram (ERD)
Setelah  pembuatan  ERD  selanjutnya  dapat  ditentukan  pembentukan  dari  relasi  tabel  pada  database,  bisa  di implementasikan pada database bahwa ada 5 tabel yang akan dibuat sesuai dari gambaran ERD yang telah di buat. Setiap tabel  memiliki  keterhubungan  atau  relasi  ke  tabel  lainnya  pada  tabel  database  maka  ada primary  key dan foreign  key sebagai  kunci  yang  unik  dan  sebagai  kunci  keterhubungan  antar  tabel.  Adapun  hasil  relasi  dari  tabel-tabel  database terdapat pada Gambar 7.

## Gambar 7. Relasi Tabel Database
Tahapan  terakhir  dalam  perancangan  sistem  adalah  tahap  penggambaran  dari  aplikasi  yang  akan  dibuat menggunakan Wireframe . Wireframes berfungsi untuk menggambarkan alur kerja suatu tugas atau fitur dan menampilkan informasi yang akan ditampilkan pada setiap halaman [20]. Dengan pembuatan wireframe ini dapat memudahkan dalam pengembangan aplikasi dan menjadi tidak bingung konten apa saja yang akan ditampilkan pada saat pembuatan karena pada  tahap wireframing ini  semua  konten  akan  ditampilkan.  Adapun  wireframe  yang  telah  di  buat  dapat  dilihat  pada Gambar 8.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
Gambar 8. Wireframe Aplikasi

## 3.3 Implementasi
Tahap Implementasi ini melibatkan produk yang telah dihasilkan dari pembuatan aplikasi dengan arsitektur model yang telah disusun. Pada tahap ini, terdapat dua sistem yang dihasilkan, yaitu REST API dan Aplikasi Mobile. Fungsi utama dari  REST API adalah sebagai  pintu gerbang untuk menghubungkan aplikasi  dengan Database. Aplikasi  mobile yang telah dibuat digunakan oleh pengguna untuk melakukan berbagai tindakan, seperti mencatat transaksi  pemasukan atau pengeluaran, menambahkan kategori baru, mengelola tabungan, dan melihat laporan keuangan .

## 3.3.1 REST API
Tahap pembuatan REST API adalah tahapan awal pada Implementasi, pembuatan API ini akan digunakan dalam aplikasi. Pengembangan REST API dilakukan menggunakan framework Express JS. Hasil pembuatan API ini adalah endpoint API tersebut. Beberapa endpoint API yang telah dibuat dapat dilihat di Tabel 1.
Tabel 1. Endpoint API API Endpoint Deskripsi /login Login Pengguna /user/transaction Menambah pemasukan/pengeluaran dan mendapatkan semua data transaksi /user/category Menambahkan kategori /user/pocket Tambah kantong tabungan /user Dapatkan data pengguna berdasarkan user token /user/saldo Dapatkan saldo pengguna berdasarkan user token /user/category/:id Dapatkan kategori, Edit Kategori dan Hapus Kategori dengan id kategori.
/user/transaction/:id  Dapatkan transaksi dengan id transaksi.
/user/:id
Memperbarui data pengguna atau Hapus pengguna.
Pada Tabel 1 terdapat endpoint dari API yang telah dibuat, semua endpoint dapat diakses dengan mengirimkan token pada header sebagai autentikasi akun, kecuali pada endpoint login. Endpoint login berguna untuk user melakukan login dan akan mendapatkan token yang akan digunakan autentikasi ketika akan melakukan request ke endpoint lainnya.

## 3.3.2 Aplikasi Mobile
Setelah membuat API, penulis melanjutkan untuk mengimplementasikan aplikasi manajemen keuangan. Pembuatan aplikasi menggunakan React Native Framework dan membutuhkan emulator android untuk membantu dalam proses pengembangan.
a. Halaman Login
Halaman Login merupakan tampilan login dari aplikasi manajemen keuangan, user jika belum melakukan login maka user harus melakukan login. Namun, jika user sudah pernah melakukan login dan menutup aplikasinya karena token sudah di simpan pada penyimpanan user maka aplikasi tidak akan masuk ke tampilan login karena sesi dari user dan token masih valid. User juga dapat membuat akun jika belum memiliki akun pada aplikasi. Halaman Login dapat dilihat pada Gambar 9.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
Gambar 9. Tampilan Halaman Login
b. Halaman Home
Halaman  Home  akan  menampilkan  saldo  keseluruhan  pengguna,  dan  saldo  yang  telah  dibagi  menggunakan metode  penganggaran  yang  dipilih  dan  menampilkan  beberapa  transaksi  terakhir  dari  pengguna.  Halaman  Login  bisa dilihat di Gambar 10.
Gambar 10. Tampilan Halaman Home
c. Halaman Transaksi
Halaman transaksi  merupakan halaman yang paling penting karena pada halaman ini pengguna dapat  mencatat pemasukan  atau  pengeluaran  sesuai  dengan  kategori  yang  telah  dipilih.  Ketika  user  memilih  pemasukan  user  dapat memilih metode budgeting apa yang digunakan. Halaman transaksi dapat dilihat pada Gambar 11.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk

## Meningkatkan Literasi Keuangan Individu
d. Halaman Kategori
Pada halaman kategori akan menampilkan kategori yang telah di buat oleh user, kategori-kategori ini digunakan ketika  akan  melakukan  transaksi  pemasukan  ataupun  pengeluaran.  Pada  halaman  ini  juga  tersedia  untuk  mengedit kategori  yang  telah  ada,  menambah  kategori,  dan  menghapus  kategori.  Adapun  halaman  kategori  dapat  di  lihat  pada Gambar 12.
Gambar 12. Tampilan Halaman Kategori
e. Halaman Kantong Tabungan
Halaman kantong tabungan adalah halaman yang akan menampilkan kantong tabungan yang dimiliki user, kantong tabungan ini dapat di tambahkan dengan mengambil saldo tabungan user. Sehingga penambahan kantong tabungan tidak dapat dilakukan ketika saldo tabungan tidak ada. Halaman kantong tabungan dapat dilihat pada Gambar 13.
Gambar 13. Tampilan Halaman Kantong Tabungan
f. Halaman Laporan
Pada halaman laporan akan menampilkan diagram dari perbandingan antara pemasukan dan pengeluaran, detail pengeluaran juga dapat dilihat pada halaman ini. Laporan pengeluaran juga dapat diatur dengan jangka waktu per tahun ataupun per bulan. Adapun halaman laporan dapat di lihat pada Gambar 14.
Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk

## Meningkatkan Literasi Keuangan Individu

## 3.4 Testing
Pada  tahap  pengujian  ini,  aplikasi  yang  dibuat  akan  dilakukan  pengujian  dengan  beberapa  skenario.  Metode  dalam pengujian yang penulis gunakan adalah  metode pengujian Black Box . Cara ini sering digunakan untuk menguji aplikasi apakah aplikasi berfungsi dengan baik atau tidak. Pengujian dilakukan dengan metode Black Box, artinya pengujian yang dilakukan hanya akan mengambil hasil eksekusi melalui data pengujian dan memeriksa fungsionalitas aplikasi [25]. Hasil pengujian yang telah dilakukan dengan menggunakan metode Black Box bisa dilihat di Tabel 2.
Tabel 2. Hasil uji Blackbox Skenario Diharapkan Hasil Masukkan data transaksi pemasukan dan pengeluaran Data transaksi ditampilkan dan masuk ke saldo dan database pengguna. Berhasil Kategori Input Data Data transaksi ditampilkan dan masuk ke saldo dan database pengguna.. Berhasil Tampilan Bagan Laporan Diagram ditampilkan sesuai dengan tanggal yang dimasukkan dari pengguna. Berhasil Masukkan Data Kantong Hemat Data tabungan saku tersimpan dan tidak melebihi saldo tabungan pengguna serta menampilkan ke user. Berhasil

## 3.5 Pembahasan
Dari semua Implementasi yang dilakukan aplikasi yang telah dibuat mengimplementasi REST API sebagai backend dari aplikasi dan penggunaan framework React Native dalam pembuatan aplikasi. Pada bagian fitur dari aplikasi juga memiliki fitur  pembagian  pemasukan  berdasarkan  metode-metode  keuangan,  yaitu  metode  70/10/10/10  dan  50/30/20. Pengimplementasian REST API dan penggunaan Framework React Native serta penggunaan metode dalam pengaturan input pemasukan inilah yang menjadi pembeda dari penelitian sebelumnya, juga menambahkan hal-hal yang kurang dari penelitian sebelumnya seperti memperbaiki desain dan menambahkan diagram pada laporan keuangan.

## 4. KESIMPULAN
Berdasarkan penelitian yang dilakukan penulis yang dimulai dari proses analisis sistem, perancangan, implementasi dan pengujian sistem, maka kesimpulan yang diperoleh adalah penulis dapat mengembangkan sebuah aplikasi pengelolaan keuangan  yang  dapat  dipasang  pada smartphone pengguna.  Aplikasi  Manajemen  Keuangan  yang  dikembangkan  oleh penulis  juga  memberikan  solusi  praktis  bagi  individu  dalam  mengelola  keuangan  pribadi  mereka.  Aplikasi  ini memungkinkan  pengguna  untuk  mencatat  transaksi  keuangan  dengan  mudah,  dapat  dilakukan  di  mana  saja,  dan memberikan wawasan yang berguna tentang bagaimana uang mereka digunakan. Dengan demikian, aplikasi ini memiliki potensi untuk meningkatkan pemahaman mengenai literasi keuangan dan kesadaran keuangan individu serta mendorong adopsi praktik keuangan yang lebih baik. Teknologi ini terbukti sebagai alat berharga dalam manajemen keuangan pribadi, sementara desain yang ramah pengguna dan fitur intuitifnya memungkinkan pengguna untuk mencatat transaksi keuangan mereka secara efisien, terlepas dari lokasi mereka. Penggambaran sistem menggunakan Diagram Alir Data (DFD), ERD dan Wireframe juga membantu dalam memudahkan pengembangan aplikasi dengan menggambarkan proses-proses yang terjadi, relasi yang terjadi antar tabel juga penggambaran tampilan sederhana menggunakan wireframe untuk menentukan konten apa saja yang akan ditampilkan. Hasil pengujian aplikasi manajemen keuangan menggunakan metode blackbox juga menunjukkan hasil yang baik dengan lolos dari semua skenario testing yang dilakukan. Sehingga fitur dari aplikasi dapat berjalan dengan baik dan aplikasi dapat digunakan di semua kalangan.

## REFERENCES
[1] M.  F.  P.  Sasmita,  “Rancang  Bangun  Sistem  Informasi  Manajemen  Keuangan  Pribadi  Berbasis  Website,”  University  of Technology Yogyakarta, 2021.
[2] S. Ratna, “Aplikasi Pengelola Keuangan Pribadi Berbasis Desktop,” Technologia: Jurnal Ilmiah, vol. 12, no. 2, pp. 68–71, 2021, doi: http://dx.doi.org/10.31602/tji.v12i2.4572.
[3] Chalimah  and  A.  Su’ud,  “Literasi  Keuangan  Sebagai  Pemenuhan  Kebutuhan  UMKM  di  Kecamatan  Comal  Kabupaten Pemalang,”  ABDIMAS  EKODIKSOSIORA:  Jurnal  Pengabdian  Kepada  Masyarakat  Ekonomi,  Pendidikan,  dan  Sosial Humaniora        (e-ISSN: 2809-3917), vol. 1, no. 1, pp. 29–35, Dec. 2021, doi: 10.37859/abdimasekodiksosiora.v1i1.3170.
[4] N.  R.  Sari  and  A.  Listiadi,  “Pengaruh  literasi  keuangan,  pendidikan  keuangan  di  keluarga,  uang  saku  terhadap  perilaku pengelolaan keuangan dengan financial self-efficacy sebagai variabel intervening,” Jurnal Pendidikan Akuntansi (JPAK), vol. 9, no. 1, pp. 58–70, 2021, doi: https://doi.org/10.26740/jpak.v9n1.p58-70.
[5] B. F. Arianti, “Literasi Keuangan (Teori dan Implementasinya),” 2022.
[6] C. T. Lestari and F. Latifah, “Aplikasi pencatatan keuangan pribadi dengan analisa SWOT menggunakan algoritma sequential search berbasis mobile,” JISAMAR (Journal of Information System, Applied, Management, Accounting and Research), vol. 3, no. 2, pp. 11–18, 2019, Accessed: Sep. 11, 2023. [Online]. Available:
http://journal.stmikjayakarta.ac.id/index.php/jisamar/article/view/85

## Hielmi  Sulaeman,  Perancangan  Aplikasi  Manajemen  Keuangan  Berbasis  Mobile  Menggunakan  React  Native  Untuk Meningkatkan Literasi Keuangan Individu
[7] H. Purnomo, M. Marsely, W. F. Lestari, O. Aryadewa, and F. Z. F. Oktavia, “Eksplorasi Aplikasi Pencatatan Keuangan Pribadi berbasis  Android,”  in  SEMINAR  NASIONAL  GABUNGAN  BIDANG  SOSIAL,  2021.  Accessed:  Sep.  11,  2023.  [Online]. Available: https://prosiding.polinema.ac.id/index.php/sngbs/article/view/301
[8] E.  Trivaika  and  M.  A.  Senubekti,  “Perancangan  Aplikasi  Pengelola  Keuangan  Pribadi  Berbasis  Android,”  NUANSA INFORMATIKA, vol. 16, no. 1, pp. 33–40, 2022, doi: https://doi.org/10.25134/nuansa.v16i1.4670.
[9] S. Tjandra, G. L. Dewi, S. P. Santoso, and J. Prajetno, “Pengembangan Aplikasi Pengaturan Keuangan Pribadi Berbasis Android,” Jurnal  Teknik  Industri,  vol.  25,  no.  2,  pp.  39–47,  Oct.  2022,  Accessed:  Sep.  11,  2023.  [Online].  Available: http://univ45sby.ac.id/ejournal/index.php/industri/article/view/306
[10]  A. Y. Muniar, “Implementasi Aplikasi Perencanaan Keuangan Keluarga Berbasis Mobile,” Celebes Computer Science Journal, vol. 2, no. 1, pp. 1–12, 2020.
[11]  G. C. Antonio, R. Intan, and R. Adipranata, “Pengelolaan Keuangan Pribadi yang Interaktif Berbasis Android,” Jurnal Infra, vol. 9, no. 2, pp. 144–148, 2021.
[12]  S. Lin and G. Hoendarto, “Aplikasi Mobile Money Management Dengan Fitur Optical Character Recognition Menggunakan Framework React Native,” METIK JURNAL, vol. 5, no. 2, pp. 19–27, 2021, doi: https://doi.org/10.47002/metik.v5i2.291.
[13]  U. Juhardi and K. Khairullah, “Sistem Pencatatan dan Pengolahan Keuangan Pada Aplikasi Manajemen Keuangan E-Dompet Berbasis Android,” Journal of Technopreneurship and Information System (JTIS), vol. 2, no. 1, pp. 24–29, Mar. 2019, doi: 10.36085/jtis.v2i1.215.
[14]  M. S. Rumetna and T. N. Lina, “Sistem Informasi Kampung Wisata Arborek Dengan Metode Waterfall,” Information System For Educators And Professionals: Journal of Information System, vol. 5, no. 1, pp. 31–40, Dec. 2020, Accessed: Sep. 11, 2023. [Online]. Available: http://ejournal-binainsani.ac.id/index.php/ISBI/article/view/1393
[15]  R. N. Kulkarni and P. P. R. Prasad, “Novel Approach to Abstract the Data Flow Diagram from Java Application  Program,” International Journal of Intelligent Systems and Applications in Engineering, vol. 11, no. 3, pp. 394–404, Jul. 2023, [Online]. Available: https://ijisae.org/index.php/IJISAE/article/view/3180
[16]  K. ’Afiifah, Z. F. Azzahra, and A. D. Anggoro, “Analisis Teknik Entity-Relationship Diagram dalam Perancangan Database Sebuah Literature Review,” INTECH (Informatika dan Teknologi), vol. 3, no. 1, Apr. 2022, doi: 10.54895/intech.v3i1.1261.
[17]  M. S. Hartawan, “PENERAPAN USER CENTERED DESIGN (UCD) PADA  WIREFRAME DESAIN USER INTERFACE DAN  USER  EXPERIENCE  APLIKASI  SINOPSIS  FILM,”  JEIS:  JURNAL  ELEKTRO  DAN  INFORMATIKA SWADHARMA, vol. 2, no. 1, pp. 43–47, Jan. 2022, doi: 10.56486/jeis.vol2no1.161.
[18]  D. Y. Sylfania, F. P. Juniawan, and L. Agusti, “Implementasi Sistem Informasi Akademik Berbasis Android pada SMA Negeri 1 Tempilang,” JEPIN (Jurnal Edukasi dan Penelitian Informatika), vol. 5, no. 3, pp. 301–307, 2019, doi: 10.26418/jp.v5i3.33276.
[19]  F.  Fauzani,  “Aplikasi  manajemen  keuangan  pribadi  (angsa)  berbasis  android,”  JUKOMIKA  (Jurnal  Ilmu  Komputer  dan Informatika), vol. 2, no. 5, pp. 174–182, 2019, doi: 10.54650/jukomika.v2i5.110.
[20]  D. Uzairi and I. Najiyah, “Aplikasi Manajemen Keuangan Berbasis Android Dengan Fitur Reminder Dan Push Notification,” eProsiding Teknik Informatika (PROTEKTIF), vol. 1, no. 1, pp. 195–199, 2021, Accessed: Sep. 12, 2023. [Online]. Available: http://eprosiding.ars.ac.id/index.php/pti/article/view/249
[21]  P. R. Setiawan, M. Syaifullah, and P. P. Putra, “Sistem Pemesanan Menu Pada Restoran Berbasis Android,” IT Journal Research and Development, vol. 5, no. 2, pp. 193–203, 2021, doi: 10.25299/itjrd.2021.vol5(2).5866.
[22]  F. Hanif, I. Ahmad, D. Darwis, I. L. Putra, and M. F. Ramadhani, “ANALISA PERBANDINGAN METODE GRAPHQL API DAN REST API DENGAN MENGGUNAKAN ASP. NET CORE WEB API FRAMEWORK,” TELEFORTECH: Journal of Telematics and Information Technology, vol. 3, no. 2, pp. 33–37, 2023, doi: 10.33365/tft.v3i2.2511.
[23]  J. Ferbi, W. Junaidi, and F. P. Sihotang, “Sistem Informasi Manajemen Penyewaan Alat Berat pada PT Suriaman Sentosa,” Jurnal Teknologi Sistem Informasi, vol. 1, no. 2, pp. 142–152, 2020, doi: 10.35957/jtsi.v1i2.512.
[24]  S. Safwandi, “ANALISIS PERANCANGAN SISTEM INFORMASI SEKOLAH MENENGAH KEJURUAN 1 GANDAPURA DENGAN MODEL DIAGRAM KONTEKS DAN DATA FLOW DIAGRAM,” Jurnal Teknologi Terapan and Sains 4.0, vol. 2, no. 2, pp. 525–539, 2021, doi: 10.1976/tts%204.0.v2i2.4724.g2526.
[25]  A.  Krismadi,  A.  F.  Lestari,  A.  Pitriyah,  I.  W.  P.  A.  Mardangga,  M.  Astuti,  and  A.  Saifudin,  “Pengujian  Black  Box  berbasis Equivalence Partitions pada Aplikasi Seleksi Promosi Kenaikan Jabatan,” Jurnal Teknologi Sistem Informasi dan Aplikasi, vol. 2, no. 4, p. 155, Oct. 2019, doi: 10.32493/jtsi.v2i4.3771.