Forem: Lucas Silvério

Manipulando arquivos no azure storage: FullStackPlayGround

Lucas Silvério — Thu, 23 Sep 2021 00:24:21 +0000

Oi pessoal!

Nesse vou mostrar como manipular arquivos do azure storage com c#, e ainda fornecer um exemplo de como a aplicar em um aplicativo angular.

Você precisa ter instalado em sua máquina:

e também uma assinatura no Azure

Move Storage

O move storage é um aplicativo angular com uma interface amigável para fazer as operações que serão demonstradas nesse artigo.
Tanto a api quanto o app estão no mesmo repositório.
As operações que vamos ver são:

Criar um container
Listar containers
Deletar container
Listar arquivos em um container
Fazer upload de um ou mais arquivos
Fazer download de um arquivo
Deletar um arquivo de um container
Mover arquivo de um container para outro

Faça uma pré-visualização do projeto:

Faça clone ou dê uma espiada no código do projeto:

silverio27 / MoveStorage

Navegue no terminal até a pasta raiz do projeto onde se encontra o Readme.md

Azure

Faça login na sua conta do azure e defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:

az login
az account set --subscription <subscriptionid>

Vamos definir algumas variáveis no terminal, para facilitar a escrita dos demais comandos

substitua o <nome exclusivo do storage> por por exemplo:
storagelsv1990, na qual a primeira parte é o nome do app, e a segunda parte são as iniciais do seu nome seguido do ano em que nasceu, (Lucas Silvério Vargas, 1990 - lsv1990).
essa é só uma dica para dar um nome ao storage, que deve ser exclusivo.

$group="MoveStorage"
$storageName="<nome exlusivo do app>"

Agora vamos criar um grupo de recursos e criar o nosso storage

az group create -n $group -l eastus2
az storage account create -n $storageName -g $group -l eastus2 --sku Standard_LRS

Obtenha a string de conexão e guarde, vamos utilizar mais adiante no nosso aplicativo:

az storage account show-connection-string -g $group -n $storageName

Agora crie um container e vamos subir alguns arquivos de exemplo:

az storage container create -n container1 --account-name $storageName
az storage blob upload-batch -d container1 -s .\documents\ --account-name $storageName

Aplicativo

No terminal navegue até o aplicativo angular e levante o servidor.

cd .\src\app\
npm i
ng s -o

Em outra aba do terminal navegue até a api e levante a aplicação dotnet.

cd .\src\api\
dotnet run

Adicione uma conexão ao storage, vamos colar a connection string que obtivemos anteriormente e informar um apelido para essa instância de gerenciamento:

Selecione o container1 e será carregado e os arquivos serão listados:

Crie uma nova instância de gerenciamento com a mesma connection string e vamos criar um novo container pelo próprio aplicativo:

O nome pode conter apenas letras minúsculas, números e hifens e deve começar com uma letra ou com um número. Cada hífen deve ser precedido e seguido por um caractere que não seja um hífen. O nome também deve ter entre 3 e 63 caracteres.

Selecione um arquivo e arraste para área de arquivos do container2, e o arquivo será copiado de um container para o outro:

Também é possível mover entre storages diferentes.

No repositório você consegue ver como construí essa dinâmica no front-end, mas nesse artigo vou explanar apenas os métodos em c#.

WebApi

Disclaimer

Essa é uma aplicação para fins didáticos, nela eu passo as connection strings de alguns métodos pelos parâmetros da url. Em produção não fazemos assim, connection strings são informados em arquivos de configuração como o appsettings.json.

O método DecodeUrl é usado para fazer o decode da connection string e um tratamento para sinais de "+" que as mesmas podem possuir

private static string DecodeUrl(string connectionString) => HttpUtility.UrlDecode(connectionString).Replace(" ", "+");

Comandos

Os comandos foram declarados como Records para diminuir a escrita de código e também estão no arquivo de controller, devido a natureza simples desse projeto:

    public record StorageConnection(string ConnectionString, string Alias);
    public record Container(string Name, StorageConnection Connection);
    public record FileConvert(string Name, string Base64);
    public record Upload(Container Container, List<FileConvert> FilesBase64);
    public record MoveFile(Container From, Container To, string File);
    public record NewContainer(string ConnectionString, string ContainerName);

