¿Cómo construir un backend Astro.js?

Astro.js es un generador de sitios estáticos (SSG) y un marco frontend para crear aplicaciones web rápidas y modernas.

Permite crear sitios web rápidos y ligeros mediante la renderización previa de archivos HTML, CSS y JavaScript estáticos en el momento de la compilación.

A diferencia de los SSG tradicionales, Astro.js también le permite hidratar sus páginas estáticas con JavaScript en tiempo de ejecución, lo que le proporciona la flexibilidad necesaria para crear sitios web dinámicos e interactivos.

Este artículo proporciona un tutorial completo sobre cómo construir una aplicación Astro.js utilizando Back4app como Backend as a Service (BaaS).

Proporcionará una visión general de Astro.js, sus ventajas y limitaciones, y una guía paso a paso sobre cómo crear y alojar una aplicación Astro.js.

Ventajas de Astro.js

Astro.js cuenta con varias características clave que lo convierten en una gran opción para crear sitios web modernos, entre ellas:

Arquitectura insular

La arquitectura en islas es un patrón de arquitectura web que consiste en dividir una página web en islas de funcionalidad encapsuladas e independientes.

Cada isla puede estar representada por un único componente, un grupo de componentes o incluso una página entera.

Astro.js extrae tu interfaz de usuario (UI) en componentes más pequeños y aislados conocidos como “Astro Islands”. Puede utilizar estas islas en cualquier página, sustituyendo así el JavaScript no utilizado por HTML ligero.

La arquitectura en isla presenta varias ventajas, como un mejor rendimiento, una mayor flexibilidad y un desarrollo simplificado.

JavaScript mínimo

Astro adopta un enfoque “menos JavaScript”. Sólo envía JavaScript al cliente cuando es necesario para la interactividad. Esto ayuda a reducir el tamaño del paquete JavaScript y mejora los tiempos de carga.

El uso mínimo de JavaScript en Astro.js ofrece varias ventajas tangibles, como un mayor rendimiento del sitio web, mejor SEO, menor consumo de recursos, mayor seguridad y una experiencia de usuario más receptiva.

Este enfoque se alinea para ofrecer aplicaciones web eficientes y de alto rendimiento, lo que convierte a Astro.js en una opción convincente para el desarrollo web moderno.

Integración con frameworks populares

Puedes utilizar Astro.js con varios frameworks de JavaScript populares, como React, Svelte, Vue y Lit.

Esto le permite elegir sus herramientas preferidas, reutilizar los componentes y conocimientos existentes, aprovechar los ecosistemas establecidos y mantener un proceso de desarrollo fluido.

Esta flexibilidad y compatibilidad hacen de Astro.js una opción atractiva para diversos proyectos.

Carga optimizada

La carga optimizada es una de las principales ventajas de Astro.js. Transforma radicalmente la forma en que se diseñan y entregan las páginas web, centrándose en mejorar la experiencia del usuario y el rendimiento del sitio web.

Astro optimiza la carga y el renderizado para distintos dispositivos, incluidos los de baja potencia, como los smartphones. Su objetivo es ofrecer una experiencia fluida independientemente del dispositivo del usuario o de las condiciones de la red.

Limitaciones de Astro.js

Astro.js posee algunas limitaciones que debes conocer. Estas son algunas de ellas:

Compatibilidad con el ecosistema

Astro.js fue diseñado para trabajar con frameworks frontales populares como React, Svelte y Vue.js. Sin embargo, su ecosistema es menos maduro que el de frameworks como React o Vue, por lo que es posible que encuentres menos bibliotecas y componentes de terceros creados explícitamente para Astro.

Requisito de familiaridad con el marco

Astro.js permite el uso de varios frameworks de frontend, lo que requiere estar familiarizado con cada uno de los frameworks elegidos.

Esta amplitud de conocimientos puede resultar abrumadora para los desarrolladores que se especializan en un framework o son nuevos en el desarrollo web.

Trabajar en un proyecto que requiera múltiples marcos de trabajo implicará mantener la coherencia entre los distintos marcos.

Esto puede suponer un gran reto, ya que los distintos marcos de trabajo tienen sus propias convenciones y buenas prácticas, y armonizarlas dentro de un mismo proyecto puede conducir potencialmente a una estructura de código fragmentada.

