Bagaimana Cara Menggunakan Uint8List di Flutter dan Menyimpannya di Backend Menggunakan Back4app

12min
Pendahuluan
Dalam sistem digital, file sering kali direpresentasikan sebagai urutan byte, dan Dart menyediakan cara yang efisien untuk menangani data byte menggunakan Uint8List. A Uint8List adalah daftar dengan panjang tetap dari bilangan bulat 8-bit tanpa tanda, yang berarti setiap angka berkisar dari 0 hingga 255. Struktur ini berguna untuk bekerja dengan data biner, seperti gambar atau file, di mana efisiensi memori sangat penting.
Dalam tutorial ini, kita akan membahas cara bekerja dengan Uint8List di Flutter, mengonversi file menjadi daftar byte, dan menyimpan data di backend Back4app menggunakan Parse SDK untuk Flutter.
Prasyarat
Sebelum memulai, 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 FileStorage untuk menyimpan data biner:
nama file (String): Nama file.
dataFile (File): Data biner dari file.
Dapatkan Kredensial Back4app Anda: Arahkan ke pengaturan proyek Anda untuk mengambil ID Aplikasi dan Kunci Klien Anda, yang perlu Anda sambungkan ke aplikasi Flutter Anda dengan Back4app.
Langkah 2 – Menyiapkan Proyek Flutter
Buat Proyek Flutter Baru: Buka terminal atau command prompt Anda dan jalankan:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: 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: Uint8ListExample(),
    );
  }
}
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: Uint8ListExample(),
    );
  }
}
﻿
Ganti 'YOUR_BACK4APP_APP_ID' dan 'YOUR_BACK4APP_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3 – Bekerja dengan Uint8List di Flutter
Pemilihan dan Pembacaan File: Gunakan paket file_picker untuk memilih file dari perangkat dan mengonversinya menjadi Uint8List:
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
Kode ini memungkinkan pengguna untuk memilih file, membaca file sebagai Uint8List, dan menampilkan nama file serta tombol untuk menyimpannya.
Langkah 4 – Menyimpan Uint8List di Back4app
Untuk menyimpan file di Back4app, kami menggunakan ParseFile objek, yang memungkinkan kami untuk mengunggah data biner seperti gambar atau dokumen.
Menyimpan File ke Back4app: Perbarui _saveToBackend metode untuk mempertahankan file yang dipilih di Back4app:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
Metode ini mengunggah file sebagai data biner ke Back4app menggunakan ParseFile. Jika berhasil, ini menampilkan pesan konfirmasi.
Langkah 5 – Menjalankan Aplikasi
Jalankan aplikasi Anda menggunakan flutter run. Anda seharusnya melihat tombol untuk memilih file, diikuti dengan opsi untuk menyimpannya ke backend setelah dipilih.
Verifikasi data di Back4app dengan masuk ke dasbor Back4app Anda dan memeriksa FileStorage kelas. Anda seharusnya melihat file yang disimpan beserta namanya.
Praktik Terbaik untuk Menyimpan Data Biner
Saat bekerja dengan Uint8List dan data biner, berikut adalah beberapa praktik terbaik:
Gunakan : ParseFile dari Back4app adalah cara yang efisien untuk menyimpan dan mengambil data biner seperti gambar, video, dan dokumen.
Hindari Menyimpan File Besar Secara Langsung di Objek Parse: Jika file Anda besar, pertimbangkan untuk menggunakan layanan penyimpanan seperti AWS S3 dan simpan URL file di objek Parse Anda alih-alih file itu sendiri.
Kompresi dan Optimisasi: Untuk gambar atau file besar, pertimbangkan untuk mengompresi file sebelum mengunggahnya untuk meningkatkan kinerja.
Kesimpulan
Dalam tutorial ini, kami membahas cara bekerja dengan Uint8List di Flutter, mengonversi file menjadi daftar byte, dan mempertahankan data ini di Back4app menggunakan Parse SDK. Uint8List menyediakan cara yang efisien dalam penggunaan memori untuk menangani data byte di Dart, menjadikannya cocok untuk operasi file seperti unggahan gambar, penyimpanan dokumen, dan lainnya. Mengintegrasikan ini dengan Back4app memungkinkan Anda untuk dengan mudah menyimpan dan mengelola data biner di cloud.
Untuk informasi lebih lanjut, kunjungi dokumentasi Flutter dan dokumentasi Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Memahami Pencocokan Pola di Flutter Menggunakan Backend Back4app
BERIKUTNYA
Membangun Menu Dropdown di Flutter dengan Data Backend dari Back4app