.NET

4 mai, 2018

Criando uma WEBApi utilizando .NET Core e VS Code

Publicidade

Logo abaixo será explicado e exemplificado como criar uma WebAPI consumindo dados do Postgres e uma aplicação que irá consumir esse WebAPI.

O acesso aos dados não será utilizando Entity Framework, mas sim “SQL Puro”. Mas por que não Entity Framework? A explicação é simples: existem vários artigos mostrando como utilizar Postgres com Entity, logo, quis dar uma segunda opção, que inclusive “eu prefiro”.

Observação: não estou dizendo que uma é melhor que a outra, apenas que eu prefiro ter “controle” sobre as minhas consultas. Entretanto, no meu dia a dia (no meu trabalho) eu utilizo NHIbernate, que ao meu ver está mais para o Entity do que para o ADO.NET.

Criando as tabelas no Postgres

Este artigo não tem como objetivo ensinar a configurar o Postgres no GNU/Linux. Para isso existem vários artigos disponíveis na internet. Para o nosso exemplo foi criado o Database “DotNetCoreAPI” e a tabela “Pessoa”, conforme ilustra a figura 1 a seguir:

Figura 1 – Database e tabela Postgres

Os scripts para criação do database, criação da tabela e inserção de alguns dados estão logo abaixo:

-- Database: "DotNetCoreAPI"

-- DROP DATABASE "DotNetCoreAPI";

CREATE DATABASE "DotNetCoreAPI"
  WITH OWNER = postgres
       ENCODING = 'UTF8'
       TABLESPACE = pg_default
       LC_COLLATE = 'C.UTF-8'
       LC_CTYPE = 'C.UTF-8'
       CONNECTION LIMIT = -1;
-- Table: public."Pessoa"

-- DROP TABLE public."Pessoa";

CREATE TABLE public."Pessoa"
(
  id bigint NOT NULL,
  cpf bigint NOT NULL,
  nome character(255) NOT NULL,
  CONSTRAINT pk_id PRIMARY KEY (id)
)
WITH (
  OIDS=FALSE
);
ALTER TABLE public."Pessoa"
  OWNER TO postgres;

insert into "Pessoa" values (1,123456789, 'DotNet_1');
insert into "Pessoa" values (2,123456788, 'DotNet_2');
insert into "Pessoa" values (3,123456787, 'DotNet_3');

Criando o Projeto WebAPI

Antes de criar nosso projeto, o .NET Core utilizado está na versão “2.1.4”. Para realizar essa instalação/atualização eu segui o passo a passo da própria Microsoft “https://docs.microsoft.com/pt-br/dotnet/core/linux-prerequisites?tabs=netcore2x”. Utilizaremos o comando .NET New para criação do projeto e o template “webapi”. Digite o comando abaixo no terminal GNU/Linux:

dotnet new webapi -n PessoaAPI” → webapi o tipo do projeto que desejamos criar; -n PessoaAPI é o nome do Projeto. Para verificar outros parâmetros digite “dotnet new –help”.

O comando acima criará o diretório PessoaAPI e o Projeto PessoaAPI.csproj, como ilustra a figura 2, abaixo:

Figura 2 – Projeto criado com sucesso.

Agora que o nosso projeto está criado, abriremos o VS Code e direcionaremos a pasta padrão para ele. Após escolher a pasta padrão, seu VSCode deverá ter os seguintes arquivos, conforme a figura a seguir:

Figura 3 – VSCode projeto carregado.

Como utilizamos um template para criação do projeto, ele vem com uma classe ValuesController. Ao abrir é possível verificar que temos um exemplo prontinho:

Figura 4 – Exemplo procedimentos

Comandos

dotnet restore;
dotnet build;
dotnet run;

Figura 5 – compilando o projeto exemplo.

Veja na figura 5 que o retorno do comando, dotnet run foi que a aplicação está executando no endereço localhost porta 5000. Então para testarmos a WebAPI exemplo, digite o seguinte endereço em seu browser “localhost:5000/api/values/get”. Se tudo estiver funcionando, será exibido algo como na figura 6.

Figura 6 – Execução do exemplo.

Agora que validamos nosso ambiente, é hora de iniciarmos o nosso projeto.

Criando WebAPI PessoaAPI

Como dito anteriormente, será utilizado ADO.NET para acessar o Postgres. Para isso, instalaremos seu provider através do nuget. Execute os comandos abaixo:

dotnet add PessoaAPI.csproj package Npgsql

Em nosso exemplo utilizaremos o modelo (BLL, DAL, Model), apesar de ser uma arquitetura considerada “ultrapassada”, é simples e eficaz para o nosso projeto.

Utilizando o VSCode vamos criar três pastas e três classes, sendo elas BLL (BPessoa.cs), DAL(DPessoa.cs) e Model (Pessoa.cs). A estrutura ficará parecida com a figura 7.

Figura 7 – Estrutura aplicação

A classe DPessoa recuperará os dados do Postgres e alimentará uma lista de objetos do tipo Pessoa. A classe BPessoa consumirá a lista gerada pela classe DPessoa.

Abaixo, os códigos das classes criadas.

Model/Pessoa.cs

using System;

namespace PessoaAPI.Models
{
   public class Pessoa{
       public Int64 Id {get;set;}
       public Int64 CPF {get;set;}
       public string Nome {get;set;}
   }
}

DAL/DPessoa.cs

using Npgsql;
usng System.Collections.Generic;
using System;
using PessoaAPI.Models;

namespace PessoaAPI.DAL
{

   public class DAOPessoa{

