Saltar al contenido

Categoría: Desarrollo web

Cómo crear un menú de navegación multi idioma en Shopify

Si creas un aplicación embebida en Shopify, tienes la posibilidad de crear un menú de navegación multi idioma para acceder a las distintas partes de tu aplicación, en el idioma establecido para la cuenta del administrador.

El menú de navegación de una aplicación embebida

Normalmente éste menú lo puedes definir en la configuración de la aplicación. Y se creará automáticamente al momento de cargar la página. Pero posee la limitación de solo ser compatible con un solo idioma, entonces, si tienes mas ese menú va a estar siempre en el mismo idioma.

Crear el menú desde React con App-Bridge

Para solventar esto podemos usar el componente NavigationMenu de App-Bridge. Que no es para crear menús adicionales, sino acceder a el mismo que mostré en el párrafo anterior y se crea antes de renderizar el resto de la aplicación. Con App-Bridge le decimos a Shopify que vamos a crear un menú y le pasamos la etiqueta y dirección de cada sección.

Crear un componente para definir las rutas

Para la creación del menú de navegación multi idioma, necesitamos definir el texto y el enlace de cada entrada del menú con Applink, pues éste es el tipo de dato que acepta NavigationMenu.

Entoces simplemente podemos hacer un arreglo con la traducción del texto (en este caso uso react-i18n de Shopify) y el enlace. Posteriormente recorremos cada posición del arreglo y generamos el AppLink para enviarlo a la aplicación.

import { AppLink } from '@shopify/app-bridge/actions';

const menuEntries = (i18n) => ([
  {
    label: i18n.translate('Menu.dashboard'),
    destination: '/dashboard',
  },
  {
    label: i18n.translate('Menu.settings'),
    destination: '/settings',
  },
]);

const menuItems = (app, i18n) => {
  const items = [];
  const entries = menuEntries(i18n);

  let active;

  entries.forEach((entry) => {
    const menuLink = AppLink.create(app, entry);
    items.push(menuLink);

    if (window.location.pathname.includes(entry.destination)) {
      active = menuLink;
    }
  });

  return { items, active };
};

export { menuItems };

Cargar el componente en la aplicación

Una vez que tengamos un componente que devuelva las entradas del menú traducidas y en formato AppLink. Podemos pasarlas al componente NavigationMenu utilizando la función create().

Primero importamos el componente realizado en el paso anterior:

import { menuItems } from './NavMenu';

Luego simplemente usamos el hook useAppBridge() para obtener la instacia de la aplicación embebida. Guardamos los enlaces en una variable y posteriormente se lo pasamos como argumentos a NavigationMenu para que cree el menú.

const app = useAppBridge();
const menuOptions = menuItems(app, i18n);

NavigationMenu.create(app, menuOptions);

¡Y listo! Ya tendrás tu menú de navegación multi idioma.

Espero que te haya sido de ayuda y ahora puedas tener un menú principal que funcione en los idiomas soportados por tú aplicación.

Deja un comentario

Cargar dinámicamente mixins distintos desde Vue router

Si estas haciendo aplicaciones con Vue.js es probablemente que estés usando los mixins para reutilizar el código. En algunos casos, existe la posibilidad de que tengas dos o más mixins con los mismos nombres de métodos pero implementando las funcionalidades de forma distinta. Pero solo necesites importar/inyectar uno solo en la vista actual. Entonces es necesario cargar dinámicamente mixins distintos desde el router dependiendo de la ruta.

Cómo cargar dinámicamente mixins distintos

En mi caso dependiendo de la ruta, necesitaba cargar código específico. Esto es para poder reciclar la vista, el cual llama a métodos con los mismos nombres en los distintos mixin. Como Vue.js 2 no soporta importar objectos de form dinámica, no podemos hacer los imports mediante una condición inicial. Así que la forma que encontré es pasando un nuevo componente que sea hijo (para heredar los atributos y métodos) de tu mixin. Defines en cada ruta, este nuevo componente y defines que herede el mixin correspondiente.

La solución a cargar dinámicamente mixins distintos es que Vue router permite en la sección de component pasar el componente que reutilizas (en mi caso el de la vista) y luego pasar en el atributo mixins, un arreglo con el mixin que debe usar esa vista.

A continuación puedes ver a qué me refiero:

{
      path: "/rutaA",
      name: "ComponenteA",
      component: {
        extends: ComponenteComun,
        mixins: [mixinA]
      }
    },
    {
      path: "/rutaB",
      name: "ComponenteB",
      component: {
        extends: ComponenteComun,
        mixins: [mixinB]
      }
    },

Con esto, cuando se entra a una ruta el router creará un nuevo componente con los métodos, atributos y observadores del componente a reusar. Pero como se está definiendo un mixin distinto a cada vista tendrán implementaciones distintas.

Espero que está guía te haya servido en tu proyecto informático. Si te gustó puedes compartirla o si deseas aportar algo a esta entrada, simplemente deja un comentario.