Criar um novo container

[HttpPost("container")]
public ActionResult AddContainer(NewContainer container)
{
    var storage = new BlobServiceClient(container.ConnectionString);
    storage.CreateBlobContainer(container.ContainerName);
    return Created("", new { response = "Arquivo transferido" });
}

Listar containers

[HttpGet("containers/{connectionString}")]
public ActionResult GetContainers(string connectionString)
{
     var storage = new BlobServiceClient(DecodeUrl(connectionString));
     var response = storage.GetBlobContainers().Select(x => x.Name);
     return Ok(response);
}

Deletar um container

[HttpDelete("container/{connectionString}/{containerName}")]
public ActionResult RemoveContainer(string connectionString, string containerName)
{
    var blob = new BlobContainerClient(DecodeUrl(connectionString), containerName);
    blob.Delete();
    return NoContent();
}

Listar arquivos de um container

[HttpGet("files/{connectionString}/{containerName}")]
public ActionResult GetFiles(string connectionString, string containerName)
{
    var container = new BlobContainerClient(DecodeUrl(connectionString), containerName);
    var response = container.GetBlobs().Select(x => x.Name);
    return Ok(response);
}

Deletar um arquivo

[HttpDelete("file/{connectionString}/{containerName}/{fileName}")]
public ActionResult RemoveFile(string connectionString, string containerName, string fileName)
{
    var blob = new BlobClient(DecodeUrl(connectionString), containerName, fileName);
    blob.Delete();
    return NoContent();
}

Upload de arquivos

[HttpPost("upload")]
public ActionResult Upload(Upload upload)
{
    var container = new BlobContainerClient(upload.Container.Connection.ConnectionString, upload.Container.Name);
    foreach (var file in upload.FilesBase64)
    {
        var data = file.Base64.Substring(file.Base64.IndexOf(",") + 1);
        container.UploadBlob(file.Name, new MemoryStream(Convert.FromBase64String(data)));
    }
    return Created("", new { response = "Arquivos enviados" });
}

Download de um arquivo

[HttpGet("download/{connectionString}/{containerName}/{fileName}")]
public async Task<ActionResult> DownloadFile(string connectionString, string containerName, string fileName)
{
    var blob = new BlobClient(DecodeUrl(connectionString), containerName, fileName);
    BlobProperties properties = await blob.GetPropertiesAsync();
    var result = await blob.DownloadContentAsync();
    return File(result.Value.Content.ToArray(), properties.ContentType, "");
}

Mover um arquivo de um storage/container para outro storage/container


[HttpPost("move")]
public async Task<ActionResult> MoveFile(MoveFile moveFile)
{
    BlobContainerClient sourceContainer = new(DecodeUrl(moveFile.From.Connection.ConnectionString), moveFile.From.Name);
    BlobContainerClient destContainer = new(moveFile.To.Connection.ConnectionString, moveFile.To.Name);
    BlobClient destBlob = destContainer.GetBlobClient(moveFile.File);
    await destBlob.StartCopyFromUriAsync(GetSharedAccessUri(moveFile.File, sourceContainer));
    await sourceContainer.DeleteBlobAsync(moveFile.File);
    return Created("", new { response = "Arquivo transferido" });
}
private static Uri GetSharedAccessUri(string blobName, BlobContainerClient container)
{
    DateTimeOffset expiredOn = DateTimeOffset.UtcNow.AddMinutes(60);
    BlobClient blob = container.GetBlobClient(blobName);
    Uri sasUri = blob.GenerateSasUri(BlobSasPermissions.Read, expiredOn);
    return sasUri;
}

Veja mais sobre o método de cópia e os motivos de gerar uma UriSaS aqui

Espero que isso te ajude!

Domínio personalizado no azure static web apps

Lucas Silvério — Thu, 22 Jul 2021 22:31:51 +0000

Oi Pessoal!

Nesse post vou mostrar como aplicar um domínio personalizado no Azure Static Web Apps.

Você precisa de:

Uma assinatura no Azure
Um Aplicativo Web Estático do Azure
Um domínio personalizado, eu adquiri o meu no Registro.br

Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

Coaltime

