Forem: High5Devs

Quer acelerar o desenvolvimento de aplicações Angular? Conheça o po-ui!

Arthur Fücher — Tue, 15 Mar 2022 13:33:50 +0000

Um tempo atrás eu estava querendo reescrever uma aplicação que eu fiz para controle de cursos de uma escola. Para o backend eu escolhi C# para continuar meus estudos, e para o frontend eu estava na dúvida entre React e Angular.

A aplicação em sua maioria é composta por CRUD, vários cadastros simples. Ou seja, iria precisar muito de formulários e tabelas/listagens. Foi quando lembrei do PO-UI, dei uma chance e decidir por usar o Angular.

O que é o PO-UI?

Biblioteca de componentes baseado em Angular

de acordo com o próprio site.

Ela nos disponibiliza uma série de componentes prontos, na sua maioria voltados para aplicações CRUD.

Acredito que isso se deva ao fato dele ser um projeto open source da TOTVS, empresa conhecida pelo desenvolvimento de ERPs, que tem a característica de ter uma quantidade de cadastros e listagens grande.

Ao decidir usá-lo, os seguintes pontos me fizeram tomar a decisão:

Documentação

A documentação do projeto é bem completa. Todo componente possui documentação com todas as propriedades, exemplos de uso funcionando e com o código.

Todo desenvolvimento precisa ter documentação, isso faz parte do ciclo de desenvolvimento das features, portanto está sempre atualizada.

UX

Uma coisa interessante do projeto é que por ter uma empresa por trás, os componentes desenvolvidos passam por uma equipe de UX para manter padrões de usabilidade e estilos. Então na minha perspectiva é uma vantagem na utilização do PO-UI, pois você não precisa se preocupar com estilos e padrões de utilização dos compoenentes.

Mesmo tendo um padrão de cores, é possível customizar e criar o seu próprio tema.

Metadado

Diversos componentes possui um componente maior (High Component) que possui facilitadores para construção do mesmo. Para criar por exemplo uma lista, existe um componente que recebe o endpoint que deve fazer a chamada para retornar os dados e também recebe um parâmetro com o endpoint de metadados.

Nesse endpoint nosso servidor retorna qual é a estrutura de dados que teremos, e com isso o PO-UI já monta as colunas e formatações. Isso é muito bom para deixar a visualização customizável e deixando a estrutura de dados no backend.

Open source

O projeto está hospedado no github: github.com/po-ui/po-angular

Fazer uso de uma biblioteca open source tem diversas vantagens, como por exemplo olhar e entender como as coisas estão sendo feitas nos componentes que você está usando.

Caso tenha uma necessidade, pode abrir uma issue, discutir com o time a implementação e até contribuir com um novo componente ou comportamento.

O time tem aprendido e evoluído cada vez mais na construção de um projeto open source, que não é fácil.

Inclusive ano passado fizemos uma live sobre projetos open source e o PO-UI foi um deles: assista aqui

Eai, achou interessante? Para começar é bem simples, e eles disponibilizam um guia de primeiros passos aqui.

Depois me conta o que achou!

Abraços

Photo by Marc-Olivier Jodoin on Unsplash

O post Quer acelerar o desenvolvimento de aplicações Angular? Conheça o po-ui! apareceu primeiro em High5Devs.

Se faça substituível

Arthur Fücher — Wed, 09 Feb 2022 01:32:11 +0000

Eu percebi que era substituível e que fazia coisas para ser quando ouvi um dos melhores elogios que recebi até hoje. No meu último dia de trabalho na ThoughtWorks, Renato que trabalhava ao meu lado, me disse que aquele não tinha parecido meu último dia, parecia como qualquer outro.

Você chegou e trabalhou normalmente, não rolou um desespero de tentar finalizar alguma tarefa ou passar para alguém. E também não estava lá sem fazer nada.

