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

34min
소개
이 튜토리얼에서는 Flutter를 프론트엔드 프레임워크로 사용하고 Back4App를 백엔드 서비스로 사용하여 AI 음성 번역기 앱을 만드는 방법을 배웁니다. 이 앱은 사용자가 여러 언어로 음성, 텍스트 및 이미지를 번역할 수 있도록 합니다. AI 기반 번역, 광학 문자 인식(OCR) 및 음성 인식 기능이 포함됩니다. 이 튜토리얼이 끝나면 실시간 번역을 처리하고 향후 사용을 위해 Back4App에 기록을 저장할 수 있는 앱을 만들게 됩니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
 Back4App 계정. Back4App에서 무료 계정에 가입하세요.
Flutter SDK가 로컬 머신에 설치되어 있어야 합니다. 공식 Flutter 설치 가이드를 따라 설치하세요.
 Dart와 Flutter에 대한 기본 지식이 필요합니다. Flutter가 처음이라면 Flutter 문서를 검토한 후 진행하세요.
 Google Cloud Translation 또는 DeepL과 같은 번역 API 제공업체의 계정이 필요합니다.
 REST API와 비동기 프로그래밍에 대한 친숙함이 필요합니다.
1단계 — Back4App 백엔드 설정하기
이 단계에서는 Back4App 애플리케이션을 설정하고, 데이터 모델을 정의하며, 번역 기록, 언어 및 사용자 데이터를 저장하기 위해 백엔드를 구성합니다.
1.1. Back4App에서 새 애플리케이션 만들기
귀하의 Back4App 대시보드에 로그인합니다.
"새 앱 만들기"를 클릭합니다.
앱 이름 (예: "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 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create ai_voice_translator
flutter create ai_voice_translator
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd ai_voice_translator
cd ai_voice_translator
﻿
2.2. 필수 종속성 추가
 pubspec.yaml 파일을 열고 다음 종속성을 추가하세요:
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
﻿
 flutter pub get 명령어를 실행하여 패키지를 설치하세요.
2.3. Flutter 앱에서 Parse 초기화
새 파일을 생성하세요 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';
﻿
 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'를 Back4App에서 가져온 키로 교체하세요.
In lib/main.dart, 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(),
    );
  }
}
﻿
3단계 — 텍스트 번역 구현
구현할 첫 번째 기능은 기본 텍스트 번역입니다.
3.1. 번역 서비스 구성
Create lib/services/translation_service.dart 번역 API(Google Cloud Translation API 또는 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. 언어 모델 구현
Create lib/models/language.dart 지원되는 언어를 나타냅니다.
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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,
  });
}
﻿
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. 텍스트 번역 화면 만들기
생성 lib/screens/text_translation_screen.dart 텍스트 입력 및 번역을 처리합니다:
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),
          ],
        ),
      ),
    );
  }
}
﻿
4단계 — 음성 번역 구현하기
이 단계에서는 음성 인식 및 텍스트 음성 변환 기능을 통합하여 음성 번역을 추가합니다.
4.1. 음성 인식 설정하기
생성하기 lib/services/speech_recognition_service.dart 사용하여 speech_to_text 패키지:
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. 텍스트 음성 변환 (TTS) 추가하기
생성하기 lib/services/tts_service.dart 사용하여 flutter_tts 패키지:
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. 음성 번역 화면 만들기
생성 lib/screens/voice_translation_screen.dart 음성 번역을 처리하기 위해:
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')),
          ],
        ),
      ),
    );
  }
}
﻿
5단계 — 이미지 번역 구현 (OCR)
5.1. OCR 서비스 설정
생성 lib/services/ocr_service.dart 다음을 사용하여 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. 이미지 번역 화면 만들기
생성 lib/screens/image_translation_screen.dart 이미지를 입력하고 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')),
          ],
        ),
      ),
    );
  }
}
﻿
6단계 — 번역 기록 및 구문집
이 단계에서는 번역 기록을 저장하고 구문집을 관리하는 기능을 구현합니다.
6.1. 번역 기록 저장하기
업데이트 lib/services/translation_service.dart 번역 기록을 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. 구문집 구현
생성 lib/screens/phrase_book_screen.dart 일반 구문을 관리하기 위해:
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}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
결론
이 튜토리얼을 따라 하면서 AI 음성 번역기 앱을 Flutter와 Back4App을 사용하여 기능이 풍부한 앱을 구축했습니다. 다음을 구현했습니다:
기본 및 고급 텍스트 번역.
음성 대 음성 번역 음성 인식 및 텍스트 음성 변환을 사용하여.
이미지 대 텍스트 번역 OCR을 사용하여.
번역 기록 관리 및 일반 표현을 위한 구문집.
다음 단계
UI/UX 개선: 앱의 인터페이스를 개선하여 더 매끄러운 사용자 경험을 제공합니다.
오류 처리 개선: API 실패에 대한 오류 처리 및 대체 메커니즘을 추가합니다.
오프라인 모드 구현: 오프라인 접근을 위해 일반 번역, 구문 및 기록을 캐시합니다.
앱 배포: iOS 및 Android 플랫폼에 배포할 준비를 합니다.
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
플러터, 백4앱, 클라우드 코드를 통한 스트라이프 통합으로 전자상거래 앱 구축하기
Flutter와 Back4App으로 소셜 네트워킹 앱 만들기