Optimización del aprendizaje

El aprendizaje de optimización se refiere a la comprensión y aplicación de estrategias específicas para maximizar el rendimiento de las aplicaciones web construidas con un framework.

Aunque Astro.js está diseñado para ser eficiente y rápido, para aprovechar plenamente sus capacidades es necesario conocer a fondo sus técnicas de optimización e implementarlas en el proceso de desarrollo. Esto puede ser complejo y requerir conocimientos avanzados.

Creación de la aplicación Journal

Siguiendo este tutorial, construirás una aplicación básica de diario usando el framework Astro.js junto con React.js.

La aplicación de diario proporcionará funcionalidad CRUD (crear, leer, actualizar, borrar) y utilizará Back4app para el almacenamiento y recuperación de datos.

Puedes crear un proyecto Astro.js ejecutando este comando en tu terminal:

npm create astro@latest

El comando anterior generará un proyecto Astro.js básico y te guiará en la configuración de la aplicación, incluyendo aspectos como el uso de TypeScript y su nivel de rigor.

Para añadir React.js a tu proyecto Astro.js, ejecuta este comando en tu terminal:

npx astro add react

Ahora, tu proyecto está listo. Puedes empezar a desarrollar la aplicación con tu IDE favorito. Primero, define tus estilos globales y el diseño de la aplicación.

Para definir tus estilos globales, crea una carpeta styles dentro del directorio src. Dentro de la carpeta styles, crea un archivo llamado global.css y define allí tus estilos globales.

Así:

Con los estilos globales en su lugar, es el momento de definir su diseño. Encontrarás un archivo Layout.astro dentro de la carpeta layouts en el directorio src.

Sustituya el código existente en el archivo Layout.astro por el siguiente bloque de código:

El bloque de código anterior representa el componente de diseño. Importa los estilos globales, configura los metadatos y proporciona un marcador de posición para el contenido dinámico mediante el elemento slot.

El contenido principal del componente es un encabezado h1 con un estilo específico definido en la etiqueta style.

Para aplicar la maquetación y los estilos globales a sus páginas, importe el componente de maquetación al archivo de página y encierre la sección HTML dentro del componente de maquetación.

Para aplicar el diseño a su página de inicio, siga los mismos pasos en el archivo index.astro ubicado en el directorio src/pages.

Así:

Este bloque de código define la página de inicio de tu aplicación. Define un menú de navegación con un enlace a la página “/journal ” y aplica estilos específicos para centrar y espaciar el elemento de navegación.

Para crear la página del diario, cree un archivo llamado journal.astro dentro del directorio src/pages e incluya el siguiente bloque de código en el archivo.

El bloque de código anterior representa la página del diario de su aplicación. Importa el componente de diseño y envuelve la sección HTML para proporcionar una estructura de página coherente.

El código también define un formulario para capturar las entradas del diario, equipado con campos de entrada para el título y el cuerpo, junto con un botón “Registro”. Los estilos CSS definidos en la etiqueta style controlan la apariencia del formulario y sus elementos.

Para lanzar tu aplicación en tu navegador web, inicia el servidor de desarrollo de la aplicación. Navega al directorio del proyecto en tu terminal y ejecuta el siguiente comando para iniciar el servidor de desarrollo.

npm run dev

El comando anterior le proporcionará el enlace http://localhost:4321/. Navegue hasta este enlace en su navegador web para ver su aplicación.

La página de inicio debería tener este aspecto:

Para ver la página del diario, haga clic en el enlace de navegación “Registre su experiencia”.

Integración de Back4app con su aplicación

Back4App es una plataforma de servicios backend basada en la nube diseñada para agilizar el desarrollo, la gestión de aplicaciones, y utilizará Back4app como backend de Astro.js.

Aprovechando el framework de código abierto Parse Server, proporciona un sólido conjunto de herramientas que permiten a los desarrolladores centrarse en el desarrollo del front-end, simplificando al mismo tiempo las complejidades del back-end.

En esencia, Back4App ofrece funcionalidades cruciales para el desarrollo de aplicaciones modernas, como el almacenamiento de datos, la autenticación de usuarios y una base de datos en tiempo real.

