[Flutter] Google Translate API를 사용하여 Flutter에서 텍스트 번역하기

Flutter 애플리케이션에서 Google Translate API를 사용하여 텍스트를 번역하는 방법에 대해 알아보겠습니다. 이 튜토리얼에서는 Google Translate API를 설정하고, Flutter 애플리케이션에 통합하여 다양한 언어로 텍스트를 번역하는 방법을 단계별로 설명합니다.

1. Google Cloud 프로젝트 설정

Google Translate API를 사용하기 위해서는 Google Cloud 프로젝트가 필요합니다. 아래의 단계를 따라 Google Cloud 프로젝트를 설정합니다.

1.1 Google Cloud Console에 접속

• 구글에서 Google Cloud Console 검색합니다.
• Google Cloud Console에 접속하여 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.

1.2 Google Translate API 활성화

Google Cloud Console에서 API & Services(API 및 서비스) > Library로 이동합니다.
"Cloud Translation API"를 검색하여 선택하고 Enable(사용) 버튼을 클릭합니다.

1.3 API 키 생성

API & Services > Credentials(사용자 인증 정보) 로 이동합니다.
Create Credentials(사용자 인증정보 만들기) 버튼을 클릭하고 API key를 선택하여 새로운 API 키를 생성합니다.
생성된 API 키를 복사해둡니다. 이 API 키는 Flutter 애플리케이션에서 번역 요청을 보낼 때 사용됩니다.

2. Flutter 프로젝트 설정

이제 Flutter 프로젝트를 설정하고 HTTP 패키지를 사용하여 Google Translate API와 통신합니다.

2.1 pubspec.yaml 파일 업데이트

pubspec.yaml 파일에 HTTP 패키지를 추가합니다.

yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4력하세요

패키지를 추가한 후 pub get 명령어를 실행하여 패키지를 설치합니다.

2.2 Flutter 애플리케이션에 API 통합

아래의 코드는 Google Translate API를 사용하여 텍스트를 번역하고, Flutter 애플리케이션에서 번역된 텍스트를 표시하는 예제입니다.

dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TranslatePage(),
    );
  }
}

class TranslatePage extends StatefulWidget {
  @override
  _TranslatePageState createState() => _TranslatePageState();
}

class _TranslatePageState extends State<TranslatePage> {
  final _apiKey = 'YOUR_GOOGLE_CLOUD_API_KEY'; // 여기에 Google Cloud API 키를 입력하세요.
  String _translatedText = '';
  String _originalText = 'This is the text to be translated.';

  @override
  void initState() {
    super.initState();
    // 기본적으로 베트남어로 번역
    _translateText(_originalText, 'vi'); // 'vi'는 베트남어 코드입니다.
  }

  Future<void> _translateText(String text, String targetLanguage) async {
    final url = 'https://translation.googleapis.com/language/translate/v2?key=$_apiKey';

    final response = await http.post(
      Uri.parse(url),
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode({
        'q': text,
        'target': targetLanguage,
      }),
    );

    if (response.statusCode == 200) {
      final responseData = jsonDecode(response.body);
      setState(() {
        _translatedText = responseData['data']['translations'][0]['translatedText'];
      });
    } else {
      setState(() {
        _translatedText = '번역 중 오류가 발생했습니다.';
      });
    }
  }

  void _onLanguageChanged(String languageCode) {
    _translateText(_originalText, languageCode);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Translate API Example'),
        actions: [
          PopupMenuButton<String>(
            onSelected: _onLanguageChanged,
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(
                  value: 'vi',
                  child: Text('베트남어'),
                ),
                PopupMenuItem(
                  value: 'ms',
                  child: Text('말레이시아어'),
                ),
                PopupMenuItem(
                  value: 'id',
                  child: Text('인도네시아어'),
                ),
              ];
            },
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Text(
              'Original Text:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              _originalText,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 20),
            Text(
              'Translated Text:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              _translatedText,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

3. 코드 설명

API 키 설정: 'YOUR_GOOGLE_CLOUD_API_KEY' 부분에 Google Cloud Console에서 생성한 API 키를 입력합니다.
HTTP 요청: _translateText 메서드는 Google Translate API에 텍스트를 보내고, 지정한 언어로 번역된 결과를 받아옵니다.
언어 선택: PopupMenuButton을 사용하여 사용자가 번역할 언어를 선택할 수 있도록 하였습니다. 선택된 언어 코드가 _translateText 메서드에 전달됩니다.
번역된 텍스트 표시: _translatedText 변수에 번역된 텍스트가 저장되고, UI에서 이를 표시합니다.

4. 번역 언어 코드

아래는 자주 사용하는 언어 코드입니다. Google Translate API는 다양한 언어를 지원하며, 전체 언어 목록은 Google Cloud Translation 언어 목록에서 확인할 수 있습니다.

베트남어: vi
말레이시아어: ms
인도네시아어: id
한국어: ko
영어: en
일본어: ja
중국어: zh

결론

이 튜토리얼에서는 Flutter 애플리케이션에서 Google Translate API를 사용하여 텍스트를 번역하는 방법을 살펴보았습니다. Google Cloud 프로젝트를 설정하고, API 키를 발급받은 후, HTTP 요청을 통해 번역 기능을 구현할 수 있었습니다. 다양한 언어로 번역된 텍스트를 UI에 표시하여 사용자 경험을 향상시킬 수 있습니다.

추가적인 질문이나 다른 요구 사항이 있으면 알려주세요!