Membangun dan Menggunakan Ekstensi DevTools Flutter dengan Back4app

18min
Pendahuluan
Flutter DevTools adalah rangkaian alat yang kuat untuk debugging, inspeksi, dan profiling aplikasi Flutter. Dengan kerangka ekstensi Dart & Flutter DevTools, pengembang dapat membuat ekstensi kustom untuk meningkatkan alur kerja debugging dan pengembangan mereka. Ekstensi ini dapat dibangun sebagai aplikasi web Flutter dan diintegrasikan dengan mulus ke dalam rangkaian DevTools.
Dalam tutorial ini, kita akan menjelajahi cara membuat ekstensi Flutter DevTools, mengintegrasikannya dengan aplikasi Flutter yang menggunakan Back4app untuk layanan backend, dan melakukan debugging aplikasi menggunakan ekstensi kustom. Ini akan membantu Anda membangun alat pengembang yang disesuaikan yang dapat memperlancar proses pengembangan Anda dan memberikan wawasan yang lebih dalam tentang perilaku aplikasi Anda.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
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 Flutter DevTools.
Langkah 1 – Menyiapkan Backend Back4app
Buat Proyek Back4app: Masuk ke akun Back4app Anda dan buat proyek baru.
Buat Kelas Parse: Untuk tutorial ini, buat Kelas Parse bernama ThemeSettings untuk menyimpan data konfigurasi tema untuk aplikasi Flutter Anda:
themeName (String): Nama tema.
primaryColor (String): Warna utama tema.
accentColor (String): Warna aksen tema.
Isi Kelas dengan Data Contoh: Tambahkan beberapa catatan ke kelas ThemeSettings untuk mensimulasikan konfigurasi tema yang akan digunakan aplikasi Flutter Anda.
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 – Membuat Ekstensi Flutter DevTools
Buat Proyek Flutter Baru: Buka terminal atau command prompt Anda dan jalankan:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
Atur Direktori Ekstensi: Arahkan ke direktori root proyek Anda dan buat direktori baru untuk ekstensi DevTools Anda:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
Di dalam direktori ini, buat sebuah config.yaml file untuk menyimpan metadata yang diperlukan oleh DevTools:
YAML
package_name: theme_builder_extension
version: 1.0.0
issue_tracker: https://github.com/yourusername/theme_builder_extension/issues
material_icon: assets/icon.png
package_name: theme_builder_extension
version: 1.0.0
issue_tracker: https://github.com/yourusername/theme_builder_extension/issues
material_icon: assets/icon.png
﻿
Tambahkan Ketergantungan: Buka pubspec.yaml dan tambahkan ketergantungan berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
﻿
Jalankan flutter pub get untuk menginstal ketergantungan ini.
Membuat Ekstensi DevTools: Di lib/main.dart, ganti konten default dengan kode berikut untuk membungkus aplikasi web Flutter Anda dalam sebuah DevToolsExtension widget:
Dart
import 'package:flutter/material.dart';
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:devtools_app_shared/devtools_app_shared.dart';

void main() {
  runApp(DevToolsExtension(child: ThemeBuilderApp()));
}

class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:devtools_app_shared/devtools_app_shared.dart';

void main() {
  runApp(DevToolsExtension(child: ThemeBuilderApp()));
}