Foi exatamente isso que aconteceu, eu cheguei, abri meu Mac, trabalhei, fiz pair, participei de reuniões. No final do dia, fechei meu computador e a única diferença é que dessa vez não guardei ele, devolvi para a empresa.

No novo post do High5Devs eu compartilhei sobre o que acredito em ser substituível, confere lá: http://high5devs.com/2022/02/se-faca-substituivel/

FSCheck: Gerando valores customizados para seu teste de propriedade

Arthur Fücher — Thu, 11 Feb 2021 17:33:15 +0000

Em um outro post, falamos um pouco sobre a utilização do FSCheck para criação de testes de propriedade usando C#. Mostrei os primeiros passos com o FSCheck, e a criação de testes de propriedade bem simples onde nosso teste dependia de um valor _uint p_ara representar uma porcentagem, porém esse tipo de valor pode ser maior do que 100, o que no nosso caso se encaixa muito bem dado que nossa porcentagem seria somente de 0 a 100.

Nesse post iremos nos aprofundar um pouco mais na criação de parâmetros customizáveis, limitando os valores, criando alguns mais específicos e descritivos.

Contexto

No primeiro post que fiz sobre o FSCheck mostrei um contexto de uma aplicação de FlashCards onde testávamos se um cartão tinha sua porcentagem de dificuldade diminuída caso o usuário acertasse a reposta ou se aumentava a dificuldade caso o usuário errasse. O código do nosso exemplo é esse aqui:


[Property]
public Property DeveDiminuirDificuldadeQuandoAcertarAResposta(int porcentagem)
{
 var calculadora = new CalculadoraDeDificuldade();
 var cartão = new Cartão("qlqr pergunta", porcentagem);

 var novoCartão = calculadora.AjustaDificuldade(cartão, true);

 return (novoCartão.Porcentagem < porcentagem).ToProperty();
}

A questão com esse teste é que o valor de porcentagem está variando entre todos os possíveis para uma variável do tipo int, e a nossa propriedade só é válida quando o valor da porcentagem for entre 0 e 100. O FsCheck possui o método When que faz exatamente isso, portanto podemos alterar a criação da nossa propriedade para que fique assim:


return (novoCartão.Porcentagem < porcentagem)
         .ToProperty()
         .When(porcentagem != 0 && porcentagem < 100);

Utilizando o método When conseguimos limitar o valor do parâmetro porcentagem que será válido para a nossa Propriedade, porém agora todo teste que dependa desse valor teremos que adicionar esse código. O que precisamos é que o FSCheck saiba gerar corretamente os valores, e para isso ele disponibiliza uma maneira de criar os nossos próprios geradores de valores.

Gerando valores customizáveis

Para criar esse valores customizaveis iremos criar uma classe para agrupar os geradores, e esses geradores serão métodos estáticos que retornam um Arbitrary do valor que quer gerar.

O nome do método podemos colocar algo que deixe explícito o retorno.

No nosso caso o tipo que usamos é int, iremos criar um método estatico que irá retornar um Arbitrary de int e iremos dar o nome de Porcentagem.


    public class Tipos
    {
        public static Arbitrary<int> Porcentagem() =>
            Arb.Default.Int32().Generator.
                Where(x => x > 0 && x <= 100).ToArbitrary();
    }

Olhando a implementação acima veja que utilizamos o próprio gerador de int da biblioteca Arb.Default.Int32().Generator e depois usamos um Where para filtrar o intervalo de valores que queremos. E para retornar um Arbitrary basta chamar o método ToArbitrary.

Agora que criamos esse gerador, precisamos fazer indicar para o nosso teste que deve utilizar essa classe como fonte. Conseguimos fazer isso apenas alterando o atributo Property:


[Property(Arbitrary = new[] {typeof(Tipos)})]

Com isso quando o nosso teste solicita uma entrada to tipo int, ele acha o nosso gerador e chama ele ao invés do padrão, com isso nosso código não precisa mais lidar com o tratamento do valor e podemos remover o When que tínhamos colocado.

