Skip to content

README-es.md

Latest commit

 

History

History
252 lines (163 loc) · 9.82 KB

README-es.md

File metadata and controls

252 lines (163 loc) · 9.82 KB

Workshop - MEAN & Serverless

bit-community.png

Repositorio responsable de los workshops MEAN y Serverless.

¿Qué voy a aprender? 📙

¡Durante este workshop aprenderá cómo migrar de manera simple, rápida y dinámica una aplicación MEAN a una arquitectura Serverless usando Azure Functions!

Los datos del Empleado consisten en:

Classe: Funcionario (Empleado)

  • idFuncionario: (number - guid generado por el MongoDb)
  • nomeFuncionario: string
  • cargo: string
  • numeroIdentificador: number

Recursos Utilizados 🚀

Azure for Students ⭐️

Si es estudiante en cualquier colegio o universidad, puede crear su cuenta de Azure for Students Azure for Students. Esta cuenta le dará el beneficio de tener un crédito de $ 100 para usar los servicios de forma gratuita, sin tener una tarjeta de crédito. Para activar esta cuenta, haga clic: AQUÍ

Requisitos Necesarios 📌

Para la realización de los workshops, es necesario tener nociones de: HTML, CSS y JavaScript. Y también nociones de Azure Functions. Abajo hay cursos gratuitos sobre:

Ejecutando la Aplicación Localmente ❗️

Ejecutando la Aplicación en el Front-End

  1. Instalar paquetes con comando: (dentro de la carpeta front)
> npm install
  1. Luego ejecute el siguiente comando para ejecutar la aplicación. (dentro de la carpeta front):
> ng serve -o

Luego simplemente abra el navegador en localhost: 4200

Ejecutando la Aplicación en el Back-End

Antes de comenzar los pasos a continuación, es muy importante que ahora ejecute MongoDb localmente.

  1. Instalar paquetes con comando: (dentro de la carpeta api)
> npm install
  1. Luego ejecute el siguiente comando para ejecutar la aplicación. (dentro de la carpeta api):
> nodemon

Luego simplemente abra el Postman en localhost: 8000 y pruebe las requisiciones

Y vòilá! ❤️ ❤️

Consumir las API's en Azure Functions(Mongo x CosmosDb) ⚡️

Para facilitar el desarrollo y la agilidad del proyecto, ya creé dos API que consumen este proyecto en Front End. Para esto, siga los enlaces de apis:

API a través de MongoDb - Azure Functions

Esta API persiste localmente en MongoDb a través de Azure Functions.

Para ejecutar, solo siga estos pasos:

  1. Descargue el proyecto a continuación:
  1. Instale las dependencias requeridas con el comando:
> npm i
  1. Crea un archivo llamado: local.settings.json e incluya el bloque de código:
{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "{AzureWebJobsStorage}"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}
  1. Ejecute el comando:
> func host start

Y enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.

  1. Ahora abre el proyecto front y vaya: src -> app -> funcionario.service.ts

  2. Al ingresar el archivo funcionario.service.ts, solo cambia la uri a: http://localhost:7071/api

  3. Ejecute el proyecto angular con el comando:

> ng server -o

Y vòilá! Sólo empezar a persistir!!

API a través de CosmosDb - Azure Functions

  1. Descargue el proyecto:
  1. Instale las dependencias requeridas con el comando:
> npm i
  1. Crea un archivo llamado: local.settings.json e incluya el bloque de código:
{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "CosmosDbUrl": "<cosmos-db-url>",
    "CosmosDBUser": "crud-serverless-wavy",
    "CosmosDBPassword": "<cosmos-db-password>"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}
  1. Ejecute el comando:
> func host start

Y enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.

  1. Ahora abre el proyecto front y vaya: src -> app -> funcionario.service.ts

  2. Al ingresar el archivo funcionario.service.ts, solo cambia la uri a: http://localhost:7071/api

  3. Ejecute el proyecto angular con el comando:

> ng server -o

Y vòilá! Sólo empezar a persistir!!

Me gustaría migrar los datos persistentes localmente a Cosmos Db ... ¿Cómo lo hago?

El proceso de migración de datos persistentes localmente de MongoDb a CosmosDb es bastante simple. Sin embargo, le recomiendo que para facilitar el proceso, descargue el MongodB Compass GUI y tener una cuenta del Conta - Azure. Teniendo estas dos cuentas, podemos continuar.

  1. Paso: abra el portal de Azure y cree un grupo de recursos. Si ya tienes un grupo de recursos, ¡genial!
> meanServerlessResourceGroup
  1. Paso: ahora creemos la base de datos Azure CosmosDb. Para hacerlo, abra su bash en Azure Portal y ejecute los siguientes comandos:
> crud--serverless-<inclua-seu-nome>

> az cosmosdb create --name crud--serverless-<inclua-seu-nome> --resource group meanServerlessResourceGroup --kind MongoDB

  1. Abra el recurso recién creado y capture las cadenas de conexión (clave principal) creadas en el paso anterior.

  2. Paso: ahora importemos los datos localmente de MongoDb a CosmosDb. Simplemente abra MongoDb Compass y haga clic en exportar archivo y guárdelo en la ubicación donde lo desee.

  3. Paso: Ahora ejecutemos el siguiente comando. Este comando será responsable de migrar el archivo creado en el paso anterior para cargarlo en CosmosDb.

> mongoimport.exe --host crud--serverless-<inclua-seu-nome>.documents.azure.com:10255 -u crud--serverless-<inclua-seu-nome> -p <primary-key-criada-cosmosdb> --ssl --sslAllowInvalidCertificates --db crud--serverless-<inclua-seu-nome> --collection funcionarios --file funcionarios.json

Y listo! Cuando se abre el Portal de Azure y acceder al recurso Azure CosmosDb, verá que sus datos locales, se han migrado con éxito en Azure CosmosDb!

Implementando la aplicación en Azure ☁️

Para implementar la aplicación en la nube debemos seguir los pasos: (todos los pasos deben usar el Azure CLI)

Pero antes, debemos ejecutar el comando adentro de la carpeta front:

> ng build

Vas a generar una otra carpeta llamada dist. Y es justo ella que iremos necesitar para implementar en la nube! ;)

  1. Hacer la configuración de un usuario de implementación con el comando (todos los comandos deben ejecutarse usando Azure cli)
> az webapp up -n <nombre-de-la-app>

Y listo! Podemos abrir nuestra aplicación! :)

Enlaces y Recursos Importantes ⭐️

Durante el workshop, hablé sobre muchas documentaciones importantes, enlaces y recursos que pueden ayudarlo a conocer más sobre Azure Functions y Azure.

Tengo dudas ... ¿Qué hago? ❓

Si tiene preguntas sobre los códigos de proyecto relacionados con los workshops, no dude en abrir un ISSUE AQUI. ¡Tan pronto como sea posible, responderé cualquier pregunta que pueda tener!