TheLazy.Dev
Portfolio GitHub

Blog

angular |dotnet |poui

.Net + Angular + PoUi : FullStackPlayGroung

silverio27

Lucas Silvério

Posted on June 17, 2021

.Net + Angular + PoUi : FullStackPlayGroung

Oi Pessoal!

Nesse post vou mostrar como criar um crud com .net e angular utilizando po-ui, uma biblioteca de componentes para angular de alta produtividade.

Faça o clone ou download do código.

GitHub logo silverio27 / FullStackPlayGround

Você precisa ter instalado em sua máquia:

Abra uma pasta de sua preferencia no terminal.
Crie uma pasta chamada src.
Criaremos os projetos dentro desta pasta.

Abra o terminal e navegue até esta pasta e digite o comando abaixo para abrir o vscode.

code .
Enter fullscreen mode Exit fullscreen mode

A partir de agora vamos utilizar o terminal integrado do vscode. Aperte ctrl + ' para abrir o terminal integrado.

BackEnd

WebApi

Crie o projeto com o comando abaixo:

dotnet new webapi -o api
Enter fullscreen mode Exit fullscreen mode

Apague as classes WeatherForecast.cs e Controllers/WeatherForecastController.cs

Navegue até a pasta do projeto

cd api
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo de gitignore

dotnet new gitignore
Enter fullscreen mode Exit fullscreen mode

Crie a pasta Models e crie a classe Pet:

md Models
cd . > Models/Pet.cs
Enter fullscreen mode Exit fullscreen mode

No menu lateral do vscode procure a pasta Models e abra a classe Pet.cs

A classe Pet.cs deve ter o seguinte código:

namespace api.Models
{
    public class Pet
    {
        public int Id { get; set; }
        public string Nome { get; set; }
        public string Raca { get; set; }
        public string Dono { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Instale o pacote Microsoft.EntityFrameworkCore.InMemory

Esse pacote é para utilizarmos um banco de dados em memória, ideal para testes.

dotnet add package Microsoft.EntityFrameworkCore.InMemory --version 5.0.7
Enter fullscreen mode Exit fullscreen mode

Crie a pasta Data e crie a classe DataContext:

md Data
cd . > Data/DataContext.cs
Enter fullscreen mode Exit fullscreen mode

A classe DataContext.cs deve ter o seguinte código:

using api.Models;
using Microsoft.EntityFrameworkCore;

namespace api.Data
{
    public class DataContext : DbContext
    {
        public DataContext(DbContextOptions<DataContext> options)
            : base(options) { }
        public DbSet<Pet> Pet { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Adicione as referências abaixo no topo da classe Startup.cs:

using api.Data;
using Microsoft.EntityFrameworkCore;
Enter fullscreen mode Exit fullscreen mode

Adicione o trecho abaixo no método ConfigureServices na classe Startup.cs

public void ConfigureServices(IServiceCollection services)

    services.AddControllers();
    services.AddSwaggerGen(c =>
    {
        c.SwaggerDoc("v1", new OpenApiInfo { Title = "api", Version = "v1" });
    })

    //adicione este trecho
    services.AddDbContext<DataContext>(opt => opt.UseInMemoryDatabase("DataBase"));
}
Enter fullscreen mode Exit fullscreen mode

Instale a ferramenta de geração de código

dotnet tool install -g dotnet-aspnet-codegenerator
Enter fullscreen mode Exit fullscreen mode

ou atualize caso ela já esteja instalada

dotnet tool update -g dotnet-aspnet-codegenerator
Enter fullscreen mode Exit fullscreen mode

Adicione os pacotes abaixo para gerar a nossa api rest automaticamente.

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
Enter fullscreen mode Exit fullscreen mode

Gere o scaffolding do model Pet.cs

dotnet aspnet-codegenerator controller -name PetController -async -api -m Pet -dc DataContext -outDir Controllers
Enter fullscreen mode Exit fullscreen mode

Observe o código criado em Controllers/PetController.cs, foi criada uma operação de crud completo.

Execute o código abaixo para rodar a aplicação.

dotnet run
Enter fullscreen mode Exit fullscreen mode

Instale a extensão do vscode, Thunder Client ou utilize o postman para testar.

image

Utilize o endpoint https://localhost:5001/api/pet e alterne os métodos GET (obter)/POST (criar)/PUT (atualizar)/DELETE (deletar)

image

Para encerrar o aplicativo, aperte ctrl + c no terminal.

Para permitir os teste do endpoint no aplicativo angular temos q liberar o cors. Em Startup.cs altere o método Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "api v1"));
            }

