Plantillas de Flutter

Cómo construir una aplicación de traductor de voz AI utilizando Flutter y Back4App

30min

Introducción

En este tutorial, aprenderás cómo construir una aplicación de Traductor de Voz AI utilizando Flutter como el marco de frontend y Back4App como el servicio de backend. La aplicación permitirá a los usuarios traducir voz, texto e imágenes en múltiples idiomas. Contará con traducción impulsada por IA, reconocimiento óptico de caracteres (OCR) y funcionalidades de reconocimiento de voz. Al final de este tutorial, habrás construido una aplicación que puede manejar traducciones en tiempo real y almacenar el historial en Back4App para su uso futuro.

Requisitos previos

Para completar este tutorial, necesitarás:

  • Una cuenta de Back4App. Regístrate para obtener una cuenta gratuita en Back4App.
  • Flutter SDK instalado en tu máquina local. Sigue la guía de instalación de Flutter.
  • Conocimientos básicos de Dart y Flutter. Si eres nuevo en Flutter, revisa la documentación de Flutter antes de continuar.
  • Una cuenta con un proveedor de API de Traducción como Google Cloud Translation o DeepL.
  • Familiaridad con REST APIs y programación asíncrona en Dart.

Paso 1 — Configurando tu Backend de Back4App

En este paso, configurarás una aplicación de Back4App, definirás los modelos de datos y configurarás el backend para almacenar el historial de traducciones, idiomas y datos de usuario.

1.1. Crea una Nueva Aplicación en Back4App

  1. Inicia sesión en tu tablero de Back4App.
  2. Haz clic en "Crear nueva App".
  3. Ingresa un Nombre de la App (por ejemplo, "Traductor de Voz AI") y selecciona tu Ícono de la App.
  4. Elige la ubicación de tu servidor si se te solicita.
  5. Haz clic en "Crear".

1.2. Recupera las Claves de la Aplicación

  1. Navega a Configuración de la App > Seguridad y Claves en el tablero de tu aplicación.
  2. Anota el ID de la Aplicación y el Cliente Clave. Estos serán necesarios para la configuración de la aplicación Flutter.

1.3. Define tus Modelos de Datos

Crearemos las siguientes clases en Back4App:

  • Usuario (predeterminado)
  • Traducción
  • Idioma
  • Frase
  • EntradaDelDiccionario

1.3.1. Crear la Clase de Traducción

  1. Ir a Base de datos > Navegador.
  2. Haga clic en "Crear una clase".
  3. Elija "Personalizado" y nómbralo Traducción.
  4. Haga clic en "Crear clase".

Agregue las siguientes columnas a Traducción:

  • usuario (Pointer<_User>): Apunta al objeto Usuario.
  • idiomaFuente (String): Código del idioma de origen.
  • idiomaObjetivo (String): Código del idioma objetivo.
  • textoFuente (String): El texto original a traducir.
  • textoTraducido (String): El texto traducido.
  • tipoTraducción (String): Tipo de traducción (voz, texto, imagen).
  • marcaTemporal (DateTime).

1.3.2. Crear la clase Language

  1. Repite los pasos para crear una nueva clase llamada Language.

Agrega las siguientes columnas a Language:

  • nombre (String): El nombre del idioma (por ejemplo, "Inglés").
  • código (String): Código ISO del idioma (por ejemplo, "en").
  • flagIconUrl (String): URL de la imagen de la bandera que representa el idioma.

1.3.3. Crear la clase Phrase

  1. Crea una clase llamada Phrase.

Agregue las siguientes columnas a Frase:

  • categoría (Cadena): La categoría de la frase (por ejemplo, "Saludos").
  • idiomaFuente (Cadena): Código del idioma de origen.
  • idiomaObjetivo (Cadena): Código del idioma objetivo.
  • textoFuente (Cadena): La frase original.
  • textoTraducido (Cadena): La frase traducida.

1.3.4. Crear la clase DictionaryEntry

  1. Cree una clase llamada DictionaryEntry.