¡Gracias por leerla!

Deja un comentario

Características de un hosting para WordPress

Cuando deseas hacer un sitio en cualquier tecnología o por ejemplo en WordPress. Aparte de comprar tu dominio, es necesario adquirir el servicio de alojamiento o mejor conocido como hosting. En este artículo te enseñaré que es un servicio de alojamiento y como comprar un hosting para WordPress.

¿Por qué necesito un servicio de alojamiento?

Cuando quieres tener una página en Internet requieres principalmente de dos cosas: el dominio y el hosting. En este último es el alquiler del espacio de disco duro de una computadora (llamada servidor), donde se guardan los archivos, códigos e imágenes de tu página web. De esta forma, cuando escribes la dirección URL de un sitio, el dominio apunta a esa computadora para que el navegador inicie el proceso de carga y te la muestre.

¿Qué necesito para adquirir un hosting para WordPress?

Cada servicio de hosting posee soporte para ciertas tecnologías que permiten ejecutar o cargar tu página web. Para el caso de WordPress se requiere tener 2 cosas: un servidor web y un servidor de base de datos. Las compañías suelen ofrecer ambas al mismo tiempo por lo que no debes preocuparte de adquirirlos por separado.

Servidor Web

Es quien se encarga de procesar los archivos de la pagina para mostrarlos en tu navegador, en el caso de que tenga código de un lenguaje de programación lo procesa para generar el HTML que sería la página web que ves.

El hosting para WordPress, puede ser cualquier servidor web que procese PHP, el lenguaje de programación que utiliza WordPress. Ya que actualmente este CMS posee compatibilidad para la mayoría de ellos: Apache, Nginx, Lightspeed, entre otros. Lo mas importante es que soporte PHP (recomiendo tener compatibilidad con la versión 7.4 o superior) pues sin esto no podrás tener WordPress en tu servidor web.

La diferencia entre versiones y servidores web, solo afecta a usuarios mas avanzados y técnicos. Pues la configuración cambia y la velocidad del mismo. Ya queda criterio del programador cual elegir (en caso que se pueda, pues algunos servicios de alojamiento solo te brindan una configuración única).

Base de Datos

El servidor de base de datos es aquel donde se almacenan los datos de forma clasificada y ordenada. De esta forma es rápido leerlo y clasificarlo. Por ejemplo, si tienes varias noticias o artículos en tu página, el servidor de base de datos permite organizarlas por las fecha mas reciente y permitir a WordPress mostrarlas de forma bonita y organizada en el navegador.

Para WordPress requieres tener como base de datos MySQL o 100% compatibles como MariaDB. Si tu servidor de alojamiento tiene soporte para base de datos MySQL o MariaDB es suficiente. Generalmente el otro requerimiento es el espacio (depende de cuanta información tienes) y la versión que debe ser superior a 5.0.15, que hoy en día es una versión muy vieja.

Otro software

Adicionalmente al gestor de Base de Datos y el servidor web que ejecute PHP. Recomiendo tener adicionalmente:

  • Panel de administración como Cpanel, para poder navegar en el sistema de archivos, crear cuentas de correo, administrar dominio y demas cosas fácilmente.
  • Tener instalado GIT para que los programadores puedan subir sus desarrollos fácilmente. Además permite actualizar o revertir actualizaciones rápidamente.
  • SSH para subir los archivos al servidor de forma segura. También con acceso SSH los programadores pueden ejecutar comando o correr scripts que facilitan el trabajo.
  • Soporte a correos electrónicos para poder enviar correos desde el servidor y no usar (inicialmente) otro servicio adicional para enviar informaciones a tus usuarios.

Conclusiones

Como resumen, si andas buscando un hosting para WordPress, te recomiendo hacer esta comparativa de hostings y seleccionar el que tenga la mejor relación de características ajustadas a tu presupuesto.

¡Luego empieza a subir tus archivos y disfruta de tu sitio con WordPress!

Deja un comentario

¿Sirve una Mac con Apple Sillicon (M1, M1 Pro, M1 Max) para el desarrollo web?

Hace unos meses adquirí una Mac mini con el nuevo procesador de Apple Sillicon (M1). Estaba buscando remplazar mi Mac mini anterior y cuando vi que sacaron nuevos equipos con el chip M1 que en las pruebas de rendimiento superaban a la mayoría de procesadores, no producían mucho calor (vivo en un lugar caliente ) y por lo tanto no eran equipos ruidosos.

¿Que tienen de distinto los chips M1 y cual adquirir?

Los chips de Apple Sillicon (M1) son diseñados por la misma Apple. Utilizan la arquitectura ARM a diferencia de x86 que era la utilizada por AMD e Intel (quien proveía procesadores a Apple desde el 2005).

Esto significa que utilizan otra instrucciones, por lo tanto los programas deben ser compilados para esta arquitectura. Pero tiene como ventaja que los equipos con ARM se diseñan para consumir menos energía y actualmente poseen gran rendimiento.

