Workshop - MEAN & Serverless

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 🚀

Visual Studio Code
Node.js
Postman
Conta - Azure
Azure Web App Service
Mongodb Community Server
MongodB Compass GUI
Extensão Visual Studio Code: Azure Functions
Azure Storage Account

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:

✅ Curso Gratuito - Creación de aplicaciones sin servidor

Ejecutando la Aplicación Localmente ❗️

Ejecutando la Aplicación en el Front-End

Instalar paquetes con comando: (dentro de la carpeta front)

> npm install

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.

Instalar paquetes con comando: (dentro de la carpeta api)

> npm install

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:

Descargue el proyecto a continuación:

CRUD Serverless MongoDb

Instale las dependencias requeridas con el comando:

> npm i

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": "*"
  }
}

Ejecute el comando:

> func host start

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

Ahora abre el proyecto front y vaya: src -> app -> funcionario.service.ts
Al ingresar el archivo funcionario.service.ts, solo cambia la uri a: http://localhost:7071/api
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

Descargue el proyecto:

CRUD Serverless CosmosDb

Instale las dependencias requeridas con el comando:

> npm i

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": "*"
  }
}

Ejecute el comando:

> func host start

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

Ahora abre el proyecto front y vaya: src -> app -> funcionario.service.ts
Al ingresar el archivo funcionario.service.ts, solo cambia la uri a: http://localhost:7071/api
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.

Paso: abra el portal de Azure y cree un grupo de recursos. Si ya tienes un grupo de recursos, ¡genial!

> meanServerlessResourceGroup

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

Abra el recurso recién creado y capture las cadenas de conexión (clave principal) creadas en el paso anterior.
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.
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! ;)

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.

✅ Azure para desarrolladores de JavaScript y Node.js
✅ Documentación de Azure Functions
✅ Creación de la primera función mediante Visual Studio Code
✅ Extensão Vs Code – Azure Functions
✅ E-Book Grátis - Azure Serverless Computing Cookbook

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!

Badges

Extracted from project README