Agregue las siguientes columnas a DictionaryEntry:

  • palabra (Cadena): La palabra que se está definiendo.
  • idioma (Cadena): El idioma de la palabra.
  • definición (Cadena): La definición de la palabra.
  • ejemplos (Array): Oraciones de ejemplo que utilizan la palabra.

1.4. Establecer permisos a nivel de clase

Asegúrate de que solo los usuarios autenticados puedan acceder a sus propios datos:

  1. Para cada clase, ve a Seguridad > Permisos a Nivel de Clase (CLP).
  2. Establece el CLP para permitir acceso de lectura/escritura solo a usuarios autenticados.

Paso 2 — Inicializando tu proyecto Flutter

En este paso, configurarás un proyecto Flutter y lo configurarás para conectarse a Back4App.

2.1. Crear un nuevo proyecto Flutter

Abre tu terminal y ejecuta:

Bash


Navega al directorio del proyecto:

Bash


2.2. Agregar Dependencias Requeridas

Abre pubspec.yaml y agrega las siguientes dependencias:

YAML


Ejecuta flutter pub get para instalar los paquetes.

2.3. Inicializa Parse en Tu Aplicación Flutter

Crea un nuevo archivo lib/config/back4app_config.dart:

Dart


Reemplaza 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con las claves de Back4App.

En lib/main.dart, inicializa Parse:

Dart


Crea lib/app.dart:

Dart


Paso 3 — Implementación de la Traducción de Texto

La primera característica a implementar es la traducción básica de texto.

3.1. Configurar el Servicio de Traducción

Crea lib/services/translation_service.dart para gestionar las interacciones con una API de traducción (API de Traducción de Google Cloud o DeepL).

Dart


3.2. Implementar el Modelo de Idioma

Crea lib/models/language.dart para representar los idiomas soportados.

Dart


3.3. Crear Pantalla de Traducción de Texto

Crear lib/screens/text_translation_screen.dart para manejar la entrada de texto y la traducción:

Dart


Paso 4 — Implementando la Traducción de Voz

En este paso, agregarás la traducción de voz integrando speech-to-text y text-to-speech funcionalidades.

4.1. Configurar el Reconocimiento de Voz

Crear lib/services/speech_recognition_service.dart usando el speech_to_text paquete:

Dart


4.2. Agregar Texto a Voz (TTS)

Crear lib/services/tts_service.dart usando el flutter_tts paquete:

Dart


4.3. Crear Pantalla de Traducción de Voz

Crear lib/screens/voice_translation_screen.dart para manejar la traducción de voz:

Dart


Paso 5 — Implementación de la Traducción de Imágenes (OCR)

5.1. Configurar el Servicio OCR

Crear lib/services/ocr_service.dart utilizando el google_ml_kit paquete:

Dart


5.2. Crear Pantalla de Traducción de Imágenes

Crear lib/screens/image_translation_screen.dart para manejar la entrada de imágenes y OCR:

Dart


Paso 6 — Historial de Traducción y Libro de Frases

En este paso, implementarás el guardado del historial de traducción y la gestión de un libro de frases.

6.1. Guardar Historial de Traducción

Actualizar lib/services/translation_service.dart para guardar el historial de traducciones en Back4App:

Dart


6.2. Implementar Libro de Frases

Crear lib/screens/phrase_book_screen.dart para gestionar frases comunes:

Dart


Conclusión

Siguiendo este tutorial, has construido una aplicación AI Voice Translator App rica en características con Flutter y Back4App. Implementaste:

  • Traducción de texto básica y avanzada.
  • Traducción de voz a voz utilizando reconocimiento de voz y texto a voz.
  • Traducción de imagen a texto utilizando OCR.
  • Gestión del historial de traducción y un libro de frases para expresiones comunes.

Próximos Pasos

  • Mejorar UI/UX: Mejora la interfaz de la aplicación para una experiencia de usuario más fluida.
  • Mejorar el Manejo de Errores: Agregar manejo de errores y mecanismos de respaldo para fallos de API.
  • Implementar Modo Offline: Almacenar en caché traducciones comunes, frases e historial para acceso sin conexión.
  • Desplegar la Aplicación: Preparar la aplicación para su despliegue en plataformas iOS y Android.