Consumo de APIs con Shopify y React Server Components

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:21

Consumo de APIs con Shopify y React Server Components

Curso de Next.js 14

Clase 20 de 57

Clase 20 / 57

Recursos

¿Cómo configurar la API de Shopify para una aplicación personalizada?

Cuando se trata de consumir una API, el proceso puede parecer inicialmente complicado, pero vamos a desglosarlo para que puedas dominarlo con facilidad. En esta oportunidad, nos centraremos en cómo realizar esta configuración en Shopify, un líder reconocido en el comercio electrónico. Primero, deberemos configurar la API de Shopify y crear un entorno que permita la interacción entre nuestra aplicación y Shopify.

Importar productos en Shopify

El primer paso es importar productos en tu tienda. Esto se hace accediendo a la sección de productos dentro del administrador de Shopify y utilizando un archivo CSV que puedes cargar. Luego de obtener una vista previa de los productos, clicas en "importar productos". Esto puede tardar unos minutos, pero una vez completado, tus productos deberían estar registrados satisfactoriamente.

Crear una aplicación personalizada

La finalidad de crear una aplicación personalizada en Shopify es para poder consumir la API y así obtener los datos de los productos que has importado. Para ello:

Dirígete a "Canales de venta" y selecciona "Configuración de aplicaciones y canales de venta".
A continuación, entra en "Desarrollar aplicaciones" y permite el desarrollo de aplicaciones personalizadas.
Introduce un nombre para la aplicación, en este caso, "Future World Yon API", y créala.

Configuración de permisos y credenciales de la API

Después de crear la aplicación:

Accede a "Credenciales de la API". Obtendrás una clave de API y una clave secreta, fundamentales para la autenticación.
Configura los permisos: puedes activar solo los que necesitas, como write and read products para manejar productos.
Guarda los cambios y regresa a "Tokens de acceso" para instalar la aplicación, obteniendo así el token de acceso, el cual debe ser almacenado de forma segura, ya que se revela solo una vez.

Uso de la documentación de Shopify para obtener productos

La documentación de Shopify explica cómo puedes obtener productos usando el hostname de tu aplicación y un header con el token de acceso. Con estos datos, estarás listo para realizar peticiones a la API.

¿Cómo hacer peticiones a la API desde una función asíncrona en Next.js?

Una vez configurada tu aplicación de Shopify, necesitas integrar la obtención de datos a través de peticiones HTTP asíncronas. Aquí es donde entran en juego las ventajas de Next.js y sus React Server Components.

Crear y ejecutar una función asíncrona

Dentro de tu aplicación, crearás una función asíncrona para obtener los productos:

const products = async () => {
  const response = await fetch(`${process.env.SHOPIFY_HOSTNAME}/admin/api/2023/products.json`, {
    headers: {
      "x-Shopify-Access-Token": process.env.API_KEY || ''
    }
  });

  const data = await response.json();
  return data;
};

Define el hostname de tu tienda y usa el header requerido con el token de acceso.
Captura la respuesta y transfórmala en un objeto JSON, el cual retornas para su uso en la aplicación.

Utilizar valores predeterminados y manejo de errores

Asegúrate de que tus variables de entorno estén configuradas correctamente y utiliza un valor predeterminado para prevenir fallos en la ejecución. Esto mejora la robustez de la función y la manejo de errores.

Desplegar y verificar los datos

Una vez desarrollada la función asíncrona, ejecuta tu aplicación en el entorno de desarrollo de Next.js para verificar que las peticiones y los datos se procesan correctamente. Puedes usar console.log para observar la naturaleza de las respuestas en tiempo real.

¿Qué debes recordar sobre la sincronización en Next.js?

El uso de funciones asíncronas en componentes de React no es estándar. Sin embargo, Next.js al utilizar React Server Components, ofrece capacidades únicas que permiten la obtención de datos directamente desde el servidor en estos componentes.

En aplicaciones tradicionales de React, las peticiones asíncronas suelen gestionarse en el cliente usando patrones como useEffect o herramientas como React Query.
El enfoque de Next.js ofrece una solución eficiente para las peticiones en el servidor, facilitando el desarrollo de aplicaciones robustas.

Este meticuloso proceso de configuración y consumo de la API de Shopify se convierte en una habilidad valiosa y esencial para todo desarrollador interesado en el comercio electrónico. ¡Sigue aprendiendo y explorando las maravillas del desarrollo web!

Angel Gustavo Travieso Castro

Hace 2 años