class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
﻿
Ini membungkus aplikasi Anda dalam DevToolsExtension widget, yang menangani tema dan integrasi dengan suite DevTools.
Menambahkan Integrasi DevTools: Modifikasi aplikasi Anda untuk mengintegrasikan fitur khusus DevTools, seperti menggunakan DevToolsButton alih-alih ElevatedButton:
Dart
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: DevToolsButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: DevToolsButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
﻿
Perubahan ini memastikan UI ekstensi Anda menyatu dengan mulus dengan sisa suite DevTools.
Langkah 3 – Mengintegrasikan dengan Back4app
Inisialisasi Parse di Ekstensi Anda: Karena ekstensi ini akan berinteraksi dengan Back4app, inisialisasi Parse di ekstensi Anda:
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(DevToolsExtension(child: ThemeBuilderApp()));
}
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(DevToolsExtension(child: ThemeBuilderApp()));
}
﻿
Ambil dan Gunakan Data Tema: Gunakan data dari Back4app di ekstensi Anda untuk menghasilkan dan menerapkan tema:
Dart
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: FutureBuilder<List<ParseObject>>(
        future: fetchThemes(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }

          final themes = snapshot.data!;
          return ListView.builder(
            itemCount: themes.length,
            itemBuilder: (context, index) {
              final theme = themes[index];
              return ListTile(
                title: Text(theme.get<String>('themeName') ?? 'No Name'),
                subtitle: Text('Primary Color: ${theme.get<String>('primaryColor')}'),
                onTap: () {
                  // Apply theme logic
                },
              );
            },
          );
        },
      ),
    );
  }

  Future<List<ParseObject>> fetchThemes() async {
    final query = QueryBuilder<ParseObject>(ParseObject('ThemeSettings'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load themes');
    }
  }
}
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: FutureBuilder<List<ParseObject>>(
        future: fetchThemes(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }

          final themes = snapshot.data!;
          return ListView.builder(
            itemCount: themes.length,
            itemBuilder: (context, index) {
              final theme = themes[index];
              return ListTile(
                title: Text(theme.get<String>('themeName') ?? 'No Name'),
                subtitle: Text('Primary Color: ${theme.get<String>('primaryColor')}'),
                onTap: () {
                  // Apply theme logic
                },
              );
            },
          );
        },
      ),
    );
  }

  Future<List<ParseObject>> fetchThemes() async {
    final query = QueryBuilder<ParseObject>(ParseObject('ThemeSettings'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load themes');
    }
  }
}
﻿
Kode ini mengambil pengaturan tema dari Back4app dan menampilkannya dalam sebuah daftar. Memilih tema dapat memicu logika tambahan untuk menerapkannya.
Langkah 4 – Menguji Ekstensi Anda di Lingkungan Simulasi
Jalankan Ekstensi di Lingkungan Simulasi: Untuk menguji ekstensi Anda tanpa mengompilasinya setiap kali, gunakan lingkungan DevTools yang disimulasikan:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
Simulasikan Aplikasi Terhubung: Mulai aplikasi Flutter lain yang akan terhubung dengan ekstensi Anda. Salin dan tempel URI layanan VM aplikasi terhubung dan URI layanan DTD ke dalam lingkungan yang disimulasikan.
Langkah 5 – Membangun dan Menerbitkan Ekstensi
Bangun Ekstensi: Setelah Anda puas dengan ekstensi Anda, bangun untuk produksi:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
Validasi Ekstensi: Gunakan perintah validasi DevTools untuk memastikan ekstensi Anda dikonfigurasi dengan benar:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
Terbitkan Ekstensi: Terbitkan ekstensi Anda ke pub.dev agar pengembang lain dapat menggunakannya:
Bash
flutter pub publish
flutter pub publish
﻿
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana cara membuat ekstensi Flutter DevTools, mengintegrasikannya dengan Back4app untuk layanan backend, dan mengujinya dalam lingkungan yang disimulasikan. Dengan memperluas DevTools, Anda dapat membangun alat kustom yang meningkatkan produktivitas Anda dan menawarkan wawasan baru tentang perilaku aplikasi Anda. Setelah ekstensi Anda siap, menerbitkannya ke pub.dev memungkinkan pengembang lain untuk mendapatkan manfaat dari pekerjaan Anda.
Untuk informasi lebih lanjut tentang menggunakan Flutter dengan Back4app, lihat dokumentasi Back4app dan dokumentasi Flutter DevTools. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Menggunakan Isolates di Flutter dengan Back4app untuk Menangani Pemrosesan Data Berat
BERIKUTNYA
Cara Menggunakan Tombol Tersegmentasi di Flutter dengan Back4app