El chip de Apple Sillicon (M1)
El chip de Apple Sillicon (M1)

Apple Sillicon (M1) para el desarrollo web

Respecto a la compatibilidad de aplicaciones, macOS ofrece Rosseta 2. Una aplicación que traduce el código de x86 a ARM permitiendo ejecutar cualquier aplicación previa sin problemas. Respecto al rendimiento, obviamente es menos al nativo pero igual están a la par con los equipos anteriores de Apple con procesadores Intel.

Sin embargo, a estas alturas la mayoría de aplicaciones ofrecen compatibilidad para el Apple Sillicon (M1). Por lo que podrás trabajar sin problemas como si estuvieses en otro equipo.

Editores o IDEs

Actualmente los principales IDEs para programación web ofrecen compatibilidad nativa. El primero en probar fue Sublime Text 4 que es el mas rápido que usado. Xcode como es el propio de Apple también es rápido pero casi no me gusta para desarrollo web. Visual Studio Code también ofrece version nativa que funciona muy rápido al igual que la suite de Jet Brains.

Lo único que se debe tener cuidado es con instalar la versión para ARM y no la de x86. Ya que todos estos editores ofrecen ambas versiones y a pesar que la versión de x86 corre en tu equipo. No lo hará de forma nativa y es muy lento.

Compatibilidad con lenguajes de programación

macOS ofrece versiones nativas de lenguajes com Ruby, PHP, entre otros. Sin embargo, puedes conseguir versiones nativas de Rust, Go, PHP, Ruby, JavaScript (con Node) y usarlas sin problemas. Si usas lenguajes interpretados, el código será igual entre arquitecturas así que no habrá problemas al momento de ejecutar o desarrollar tus aplicaciones. En nodeJS tuve que compilar algunos módulos para que quedaran nativos para que funcionara en mis proyectos, pero creo que otro sistemas operativos también hace eso la primera vez.

Docker

Docker requiere de Linux para funcionar, en macOS Big Sur ofrecen algo llamado Virtualization Framework que sirve para correr otros sistemas como Linux en un hypervisor. Docker desde la version 3.3 ofrece soporte para equipos con Apple Sillicon (M1). Desde que actualicé a la versión 4 no he tenido problemas siguiendo estas recomendaciones:

  • Uso las imágenes de mis contenedores en versiones de ARM para mejorar la velocidad. Algunos contenedores como el de Mailcatch, solo tienen para x86 y lo uso sin problemas.
  • Usar qemu como método de virtualización para tener 100% de estabilidad. Yo uso Virtualization Network y a veces falla al hacer operaciones pesadas con la base de datos.
  • La imagen oficial de MySQL no está para ARM y uso MariaDB en ARM. Siempre que intente usar MySQL inclusive con la emulación falla, desconozco la causa y por eso lo dejé de usar.

Pero en general funciona bien, estable y hasta los momentos no ha afectado mi trabajo.

Homebrew y aplicaciones del sistema

Te recomiendo visitar Does it ARM para buscar si el software corre en tu equipo. Aunque no he tenido problemas de compatibilidad. Suelo instalar las aplicaciones del sistema a través Homebrew y este separa las versiones de x86 y ARM por separado, así que si ofrece versión nativa se instala esa, si no, usará la arquitectura de x86. Todo esto funciona de forma transparente así que no habrá que intervenir.

Recomendaciones finales

Me parece que los equipos con Apple Sillicon (M1) son buenos para el desarrollo web, la relación costo/rendimiento es muy buena, gran compatibilidad con las aplicaciones existentes de macOS, gran potencia, poco consumo de energía y ningún ruido en el hardware. Hacen de estos unos equipos una buena compra para el desarrollo web.

Por ahora, la única limitación que veo es la cantidad de RAM, actualmente un máximo de 16GB, esta cantidad compartida con el chip de vídeo puede ser muy poco para algunos usuarios y probablemente deseen esperar por la siguiente generación de equipos con Apple Sillicon. Sin embargo, debido a la velocidad de los discos, al usar el área de intercambio o swap, la velocidad sigue siendo muy alta por lo que si necesitas mas RAM la velocidad sigue siendo muy potente, pero no es lo recomendable.

Respecto al disco duro, no me preocupa. Tengo una portátil con un disco duro SSD de menor calidad y hasta los momentos me ha durado 7 años, estoy seguro que esos me durarán mucho mas. Ademas he tomado medidas como no indexar ciertos archivos para aumentar el rendimiento y vida útil del disco duro.

En fin, si buscas un equipo con buen costo/rendimiento para realizar desarrollo web y prefieres usar macOS. Te recomiendo las computadoras con Apple Sillicon (M1). No tendrás problemas de compatibilidad con las aplicaciones existentes y el rendimiento será muy bueno.

Si compraste un equipo o vas a hacerlo, ¡Bienvenido(a) a la arquitectura ARM!

Deja un comentario