O Coaltime, aplicação fictícia que apresentei em outros artigos, foi implantado no azure static web app, durante o processo foi gerada uma url aleatória, agora precisamos adicionar o domínio correto da aplicação.

O aplicativo está com essa url:
https://ambitious-field-0575b3f0f.azurestaticapps.net/

Mas ele será acessado por essa url:
https://www.silverio.dev.br/

Registro.br

Entre no site do Registro.br, acesse seu painel e selecione o domínio que você quer vincular ao app:

Vá até a sessão de DNS e clique em editar zona:

Adicione o servidor de email na entrada MX e a url do azure static web app no CNAME e clique em salvar:

Azure

Acesse seu Aplicativo Web Estático e clique em Domínios personalizados:

Clique em adicionar:

Preencha o nome do domínio, clique em avançar:

Selecione o tipo de registro CNAME e clique em adicionar:

Pronto! Em alguns instantes você já vai poder acessar o aplicativo pelo seu domínio!

Espero que isso te ajude!

Angular + Azure Static Web Apps

Lucas Silvério — Thu, 15 Jul 2021 14:28:12 +0000

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no Azure Static Web Apps.

Você precisa ter instalado em sua máquina:

e também uma assinatura no Azure

Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

Coaltime

O Coaltime, aplicação fictícia que apresentei em outros artigos, além de precisar de mais agilidade de implantação devido a contínuas mudanças no código, precisa de baixo custo de hospedagem pois estamos em uma fase embrionária, após analisarmos os custos de uma máquina windows e linux, vimos que para escalar ou ter distribuição global, seria uma melhor solução o Azure Static Web Apps , saiba mais sobre esse recurso aqui.

Faça download do Coaltime (não clone)

silverio27 / Coaltime

Utilize o windows terminal e navegue até a pasta do projeto.
Execute todos os comandos na pasta do projeto

Esse projeto utiliza a versão Angular CLI: 12.0.1

Azure CLI e GitHub CLI

Esse artigo prioriza a utilização da CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do azure e do github.

Abaixo você encontra os links com a lista completa de comandos para ambos:

GitHub

Vamos definir algumas variáveis no terminal, para facilitar a escrita dos demais comandos

substitua o <nome exclusivo do app> por por exemplo:
coaltimelsv1990, na qual a primeira parte é o nome do app, e a segunda parte são as iniciais do meu nome seguido do ano em que nasci, (Lucas Silvério Vargas, 1990 - lsv1990).

$group="StaticCoalTime"
$app="<nome exlusivo do app>"

Faça login no GitHub pelo terminal:

gh auth login

Os comandos abaixo vão iniciar o repositório local e remoto.

git init
gh repo create $app
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main

essa operação pode levar alguns minutos para ser concluída

Salve a url do seu repositório em uma variável, vamos utilizar mais a frente na implantação:

$url=(gh repo view <account>/$app --json "url" --jq ".url")

no meu caso o comando vai ficar assim

$url=(gh repo view silverio27/$app --json "url" --jq ".url")

Azure

Faça login na sua conta do azure e defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:

az login
az account set --subscription <subscriptionid>

Os comandos a seguir criarão um grupo de recursose o aplicativo web estático e irá implantar nosso código:

az group create -n $group -l eastus2
az staticwebapp create -n $app -g $group -s $url -l eastus2 -b main --login-with-github --output-location "./dist/app" --app-location "/" --api-location "api"
az staticwebapp show -n staticoaltime --query "{url:defaultHostname}" -o tsv

O parâmetro --login-with-github irá solicitar o login ao github para que o azure crie um segredo, e o arquivo yml de implantação. O terminal vai pedir que você acesse o portal e informe um código de autenticação. Por padrão o recurso é criado na camada gratuita.

essa operação pode levar alguns minutos para ser concluída

Acompanhe a implantação no portal do github.

Pronto! Agora toda vez que você comitar alterações na main, ele será implantado automaticamente.

Obtenha a url do app para acessar o portal do app implantado:

az staticwebapp show -n $app --query "{url:defaultHostname}" -o tsv

No terminal execute o comando para puxar as alterações feita no repositório, e você verá o arquivo yml que o azure criou.

git pull
cd .\.github\workflows\
ls

Espero que isso te ajude!

Referências

Glaucia LemosFollow