            // Comente esse trecho
            // app.UseHttpsRedirection();

            app.UseRouting();

            // adicione esse trecho
            app.UseCors(x => x
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader());

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
Enter fullscreen mode Exit fullscreen mode

Refatore o método GetPet em Controllers/PetController.cs para compatibilidade com o contrato de api do po-ui: https://po-ui.io/guides/api#successMessagesForCollections

...
        [HttpGet]
        public async Task<ActionResult<dynamic>> GetPet()
        {
            var pets =  await _context.Pet.ToListAsync();

            return new {
                hasNext = false,
                items = pets
            };
        }
...
Enter fullscreen mode Exit fullscreen mode

Nosso back-end está pronto!

Front-End

WebApp

Volte a raiz do projeto, a pasta src.

Esse projeto utiliza a versão Angular CLI: 12.0.1

Crie o projeto com o comando abaixo:

ng new app
Enter fullscreen mode Exit fullscreen mode

Diga sim para a pergunta sobre criação de rota e escolha CSS como linguagem de estilo

Navegue até a pasta do aplicativo.

cd app
Enter fullscreen mode Exit fullscreen mode

Adicione o pacote de ui do Po-UI

ng add @po-ui/ng-components
Enter fullscreen mode Exit fullscreen mode

Diga sim para criação do procedimento e para criação de menu lateral

Adicione o pacote de template do PO-UI

ng add @po-ui/ng-templates
Enter fullscreen mode Exit fullscreen mode

Componentes

crie o componente de leitura de dados

ng generate @po-ui/ng-templates:po-page-dynamic-table
Enter fullscreen mode Exit fullscreen mode

quando perguntado, informe o nome PetTable

crie o componente de edição de dados

ng generate @po-ui/ng-templates:po-page-dynamic-edit
Enter fullscreen mode Exit fullscreen mode

quando perguntado, informe o nome PetEdit

Rotas

Utilize o menu lateral do vscode e encontre o arquivo app/src/app/app-routing.module.ts

adicione os imports no topo do arquivo:

...
import { PetEditComponent } from './pet-edit/pet-edit.component';
import { PetTableComponent } from './pet-table/pet-table.component';
...
Enter fullscreen mode Exit fullscreen mode

No mesmo arquivo adicione as rotas:

...
const routes: Routes = [
  { path: 'new', component: PetEditComponent },
  { path: 'edit/:id', component: PetEditComponent },
  { path: 'table', component: PetTableComponent },
  { path: '', pathMatch: 'full', redirectTo: 'table' },
];
...
Enter fullscreen mode Exit fullscreen mode

altere o código de app/src/app/app.component.html para adicionar elemento router-outlet (para dar suporte as rotas) e o título do aplicativo

<div class="po-wrapper">
  <po-toolbar p-title="Pet App"></po-toolbar>

  <po-menu [p-menus]="menus"></po-menu>

  <router-outlet></router-outlet>
</div>
Enter fullscreen mode Exit fullscreen mode

altere o código de app.component.ts para remover o código desnecessário e acrescentar a rota para tabela de pets no menu.

import { Component } from "@angular/core";

import { PoMenuItem } from "@po-ui/ng-components";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  readonly menus: Array<PoMenuItem> = [{ label: "Pets", link: "/table" }];
}
Enter fullscreen mode Exit fullscreen mode

Services

adicione a propriedade service em app/src/environments/environment.ts

export const environment = {
  production: false,
  service: 'http://localhost:5000/api/pet'
};
Enter fullscreen mode Exit fullscreen mode

altere o endpoint e as propriedades em app/src/app/pet-table/pet-table.component.ts

...
// adicione esses imports
import { PoPageDynamicTableActions, PoPageDynamicTableField } from '@po-ui/ng-templates';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-pet-table',
  templateUrl: './pet-table.component.html',
  styleUrls: ['./pet-table.component.css']
})
export class PetTableComponent implements OnInit {