Olhando nosso código, utilizamos a porcentagem para criar nosso objeto Cartão e usamos ele para fazer o teste. E se, ao invés de receber a porcentagem, nós recebessemos um objeto de Cartão já pronto?

Criando nosso Cartão

Para criar um novo gerador, precisamos alterar nossa classe Tipos, e adicionar agora um novo método que retorne um Arbitrary de Cartão. Nele podemos utilizar o gerador de Porcentagem que criamos e mapear para um Cartão. Veja como fica a implementação:


public static Arbitrary<Cartão> Cartão() =>
  Porcentagem().Generator
    .Select(porcentagem => new Cartão(Arb.Default.String()
                                                 .Generator
                                                 .Sample(20, 1)
                                                 .Single(),
                                      porcentagem))
    .ToArbitrary();

Veja que estamos mapeando uma porcentagem para o nosso Cartão, e utilizamos outro gerador padrão do FSCheck para construir a descrição do cartão de maneira automática também. Agora basta alterar nosso teste para receber um Cartão


        [Property(Arbitrary = new[] {typeof(Tipos)})]
        public Property DeveDiminuirDificuldadeQuandoAcertarAResposta3(Cartão cartão)
        {
          var calculadora = new CalculadoraDeDificuldade();

          var novoCartão = calculadora.AjustaDificuldade(cartão, true);

          return (novoCartão.Porcentagem < cartão.Porcentagem).ToProperty();
        }

Com isso conseguimos construir qualquer objeto nosso com as restrições que precisamos para determinada propriedade, e deixar nosso teste simples e descritivo.

Podemos também criar classes que representem estados dos nossos objetos, como por exemplo um _ CartãoComPorcentagemAcimaDe80 _ que estende o Cartão. Dá para viajar nisso, mas falaremos disso em outro post.

Se quiser dar uma olhada no código, ele está no meu github: fscheck-examples

Eai, o que achou da utilização de geradores customizáveis? Tem dúvidas? Já usou?

Deixe um comentário ?

Abraços

Imagem usada no post Orsolya Vékony em Unsplash

O post FSCheck: Gerando valores customizados para seu teste de propriedade apareceu primeiro em High5Devs.

Um segredo: O repositório especial do Github!

Arthur Fücher — Fri, 31 Jul 2020 18:33:02 +0000

Muitas pessoas chamam o Github de rede social para pessoas desenvolvedoras, e acho até que faz um sentido. Na minha visão o github faz um tempo que deixou de ser simplesmente uma plataforma para hospedar código. Hoje pessoas compartilham projetos, repositórios de conteúdo, hospedam iniciativas, seguem pessoas, propões ideias, discutem! E o que é uma rede social sem perfil né?

Github Profile

No github sempre foi possível colocar informações básicas sobre você, como por exemplo:

Nome;
Empresa que trabalha;
Links de redes sociais;

Mas sempre as informações eram limitadas ao que eles deixavam ser colocado.

No final de maio apareceu um tweet mostrando uma nova feature do github, a possibilidade de fazer um perfil usando markdown.

Quem me segue no twitter ficou sabendo ?

Eu fiquei bem empolgado, embora ainda não tínhamos muitos detalhes sobre como funcionaria. Pela imagem compartilhada dava para ver que era um markdown, pense nas possibilidades! Eu amo markdown, uma das melhores opções para fazer anotações.

Algumas pessoas começaram a ter acesso para teste, e no começo de julho foi liberado para todas as pessoas.

Beleza Arthur, legal que você gosta de markdown e tá empolgado, mas….

Como faço para usar?

Isso é bem simples para quem já usa github, é só criar um repositório com o nome do seu usuário.

Assim que você digitar o nome do seu repositório o github já vai mostrar um texto dizendo que você descobriu um segredo, o seu repositório especial!