Developer Advocate in JavaScript - DevRel at @Microsoft | Contributor & Member React Community | OSS | Geek Girl | Opinions on my own

GitHub CLI - Uma Nova Experiência no GitHub!

Glaucia Lemos for Microsoft Azure ・ Feb 14 '20

#webdev #productivity #showdev #git

Realize Deploy Automático de Projetos Estáticos com Azure Static Web Apps!

Glaucia Lemos for Microsoft Azure ・ May 19 '20

#javascript #vue #staticwebapps #webdev

Implantar um aplicativo Angular no Azure pelo Github Actions

Lucas Silvério — Thu, 08 Jul 2021 13:59:43 +0000

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no azure pelo github-actions.

Você precisa ter instalado em sua máquina:

e também uma assinatura no Azure

Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

Coaltime

O Coaltime, aplicação fictícia que apresentei no artigo anterior, recebeu permissão para ser continuado e agora precisamos de mais agilidade de implantação devido a contínuas mudanças no código. Outra coisa é que decidimos implantar o aplicativo em um serviço Linux.

Faça download do Coaltime (não clone)

silverio27 / Coaltime

Utilize o windows terminal e navegue até a pasta Coaltime.

Esse projeto utiliza a versão Angular CLI: 12.0.1

Azure CLI e GitHub CLI

Esse artigo prioriza a utilização da CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do azure e do github.

Abaixo você encontra os links com a lista completa de comandos para ambos:

Azure

Faça login na sua conta do azure e defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto::

az login
az account set --subscription <subscriptionid>

Vamos definir algumas variáveis no terminal, para facilitar a escrita dos demais comandos

substitua o <nome exclusivo do app> por por exemplo:
coaltimelsv1990, na qual a primeira parte é o nome do app, e a segunda parte são as iniciais do meu nome seguido do ano em que nasci, (Lucas Silvério Vargas, 1990 - lsv1990).

$group="NewCoalTime"
$plan="NewCoaltimePlan"
$app="<nome exlusivo do app>"

Os comandos a seguir criarão um grupo de recursos, um plano de serviço, um aplicativo web e irá implementar as configurações necessárias para rodar uma aplicação spa no linux:

az group create -n $group -l eastus2
az appservice plan create -g $group -n $plan -l eastus2 --sku F1 --is-linux
az webapp create -g $group -p $plan -n $app --% --runtime "NODE|14-lts"
az webapp config appsettings set -g $group -n $app --settings WEBSITE_WEBDEPLOY_USE_SCM=true
az webapp config set -g $group -n $app --startup-file="pm2 serve /home/site/wwwroot --no-daemon --spa"

essa operação pode levar alguns minutos para ser concluída

Obtenha a url do aplicativo criado:

az webapp show -n $app -g $group --query "{url:defaultHostName}" -o tsv

Salve essa url para acessarmos o aplicativo depois da implantação.

GitHub

Faça login no GitHub pelo terminal:

gh auth login

Os comandos abaixo vão iniciar o repositório local e remoto.

git init
gh repo create $app
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main

essa operação pode levar alguns minutos para ser concluída

Vamos adicionar um segredo ao repositório no GitHub para ser utilizado no nosso pipeline. Esse segredo será o arquivo de publicação do aplicativo web criado anteriormente.
Obtenha o arquivo de publicação:

Copie o resultado vamos usar no comando a frente.

az webapp deployment list-publishing-profiles -n $app -g $group --xml

Adicione o segredo:

gh secret set AZURE_WEBAPP_PUBLISH_PROFILE

Quando pedido '? Paste your secret' cole o resultado da operação anterior.

Vamos criar um arquivo de configuração para implantação com o github actions

md .github/workflows
cd . > .github/workflows/azure.yml

Abra o repositório no vscode:

code .

Cole o conteúdo abaixo no arquivo .github/workflows/azure.yml:

name: "🚀 release"
on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: <nome exclusivo do app>
  AZURE_WEBAPP_PACKAGE_PATH: './dist/app' 
  NODE_VERSION: '14.x' 

jobs:
  build-and-deploy:
    name: 🚀 Build and Deploy
    runs-on: ubuntu-latest
    environment: production
    steps:
    - uses: actions/checkout@v2
    - name: 🟢 Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: ⚡ npm install, build
      run: |
        npm install
        npm run build
    - name: '☁ Deploy to Azure WebApp'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

