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:

• Microsoft® SQL Server® 2012 Service Pack 3 (SP3) Express
• Visual Studio 2017 community
• Visual Code
• Angular CLI

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

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“.

• 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“.

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!