Taller de Astro: colecciones, transciciones y AstroDB
Ponemos a prueba Astro sacando partido de 3 de sus funcionalidades más populares, potentes y sorprendentes.
Duración total: 01:32:29
Código descargable
Acceso 100% online
Descripción de la masterclass
En este taller en directo para la Comunidad Malandriner de suscriptores de Web Reactiva Premium, exploramos las funcionalidades avanzadas de Astro, un framework potente para crear sitios web estáticos y dinámicos.
Enlace al Taller
Puedes seguir el taller completo en este enlace.
Partes del Taller
1. Crear Páginas Dinámicas con Markdown
Aprendimos a crear páginas dinámicas de proyectos basadas en una colección de archivos Markdown. Esto permite gestionar y visualizar proyectos de manera eficiente utilizando contenido estructurado y bien organizado.
2. Añadir Animaciones en la Transición de Página
Implementamos animaciones en las transiciones de página para mejorar la experiencia del usuario. Utilizando la API de transiciones de vistas del navegador, logramos efectos visuales atractivos que hacen que la navegación sea más fluida y agradable.
3. Integrar AstroDB para la Persistencia de Datos
Añadimos AstroDB para manejar la persistencia de datos, ilustrado con un ejemplo de votaciones en posts de blog. Esta integración permite guardar y gestionar datos de manera efectiva, tanto en local como en la nube, utilizando Astro Studio.
Funcionalidades y Herramientas Exploradas
- Integración de AstroDB: Para gestionar la persistencia de datos y votos de usuarios.
- Componentes de React en Astro: Integración de componentes de React dentro de Astro utilizando adaptadores específicos.
- Generación de Rutas API Dinámicas: Crear rutas API dinámicas para manejar solicitudes específicas como las votaciones.
- Implementación de Transiciones de Vista: Mejora de la experiencia de usuario con transiciones visuales entre páginas.
- Arquitectura Islands de Astro: Permite usar diferentes frameworks dentro de Astro, combinando lo mejor de cada uno.
- Renderizado Híbrido: Combina renderizado estático y dinámico para optimizar el rendimiento y la funcionalidad.
Herramientas Adicionales
- Visual Studio Code: Utilizado para la edición y exploración de la base de datos SQLite integrada en el proyecto.
- Astro Studio: Herramienta para la gestión remota de bases de datos y proyectos Astro.
En resumen, este taller proporciona una visión completa y práctica de cómo utilizar Astro para crear proyectos web dinámicos y atractivos, integrando diversas herramientas y tecnologías para optimizar tanto el desarrollo como la experiencia del usuario.
¡No te pierdas los futuros talleres y sigue aprendiendo con la Comunidad Malandriner!
Explora los capítulos
1. Introducción al taller y participación [07:21]
Introducción al taller y participación
[00:46]
Exploración específica de Astro
[00:32]
Características clave: detalle de proyectos y botón de votar
[00:32]
Funcionalidades de Astro y compatibilidad con otros frameworks
[03:10]
Demo y desaparición de elementos previos
[00:28]
Formato de componentes en Astro y configuración en VS Code
[01:53]
2. Manejo de enrutado en la carpeta Pages [03:32]
Manejo de enrutado en la carpeta Pages
[01:32]
Uso de Markdown y JSON en Astro
[01:17]
Configuración de archivos en JavaScript
[00:14]
Construcción de proyectos con Astro
[00:29]
3. Esquemas de contenido y estructura de carpetas [20:09]
Esquemas de contenido y estructura de carpetas
[01:02]
Generación de esquemas detallados con Zod
[03:18]
Interrupciones y soluciones rápidas en el flujo de trabajo
[01:22]
Importancia de definir props y atributos
[01:08]
Campos añadidos automáticamente por Astro
[01:08]
Condicionamiento de elementos opcionales en JSX
[01:28]
Simplificación del proceso en Vue
[00:12]
Indicaciones de contenido YAML
[00:18]
JavaScript del servidor y scripts del cliente
[00:20]
Acostumbrándose al nuevo flujo de trabajo
[04:10]
Errores en modo desarrollo y build
[00:15]
Concordancia del front matter con el esquema de colección
[00:42]
XGPT y especificación de reglas
[01:58]
Parámetros props y contexto en Astro
[02:21]
Procesamiento y optimización de JavaScript en el cliente
[00:08]
Cargar JavaScript inline en la plantilla
[00:19]
4. API de 'View transitions' del navegador [13:57]
API de 'View transitions' del navegador
[03:01]
Efectos de zoom y documentación
[01:21]
Simplificación del uso de IDs en Astro
[01:58]
Transiciones avanzadas en WebReactiva
[01:10]
Potencia del navegador y desactivación de funciones
[01:07]
Precarga de páginas en Gatsby
[00:47]
Precarga de posts y gestión de errores
[00:13]
Errores en el renderizado de elementos precargados
[00:18]
Avisos en la versión de desarrollo
[04:02]
5. Objetivo de AstroDB: persistencia remota de datos [47:30]
Objetivo de AstroDB: persistencia remota de datos
[00:39]
Text fill y gestión de contenido
[00:30]
Claridad en la documentación y búsqueda de detalles
[00:26]
Funcionamiento remoto recomendado para producción
[00:36]
Funcionalidad de 'Me Gusta' en artículos
[03:35]
Definición de tabla de votos
[00:26]
Simplificación del proceso de votos en la base de datos
[00:18]
Uso de scripts para desarrollo local
[01:54]
Funcionalidad del botón de votar
[02:27]
Autocompletado y reducción de errores en el código
[00:12]
Identificación de post ID como slug
[00:20]
Captura de parámetros de URL con Params de Astro
[02:07]
Creación de rutas dinámicas y APIs en Astro
[02:26]
Definición de rutas API en Astro
[00:25]
Uso de React Server Components
[00:41]
Ejecución de botones en el cliente y servidor
[01:35]
Manejo de eventos y fetch en botones
[02:22]
Manejo de páginas y rutas dinámicas en Astro
[00:10]
Ajustes para rutas dinámicas que devuelven JSON
[01:13]
Integraciones específicas y características de Astro
[00:56]
Modos de salida: estático y bajo demanda
[02:50]
Ejecución de JavaScript en el cliente
[01:20]
Colocación de scripts en código HTML
[00:27]
Implementación de rutas API en el servidor
[02:13]
Desarrollo y alimentación de bases de datos
[01:07]
Acceso técnico a ficheros de seguridad
[00:34]
Creación de proyectos en Astro Studio
[01:43]
Vinculación con AstroStudio y futuras características
[00:48]
Gestión de cambios en bases de datos
[02:26]
Uso de tokens en archivos .env
[00:45]
Conexión remota con Astro Studio
[01:18]
Lanzamiento de previews y generación de builds
[01:07]
Confirmación de datos en base de datos remota
[01:52]
Conversión de código a React con TypeScript
[00:17]
Encapsulación de funcionalidad de votación en componente
[00:27]
Instalación de adaptadores para Islands Architecture
[03:15]
Directiva client load en componentes React
[01:12]
Grabación de la sesión y puntos fuertes de Astro
[00:14]
Agradecimientos y final de la sesión
[00:17]
Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva
Contenido nuevo todas las semanas
Una comunidad de developers colegas en telegram
Desafíos y retos de programación para que mejores tus habilidades
400 horas de contenido en audio y vídeo
Entrevistas y masterclass en directo con los/las mejores profesionales
Precio
24€Matrículaplus15€Al mes
- Contenido disponible 24/7
- Audios y videos
- Retos y desafíos
- Todo el código descargable
- Comunidad de developers
- Acceso premium completo