En la primera parte vimos cómo crear los proyectos FrontEnd y BackEnd de comparabien.com.pe. Ahora vamos a configurar la arquitectura base en ambos proyectos.
Código Fuente
El código fuente de este artículo lo encontrarán en https://github.com/joedayz/concentrador
Proyecto FrontEnd
0. En el Package.json se declaran las librerías a utilizar en el proyecto.
En este proyecto se usará PrimeNg que esta disponible de forma gratuita.
SweetAlert2 también usaremos y es totalmente gratuito.
1. Las imágenes, fonts las colocaremos en la carpeta assets:
2. Al ser Angular un SPA (Single Page Application) sólo tiene un index.html
La navegación se da gracias al módulo Router que tiene Angular.
3. El archivo app-routing.module.ts es el que revela que navegación tendrá el sitio web:
4. El app.module.ts revela los componentes, módulos utilizados de la aplicación.
5. El app.component.css establece los estilos principales para la aplicación.
6. En esta segunda parte, veremos como mostrar el home. En el routing hemos podido identificar que la vista views/home/home.component.ts es la que se va a invocar.
La estructura para el proyecto se hará de esta manera:
El proyecto home tendrá su archivo typescript, su archivo html y su archivo de estilos:
El código typescript al final se compila a JavaScript nativo para su ejecución en múltiples navegadores, pero, originalmente parece un lenguaje clásico como C#, Java, Python, etc:
El home va a mostrar el layout principal y las dos opciones disponibles: Depósitos a Plazos y Prestamos Personales. En el TypeScript podemos ver que se tiene una clase Opcion y que es cargada con la llamada al servicio del BackEnd que veremos más adelante.
El home.component.html revela como se recorren las opciones disponibles y se muestran en el template.
Este componente usará también su propio estilo en home.component.css cómo se muestra a continuación:
7. El BackEnd debe mostrar la data de esta tabla en SqlServer:
Mas adelante veremos el contenido de esta tabla.
Proyecto BackEnd
1. La estructura del archivo la dividiremos en Controllers, DataAccess, Dtos, Interfaces, Models, Utils, cómo se muestra a continuación:
2. En NetCore es super simple configurar la BD, para eso existe el archivo appsettings.json:
3. Nuestro Módelo ira acompañado de un ConcentradorDBContext.cs que nos servirá luego para tener configurado la BD al 100%.
Resultado de esta parte 2
El resultado final debe ser:
Enjoy!
Joe