Vamos comitar e empurrar as nossa modificações e o aplicativo será implantado.

git add .
git commit -m "first deploy"
git push

Acompanhe a publicação no portal do github:

Pronto! Agora toda vez que você comitar alterações na main, ele será implantado automaticamente.

Espero que isso te ajude!

A propósito essa comidinhas sou eu que faço, 'nem só de código vive o dev 😀

Implantar um aplicativo Angular no Azure pela CLI

Lucas Silvério — Mon, 28 Jun 2021 11:04:18 +0000

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no azure pelo azure cli.

Você precisa ter instalado em sua máquina:

Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.

Coaltime

Coaltime é uma rede social para compartilhamento de receitas feitas na churrasqueira. Os investidores querem ver um protótipo da UI. No momento não temos muitos desenvolvedores e não sabemos se o projeto irá avançar. Portanto resolvemos fazer a implantação do protótipo de uma forma mais simples.

Faça o clone ou download do Coaltime.

silverio27 / Coaltime

Utilize o windows terminal e navegue até a pasta Coaltime.

Esse projeto utiliza a versão Angular CLI: 12.0.1

Azure CLI

Esse artigo prioriza a utilização do Azure CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do azure.

Clique aqui para ver a lista completa de comandos do Azure CLI.

Criar um webapp

Faça login na sua conta do azure:

az login

Caso você tenha muitas contas em seu perfil, defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:

az account set --subscription <subscriptionid>

Crie um grupo de recursos específico pra esse tutorial.

Essa é uma prática altamente recomenda. No final desse tutorial podemos excluir o grupo com todos recursos dentro de uma vez, sem se preocupar que algum recurso tenha ficado para trás gerando cobranças indesejadas:

az group create -n Coaltime -l eastus2

Localização: Estamos utilizando o leste dos estados unidos pois é a localização mais barata, em produção escolha a localização mais próxima da sua.

Veja os grupos de recursos da sua conta:

az group list -o table

Vamos criar um plano de serviço na camada gratuíta:

az appservice plan create -g Coaltime -n Coaltimeplan -l eastus2 --sku F1

Clique aqui para saber mais sobre os planos de serviços do azure.

Verifique os planos de serviços dentro do grupo de recursos Coaltime:

az appservice plan list -g Coaltime -o jsonc

Crie um aplicativo web, substitua o nome Coaltimeapp por um nome exclusivo:

az webapp create -g Coaltime -p Coaltimeplan -n Coaltimeapp --% --runtime "NODE|14-lts"

Clique aqui para saber mais sobre os serviços de aplicativo

Obtenha a url do aplicativo criado:

az webapp show -n Coaltimeapp -g Coaltime --query "{url:defaultHostName}" -o tsv

Salve essa url para acessarmos o aplicativo depois da implantação.

Os comandos a segui precisam ser executado na pasta onde o projeto foi criado.

Compile o aplicativo:

ng build

Compacte os arquivos para implantação:

