Creación de Tienda Online con NextGIS y Shopify

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:006:41

Creación de Tienda Online con NextGIS y Shopify

Curso de Next.js 14

Clase 3 de 57

Clase 3 / 57

Recursos

¿Cuál es el stack tecnológico para crear la tienda con Next.js?

Para desarrollar una tienda en línea usando Next.js, haremos uso de un stack tecnológico bien seleccionado que incluye Shopify, Postman y Vercel. Este conjunto de herramientas nos proporcionará un entorno completo para manejar tanto el front-end como el back-end de manera eficiente.

¿Qué es Shopify y cómo se utiliza?

Shopify es una plataforma de e-commerce que facilitará la creación y administración de nuestra tienda en línea. Nos permite gestionar productos, clientes y registrar ventas desde una interfaz intuitiva. Además, proporciona dos tipos de documentación esenciales:

Administración: Ayuda a gestionar tu tienda, permitiéndote actualizar productos e interactuar con clientes.
Storefront API: Usa GraphQL para conectar nuestro ecommerce con clientes externos. Está sumamente documentado para facilitar su uso.

¿Cómo se utilizará Postman en este curso?

Postman es una herramienta indispensable para realizar peticiones a APIs, tanto en GraphQL como en REST, lo que la convierte en una opción ideal para explorar y verificar las APIs de Shopify.

Descarga y configuración: Puedes descargar Postman para Windows, Mac o Linux.
Importación de configuraciones: Proporcionaremos archivos JSON que contienen las configuraciones necesarias para las colecciones y entornos en Postman.

¿Cuál es la función de Vercel en nuestro proyecto?

Vercel es la plataforma que utilizaremos para desplegar nuestra aplicación. Creada por la misma compañía que desarrolló Next.js, ofrece un proceso de despliegue simplificado que soporta Edge Functions, entre otros. Con solo un clic podremos desplegar nuestras aplicaciones Next.js.

¿Cómo configurar y usar Postman?

Postman será fundamental para interactuar con las APIs de Shopify y ejecutar nuestras consultas.

¿Cómo importar colecciones y entornos?

Para trabajar eficientemente, es crucial que importes las colecciones y entornos en Postman. Estos archivos JSON estarán disponibles para su descarga en la sección de recursos.

Importar colecciones:
- Navega a "Settings" > "Data" y selecciona "Import Data File".
- Importa el archivo de colecciones JSON provisto.
Importar entornos:
- Navega a "Environment" en Postman.
- Importa el archivo de entorno, como "FutureWord", que contiene variables clave como el token de autenticación y el nombre de la tienda.

Configuración de peticiones GraphQL en Postman

Para realizar consultas GraphQL con Postman, sigue estos pasos:

Crear una nueva colección:
- Renombra la colección, por ejemplo, "FutureWord GraphQL".
Configurar una nueva petición:
- Usa Command-N o Control-N para crear una petición.
- Introduce el endpoint API de Shopify, por ejemplo, https://tu-shopify-hostname/api/2023-04/graphql.json.
Agregar headers necesarios:
- Incluye headers específicos de Shopify, especialmente el de autenticación, usando las variables de entorno configuradas.
Ejecutar queries:
- Redacta y ejecuta queries de GraphQL directamente desde Postman.

Estas configuraciones asegurarán una conexión eficaz con las APIs, permitiendo la exploración y manipulación de datos en Shopify.

¿Cómo opera el sistema de autenticación con Shopify?

El sistema de autenticación con Shopify es sencillo pero crucial para la ejecución de consultas. Aprende a gestionar tu Storefront Token para garantizar el acceso autorizado, y conoce cómo solucionar problemas comunes de autenticación durante la fase de testing, asegurando así que todas tus peticiones sean válidas y seguras.

Con este stack y herramientas bien configuradas, estaremos listos para crear y gestionar de forma exitosa nuestra tienda en línea. ¡Asegúrate de seguir cada paso y ver cómo nuestra tienda cobra vida!