Dejo por acá la interfaz para mapear la respuesta del endpoint de productosexport interface Products { products*: Product[];} export interface Product { id: number*; title*: string*; body_html*: string*; vendor*: Vendor*; product_type*: string*; created_at*: Date*; handle*: string*; updated_at*: Date*; published_at*: Date*; template_suffix*: null*; published_scope*: PublishedScope*; tags*: string*; status*: Status*; admin_graphql_api_id*: string*; variants*: Variant[]; options: Option[]; images: Image[]; image: Image*;} export interface Image { id*: number*; alt*: null*; position*: number*; product_id*: number*; created_at*: Date*; updated_at*: Date*; admin_graphql_api_id*: string*; width*: number*; height*: number*; src*: string*; variant_ids*: any[];} export interface Option { id: number*; product_id*: number*; name*: Name*; position*: number*; values*: Option1[];} export enum Name { Title = "Title",} export enum Option1 { DefaultTitle = "Default Title",} export enum PublishedScope { Global = "global",} export enum Status { Active = "active",} export interface Variant { id: number*; product_id*: number*; title*: Option1*; price*: string*; sku*: null*; position*: number*; inventory_policy*: InventoryPolicy*; compare_at_price*: null | string*; fulfillment_service*: FulfillmentService*; inventory_management*: null*; option1*: Option1*; option2*: null*; option3*: null*; created_at*: Date*; updated_at*: Date*; taxable*: boolean*; barcode*: null*; grams*: number*; weight*: number*; weight_unit*: WeightUnit*; inventory_item_id*: number*; inventory_quantity*: number*; old_inventory_quantity*: number*; requires_shipping*: boolean*; admin_graphql_api_id*: string*; image_id*: null*;} export enum FulfillmentService { Manual = "manual",} export enum InventoryPolicy { Deny = "deny",} export enum WeightUnit { Kg = "kg",} export enum Vendor { FutureWorld = "Future World",}

export interface Products {
  products: Product[];
}

export interface Product {
  id: number;
  title: string;
  body_html: string;
  vendor: Vendor;
  product_type: string;
  created_at: Date;
  handle: string;
  updated_at: Date;
  published_at: Date;
  template_suffix: null;
  published_scope: PublishedScope;
  tags: string;
  status: Status;
  admin_graphql_api_id: string;
  variants: Variant[];
  options: Option[];
  images: Image[];
  image: Image;
}

export interface Image {
  id: number;
  alt: null;
  position: number;
  product_id: number;
  created_at: Date;
  updated_at: Date;
  admin_graphql_api_id: string;
  width: number;
  height: number;
  src: string;
  variant_ids: any[];
}

export interface Option {
  id: number;
  product_id: number;
  name: Name;
  position: number;
  values: Option1[];
}

export enum Name {
  Title = "Title",
}

export enum Option1 {
  DefaultTitle = "Default Title",
}

export enum PublishedScope {
  Global = "global",
}

export enum Status {
  Active = "active",
}

export interface Variant {
  id: number;
  product_id: number;
  title: Option1;
  price: string;
  sku: null;
  position: number;
  inventory_policy: InventoryPolicy;
  compare_at_price: null | string;
  fulfillment_service: FulfillmentService;
  inventory_management: null;
  option1: Option1;
  option2: null;
  option3: null;
  created_at: Date;
  updated_at: Date;
  taxable: boolean;
  barcode: null;
  grams: number;
  weight: number;
  weight_unit: WeightUnit;
  inventory_item_id: number;
  inventory_quantity: number;
  old_inventory_quantity: number;
  requires_shipping: boolean;
  admin_graphql_api_id: string;
  image_id: null;
}

export enum FulfillmentService {
  Manual = "manual",
}

export enum InventoryPolicy {
  Deny = "deny",
}

export enum WeightUnit {
  Kg = "kg",
}

export enum Vendor {
  FutureWorld = "Future World",
}

```La función para hacer la petición **HTTP** quedaría de la siguiente manera:

```js
const getProducts = async (): Promise<Product[]> => {
  const response: Products = await fetch(
    `${process.env.SHOPIFY_HOSTNAME}/admin/api/2023-10/products.json`,
    {
      headers: {
        "X-Shopify-Access-Token": process.env.SHOPIFY_API_KEY!,
      },
    }
  ).then((resp) => resp.json());

  return response.products;
};
```const getProducts = async *(): Promise\<Product\[]>* => {  const response*: Products* = await fetch(    `${process.env.SHOPIFY\_HOSTNAME}/admin/api/2023-10/products.json`,    {      headers: {        "X-Shopify-Access-Token": process.env.SHOPIFY\_API\_KEY!,      },    }  ).then(*(resp)* => resp.json());
  return response.products;};



Se debe configurar los remote Image patterns en el archivo next.config.mjs:const nextConfig = {  sassOptions: {    includePaths: \[path.join(\_\_dirname, 'src/sass')],    prependData: `@import "main.sass"`,  },  images: {    remotePatterns: \[      {        protocol: 'https',        hostname: ' cdn.shopify.com',        pathname: '/s/files/1/0888/5816/5540/files/\*',    },    ]  }};
```js
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/sass')],
    prependData: `@import "main.sass"`,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: ' cdn.shopify.com',
        pathname: '/s/files/1/0888/5816/5540/files/*',
    },
    ]
  }
};

Comentarios (26)26 comentarios

Cristian Esquivel

Hace 3 años

Welinton Elvis Suarez Galvis

Maria Alejandra Sanchez Tejeda

Juan David Vanegas Roldán

Lucia Aldana Castillo

Javier Damiani

Adrián García Saaib

Carmen Deni Martinez Gomez

Alejandro Salinas Ramírez

Sergio Camilo Garzón Pérez

Jesús Mur Fontanals

Edwin Cabezas

diego matera

Hace un año

Ariel Del Grande

Cristian Javier Martinez Barcinilla

Emilio Nicolás Mendoza Patti

Abraham Gonzalez

Ikal Esteban Fernández Galván

Abel da Cunha

Manuel Denis Rodriguez

Dany Ruddy Huayhua Huayhua

Federico Chafes

Platzi

Jesus Heriberto Lara Juarez

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Consumo de APIs con Shopify y React Server Components