{"id":15647083,"url":"https://github.com/glaucia86/tutorial-crud-mean","last_synced_at":"2025-04-30T11:46:10.804Z","repository":{"id":34204343,"uuid":"170895106","full_name":"glaucia86/tutorial-crud-mean","owner":"glaucia86","description":"Repositório responsável pelo tutorial realizado no canal do youtube","archived":false,"fork":false,"pushed_at":"2023-05-04T01:01:20.000Z","size":3421,"stargazers_count":46,"open_issues_count":23,"forks_count":16,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-02T02:50:22.961Z","etag":null,"topics":["angular","continuous-integration","eslint","expressjs","javascript","mean","mongodb","nodejs"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/user/l32759","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glaucia86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-15T16:29:14.000Z","updated_at":"2023-09-28T15:36:53.000Z","dependencies_parsed_at":"2024-10-03T12:17:17.046Z","dependency_job_id":"9bcbd962-b6aa-4a76-a981-3cbe1ec8b865","html_url":"https://github.com/glaucia86/tutorial-crud-mean","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%2Ftutorial-crud-mean","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Ftutorial-crud-mean/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Ftutorial-crud-mean/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucia86%2Ftutorial-crud-mean/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glaucia86","download_url":"https://codeload.github.com/glaucia86/tutorial-crud-mean/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223779601,"owners_count":17201288,"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","continuous-integration","eslint","expressjs","javascript","mean","mongodb","nodejs"],"created_at":"2024-10-03T12:16:48.052Z","updated_at":"2024-11-09T03:15:41.821Z","avatar_url":"https://github.com/glaucia86.png","language":"TypeScript","readme":"# Tutorial CRUD MEAN com Angular 8 com Azure by Glaucia Lemos\n\n[![Tutorial-MEAN.jpg](https://i.postimg.cc/d1nGG2Bg/Tutorial-MEAN.jpg)](https://postimg.cc/njjsJQN1)\n\nRepositório responsável pelo tutorial realizado no meu canal do **[Youtube](https://www.youtube.com/user/l32759)**\n\n## O que eu vou aprender?! 📙\n\nDurante o tutorial, você aprenderá a desenvolver uma aplicação que consiste em realizar um cadastro de um Funcionário para uma empresa XYZ. A qual, usaremos as operações CRUD (Create, Read, Update \u0026 Delete). A aplicação estará integrada com o Back-End(Node.js) e estará hospedada na plataforma Cloud da Microsoft - Azure.\n\nOs dados do Funcionário consiste em:\n\n**Classe: Funcionario**\n\n+ idFuncionario: (number - guid gerado pelo MongoDb)\n+ nomeFuncionario: string\n+ cargo: string\n+ numeroIdentificador: number\n\n## Recursos Utilizados no Desenvolvimento da Aplicação 💻\n\n- Visual Studio Code **[DOWNLOAD AQUI](http://bit.ly/2IfNp9F)**\n- Node.js **[DOWNLOAD AQUI](https://nodejs.org/en/)**\n- Angular CLI ~ 7.2.2 **[DOWNLOAD AQUI](https://angular.io/)**\n- Mongodb Community Server **[DOWNLOAD AQUI](https://www.mongodb.com/download-center/community)**\n- MongodB Compass GUI **[DOWNLOAD AQUI](https://www.mongodb.com/download-center/compass)**\n- Boostrap 3/4 **[DOWNLOAD AQUI](https://getbootstrap.com/docs/3.3/)**\n- Cadastro no Site Azure **[AQUI](http://bit.ly/2WP5hMJ)**\n- Postman **[DOWNLOAD AQUI](https://www.getpostman.com/)**\n\n## Ementa do Workshop: :pencil2:\n\n- Breve Introdução sobre MEAN\n- O que iremos Desenvolver\n- Preparação ao Ambiente de Desenvolvimento\n- Desenvolvimento da Aplicação (Front-End \u0026 Back-End)\n- Considerações Finais\n\n## Vídeos do Workshop: :movie_camera:\n\n### Módulo 1 - Desenvolvimento do Front-End\n- [Aula 01 - Breve Introdução sobre MEAN](https://youtu.be/NJEZDV77bhQ)\n- [Aula 02 - Preparação ao Ambiente de Desenvolvimento](https://youtu.be/A327bvf5DLw)\n- [Aula 03 - Instalação do Angular 7 \u0026 Outras Dependências](https://youtu.be/HtU3Wd4hX0c)\n- [Aula 04 - Criando os Componentes no Angular](https://youtu.be/NX_F-Q1fPpI)\n- [Aula 05 - Criando Navegação (NavBar) com Angular](https://youtu.be/EqR8PPjXfvs)\n- [Aula 06 - Inclusão do Pacote: Angular 2 Slim Loading Bar](https://youtu.be/8GvG_jc10Qg)\n- [Aula 07 - Desenvolvendo os Eventos Router do Ng2 Slim na Aplicação](https://youtu.be/iHux3efFLAU)\n- [Aula 08 - Desenvolvimento do Form com Bootstrap na Aplicação](https://youtu.be/HzL46NrLYBM)\n- [Aula 09 - Desenvolvimento da Validação dos Forms](https://youtu.be/zgU9O0wn31E)\n- [Aula 10 - Criação da Classe Modelo \u0026 Início Desenvolvimento do HttpClient](https://youtu.be/Px0AzBrOQYg)\n- [Aula 11 - Correções Significativas no Front-End](https://youtu.be/yCl_GW3-aD4)\n- [Aula 12 - Desenvolvimento da Lógica do Btn 'Adicionar Funcionário'](https://youtu.be/RWY4CG-7NYA)\n\n### Módulo 2 - Desenvolvimento do Back-End\n- [Aula 13 - Configuração inicial do Back-End - Parte I](https://youtu.be/5ahj4TM3GxQ)\n- [Aula 14 - Configuração inicial do Back-End - Parte II](https://youtu.be/D9L6yYaQY2o)\n- [Aula 15 - Desenvolvimento do arquivo 'server.js'](https://youtu.be/3a7fquaCwlQ)\n- [Aula 16 - Refatorando o projeto no Back-End](https://youtu.be/ud-h8nIj9X0)\n- [Aula 17 - Atualização do v.7 para v.8 do Angular CLI](https://youtu.be/seJliDMpRd0)\n- [Aula 18 - Criação das Connections Strings na api: MongoDb \u0026 CosmosDb](https://youtu.be/LEXJK983WTM)\n- [Aula 19 - Desenvolvimento das Rotas da api 'Funcionario'](https://youtu.be/FQP4a_lzDck)\n- [Aula 20 - Desenvolvimento da Rota 'POST' da api](https://youtu.be/Sg62scoF-0U)\n- [Aula 21 - Desenvolvimento da Rota 'GET' da api](https://youtu.be/x4V2Q6uGfEI)\n- [Aula 22 - Desenvolvimento da Rota 'GetById' da api](https://youtu.be/8IMAVkDxGoE)\n- [Aula 23 - Desenvolvimento da Rota 'Update' da api](https://youtu.be/xRQI_jDCMVU)\n- [Aula 24 - Desenvolvimento da Rota 'Delete' da api](https://youtu.be/ilrLmdslfyM)\n- [Aula 25 - Refatoramento de código Promise pra Async e Await do arquivo 'funcionario.controller.js'](https://youtu.be/QQrG45Hk6X8)\n- [Aula 26 - Continuação: Refatoramento de código Promise pra Async e Await do arquivo 'funcionario.controller.js'](https://youtu.be/y13-bHLXvdQ)\n- [Aula 26.1 - Continuação: Alterações significativas na Api'](https://youtu.be/3HdOw1L3lpA)\n\n### Módulo 3 - Integração do Back-End com o Front-End (Em Breve)\n\n- [Aula 27 - Criando o Front-End(HTML): Listar Funcionarios](https://youtu.be/wDhn9IRKkrw)\n- [Aula 28 - Integração do Back ao Front: Listar Funcionarios](https://youtu.be/po0HvSH1IIY)\n- [Aula 29 - Em Breve]()\n- [Aula 30 - Em Breve]()\n- [Aula 31 - Em Breve]()\n- [Aula 32 - Em Breve]()\n- [Aula 33 - Em Breve]()\n- [Aula 34 - Em Breve]()\n\n### Módulo 4 - Hospedagem \u0026 Deploy da Aplicação no Azure (Em Breve)\n\n- [Aula 34 - Em Breve]()\n- [Aula 35 - Em Breve]()\n- [Aula 36 - Em Breve]()\n- [Aula 37 - Em Breve]()\n- [Aula 38 - Em Breve]()\n- [Aula 39 - Em Breve]()\n- [Aula 40 - Em Breve]()\n\n## Executando a Aplicação Localmente ❗️\n\n### Executando a aplicação no lado do Front-End\n\n1) Instalar os pacotes com o comando: (dentro da pasta `front`)\n\n``` \n\u003e npm install\n```\n\n2) Depois executar o seguinte comando para executar a aplicação (dentro da pasta `front`):\n\n```\n\u003e ng serve -o\n```\n\nDepois bastam abrir o browser em **localhost:4200** (porta padrão de uma aplicação Angular)\n\n### Executando a aplicação no lado do Back-End\n\n1) Instalar os pacotes com o comando: (dentro da pasta `api`)\n\n``` \n\u003e npm install\n```\n\n2) Depois executar o seguinte comando para executar a aplicação (dentro da pasta `api`):\n\n```\n\u003e nodemon\n```\n\nDepois bastam abrir o postamn em **localhost:8000** e testar as requisições\n\n## Atualização Limpa para a versão atual do Angular 7:\n\nExecutar os passos abaixo:\n\n1) Executar os comandos abaixo:\n\n```\n\u003e npm cache verify\n```\n\n```\n\u003e npm install -g @angular/cli\n``` \n\n2) Porém, se executou os comandos acima e não resolveu o problema, tenta executar os seguintes comandos abaixo:\n\n```\n\u003e npm uninstall -g angular-cli (abrindo o Power Shell como Administrador)\n\u003e npm cache verify\n\u003e npm cache clean\n\u003e npm install -g @angular/cli@latest\n\u003e ng --version\n```\n\n3) Se mesmo assim depois de executar os passos acima, com o Power Shell executando como **Administrador** e você não conseguiu atualizar para o Angular 7, execute os seguintes comandos abaixo:\n\n```\n\u003e ng update @angular/cli\n\u003e ng --version\n```\n\n4) Se tudo der certo (numa dessas 3 maneiras sempre vai dar). Sempre execute os comandos abaixo:\n\n```\n\u003e npm cache verify\n\u003e npm cache clean (para versões antigas do npm)\n```\n\nE vòilá! :heart: :heart:\n\n## Links e Recursos Adicionais\n\n- ✅ **[Depurando Aplicação em Angular](http://bit.ly/2G1oBAI)**\n- ✅ **[Tutorial Hospedando Aplicativo Web Azure](http://bit.ly/2uO4I9P)**\n- ✅ **[Hospede \u0026 Faça Deploy de Site Estático no Azure](http://bit.ly/2CXzKR7)**\n- ✅ **[Free Trial Azure](http://bit.ly/2WP5hMJ)**\n- ✅ **[Azure for Students](https://aka.ms/AA5f3zk)**\n- ✅ **[CosmosDb](https://aka.ms/AA5f3zj)**\n- ✅ **[Tutorial Criando um aplicativo Node.js e MongoDB no Azure](https://aka.ms/AA5f3zh)**\n- ✅ **[Tutorial 1: Compilando um aplicativo Web do Node.js usando Azure Cosmos DB](https://aka.ms/AA5eq4r)**\n- ✅ **[Tutorial 2: Migração offline do MongoDB para o Azure Cosmos DB](https://aka.ms/AA5eq4s)**\n\n## Dúvidas?! ❓\n\nSe tiverem alguma dúvida referente ao código desenvolvido ou para configurar o ambiente em suas máquinas, por favor, bastam criar uma **[ISSUE AQUI](https://github.com/glaucia86/tutorial-crud-mean/issues)** no GitHub que estarei respondendo a vocês ASAP!! :heart: :heart: :heart: :blush:\n\n**(documentação em desenvolvimento)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucia86%2Ftutorial-crud-mean","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglaucia86%2Ftutorial-crud-mean","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucia86%2Ftutorial-crud-mean/lists"}