Hoy vengo a presentar un software de comercio electrónico, tienda online o e-commerce escrito en Angular, con los estilos de Angular Material, y con una API escrita con JavaScript del lado del servidor usando Node con Express. Para la base de datos se ha usado MySQL.

El software es open source; puede ser descargado y modificado por cualquier persona. Entre sus características encontramos:

• Gestión de productos
• Fotos de productos (guardadas en el disco duro)
• Carrito de compras por cada usuario
• Registro de venta con dirección de envío
• Vista de tienda
• Detalle de producto

Quiero aclarar que no es un software listo para producción, y más bien es un proyecto escolar que puede servir ya sea como base para un proyecto completo de un e-commerce o para otro proyecto escolar.

Veamos ahora cómo es que está programado, en dónde se puede descargar. etcétera.

Detalles del software

Comenzamos viendo la gestión de productos con fotos. Para registrar un producto tenemos el siguiente formulario:

Después tenemos la lista de productos. Esta lista es para el administrador, pero los productos también aparecen así en la tienda.

Como lo dije, aparecen en la tienda para el cliente. Se muestra solo el título y precio, además de una foto:

Ahora, cuando se ven los detalles se muestran todas las imágenes:

Si se agrega al carrito, el producto aparecerá como ya agregado. Además, en la parte superior el carrito aparecerá con el total de productos y el costo total:

Se pueden agregar varios productos al carrito de compras. Como lo dije, se muestra una lista de los productos así como el precio y una opción para terminar la compra:

En caso de que el cliente quiera terminar la compra, se dirige al apartado para verificar todos los productos:

Cuando se continúa, se le pide al cliente los datos de envío:

Y al final se muestra un “Gracias por su compra”:

Ahora en las ventas se verán los datos de envío, etcétera:

También se puede ver el detalle de venta:

En resumen esos son los módulos del software. No hace falta mencionar lo que le falta porque lo sé bien, pero repito, puede servir como base para un proyecto más grande o para un proyecto escolar. De entrada se me ocurre que falta:

• Autenticación de usuarios
• Registro de clientes
• Pasarela de pago
• Existencia de productos
• Formas de rastrear el envío del producto por parte del cliente
• Reportes de ventas totales

Ahora veamos cómo es que está compuesto el software, en dónde se puede descargar, etcétera.

Lado del servidor: API con Node

Como lo dije, del lado del servidor se utiliza JavaScript con Node. Es una simple API creada con express, y la misma se encarga de gestionar todas las rutas para cada acción. Por poner un fragmento:

See the gist on github.

También es importante mencionar que las fotos de los productos son subidas gracias a formidable:

See the gist on github.

Se renombran a un nombre único usando uuid v4. Debido a que para el modo desarrollo se necesita habilitar CORS, la configuración es:

See the gist on github.

Tenemos algunas funciones que manejan el estado del carrito de compras, que no he movido a un módulo separado por cuestiones de tiempo:

See the gist on github.

Por cierto, el carrito es manejado a través de la sesión:

See the gist on github.

Y la conexión con la base de datos se hace en módulos separados.

Conexión con MySQL a través de modelos

He separado las rutas de los modelos. Cada modelo gestiona una entidad, por ejemplo, los productos. La mayoría ofrece un simple CRUD. Por ejemplo, el siguiente maneja productos:

See the gist on github.

En el caso de eliminarlos, también se elimina la foto del disco duro. Para ello primero se obtiene la lista de fotos, se recorre, elimina cada foto y finalmente se elimina el producto.

Si te fijas, se está importando a un archivo de conexión, el cual es el siguiente:

See the gist on github.

Mismo que a su vez lee variables del entorno, de ese modo no comprometes tus credenciales dentro del código.

Variables del entorno

Las configuraciones están dentro del archivo .env y en mi caso se ve así:

See the gist on github.

Lo que importa es la clave de la sesión; recomiendo generarla de manera aleatoria, si quieres puedes usar mi generador de claves hexadecimales escrito en Go.

Lado del cliente con Angular

Del lado del cliente tenemos una aplicación web con Angular. La misma separa los componentes y usa el enrutador para tener una SPA. Veamos por ejemplo el componente principal:

See the gist on github.

Por favor nota que estamos utilizando Angular Material.

En la línea 55 colocamos router-outlet; eso hará que ahí se inyecte el componente dependiendo de la navegación. Por cierto, el router se ve así:

See the gist on github.

Separación de componentes

He separado algunos componentes, por ejemplo la tarjeta de producto se ve así:

See the gist on github.

Y al momento de mostrarla en la tienda, se repite con un ngFor pasándole el producto:

See the gist on github.

Lo mismo pasa con este loading button:

See the gist on github.

Comunicación con servicio HTTP

Para comunicarse con el servidor se utiliza simplemente fetch. Por ejemplo, el servicio de productos se ve así:

See the gist on github.

Y el servicio HTTP es una envoltura:

See the gist on github.

De este modo se exponen los 4 métodos básicos (y también para enviar un formdata), incluyendo credenciales para mantener la sesión y comunicándose con JSON.

Comunicación entre componentes

La barra del carrito de compras y los otros componentes están totalmente aislados, por lo tanto debía haber una forma de implementar la comunicación entre componentes. Así que investigando encontré la forma de crear un servicio para compartir información:

See the gist on github.

En el carrito de compras (que vive en la app principal dentro de la barra) escuchamos el mensaje:

See the gist on github.

Ahora, para enviar el mensaje en otro componente, hacemos esto:

See the gist on github.

Así, cualquier componente puede decirle al carrito: Hey tú, actualízate.

Esquema de base de datos

Por poco lo olvido. La base de datos, o mejor dicho, las tablas, son las siguientes:

See the gist on github.

Código fuente y descargas

Vas a encontrar el código fuente en mi GitHub. Las instrucciones están en el README; básicamente se trata de una app escrita con Angular y Node, así que con contar con NPM y la CLI de Angular basta.

Aquí el enlace: software de comercio electrónico open source. Espero poder grabar un vídeo de su uso e instalación.

Demostración

Aquí he grabado un vídeo explicando algunas partes del código, así como demostrando la funcionalidad de esta tienda electrónica con node js y angular:

Conclusión y una pequeña historia

Recuerda que todo el código está en GitHub, aquí he omitido algunas partes ya que el post se haría muy largo en caso de explicar línea por línea.

Escribí la aplicación web en una semana. Me siento orgulloso pues me parece que esa semana ha sido una de las más pesadas que he tenido en mi vida (sin exagerar); justamente en esos días tenía varios trabajos pendientes y algunos exámenes por hacer (no míos) de otra zona horaria.

Si no crees que lo hice en una semana puedes explorar los commits del mismo. Espero algún día volver a este post y tener un recuerdo del esfuerzo que he realizado.

Las cosas que aprendí las fui documentando (el resto lo haré tan pronto tenga tiempo) y están dentro de las categorías Node y Angular.