Ngoding Iseng, Implementasi Flutter 3.7+ dengan Backend Laravel 9

Wahalo, setelah sekian lama tidak update artikel, sebentar lagi saya akan merilis beberapa artikel tentang tutorial backend laravel dan bagaimana cara backend dapat diakses di Flutter. Kita akan mencoba membuat aplikasi flutter RESTful API menggunakan laravel dengan authentikasi menggunakan sanctum. Guard bawaan dari laravel ini lebih ringan dan lebih mudah diterapkan dibandingkan menggunakan passport. Kita juga akan belajar mengonsumsi REST API ke flutter.  Tapi sebelum itu, Saya buat artikel ini untuk overview apa saja dan bagaimana saya membuat aplikasi flutter yang dapat terhubung ke backend menggunakan API.

Laravel SimpleAPI

SimpleAPI adalah nama project untuk backend-nya. Struktur database basically seperti ini:

Ada tiga tabel dengan nama categories, users, dan transactions. Semua tabel ini tidak dibuat secara manual tetapi dengan menggunakan laravel migration. Termasuk membuat foreign key. Di gambar, untuk mengetahui foreign key yang mana yaitu yang terdapat bullet point diamond yang berwarna pink.

Selain itu ada tabel personal_access_token, tabel untuk authentication stuff. I will explain it briefly what is authentication. Adalah sebuah cara untuk mengidentifikasi pengguna dan memverifikasi hak yang dimilki oleh pengguna tersebut.

Verifikasi menggunakan token adalah salah satu cara untuk authentication. Dan semua keperluan verifikasi itu disimpan secara aman di dalam database melalui tabel access_token.

Di Projek laravel ini, umumnya saya belajar bagaimana caranya membuat

1. CRUD API, kalau diibaratkan, backend adalah koki, API adalah pelayan yang akan menyediakan sajian ke konsumen, dimana konsumen kali ini adalah aplikasi flutter.
2. Membuat autentikasi menggunakan sanctum. Authentication Sanctum ini akan membatasi akses API dan database pada user tertentu. Kita akan membuat sistem register dan login yang lebih aman menggunakan dependency santum.
3. Cara Upload dan Replace file di laravel, file berupa gambar pertama kali diambil dari aplikasi flutter kemudian disimpan di database mysql yang suatu waktu dapat dikirim lagi ke flutter untuk ditampilkan.
4. Explore fitur laravel seperti custom validation request, laravel global scope,  laravel Resource, API versioning, etc.
5. Connect server lokal ke bluestack emulator. Ya, saya serve laravel server di PC, namun aplikasi diinstall di bluestack.

Untuk struktur direktori laravel, diluar dari struktur bawaan laravel, file yang saya tambah atau modif sebagian besar dapat terlihat di gambar ini:

Selain file dan direktori diatas, saya juga memodifikasi file api.php. File yang sangat krusial sekali. Kenapa sangat krusial? Jelaslah, kan buat handle API ya di api.php.

API berfungsi sebagai penunjuk berupa routes ketika aplikasi mencoba mengakses atau meminta request tertentu, tergantung rute API yang mana yang akan aplikasi eksekusi, akan menentukan metode di controller mana yang akan menangani requestmu.

Kita kenalan dulu, di laravel menggunakan konsep MVC model-view-controller:

• Model adalah representasi dari data. Model secara langsung berinteraksi dengan database.
• Controller adalah bagian yang bertanggung jawab untuk mengontrol logika aplikasi
• view adalah untuk membaca dan menampilkan data, view akan dihandle oleh widget flutter framework. Laravel hanya menyediakan data JSON sebagai cara aplikasi dan server saling bertukar data.

Selanjutnya kita kenalan sekilas dengan fitur lain yang terdapat di laravel:

1. Di dalam direktori API ada AuthController, CategoryController, TransactionController, dan UserController. Kenapa saya taruh di direktori API (which direktorinya saya buat pula menggunakan command laravel). Agar ada separation layer  saja mana yang controller untuk handle API dan controller mana yang handle web jika dibutuhkan.
2. Di dalam direktori Request,  ini digunakan untuk “rules” request data seperti apa yang akan diterima API sebelum diteruskan ke Controller.
3. Resources adalah response seperti apa  yang akan diterima User.
4. File dalam Models/Scopes untuk memberikan aturan global tampilan kueri data.  Fungsinya adalah reusabilitas dan penyederhanaan kode. Misal kamu ingin kueri list kategori yang ditampilkan adalah selalu kategori yang dibuat oleh user x. Maka buat saja global scopes.

Untuk testing API, saya menggunakan hoppscotch.io, layoutnya mirip seperti Postman.

WorkAround Flutter RESTFul API dengan Laravel dan Sanctum Auth:  SimpleNako

