Flutter Templates
Cara Membangun Aplikasi Penerjemah Suara AI Menggunakan Flutter dan Back4App

30min
Pendahuluan
Dalam tutorial ini, Anda akan belajar bagaimana membangun aplikasi Penerjemah Suara AI menggunakan Flutter sebagai kerangka frontend dan Back4App sebagai layanan backend. Aplikasi ini akan memungkinkan pengguna untuk menerjemahkan ucapan, teks, dan gambar ke berbagai bahasa. Ini akan menampilkan penerjemahan yang didukung AI, pengenalan karakter optik (OCR), dan fungsionalitas pengenalan suara. Pada akhir tutorial ini, Anda akan memiliki aplikasi yang dapat menangani terjemahan waktu nyata dan menyimpan riwayat di Back4App untuk digunakan di masa mendatang.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
A akun Back4App. Daftar untuk akun gratis di Back4App.
Flutter SDK terinstal di mesin lokal Anda. Ikuti panduan instalasi Flutter.
Pengetahuan dasar tentang Dart dan Flutter. Jika Anda baru mengenal Flutter, tinjau dokumentasi Flutter sebelum melanjutkan.
Akun dengan penyedia API Penerjemahan seperti Google Cloud Translation atau DeepL.
Keterampilan dengan REST APIs dan pemrograman asinkron dalam Dart.
Langkah 1 — Menyiapkan Backend Back4App Anda
Dalam langkah ini, Anda akan menyiapkan aplikasi Back4App, mendefinisikan model data, dan mengonfigurasi backend untuk menyimpan riwayat terjemahan, bahasa, dan data pengguna.
1.1. Buat Aplikasi Baru di Back4App
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan Nama Aplikasi (misalnya, "Penerjemah Suara AI") dan pilih Ikon Aplikasi.
Pilih lokasi server Anda jika diminta.
Klik "Buat".
1.2. Ambil Kunci Aplikasi
Navigasikan ke Pengaturan Aplikasi > Keamanan & Kunci di dasbor aplikasi Anda.
Catat ID Aplikasi dan Kunci Klien. Ini akan diperlukan untuk konfigurasi aplikasi Flutter.
1.3. Definisikan Model Data Anda
Kami akan membuat kelas berikut di Back4App:
Pengguna (default)
Terjemahan
Bahasa
Frasa
EntriKamus
1.3.1. Buat Kelas Terjemahan
Pergi ke Database > Browser.
Klik "Buat kelas".
Pilih "Kustom" dan beri nama Terjemahan.
Klik "Buat kelas".
Tambahkan kolom berikut ke Terjemahan:
pengguna (Pointer<_User>): Mengacu pada User objek.
sourceLanguage (String): Kode bahasa sumber.
targetLanguage (String): Kode bahasa target.
sourceText (String): Teks asli untuk diterjemahkan.
translatedText (String): Teks yang diterjemahkan.
translationType (String): Jenis terjemahan (suara, teks, gambar).
timestamp (DateTime).
1.3.2. Buat Kelas Bahasa
Ulangi langkah-langkah untuk membuat kelas baru bernama Bahasa.
Tambahkan kolom berikut ke Bahasa:
nama (String): Nama bahasa (misalnya, "Inggris").
kode (String): Kode ISO bahasa (misalnya, "en").
flagIconUrl (String): URL gambar bendera yang mewakili bahasa.
1.3.3. Buat Kelas Frasa
Buat kelas bernama Frasa.
Tambahkan kolom berikut ke Frasa:
kategori (String): Kategori frasa (misalnya, "Salam").
kodeBahasaSumber (String): Kode bahasa sumber.
kodeBahasaTujuan (String): Kode bahasa tujuan.
teksSumber (String): Frasa asli.
teksTerjemahan (String): Frasa yang diterjemahkan.
1.3.4. Buat Kelas DictionaryEntry
Buat kelas bernama DictionaryEntry.
Tambahkan kolom berikut ke DictionaryEntry:
kata (String): Kata yang didefinisikan.
bahasa (String): Bahasa dari kata tersebut.
definisi (String): Definisi kata.
contoh (Array): Kalimat contoh yang menggunakan kata tersebut.
1.4. Atur Izin Tingkat Kelas
Pastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses data mereka sendiri:
Untuk setiap kelas, pergi ke Keamanan > Izin Tingkat Kelas (CLP).
Atur CLP untuk mengizinkan akses baca/tulis hanya untuk pengguna yang terautentikasi.
Langkah 2 — Menginisialisasi Proyek Flutter Anda
Dalam langkah ini, Anda akan menyiapkan proyek Flutter dan mengonfigurasinya untuk terhubung ke Back4App.
2.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create ai_voice_translator
flutter create ai_voice_translator
﻿
Navigasikan ke direktori proyek:
Bash
cd ai_voice_translator
cd ai_voice_translator
﻿
2.2. Tambahkan Ketergantungan yang Diperlukan
Buka pubspec.yaml dan tambahkan ketergantungan berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
﻿
Jalankan flutter pub get untuk menginstal paket.
2.3. Inisialisasi Parse di Aplikasi Flutter Anda
Buat file baru lib/config/back4app_config.dart:
Dart
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kunci dari Back4App.
In lib/main.dart, initialize Parse:
Dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

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

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

  runApp(MyApp());
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

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

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

  runApp(MyApp());
}
﻿
Create lib/app.dart:
Dart
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
﻿
Step 3 — Implementing Text Translation
The first feature to implement is basic text translation.
3.1. Configure Translation Service
Create lib/services/translation_service.dart to manage interactions with a translation API (Google Cloud Translation API or DeepL).
Dart
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
﻿
3.2. Implement Language Model
Create lib/models/language.dart to represent supported languages.
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
3.3. Buat Layar Terjemahan Teks
Buat lib/screens/text_translation_screen.dart untuk menangani input teks dan terjemahan:
Dart
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
﻿
Langkah 4 — Mengimplementasikan Terjemahan Suara
Dalam langkah ini, Anda akan menambahkan terjemahan suara dengan mengintegrasikan speech-to-text dan text-to-speech fungsionalitas.
4.1. Siapkan Pengenalan Suara
Buat lib/services/speech_recognition_service.dart menggunakan speech_to_text paket:
Dart
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
﻿
4.2. Tambahkan Teks-ke-Ucapan (TTS)
Buat lib/services/tts_service.dart menggunakan flutter_tts paket:
Dart
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
﻿
4.3. Buat Layar Terjemahan Suara
Buat lib/screens/voice_translation_screen.dart untuk menangani terjemahan suara:
Dart
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
Langkah 5 — Mengimplementasikan Terjemahan Gambar (OCR)
5.1. Siapkan Layanan OCR
Buat lib/services/ocr_service.dart menggunakan paket google_ml_kit:
Dart
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
﻿
5.2. Buat Layar Terjemahan Gambar
Buat lib/screens/image_translation_screen.dart untuk menangani input gambar dan OCR:
Dart
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
Langkah 6 — Riwayat Terjemahan dan Buku Frasa
Dalam langkah ini, Anda akan menerapkan penyimpanan riwayat terjemahan dan mengelola buku frasa.
6.1. Simpan Riwayat Terjemahan
Perbarui lib/services/translation_service.dart untuk menyimpan riwayat terjemahan di Back4App:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
﻿
6.2. Implementasi Buku Frasa
Buat lib/screens/phrase_book_screen.dart untuk mengelola frasa umum:
Dart
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Kesimpulan
Dengan mengikuti tutorial ini, Anda telah membangun sebuah Aplikasi Penerjemah Suara AI yang dengan Flutter dan Back4App. Anda telah mengimplementasikan:
Penerjemahan teks dasar dan lanjutan.
Penerjemahan suara-ke-suara menggunakan pengakuan suara dan teks-ke-suara.
Penerjemahan gambar-ke-teks menggunakan OCR.
Manajemen riwayat penerjemahan dan buku frasa untuk ungkapan umum.
Langkah Selanjutnya
Tingkatkan UI/UX: Tingkatkan antarmuka aplikasi untuk pengalaman pengguna yang lebih lancar.
Perbaiki Penanganan Kesalahan: Tambahkan penanganan kesalahan dan mekanisme cadangan untuk kegagalan API.
Terapkan Mode Offline: Simpan penerjemahan, frasa, dan riwayat umum untuk akses offline.
Luncurkan Aplikasi: Siapkan aplikasi untuk diluncurkan di platform iOS dan Android.
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Aplikasi E-commerce dengan Flutter, Back4App, dan Integrasi Stripe melalui Cloud Code
BERIKUTNYA
Membangun Aplikasi Jaringan Sosial dengan Flutter dan Back4App