Sistema Traductor en Línea en Javascript

Sistema Traductor en Línea en Javascript

Vamos a aprender a implementar un Sistema Traductor en Línea en Javascript, utilizando básicamente una api traductora de lenguajes MyMemory, puedes leer la documentación de la API en el siguiente enlace:

https://mymemory.translated.net/doc/spec.php

Esta aplicación utiliza javascript para enviar las peticiones json, se envían las palabra a traducir con una llave, que en sí para el API es el indicador del idioma planteado, y en respuesta el API envía también con una llave la cadena traducida.

Esta API puede usarse con fines gratuitos, tiene un límite de 5000 caracteres por día, ya pasados de ahí, nos podemos pasar a opciones de pago.

Video Explicativo Sistema Traductor en Javascript

Sistema Traductor en Línea en Javascript

Demo del Sistema Traductor en Línea en Javascript

De la aplicación implementé un demo que puedes ver en el siguiente enlace:

https://mauriciosevilla.com/traductor/

Explicación del Sistema Traductor en Línea

La aplicación consta de dos archivos principales, que son lo que usuario final visualiza, el index.html y otro style.css, en el index reposa el formulario donde se ingresan los datos a traducir, el style.css le da la forma al documento index.html para sea estético y responsivo.

La lógica de la aplicación se encuentra dentro de la carpeta JS, en dos documentos, el countries.js que tiene las llaves de cada idioma y las cadenas de texto con los que los vamos a reconocer en la aplicación, este archivo countries funge como un diccionario que contendrá los idiomas a los que queramos traducir las palabras que escribamos.

El otro documento es el que tiene toda la lógica del negocio del Sistema Traductor en Línea en Javascript es el script.js, desde este se recopila la información enviada desde el index.html, y por medio de una función addEventListener y se envía con la setAttribute lo que responde la API

El sistema traductor en adición utiliza un API llamado Web Speech API para generar la voz a partir del texto que se escriba, donde a partir de la clase SpeechSynthesisUtterance se logra la magía de gestionar los diferentes eventos que hacen posible que se de la opción de texto a voz.

Si les interesa el tema tengo un software también gratuito donde utilizo un API de Microsoft al que puedes acceder desde el siguiente enlace:

En este blog estaré publicando más aplicaciones javascript, a las que puedes acceder desde el siguiente enlace:

https://www.configuroweb.com/tag/javascript/

Descarga he implementación del proyecto en JavaScript

El siguiente es el enlace del repositorio donde tengo el proyecto colgado en GitHub:

Sistema Traductor en Línea en Javascript

Como es una página estática, no se requiere utilizar un backend, no debes instalar ningún servidor basta con descargar el proyecto y ejecutar la página index.html

Subida del Sistema Traductor en Línea en Javascript a un hosting

En una publicación previa explico como subir un proyecto similar a este a GitHub Pages si deseas subirlo a un hosting como hostinger en el siguiente vídeo explico la forma de hacerlo:

Cualquier duda quedo al pendiente !!

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.