Comparabien.com.pe con Angular y NetCore - Parte 2

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

Read More

Comparabien.com.pe con Angular y NetCore - Parte 1

 

En un post anterior comente que tenía la intención de mostrarles cómo clonar una página como comparabien.com.pe con Angular y NetCore. En dicho post encontrarán los detalles del software que necesitan instalar para poder correr la demo en su máquina.

Aquí tiene otros posts interesantes que recomiendo revisar:

• Instalando Sql Server vía Docker
• Instalando Net y Rider
• Instalando NodeJS, en donde veremos cómo tener todo listo para trabajar con Angular.

Código Fuente

El código fuente de este artículo lo encontrarán en https://github.com/joedayz/concentrador

Estructura de Proyectos

FrontEnd Angular

La creación de cada proyecto es simple, para el FrontEnd Angular se ha utilizado Angular CLI y para el BackEnd, la plantilla que tiene Rider para Web API.

ng new ConcentradorWeb

cd ConcentradorWeb

ng serve

NOTA:  Si tuvieras algún problema de versionamiento, o necesidad de upgrade, lee bien las instrucciones porque a veces ahí se necesita aplicar un --force.

El resultado es mostrado a continuación. WebStorm detecta que es un proyecto angular y te muestra que ya esta listo para ejecutar.

Con este simple paso ya estamos listos para trabajar. El resultado se ve de esta forma.

BackEnd NetCore

Ahora es el momento de crear nuestro proyecto Web API.

1. Abrimos el Rider y hacemos clic en New Solution:

2. Escogemos la plantilla Web API en la carpeta que deseemos y listo.

3. La estructura inicial es la siguiente y ya esta lista para ejecutar:

Probemos la aplicación:

El resultado es el siguiente:

Espero que puedas seguir esta parte 1 y estar listo para la segunda parte.

Enjoy!

Joe

Read More

Fin de la Demo E-commerce con Angular y Net Core

 

Estimados, si quieren acceder a todos los vídeos de la demo de E-commerce con Angular y Net Core. Esta esta compuesta de 14 vídeos y están disponibles en nuestro canal en este link.

Ha sido de mucho aprendizaje seguirla paso a paso, siempre uno aprende nuevas cosas. Lo de Subjects me encantó.

Si tienes alguna consulta o duda, dejalá debajo del vídeo en nuestro canal o unete a nuestro Discord: https://discord.gg/dFcFTPbVkV

Enjoy!

Joe

Read More

Instalando Node.js

 Hoy para desarrollo frontend es importante tener instalado Node.js. Yo sugiero hacerlo desde la página oficial.

Angular

Si vas a trabajar con proyectos Angular te recomiendo instalar: 

npm install -g @angular/cli 

Neon-cli

Si vas a usar Rust para BackEnd, te conviene agregar https://neon-bindings.com/

npm install -g neon-cli

Enjoy!

Joe

Read More

Instalando Rust

 Yo tengo una mac book pro con Mac Big Sur. En mi caso tuve que dar primero permiso a mi usuario al archivo .zshenv:

$ sudo chown josediaz .zshenv

Luego de eso aplique el comando para instalar rust:

$ curl -sf -L https://static.rust-lang.org/rustup.sh | sh

1) Proceed with installation (default)

2) Customize installation

3) Cancel installation

>1.  (Yo escogí esta opción)

En esta imagen puede ver el resultado:

Finalmente, verificamos la instalación con:

$ rustc --version

Enjoy!

Joe

Read More

Instalando .NET y Rider en tu maquina

 

Necesitamos instalar .NET que hoy es cross-platform, open source y gratuito. Se puede instalar para Windows, macOS, y Linux.

Instalando NET 5.0

Hoy esta vigente la versión 5.0, la cual usaremos en nuestra demo.

Probamos la instalación ejecutando dotnet --info:

Instalar Entity Framework

Sigue los comandos de instalación de https://docs.microsoft.com/en-us/ef/core/cli/dotnet, cómo:

dotnet tool install --global dotnet-ef

Verifica la instalación con dotnet ef:

Rider

Tú puedes trabajar con Visual Studio Code o Visual Studio Community, yo me inclino 100% con Rider, el cual es un IDE super ágil y sencillo de usar.

Con este IDE podremos crear nuestro BackEnd sin problemas.  Puedes usar la plantilla que más te guste, el lenguaje C# o F#,  el tipo de autenticación o Docker support. Lo que quieras.

Enjoy!

Joe

Read More

Instalando SQL Server vía Docker

 

Docker for Desktop

Instalar Docker For Desktop en Mac OSX es simple. En Windows tienes que asegurarte tener habilitado la virtualización en el Bios y luego de eso no hay problema. Les dejo un link que seguí en una laptop Lenovo para habilitarlo.

Si vamos a preferencias, podemos ver cuanta memoria y CPU le puedes asignar:

Yo tengo habilitado esta cantidad para no tener problemas. Podrías empezar con 2GB RAM.

El resultado debería ser el poder ejecutar docker version: 

Ejecutar SQL Server Community 2017

En mi Mac sólo es necesario ejecutar este comando para tener SQL Server:

docker run -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=SqlServer2017' -p 1433:1433 -d mcr.microsoft.com/mssql/server:2017-latest

Y verificamos si esta corriendo con este comando docker ps -a:

Conectándonos con DataGrip

La prueba final es conectarnos con DataGrip y estar listos para trabajar con SQL Server.

Y Listo. Ya tenemos listo nuestro SQL Server. El mismo procedimiento hice en windows y todo trabajo de maravillas.

Enjoy!

Joe

Read More

Configurando JDBC Connection Pool y JDBC Resources en Payara para PostgreSQL

 

En el Post #1 de ComparaBien.com.pe  vimos como instalar PostgreSQL y Payara. Ahora veremos como configurar un JDBC Connection Pool y JDBC Resource en Payara.

Iniciando el Domain

Primero, me aseguro que el dominio este iniciado y pueda yo usar el sitio administrativo en el puerto 4848.

Si voy a http://localhost:4848/ podré acceder a la consola administrativa de Payara Server:

Creando un JDBC Connection Pool

Primero vamos a JDBC Connection Pool y hacemos clic en New:

Ingresamos el nombre del connection pool, el resource type, el database driver vendor y hacemos clic en Next:

La página nos muestra todas las configuraciones posibles y propiedades sugeridas:

En esta pantalla al final te aparecerán propiedades que te recomiendo eliminar para empezar desde cero, sólo dale clic a esos dos botones y listo:

El resultado final debería ser el siguiente:

Luego debes agregar tus propiedades para que te puedas conectar sin problemas. Ojo tu usuario postgres debe tener una clave, no se aceptan, passwords en blanco. Luego de agregar las propiedades, no olvides hacer clic en Finish:

Finalmente, hacemos ping para  ver si nos podemos conectar sin problemas:

NOTA IMPORTANTE:  Yo he creado un connection pool a la BD postgres. Si mas adelante necesitas conectarte a otra BD debes realizar el mismo procedimiento.

Creando un JDBC Resources

Primero hacemos clic en New:

Configuramos los datos del JDBC Resource:

Dicho jdbc/macpostgres en mi caso ya lo puedo utilizar en mis proyectos java:

Alternativa vía comandos

Todo lo anterior se pudo hacer vía comandos, se los dejo como dato adicional.

Enjoy!

Joe

Read More