วิธีสร้างแอปแปลเสียง AI โดยใช้ Flutter และ Back4App

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการสร้างแอป ai voice translator โดยใช้ flutter เป็นเฟรมเวิร์กด้านหน้าและ back4app เป็นบริการด้านหลัง แอปนี้จะอนุญาตให้ผู้ใช้แปลเสียง ข้อความ และภาพในหลายภาษา มันจะมีฟังก์ชันการแปลที่ขับเคลื่อนด้วย ai การรู้จำอักขระด้วยแสง (ocr) และฟังก์ชันการรู้จำเสียง เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างแอปที่สามารถจัดการการแปลแบบเรียลไทม์และเก็บประวัติไว้ใน back4app เพื่อใช้งานในอนาคต ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี บัญชี back4app account ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ ติดตั้ง flutter sdk บนเครื่องของคุณ ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart และ flutter หากคุณเป็นมือใหม่ใน flutter ให้ตรวจสอบ เอกสาร flutter https //flutter dev/docs ก่อนดำเนินการต่อ บัญชีกับ ผู้ให้บริการ translation api เช่น google cloud translation หรือ deepl ความคุ้นเคยกับ rest apis และ การเขียนโปรแกรมแบบอะซิงโครนัส ใน dart ขั้นตอนที่ 1 — การตั้งค่า back4app backend ของคุณ ในขั้นตอนนี้ คุณจะตั้งค่าแอปพลิเคชัน back4app กำหนดโมเดลข้อมูล และกำหนดค่าด้านหลังเพื่อเก็บประวัติการแปล ภาษา และข้อมูลผู้ใช้ 1 1 สร้างแอปพลิเคชันใหม่บน back4app เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" กรอก ชื่อแอป (เช่น "ai voice translator") และเลือก ไอคอนแอป เลือกตำแหน่งเซิร์ฟเวอร์ของคุณหากมีการแจ้งเตือน คลิก "สร้าง" 1 2 ดึงคีย์แอปพลิเคชัน ไปที่ การตั้งค่าแอป > ความปลอดภัยและคีย์ ในแดชบอร์ดของแอปของคุณ จด รหัสแอปพลิเคชัน และ คีย์ลูกค้า สิ่งเหล่านี้จะต้องใช้ในการกำหนดค่าแอป flutter 1 3 กำหนดโมเดลข้อมูลของคุณ เราจะสร้างคลาสต่อไปนี้ใน back4app ผู้ใช้ (ค่าเริ่มต้น) การแปล ภาษา วลี รายการพจนานุกรม 1 3 1 สร้างคลาสการแปล ไปที่ ฐานข้อมูล > เบราว์เซอร์ คลิก "สร้างคลาส" เลือก "กำหนดเอง" และตั้งชื่อเป็น การแปล คลิก "สร้างคลาส" เพิ่มคอลัมน์ต่อไปนี้ไปยัง การแปล ผู้ใช้ (pointer< user>) ชี้ไปที่ วัตถุผู้ใช้ ภาษาแหล่งที่มา (string) รหัสภาษาที่มา ภาษาที่ต้องการ (string) รหัสภาษาที่ต้องการ ข้อความต้นฉบับ (string) ข้อความต้นฉบับที่จะแปล ข้อความที่แปลแล้ว (string) ข้อความที่แปลแล้ว ประเภทการแปล (string) ประเภทของการแปล ( เสียง , ข้อความ , ภาพ ) เวลาประทับ (datetime) 1 3 2 สร้างคลาสภาษา ทำซ้ำขั้นตอนเพื่อสร้างคลาสใหม่ชื่อ language เพิ่มคอลัมน์ต่อไปนี้ไปยัง language ชื่อ (string) ชื่อของภาษา (เช่น "อังกฤษ") รหัส (string) รหัส iso ของภาษา (เช่น "en") flagiconurl (string) url ของภาพธงที่แสดงถึงภาษา 1 3 3 สร้างคลาสวลี สร้างคลาสชื่อ phrase เพิ่มคอลัมน์ต่อไปนี้ไปยัง วลี หมวดหมู่ (string) หมวดหมู่ของวลี (เช่น "คำทักทาย") ภาษาแหล่งที่มา (string) รหัสภาษาที่มา ภาษาที่ต้องการ (string) รหัสภาษาที่ต้องการ ข้อความต้นฉบับ (string) วลีต้นฉบับ ข้อความแปล (string) วลีที่แปลแล้ว 1 3 4 สร้างคลาส dictionaryentry สร้างคลาสชื่อ dictionaryentry เพิ่มคอลัมน์ต่อไปนี้ไปยัง dictionaryentry คำ (string) คำที่กำหนด ภาษา (string) ภาษา ของคำ คำจำกัดความ (string) คำจำกัดความของคำ ตัวอย่าง (array) ประโยคตัวอย่างที่ใช้คำ 1 4 ตั้งค่าการอนุญาตระดับคลาส ตรวจสอบให้แน่ใจว่าผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงข้อมูลของตนเองได้ สำหรับแต่ละคลาส ให้ไปที่ ความปลอดภัย > การอนุญาตระดับคลาส (clp) ตั้งค่า clp เพื่ออนุญาตการเข้าถึงอ่าน/เขียนเฉพาะผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้น ขั้นตอนที่ 2 — การเริ่มต้นโปรเจกต์ flutter ของคุณ ในขั้นตอนนี้ คุณจะตั้งค่าโปรเจกต์ flutter และกำหนดค่าให้เชื่อมต่อกับ back4app 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create ai voice translator ไปที่ไดเรกทอรีโปรเจกต์ cd ai voice translator 2 2 เพิ่มการพึ่งพาที่จำเป็น เปิด pubspec 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 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ 2 3 เริ่มต้น parse ในแอป flutter ของคุณ สร้างไฟล์ใหม่ 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'; แทนที่ 'your application id' และ 'your client key' ด้วยคีย์จาก 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 สร้างหน้าจอการแปลข้อความ สร้าง lib/screens/text translation screen 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), ], ), ), ); } } ขั้นตอนที่ 4 — การนำเสนอการแปลเสียง ในขั้นตอนนี้ คุณจะเพิ่มการแปลเสียงโดยการรวม speech to text และ text to speech ฟังก์ชันการทำงาน 4 1 ตั้งค่าการรู้จำเสียง สร้าง lib/services/speech recognition service dart โดยใช้ speech to text แพ็คเกจ // 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 เพิ่ม text to speech (tts) สร้าง lib/services/tts service dart โดยใช้ flutter tts แพ็คเกจ // 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 สร้างหน้าจอการแปลเสียง สร้าง lib/screens/voice translation screen 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')), ], ), ), ); } } ขั้นตอนที่ 5 — การนำเสนอการแปลภาพ (ocr) 5 1 ตั้งค่า ocr service สร้าง lib/services/ocr service dart โดยใช้ 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 สร้างหน้าจอแปลภาพ สร้าง lib/screens/image translation screen dart เพื่อจัดการการนำเข้าภาพและ 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')), ], ), ), ); } } ขั้นตอนที่ 6 — ประวัติการแปลและหนังสือวลี ในขั้นตอนนี้ คุณจะดำเนินการบันทึกประวัติการแปลและจัดการหนังสือวลี 6 1 บันทึกประวัติการแปล อัปเดต lib/services/translation service dart เพื่อบันทึกประวัติการแปลใน 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 นำเสนอหนังสือวลี สร้าง lib/screens/phrase book screen 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}'), ); }, ); }, ), ); } } บทสรุป โดยการติดตามบทแนะนำนี้ คุณได้สร้าง แอปแปลเสียง ai ที่มีฟีเจอร์ครบครัน ด้วย flutter และ back4app คุณได้ดำเนินการ การแปลข้อความพื้นฐานและขั้นสูง การแปลเสียงเป็นเสียงโดยใช้ การรู้จำเสียงพูด และ การแปลงข้อความเป็นเสียง การแปลจากภาพเป็นข้อความโดยใช้ ocr การจัดการประวัติการแปลและหนังสือวลีสำหรับวลีทั่วไป ขั้นตอนถัดไป ปรับปรุง ui/ux ปรับปรุงอินเทอร์เฟซของแอปเพื่อประสบการณ์ผู้ใช้ที่ราบรื่นขึ้น ปรับปรุงการจัดการข้อผิดพลาด เพิ่มการจัดการข้อผิดพลาดและกลไกสำรองสำหรับการล้มเหลวของ api ดำเนินการโหมดออฟไลน์ เก็บข้อมูลการแปล วลี และประวัติที่ใช้บ่อยสำหรับการเข้าถึงแบบออฟไลน์ เผยแพร่แอป เตรียมแอปสำหรับการเผยแพร่บนแพลตฟอร์ม ios และ android