Panduan langkah demi langkah untuk membangun backend Flutter

Artikel ini akan membahas Flutter, sebuah perangkat lunak pengembangan UI sumber terbuka yang dibuat oleh Google.

Kami akan menjelajahi keuntungan dan kerugian menggunakan Flutter dan menyoroti opsi backend yang berbeda untuk aplikasi Flutter Anda.

Terakhir, Anda akan belajar cara membangun backend yang berfungsi untuk aplikasi Flutter Anda menggunakan fitur Backend as a Service (BaaS) dari Back4apps.

Apa itu Flutter?

Flutter adalah kerangka kerja pengembangan lintas platform yang memungkinkan Anda membangun aplikasi Android, iOS, Web, Linux, macOS, dan Windows dengan cepat.

Dengan Flutter, Anda akan menemukan bahwa banyak kerumitan dalam membangun aplikasi khusus platform dilewati untuk Anda. Flutter juga dikenal dengan kinerjanya yang cepat dan widget UI yang indah.

Tim Flutter sendiri mendefinisikan teknologi ini sebagai;

Kerangka kerja sumber terbuka dari Google untuk membangun aplikasi multi-platform yang indah dan dikompilasi secara native dari satu basis kode.

3 Keuntungan dan Keterbatasan Flutter Teratas

Apa Saja Jenis Backend?

Memilih opsi Backend yang tepat untuk menangani tugas-tugas sisi server sangat penting ketika membangun aplikasi apa pun.

Setiap jenis Backend memiliki kelebihan masing-masing, dan kebutuhan khusus aplikasi Anda harus memandu pilihan Backend Anda.

Sub-bagian berikut ini akan menyoroti berbagai opsi backend yang dapat Anda gunakan, apa saja, bagaimana cara kerjanya, dan bagaimana opsi-opsi tersebut paling sesuai dengan kebutuhan aplikasi Anda.

IaaS

IaaS adalah opsi backend yang harus Anda pertimbangkan untuk digunakan jika Anda berurusan dengan aplikasi besar dengan banyak pengguna. IaaS adalah model komputasi awan yang merupakan singkatan dari Infrastruktur sebagai Layanan.

Komputasi awan adalah model di mana penyedia pihak ketiga memberikan sumber daya komputasi, seperti server, penyimpanan, dan aplikasi, melalui Internet.

Sumber daya ini dapat diakses sesuai permintaan, dengan harga sesuai penggunaan. Dengan IaaS, penyedia layanan cloud akan memelihara infrastruktur komputasi utama yang mendasari, sementara Anda akan memiliki kendali penuh untuk mengonfigurasi data aplikasi Anda, sistem operasi, dan semua persyaratan backend lainnya.

Hal ini menjadikannya opsi backend yang baik untuk aplikasi yang membutuhkan penskalaan dengan sumber daya komputasi naik atau turun.

PaaS

Platform-as-a-Service (PaaS ) dan Infrastructure-as-a-Service (IaaS) adalah dua model komputasi awan yang berbeda yang memiliki tujuan berbeda. Meskipun keduanya menawarkan fleksibilitas dan skalabilitas, keduanya memenuhi kebutuhan yang berbeda dalam pengembangan dan penyebaran aplikasi.

Backend PaaS akan memberi Anda lingkungan pengembangan yang lengkap, menghilangkan kerumitan dalam mengelola server, jaringan, dan penyimpanan. PaaS paling cocok jika Anda ingin fokus membangun dan memelihara aplikasi tanpa mengkhawatirkan manajemen infrastruktur.

BaaS

Backend sebagai Layanan (BaaS ) memberi Anda layanan dan fungsi backend yang siap pakai, sehingga Anda dapat fokus membangun dan meningkatkan pengalaman pengguna aplikasi tanpa perlu mengelola infrastruktur backend.

Dengan BaaS, pengembang dapat mengakses fitur-fitur seperti autentikasi pengguna, database, dan penyimpanan, melalui API, sehingga tidak perlu lagi mengatur dan memelihara server backend.

Ini seperti menggunakan potongan puzzle yang sudah jadi yang sangat cocok dengan aplikasi Anda, menghemat waktu dan tenaga.

Intinya, BaaS menyederhanakan proses pengembangan, memungkinkan para pengembang untuk fokus pada aspek-aspek yang berhubungan dengan pengguna dari aplikasi mereka sambil mengandalkan layanan backend yang telah dibangun sebelumnya untuk menangani pekerjaan berat.