Sedangkan di aplikasi mobile, saya menggunakan versi flutter stabil versi terbaru, 3.7. FYI, Kode di flutter ini cukup berantakan, karena saat mengerjakan saya selalu kepikiran ide yang aneh. misalnya, saja:

• daripada single delete, tiba-tiba saya ingin menerapkan multiple delete transactions.
• saya ngide menggabungkan login dan register di satu screen.
• Saya ingin menambahkan update profile dengan foto profile.
• Oh saya ingin ketika menghapus kategori yang mana semua foreign key yang mereferensikan ke tabel karegori akan dirubah menjadi null :P.
• Saya ingin ada bermacam cara untuk update parent widget if there are data changes happen in child widget, entah pakai listener, atau pakai provider state management????
• Saya ingin shared preference yang bisa menyimpan objek????

Sengaja saya banyakin eksperimen karena nanti bisa jadi referensi belajar, cukup baca kodingan di aplikasi ini. Kalau kamu ingin tahu cara install flutter dan tool untuk first start flutter.

Struktur kode aplikasi.

Untuk package yang saya pakai dan konfigurasi flutter saya bisa dilihat di pubspec.yaml

name: simplenako Kalau 
description: learn flutter laravel implementation

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '>=2.18.6 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  google_fonts: ^4.0.3
  cupertino_icons: ^1.0.5

  nb_utils: ^5.0.6
  intl: ^0.18.0
  device_info_plus: ^8.1.0

  # Common
  share_plus: ^6.3.1
  url_launcher: ^6.1.10
  http: ^0.13.5
  html: ^0.15.2
  shared_preferences: ^2.0.18
  provider: ^6.0.5

  # IMAGE
  cached_network_image: ^3.2.3
  image_picker: ^0.8.7
  file_picker: ^5.2.6
  photo_view: ^0.14.0
  card_swiper: ^2.0.4
  # For svg image
  flutter_svg: ^2.0.4

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.1


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/svg/

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Saya jelaskan package third party mulai dari nb_utils.

• nb_utils itu package multiguna yang menyediakan premade widget serta method.
• intl digunakan untuk konversi waktu
• device_info_plus digunakan untuk mendapatkan device info yang digunakan untuk generate access token (penting untuk authentication)
• shared_preferences digunakan untuk menyimpan data secara persisten ke cache memory, tujuannya saat aplikasi ditutup kemudian dibuka, nilai data yang disimpan dalam sharedpreferences akan selalu sama sampai kita mengubah data tersebut.
• provider adalah salah satu package untuk memanajemen state widget. Jika kamu punya kondisi dimana nilai sesuatu adalah global atau single source of truth, gunakan state management
• http untuk komunikasi dengan server, package ini hanya diimplementasi di repository.

Untuk menambahkan akses direktori,  kamu perlu tambahkan deklarasi assets.

  assets:

• – assets/images/
• – assets/svg

untuk assets ada file svg karena saya iseng gimana penerapan SVG files di flutter, apakah sama seperti kelola gambar?

Struktur kode Flutter

Saya menggunakan provider pattern, separation concern yang saya terapkan adalah Model-Provider-Repository. Dimana model adalah representasi dari data yang diterima dari response server, presentation adalah view data dan tampilan antarmuka. Provider untuk manajemen state dan mengatur implementasi single source truth antar UI serta listening data changes. 

Kemudian untuk services, bagian yang mengatur logic dan kirim dan terima data dari server. Repository adalah bagian yang mengonsumsi API.

Implementasi layout flutter dan router beserta provider, di inisialisasi di main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  bool isLogin =
      await PrefStorageManager.readData(SharedPrefConstant.isLoggedIn) ?? false;
  await PrefStorageManager.saveData(SharedPrefConstant.isLoggedIn, isLogin);
  runApp(MyApp(isLogin: isLogin));
}

class MyApp extends StatelessWidget {
  final bool isLogin;
  const MyApp({
    super.key,
    required this.isLogin,
  });
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AuthProvider()),
        ChangeNotifierProvider(create: (_) => UserProfileProvider()),
        ChangeNotifierProvider(create: (_) => TransactionProvider()),
        ChangeNotifierProvider(create: (_) => CategoryProvider()),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Simple Laravel Demo',
        theme: AppThemeData.appThemeData,
        home: isLogin ? DashboardPage() : AuthPage(),
        routes: PageRoutes().routes(),
      ),
    );
  }
}

providers diinisialisasi di awal, dengan ChangeNotifierProvider, sebagai listener ke widget jika ada perubahan value. Dengan inisialisasi di awal, berarti akses global state berlaku diseluruh widget di bawah main.dart.

Stay update, untuk tutorial Flutter RestFul API dengan Laravel deep dive, hanya di Nako Blog.