Criando um projeto .Net Core com Angular no Visual Studio

Começando uma série de posts onde vamos abordar importantes conceitos do mundo de desenvolvimento de software aplicando em um projeto com .Net Core no Backend e Angular no FrontEnd.

A ideia do vídeo de hoje é criar um projeto simples em .Net Core com Angular pelo Visual Studio e fazer uma breve análise dos arquivos gerados, como são as páginas e códigos.

Pré requisitos para esse post:

.Net Core (3.0): https://dotnet.microsoft.com/download...

Angular CLI: https://cli.angular.io/

Visual Studio: https://visualstudio.microsoft.com/

Se você quiser, fiz o vídeo relacionado com esse post para te facilitar no processo de aprendizado: https://www.youtube.com/watch?v=zkbk1pnwz5Q

Primeiro vamos dar um breve resumo sobre o .Net Core que é um framework construído pela Microsoft de código aberto para suprir a necessidade de ter uma aplicação com tecnologia Microsoft podendo ser publicada em servidores Linux e Mac também.

Também falaremos sobre o Angular que é um framework mantido pela Google capaz de manipular as informações no FrontEnd quando se trata de aplicações Single Pages. Vamos utilizá-lo para gerenciar a informação na nossa UI e realizar a comunicação com nosso backend.

Para dar início basta abrir o Visual Studio (no meu caso, utilizei o VS Community 2019), clicar em File > New > Project.

Selecione a opção ASP.Net Core Web Application

Configure o nome do seu projeto, o diretório onde ficará salvo e qual o nome da Solution que você deseja para o projeto.

Próximo passo, você pode selecionar qual tipo de aplicação web você deseja inicializar. As opções são: Um projeto web vazio para você criar todos os itens manualmente, um projeto web api voltado 100% para backend, um projeto web MVC já integrado ou um projeto web com um framework frontend ja instalado. Nesse ultimo caso, você ainda pode escolher entre Angular, React e React com Redux. No meu exemplo, eu selecionei Angular e deixei as demais opções como estava. Justamente porque quero criar meu próprio projeto para gerenciar autenticação, etc.

Pronto. Aplicação já foi criada com sucesso.

Vamos dar uma olhada na estrutura criada para entendermos alguns detalhes:

Olhando debaixo para cima, podemos ver uma classe chamada WeatherForecast.cs que foi criada automaticamente pelo Visual Studio que, basicamente, é um objeto simples contendo 4 campos que será retornado para o frontend em uma página específica.

O Startup.cs é a classe do projeto onde vai conter todas as configurações pré carregadas no momento de loading do projeto no servidor. De modo que já esteja apto para acesso do usuário e gerenciamento das informações.

O Program.cs é a classe principal do projeto responsável por executar e carregar o projeto no servidor.

O appsettings.json é um arquivo json responsável por manter informações de configurações capaz de serem lidas e executadas pela aplicação. Nesse arquivo é que vamos colocar nossa string de conexão com banco de dados, informações com relação ao e-mail servidor da minha aplicação, chaves de integração quando necessário, etc.

O .gitgnore é um arquivo GIT que contém a informação para bloquear tipo de arquivos, arquivos e pastas que não devem ser publicadas para o github.

A pasta Pages contém 2 páginas cshtml padrão do c# para mostrar em caso de erro 404 (Not Found) e o complemento da página capaz de gerenciar os imports necessários.

A pasta Controllers contém 1 API. Nela que vamos criar todas nossas controllers, responsáveis por criar nossas API’s que serão chamadas pelo projeto FrontEnd.

Na pasta ClientApp está o nosso projeto Angular responsável por toda a UI da minha aplicação. Esse é um item que vamos abordar em outros posts, devido toda a sua estrutura de componentes que necessitamos de um entendimento mais avançado para desenvolver minhas páginas. Como a ideia inicial vai ser trabalhar no Backend e garantir que ele esteja funcionando 100% antes de mudarmos para o FrontEnd, vamos deixar isso para um post futuro.

Por fim, temos o wwwroor que apenas contém o Favicon da minha aplicação e as dependências e propriedades da aplicação atual.

Não vamos precisar modificar nada por enquanto. Basta rodar a aplicação clicando no botão IIS Express ou apertando a tecla F5.

Feito isso, podemos ver nossa página inicial da aplicação contendo breve informações a respeito da tecnologia do projeto e alguns links para acessarmos a documentação de cada uma das tecnologias.

Se clicarmos no link Counter, vamos ter acesso a uma simples página com um botão “Increment” que aumenta um número toda vez que clicamos. Podemos ver o arquivo Typescript do módulo Counter que está dentro de ClientApp>src>app>counter>counter.component.ts o método para incrementar o valor da variavel.

Se clicarmos no link Fetch data, vamos ter acesso a uma simples página que carrega uma tabela com algumas informações. Quando atualizamos a página ou acessamos novamente, podemos ver que a informação muda. O que nos faz entender que o valor está randomico. É exatamente nessa página que está acontecendo toda a mágica do projeto FrontEnd estar comunicando com o projeto BackEnd e buscando informação necessária para mostrar ao usuário final.

Podemos ver o código que realiza essa chamada na API, quando acessamos ClienteApp > src > app > fetch-data > fetch-data.component.ts

Pronto! Já temos nossa aplicação simples em .Net core com Angular já criada e funcionando. Por hoje vamos ficar por aqui, porque temos bastante assunto a tratar com relação a esse projeto e vamos trabalhando em cima de casa tema por post.

Fico por aqui e no próximo post vamos realizar a publicação dessa aplicação no Github para manter nosso código atualizado na nuvem e com um controle de versão.

Muito obrigado por ver esse post, qualquer feedback é bem vindo e nos vemos na próxima.