building-sehat-wallet-app-with-flutter-and-expressjs

Pendahuluan

Di era digital ini, mengelola keuangan pribadi menjadi sangat penting. Salah satu cara untuk melakukannya adalah dengan aplikasi pencatatan keuangan. Dalam artikel ini, kita akan membahas bagaimana cara membangun aplikasi dompet sehat menggunakan Flutter untuk frontend dan Express.js untuk backend.

Mengapa Memilih Flutter dan Express.js?

Flutter adalah framework yang sangat powerful untuk membangun aplikasi lintas platform. Dengan satu basis kode, kita dapat membuat aplikasi yang dapat berjalan di iOS dan Android. Di sisi lain, Express.js adalah framework minimalist untuk Node.js yang memudahkan kita dalam membuat API.

Kelebihan Flutter

• Hot Reload: Membuat pengembangan lebih cepat.
• UI yang Menarik: Dengan widget yang kaya, kita bisa membuat antarmuka pengguna yang cantik.
• Multi-platform: Satu kode untuk banyak platform.

Kelebihan Express.js

• Sederhana dan Fleksibel: Mudah digunakan untuk membuat API.
• Middleware: Memudahkan dalam menambahkan fungsionalitas tambahan.
• Kompatibilitas dengan Node.js: Memanfaatkan ekosistem Node.js yang luas.

Langkah-Langkah Membangun Aplikasi Dompet Sehat

1. Membangun Backend dengan Express.js

Pertama, kita akan membuat server menggunakan Express.js. Berikut adalah langkah-langkah untuk memulai:

Instalasi Express.js

Pertama, buat folder baru untuk proyek backend dan jalankan perintah berikut:

mkdir sehat-wallet-backend
cd sehat-wallet-backend
npm init -y
npm install express body-parser cors

Membuat Server

Buat file server.js dan tambahkan kode berikut:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
 
const app = express();
const PORT = process.env.PORT || 5000;
 
app.use(cors());
app.use(bodyParser.json());
 
let transactions = [];
 
app.get('/api/transactions', (req, res) => {
    res.json(transactions);
});
 
app.post('/api/transactions', (req, res) => {
    transactions.push(req.body);
    res.status(201).send();
});
 
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

2. Membangun Frontend dengan Flutter

Setelah server siap, kita bisa mulai membangun tampilan frontend menggunakan Flutter. Pastikan Anda sudah menginstal Flutter di komputer Anda.

Membuat Proyek Flutter

Jalankan perintah berikut untuk membuat proyek Flutter:

flutter create sehat_wallet
cd sehat_wallet

Menambahkan Dependencies

Edit file pubspec.yaml untuk menambahkan dependencies yang diperlukan:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Menghubungkan ke API

Buat file baru bernama api_service.dart dan tambahkan kode berikut untuk berinteraksi dengan API:

import 'dart:convert';
import 'package:http/http.dart' as http;
 
class ApiService {
  final String baseUrl = 'http://localhost:5000/api/transactions';
 
  Future<List<dynamic>> fetchTransactions() async {
    final response = await http.get(Uri.parse(baseUrl));
    return json.decode(response.body);
  }
 
  Future<void> addTransaction(Map<String, dynamic> transaction) async {
    await http.post(Uri.parse(baseUrl),
        headers: {'Content-Type': 'application/json'},
        body: json.encode(transaction));
  }
}

3. Membuat UI

Buat tampilan untuk menampilkan dan menambahkan transaksi. Gunakan widget seperti ListView untuk menampilkan daftar transaksi dan TextField untuk memasukkan data baru.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Dompet Sehat')), 
    body: FutureBuilder<List<dynamic>>(
        future: ApiService().fetchTransactions(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data![index]['name']),
                subtitle: Text(snapshot.data![index]['amount'].toString()),
              );
            },
          );
        }),
  );
}

Kesimpulan

Membangun aplikasi dompet sehat dengan Flutter dan Express.js adalah cara yang bagus untuk belajar dan menerapkan keterampilan pengembangan web dan mobile. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat aplikasi yang membantu dalam pencatatan keuangan pribadi. Jangan ragu untuk mengembangkan lebih lanjut dengan menambahkan fitur-fitur seperti autentikasi pengguna dan grafik untuk visualisasi data. Selamat mencoba dan semoga sukses!