Cara Membangun Backend Flutter Menggunakan Backend sebagai Layanan

Bagian ini akan membahas bagaimana Anda dapat mulai membangun backend aplikasi Flutter. Platform Back4app adalah pilihan yang bagus untuk membangun aplikasi backend yang dapat diskalakan dan aman, fleksibel, dan mudah digunakan.

Ikhtisar Back4app

Back4App adalah platform Backend-as-a-Service (BaaS) yang menyederhanakan pengembangan aplikasi seluler dan web dengan menyediakan infrastruktur backend yang lengkap.

Dengan menggunakan Back4App, Anda akan dapat fokus membangun fitur front-end aplikasi Anda.

Platform ini menawarkan berbagai layanan backend siap pakai, termasuk basis data, API, dan fungsi-fungsi cloud.

Fitur/manfaat utama Back4app meliputi:

• Basis Data Relasional dan Non-Relasional
• API REST dan GraphQL
• Pertanyaan Langsung
• Beragam pilihan Autentikasi
• Hosting yang dapat diskalakan
• Pemberitahuan Push dan Email

Back4App menggunakan server Parse, sebuah kit sumber terbuka untuk mengembangkan komponen sisi server dari sebuah aplikasi. Dengan dukungan untuk berbagai teknologi. Panduan referensi ini berisi daftar berbagai teknologi yang didukung oleh Back4app.

Pengenalan Proyek

Tujuan dari panduan ini adalah untuk membangun backend Back4app untuk mendukung aplikasi Flutter. Aplikasi ini akan terhubung dan berinteraksi dengan backend yang telah disiapkan menggunakan Parse server SDK.

Aplikasi yang akan Anda buat adalah aplikasi Kontak sederhana yang memungkinkan pengguna untuk membuat dan membaca kontak. Kontak-kontak ini akan disimpan dengan menggunakan dukungan basis data PostgreSQL dari Back4app.

Pengguna dapat menambahkan kontak baru dengan memasukkan informasi kontak dalam aplikasi.

Pada akhir panduan ini, Anda akan memiliki pemahaman yang kuat tentang cara melakukannya:

• Membangun aplikasi backend di platform Back4app
• Menulis ke basis data Back4app yang terstruktur
• Menangani dasar-dasar keamanan backend Parse.

Prasyarat

Untuk mengikuti panduan ini, Anda harus memenuhi prasyarat berikut ini:

• Mengenal bahasa Dart dan kerangka kerja Flutter
• Pengetahuan tentang memanipulasi status dalam Flutter
• Simulator perangkat atau emulator untuk menjalankan aplikasi Anda. Xcode untuk iOS atau Android Studio untuk Android.
• Pemahaman dasar mengenai basis data relasional dan non-relasional

Buat Aplikasi

Anda harus memiliki akun Back4app untuk membuat backend. Anda dapat membuatnya jika Anda belum memilikinya dengan mengikuti pendaftaran untuk mendapatkanakun gratis.

Jika Anda sudah memiliki akun di Back4app,masuk dan buat aplikasi baru. Pilih Backend sebagai Layanan sebagai opsi layanan.

Ini akan membangun backend BaaS yang dapat diskalakan. Jangan lupa untuk memberi nama unik pada aplikasi Anda. Untuk database pilihan, Back4app menawarkan PostgreSQL sebagai opsi database.

PostgreSQL adalah sistem manajemen basis data relasional (RDBMS) sumber terbuka yang populer. Sistem ini dikenal dengan skalabilitas, keandalan, performa tinggi, dan keamanannya.

Menggunakan opsi PostgreSQL beta di Back4app memungkinkan Anda untuk mengambil keuntungan dari fitur dan manfaat ini.

Fase pembuatan seharusnya berjalan dengan cepat. Setelah selesai, Anda akan diarahkan ke dasbor aplikasi Anda.

Basis Data PostgreSQL

Di Back4App, Anda bisa mendefinisikan kelas dan bidang yang mewakili data aplikasi Anda. PostgreSQL menggunakan basis data relasional, sebuah metode terstruktur untuk menyimpan data bagi pengguna aplikasi Anda.

Seperti yang telah disebutkan sebelumnya, aplikasi Flutter kita akan menjadi sebuah buku kontak di mana kita dapat menyimpan banyak kontak. Basis data PostgreSQL menyimpan relasi. Model data yang masuk akal untuk aplikasi ini adalah kelas kontak dan kode pos kota kontak.

Mari kita mulai dengan model Kontak. Tabel kontak akan membutuhkan bidang yang berbeda;

