Tutorial CRUD MEAN com Angular 8 com Azure by Glaucia Lemos

Repositório responsável pelo tutorial realizado no meu canal do Youtube

O que eu vou aprender?! 📙

Durante 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 & Delete). A aplicação estará integrada com o Back-End(Node.js) e estará hospedada na plataforma Cloud da Microsoft - Azure.

Os dados do Funcionário consiste em:

Classe: Funcionario

• idFuncionario: (number - guid gerado pelo MongoDb)
• nomeFuncionario: string
• cargo: string
• numeroIdentificador: number

Recursos Utilizados no Desenvolvimento da Aplicação 💻

• Visual Studio Code DOWNLOAD AQUI
• Node.js DOWNLOAD AQUI
• Angular CLI ~ 7.2.2 DOWNLOAD AQUI
• Mongodb Community Server DOWNLOAD AQUI
• MongodB Compass GUI DOWNLOAD AQUI
• Boostrap 3/4 DOWNLOAD AQUI
• Cadastro no Site Azure AQUI
• Postman DOWNLOAD AQUI

Ementa do Workshop: ✏️

• Breve Introdução sobre MEAN
• O que iremos Desenvolver
• Preparação ao Ambiente de Desenvolvimento
• Desenvolvimento da Aplicação (Front-End & Back-End)
• Considerações Finais

Vídeos do Workshop: 🎥

Módulo 1 - Desenvolvimento do Front-End

• Aula 01 - Breve Introdução sobre MEAN
• Aula 02 - Preparação ao Ambiente de Desenvolvimento
• Aula 03 - Instalação do Angular 7 & Outras Dependências
• Aula 04 - Criando os Componentes no Angular
• Aula 05 - Criando Navegação (NavBar) com Angular
• Aula 06 - Inclusão do Pacote: Angular 2 Slim Loading Bar
• Aula 07 - Desenvolvendo os Eventos Router do Ng2 Slim na Aplicação
• Aula 08 - Desenvolvimento do Form com Bootstrap na Aplicação
• Aula 09 - Desenvolvimento da Validação dos Forms
• Aula 10 - Criação da Classe Modelo & Início Desenvolvimento do HttpClient
• Aula 11 - Correções Significativas no Front-End
• Aula 12 - Desenvolvimento da Lógica do Btn 'Adicionar Funcionário'

Módulo 2 - Desenvolvimento do Back-End

• Aula 13 - Configuração inicial do Back-End - Parte I
• Aula 14 - Configuração inicial do Back-End - Parte II
• Aula 15 - Desenvolvimento do arquivo 'server.js'
• Aula 16 - Refatorando o projeto no Back-End
• Aula 17 - Atualização do v.7 para v.8 do Angular CLI
• Aula 18 - Criação das Connections Strings na api: MongoDb & CosmosDb
• Aula 19 - Desenvolvimento das Rotas da api 'Funcionario'
• Aula 20 - Desenvolvimento da Rota 'POST' da api
• Aula 21 - Desenvolvimento da Rota 'GET' da api
• Aula 22 - Desenvolvimento da Rota 'GetById' da api
• Aula 23 - Desenvolvimento da Rota 'Update' da api
• Aula 24 - Desenvolvimento da Rota 'Delete' da api
• Aula 25 - Refatoramento de código Promise pra Async e Await do arquivo 'funcionario.controller.js'
• Aula 26 - Continuação: Refatoramento de código Promise pra Async e Await do arquivo 'funcionario.controller.js'
• Aula 26.1 - Continuação: Alterações significativas na Api'

Módulo 3 - Integração do Back-End com o Front-End (Em Breve)

• Aula 27 - Criando o Front-End(HTML): Listar Funcionarios
• Aula 28 - Integração do Back ao Front: Listar Funcionarios
• Aula 29 - Em Breve
• Aula 30 - Em Breve
• Aula 31 - Em Breve
• Aula 32 - Em Breve
• Aula 33 - Em Breve
• Aula 34 - Em Breve

Módulo 4 - Hospedagem & Deploy da Aplicação no Azure (Em Breve)

• Aula 34 - Em Breve
• Aula 35 - Em Breve
• Aula 36 - Em Breve
• Aula 37 - Em Breve
• Aula 38 - Em Breve
• Aula 39 - Em Breve
• Aula 40 - Em Breve

Executando a Aplicação Localmente ❗️

Executando a aplicação no lado do Front-End

1. Instalar os pacotes com o comando: (dentro da pasta front)

> npm install

2. Depois executar o seguinte comando para executar a aplicação (dentro da pasta front):

> ng serve -o

Depois bastam abrir o browser em localhost:4200 (porta padrão de uma aplicação Angular)

Executando a aplicação no lado do Back-End

1. Instalar os pacotes com o comando: (dentro da pasta api)

> npm install

2. Depois executar o seguinte comando para executar a aplicação (dentro da pasta api):

> nodemon

Depois bastam abrir o postamn em localhost:8000 e testar as requisições

Atualização Limpa para a versão atual do Angular 7:

Executar os passos abaixo:

1. Executar os comandos abaixo:

> npm cache verify

> npm install -g @angular/cli

2. Porém, se executou os comandos acima e não resolveu o problema, tenta executar os seguintes comandos abaixo:

> npm uninstall -g angular-cli (abrindo o Power Shell como Administrador)
> npm cache verify
> npm cache clean
> npm install -g @angular/cli@latest
> ng --version

3. 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:

> ng update @angular/cli
> ng --version

4. Se tudo der certo (numa dessas 3 maneiras sempre vai dar). Sempre execute os comandos abaixo:

> npm cache verify
> npm cache clean (para versões antigas do npm)

E vòilá! ❤️ ❤️

Links e Recursos Adicionais

• ✅ Depurando Aplicação em Angular
• ✅ Tutorial Hospedando Aplicativo Web Azure
• ✅ Hospede & Faça Deploy de Site Estático no Azure
• ✅ Free Trial Azure
• ✅ Azure for Students
• ✅ CosmosDb
• ✅ Tutorial Criando um aplicativo Node.js e MongoDB no Azure
• ✅ Tutorial 1: Compilando um aplicativo Web do Node.js usando Azure Cosmos DB
• ✅ Tutorial 2: Migração offline do MongoDB para o Azure Cosmos DB

Dúvidas?! ❓

Se 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 no GitHub que estarei respondendo a vocês ASAP!! ❤️ ❤️ ❤️ 😊

(documentação em desenvolvimento)