Creando una Aplicación de E-commerce con el JAMstack — II
Paso a paso en la construcción de un E-commerce usando JAMstack
Serie:
¿Hola chicos, qué hay? Como parte del equipo de desarrollo de Maruja, hemos estado trabajando muy duro para hacer realidad el proyecto que analizamos en el último artículo. Por cierto, si no has leído el primer artículo, te sugiero que comiences con ese porque hoy vamos a profundizar en la implementación.
Comenzaremos configurando el proyecto de Next.js y la integración básica con Sanity y MercadoPago. Entonces, sin más preámbulos, comencemos.
La Puesta en Marcha
Como mencioné en la primera parte, decidimos usar el siguiente stack:
- Next.js.
- TypeScript.
- Styled components.
- Jest+ Enzyme para testing.
- Sanity.io.
- Vercel/Now.sh.
Afortunadamente, la configuración inicial es bastante sencilla, creamos una aplicación de Next con el siguiente comando:
npm init next-app by-maruja-ecommerceEsto creará el siguiente proyecto de inicio, sin ninguna de las plantillas que trae Next.js. Después de eso, agregar TypeScript es pan comido, instalamos TypeScript y los tipos de Node.js:
npm install --save-dev typescript @types/react @types/nodeY creamos un archivo tsconfig.json vacío:
touch tsconfig.jsonDespués de eso, si iniciamos la aplicación, el tsconfig.json será completado por nosotros y todo estará listo para funcionar. Instalar styled-components también es bastante sencillo, solo un comando:
npm install styled-components babel-plugin-styled-components @types/styled-componentsCon Jest and Enzyme es donde las cosas se ponen un poco más complejas, por suerte siempre hay alguien que lo ha hecho antes que tú, y encontré este gran artículo de Halil Kayer que me funcionó como por arte de magia.
Ahora viene la parte divertida, las integraciones.
Sanity.io
Sanity tiene muy buena documentación e incluso algunos proyectos de ejemplo que usan Next.js. Me referiré a un artículo de la página de Sanity que fue muy útil para crear el servicio y el Sanity Studio, puedes leerlo aquí.
Después de crear el Studio y tener instalada la biblioteca de cliente de Sanity en nuestro proyecto, procedemos a crear nuestro primer esquema, el producto:
Como puedes ver aquí, definimos todas las propiedades que tendrá un producto en nuestro Sanity Studio. Nombre, precio, stock e imagen, incluso el icono del menú usa ‘react-icons’ que viene por defecto con Sanity. Nuestro Studio se ve así:
La interfaz de usuario es muy simple y fácil de usar: con nuestro esquema definido podemos crear múltiples productos y almacenarlos en Sanity; en los siguientes artículos recuperaremos la lista de productos para mostrar nuestro catálogo en nuestro sitio web.
Por ahora, solo crearemos una pequeña prueba en nuestra página principal:
En este ejemplo, obtenemos el primer producto (el único que tenemos actualmente) usando el lenguaje de consulta de Sanity (también puedes usar GraphQL), lo pasamos a nuestro componente de React que representa nuestra página principal y mostramos el nombre, el stock y precio dentro de un párrafo.
Después, cargamos la imagen. Para esto, Sanity tiene una gran biblioteca que hará el trabajo por nosotros. Primero la instalamos con el siguiente comando:
npm install @sanity/image-urlY después agregamos el siguiente código:
Después de tocar algunos estilos para que tenga el tamaño adecuado, nuestra página se ve así:
Muy bien, ¿verdad? el cliente de Sanity incluso tiene algunas funciones y propiedades que puedes usar para crear imágenes con el tamaño correcto sobre la marcha, probablemente tengamos que lidiar con eso en los siguientes artículos.
MercadoPago
Construir la integración con MercadoPago no fue tan fácil como esperaba, aunque la Referencia de API es bastante buena, carece de ejemplos y no hay ningún tipo de @types para obtener cierta compatibilidad con TypeScript en el SDK oficial de MercadoPago JavaScript.
Después de algunas horas tratando de encontrar un ejemplo, mirando otros proyectos de código abierto que usan el servicio y “logeando” muchas cosas, seguí adelante e hice una pequeña definición de tipos para cubrir los metodos que vamos a usar para generar el enlace de pago. Con este enlace vamos a redirigir al usuario a la plataforma de MercadoPago para que se pueda procesar el pago.
Después de definir estos tipos, seguimos adelante y creamos la ruta API Next.js que usaremos en nuestra aplicación para llamar a MercadoPago cuando se desee proceder con el pago. Definiremos un pequeño servicio que funcionará como una capa entre la biblioteca del cliente de MercadoPago y nuestro código:
Y lo llamamos desde nuestra ruta API:
Después de eso, simplemente agregamos un botón y un párrafo y hacemos una llamada a nuestra ruta API desde nuestra página principal. Nuestro código se ve así:
¿Y cuando hacemos click en el botón en la pantalla? Voilà:
Conclusión
En los siguientes artículos, crearemos componentes reales y comenzaremos a construir la interfaz de usuario para nuestro sitio web.
Esto fue mucho para asimilar, lo siento si fue una introducción dura, desafortunadamente, un artículo no es suficiente para guiarte en cada paso, como configurar ESLINT para TypeScript o agregar los estilos con styled-components. Si deseas ver un curso o un video tutorial donde veamos cada paso de la construcción de un proyecto, házmelo saber en los comentarios a continuación y considera subscribirte a mi newsletter; esa será la mejor manera de contactarte cuando eso suceda 😀
Si te gustó este artículo y cómo va la serie hasta ahora, compártelo.
Originally published at https://www.patferraggi.dev.