Compress-Archive -Path dist/app/* -DestinationPath dist\app.zip -Force

Faça a implantação:

az webapp deployment source config-zip --src .\dist\app.zip -g Coaltime -n Coaltimeapp

Pronto! Acesse o aplicativo pela url que você salvou na etapa anterior.

Após testar delete os recursos criados se desejar.

az group delete --name <resourcegroup> --no-wait --yes

Espero que isso te ajude!

.Net + Angular + PoUi : FullStackPlayGroung

Lucas Silvério — Thu, 17 Jun 2021 01:15:29 +0000

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.

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 .

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

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

Navegue até a pasta do projeto

cd api

Crie um arquivo de gitignore

dotnet new gitignore

Crie a pasta Models e crie a classe Pet:

md Models
cd . > Models/Pet.cs

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; }
    }
}

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

Crie a pasta Data e crie a classe DataContext:

md Data
cd . > Data/DataContext.cs

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; }
    }
}

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

using api.Data;
using Microsoft.EntityFrameworkCore;

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"));
}

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

dotnet tool install -g dotnet-aspnet-codegenerator

ou atualize caso ela já esteja instalada

dotnet tool update -g dotnet-aspnet-codegenerator

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

Gere o scaffolding do model Pet.cs

dotnet aspnet-codegenerator controller -name PetController -async -api -m Pet -dc DataContext -outDir Controllers

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

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

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

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();
            });
        }

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
            };
        }
...

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

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

Adicione o pacote de ui do Po-UI

ng add @po-ui/ng-components

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

Componentes

crie o componente de leitura de dados

ng generate @po-ui/ng-templates:po-page-dynamic-table

quando perguntado, informe o nome PetTable

crie o componente de edição de dados

ng generate @po-ui/ng-templates:po-page-dynamic-edit

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';
...

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' },
];
...

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>

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" }];
}

Services

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

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

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" },
  ];
  ...

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>

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",
  };
...

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>

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

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

ng s -o

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

Agora vamos testar!

Testes

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

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

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

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.

Agora vamos atualizar esse dado:

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

Altere o nome do dono e clique em salvar:

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

Agora vamos excluir o dado:

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

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

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!

Lendo Api's do azure com Power Bi - exemplo histórico logic apps

Lucas Silvério — Tue, 16 Feb 2021 20:50:40 +0000

Oi Pessoal!

No post anterior eu falei sobre a alternativa do processo de ETL com logic apps. Nesse post vou mostrar uma solução para monitorar a atividade do logic app. A motivação é centralizar a leitura e monitoramento dos dados, visto que podemos ter vários processos preparando arquivos de forma automatizada e se algo der errado, pode passar despercebido. Além disso quero mostrar a integração das api's do azure e isso pode nos trazer outros insights.

Recursos

É necessário que você já tenha algum conhecimento prévio em API's e Powerbi.

Logic app

Na página do logic app no portal do azure, podemos ver o histórico das execuções do logic app.

Nós vamos trazer esse histórico para o nosso painel.

Api Rest do Azure

Na documentação oficial da microsoft você encontra uma visão geral sobre as api's .

E nesse post o autor mostrar como obter as credenciais para acessar as api's do azure.

Execute os passo desse tutorial para obter as credenciais:

Os procedimentos a seguir vão depender dessa etapa.

Get AAD Token

Além da api do histórico de execuções também vamos precisar da api para obter o token de acesso.

Workflow Runs - Get

Clique aqui para acessar a documentação sobre a api que vamos consumir para obter o histórico de execuções do logic app.

GET https://management.azure.com/subscriptions/{subscriptionId}/resourceGroups/{resourceGroupName}/providers/Microsoft.Logic/workflows/{workflowName}/runs/{runName}?api-version=2016-06-01

Power Bi

Vamos criar uma consulta em branco:

Parâmetros

Agora crie um parâmetro para cada propriedade das credencias do azure, que obtivemos nas etapas anteriores.

Depois de registrar todos os parâmetros o resultado será esse:

Token

Crie uma consulta nula como o nome de tokenRequest, onde vamos executar o método para armazenar o token.

Copie e cole o código abaixo na tela do editor avançado.

let authUrl = "https://login.microsoftonline.com/" & tenantId & "/oauth2/token",
    body = "grant_type=client_credentials&
           client_id=" & clientId  & "&
           client_secret=" & clientSecret  & "&
           resource=" & resource  &"",
getToken = Json.Document(Web.Contents(authUrl, [Headers=[#"Content-Type"="application/x-www-form-urlencoded"], Content=Text.ToBinary(body)]))
in getToken[access_token]

Histórico de execuções do logic app

Crie uma consulta nula como o nome de historyRequest, onde vamos executar o método para obter o histórico de execuções do logic app.

Copie e cole o código abaixo na tela do editor avançado e não se esqueçam de renomear o
{resourceGroupName} e {workflowName} para os do seu aplicativo.

let
    historyRequest = let
    historyRequest = let
    token =  tokenRequest,
    url = "https://management.azure.com/subscriptions/" & subscriptionId &"/resourceGroups/{resourceGroupName}/providers/Microsoft.Logic/workflows/{workflowName}/runs?api-version=2016-06-01",
    history = Json.Document(
        Web.Contents(url,[
            Headers = [#"Authorization"= "Bearer " & token]
        ])
    )
in
   history
in historyRequest[value],
    #"Convertido para Tabela" = Table.FromList(historyRequest, Splitter.SplitByNothing(), null, null, ExtraValues.Error),
    #"Column1 Expandido" = Table.ExpandRecordColumn(#"Convertido para Tabela", "Column1", {"properties", "id", "name", "type"}, {"properties", "id", "name", "type"}),
    #"properties Expandido" = Table.ExpandRecordColumn(#"Column1 Expandido", "properties", {"waitEndTime", "startTime", "endTime", "status", "correlation", "workflow", "trigger", "outputs"}, {"waitEndTime", "startTime", "endTime", "status", "correlation", "workflow", "trigger", "outputs"})
in
    #"properties Expandido"

Como estamos executando consultas encadeadas armazenadas em parâmetros diferentes recebemos essa mensagem por questões de segurança do power bi:

Para contornar esse problema, vamos configurar o nível de privacidade para ignorar essa mensagem.

Ao atualizar a tela, você já consegue ver o resultado da api.

Eu montei o painel abaixo como exemplo, e não vou detalhar essa etapa pois o foco aqui era as api do logic app do azure.

Esse é um pequeno exemplo do que podemos fazer com as apis do azure.

Espero que isso te ajude!

Carga de api paginada para powerbi com logic app e storage account - exemplo omie

Lucas Silvério — Fri, 05 Feb 2021 12:44:04 +0000

Oi Pessoal!

Ao pesquisar sobre como consumir api's páginadas no powerbi encontrei alguns exemplos que utilizam a linguagem M, como no vídeo do colega Raphael Pacheco.

Esse post é uma alternativa a solução direta no powerbi utilizando M.

Minha motivação é diminuir a carga cognitiva do processo, visto que não sou um especialista em powerbi e não conheço muito M. Vamos isolar o powerbi apenas como a camada de montagem de painéis. Toda a lógica de integração fica em uma outra camada (logic app), os dados prontos para consumo ficam no storage account e disponibilizado através de uma url.

É provável que seja possível fazer o mesmo processo com o Power Automate.

Arquitetura

Vou focar na camada central que é a extração e preparação de dados, e partir do pressuposto que você já tenha algum conhecimento prévio em API's e Powerbi.

Recursos

Fonte Bruta - Api da Omie

Faça o download do postman.
Entre no site da omie e faça o cadastro.
Vamos usar a api de lista de produtos para esse exemplo.

Por algum motivo não conseguimos fazer a requisição conforme é apresentado na tela.
Ao inspecionar a requisição (aperte F12 no navegador), é possível ver que a requisição tem um parâmetro a mais, url, e temos que incluir esse para parâmetro para reproduzir em nossa aplicação.

Preencha a requisição no postman conforme as imagens abaixo:

A parte da resposta que contém a lista de produtos está em "response"

Por hora é isso, depois voltamos aqui.

Storage Account | Container - Azure

Vá até o portal do azure e crie um novo grupo de recursos.
Recomendo que você siga os nomes que vou atribuir aos recursos, ao menos pra esse tutorial.
Crie todos recursos desse tutorial dentro desse grupo de recursos.

Agora vamos criar um storage account.

Nessa estapa substitua o conteúdo de Storage account name
de nomeomie por {seunome}omie, pra evitar conflitos com a url.

Nessa etapa eu dei o nome de container de 'fonte-preparada' e configurei a camada de acesso como pública, para focarmos no processo de integração, mas em produção fique atento nas questões de segurança.

Nosso container para receber os dados está pronto.

Logic App

Volte até o grupo de recursos OMIE e clique novamente para adicionar um novo recurso.
Repare que o nosso storage já se encontra listado.

Recorrência

Na tela de designer, vamos definir a primeira etapa que é como esse procedimento será iniciado. Vamos escolher o método de recorrência e definir que ele seja repetido de 5 em 5 minutos. Estou definindo esse intervalo curto, pra podermos analisar os resultados em uma janela menor de tempo, mas faça como fizer sentido para você.

Dados da paginação

A próxima etapa é obter os dados da paginação de forma dinâmica. Para isso vamos fazer uma requisição a api, reservar os dados da página atual e total de páginas e desprezar o restante das respostas.

Esses são os dados que vamos reservar.

No nosso designer acrescente na sequencia uma etapa do tipo HTTP.

Configure essa etapa conforme fizemos no postman e a renomeie para "ObterDadosDaPagina", importante dizer o que estamos fazendo.

Propriedades da paginação

A próxima etapa é mapear a resposta da api, para que possamos usar suas propriedades como variáveis nas etapas a seguir.

Para isso vamos utilizar o método Parse Json.

Em content vamos utilizar o output Body da etapa anterior, que é o corpo da resposta da api.

Em Schema, clique em "Use sample payload to generate schema".

Agora copie e cole a reposta do postman na janela que vai abrir.

Esse procedimento vai auto mapear os nomes e tipos das propriedades da resposta.

Renomeie essa etapa como PropriedadesDaPagina

Variáveis

Na próxima etapa vamos definir as variáveis que vamos utilizar para as próximos métodos.

Produtos

Essa variável é do tipos lista e será iniciada como vazia, ela será responsável por armazenar as respostas das requisições.

Para isso vamos utilizar o método Variables.

Página

Agora vamos declarar a variável Pagina que será responsável por armazenar o número da página a ser requisitada.

Dessa vez vamos iniciar essa variável com o valor da propriedade pagina, obtida no output do método PropriedadesDaPagina.

Total de páginas

Vamos declarar a variável TotalDePaginas que será responsável por armazenar o número total de páginas a serem requisitadas.

Vamos iniciar essa variável com o valor da propriedade total_de_paginas, obtida no output do método PropriedadesDaPagina.

Recursão

Nessa etapa vamos declarar um método de recursão. A lógica aqui é fazer a requisição da página X, armazenar a resposta na variável produto, e repetir esse processo na página X + 1 até que o número total de páginas tenha sido requisitado.

Para isso vamos utilizar o método Until.

A lógica utilizada nesse laço de repetição é executar as tarefas a seguir até que o Total de páginas for menor que o valor da página.

Obter Produtos

Agora sim vamos fazer a requisição onde vamos o obter os valores para alimentar nossa resposta.

Dentro do laço vamos adicionar novamente o método HTTP, e configurá-lo quase igual a primeira vez que o fizemos. Porém dessa vez no body da requisição vamos substituir o valor da página que até então era 1 para o valor da variável página.

Propriedades Do Produto

Na sequência vamos executar novamente o método Parse Json para analisar a resposta da requisição feita na etapa anterior.

Em Schema, clique em "Use sample payload to generate schema" e vamos copiar e colar a reposta do postman na janela que vai abrir.
Esse procedimento vai auto mapear os nomes e tipos das propriedades da resposta. Porém dessa vez teremos que fazer uma alteração no mapeamento.

As propriedades peso_bruto e peso_liq tem que ter seu type substituído de integer para um array de tipos:

Isso deve ser feito sempre que um campo pode obter valores inteiros ou decimais.

Preencher Produtos

A próxima etapa é preencher a variável produtos com o valor da propriedade response anteriormente mapeada pelo método Propriedades do produto.

Para isso vamos utilizar o método Append to array variable.

Incrementar Página

Agora pra finalizar o laço vamos incrementar a variável página, fazendo com o que o seu valor seja X + 1.

Para isso vamos utilizar o método Increment Variable.

Criar arquivo

Agora vamos criar a última etapa dentro do logic app que é enviar a resposta como um arquivo no formato json para dentro do container no storage account.

Para isso vamos utilizar o método Create blob.

A primeira parte é criar uma conexão com o storage.

A segunda parte é configurar o blob, informar em qual container ele será salvo, seu nome seguido da extensão e o seu conteúdo. Infelizmente o Dynamic content não reconhece a variável Produtos como um valor elegível para o campo content, de forma que temos que incluí-la com uma expressão:

Ao final o processo terá o visual abaixo, após salvar vamos executar e ver o resultado.

Depois de executar, se tudo der certo o resultado será esse:

Confira indo até o storage account.

Agora você pode obter o link e abrir no powerbi.

Algumas considerações.

Esse post segue o caminho feliz.
Não foi analisado escala.
Não foi considerado segurança.
Não foi utilizado tratamento de erros.
Não foi considerado cargas incrementais, de forma que o arquivo é sempre substituído como o todo.

Espero que isso te ajude!