K3vinchaparro
commented
8 months ago :sunglasses:Múltiples idiomas en micro clientes:sunglasses:
Este tutorial esta mas enfocado en como se comparte información entre micro clientes a través de las cookies, en este caso para cambiar el idioma en los microclientes, es bueno recalcar, que esta no es una buena practica, solo sea hace cuando sea muy necesario.
A continuación se explica como implementar la traducción en micro clientes.
Para esta explicación se trabajara con angular y además, se parte de que ya se sabe trabajar con microservicios, ósea ya tenemos varios clientes encapsulados en una herramienta (single-spa) y que se sabe hacer una traducción en un cliente normal.
<script type="systemjs-importmap">
{
"imports": {
"@prueba/root-config": "//localhost:9000/prueba-root-config.js",
"@prueba/mf-header": "//localhost:4200/main.js",
"@prueba/mf-main": "//localhost:4201/main.js",
}
}
</script>
<% } %>@prueba/root-config: Contiene los micro clientes (Encapsulador) @prueba/mf-header: El header de la aplicación (Cliente) @prueba/mf-main: El contenido principal (Cliente)
Iniciamos
-
- Para iniciar, instalaremos las herramientas que usaremos para la traduccion, esto se hace en cada cliente:
npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --save
- Para iniciar, instalaremos las herramientas que usaremos para la traduccion, esto se hace en cada cliente:
-
- En la carpeta assets de cada cliente, vamos a crear una carpeta (sugiero llamarla i18n), ahí vamos a crear los json con los idiomas que queremos que tenga nuestra aplicación, en este caso ingles y español:
- En la carpeta assets de cada cliente, vamos a crear una carpeta (sugiero llamarla i18n), ahí vamos a crear los json con los idiomas que queremos que tenga nuestra aplicación, en este caso ingles y español:
En cada uno de ellos ponemos las traducciones, por ejemplo, text-docs-1 debe estar igual en los idiomas, así será identificado por el traductor:
en.js:
{
"text-docs-1": "Microfrontends are a software development architecture that focuses on breaking down a monolithic frontend application into smaller, independent, and easily deployable parts.",
"text-docs-2": "Each part, or microfrontend, is a self-contained frontend module that can be developed, deployed, and scaled independently. This provides advantages in terms of development, maintenance and scalability.",
"text-docs-3": "Microfrontends enable development teams to work more independently and efficiently. Each team can take responsibility for a specific microfrontend, facilitating collaboration and improving development speed.",
"text-docs-4": "Furthermore, microfrontends allow independent updating and deployment of each part of the application, making continuous integration and continuous delivery easier.",
"title-docs-1": "Microfrontends: An Introduction",
"title-docs-2": "What Are Microfrontends Used For?"
}
es.json
{
"text-docs-1": "Los microfrontends son una arquitectura de desarrollo de software que se centra en dividir una aplicación frontend monolítica en partes más pequeñas, independientes y fácilmente desplegables.",
"text-docs-2": "Cada parte, o microfrontend, es un módulo frontend autónomo que se puede desarrollar, desplegar y escalar de forma independiente. Esto proporciona ventajas en términos de desarrollo, mantenimiento y escalabilidad.",
"text-docs-3": "Los microfrontends permiten a los equipos de desarrollo trabajar de manera más independiente y eficiente. Cada equipo puede asumir la responsabilidad de un microfrontend específico, lo que facilita la colaboración y mejora la velocidad de desarrollo.",
"text-docs-4": "Además, los microfrontends permiten la actualización y despliegue independiente de cada parte de la aplicación, lo que facilita la implementación continua y la entrega continua.",
"title-docs-1":"Microfrontends: Una introducción",
"title-docs-2":"¿Para qué sirven los microfrontends?"
}- En cada app.module.ts de los clientes agregamos lo siguiente
export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, environment.apiUrl+'assets/i18n/', '.json'); }
El cual environment.apiUrl es una variable de entorno, que hace refencia al mismo cliente, ósea que si se esta trabajando con el cliente header que esta en local y que esta en el puerto 4200, en las variables de entorno quedaria:
export const environment = {
production: false,
apiUrl: 'http://localhost:4200/',
};Tambien en app.module.ts de cada cliente ponemos en lo imports
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),Debería estar quedando así, en cada uno de los clientes:
-
Ahora vamos a trabajar con el mf-header, el cual tendrá el select para escoger el idioma:
<select #langSelect (change)="cambiarIdioma(langSelect.value)"> <option *ngFor="let lang of langs" [value]="lang"> {{ lang }} </option> </select>en el app.component.ts ponemos lo siguiente
langs: string[] = ['es', 'en']; // idiomas que va a soportar nuestra aplicacion langCookie: string = 'es'; constructor( private translate: TranslateService ) { this.validateLang() }
//este metodo esta escuchando el envento del select, y el string que obtiene lo setea en una cookie cambiarIdioma(lang: string) { this.langCookie = lang setCookie('lang', this.langCookie); let event = new CustomEvent('lang',{ detail:{ answer: lang } }) window.dispatchEvent(event) }
//esto va fuera del componente o en otro archivo de utils, es para el manejo de cookies export function setCookie(name: string, val: string) { const date = new Date(); const value = val; // Set it expire in 7 days date.setTime(date.getTime() + 7 24 60 60 1000); // Set it document.cookie = name + '=' + value + '; expires=' + date.toUTCString() + '; path=/'; }
export function getCookie(name: string): string | undefined { const value = '; ' + document.cookie; const parts = value.split('; ' + name + '=');
if (parts.length == 2) {
return parts.pop()?.split(';').shift();
}
return undefined
}
5. Ahora en los clientes que van a escuchar la cookie (que estará seteada ya por el header y cada vez que se cambie el idioma)
en este caso el cliente de mf-main:
```js
//observable que estara pendiente del cambio del idioma
whatLang$ = fromEvent(window, 'lang');
ngOnInit(): void {
this.validateLang();
}
constructor(
private translate: TranslateService
) {}
// este metodo valida el idioma que se seteo en la cookie
validateLang() {
let lang = getCookie('lang') || 'en';
this.whatLang$.subscribe((x:any) => {
lang = x['detail']['answer'];
this.translate.setDefaultLang(lang)
});
this.translate.setDefaultLang(getCookie('lang') || 'en');
}- por ultimo en los clientes, en el html se coloca:
<p> {{'text-docs-1' | translate}} </p>
:partying_face:Eso seria todo:partying_face: Al cambiar el valor del select que esta en el mf-header, se cambiara el idioma en los clientes que tengan el obsevable que esta pendiente del cambio del valor en la cookie
josemasster
fabianbarreto02
Se requiere realizar la Apropiación y documentación de tecnología de micro clientes para la migración del cliente actual a la nueva tecnología
Sub Tareas
Criterios de aceptación
Requerimientos
No aplica
Definition of Ready - DoR
Definition of Done - DoD - Desarrollo