Para cualquier empresa que opere en diversos mercados, tener una web multiidioma es una obligación. La traducción de los contenidos de las web a diversos idiomas, tiene que ser considerado un proyecto crítico dentro de la empresa, por la cantidad de recursos, tanto humanos como técnicos a los que tiene que recurrir.
A la hora de seleccionar como traducir nuestra web, podemos contar con dos opciones: usar un diccionario, que necesitará de un trabajo interno muy importante, pero que garantizará que las traducciones sean más ajustadas o usar algún sistema de traducción automática que nos permitirá tener disponer de una mayor variedad de idiomas disponibles y de forma más rápida.
Para valorar que sistema usamos, hay que tener en cuenta que tipo de textos vamos a traducir.
Si nuestra web incluye textos técnicos, científicos o legales, quizás la mejor opción, en mi opinión, sea la de montar un diccionario de traducciones. Si por el contrario, nuestra web es una tienda online u otro tipo de plataforma de servicios a usuarios, donde los textos sean relativamente genéricos, quizás la mejor opción sea usar algún servicio de traducción automática.
Hemos de tener en cuenta que nuestra web puede contener textos que incluyan textos jurídicos, donde el significado de las frases es muy concreto o tengamos giros idiomáticos que sean muy “locales” que una maquina de traducción automática no entendería. Corremos pues el riesgo de que la traducción no sea muy afinada.
Por otra parte, si nuestra web muestra un catálogo de servicios o productos, con precios, medidas, colores, tallas, etc., quizás se la mejor idea disponer de algún tipo de traducción automática.
Pero esto es simplemente mi opinión.
Vamos a por el objetivo del post.
La idea es utilizar un sistema automático de traducción, en este caso DeepL, para traducir los contenidos de una web corriendo Vue.js.
Se trata de una prueba de concepto, obviamente, destinada a aprender como funciona este mecanismo en su forma más básica y a partir de aquí, dejo a decisión del lector seguir investigando.
Preparando el entorno.
Lo primero será obviamente, tener un proyecto vue.js instalado.
Esto es relativamente sencillo. Lo primero será instalar VueCLI, una herramienta que nos permitirá gestionar y arrancar nuestra aplicación.
Si tenemos instalado yarn, podemos usarlo con
yarn global add @vue/cli
una vez instalado, simplemente hemos de crear nuestra aplicación con
vue create test
Creada la aplicación podemos arrancarla con
yarn serve
y veremos en el navegador la página de inicio si todo a quedado correctamente instalado
Hasta aquí todo es fácil. Ahora entramos en el meollo del proyecto.
A teclear
Necesitaremos antes de nada, instalar una librería más, Axios, que nos permitirá la gestión de la API. La instalamos con
yarn add axios
Una vez instalada, vamos a empezar a trabajar con la API y el código.
Lo primero que haremos será crear un fichero que nos permita hacer y gestionar las llamadas a la API de DeepL, le llamaremos por ejemplo deepl.js y para mantener la ordenación lo guardaré en un carpeta llamada logic, dentro de src
El contenido del fichero será algo parecido al siguiente:
import axios from 'axios';
// Endpoint de la API
const api = axios.create({
baseURL: 'https://api-free.deepl.com/v2/translate',
});
// Clave de API de Deepl
const API_KEY = '__API_KEY_DE_DEEPL__';
export function translateText(text, targetLang, sourcelang) {
// Llamada a la API
return api.post('', null, {
params: {
text,
source_lang: sourcelang,
target_lang: targetLang,
auth_key: API_KEY,
},
});
}
Ahora crearemos un componente, que nos permitirá por un lado hacer la selección del idioma y por otra parte, mostrar el resultado de la traducción. Le llamaremos, por ejemplo TranslationComponent.vue
En el template, tendremos la parte visual, con los idiomas que vamos a disponer para el usuario:
<template>
<div>
<select v-model="selectedLang">
<option value="ES">Español</option>
<option value="FR">Francés</option>
<option value="EN">Inglés</option>
<option value="IT">Italiano</option>
</select>
<button @click="translatePage">Traducir</button>
<div id="contentToTranslate">
<div v-html="translatedContent"></div>
</div>
</div>
</template>y en el script, como no, colocaremos toda la lógica de la traducción (es fundamental hacer la importación del fichero deepl.js que hemos creado antes):
<script>
import { ref, onMounted } from 'vue';
import { translateText } from '../logic/deepl';
export default {
setup() {
const selectedLang = ref('');
const translatedContent = ref('');
const sourceLang = ref(''); // Variable para el idioma de origen
async function translatePage() {
console.log(selectedLang.value);
try {
const contentToTranslate = document.querySelector('#contentToTranslate');
const originalHTML = contentToTranslate.innerHTML;
// Actualiza la variable sourceLang con el valor seleccionado
sourceLang.value = selectedLang.value;
const response = await translateText(originalHTML, sourceLang.value);
const translatedHTML = response.data.translations[0].text;
// Reemplaza el contenido original con el contenido traducido
contentToTranslate.innerHTML = translatedHTML;
} catch (error) {
console.error('Error al traducir la página:', error);
}
}
onMounted(() => {
//translatePage();
});
return {
selectedLang,
translatePage,
translatedContent,
};
},
};
</script>Ahora, hemos de referenciar en App.vue, el componente que hemos creado para que esté disponible en toda la aplicación y dentro del template, llamaremos al componente que hemos importado:
<template>
<div>
<div id="contentToTranslate">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
<TranslationComponent />
</div>
</template>
<script>
import TranslationComponent from './components/TranslationComponent.vue';
export default {
components: {
TranslationComponent,
},
}
</script>Obviamente, aplicaremos los estilos css que sean necesarios para esta parte de la aplicación.
Una vez todo hecho, llega el momento de probar la aplicación, lanzandola con
yarn serve
Para este ejemplo, he preparado una página sencilla con un par de elementos de texto, que serán los que se traduzcan, como se puede ver en el video siguiente:
Como decía al principio, se trata de una prueba muy sencilla del concepto de traducción automática mediante una API para ello.
Pero el objetivo del post, era precisamente ese, establecer unas bases que se pueda seguir investigando en este sentido.