Back-End

4 set, 2018

Angular 5 + .NET Framework + SQL Server + Swagger UI – Criando uma aplicação FullStack – Parte 01

100 visualizações
Publicidade

O objetivo deste artigo é mostrar como criar uma aplicação ligando as principais frentes de tecnologia: front-end, back-end (web api) e banco de dados SQL Server.

Pré-requisitos:

Antes de prosseguir, certifique-se de ter os pré-requisitos instalados em sua máquina. Tudo pronto? Vamos nessa!

Criando a aplicação Angular

Vamos começar pela aplicação Client side. Abra o prompt de comando e digite o comando:

ng new fullstack-app

Comando ng new iniciando e instalando as dependências da aplicação

Aguarde a criação e instalação das dependências do projeto.

Servindo a aplicação

Entre na pasta do projeto e rode o seguinte comando:

ng s

Abra o navegador e acesse o endereço: http://localhost:4200.

Pronto, a aplicação front-end está criada, e pronta para ser integrada com o back-end.

Criando banco de dados

Abra o SQL Server Management Studio – suponho que você saiba manusear essa ferramenta; caso ainda não saiba você pode aprender neste link.

Para criar um novo db, siga os passos:

  • 1. Autentique o usuário do SQL server.

  • 2. Clique em “Banco de Dados” e depois em “Novo Banco de Dados“.
Criando um novo Banco de Dados
  • 3. Insira o nome do Db e clique em “OK“. Aqui demos o nome de fullstack_db.

Criando uma tabela para nosso Banco de Dados

Selecione o db que acabemos de criar e clique em “Nova Consulta“. Na caixa que é aberta digite o comando abaixo para criar a tabela Alunos:

use fullstack_db;
CREATE TABLE dbo.Alunos
(
AlunosId INT NOT NULL PRIMARY KEY,
Nome [NVARCHAR](50) NOT NULL,
Rm [NVARCHAR](50) NOT NULL,
Senha [NVARCHAR](50) NOT NULL
);
GO

Com isso temos nossa tabela criada.

Inserindo valores em nossa tabela

Substitua o comando anterior com o SQL abaixo:

INSERT INTO dbo.Customers
 ([CustomerId],[Name],[Location],[Email])
VALUES
 ( 1, N’Orlando’, N’Australia’, N’’),
 ( 2, N’Keith’, N’India’, N’keith0@adventure-works.com’),
 ( 3, N’Donna’, N’Germany’, N’donna0@adventure-works.com’),
 ( 4, N’Janet’, N’United States’, N’janet1@adventure-works.com’)
GO

Resultado:

Pronto! Banco de dados criado e preenchido.

Criando a web api com .NET framework

Abra o Visual Studio clique em “New>Project” selecione ASP.NET Web Application (.NET Framework). Clique em “OK“.

Web api de exemplo para o artigo

Selecione Web API e clique em “Ok“.

Criando contexto banco de dados

Para criar um contexto de db, siga os passos:

  • 1. Clique com o botão direito em “Models” e selecione “Add” > “New item“.

  • 2. Selecione no menu do canto esquerdo a opção “Data” e clique em “ADO.NET Entity Data Model“. Dê um nome para seu model e clique em “Add“.

  • 3. Deixe selecionada a opção EF Designer from database e clique em “Next“.

  • 4. Clique em “New Connection

  • 5. Em Server Name digite o nome do seu usuário do SQL Server:

Ao fazer isso os db’s estarão disponíveis.

  • 6. Selecione o nosso banco de dados na lista Select or enter database name.

Pronto! Conexão com o banco ok, e nossa Connection String está pronta para ser usada. Clique em “Next“.

  • 7. Agora vamos escolher a versão do Entity Framework. Deixe selecionado a 6.x. Clique em “Next“.

8. Agora vamos exportar nossa tabela no contexto do db. Selecione “Tables” e marque a caixa com a opção Pluralize or singularize genereted object names e clique em “Finish“.

Finish! Model criado.

Criando Controller para acessar contexto de banco de dados

O controller funcionará como uma rota para o front-end, siga os passos:

  • 1. Clique com o botão direito do mouse em “Controllers” e selecione “Add>Controller“.

  • 2. Selecione “Web API 2 Controller with action, using Entity Framework” e clique em “Add“.

  • 3. Em Add Controller deixe configurado conforme a imagem abaixo e clique em “OK“.

Informativo: caso ocorra algum problema build no projeto, pressione Ctrl + Shift + b e refaça o controller.

Pronto! Controller criado.

Habilitando Cors Origin

Sempre que vamos realizar uma solictitação Http a partir do client, é necessário habilitar Cors no back-end. Trata-se de uma politica de segurança que existe entre requisições entre domínios diferentes.

Realize os passos para habilitar Cors.

  • 1. Instale o pacote Microsoft.AspNet.WebApi.Cors, Navegue até o Package Manager Console. Tools > Nuget Package Manager > Package Manager Console e cole o seguinte comando:
Install-Package Microsoft.AspNet.WebApi.Cors

  • 2. Abra o arquivo WebApiConfig.Register e dentro do método e atualize seu método com o código abaixo.
config.EnableCors();

  • 3. Abra o arquivo AlunosController.cs e adicione o pacote a cima do namespace namespace FullStackApi.Controllers.
using System.Web.Http.Cors

Para finalizar a configuração de Cors build do projeto: Ctrl + Shift + b.

Testando nossa Web API

Servidor rodando OK.

Para nosso artigo não ficar tão grande continuaremos na Parte 02!