Esto la hace valiosa para crear experiencias de usuario interactivas y dinámicas. La plataforma es compatible con varios lenguajes y marcos de programación, lo que satisface diversas necesidades de desarrollo.

Crear una cuenta Back4app

Para integrar las funcionalidades que ofrece Back4app en tus aplicaciones, necesitas tener una cuenta Back4app. Puedes crear una siguiendo estos sencillos pasos:

1. Visita el sitio web de Back4app.
2. Haga clic en el botón “Inscribirse”.
3. Rellene el formulario de inscripción y envíelo.

Presentación del plugin ChatGPT de Back4app

Back4app presentó recientemente su plugin ChatGPT para ayudar a los desarrolladores y entusiastas no técnicos a crear e interactuar con las aplicaciones de Back4app.

Usando el plugin Back4app ChatGPT, puedes convertir tus conversaciones en aplicaciones reales. Esto significa que usted no necesita experiencia con la plataforma Back4app antes de interactuar.

Para acceder a los plugins de ChatGPT, debes suscribirte a ChatGPT Plus. Una vez suscrito, haz clic en el botón “GPT-4 ” para que aparezca un menú emergente. Selecciona la opción “Plugins ” para continuar.

Una lista de plugins disponibles aparecerá en su pantalla. Localiza y selecciona el plugin Back4app (Escribe “Back4app” en la barra de búsqueda).

Crear una aplicación Back4app con el plugin

Crear una aplicación Back4app utilizando el plugin Back4app en ChatGPT es una tarea sencilla. Informe a ChatGPT sobre el tipo de aplicación que desea crear, y se encargará del resto.

Por ejemplo:

Como se ve en la imagen de arriba, el plugin Back4app ChatGPT crea una aplicación Back4app llamada “Journal application”.

Para verificar que el plugin Back4app ChatGPT creó la aplicación correctamente, navegue al sitio web de Back4app, ingrese a su cuenta y revise sus aplicaciones. Deberías encontrar una aplicación llamada “aplicación de diario” listada entre tus aplicaciones.

Utilizando el plugin, cree una clase de diario en la aplicación de diario.

Como se ve en la imagen de arriba, el plugin Back4app ChatGPT crea la clase de diario y añade un título, contenido y campo de fecha.

Cómo agregar datos a la aplicación Back4app

Usando el plugin Back4app ChatGPT, también puedes añadir datos personalizados a la aplicación. Por ejemplo, puedes añadir texto personalizado a los campos de título y contenido.

Una vez añadidos los textos, vaya al panel de control de la aplicación, haga clic en la clase de diario y confirme que se ha añadido el texto.

Conexión a Back4app

Para conectar tu aplicación de diario a la aplicación Back4app, necesitas instalar el Parse JavaScript SDK en tu aplicación.

Para ello, ejecute el siguiente comando en su terminal:

npm install parse 

Después de instalar el SDK de Parse JavaScript, necesita el ID de la aplicación y las credenciales Javascript KEY.

Puedes encontrar estas credenciales en la sección de Seguridad y Claves en el dashboard de tu app Back4app. Guarde el ID de la aplicación y la CLAVE Javascript de forma segura en su aplicación.

Añadir datos a Back4app desde la aplicación

Anteriormente en el artículo, usted aprendió cómo agregar datos a Back4app usando el plugin ChatGPT de Back4app. Para hacer esto usando su aplicación de diario, usted utilizará el Parse Javascript SDK.

En el archivo journal.astro, añada el siguiente bloque de código:

Este bloque de código representa un script JavaScript que se integra con Parse para crear y guardar entradas de diario. Importa la versión minificada de Parse desde parse/dist/parse.min.js y llama al método initialize.

Este método toma las credenciales Application_ID y Javascript_KEY como argumentos. Después de llamar al método de inicialización en Parse, establezca la propiedad serverURL en Parse a https://parseapi.back4app.com/.

El código selecciona los elementos input, textarea y button del DOM y los asigna a las variables title, body y button.

El campo de entrada toma el título del asiento y el campo de texto toma el cuerpo del asiento.