• ContactId/ObjectId
• Nama
• Nomor Telepon
• Kode Pos

Tabel model data Anda akan terlihat seperti ini;

Kontak

Kode Pos

Objek Contact akan menyimpan informasi kontak, dengan contactId sebagai kunci utama. Kolom name, phoneNumber, dan zipCode wajib diisi (BUKAN NULL),

Model data ini menciptakan hubungan antara tabel aplikasi Kontak, sehingga Anda dapat mengelola informasi kontak dan mengaitkan beberapa bidang dengan setiap kontak.

Untuk membuat dua kelas ini di aplikasi Back4app Anda, tekan tombol Buat Kelas di sudut kiri atas Dasbor Anda.

Beri nama kelas Kontak dan aktifkan opsi ‘apakah ini bidang yang harus diisi?

Buat kolom untuk bidang data di Contact, lalu lakukan hal yang sama untuk kelas ZipCode. Back4app memungkinkan Anda untuk menyesuaikan setiap kolom yang dibuat.

Panel Admin

Back4App menyediakan GUI (Graphical User Interface) intuitif yang disebut Admin Panel untuk mengelola backend aplikasi Anda dengan mudah.

Panel Admin adalah alat yang ampuh untuk memantau, mengedit, dan menganalisis data, menjadikannya aset yang tak ternilai untuk manajemen aplikasi.

Anda dapat mengakses panel admin aplikasi di dalam aplikasi Anda. Di dasbor aplikasi, Anda akan menemukan tombol atau tautan berlabel“Panel Admin” di bawah “Lainnya,” yang akan mengarahkan Anda ke Panel Admin. Di sana Anda dapat mengaktifkan dan mengaktifkan aplikasi admin.

Anda akan memberikan nama pengguna dan kata sandi untuk mengakses aplikasi admin.

Langkah terakhir untuk menyiapkan aplikasi admin Anda adalah memilih nama domain yang ingin Anda gunakan untuk mengakses panel.

Untuk panduan ini, contoh yang baik adalah; flutter-backend.admin.back4app.com.

Sekarang Anda bisa masuk ke dasbor admin dengan membuka domain yang disediakan pada browser.

Untuk mempelajari lebih lanjut tentang Aplikasi Admin Back4app, kunjungi dokumen resminya.

Mengamankan Aplikasi

Saat ini, aplikasi backend Anda benar-benar rentan, dan informasi di dalamnya dapat dirusak dari sisi klien.

Untuk mencegah hal ini pada tahap produksi, Anda dapat mengonfigurasi peraturan dan izin akses.

Untuk mengontrol bagaimana kelas dibuat dan melarang pembuatan kelas dari sisi klien, buka Dasbor > Pengaturan Aplikasi dan cari Pembuatan Kelas Klien. Nonaktifkan opsi ini, karena aplikasi Anda saat ini hanya memerlukan dua kelas yang telah Anda buat.

Sebuah popup akan muncul ketika Anda beralih. Ini untuk mengonfirmasi dan menyimpan perubahan aplikasi Anda.

Pengujian API CRUD Dengan Flutter

Pada bagian ini, Anda akan menguji fungsi API backend dan database aplikasi Anda dengan aplikasi Flutter yang akan Anda buat. Anda akan mulai dengan membangun antarmuka pengguna untuk aplikasi Flutter.

Anda harus menginstal Flutter SDK di komputer Anda untuk menginisialisasi aplikasi Flutter.

Ikuti dokumen resmi Get Started Docs dari Flutter untuk menginstal SDK Flutter dan alat yang diperlukan untuk membangun aplikasi Flutter pada mesin Windows atau Mac Anda.

Untuk menginisialisasi aplikasi Flutter, jalankan perintah berikut ini di terminal Anda:

#Initialize your Flutter app
flutter create my_flutter_app

#Run your Flutter app
flutter run

Perintah-perintah ini akan membuat perancah dan memulai aplikasi Flutter sederhana untuk Anda kembangkan.

Untuk membuat panduan ini tetap sederhana, file main.dart akan berisi sebagian besar kode untuk menjalankan aplikasi Flutter Anda. Kami tidak akan membahas kode Flutter di sini karena itu bukan tujuan dari panduan ini.

Timpa semua kode di main.dart dengan yang berikut ini:

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'appID';
  final keyClientKey = 'clientKey';
  final keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MaterialApp(
    title: 'Contacts',
    theme: ThemeData(
      primaryColor: Colors.white,
    ),
    home: ContactsApp(),
  ));
}

