Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andresweitzel/appelectrothings_angular_springboot_mongodb

Aplicación Web ElectroThings con Angular, Highcharts, Bootstrap, Spring Boot, Spring MVC, , Spring Security, JWT, SpringMongoDB, Lombok, Log4J, Git, MongoDB. y Otras Tecnologías
https://github.com/andresweitzel/appelectrothings_angular_springboot_mongodb

angular bootstrap bootstrap4 css3 git highcharts html5 java javascript log4j lombok maven mongodb spring springboot springdatamongodb springmvc typescript vsc vscode

Last synced: about 2 months ago
JSON representation

Aplicación Web ElectroThings con Angular, Highcharts, Bootstrap, Spring Boot, Spring MVC, , Spring Security, JWT, SpringMongoDB, Lombok, Log4J, Git, MongoDB. y Otras Tecnologías

Host: GitHub
URL: https://github.com/andresweitzel/appelectrothings_angular_springboot_mongodb
Owner: andresWeitzel
License: gpl-3.0
Created: 2021-10-23T16:59:18.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-01-25T22:57:21.000Z (12 months ago)
Last Synced: 2024-01-25T23:53:56.458Z (12 months ago)
Topics: angular, bootstrap, bootstrap4, css3, git, highcharts, html5, java, javascript, log4j, lombok, maven, mongodb, spring, springboot, springdatamongodb, springmvc, typescript, vsc, vscode
Language: HTML
Homepage:
Size: 40.4 MB
Stars: 2
Watchers: 3
Forks: 2
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# AppElectroThings_Angular_SpringBoot_MongoDB.
Aplicación ElectroThings para la Gestión de Productos Electrónicos implementada con HTML5, CSS3, SCSS, Angular, Bootstrap, Highchart, Spring-Boot, Spring Security, Spring MVC, Microservicios, SpringFox, Swagger UI, Git, DBeaver, PgAdmin, PostgreSQL y Otras Tecnologías.
* [Repositorio ApiRest_ElectroThingsV1](https://github.com/andresWeitzel/ApiRest_ElectroThingsV1_SpringBoot_MongoDB)
* [Repositorio db_ElectroThings_MongoDB](https://github.com/andresWeitzel/db_ElectroThings_MongoDB)
* [PlayList del Proyecto](https://www.youtube.com/playlist?list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy)

## Índice 📜

Ver

### Sección 1) Descripción, Tecnologías y Dependencias

- [1.0) Descripción del Proyecto.](#10-descripción-)
- [1.1) Ejecución del Proyecto.](#11-ejecución-del-proyecto-)
- [1.2) Tecnologías.](#12-tecnologías-)

### Sección 2) Endpoints y Recursos

- [2.0) EndPoints.](#endpoints-)
- [2.1) Recursos y Servicios.](#recursos-y-servicios-)

### Sección 3) Prueba de Funcionalidad y Referencias

- [3.0) Prueba de Funcionalidad.](#30-prueba-de-funcionalidad-)
- [3.1) Referencias.](#31-referencias-)

## Sección 1) Descripción, Tecnologías y Dependencias

### 1.0) Descripción [🔝](#índice-)

Ver

* Esta aplicación ha sido desarrollada para la gestión de productos de electrónica general ( televisores, notebooks, accesorios, etc). También se ha pensado originalmente desarrollar una sección para la gestión de usuarios, pero esta funcionalidad se aplica desde el backend (Api), utilizando postman o swagger ui, al implementar un modelo de negocios únicamente para un MicroFrontEnd se deberá desarrollar otra app para la gestión de dichos usuarios.
* Como sistema de seguridad para manejo de recursos de la app se usa Spring Security y JWT. Las Operaciones Transaccionales fueron modificadas para que solamente los administradores del sistema tengan acceso, los usuarios convencionales solamente podrán visualizar los productos y filtrar búsquedas acerca de estos según el requerimiento deseado.
* Todos los formularios aplican validaciones de carácteres, longitudes, tamaños, valores numéricos, valores mal formados, email, contraseña, url de imágenes, etc.
* Se implementa Paginación Completa.
* Se aplican dos filtros de búsqueda, uno para productos de forma genérica y otro según el campo deseado, permitiendo coincidencias de carácteres y palabras.
* Para la experiencia de usuario se utiliza Popupts, Loaders, Angular Material, Etc.
* Es posible descargar el Listado de Productos Paginado en formato xlsx(excel), csv y pdf.
* Todas las Páginas de la Aplicación poseen modals de Ayuda.
* Entre Otros Recursos Disponibles.
* Aclaración : Este Microfrontend no es responsive. El enfoque es la funcionalidad de la aplicación, la maquetación es totalmente aplicable en relación al tiempo de disponibilidad que se emplee.
* [Repositorio ApiRest_ElectroThingsV1](https://github.com/andresWeitzel/ApiRest_ElectroThingsV1_SpringBoot_MongoDB)
* [Repositorio db_ElectroThings_MongoDB](https://github.com/andresWeitzel/db_ElectroThings_MongoDB)
* [PlayList del Proyecto](https://www.youtube.com/playlist?list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy)

### 1.1) Ejecución del Proyecto [🔝](#índice-)

Ver

* Crear un entorno de trabajo a través de algún IDE
* Clonar el Proyecto (`git clone https://github.com/andresWeitzel/AppElectroThings_Angular_SpringBoot_MongoDB`)
* Posicionarnos sobre el proyecto
* `cd proyecto`
* Dentro del directorio instalar todos los plugins implementados
* `npm i`
* Ejecutar la base de datos
* Ejecutar la api rest
* Ejecutar el proyecto
* `ng serve`

### 1.2) Tecnologías [🔝](#índice-)

Ver

| Tecnologías FRONTEND | Versión | Finalidad
| ------------- | ------------- | ------------- |
| [HTML](https://www.w3schools.com/html/) | 5.0 | Lenguaje de Hipertexto |
| [Css](https://www.w3schools.com/css/) | 3.0 | Lenguaje de hojas de estilo para presentación de documentos. |
| [Scss](https://sass-lang.com/) | 1.57 | Preprocesador de css. |
| [Angular](https://angular.io/) | 13.3.0 | FrameWork Web Desarrollo de Apps con TypeScript |
| [Angular CLI](https://docs.angular.lat/cli) | 13.3.0 | Herramienta de Angular para depurar, crear, publicar, etc Apps |
| [Angular Material](https://material.angular.io/) | 13.3.9 | UI librería de componentes |
| [ng-angular-popup](https://www.npmjs.com/package/ng-angular-popup) | 0.1.2 | Mensajes emergentes personalizados |
| [ngx-ui-loader](https://www.npmjs.com/package/ngx-ui-loader) | 13.0.0 | Animaciones de carga |
| [Highchart](https://www.highcharts.com/) | 13.3.9 | Librería para la generación de gráficos |
| [Bootstrap](https://getbootstrap.com/) | 5.1 | FrameWork Web Diseño y Desarrollo de Apps |
| [Visual Studio Code](https://code.visualstudio.com/download) | 1.51.1 | Entorno de Desarrollo |

| Tecnologías BACKEND | Versión | Finalidad
| ------------- | ------------- | ------------- |
| [Java]( https://www.oracle.com/java/technologies/javase/jdk12-archive-downloads.html) | 12.0.2 | JDK |
| [Spring Tool Suite 4](https://spring.io/blog/2021/06/21/spring-tools-4-11-0-released) | 4.9.0 | IDE |
| [Spring Boot](https://spring.io/) | 2.6.4 | Framework |
| [Spring Boot Data JPA](https://spring.io/projects/spring-data-jpa) | 2.6.3 | Mapeo de objetos y persistencia en la db |
| [Spring Security](https://spring.io/projects/spring-security) | 2.6.7 | Servicios de Seguridad |
| [JSON Web Token](https://jwt.io/) | 0.9.1 | Creación de tokens de acceso |
| [Maven](https://maven.apache.org/) | 4.0.0 | Gestor de Proyectos |
| [Postman](https://www.postman.com/) | 9.4.1 | Test de Apis |
| [Lombok](https://projectlombok.org/) | 1.18.22 | Automatización de Código |
| [Open-Api](https://www.openapis.org/) | 1.6.4 | Documentación de la Api |
| [UI Swagger](https://swagger.io/tools/swagger-ui/) | 1.6.4 | Visualización y Gestión de la Api |
| [GNU bash / Terminal](https://www.gnu.org/software/bash/) | 4.4.23 | Bash / Terminal para el manejo e implementación de Git integrado al Spring Tool Suite |
| [Git](https://git-scm.com/) | 2.29.1 | Control de Versiones |

| Tecnologías DATABASE | Versión | Finalidad
| ------------- | ------------- | ------------- |
| [MongoDB](https://www.mongodb.com/) | 5.0 | Base de Datos |
| [MongoDB Compass](https://www.mongodb.com/products/compass) | 1.31.2 | Gestor para MongoDB |

## Sección 2) EndPoints y Recursos

### 2.0) EndPoints [🔝](#índice-)

Ver

#### Autenticación
* http://localhost:8098/api/v1/auth/login (Autenticación)
* http://localhost:8098/api/v1/auth/signin (Registro)

#### Gestión de Productos
* http://localhost:8098/api/v1/productos/ (Agregar)
* http://localhost:8098/api/v1/productos/{id} (Editar)
* http://localhost:8098/api/v1/productos/{id} (Eliminar)
* http://localhost:8098/api/v1/productos/listado (Listado Paginado)
* http://localhost:8098/api/v1/productos/last-producto (Último Producto)
* http://localhost:8098/api/v1/productos/listado-filter/{filtro} (Listado paginado con filtro)
* http://localhost:8098/api/v1/productos/codigo/{codigo} (Listado paginado según su código)
* http://localhost:8098/api/v1/productos/nombre/{nombre} (Listado paginado según su nombre)
* http://localhost:8098/api/v1/productos/descripcion/{descripcion} (Listado paginado según su descripción)
* http://localhost:8098/api/v1/productos/categoria/{categoria} (Listado paginado según su categoria)
* Revisar Swagger para visualizar el resto de los endpoints

#### Administración de Usuarios
* http://localhost:8098/api/v1/admin/usuarios/ (Agregar)
* http://localhost:8098/api/v1/admin/usuarios/{id} (Editar)
* http://localhost:8098/api/v1/admin/usuarios/{id} (Eliminar)
* http://localhost:8098/api/v1/admin/usuarios/listado (Listado)

### 2.1) Recursos y Servicios [🔝](#índice-)

Ver

### Login

![Index app](./doc/auth/login.png)

### Signin

![Index app](./doc/auth/signin.png)

### Inicio

![Index app](./doc/inicio/vista.png)

### Listado de Productos Electrónicos Tabla

![Index app](./doc/listado/listado01.png)

![Index app](./doc/listado/listado02.png)

### Listado de Productos Electrónicos Cards

![Index app](./doc/listado/listadoCards.png)

### Gráficos de Barra para Stock de Productos por Categoría.

![Index app](./doc/graficas/productosCateg.png)

### Novedades de Productos

![Index app](./doc/novedades/novedades.png)

### Acerca de Productos

![Index app](./doc/acercaProductos/acercaDe.png)

#### Documentación Gráfica Acotada por razones de simplificación de documentación. Visualizar los videos desde la PlayList acerca de las Pruebas de Funcionalidad de la aplicación.

## Sección 3) Prueba de Funcionalidad y Referencias

### 3.0) Prueba de Funcionalidad [🔝](#índice-)

Ver

### Comprobación login de usuarios [(Ver)](https://www.youtube.com/watch?v=dqFHov36c0M&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=1)
[![Alt text](./doc/youtube/login.png)](https://www.youtube.com/watch?v=dqFHov36c0M&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=1)

### Comprobación signin de usuarios [(Ver)](https://www.youtube.com/watch?v=FpU96PbdFC0&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=2)
[![Alt text](./doc/youtube/signin.png)](https://www.youtube.com/watch?v=FpU96PbdFC0&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=2)

### Comprobación token y refresh token [(Ver)](https://www.youtube.com/watch?v=CZdsom5hdfg&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=3)
[![Alt text](./doc/youtube/token.png)](https://www.youtube.com/watch?v=CZdsom5hdfg&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=3)

### Comprobación listado de productos [(Ver)](https://www.youtube.com/watch?v=fScBOXLMPzg&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=4)
[![Alt text](./doc/youtube/listado.png)](https://www.youtube.com/watch?v=fScBOXLMPzg&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=4)

### Comprobación búsqueda de productos con filtro [(Ver)](https://www.youtube.com/watch?v=P26hk1GgsqU&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=5)
[![Alt text](./doc/youtube/filtro.png)](https://www.youtube.com/watch?v=P26hk1GgsqU&list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy&index=5)

### `Se resume documentación gráfica. Visualizar Playlist del proyecto para más funcionalidades`

### 3.1) Referencias [🔝](#índice-)

Ver

### Documentación No Oficial Recomendada

* Api Rest Spring Boot Mongodb : https://www.youtube.com/watch?v=OtBukxJy4kg
* Api Rest Guía Spring Boot Mongodb Codigo :https://github.com/heroe-geek/rest-api-springboot-mvc/blob/master/src/main/java/com/hg/crud/controllers/ProductController.java
* Tutorial MongoDB con Spring Boot : https://www.mongodb.com/compatibility/spring-boot
* Tutorial Spring Data MongoDB (01) : https://stackabuse.com/spring-data-mongodb-guide-to-the-aggregation-annotation/
* Tutorial Spring Data MongoDB(02) : https://blog.marcnuri.com/spring-data-mongodb-implementacion-de-un-repositorio-a-medida
* Tutorial Uso de Queys en MongoDB : https://www.baeldung.com/queries-in-spring-data-mongodb
* Código Ejemplo genérico : https://github.com/heroe-geek/rest-api-springboot-mvc/blob/master/src/main/java/com/hg/crud/models/ProductDTO.java
* Config Mongo y Spring Boot : https://hevodata.com/learn/spring-boot-mongodb-config/

### Documentación Oficial/No Oficial Librerías Frontend

* Angular Popup : https://www.npmjs.com/package/ng-angular-popup

* Angular Material : https://material.angular.io/guide/getting-started

* Angular Bootstrap Validation
* Instalación : https://mdbootstrap.com/docs/b5/angular/getting-started/installation/
* Implementación/ejemplos : https://mdbootstrap.com/docs/b5/angular/getting-started/installation/
* Validation Forms(tanto bootstrap 4 como 5) : https://mdbootstrap.com/docs/angular/forms/validation/

* ngx ui loader
* Instalación : https://www.npmjs.com/package/ngx-ui-loader
* Implementación : https://tdev.app/ngx-ui-loader

* Scrollspy
* Implementación : https://mdbootstrap.com/docs/angular/navigation/scrollspy/#example-4

* Hide Navbar
* Implementación : https://www.w3schools.com/HOWTO/howto_js_navbar_hide_scroll.asp

* Excel Sheets
* Instalación y Doc : https://www.npmjs.com/package/xlsx
* Ejemplo Base : https://www.delftstack.com/howto/angular/angular-export-to-excel/

* JSPDF
* Ejemplo Base : https://www.positronx.io/angular-pdf-tutorial-export-pdf-in-angular-with-jspdf/
* Otro ej. : https://howtojs.io/how-to-generate-pdf-file-in-angular-13-application-in-multiple-ways/

* Gráficos con Highchart
* Npm, config, detalles, etc : https://hackthestuff.com/article/how-to-use-highcharts-in-angular-12
* Doc Oficial : https://api.highcharts.com/highcharts/
* Doc Oficial Instalación : https://www.highcharts.com/docs/getting-started/install-from-npm

* Tipos de Gráficos Highchart
* Nuevo sitio Tipos de Graf : https://www.highcharts.com/blog/chartchooser/
* Ejemplo Base 2d : https://stackblitz.com/edit/highcharts-angular-basic-line-ucnkbj?file=src%2Fapp%2Fapp.component.ts
* Modificación Gráfico 2d a 3d : https://www.eduforbetterment.com/3d-pie-and-donut-chart-in-angular-using-highchart/

* Cifrado Token (CriptoJs) y Secure Local Storage
* Guía de Uso : https://rupesh94.medium.com/how-to-encrypt-localstorage-data-in-angular-270ebcbc1435
* Instalación Secure Local Storage : https://www.npmjs.com/package/secure-web-storage?activeTab=readme
* Instalacion CryptoJs : https://www.npmjs.com/package/crypto-js

### `Siguiente sección en proceso de actualización`

Ver

## ``Documentación y Guía del Proyecto ``
#### (Esta Documentación que Desarrollé es para la Creación, Configuración, Posibles Errores, Despliegue, etc de la Aplicación con Angular, Firebase y Bootstrap. Recomiendo Leerla y Realizar todo paso a paso como se indica en la misma).

## Indice

#### Sección 1) Configurar el Ambiente y el Espacio de Trabajo Local

- [Paso 1) Instalación de Angular](#paso-1-instalación-de-angular)

- [Paso 2) Instalación de la CLI de Angular](#paso-2-instalación-de-la-cli-de-angular)

- [Paso 3) Creación de una Aplicación Web con Angular.](#paso-3-creación-de-una-aplicación-web-con-angular)

- [Paso 4) Deployar la Aplicación con Angular.](#paso-4-deployar_la-aplicación-con-angular)

#### Sección 2) Manejo e Implementación de Bootstrap

- [Paso 5) Implementar Bootstrap con Angular](#paso-5-implmentar-bootstrap-con-angular)

#### Sección 3) Módulos y Componentes de Angular

- [Paso 6) Generación y Configuración de Componentes y Módulos con Angular](#paso-6-generación-y-configuración-de-componentes-y-módulos-con-angular)

- [Paso 7) Imágenes de la Aplicación](#paso-7-imágenes-de-la-aplicación)

- [Paso 8) Maquetado del Componente con css](#paso-8-maquetado-del-componente-con-css)

#### Sección 4) Creación y Configuración de Páginas Web y Servicios

- [Paso 9) Generación de Módulos y Componentes para otras páginas](#paso-9-generación-de-módulos-y-componentes-para-otras-páginas)

- [Paso 10) Ruteo de las Páginas Web](#paso-10-ruteo-de-las-páginas-web)

- [Paso 11) Creación de Servicios](#paso-11-creación-de-servicios)

#### Sección 5) Desarrollo de las Páginas Web

- [Paso 12) Página Listado de Componentes de Electrónica](#paso-12-página-listado-de-componentes-de-electrónica)

- [Paso 13) Página Detalles de Componentes de Electrónica](#paso-13-página-detalles-de-componentes-de-electrónica)

- [Paso 14) Página Editar Componentes de Electrónica](#paso-14-página-editar-componentes-de-electrónica)

- [Paso 15) Página Agregar Componentes de Electrónica](#paso-15-página-agregar-componentes-de-electrónica)

- [Paso 16) Página de Inicio](#paso-16-página-de-inicio)

## Sección 1) Configurar el Ambiente y el Espacio de Trabajo Local

### Paso 1) Instalación de Angular
#### (Primeramente deberás tener instalado VS Code, configurado a gusto y saber/manejar de Forma Básica una CLI(Terminal-Interfaz de Línea de Comandos o como se le quiera decir. Te recomiendo que consideres la CLI Bash/Shell de Linux)).

* Para usar angular se necesita instalar Node.js.
* --> Descarga de Node.js (https://nodejs.org/en/)
* Abrír el Archivo Descargado e Instalar(Siguiente y Siguiente...).
* Angular Depende del 'npm package manager' de Node.js, cuando se descarga este, viene todo incluido.
* Comprobamos la Instalación de Angular desde una CLI.
* --> Abrir el cmd en Windows, bash-shell en Linux, o terminal en VS Code
* --> escribir `npm -v`.
* --> Si no surgió ningún error te debería aparecer la Versión de Node.js, ya está instalado Node.js

### Paso 2) Instalación de la CLI de Angular
#### (La CLI de Angular nos ayudará a Crear Proyectos, generar Código, depurar, etc).

* Teniendo Instalado el Sistema de Gestión de Angular en Nuestra Computadora, trabajaremos todo desde la CLI
* Abrir el cmd en Windows, bash-shell en Linux, o terminal en VS Code y escribir `npm install -g @angular/cli`.
* Si se instalo correctamente la cli de Angular, escribiendo `ng help` se debería poder visualizar la lista de comandos y la versión.(Paciencia porque las ejecuciones de angular son lerdas).

### Paso 3) Creación de una Aplicación Web con Angular.
#### (Este es uno de los pasos más tediosos ya que para la creación de una App en Angular viene intrínsico el proceso de construcción de Paquetes, creación de Módulos, Deploy de la App en el Servidor de Angular, etc).

* Primeramente deberás ubicarte en la carpeta que deseas construir la app con Angular.
* --> En mi caso crearé la app en mi ruta ANGULAR/Proyectos2021
* --> Abrimos una Nueva Terminal en VS Code y
* --> Escribimos `ng new 'nombreDelProyectoSinComillasTodoSeguido' ` en mi caso `ng new 'crudAngularFirebaseBootstrap' `
* --> Seguidamente nos pregunta si queremos agregar una routing, escribimos yes o y
* --> Ahora cual Lenguaje de Maquetación queremos, elegimos CSS.
* --> Esperamos a que se cree el Proyecto(este paso lleva tiempo).

### Paso 4) Deployar la Aplicación con Angular
#### (La CLI de Angular incluye un Servidor Local )

* Nos posicionamos sobre la carpeta creada `cd crudAngularFirebaseBootstrap`
* --> Escribimos por consola `ng serve --open`
* --> Si nos preguntan algo escribimos yes o y
* --> El último paso suele tardar un poco
* --> Si se abre el navegador con la página de inicio de Angular está todo Correcto.

## Sección 2) Manejo e Implementación de Bootstrap

### Paso 5) Implementar Bootstrap con Angular
#### ( Bootstrap es un Framework Web que nos permite realizar aplicaciones de forma más rápidas y con estructuras modernas. Para este caso no vamos a instalar los paquetes de bootstrap, sino incluir CDN's, osea linkear servidores de boostrap para trabajar con sus librerías )

#### 5.1) Incluir el CSS desde el CDN de Bootstrap en el index.html
* Nos dirijimos al `index.html`
* Incluimos la hoja de estilo dentro del head
* Código en la Página oficial https://getbootstrap.com/docs/5.1/getting-started/introduction/ o acá..

```html

```

* Guardamos cambios (Ctrl+s)

#### 5.2) Incluir JS desde el CDN de Bootstrap en el index.html
* Notar que para Javascript se utiliza junto con la librería Popper
* Bootstrap nos proporciona un CDN con todo incluido
* Incluimos el CDN dentro del body
* Código en la Página Oficial https://getbootstrap.com/docs/5.1/getting-started/introduction/ o acá..

```html

```
* Guardamos cambios (Ctrl+s)
* Si visualizas nuevamente la aplicación se podrá notar la diferencia de tamaños y colores, tenemos implementado Bootstrap

## Sección 3) Módulos y Componentes de Angular

### Paso 6) Generación y Configuración de Componentes y Módulos con Angular
#### (Todos los componentes y Módulos de Angular están dentro de sus respectivos directorios o carpetas(en este caso el directorio es app, que a su vez es el módulo padre), vamos a realizar lo mismo con Boostrap , crearemos los componentes y módulos y trabajaremos de forma modularizada, respetando el Patrón de Angular)

#### 6.1) Creación del componente y módulo Navbar
* Abrimos una nueva terminal
* --> View -> Terminal
* Nos posicionamos sobre el proyecto
* --> Escribimos `cd crud AngularFirebaseBootstrap`
* Creamos el Nuevo Componente modularizado
* --> Escribimos `ng generate component components/navbar --module app` o `ng g c components/navbar --module app`
* Si desplegas componentes, se debería haber generado el componente, junto con sus archivos
* Ahora creamos el módulo interno de configuración del navbar
* --> Escribimos `ng generate module components/navbar --module app` o `ng g m components/navbar --module app`

#### 6.2) Configuración del componente html Navbar
* Vamos a incluir el código html de ejemplo de la página de bootstrap en el `navbar.component.html`(app/navbar/navbar.component.html)
* Voy a implementar un Navbar de tipo Offcanvas que se despliegua al costado de la pantalla.
* Código https://getbootstrap.com/docs/5.1/components/navbar/

```html

```

* Seguidamente vamos a comprobar si el componente creado se ha importado dentro de `app.module.ts`
* Nos dirigimos al archivo (app/app.module.ts)
* Deberías tener el siguiente código indicando que tenemos el componente importado correctamente

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
declarations: [
AppComponent,
NavbarComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NavbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

```

* Seguidamente vamos a incluir el código html del componente navbar dentro del componente app, especificamente dentro de `app.component.html`
* Nos dirijimos a app.component.html(app/app.component.html) y escribimos

```html

```

* Guardamos (Ctrl + s )
* Levantamos el Servidor `ng server` desde terminal
* Visualizamos el contenido.

#### 6.3) Creación del componente y módulo Carousel
* Abrimos una nueva terminal
* Nos posicionamos sobre el proyecto
* Creamos el Nuevo Componente modularizado
* --> Escribimos `ng generate component components/carousel --module app` o `ng g c components/carousel --module app`
* Si desplegas componentes, se debería haber generado el componente, junto con sus archivos
* Ahora creamos el módulo interno de configuración del carousel
* --> Escribimos `ng generate module components/carousel --module app` o `ng g m components/carousel --module app`

#### 6.4) Configuración del componente html Carousel
* Vamos a incluir el código html de ejemplo de la página de bootstrap en el `carousel.component.html`(app/carousel/carousel.component.html)
* Voy a implementar un Carousel de tipo Dark variant
* Voy a incluir algunas rutas a imagenes de internet y cambiar algunos colores para que se visualize correctamente el carousel
* Código https://getbootstrap.com/docs/5.1/components/carousel/

```html

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

```

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { NavbarModule } from './components/navbar/navbar.module';
import { CarouselComponent } from './components/carousel/carousel.component';
import { CarouselModule } from './components/carousel/carousel.module';

@NgModule({
declarations: [
AppComponent,
NavbarComponent,
CarouselComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NavbarModule,
CarouselModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

```

* Seguidamente vamos a incluir el código html del componente carousel dentro del componente app, especificamente dentro de `app.component.html`
* Nos dirijimos a app.component.html(app/app.component.html) y escribimos

```html

```

* Guardamos (Ctrl + s )
* Levantamos el Servidor `ng server` desde terminal
* Visualizamos el contenido.

### Paso 7) Imágenes de la Aplicación
#### (Por convención las imágenes locales, iconos web, etc, las guardamos dentro de la carpeta assets).

#### 7.1) Descarga de Imágenes e Íconos
* Descargar imágenes e iconos a gusto, en mi caso de electrónica
* Ted recomiendo la página https://www.flaticon.es/iconos-gratis/electronica
* Creamos un directorio raiz dentro de `assets` llamado images(src/assets/images)
* Copiamos todas las imágenes descargadas al directorio images
* Incluimos el icono deseado como representación de la tienda y nombre dentro de `navbar.component.html`
* Porción de Código

```html

ElectroThings

```

### 7.2) Cambio de Título e Ícono de la app
* Nos dirigimos al index.html y en title cambiamos el titulo de la app
* Para cambiar el icono de la app, linkear la imagen descargada desde el ``
* Porción de Código

```html

ElectroThings

```

### Paso 8) Maquetado del Componente Navbar con css
#### (Mas allá que implementemos un esplendido framework como bootstrap, no podemos dejar de lado css, ya que nos ayuda a ahorrar lineas spaghettis en el html).

* Dentro del navbar.component.css vamos a implementar el maquetado para este componente.
* Por ahora establecemos el color de texto en blanco y cambiamos el light por el dark dentro del navbar
* Código

```html

header {
color: white;
}

img {
padding-right: 2px;
}

div.collapse {
margin-left: 15px;
padding: 5px;
}

```

## Sección 4) Creación-Configuración de Páginas Web y Servicios

### Paso 9) Generación de Módulos y Componentes para otras páginas
#### (Nuestra Aplicación tendrá diversas páginas en las cuáles crearemos para el listado de los componentes electrónicos, agregar, modificar, etc).

#### 9.1) Página `listado-componentes`
* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/listado-componentes).
* El comando completo sería `ng g m pages/electronica/listado-componentes --module app --route listado-componentes`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)

#### 9.2) Página `detalles-componentes`
* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/detalles-componentes).
* El comando completo sería `ng g m pages/electronica/detalles-componentes --module app --route detalles-componentes`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)

#### 9.3) Página `agregar-componentes`
* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/agregar-componentes).
* El comando completo sería `ng g m pages/electronica/agregar-componentes --module app --route agregar-componentes`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)

#### 9.4) Página `editar-componentes`
* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/editar-componentes).
* El comando completo sería `ng g m pages/electronica/editar-componentes --module app --route editar-componentes`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)

#### 9.5) Página para `Ayuda`
* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/utilidades/ayuda).
* El comando completo sería `ng g m pages/utilidades/ayuda --module app --route ayuda`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)

### Paso 10) Ruteo de las Páginas Web
#### (Declarar las rutas con directivas en angular se consideran buenas prácticas, ya que podremos controlar los errores que pudiesen surgir).

* Primeramente hay que incluir la Directiva `` dentro de `app.component.html`, por qué sino no se establece el ruteo de forma dinámica, osea no se van a mostrar las páginas creadas.

```html

```

* Ahora nos dirigimos al `navbar.component.html` y allí modificamos los nav-item agregando las directivas de enlaces `[routerLink] = "['/nombrePagina']"` indicando las páginas de redireccionamiento
* Vamos a modificar nuestro Offcanvas navbar a gusto, cambiamos los fondos, agregamos iconos, cambiamos los nombres, etc
* Código

```html

ElectroThings

```

### Paso 11) Creación de Servicios
#### (Un servicio Angular es un objeto sin estado y proporciona algunas funciones muy útiles. Estas funciones se pueden invocar desde cualquier componente de Angular, como Controladores, Directivas, etc. Esto ayuda a dividir la aplicación web en unidades lógicas pequeñas y diferentes que se pueden reutilizar.).

* Vamos a generar el servicio dentro de la carpeta de electronica y el mismo se llamara electronica.service (pages/electronica/electronica.service).
* El comando completo sería `ng g s pages/electronica/electronica`
* Abris una nueva terminal y escribir el comando anterior (en mi caso)
* Se tendria que haber generado el archivo `electronica.service.ts`

## Sección 5) Desarrollo de las Páginas Web

### Paso 12) Página Listado de Componentes de Electrónica
#### (Como se explico anteriormente esta página contendra la lista de componentes de eletrónica)

#### 12.1) Creación de una Tabla
* Copiamos la estructura base de la tabla de bootstrap https://getbootstrap.com/docs/5.1/content/tables/ y la pegamos en el `listado-componentes.component.html` dentro del modulo `listado-componentes`.
* Voy a cambiar la variante de la tabla a tipo hover, también los nombres, columnas, agregar botones, colores, etc.
* También voy a agregar iconos de bootstrap `(https://icons.getbootstrap.com/)` para la visualizacion, la edición y la eliminación de los productos del listado

#### 12.2) Uso de la Directiva `*ngFor`
* Vamos a replicar el listado de productos 4 veces, usando la directiva de angular `*ngFor`, esta directiva nos permite generar muchos elementos HTML repetidos a partir de un recorrido de un arreglo de datos.

```TypeScript

1
Módulo WIFI MCU-ESP32
MCU-65788
1600
```

#### 12.3) Creación de Funciones CRUD (editar, eliminar y ver )
* Necesitamos funciones que nos permitan eliminar, mostrar y modificar los PRODUCTOS que se muestran en el listado, estas funciones las vamos a usar con eventos posteriormente.
* Nos dirigimos a `listado-componentes.component.ts`
* Vamos a pasarle la clase Route en el constructor, esta clase es la encargada de gestionar las rutas de nuestras paginas web creadas. Importar dichos módulos
* Vamos a utilizar la propiedad llamada `state` dentro y fuera de los métodos que desarrollemos, esta propiedad nos permite trabajar con el objeto completo, dicha propiedad deberá ser implementada en cada una de las siguientes funciones.
* Para usar dicha propiedad debemos declarar un objeto de tipo NavigationExtras importando la interfaz correspondiente y pasandole un estado
* Código de la Propiedad..
```TypeScript
navigationExtras : NavigationExtras = {

state : {
value:null
};
```
* `ATENTI`, si se tiene una configuración estricta de TypeScript surgirá un error en este paso, ya que se está declarando la propiedad como nula, hay que dirigirnos al archivo `tsconfig.json` y dentro del `compilerOptions` cambiar el paramnetro `"strict":true` a `"strict":false`
* Por Último vamos a crear las funciones. Las mismas se llamaran `editarProducto`, `eliminarProducto` y `mostrarProducto`.

#### 12.3.1) Función `eliminarProducto`
* Este Método va a recibir un producto en su argumento
* Luego, por el momento , en el cuerpo del método vamos a indicar con un alert que simplemente nos diga que el producto ha sido borrado..
* Código Snippet..

```TypeScript
// Eliminar Productos
eliminarProducto(producto : any): void{
alert('El Producto ha sido Eliminado');
}
```

#### 12.3.2) Función `editarProducto`
* Este Método va a recibir un producto en su argumento
* En el cuerpo del método vamos a pasarle la ruta definida cuando creamos los componentes de las paginas creadas anteriormente que va a mostrar en detalle dicho producto. Además vamos a usar la propiedad creada `navigationExtras` haciendo referencia al valor del `state` para trabajar con el objeto en sí. En el segundo parametro del `router.navigate` vamos a pasarle además el estado de la propiedad creada
* Código Snippet..

```TypeScript
// Editar Productos
editarProducto(producto : any): void{
this.navigationExtras.state.value = producto;
this.router.navigate(['editar-componentes'] , this.navigationExtras);
}
```

#### 12.3.3) Función `detallesProducto`
* Este Método va a recibir un producto en su argumento
* En el cuerpo del método vamos a pasarle la ruta definida cuando creamos los componentes de las paginas creadas anteriormente que va a mostrar en detalle dicho producto. Además vamos a usar la propiedad creada `navigationExtras` haciendo referencia al valor del `state` para trabajar con el objeto en sí. En el segundo parametro del `router.navigate` vamos a pasarle además el estado de la propiedad creada
* Código Snippet..

```TypeScript
// Mostrar Productos
detallesProducto(producto : any): void{
this.navigationExtras.state.value = producto;
this.router.navigate(['detalles-componentes'] , this.navigationExtras);
}
```

* Código Completo para `listado-componentes.component.ts`..

```TypeScript
import { Component, OnInit } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Component({
selector: 'app-listado-componentes',
templateUrl: './listado-componentes.component.html',
styleUrls: ['./listado-componentes.component.css']
})
export class ListadoComponentesComponent implements OnInit {

navigationExtras : NavigationExtras = {

state : {
value :null
}
};

constructor(private router: Router) { }

ngOnInit(): void {

}

// Métodos CRUD para los Componentes Electrónicos

// Mostrar Productos
detallesProducto(producto : any): void{
this.navigationExtras.state.value = producto;
this.router.navigate(['detalles-componentes'] , this.navigationExtras);
}

// Editar Productos
editarProducto(producto : any): void{
this.navigationExtras.state.value = producto;
this.router.navigate(['editar-componentes'] , this.navigationExtras);
}

// Eliminar Productos
eliminarProducto(producto : any): void{
alert('El Producto ha sido Eliminado');
}
}

```

#### 12.4) Uso de Enlaces a Eventos `(click)`
* El enlace de Eventos escucha los eventos de click en el botón y llama al método indicado cada vez que se produce un click
* Para poder implementar este evento se deben haber creado previamente las funciones correspondientes para que realizen las acciones de tipo CRUD básicas (editar, eliminar, agregar elementos), como se indica paso a paso en los items anteriores.
* Estas funciones se van a agregar dentro de cada boton correspondiente para que realice la acción deseada.

* Código..

```html

ID
Nombre
Código
Precio
Opciones

1
Módulo WIFI MCU-ESP32
MCU-65788
1600

Regresar

Actualizar

```

#### 12.5) Capturando el objeto Producto en la Página `editar-componente`

* Una vez definidos los métodos CRUD vamos a capturar los objetos que se pasen al `state` cuando se haga click en el icono de editar.
* Vamos a trabajar las Navegaciones y estados en `editar-componentes.component.ts`
* Nos dirigimos a `editar-componentes.component.ts`
* Dentro de la clase EditarComponentesComponent, fuera del constructor declaramos una variable llmada `valorProducto` del objeto como nulo. Dentro del constructor indicamos que la variable-propiedad `valorProducto` tendrá la propiedad de tomar el estado actual del objeto. Osea que nos muestre el valor de ese objeto .
* Una vez allí, dentro del constructor, inyectamos el `router` definiendolo en su argumento, dentro de este creamos una variable-propiedad (`const navigacionActual`) que nos traiga ese objeto con el método `getCurrentNavidation()` a través de la ruta pasada.

* Los signos de interrogación se indican ya que no es necesario pasarle sus valores.
* Código Completo..

```TypeScript

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-editar-componentes',
templateUrl: './editar-componentes.component.html',
styleUrls: ['./editar-componentes.component.css']
})
export class EditarComponentesComponent implements OnInit {

valorProducto = null

constructor(private router : Router) {

const navigacionActual = this.router.getCurrentNavigation();

this.valorProducto = navigacionActual?.extras?.state;
}

ngOnInit(): void {
}

}

```
* Por Último testeamos el valor del objeto que se obtiene al hacer click sobre el boton de editar.
* Nos dirigimos a `editar-componentes.component.html` e indicamos con interpolación el valor del producto, trabajamos con json.
* Código Snippet..
```html

editar-componentes works!

```

#### 12.6) Capturando el objeto Producto en la Página `detalles-componente`

* Una vez definidos los métodos CRUD vamos a capturar los objetos que se pasen al `state` cuando se haga click en el icono de detalles.
* Vamos a trabajar las Navegaciones y estados en `detalles-componentes.component.ts`
* Nos dirigimos a `detalles-componentes.component.ts`
* Dentro de la clase DetallesComponentesComponent, fuera del constructor declaramos una variable llamada `valorProducto` del objeto como nulo. Dentro del constructor indicamos que la variable-propiedad `valorProducto` tendrá la propiedad de tomar el estado actual del objeto. Osea que nos muestre el valor de ese objeto .
* Una vez allí, dentro del constructor, inyectamos el `router` definiendolo en el argumento del constructor, dentro de este creamos una variable-propiedad (`const navigacionActual`) que nos traiga ese objeto con el método `getCurrentNavidation()` a través de la ruta pasada.
* Los signos de interrogación se indican ya que no es necesario pasarle sus valores.
* Vamos a crear una funcion para que nos regrese al listado de componentes cuando estemos en el detalle de un solo componente, la funcion se va a llamar `regresarListadoComponentes()`
* Vamos a reutilizar las funciones `editarProducto()` y `eliminarProducto()` que declaramos en el `listado-componentes.component.ts`, para las operaciones de este producto. La diferencia acá es que no necesitamos pasarle el producto clickeado en el argumento de la funcion ya que lo recuperamos con el `getCurrentNavigation` , por ende en los estados de la funcion le pasamos la variable declarada `valorProducto`
* Importante declarar el navigationExtras e importar su módulo
* Código Completo..

```TypeScript
import { Component, OnInit } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Component({
selector: 'app-detalles-componentes',
templateUrl: './detalles-componentes.component.html',
styleUrls: ['./detalles-componentes.component.css']
})
export class DetallesComponentesComponent implements OnInit {

navigationExtras : NavigationExtras = {

state : {
value :null
}
};

valorProducto = null;

constructor(private router: Router) {

const navegacionActual = this.router.getCurrentNavigation();

this.valorProducto = navegacionActual?.extras?.state;

}

ngOnInit(): void {
}

//Regresar Listado Productos
regresarListadoProductos():void{
this.router.navigate(['listado-componentes']);
}

// Editar Productos
editarProducto(): void{
this.navigationExtras.state.value = this.valorProducto;
this.router.navigate(['editar-componentes'] , this.navigationExtras);
}

// Eliminar Productos
eliminarProducto(): void{
alert('El Producto ha sido Eliminado');
}

}

```

* Por Último testeamos el valor del objeto que se obtiene al hacer click sobre el boton de detalles.
* Nos dirigimos a `detalles-componentes.component.html` e indicamos con interpolación el valor del producto, trabajamos con json.
* Código Snippet..
```html

detalles-componentes works!

```

### Paso 13) Página Detalles Componentes de Electrónica
#### (Esta Página contendrá los Detalles Específicos de cada Producto o Componente de Electrónica)

#### 13.1) Maquetación Página Detalles de Componentes
* En esta página se alojará el detalle de cada componente una vez que el usuario haga click sobre el icono de detalles.
* La Maquetación de la Página es `detalles-componentes.component.html`
* Voy a crear un Card para el Producto con su foto, detalle, etc y otro Card para el detalle del producto con sus botones y descripcion. La idea es que ambas cards sean responsives.
* Una vez que hemos declarado las funciones en el `detalles-componentes.component.ts`, vamos a pasarles los eventos a los botones y cuando se haga click se dispare las funciones realizadas anteriormente.
* En el boton de regresar declaramos la funcion click para que se dispare dicho evento y nos muestre el alert..

```html

```

* En el boton de eliminar declaramos la funcion click para que se dispare dicho evento y nos muestre el alert..

```html

```
* En el boton de editar declaramos la funcion click para que se dispare dicho evento

```html

```

* Código completo de `detalles-componentes.component.html`..

```html

Módulo Wifi Mcu Esp32

Incluyen puerto de conexión microUSB para alimentación y conector JST para alimentación de la placa. Y se pueden programar desde el IDE de Arduino..

Datasheet
Proyectos
Más Info

DETALLES PRODUCTO

ID

1

Nombre

Módulo Wifi Mcu Esp32

Código

MCU-65788

Precio

1600

```

### Paso 14) Página Editar Componentes de Electrónica
#### (Esta Página contendrá el formulario para editar el componente seleccionado de la lista de componentes de Electrónica)

#### 14.1) Maquetación Página Editar Componentes de Electrónica

### Paso 15) Página Agregar Componentes de Electrónica
#### (Esta Página contendrá el formulario para agregar componentes de Electrónica)

#### 15.1) Maquetación Página Editar Componentes de Electrónica

### Paso 16) Página de Inicio
#### (Esta Página será la página de Inicio de la Aplicación)

#### 16.1) Maquetación Página de Inicio

## Subir el proyecto al repositorio con git desde el bash de visual studio Code

#### 1)Creamos un nuevo repositorio en GitHub

#### 2)Inicializamos nuestro repositorio local .git
* git init

#### 3)Agregamos lo desarrollado a nuestro repo local
* git add *

#### 4)Agregamos lo que tenemos en nuestro repo local al área de Trabajo.
* git commit -m "agrega un comentario entre comillas"

### 5)Le indicamos a git donde se va a almacenar nuestro proyecto(fijate en tu repositorio de github cual es el enlace de tu proyecto(esta en code)).
* git remote add origin https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap

### 6)Subimos nuestro proyecto.
* git push -u origin master

## Actualización del repositorio del proyecto con git desde el bash de visual studio code

### 1)Visualizamos las modificaciones realizadas en local
* git status

### 2)Agregamos lo modificado al area de trabajo
* git add *

### 3)Confirmamos las modificaciones realizadas
* git commit -m "Tu commit entre comillas"

### 4)Sincronizamos y traemos todos los cambios del repositorio remoto a la rama en la que estemos trabajando actualmente.
##### Desconozco porqué tengo que ejecutar este comando, supongo que será porque no estoy trabajando con branchs en mi proyecto, el main por defecto de gitHub ahora es mi master(Yo realicé esa modificación para mejor visualización)).
* git pull https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap

### 5)Enviamos todos los cambios al repo en github
* git push https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap

## Deploy de la app desde el bash de visual studio code

### 1) Instalar el cli global
* npm i netlify-cli
* netlify login
* netlify status
* netlify --version

### 2) Build
* ng build --prod

### 3) Deploy
* netlify deploy --prod
#### IMPORTANTE: Luego de ingresar este comando, asegurarse de colocar correctamente el `Publish directory` , sino no se va a deployar correctamente, en general es `dist/'nombre de tu proyecto sin comillas' `