Esse repositório que vai conter o seu perfil, para que o github possa deixar seu perfil público o seu repositório também deve ser público.

O github irá mostrar como seu perfil é o README desse respositório, portanto se você marcar a opção de inicializar o repositório ele já vai deixar tudo o que você precisa criado.

No meu caso eu já tinha um repositório criado com o meu nome :/ Um tempo atrás criei um pacote no npm com meu nome para mostrar umas informações minhas, é bem legal! Se quiser ver só rodar

npx afucher

Já ter o repositório criado para mim não foi um problema já que o pacote tinha o intuito de ter informações sobre mim, então só criei o README da maneira que eu queria.

Agora basta deixar sua imaginação te levar! Como é um arquivo markdown em um repositório, você pode fazer tudo que o github suporta em um markdown. Algumas coisas que você são possíveis:

Adicionar uma imagem como cabeçalho;
Colocar links para sites, projetos e/ou redes sociais;
Usar formatações do markdown (cabeçalhos, tabelas, negrito, etc…);
Adicionar badges (medalhas) customizadas, exemplos: shields.io, badgen.net;

Olha como ficou o meu ?:

Você pode ver o meu perfil no github aqui: https://github.com/afucher/ e o código do README aqui: https://github.com/afucher/afucher/blob/trunk/README.md

Eai, o que achou? O que mais eu poderia colocar?

Crie o seu e compartilhe aqui comigo! Adoraria ver outras ideias.

Abraços

Photo by Stefan Steinbauer on Unsplash

O post Um segredo: O repositório especial do Github! apareceu primeiro em High5Devs.

Onde está meu npm? Windows ou WSL?

Arthur Fücher — Wed, 10 Jun 2020 18:33:47 +0000

Eu já tinha usado linux durante um tempo, não sou super especialista, e agora que voltei a usar Windows resolvi experimentar o WSL. Para quem não conhece o WSL é o Windows Subsystem for Linux, ou seja, na tradução literal é um subsistema windows para linux. Instalei a distribuição do Ubuntu e fui mexer um pouco! Minha ideia era ter minha aplicação node dentro do WSL enquanto uso o VSCode no windows.

A primeira coisa que fiz foi baixar o repositório do github, fácil já que temos o git ali. A segunda coisa foi rodar um npm install, fui direto para o diretório da minha aplicação e rodei o comando. E pronto! ERRO!

Você deve pensar:

Claro que vai dar erro, você não instalou o npm!

É… depois pensei isso também. Mas o erro não tinha sido que o npm não estava instalado, ele reclamava de um module que ele não consegui rodar, num diretório que não tava entendendo direito. Depois que lembrei que não tinha instalado o npm, resolvi usar o comando which para saber onde estava. E advinha?

Onde estava meu npm?

Ele estava num mount que é feito automaticamente para o meu diretório no Windows! Po, lindo que já faz esse mapeamento… mas eu não queria que ele pegasse o npm do Windows, afinal, quero rodar as minhas aplicações usando tudo no linux ¯_(ツ)_/¯

O que está acontecendo?

Por padrão, o WSL vai colocar o path do windows na variável $PATH do linux. Com isso, todos os diretórios que você tem mapeado no windows no PATH para rodar via linha de comando, estarão disponíveis para você no linux.

Nas versões mais novas o WSL provê uma maneira bem simples de alterar esse comportamento, ele usa um arquivo chamado wsl.conf para definir algumas configurações. Esse arquivo fica dentro da sua distribuição, localizado em /etc/wsl.conf

O arquivo não é criado por padrão, caso não exista, basta criar.

Você tem que editar esse arquivo, e adicionar a seguinte configuração:

[interop]
appendWindowsPath = false

Salve e feche o arquivo.

Para que as novas configurações façam efeito você deve reiniciar o WSL. Para isso basta rodar no cmd/Powershell do windows o comando wsl –shutdown