       public List<Pessoa> RetornarPessoas(){
           var connString = "Host=localhost;Username=postgres;Password=zp3;Database=DotNetCoreAPI";

           List<Pessoa> lstPessoa = new List<Pessoa>();

           try{
               using (var conn = new NpgsqlConnection(connString))
               {
                   conn.Open();
                   using (var cmd = new NpgsqlCommand("SELECT id, cpf, Nome FROM \"Pessoa\"", conn))
                   using (var reader = cmd.ExecuteReader())
                   while (reader.Read()){
                       Pessoa pessoa = new Pessoa();
                       pessoa.Id = (Int64)reader["id"];
                       pessoa.CPF = (Int64)reader["cpf"];
                       pessoa.Nome = reader.GetString(2);
                       lstPessoa.Add(pessoa);
                   }
                   conn.Close();
               }
           }catch(Exception ex){
               string teste = ex.Message;
           }      
       
           return lstPessoa;
       }
   }
}

BLL/BPessoa.cs

using System.Collections.Generic;
using PessoaAPI.Models;
using PessoaAPI.DAL;

namespace PessoaAPI.BLL
{

   public class BPessoa
   {
       public List<Pessoa> RetornarPessoas(){
           return new DAOPessoa().RetornarPessoas();
       }      
   }
}

A estrutura está criada. Agora criaremos a controller da nossa API. Dentro da pasta controller crie um arquivo chamado ApiPessoaController.cs. Adicionaremos o código abaixo no controller:

ApiPessoaController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using PessoaAPI.BLL;
using PessoaAPI.Models;

namespace PessoaAPI.Controllers
{
   [Route("api/[controller]")]
   public class ApiPessoaController : Controller
   {
       // GET api/values
       [HttpGet("{id}")]
       public List<PessoaAPI.Models.Pessoa> Get(){
           return new BPessoa().RetornarPessoas();
       }      
   }
}

O código acima “simplesmente” acessa a classe de negócio e expõe ela. Foi criada uma “rota” onde, para acessarmos a API, será necessário colocar o “http://endereco/api/ApiPessoaController

Após a implementação acima, testaremos nossa API para verificar se tudo está funcionando como planejamos. Para isso, execute os comandos abaixo:

dotnet restore;
dotnet build;
dotnet run;

Depois, acesse http://localhost:5000/api/ApiPessoa/Get/ e o resultado esperado é parecido com a figura 8:

Figura 8 – Testando nossa api.

Temos nossa API pronta. Criaremos em seguida nosso cliente para consumo de nossa API.

Cliente WEB

Vamos criar duas pastas dentro da Pasta Views, chamadas “Home” e “Shared”. Criaremos também três arquivos Index.cshtml (dentro de Views → Home), _Layout.cshtml (dentro de Views → Shared) e HomeController.cs (dentro de Controllers). Nossa aplicação ficará com a estrutura da figura 9:

Figura 9 – Estrutura da aplicação

Logo abaixo estará o código dos três novos arquivos criados. Dos três, o arquivo “mais importante” é o index.cshtml, que utilizará jquery para consumir nossa API.

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace PessoaAPI.Controllers
{
   public class HomeController : Controller{
       public IActionResult Index(){
           return View();
       }
   }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Testando - ASP.NET MVC Core </title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>

   <body>
       <div class="navbar navbar-inverse navbar-fixed-top">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
               </div>

               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a href="/">Home</a></li>
                   </ul>
               </div>
           </div>
       </div>

       <div class="container body-content">
           @RenderBody()
           <footer>
               <p>© @DateTime.Now.Year - Minha primeira aplicação dotnet core</p>
           </footer>
       </div>
   </body>

</html>

Index.cshtml

@{
   Layout = "/Views/Shared/_Layout.cshtml";
   ViewBag.Tittle = "Home Page";
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="jumbotron">
   <p><a href="#" id="get-data" class="btn btn-primary btn-large">Recuperar informações Json</a></p>

   <table id="minhaTbl">
       <thead>
           <tr>
               <th>CPF</th>
               <th>Nome</th>
           </tr>
       </thead>
       <tbody>
       </tbody>
   </table>
</div>

<script>
$(document).ready(
   function(){
       $('#get-data').click(function(){
           var showData = $('#show-data');
           $.getJSON('/api/apipessoa/get', function (data){
               console.log(data);
               var tblRef = document.getElementById('minhaTbl').getElementsByTagName('tbody')[0];
               var newRow = tblRef.insertRow(tblRef.rows.length);

               var itens = '';

               for (var i=0; i< data.length; i++){
                   var newRow =tblRef.insertRow(tblRef.rows.length);

                   var newCell1 =newRow.insertCell(0);
                   var newText1 =document.createTextNode(data[i].cpf);
                   newCell1.appendChild(newText1);


                   var newCell2 = newRow.insertCell(1);
                   var newText2 = document.createTextNode(data[i].nome);
                   newCell2.appendChild(newText2);
               }
           });
           showData.text('Carregando arquivo Json');
       });
   });
</script>

Após os passos acima, novamente compilaremos e executaremos nossa aplicação.

dotnet restore;
dotnet build;
dotnet run;

Acesse o link http://localhost:5000/. Será exibido algo como na figura 10, abaixo.

Figura 10 – Testando aplicação final.

Quando clicar em “Recuperar informações Json”, irá carregar na tela as informações do banco de dados Postgres, conforme ilustra a figura 11.

Figura 11 – Testando aplicação final.

Como teste, insira novos dados no banco de dados e veja o resultado ao clicar em “Recuperar Informações Json”.

Conclusão

Confesso ainda achar “estranho” utilizar ferramentas e tecnologias Microsoft no GNU/Linux, porém, como desenvolvedor .NET e apaixonado por Linux, vai facilitar muito meus estudos.

As fontes podem ser baixadas em: https://github.com/ztiago3/DotNetCore/tree/master/WebAPI/PessoaAPI