Pequeño e-commerce en Angular, Node y MySQL (tienda online)

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.

(más…)

Angular Router: navegar de manera programada

En este post te mostraré cómo navegar a otra ruta en una SPA de Angular usando TypeScript. Es decir, navegar en el click de un botón o en determinada acción, y no a través de un enlace.

Lo único que tenemos que hacer es importar al router, inyectarlo en el constructor y después invocar a navigateByUrl (igualmente el router tiene más métodos).

(más…)

Menú de navegación con Angular Material

Menú de navegación con Angular Material

Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.

Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:

  • Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
  • Mat Sidenav Container: el contenedor de lo que veremos a continuación
  • Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
  • Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección

Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.

Si quieres ver el ejemplo terminado haz click aquí.

(más…)