Cara Membangun Aplikasi Penerjemah Suara AI Menggunakan Flutter dan Back4App

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 https //www back4app com/ flutter sdk terinstal di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install pengetahuan dasar tentang dart dan flutter jika anda baru mengenal flutter, tinjau dokumentasi flutter https //flutter dev/docs 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 https //dashboard back4app com/ 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 flutter create ai voice translator navigasikan ke direktori proyek cd ai voice translator 2 2 tambahkan ketergantungan yang diperlukan buka pubspec yaml dan tambahkan ketergantungan berikut 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 // 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 // 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 // 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) // 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 // 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 // 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 // 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 // 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 // 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 // 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 // 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 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 // 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