Se tiver feito tudo certo, ao entrar no WSL ele não terá mais o Path do Windows adicionado, e portanto não teremos influência dos programas que estavam configurados no Windows. Conseguimos verificar isso rodando novamente o comando which npm:

Veja que o comando which não retorna nada, e ao tentarmos rodar o npm ele mostra uma mensagem que não encontrou o comando.

Agora basta instalar o node/npm da maneira que achar melhor. Eu utilizo o nvm para instalar e controlar as versões que uso.

Com isso você terá as instalações separadas no Windows e no WSL, podendo mexer a vontade e sem influenciar o outro.

Queria saber de você, já tem usado WSL? Passou por isso também?

Abraços

Photo by Markus Winkler on Unsplash

O post Onde está meu npm? Windows ou WSL? apareceu primeiro em High5Devs.

FsCheck: Mudando sua visão sobre Testes

Arthur Fücher — Tue, 12 May 2020 19:08:44 +0000

Existem momentos em um projeto que simplesmente testar os valores absolutos de entrada e saída de um método não são suficientes para eu me sentir seguro. Um exemplo simples é uma função de multiplicação, acho que nunca vou me sentir seguro de saber que pensei em todas entradas e saídas. Nestes casos uma opção é a criação de testes de propriedade, e para C# existe a biblioteca FsCheck.

A ideia desse post é apresentar a biblioteca FSCheck e como ela me ajudou a fazer um teste num projeto que estou participando.

FSCheck

O projeto consiste em mostrar uma pergunta e a pessoa responde, se a pessoa erra a dificuldade da pergunta aumenta e se a pessoa acerta a dificuldade diminui. Isso influencia para saber a periodicidade que devo mostrar a pergunta para a pessoa.

Esse post não tem a intenção de explicar conceitos básicos de teste de propriedade ou testes generativos

Se acharem interessante fazer um post sobre isso, mandem nos comentários

Quem faz o cálculo dessa dificuldade nova, são uns algoritmos bem legais (mas que eu não criei). Existem vários, e na real, não me importa muito o que eles fazem. Porém, eu quero ter certeza de que se uma pergunta tinha um nível de dificuldade e a pessoa acertou, o novo nível de dificuldade deve ser menor que o anterior.

Resumindo, podemos ver que o meu método tem algumas propriedades:

Quando acertar, a dificuldade tem que diminuir;
Quando errar, a dificuldade tem que aumentar;

E é isso que quero testar, uma propriedade do meu método.

O código que tem a propriedade que quero testar é o método que é executado na primeira linha desse trecho de código:


public Cartão AtualizarDadosDeRevisão(ResultadoEnum resultado, IEstratégia estratégia)
{
  var novaDificuldade = estratégia.AjustarDificuldade(this, resultado);
  this.PorcentagemDificuldade = novaDificuldade;
  return this;
}

Em um teste que estamos acostumados a fazer iríamos ter um código mais ou menos assim:


[Test]
public void DeveDiminuirDificuldadeQuandoAcertarAResposta()
{
  var estratégia = new SuperMemo2Estratégia();
  var cartão = new CartãoBuilder().ComPorcentagemDeDificuldade(100).Generate();

  var novaPorcentagem = estratégia.AjustarDificuldade(cartão, ResultadoEnum.Acertou);

  Assert.True(novaPorcentagem < cartão.PorcentagemDificuldade);

  //Temos que fazer esse Assert, pois como disse não sei (ou não me importo) com a implementação da estratégia.
  //Se tivesse certeza do resultado final, poderia fazer algo assim:
  //novaPorcentagem.Should().Be(96);
}

Esse teste em um primeiro momento, testa o que preciso e é bem simples. Porém, se for pensar, será que para a entrada 99 ele funciona? E para 98? E para 97? E para.. Bom acho que você entendeu hehehe

Então como testar uma propriedade e tentar garantir um número maior de entradas?