class ContactsApp extends StatefulWidget {
  const ContactsApp({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _ContactsAppState createState() => _ContactsAppState();
}

class _ContactsAppState extends State<ContactsApp> {
  List<Contact> contacts = [];
  String? selectedZipCode; // Initialize with a default value

  @override
  void initState() {
    super.initState();
    selectedZipCode = '1234'; // Initialize with a default value
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contacts'),
      ),
      body: ListView.builder(
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(contacts[index].name),
            subtitle: Text(contacts[index].phoneNumber),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  contacts.removeAt(index);
                });
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showAddContactDialog();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  void _showAddContactDialog() async {
    showDialog(
      context: context,
      builder: (context) {
        String name = '';
        String phoneNumber = '';

        return AlertDialog(
          title: const Text('Add Contact'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: const InputDecoration(labelText: 'Name'),
                onChanged: (value) {
                  name = value;
                },
              ),
              TextField(
                decoration: const InputDecoration(labelText: 'Phone Number'),
                onChanged: (value) {
                  phoneNumber = value;
                },
              ),
              // Checkbox for Zip Code
              ListTile(
                title: const Text('Select Zip Code'),
                subtitle: Column(
                  children: [
                    RadioListTile(
                      title: const Text('1234'),
                      value: '1234',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                    RadioListTile(
                      title: const Text('4321'),
                      value: '4321',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  contacts.add(Contact(
                    name: name,
                    phoneNumber: phoneNumber,
                    zipCode: selectedZipCode as String,
                  ));
                });

                // Save the contact to Back4App
                final contact = ParseObject('Contact');
                contact.set('name', name);
                contact.set('phoneNumber', phoneNumber);
                contact.set(
                    'zipCode',
                    (ParseObject('ZipCode')..objectId = selectedZipCode.objectId)
                        .toPointer());

                await contact.save();

                // ignore: use_build_context_synchronously
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }
}

class Contact {
  final String name;
  final String phoneNumber;
  final String zipCode;

  Contact({
    required this.name,
    required this.phoneNumber,
    required this.zipCode,
  });
}

class ZipCode {
  final String zipCode;

  ZipCode({
    required this.zipCode,
  });
}

Dengan ini, Anda akan memiliki UI dasar untuk aplikasi Flutter Anda.

Sekarang Anda dapat memulai implementasi Back4app. Back4app menggunakan Parse Flutter SDK untuk mengintegrasikan Parse Server ke dalam aplikasi Flutter.

Parse Server adalah platform backend sumber terbuka yang menyediakan infrastruktur siap pakai untuk mengelola data aplikasi.

Dengan SDK, Anda dapat berkomunikasi dengan Parse Server API dari aplikasi Flutter Anda, sehingga lebih mudah untuk melakukan operasi CRUD (Buat, Baca, Perbarui, Hapus) pada data, mengelola sesi pengguna, dan menangani fungsi sisi server lainnya.

Untuk menggunakan Parse SDK, instal sebagai ketergantungan dalam file pubspec.yaml proyek Flutter Anda.

Tentukan server Parse:

dependencies:
	# Parse SDK
  parse_server_sdk_flutter: ^5.1.1

  flutter:
    sdk: flutter

Pastikan lekukan Anda akurat. File .yaml sangat sensitif terhadap huruf besar dan lekukan.

Jalankan perintah untuk menginstal ketergantungan yang ditentukan:

flutter pub get

Buka main.dart dan impor Parse SDK yang Anda tambahkan:

import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
	// code for runApp()

  const keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  const keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  const keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
}

Di sini Anda mengimpor ParseSDk ke dalam file main.dart Anda. Anda juga menginisialisasi Parse di dalam main() dengan memanggil Parse().initialize(). Karena ini adalah program asinkron, tandai main() dengan kata kunci asinkron.

Penampung untuk Application_Id dan Client Key Anda harus diganti dengan nilai yang sebenarnya. Ini adalah kredensial aplikasi untuk berkomunikasi dengan backend Anda.

Untuk mendapatkan kunci-kunci ini, buka Pengaturan Aplikasi > Keamanan & Kunci dari dasbor Back4app Anda. Kemudian ganti placeholder dengan kunci yang sesuai.

Saat menjalankan aplikasi Anda, main() akan dijalankan, Parse akan diinisialisasi dengan aplikasi Anda, dan aplikasi Flutter Anda akan terhubung ke backend Back4app Anda.

Menulis ke Kelas Kontak dan Kode Pos

Di sini Anda akan mempelajari cara membuat dan menulis ke kelas-kelas dalam database Anda dari sisi klien aplikasi Anda. Untuk membuat kelas Kontak dan Ulang Tahun, Anda akan memodifikasi main.dart.

Di dalam metode onPressed() untuk widget tombol yang ditinggikan, Anda akan menggunakan ParseObject( ) untuk membuat instance baru dari kelas Kontak :

final contact = ParseObject('Contact');
contact.set('name', name);
contact.set('phoneNumber', phoneNumber);

final ParseResponse parseResponse = await contact.save();

if (parseResponse.success) {
   final contactId = (parseResponse.results!.first as ParseObject).objectId!;
		print('Object created: $contactId');

	} else {
      print('Object created with failed: ${parseResponse.error.toString()}');
    }

Parse Flutter SDK menggunakan ParseObject() untuk membuat instance baru dari nama kelas apa pun yang Anda berikan sebagai argumen. Memanggil Contact.set() dengan nama bidang objek dan nilainya akan menulis dan memperbarui bidang tersebut.

Anda dapat membuat objek ParseResponse untuk menampung hasil operasi penyimpanan. ParseResponse akan berisi properti sukses yang akan bernilai benar jika operasi penyimpanan berhasil dan salah jika operasi penyimpanan gagal.

Kode tersebut kemudian menginisialisasi variabel contactId menjadi nol. Variabel ini akan digunakan untuk menyimpan objectId yang dihasilkan secara otomatis dari objek kontak yang disimpan. Kemudian tindak lanjuti dengan beberapa penanganan kesalahan.

Di bawah kode di atas:

final zipCodeObject = ParseObject('ZipCode')
    ..objectId = selectedZipCode as String;
zipCodeObject.set('zipCode', selectedZipCode);
contact.set('zipCode', zipCodeObject.toPointer());

await contact.save();
await zipCodeObject.save();

Di sini Anda membuat kode pos ParseObject. Ketika menambahkan kontak baru melalui dialog, kode akan membuat objek ZipCode dengan benar dan mengaitkannya dengan bidang zipCode objek Kontak.

Metode ini menggunakan objectId dari kode pos yang dipilih untuk membuat asosiasi sebagai penunjuk. Gunakan metode .save() untuk menyimpan kedua objek ke backend.

Mengajukan Pertanyaan/Membaca Data dari Basis Data

Di sini kita akan membahas bagaimana Anda dapat mengirim kueri ke basis data dari aplikasi Flutter Anda. Anda dapat membuat kueri untuk mengambil semua kontak dengan kode pos yang sama. Hal ini akan menjadi agak rumit untuk dilakukan pada sistem basis data non-relasional.

Jika pengambilan berhasil, Anda dapat menampilkan daftar semua kontak di aplikasi Flutter.

Untuk mengambil daftar kontak dengan kode pos yang sama:

Future<void> _loadContacts() async {
  final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Contact'))
    ..whereEqualTo('zipCode', selectedZipCode) // Filter by zip code
    ..orderByAscending('name');

  final response = await queryBuilder.query();

  if (response.success && response.results != null) {
    final List<Contact> loadedContacts = response.results!.map((parseObject) {
      return Contact(
        name: parseObject.get('name'),
        phoneNumber: parseObject.get('phoneNumber'),
        zipCode: parseObject.get('zipCode')!.objectId,
      );
    }).toList();

    setState(() {
      //set your contacts to loadedContacts
    });
  }
}

@override
  void initState() {
    super.initState();
   
    _loadContacts(); // Load contacts when the app starts
  }

Metode _loadContacts membuat kueri ke kelas Kontak, mencari objek kontak dengan kode pos tertentu.

Metode ini kemudian mengembalikan kontak dalam daftar sambil mengurutkannya berdasarkan nama dalam urutan menaik berdasarkan bidang ‘nama’.

Ketika aplikasi dimulai(initState), metode _loadContacts dipanggil untuk mengambil kontak dengan kode pos yang dipilih.

Kesimpulan

Memiliki backend yang terkontrol di mana Anda dapat menyusun aliran data dengan benar di aplikasi Anda mutlak diperlukan. Dengan Back4app, Anda dapat membangun backend aplikasi seluler Anda di mana saja.

Anda juga dapat menggunakan platform Back4app untuk mengimplementasikan otentikasi pengguna dengan basis data model pengguna yang telah diatur.