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
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://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:
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 !!
1 comentario sobre «Sistema Traductor en Línea en Javascript»