FSCheck é uma biblioteca que provê formas para testar automaticamente código baseado em propriedades.

Como no projeto estamos utilizando NUnit para testes, precisamos adicionar uma versão específica: FsCheck.NUnit

Com o FsCheck mudamos o teste de um teste de unidade para um teste de propriedade, portanto as duas primeiras alterações são:

Alterar a annotation de Test para Property;
O retorno do método de teste agora é Property ao invés de void;

Com a mudança do retorno, devemos agora retornar qual a propriedade que queremos testar, que no nosso caso é se a novaPorcentagem é menor que a anterior. Com essas mudanças nosso teste está assim por enquanto:


[Property] 
public Property DeveDiminuirDificuldadeQuandoAcertarAResposta() 
{
 var estratégia = new SuperMemo2Estratégia();
 var cartão = new CartãoBuilder().ComPorcentagemDeDificuldade(100).Generate();
 var novaPorcentagem = estratégia.AjustarDificuldade(cartão, ResultadoEnum.Acertou);

 return (novaPorcentagem < cartão.PorcentagemDificuldade).ToProperty(); 
}

Nesse teste, fica explícita a propriedade que queremos testar! Porém, continuamos com o valor fixo de 100, caindo no mesmo problema anterior. O FsCheck consegue cuidar disso para nós, para isso basta eu dizer para ele que quero que ele gere, expondo como um parâmetro do meu teste o que ele precisa gerar.

Portanto vamos alterar a assinatura do nosso teste para receber a porcentagem e usá-la no teste:


[Property] 
public Property DeveDiminuirDificuldadeQuandoAcertarAResposta(uint porcentagem) 
{
 var estratégia = new SuperMemo2Estratégia();
 var cartão = new CartãoBuilder().ComPorcentagemDeDificuldade(porcentagem).Generate();
 var novaPorcentagem = estratégia.AjustarDificuldade(cartão, ResultadoEnum.Acertou);

 return (novaPorcentagem < cartão.PorcentagemDificuldade).ToProperty(); 
}

E ao rodar o teste temos a seguinte saída:

Executando AstroCards.test.AstroCards.UnitTests.AstroCards.UnitTests.Specs.EstrategiasRevisao.SuperMemo2EstratégiaTestes.DeveAumentarDificuldadeQuandoErrarAResposta ...
Ok, passed 100 tests.

Isso pode gerar uma confusão, já que criamos apenas um teste. O que acontece é que o FsCheck por padrão gera 100 entradas para o nosso teste.

Se quiser ver as entradas, pode utilizar o método Collect:


return (novaPorcentagem < porcentagem).ToProperty().Collect(porcentagem);

Ao rodar o teste teremos algo parecido com isso na saída:

Ok, passed 100 tests.
7% 3u.
5% 6u.
5% 17u.
4% 7u.
4% 28u.
3% 9u.
3% 8u.
3% 5u.
3% 4u.
3% 1u.
2% 64u.
2% 48u.
2% 47u.
2% 42u.
2% 40u.
2% 2u.
2% 29u.
etc...

Ele mostra todas as entradas que foram testadas e, a esquerda delas, qual a % de vezes que aquela mesma entrada foi usada.

O mais interessante, isso tudo rodou em 1.246s! Com isso consigo testar diversas entradas, e garantir que a propriedade do meu método funciona!

Agora um ponto de atenção, só dissemos para o FsCheck que queremos uma entrada do tipo uint, porém para nossa porcentagem queremos somente números de 0 até 100.

O FsCheck disponibiliza formas de lidar com isso, mas isso é um assunto para um próximo post!

Eai, gostou? Tem dúvidas? Quer saber mais sobre o FsCheck ou Testes de Propriedade?

Deixe um comentário

Abraços

Imagem usada no post Chris Liverani on Unsplash

O post FsCheck: Mudando sua visão sobre Testes apareceu primeiro em High5Devs.