Flutter Templates
Cara Membangun Aplikasi Imersi Bahasa AR dengan Flutter dan Back4App

40min
Pendahuluan
Dalam tutorial ini, Anda akan membangun aplikasi Imersi Bahasa Realitas Tertambah (AR) menggunakan Flutter dan Back4App. Aplikasi ini memanfaatkan teknologi AR untuk mengenali objek melalui kamera perangkat, menampilkan terjemahan, memberikan informasi budaya, dan melacak kemajuan pengguna. Pada akhir tutorial ini, Anda akan memiliki aplikasi fungsional yang membantu pengguna belajar bahasa baru dalam konteks dunia nyata.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Flutter terinstal di mesin lokal Anda. Jika Anda belum mengaturnya, ikuti panduan instalasi Flutter.
Akun Back4App. Daftar untuk akun gratis di Back4App.
Aplikasi Back4App. Buat aplikasi baru dengan mengikuti panduan Memulai dengan Back4App.
Pengetahuan dasar tentang Dart dan Flutter. Kenali dokumentasi Flutter jika diperlukan.
Pemahaman dasar tentang API RESTful dan pemrograman asinkron di Dart.
Langkah 1 – Menyiapkan Proyek Flutter
Pertama, siapkan proyek Flutter baru di mana Anda akan mengembangkan aplikasi Imersi Bahasa AR.
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan perintah berikut:
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
Perintah ini membuat proyek Flutter baru bernama ar_language_immersion_app.
1.2. Buka Proyek di IDE Anda
Navigasikan ke direktori proyek dan buka di IDE pilihan Anda (misalnya, Visual Studio Code, Android Studio):
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
Langkah 2 – Mengonfigurasi Backend Back4App
Siapkan backend Anda di Back4App untuk menangani data pengguna, terjemahan, informasi budaya, dan pelacakan kemajuan pengguna.
2.1. Buat Aplikasi Baru di Back4App
Masuk ke akun Back4App Anda.
Klik pada "Buat aplikasi baru".
Masukkan "Aplikasi Imersi Bahasa AR" sebagai nama aplikasi.
Klik "Buat".
2.2. Menyiapkan Model Data
Tentukan kelas sesuai dengan model data:
Pengguna
ObjekTerkenal
Terjemahan
InfoKultural
KemajuanPengguna
2.2.1. Buat Kelas Pengguna
Kelas Pengguna adalah kelas default di Back4App untuk menangani otentikasi pengguna.
Navigasikan ke Inti > Browser di dasbor Back4App Anda.
Anda akan melihat kelas _Pengguna sudah tersedia.
2.2.2. Buat Kelas RecognizableObject
Klik pada "Buat kelas".
Pilih "Kustom" dan beri nama "RecognizableObject".
Klik "Buat kelas".
Tambahkan kolom berikut:
Nama (String)
Kategori (String)
ImageReference (File)
2.2.3. Buat Kelas Translation
Buat kelas lain bernama "Translation".
Tambahkan kolom berikut:
objectId (String) [Default]
ObjectID (Pointer to RecognizableObject)
LanguageCode (String)
TranslatedText (String)
PronunciationGuide (String)
AudioFileReference (File)
2.2.4. Buat Kelas CulturalInfo
Buat kelas bernama "CulturalInfo".
Tambahkan kolom berikut:
ObjectID (Pointer ke RecognizableObject)
LanguageCode (String)
ShortDescription (String)
DetailedInformation (String)
RelatedMediaReferences (Array of Files)
2.2.5. Buat Kelas UserProgress
Buat kelas bernama "UserProgress".
Tambahkan kolom berikut:
UserID (Penunjuk ke Pengguna)
RecognizedObjects (Array dari ID Objek yang Dikenali)
TranslationsViewed (Array dari ID Terjemahan)
CulturalInfoAccessed (Array dari ID Informasi Budaya)
LearningStreaks (Jumlah)
ProficiencyScores (Kamus)
2.3. Ambil Kunci Aplikasi
Pergi ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien; Anda akan membutuhkannya untuk menginisialisasi Parse di aplikasi Flutter Anda.
Langkah 3 – Mengintegrasikan Parse SDK ke dalam Flutter
Integrasikan Parse SDK yang disediakan oleh Back4App ke dalam proyek Flutter Anda untuk berkomunikasi dengan backend.
3.1. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
﻿
Jalankan perintah:
Bash
flutter pub get
flutter pub get
﻿
Catatan: Karena tidak ada plugin AR resmi yang disebut augmented_reality_plugin, Anda mungkin perlu menggunakan plugin seperti arcore_flutter_plugin untuk Android dan arkit_plugin untuk iOS. Sesuaikan sesuai dengan platform target Anda.
3.2. Inisialisasi Parse di Aplikasi Anda
Di lib/main.dart, inisialisasi Parse saat aplikasi dimulai:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kunci yang Anda peroleh dari Back4App.
Langkah 4 – Mengimplementasikan Autentikasi Pengguna
Implementasikan fungsionalitas pendaftaran dan login pengguna.
4.1. Buat Layar Autentikasi
Buat file baru lib/screens/auth_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
﻿
4.2. Pembaruan main.dart untuk Menyertakan Rute
Di lib/main.dart, perbarui MaterialApp Anda untuk menyertakan rute:
Dart
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
﻿
Langkah 5 – Mengimplementasikan Pengenalan Objek AR
Siapkan fungsionalitas AR untuk mengenali objek menggunakan kamera perangkat.
5.1. Siapkan Izin
Untuk Android dan iOS, Anda perlu meminta izin kamera.
Android
Di android/app/src/main/AndroidManifest.xml, tambahkan:
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
Di ios/Runner/Info.plist, tambahkan:
XML
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
﻿
5.2. Implementasikan Tampilan AR
Dart
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
﻿
Catatan: Mengimplementasikan pengenalan objek AR secara penuh adalah kompleks dan mungkin memerlukan integrasi dengan model pembelajaran mesin seperti TensorFlow Lite atau menggunakan platform seperti ML Kit dari Google. Untuk tutorial ini, kami akan mensimulasikan pengenalan objek.
5.3. Simulasi Pengenalan Objek
Untuk tujuan demonstrasi, kami akan mensimulasikan pengenalan objek dengan menampilkan objek yang telah ditentukan.
Perbarui ar_view_screen.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Langkah 6 – Menampilkan Overlay Terjemahan
Ambil terjemahan dari Back4App dan tampilkan sebagai overlay.
6.1. Ambil Data Terjemahan
Di ar_view_screen.dart, tambahkan metode untuk mengambil terjemahan:
Dart
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
﻿
6.2. Perbarui UI untuk Menampilkan Terjemahan
Modifikasi metode build :
Dart
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
﻿
Langkah 7 – Menyediakan Informasi Budaya
Ambil dan tampilkan informasi budaya yang terkait dengan objek yang dikenali.
7.1. Ambil Informasi Budaya
Tambahkan metode di ar_view_screen.dart:
Dart
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
﻿
7.2. Perbarui UI untuk Menampilkan Informasi Budaya
Modifikasi metode build :
Dart
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
﻿
Langkah 8 – Melacak Kemajuan Pengguna
Perbarui kemajuan pengguna setiap kali mereka melihat terjemahan atau informasi budaya.
8.1. Perbarui UserProgress di Back4App
Tambahkan metode untuk memperbarui kemajuan:
Dart
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
﻿
8.2. Panggil updateUserProgress Ketika Sebuah Objek Dikenali
Di setState di mana selectedObject diperbarui:
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
Langkah 9 – Mengimplementasikan Mode Offline
Pastikan aplikasi dapat berfungsi tanpa koneksi internet untuk fitur inti.
9.1. Cache Data Secara Lokal
Gunakan basis data lokal seperti sqflite atau hive untuk menyimpan terjemahan dan informasi budaya.
Tambahkan hive ketergantungan di pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
Inisialisasi Hive di main.dart:
Dart
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
﻿
9.2. Modifikasi Metode Pengambilan Data untuk Menggunakan Cache
Perbarui getTranslation metode:
Dart
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
﻿
Ulangi langkah serupa untuk getCulturalInfo.
Langkah 10 – Pengujian dan Penyebaran
Uji aplikasi secara menyeluruh dan siapkan untuk penyebaran.
10.1. Uji pada Perangkat Fisik
Karena fungsionalitas AR memerlukan akses kamera, uji aplikasi pada perangkat nyata.
10.2. Optimalkan Kinerja
Gunakan struktur data yang efisien.
Minimalkan pengulangan yang tidak perlu di UI.
Optimalkan aset gambar dan media.
10.3. Siapkan untuk Penyebaran
Perbarui ikon aplikasi dan layar splash.
Konfigurasi izin aplikasi.
Bangun versi rilis untuk Android dan iOS.
Rujuk ke dokumentasi resmi Flutter tentang membangun dan merilis untuk detail lebih lanjut.
Kesimpulan
Selamat! Anda telah membangun aplikasi Imersi Bahasa AR menggunakan Flutter dan Back4App. Aplikasi ini mengenali objek, menampilkan terjemahan dan informasi budaya, melacak kemajuan pengguna, dan berfungsi secara offline. Anda dapat meningkatkan aplikasi lebih lanjut dengan mengintegrasikan pengenalan objek AR yang nyata, menambahkan lebih banyak bahasa, dan meningkatkan UI/UX.
Untuk informasi lebih lanjut tentang fitur-fitur canggih, pertimbangkan untuk menjelajahi:
Mengintegrasikan Model Pembelajaran Mesin: Gunakan TensorFlow Lite untuk pengenalan objek di perangkat.
Meningkatkan Kemampuan AR: Manfaatkan plugin seperti arcore_flutter_plugin atau arkit_plugin untuk pengalaman AR yang lebih kaya.
Mengimplementasikan Teks-ke-Ucapan: Tambahkan sintesis suara untuk panduan pengucapan menggunakan paket seperti flutter_tts.
Meningkatkan Autentikasi Pengguna: Implementasikan login sosial atau autentikasi dua faktor.
Dengan membangun aplikasi ini, Anda telah mendapatkan pengalaman dalam pengembangan Flutter, integrasi backend dengan Back4App, dan fitur-fitur penting seperti caching data offline dan pelacakan kemajuan pengguna. Teruslah menjelajahi dan meningkatkan aplikasi Anda untuk menciptakan pengalaman belajar bahasa yang lebih menarik.
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Aplikasi Respon Email AI dengan Flutter dan Back4App
BERIKUTNYA
Cara Membangun Aplikasi Pemesanan Acara dengan Flutter dan Back4App