DEV Community

Cover image for .Net + Angular + PoUi : FullStackPlayGroung
Lucas Silvério
Lucas Silvério

Posted on • Edited on

7

.Net + Angular + PoUi : FullStackPlayGroung

#angular #dotnet #poui

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!

profile
AWS
 Promoted

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

profile
AWS
 Promoted

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Read next

lymestack profile image

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Michael Joseph -

bytehide profile image

Discover .NET Scaffold: The Tool Revolutionizing .NET Development

ByteHide -

ulisesserranop profile image

Dockerando una aplicación de Angular

Ulises Serrano -

dotnetfullstackdev profile image

Autofac Dependency Injection in ASP .NET Core 8

DotNet Full Stack Dev -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay