Newsletter para devsEntra
Masterclass

Taller de Astro: colecciones, transciciones y AstroDB

Ponemos a prueba Astro sacando partido de 3 de sus funcionalidades más populares, potentes y sorprendentes.

Desde 15€/mes

Duración total: 01:32:29

Código descargable

Acceso 100% online

Taller práctico sobre Astro: colecciones y esquemas con Zod, rutas dinámicas y SSR, animaciones con View Transitions e integración de persistencia con AstroDB y Drizzle.

Qué vas a aprender

  1. 1Definir colecciones y esquemas en Astro usando Zod para content-first
  2. 2Integración y uso de AstroDB para persistencia local y remota
  3. 3Rutas dinámicas y uso de params/getStaticPaths para páginas por slug
  4. 4Renderizado SSR, adaptadores y output hybrid/prerender en Astro
  5. 5Crear APIs en pages/api para operaciones (votos) y comunicación cliente-servidor
  6. 6Definir tablas y seeds con Drizzle ORM para la base de datos de votos
  7. 7Implementar View Transitions API para transiciones entre rutas
  8. 8Estructura de componentes .astro: frontmatter (servidor) vs cliente
  9. 9Islands Architecture: integrar componentes React dentro de Astro
  10. 10Scripts en cliente, passing de variables del servidor y client:load

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]

Suscríbete

Desde 15€/mes