  // Copie os códigos abaixo
  readonly apiService = environment.service;


  readonly actions: PoPageDynamicTableActions = {
    new: "/new",
    edit: "/edit/:id",
    remove: true,
  };

  readonly fields: Array<PoPageDynamicTableField> = [
    { property: "id", label: "Id", key: true },
    { property: "nome", label: "Nome" },
    { property: "raca", label: "Raça" },
    { property: "dono", label: "Dono" },
  ];
  ...
Enter fullscreen mode Exit fullscreen mode

adicione a propriedade p-fields em app/src/app/pet-table/pet-table.component.html

<po-page-dynamic-table
  p-title="PetTable"
  [p-actions]="actions"
  [p-service-api]="apiService"
  [p-fields]="fields">
</po-page-dynamic-table>
Enter fullscreen mode Exit fullscreen mode

e em app/src/app/pet-edit/pet-edit.component.ts

...
// adicione esses imports
import { PoPageDynamicEditActions, PoPageDynamicEditField } from '@po-ui/ng-templates';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-pet-edit',
  templateUrl: './pet-edit.component.html',
  styleUrls: ['./pet-edit.component.css']
})
export class PetEditComponent implements OnInit {

  // copie os códigos abaixo
  readonly apiService = environment.service;

  readonly fields: Array<PoPageDynamicEditField> = [
    { property: "id", label: "Id", key: true, visible: false },
    { property: "nome", label: "Nome" },
    { property: "raca", label: "Raça" },
    { property: "dono", label: "Dono" },
  ];

  public readonly actions: PoPageDynamicEditActions = {
    save: "/table",
    saveNew: "/new",
  };
...
Enter fullscreen mode Exit fullscreen mode

adicione a propriedade p-actions em app/src/app/pet-edit/pet-edit.component.html

<po-page-dynamic-edit
  p-title="PetEdit"
  [p-service-api]="apiService"
  [p-fields]="fields"
  [p-actions]="actions">
</po-page-dynamic-edit>
Enter fullscreen mode Exit fullscreen mode

Pronto nosso front-end está pronto!

Para executar os dois projeto, crie uma nova aba do terminal e navegue até ..src/api e execute

dotnet run
Enter fullscreen mode Exit fullscreen mode

em outra aba do terminal navegue até ..src/app e execute:

ng s -o
Enter fullscreen mode Exit fullscreen mode

Eu utilizei o próprio terminal integrado com duas instancias:
image

Agora vamos testar!

Testes

No navegador foi aberto a página: http://localhost:4200/table

Veja toda estrutura que foi criada, isso é incrível!

image

Clique no botão novo e você será direcionado para a página com o formulário de edição:

image

Preencha o formulário e clique em salvar.

Você será redirecionado para página de tabela, repare que o dado foi incluído, listado e apareceu uma notificação de sucesso.

image

Agora vamos atualizar esse dado:

Clique nos 3 pontinho no final da linha e depois em editar:

image

Altere o nome do dono e clique em salvar:

image

Você será redirecionado para página de tabela novamente e o dado foi alterado e uma nova notificação foi adicionada.

image

Agora vamos excluir o dado:

image

Uma janela de confirmação vai abrir, clique em confirmar:

image

Veja que o item já não aparece mais e uma notificação foi adicionada.

image

O Post ficou um pouco grande, mas a replicação desse projeto é rápido.

O PO-UI é uma biblioteca fantástica!!!
Veja que criamos uma estrutura de crud, notificação e navegação de forma muito rápida e com pouco código! Confira todos os componentes no portal deles.

Espero que isso te ajude!

💖 💪 🙅 🚩
silverio27
Lucas Silvério

Posted on June 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

.Net + Angular + PoUi : FullStackPlayGroung
angular .Net + Angular + PoUi : FullStackPlayGroung

June 17, 2021