Creando una Aplicación de E-commerce con el JAMstack — I
El análisis
Serie:
- Creando una Aplicación de E-commerce con el JAMstack — I: El Análisis
- Creando una Aplicación de E-commerce con el JAMstack — II: Paso a paso en la construcción de un E-commerce usando JAMstack
- Creando una Aplicación de E-commerce con el JAMstack — III: El poder de Sanity
Hola chicos, si he estado un poco ausente últimamente, es porque he estado trabajando en la configuración de un proyecto nuevo: un sitio web de comercio electrónico personalizado.
Introducción
Mi hermana tiene un negocio local en Argentina llamado By Maruja que lleva el nombre de mi abuela. Vende accesorios para mujeres como aretes, collares y cosas por el estilo.
De momento, tiene una tienda de Tienda Nube, que es un proveedor parecido a Shopify y derivados. Le permite crear su propia tienda con una plantilla predefinida que permite un poco de personalización ligera. Puede agregar sus productos y tenerlo todo configurado sin necesidad de contratar a un diseñador, un desarrollador o pagar por separado los costes del servidor.
Desafortunadamente, se llega a un punto en el que un sitio como este no cubre sus necesidades o simplemente agregan demasiado coste mensual para que sea viable para las pequeñas empresas en condiciones económicas inciertas. Dado que mi esposa es diseñadora gráfica (ella ya diseñó la marca) y yo soy desarrollador de software, decidimos echarle una mano y crear una solución que satisfaga las necesidades de su negocio mientras que nosotros tengamos un proyecto agradable para mostrar en nuestros portfolios.
Las necesidades
- Estilo y experiencia a medida.
- Facilidad a la hora de agregar nuevos productos y cambiar el texto y las imágenes del sitio.
- MercadoPago como la principal plataforma de pago (¿Qué demonios es MercadoPago?)
- Menos de 5 dólares al mes de mantenimiento (espera, ¿Qué?) (Sin contar el coste del dominio.)
Ahora, te estarás preguntando qué demonios está pasando, ¿No? Quédate conmigo, voy a hacer las presentaciones adecuadas.
Los dos primeros son bastante normales, ¿Verdad? Ella quiere tener un sitio web/tienda que coincida con la marca de la empresa, que pueda personalizarse fácilmente cuando haya nuevos productos en existencia o cuando entren en juego las promociones.
MercadoPago
Los lectores de EEUU/UE pueden estar preguntándose qué demonios es MercadoPago. En América Latina, no tenemos ningún sitio web como Amazon al que podamos recurrir cuando queremos comprar cosas en línea.
La mayoría de las veces los vendedores no envían a América Latina, o si lo hacen, aplican tarifas altísimas. Incluso si pasas por alto todos estos problemas, algunos países como Argentina, tienen restricciones muy fuertes sobre los productos importados, debes pagar un impuesto de aduanas de hasta el 50% del precio del producto y, a veces, los productos se retienen en la aduana y pierdes tu dinero.
No se pierde toda esperanza, hay otra opción, una compañía llamada MercadoLibre. Básicamente tienen el monopolio de las compras en línea en muchos países latinoamericanos. Tienen oficinas en 18 países y emplean a unas 8000 personas.
Esta compañía tiene su propia plataforma de pago llamada MercadoPago que admite la mayoría de las tarjetas de crédito, transferencias directas e incluso pagos en cuotas mensuales. Al menos en Argentina, la mayoría de las personas usan este servicio para comprar en línea, en su sitio web u otras plataformas (también debido al hecho de que el gobierno cobra una tarifa del 30% sobre los pagos realizados con sistemas de pago extranjeros).
Por menos de 5 dólares al mes
Puedes estar pensando, este tipo se volvió loco, finalmente sucedió. Escúchame, para una pequeña empresa que está comenzando, los costes fijos pueden ser mortales, especialmente en un país que tuvo una inflación del 54% en el último año. El coste actual es simplemente demasiado teniendo en cuenta el hecho de que las posibilidades que ofrecen estos sitios son limitadas.
El análisis
Comencé reduciendo las opciones en función de las limitaciones que tiene el proyecto:
MercadoPago como plataforma de pago.
- Shopify.
- Wordpress + Woocommerce.
- Sitio web personalizado con integración a la API de MercadoPago.
Por debajo de 5 dólares al mes de mantenimiento.
- Woocommerce (Tal vez).
- Sitio web personalizado con integración a la API de MercadoPago.
Estilo y experiencia a medida.
- Wordpress + Woocommerce (tengo que aprender WordPress y el stack).
- Sitio web personalizado con integración a la API de MercadoPago.
Facilidad de agregar nuevos productos y cambiar el texto y las imágenes del sitio.
- Wordpress + Woocommerce.
- Otras soluciones de comercio electrónico/CMS.
- Sitio de administración personalizado.
Después de mirar varias posibilidades, me pareció que mis dos opciones principales eran o utilizar Wordpress + Woocommerce o crear algo personalizado.
Mi principal problema con Wordpress fue que no tenía ni idea de cómo funcionaba. Me iba a llevar mucho tiempo aprender cómo construir un sitio web completamente funcional y desplegarlo de forma segura en un servidor, tampoco estaba seguro de poder mantener el coste por debajo de los 5 dólares.
Decidí montar un sitio web personalizado. Sin embargo, no todo podía ser personalizado, todavía quiero evitar tener que lidiar con la autenticación de administrador, tener un sitio de administración personalizado para mantener o tener un servidor con una base de datos para mantener.
El tech stack
En el último año, he estado construyendo mi propio sitio web/blog con Gatsby y desplegando en Netlify, así que aprendí a amar el poder del JAMstack. Pensé que esto podría encajar bien con mi idea, así que comencé a evaluar opciones que cumplirían los requisitos mencionados anteriormente.
Sitio web
- Gatsby.
- Next.js.
Capacidades de comercio electrónico / CMS
- Sanity.io (generosa cuota gratuita).
- DatoCMS (generosa cuota gratuita).
- Prismic (generosa cuota gratuita).
API para la integración.
- Funciones serverless de Next.js (generosa cuota gratuita).
- Funciones de Netlify (generosa cuota gratuita).
Hosting.
- Netlify (mayormente gratis).
- Vercel/Now.sh (mayormente gratis).
No importa el camino que tome, podré obtener un sitio web súper elegante y rápido, con capacidades de administración, implementado en un alojamiento de calidad con prácticamente 0 costos.
Al final, fueron las diferencias entre Gatsby y Next.js las que definieron la decisión. Gatsby es un generador de sitios estáticos, lo que significa que el sitio se construye cuando se envía un commit al repositorio y luego se sirve como contenido estático cada vez que alguien llama a nuestra URL. Esto es excelente para los costes y el rendimiento del servidor, pero se vuelve complicado cuando hay información que puede cambiar a menudo, en nuestro caso, ese cambio es el stock de nuestros productos.
Cada vez que se realiza una compra, el stock se actualiza en nuestro CMS y se debe activar una compilación en el sitio web de Gatsby para mostrar el stock correcto. Next.js, por otro lado, es una navaja suiza, tiene generación de sitios estáticos, pero también tiene renderización del lado del servidor e incluso puede funcionar como una aplicación normal de React. Esto significa que podemos adaptar las páginas a nuestras necesidades específicas y solo usar recursos del servidor cuando sea necesario.
Aunque Gatsby tiene algunas ventajas bastante buenas, como complementos para la carga de imágenes de manera performance y la integración con Sanity, decidí que Next.js era el más adecuado para lo que queríamos construir.
El tech stack completo en el momento de escribir es:
- Next.js.
- TypeScript.
- Styled components.
- Jest+ Enzyme para el testing.
- Sanity.io.
- Vercel/Now.sh.
Y me decanté por la siguiente arquitectura:
Cuando un usuario accede al sitio web, los productos se renderizarán en el servidor desde Sanity y se cargarán en el sitio web.
Cuando un usuario quiere comprar algo, una función serverless se pondrá en contacto con la API de MercadoPago y generará el enlace apropiado para pagar en su plataforma.
Una vez completado el pago, el hook de la API de MercadoPago notificará a otra función serverless que actualizará el stock en Sanity.
El equipo
He estado haciendo sesiones de programación a pares semanalmente con un amigo que durante los últimos 6 meses ha estado tratando de cambiar su carrera profesional de la docencia al desarrollo de software. Es un tipo increíblemente apasionado y tiene un futuro brillante por delante, pero hemos estado luchando por encontrar ejemplos reales para trabajar.
Por parte de mi esposa, durante los últimos meses, ha estado ayudando a una amiga común, principalmente mejorando su CV como diseñadora y echando un ojo a sus proyectos independientes.
Me sentí muy aliviado cuando nos ofrecieron echarnos una mano en este proyecto, ya que tenía dudas de que pudiéramos llevarlo a cabo por nosotros mismos en un tiempo razonable. Entonces nuestro equipo es:
- Yo, desarrollador de software.
- Manuel Aceituno, desarrollador de software.
- Sofia Toso, diseñadora visual /UX.
- Thanh-Hông LÊ (Camille) diseñadora de UX.
Próximos pasos
En las próximas semanas, haremos un buen progreso en diseño e implementación. Escribiré una serie de artículos que explicarán cómo creamos la estructura del proyecto, cómo nos integramos con Sanity y MercadoPago, cargamos datos reales en nuestro sitio web, creando el carrito y el pago, y finalmente deployando.
Si te gusta a dónde va esto, házmelo saber a continuación en los comentarios. Si tienes alguna sugerencia para el proyecto, soy todo oídos, hágamelo saber a continuación. Como siempre, si te gustó este artículo, comparte y subscribite a mi newsletter 😃.
Originally published at https://www.patferraggi.dev.