La función addJournal contiene la lógica necesaria para agregar datos a su base de datos Back4app. Crea una nueva instancia de un objeto Journal, establece sus propiedades title y content a los valores de los elementos input y textarea, y lo guarda en Back4app.

Con el método addEventListener, el código añade un receptor de eventos al botón, asegurándose de que al hacer clic en él se activa la función addJournal.

Obtención de datos de Back4app

Para obtener datos de Back4app y mostrarlos en tu aplicación, utilizarás un componente React. Crea un archivo Journal.tsx en el directorio src/components. En el archivo, importa e inicializa la librería Parse.

Así:

A continuación, defina los elementos JSX del componente:

A continuación, cree un estado de diario y defina una función que contenga la lógica para obtener datos de Back4app.

Así:

Con el método Parse.Query, la función fetchJournal utiliza el SDK de Parse para construir una consulta que recupere datos de la clase Journal.

El método find del objeto de consulta devuelve una matriz que contiene los resultados de la consulta, y la función setJournal actualiza el estado del diario con los datos recuperados.

Este código utiliza el hook useEffect para ejecutar efectos secundarios en el componente. Llama a fetchJournal para obtener datos cuando el componente se monta. Ahora, en el componente, muestra el contenido del estado del diario.

Así:

El bloque de código anterior muestra la lista de entradas del diario como una colección de elementos div, cada uno con un contenido específico y un botón “Eliminar” dedicado.

Muestra el título y el contenido de cada entrada del diario dentro de las etiquetas h3 y p y tiene un botón “Eliminar” para que los usuarios puedan borrar las entradas fácilmente.

Para dar estilo a los elementos JSX definidos en su componente de diario, añada los siguientes estilos a su archivo global.css:

Ahora, muestre el componente del diario en su página de inicio. Para ello, sustituya el código existente en el archivo index.astro por el bloque de código siguiente:

Este bloque de código importa el componente del diario y lo renderiza. La directiva client:load garantiza que el componente del diario se cargue inmediatamente al cargar la página, lo que proporciona una experiencia de usuario fluida y con capacidad de respuesta.

Borrar datos de Back4app

Para asegurar que el botón de borrado de tu aplicación junto a cada entrada funciona, necesitas definir una función que borre una entrada de tu elección. Usando el evento click, enlazarás esta función al botón de borrar.

Así:

La función deleteJournal crea una nueva instancia de un objeto Journal utilizando el método Parse.Object.extend. Después de crear el objeto, establece la propiedad id del objeto al parámetro id pasado a la función.

A continuación, la función llama al método asíncrono destroy del objeto “Journal ” para eliminar de Back4app la entrada del diario con el ID dado.

Con el método filter, la función filtra del estado del diario el asiento con el id especificado, creando un nuevo array que excluye el asiento eliminado.

Finalmente, con el método setJournal, la función actualiza el estado del diario con este nuevo array.

Ahora vincula la función deleteJournal al botón "Delete" usando el manejador de eventos click. Esto hará que sus elementos JSX en el archivo Journal.tsx se vean así:

Probar la aplicación

Ahora que has terminado de construir la aplicación, es importante que la pruebes. Para ello, vaya a su terminal, ejecute el servidor de desarrollo y vea la aplicación en su navegador web.

La aplicación debería tener este aspecto:

Haga clic en “Registre su experiencia” para visitar la página del diario de la aplicación y rellene los campos de entrada.

Después de rellenar los campos de entrada, haga clic en registro para añadir los datos a su base de datos Back4app. Vuelve a tu página de inicio.

Ahora, para probar si puedes borrar una entrada, haz clic en el botón de borrar de la entrada “Mi primer día de diario”. Tu página de inicio debería parecerse ahora a la imagen de abajo.

Conclusión

En este artículo, te has adentrado en el framework Astro.js, aprendiendo sus ventajas e inconvenientes potenciales. Has aprendido a crear una aplicación Astro perfectamente integrada con la biblioteca React.

Astro.js es una excelente opción para construir diversos sitios web, desde sencillas páginas de aterrizaje hasta complejas aplicaciones web. Es especialmente adecuado para sitios web que necesitan ser rápidos, ligeros y escalables.

Para saber más, lee el tutorial Cómo crear un backend para Astro.js.