Memahami Pencocokan Pola di Flutter Menggunakan Backend Back4app

10min
Pendahuluan
Pencocokan pola adalah fitur yang kuat yang diperkenalkan di Dart 3 yang memungkinkan pengembang untuk dengan mudah mengidentifikasi dan mengekstrak struktur data tertentu dalam aplikasi mereka. Jika Anda memiliki pengalaman dengan bahasa seperti Kotlin, Swift, atau JavaScript, Anda mungkin sudah familiar dengan pencocokan pola. Namun, jika Anda baru dengan konsep ini di Dart, tutorial ini akan membantu Anda merasa nyaman dengan itu. Kami akan menjelajahi pencocokan pola dan cara menggunakannya dalam aplikasi Flutter dengan contoh praktis yang mengintegrasikan Back4app sebagai backend untuk mengelola dan menyimpan data.
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki hal-hal berikut:
Akun Back4app. Daftar untuk akun gratis di Back4app.com.
Lingkungan pengembangan Flutter yang sudah disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter jika Anda belum menyiapkannya.
Pengetahuan dasar tentang Dart, widget Flutter, dan menggunakan Back4app untuk layanan backend.
Langkah 1 – Menyiapkan Backend Back4app Anda
Buat Proyek Back4app: Masuk ke akun Back4app Anda dan buat proyek baru.
Buat Kelas Parse: Untuk tutorial ini, buat Kelas Parse bernama UserData untuk menyimpan informasi pengguna:
username (String): Nama pengguna.
age (Number): Usia pengguna.
preferences (JSON): Objek JSON yang menyimpan preferensi pengguna.
Dapatkan Kredensial Back4app Anda: Arahkan ke pengaturan proyek Anda untuk mengambil ID Aplikasi dan Kunci Klien Anda, yang Anda perlukan untuk menghubungkan aplikasi Flutter Anda ke Back4app.
Langkah 2 – Menyiapkan Proyek Flutter
Buat Proyek Flutter Baru: Buka terminal atau command prompt Anda dan jalankan:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_example
﻿
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Jalankan flutter pub get untuk menginstal dependensi ini.
Inisialisasi Parse di Aplikasi Anda: Di lib/main.dart, inisialisasi SDK Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PatternMatchingScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PatternMatchingScreen(),
    );
  }
}
﻿
Ganti 'YOUR_BACK4APP_APP_ID' dan 'YOUR_BACK4APP_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3 – Mengimplementasikan Pencocokan Pola
Buat Widget PatternMatchingScreen: Di lib/main.dart, buat widget baru yang menunjukkan pencocokan pola dengan mengambil dan memproses data pengguna:
Dart
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

  @override
  void initState() {
    super.initState();
    _fetchAndMatchData();
  }

  Future<void> _fetchAndMatchData() async {
    final query = QueryBuilder<ParseObject>(ParseObject('UserData'));
    final response = await query.query();

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

  @override
  void initState() {
    super.initState();
    _fetchAndMatchData();
  }

  Future<void> _fetchAndMatchData() async {
    final query = QueryBuilder<ParseObject>(ParseObject('UserData'));
    final response = await query.query();

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
﻿
Kode ini mengambil data pengguna dari Back4app, menerapkan pencocokan pola untuk memvalidasi dan mendestruktur data, dan kemudian menampilkan pesan yang dipersonalisasi berdasarkan data yang dicocokkan.
Langkah 4 – Menjalankan Aplikasi
Jalankan aplikasi Anda menggunakan flutter run. Anda seharusnya melihat pesan di layar berdasarkan data yang diambil dan dicocokkan menggunakan pencocokan pola.
Verifikasi data di Back4app dengan masuk ke dasbor Back4app Anda dan memeriksa UserData kelas. Anda dapat menyesuaikan data untuk melihat bagaimana pola yang berbeda cocok dan bagaimana aplikasi merespons.
Kesimpulan
Dalam tutorial ini, kami menjelajahi konsep pencocokan pola di Dart dan bagaimana hal itu dapat diterapkan dalam aplikasi Flutter. Dengan mengintegrasikan Back4app sebagai backend, kami menunjukkan contoh praktis pengambilan dan pemrosesan data menggunakan pencocokan pola. Pendekatan ini memungkinkan Anda untuk memvalidasi dan mendestruktur data secara efisien, menjadikan aplikasi Flutter Anda lebih kuat dan mudah dipelihara.
Untuk informasi lebih lanjut tentang pola Dart, kunjungi dokumentasi Dart, dan untuk tips integrasi backend, lihat dokumentasi Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Mengumpulkan Umpan Balik Pengguna di Flutter Menggunakan Komponen Umpan Balik dan Menyimpan Data di Back4app
BERIKUTNYA
Bagaimana Cara Menggunakan Uint8List di Flutter dan Menyimpannya di Backend Menggunakan Back4app