Versión en EspañolES

Crear una base de conocimientos con Gatsby, Contentful y AWS

Please sign in to watch this workshop.

En este masterclass, veremos cómo crear una base de conocimientos utilizando Gatsby, un Framework generador de sitios estáticos que utiliza React y GraphQL, Contentful, un CMS sin cabeza para gestionar el contenido y desplegarlo en AWS S3.

This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Gatsby es un generador de sitios moderno construido sobre React. Se utiliza para construir sitios web que son eficientes en términos de velocidad y optimizados para SEO, generando sitios estáticos que pre-renderizan todas las páginas en el momento de la compilación.

Contentful es un CMS Headless que proporciona una API para integrar contenidos en cualquier plataforma digital. Ofrece una gran flexibilidad y es ideal para proyectos que requieren manejar el contenido de manera independiente del diseño del frontend.

Se puede implementar un proceso de CI/CD utilizando AWS Amplify para conectar el repositorio de código que contiene el proyecto Gatsby. AWS Amplify detecta cambios en el repositorio y despliega automáticamente nuevas versiones del sitio cuando se realizan actualizaciones.

Un webhook es una forma de permitir que las aplicaciones envíen información automatizada a otras aplicaciones en tiempo real. Se utiliza en proyectos de desarrollo web para desencadenar eventos o acciones automáticamente, como la reconstrucción de un sitio cuando se actualiza el contenido en un CMS como Contentful.

AWS ofrece una infraestructura robusta y escalable para alojar aplicaciones web, proporcionando servicios como AWS Amplify que facilitan la implementación, gestión y escalado de aplicaciones, además de integrarse fácilmente con otros servicios AWS para funciones adicionales.

Un generador de sitios estáticos es una herramienta que genera páginas HTML en el momento de la compilación, optimizando tiempos de carga y SEO. Ejemplos de estos generadores incluyen Gatsby, Jekyll y Hugo.

Abdelrhman Adel

152 min

04 Jul, 2022

Comments

Available in other languages:

Watch more workshops on topic

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

React Summit 2022

173 min

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Top Content

Workshop

Kellen Mace

En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.

next.js wordpress graphql

Construir con SvelteKit y GraphQL

GraphQL Galaxy 2021

140 min

Construir con SvelteKit y GraphQL

Top Content

Workshop

Scott Spence

¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas

graphql svelte

Modelado de Bases de Datos Relacionales para GraphQL

GraphQL Galaxy 2020

106 min

Modelado de Bases de Datos Relacionales para GraphQL

Top Content

Workshop

Adron Hall

En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1 a. Modelado de Datos de Bases de Datos Relacionales b. Comparando Bases de Datos Relacionales y NoSQL c. GraphQL con la Base de Datos en menteParte 2 - Hora 2 a. Diseño de Modelos de Datos Relacionales b. Relación, Construcción de Tablas Multijoin c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos a. Herramienta de modelado de datos. El formador utilizará dbdiagram b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos c. Hasura

database graphql

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

Workshop

2 authors

Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.

case study e-commerce shopify shopify with react

Construir y Desplegar un Backend Con Fastify & Platformatic

JSNation 2023

104 min

Construir y Desplegar un Backend Con Fastify & Platformatic

Top Content

WorkshopFree

Matteo Collina

Platformatic te permite desarrollar rápidamente GraphQL y REST APIs con un esfuerzo mínimo. La mejor parte es que también te permite desatar todo el potencial de Node.js y Fastify siempre que lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y plugins adicionales. En la masterclass, cubriremos tanto nuestros módulos de Open Source como nuestra oferta en la Nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).
En esta masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la Platformatic Cloud.

node.js cloud graphql fastify

Construyendo APIs GraphQL sobre Ethereum con The Graph

GraphQL Galaxy 2021

48 min

Construyendo APIs GraphQL sobre Ethereum con The Graph

Workshop

Nader Dabit

The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.

graphql ethereum api development

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

De GraphQL Zero a GraphQL Hero con RedwoodJS

GraphQL Galaxy 2021

32 min

De GraphQL Zero a GraphQL Hero con RedwoodJS

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

frameworks graphql redwoodjs builders and founders

Depuración de JS

React Summit 2023

24 min

Depuración de JS

Top Content

Mark Erikson

Replay.io

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

best practices case study javascript web development debug

Estado Local y Caché del Servidor: Encontrando un Equilibrio

Vue.js London Live 2021

24 min

Estado Local y Caché del Servidor: Encontrando un Equilibrio

Top Content

Natalia Tepluhina

GitLab

This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

graphql vue server cache

Un Marco para Gestionar la Deuda Técnica

TechLead Conference 2023

35 min

Un Marco para Gestionar la Deuda Técnica

Top Content

Alex Moldovan

CodeSandbox

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

case study team productivity developer challenges

Construyendo un Asistente AI Activado por Voz con Javascript

JSNation 2023

21 min

Construyendo un Asistente AI Activado por Voz con Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

case study artificial intelligence

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react query next.js case study react server components react 18