Flutter와 Back4App을 사용하여 AI 음성 번역기 앱을 만드는 방법

소개 이 튜토리얼에서는 flutter 를 프론트엔드 프레임워크로 사용하고 back4app 를 백엔드 서비스로 사용하여 ai 음성 번역기 앱을 만드는 방법을 배웁니다 이 앱은 사용자가 여러 언어로 음성, 텍스트 및 이미지를 번역할 수 있도록 합니다 ai 기반 번역, 광학 문자 인식(ocr) 및 음성 인식 기능이 포함됩니다 이 튜토리얼이 끝나면 실시간 번역을 처리하고 향후 사용을 위해 back4app에 기록을 저장할 수 있는 앱을 만들게 됩니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app https //www back4app com/ 에서 무료 계정에 가입하세요 flutter sdk 가 로컬 머신에 설치되어 있어야 합니다 공식 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따라 설치하세요 dart 와 flutter 에 대한 기본 지식이 필요합니다 flutter가 처음이라면 flutter 문서 https //flutter dev/docs 를 검토한 후 진행하세요 google cloud translation 또는 deepl 과 같은 번역 api 제공업체 의 계정이 필요합니다 rest api 와 비동기 프로그래밍 에 대한 친숙함이 필요합니다 1단계 — back4app 백엔드 설정하기 이 단계에서는 back4app 애플리케이션을 설정하고, 데이터 모델을 정의하며, 번역 기록, 언어 및 사용자 데이터를 저장하기 위해 백엔드를 구성합니다 1 1 back4app에서 새 애플리케이션 만들기 귀하의 back4app 대시보드 https //dashboard back4app com/ 에 로그인합니다 "새 앱 만들기"를 클릭합니다 앱 이름 (예 "ai 음성 번역기")을 입력하고 앱 아이콘 을 선택합니다 프롬프트가 표시되면 서버 위치를 선택합니다 "생성"을 클릭합니다 1 2 애플리케이션 키 가져오기 애플리케이션 대시보드에서 앱 설정 > 보안 및 키 로 이동합니다 애플리케이션 id와 클라이언트 키 를 적어두십시오 이는 flutter 앱 구성에 필요합니다 1 3 데이터 모델 정의하기 우리는 back4app에서 다음 클래스를 생성할 것입니다 사용자 (기본) 번역 언어 구문 사전 항목 1 3 1 번역 클래스 생성하기 이동하십시오 데이터베이스 > 브라우저 클릭하십시오 "클래스 만들기" 선택하십시오 "사용자 정의" 및 이름을 번역 으로 지정하십시오 클릭하십시오 "클래스 만들기" 다음 열을 추가하십시오 번역 사용자 (pointer< user>) 사용자 객체를 가리킵니다 sourcelanguage (문자열) 원본 언어 코드 targetlanguage (문자열) 대상 언어 코드 sourcetext (문자열) 번역할 원본 텍스트 translatedtext (문자열) 번역된 텍스트 translationtype (문자열) 번역 유형 ( 음성 , 텍스트 , 이미지 ) timestamp (날짜 시간) 1 3 2 언어 클래스 생성하기 새로운 클래스를 생성하는 단계를 반복하여 language 라는 이름의 클래스를 만듭니다 다음 열을 추가합니다 language name (문자열) 언어의 이름 (예 "영어") code (문자열) 언어의 iso 코드 (예 "en") flagiconurl (문자열) 언어를 나타내는 국기 이미지의 url 1 3 3 구문 클래스 생성하기 phrase 라는 이름의 클래스를 생성합니다 다음 열을 추가하십시오 구 카테고리 (문자열) 구의 카테고리 (예 "인사") sourcelanguage (문자열) 원본 언어 코드 targetlanguage (문자열) 대상 언어 코드 sourcetext (문자열) 원본 구 translatedtext (문자열) 번역된 구 1 3 4 dictionaryentry 클래스 생성 다음과 같은 이름의 클래스를 생성하십시오 dictionaryentry 다음 열을 추가하십시오 dictionaryentry 단어 (문자열) 정의되는 단어 언어 (문자열) 단어의 언어 정의 (문자열) 단어의 정의 예시 (배열) 단어를 사용한 예문 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 flutter 앱에서 parse 초기화 새 파일을 생성하세요 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 , 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(), ); } } 3단계 — 텍스트 번역 구현 구현할 첫 번째 기능은 기본 텍스트 번역입니다 3 1 번역 서비스 구성 create lib/services/translation service dart 번역 api(google cloud translation api 또는 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 언어 모델 구현 create lib/models/language 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, }); } // 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, }); } // 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, }); } // 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, }); } // 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단계 — 음성 번역 구현하기 이 단계에서는 음성 인식 및 텍스트 음성 변환 기능을 통합하여 음성 번역을 추가합니다 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 텍스트 음성 변환 (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 서비스 설정 생성 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 플랫폼에 배포할 준비를 합니다