{"id":15636906,"url":"https://github.com/glaucia86/workshop-mean-serverless","last_synced_at":"2025-08-26T00:06:37.628Z","repository":{"id":56234546,"uuid":"203927262","full_name":"glaucia86/workshop-mean-serverless","owner":"glaucia86","description":"Repositório responsável pela realização do workshop de MEAN \u0026 Serverless","archived":false,"fork":false,"pushed_at":"2020-11-19T04:28:37.000Z","size":12960,"stargazers_count":117,"open_issues_count":2,"forks_count":75,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-11T11:45:06.723Z","etag":null,"topics":["angular","azure","azure-functions","cosmosdb","mean-stack","mongodb","nodejs","serverless"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glaucia86.png","metadata":{"files":{"readme":"README-es.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-23T05:03:30.000Z","updated_at":"2024-11-14T17:47:22.000Z","dependencies_parsed_at":"2022-08-15T15:10:28.828Z","dependency_job_id":null,"html_url":"https://github.com/glaucia86/workshop-mean-serverless","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Fworkshop-mean-serverless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Fworkshop-mean-serverless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Fworkshop-mean-serverless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Fworkshop-mean-serverless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glaucia86","download_url":"https://codeload.github.com/glaucia86/workshop-mean-serverless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230532443,"owners_count":18240792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","azure","azure-functions","cosmosdb","mean-stack","mongodb","nodejs","serverless"],"created_at":"2024-10-03T11:08:57.796Z","updated_at":"2024-12-20T04:07:02.466Z","avatar_url":"https://github.com/glaucia86.png","language":"TypeScript","readme":"# Workshop - MEAN \u0026 Serverless\n\n[![bit-community.png](https://i.postimg.cc/4yVhWzYt/bit-community.png)](https://postimg.cc/BPZ66PcQ)\n\nRepositorio responsable de los workshops MEAN y Serverless.\n\n## ¿Qué voy a aprender? 📙\n\n¡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!\n\nLos datos del Empleado consisten en:\n\n**Classe: Funcionario (Empleado)**\n\n+ idFuncionario: (number - guid generado por el MongoDb)\n+ nomeFuncionario: string\n+ cargo: string\n+ numeroIdentificador: number\n\n\n## Recursos Utilizados 🚀\n\n* **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n* **[Node.js](https://nodejs.org/en/)**\n* **[Postman](https://www.getpostman.com/)**\n* **[Conta - Azure](https://azure.microsoft.com/es-es/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n* **[Azure Web App Service](https://azure.microsoft.com/services/app-service/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n* **[Mongodb Community Server](https://www.mongodb.com/download-center/community)**\n* **[MongodB Compass GUI](https://www.mongodb.com/download-center/compass)**\n* **[Extensão Visual Studio Code: Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions\u0026WT.mc_id=meanserverlessworkshop-github-gllemos)**\n* **[Azure Storage Account](https://azure.microsoft.com/pt-br/services/storage/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n## Azure for Students ⭐️\n\nSi es estudiante en cualquier colegio o universidad, puede crear su cuenta de Azure for Students **[Azure for Students](https://azure.microsoft.com/es-es/free/students/?WT.mc_id=meanserverlessworkshop-github-gllemos)**. 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Í](https://azure.microsoft.com/es-es/free/students/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n## Requisitos Necesarios 📌\n\nPara 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:\n\n* **[Curso Gratuito - Creación de un sitio web sencillo con HTML, CSS y Javascript](https://docs.microsoft.com/es-es/learn/modules/build-simple-website/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n* **[Curso Gratuito - Desarrollo de aplicaciones web con Visual Studio Code](https://docs.microsoft.com/es-es/learn/modules/develop-web-apps-with-vs-code/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n- ✅ **[Curso Gratuito - Creación de aplicaciones sin servidor](https://docs.microsoft.com/es-es/learn/paths/create-serverless-applications/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n## Ejecutando la Aplicación Localmente ❗️\n\n### Ejecutando la Aplicación en el Front-End\n\n1) Instalar paquetes con comando: (dentro de la carpeta `front`)\n\n``` \n\u003e npm install\n```\n\n2) Luego ejecute el siguiente comando para ejecutar la aplicación. (dentro de la carpeta `front`):\n\n```\n\u003e ng serve -o\n```\n\nLuego simplemente abra el navegador en **localhost: 4200**\n\n### Ejecutando la Aplicación en el Back-End\n\nAntes de comenzar los pasos a continuación, es muy importante que ahora ejecute MongoDb localmente.\n\n1) Instalar paquetes con comando: (dentro de la carpeta `api`)\n\n``` \n\u003e npm install\n```\n\n2) Luego ejecute el siguiente comando para ejecutar la aplicación. (dentro de la carpeta `api`):\n\n```\n\u003e nodemon\n```\n\nLuego simplemente abra el Postman en **localhost: 8000** y pruebe las requisiciones\n\nY vòilá! :heart: :heart:\n\n## Consumir las API's en Azure Functions(Mongo x CosmosDb) ⚡️\n\nPara 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:\n\n### API a través de MongoDb - Azure Functions\n\nEsta API persiste localmente en MongoDb a través de Azure Functions.\n\nPara ejecutar, solo siga estos pasos:\n\n1. Descargue el proyecto a continuación:\n\n- **[CRUD Serverless MongoDb](https://github.com/glaucia86/crud-serverless-mongodb)**\n\n2. Instale las dependencias requeridas con el comando:\n\n```bash\n\u003e npm i\n```\n\n3. Crea un archivo llamado: `local.settings.json` e incluya el bloque de código:\n\n```json\n{\n  \"IsEncrypted\": false,\n  \"Values\": {\n    \"FUNCTIONS_WORKER_RUNTIME\": \"node\",\n    \"AzureWebJobsStorage\": \"{AzureWebJobsStorage}\"\n  },\n  \"Host\": {\n    \"LocalHttpPort\": 7071,\n    \"CORS\": \"*\"\n  }\n}\n```\n4. Ejecute el comando:\n\n```bash\n\u003e func host start\n```\n\nY enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.\n\n5. Ahora abre el proyecto `front` y vaya: `src -\u003e app -\u003e funcionario.service.ts`\n\n6. Al ingresar el archivo `funcionario.service.ts`, solo cambia la uri a: `http://localhost:7071/api`\n\n7. Ejecute el proyecto angular con el comando: \n\n```bash\n\u003e ng server -o\n```\n\nY vòilá! Sólo empezar a persistir!!\n\n### API a través de CosmosDb - Azure Functions\n\n1. Descargue el proyecto:\n\n- **[CRUD Serverless CosmosDb](https://github.com/glaucia86/crud-serverless-cosmosdb)**\n\n2. Instale las dependencias requeridas con el comando:\n\n```bash\n\u003e npm i\n```\n\n3. Crea un archivo llamado: `local.settings.json` e incluya el bloque de código:\n\n```json\n{\n  \"IsEncrypted\": false,\n  \"Values\": {\n    \"AzureWebJobsStorage\": \"\",\n    \"FUNCTIONS_WORKER_RUNTIME\": \"node\",\n    \"CosmosDbUrl\": \"\u003ccosmos-db-url\u003e\",\n    \"CosmosDBUser\": \"crud-serverless-wavy\",\n    \"CosmosDBPassword\": \"\u003ccosmos-db-password\u003e\"\n  },\n  \"Host\": {\n    \"LocalHttpPort\": 7071,\n    \"CORS\": \"*\"\n  }\n}\n```\n\n4. Ejecute el comando:\n\n```bash\n\u003e func host start\n```\n\nY enumerará todos los endpoints creados y necesarios para persistir junto con nuestro Front-End.\n\n5. Ahora abre el proyecto `front` y vaya: `src -\u003e app -\u003e funcionario.service.ts`\n\n6. Al ingresar el archivo `funcionario.service.ts`, solo cambia la uri a: `http://localhost:7071/api`\n\n7. Ejecute el proyecto angular con el comando: \n\n```bash\n\u003e ng server -o\n```\n\nY vòilá! Sólo empezar a persistir!!\n\n### Me gustaría migrar los datos persistentes localmente a Cosmos Db ... ¿Cómo lo hago?\n\nEl 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](https://www.mongodb.com/download-center/compass)** y tener una cuenta del **[Conta - Azure](https://azure.microsoft.com/es-es/?WT.mc_id=meanserverlessworkshop-github-gllemos)**. Teniendo estas dos cuentas, podemos continuar.\n\n1. Paso: abra el portal de Azure y cree un grupo de recursos. Si ya tienes un grupo de recursos, ¡genial!\n\n```bash\n\u003e meanServerlessResourceGroup\n```\n\n2. Paso: ahora creemos la base de datos Azure CosmosDb. Para hacerlo, abra su bash en Azure Portal y ejecute los siguientes comandos:\n\n```bash\n\u003e crud--serverless-\u003cinclua-seu-nome\u003e\n\n\u003e az cosmosdb create --name crud--serverless-\u003cinclua-seu-nome\u003e --resource group meanServerlessResourceGroup --kind MongoDB\n```\n\n3. Abra el recurso recién creado y capture las cadenas de conexión (clave principal) creadas en el paso anterior.\n\n4. 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.\n\n5. Paso: Ahora ejecutemos el siguiente comando. Este comando será responsable de migrar el archivo creado en el paso anterior para cargarlo en CosmosDb. \n\n```bash\n\u003e mongoimport.exe --host crud--serverless-\u003cinclua-seu-nome\u003e.documents.azure.com:10255 -u crud--serverless-\u003cinclua-seu-nome\u003e -p \u003cprimary-key-criada-cosmosdb\u003e --ssl --sslAllowInvalidCertificates --db crud--serverless-\u003cinclua-seu-nome\u003e --collection funcionarios --file funcionarios.json\n```\nY 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!\n\n## Implementando la aplicación en Azure ☁️\n\nPara implementar la aplicación en la nube debemos seguir los pasos: (todos los pasos deben usar el Azure CLI)\n\nPero antes, debemos ejecutar el comando adentro de la carpeta `front`:\n\n```bash\n\u003e ng build\n```\n\nVas a generar una otra carpeta llamada `dist`. Y es justo ella que iremos necesitar para implementar en la nube! ;)\n\n1. Hacer la configuración de un usuario de implementación con el comando (**todos los comandos deben ejecutarse usando Azure cli**)\n\n```bash\n\u003e az webapp up -n \u003cnombre-de-la-app\u003e\n```\n\nY listo! Podemos abrir nuestra aplicación! :)\n\n## Enlaces y Recursos Importantes ⭐️\n\nDurante el workshop, hablé sobre muchas documentaciones importantes, enlaces y recursos que pueden ayudarlo a conocer más sobre Azure Functions y Azure.\n\n- ✅ **[Azure para desarrolladores de JavaScript y Node.js](https://docs.microsoft.com/es-es/javascript/azure/?WT.mc_id=meanserverlessworkshop-github-gllemos\u0026view=azure-node-latest)**\n- ✅ **[Documentación de Azure Functions](https://docs.microsoft.com/es-es/azure/azure-functions/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n- ✅ **[Creación de la primera función mediante Visual Studio Code](https://docs.microsoft.com/es-es/azure/azure-functions/functions-create-first-function-vs-code?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n- ✅ **[Extensão Vs Code – Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions\u0026WT.mc_id=meanserverlessworkshop-github-gllemos)**\n- ✅ **[E-Book Grátis - Azure Serverless Computing Cookbook](https://azure.microsoft.com/es-es/resources/azure-serverless-computing-cookbook/?WT.mc_id=meanserverlessworkshop-github-gllemos)**\n\n## Tengo dudas ... ¿Qué hago? ❓\n\nSi tiene preguntas sobre los códigos de proyecto relacionados con los workshops, no dude en abrir un **[ISSUE AQUI](https://github.com/glaucia86/workshop-mean-serverless/issues)**. ¡Tan pronto como sea posible, responderé cualquier pregunta que pueda tener!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucia86%2Fworkshop-mean-serverless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglaucia86%2Fworkshop-mean-serverless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucia86%2Fworkshop-mean-serverless/lists"}