A partir do npm, podemos instalar pacotes que muitas vezes formam a base para o desenvolvimento de aplicações complexas, além de embutir no projeto um sistema de gerenciamento desses pacotes e suas dependências.

Neste artigo, vamos explicar as funcionalidades e histórico dos gerenciadores mais populares e suas diferenças. Para melhor compreensão, iremos abordar os termos em inglês, que é a forma mais utilizada no dia a dia do desenvolvimento.

Por que é preciso ter um gerenciador de pacotes?

Como pessoas desenvolvedoras, faz parte da nossa responsabilidade prezar pela otimização de tempo e recursos em nossos projetos. Em uma analogia popular, imaginemos que o nosso trabalho fosse montar carros: não seria eficiente realizarmos da extração do petróleo até a produção final dos pneus, sendo que podemos pegá-los prontos e reutilizar em todos os carros que produzirmos.

Todavia, é sim necessário mantermos o registro de quais componentes foram utilizados e suas versões, para garantir que todas pessoas trabalhando no carro utilizem os mesmos componentes. Com projetos de desenvolvimento, a situação é similar: seria ineficiente que todo projeto desenvolvesse do zero uma aplicação que expõe um servidor para a web, considerando que a mesma atividade já foi realizada milhares de vezes.

Aí entra a necessidade de um gerenciador de pacotes: além de nos apontar para um repositório de recursos, ele também garante que todas pessoas envolvidas no desenvolvimento do projeto sigam a mesma árvore de dependências dele. Ainda, ao utilizar um gerenciador de pacotes, facilita-se em muito a atualização das versões dessas dependências. Ao invés de ter que atualizar o pacote e toda sua lista de dependências (e dependências dessas dependências sucessivamente). Tudo isso é solucionado com um comando simples como npm update nomeDoPacote.

Apesar de utilizar um nome que representa sua própria função, o npm não é o único gerenciador de pacotes do node. Como veremos adiante, empresas também desenvolveram suas próprias soluções, como é o caso do yarn.

As três partes do npm

O npm consiste em partes distintas: o site (https://www.npmjs.com/) e o registro e a Command Line Interface (CLI – Interface de linha de comandos). O site é utilizado para descobrir pacotes, configurar perfis e gerenciar outros aspectos da experiência com npm. A CLI é executada a partir de um terminal e é como a maioria das pessoas desenvolvedoras interagem com o npm. Por fim, o registro é um grande banco de dados público de software JavaScript e as meta-informações que o cercam.

Site npm

O site npm é o local onde é possível realizar o registro de uma conta para publicação de pacotes. Através dele, também é possível consultar os pacotes no registro, além de outras funções de gerenciamento (fazer parte de uma organização e administrar pacotes privados).

Registro npm

O registro npm público é o banco de dados que contém as informações sobre os pacotes publicados, cada um composto por código e metadados. Desenvolvedores de código aberto e desenvolvedores de empresas utilizam o registro npm para contribuir com pacotes para toda a comunidade ou membros de suas organizações e fazer download de pacotes para usar em seus próprios projetos.

Por ser um registro público, outros gerenciadores de pacotes (como o yarn, que explicaremos mais adiante) utilizam o mesmo registro do npm.

CLI npm

Ao utilizar a CLI do npm, é possível instalar pacotes que estejam em seu registro utilizando seu nome e, opcionalmente, a versão desejada. Os pacotes podem ser baixados de forma global (para serem utilizados a qualquer momento, independente do escopo) ou local (para serem vinculados e utilizados especificamente em um projeto). Um guia de uso da CLI exigiria um artigo focado nisso, porém os comandos mais usuais são de instalação e remoção de pacotes, respectivamente: npm install nomeDoP.

npm install nomeDoPacote
npm uninstall nomeDoPacote

Podemos utilizar a flag -g para definir a instalação global do pacote, normalmente utilizada para pacotes voltados para o desenvolvimento em si, com scripts executáveis pelo comando npx.

Ao executar o comando install no escopo de um projeto, os arquivos do pacote e suas dependências são baixados para uma pasta chamada node_modules e organizados através de dois arquivos na raiz do projeto: package.json e package-lock.json. Como sempre, a melhor fonte para saber mais sobre comandos da CLI é a documentação oficial: https://docs.npmjs.com/.

Arquivos package

A organização dos pacotes instalados pelo npm se dá através de dois arquivos no formato JSON: package e package-lock. A seguir, explicaremos a função dos dois.

package.json

Ao instalar pacotes com o comando npm install xxx ou ao iniciar um projeto com npm init, é criado ou modificado um arquivo chamado package.json. Esse arquivo possui as informações básicas para que todas pessoas consigam ver as informações básicas sobre aquele projeto, scripts disponíveis e a rede de dependências, tanto de produção quanto de desenvolvimento.

Caso você apenas instale um pacote em um projeto não inicializado pelo comando npm init, a única chave será dependencies com o valor da propriedade instalada. Exemplo realizando a instalação do Express:

{
"dependencies": {
"express": "^4.18.2"
}
}

Um arquivo package.json naturalmente cresce em conjunto com a complexidade do projeto, de forma automática. Para ver a lista de propriedades disponíveis no arquivo, recomendo a leitura da documentação, especialmente sobre a propriedade scripts que pode definir diversos comandos como execução de testes ou abertura de servidor para desenvolvimento.

package-lock.json

O arquivo package-lock.json é criado e atualizado de forma automática por qualquer operação do npm que modifique os conteúdos da pasta node_modules ou o arquivo package.json. Ele descreve a árvore de arquivos exata que foi gerada, de modo que as instalações subsequentes possam gerar árvores idênticas, independentemente das atualizações de dependência intermediárias.

Ao contrário do package.json, não devemos atualizar esse arquivo manualmente, pois ele serve exatamente para que o npm possa gerar operações idênticas independente do contexto em que esteja sendo rodado. Mais adiante veremos uma alternativa ao npm chamada yarn. Essa alternativa produz um arquivo similar chamado yarn.lock, que possui a mesma função do package-lock.json, mas descreve as instalações realizadas pelo yarn.

Comando npx

Acima, comentamos sobre como podemos usar o comando npx para executar scripts de pacotes instalados com npm. A utilização é simples (entre colchetes são parâmetros opcionais):

npx nomeDoPacote [@] [args...]

Este comando permite que você execute um comando arbitrário de um pacote npm (um instalado localmente ou obtido remotamente – se algum pacote solicitado não estiver presente nas dependências do projeto local ou na máquina de forma global, ele será instalado em uma pasta no cache do npm). Um dos scripts de pacote mais utilizados, principalmente para pessoas desenvolvedoras FrontEnd, é o create-react-app:

npx create-react-app nome-do-meu-app

A execução desse script cria toda estrutura básica de um projeto utilizando React, acelerando consideravelmente o setup do projeto. Dada a natureza do comando, tanto é possível integrar um executável em um pacote com mais ferramentas ou criar pacotes cuja única função é sua execução. Como inspiração, recomendo digitar o comando npx azhariel no terminal para um exemplo de cartão de visitas simples e disponível globalmente para usuários do npm.

Yarn

Apesar de todos os méritos do npm, algumas pessoas desenvolvedoras viram a necessidade de melhorias no gerenciador de pacotes. Uma dessas pessoas foi Sebastian McKenzie, que resolveu iniciar a implementação do gerenciador yarn (em português, literalmente “novelo [de lã]”, mas é uma sigla para “Yet Another Resource Negotiator”; em português, “Mais um negociador de recursos”) enquanto trabalhava no Facebook. Apesar dessa conexão inicial com a gigante tech, o gerenciador é open source e não é mantido diretamente por nenhuma empresa.

Para utilizar o yarn, devemos instalá-lo globalmente utilizando o próprio npm:

npm install --global yarn

Atualmente, o yarn utiliza o mesmo registro mantido pelo npm, apontando apenas para um domínio de CNAME diferente. Sendo assim, as principais diferenças com o gerenciador padrão se dão na arquitetura, estratégia e performance dos gerenciadores.

Comandos

Existem algumas diferenças nos comandos dos dois gerenciadores. Como sempre, sugiro sempre a consulta na documentação oficial de ambos, mas em resumo podemos utilizar a seguinte tabela:

Instalação dos Pacotes

Enquanto o npm instala os pacotes designados diretamente na pasta node_modules, o yarn, por padrão, realiza a instalação a partir de uma pasta cache que é utilizada globalmente na máquina. Apesar de também manter uma pasta cache, o npm busca os arquivos no registro para o projeto. Essa estratégia de cache permite ao yarn, a instalação de dependências de forma offline, contanto que já estejam disponíveis no cache local.

Ainda sobre a instalação de pacotes, o yarn opta por uma estratégia de download e instalação em paralelo, otimizando o tempo total necessário para instalação de diversas dependências. Em contrapartida, o npm realiza o download
e instalação de forma linear, um pacote por vez.

Estratégia Plug N Play (PNP)

Desde 2018, o yarn possibilita a utilização de uma estratégia otimizada para auxiliar o Node a encontrar a localização dos pacotes instalados. Normalmente, o Node procura por módulos instalados de forma recursiva: quando há o requerimento de uma dependência, o runtime procura pela mesma na pasta node_modules de onde houve a requisição. Caso não seja encontrada, ele volta a procurar na pasta node_modules um nível acima, sucessivamente, até encontrar o local de instalação da dependência (ou não encontrá-la e gerar um erro de dependência).

Como alternativa a essa sequência de busca, o yarn gera um único arquivo .pnp.cjs em vez da pasta node_modules. O arquivo .pnp.cjs contém vários mapas: um vinculando nomes e versões de pacotes à sua localização no disco e outro vinculando nomes e versões de pacotes à sua lista de dependências. Com essas tabelas de pesquisa, o yarn pode informar instantaneamente ao Node onde encontrar qualquer pacote que ele precise acessar, desde que faça parte da árvore de dependências.

Ela é utilizada por padrão na versão mais recente do yarn (2, apelidado de berry). Mais informações sobre podem ser encontradas na documentação oficial.

Segurança

Ambos gerenciadores possuem funções que garantem a segurança na instalação e execução dos pacotes. Porém, utilizam estratégias diferentes. Ao requisitar a instalação de um pacote, o yarn garante a integridade dos dados gerando um checksum, que é integrado aos dados e comparado localmente, rejeitando os dados caso os cálculos apresentem resultados diferentes. Por outro lado, o npm utiliza um algoritmo SHA-512 para verificar a integridade dos pacotes, comparando com a hash disposta no arquivo package-lock.json.

Além disso, o npm também conta com o comando npm audit, que informa sobre possíveis vulnerabilidades nas versões das dependências instaladas e o comando npm audit fix, que visa resolver as vulnerabilidades reportadas com upgrade para versões mais recentes.

Velocidade

Como existem diversos fatores que podem influenciar na velocidade final de uma operação dos gerenciadores de pacote, é necessária a análise de diversos cenários. Pensando nisso, um outro gerenciador de pacotes chamado pnpm realiza benchmarks diários entre npm, yarn e o próprio pnpm. Os resultados podem ser conferidos no site do próprio pnpm. Como exemplo, esses são os resultados obtidos na data de publicação deste artigo:

Na maioria dos cenários, o yarn aparece com vantagem sobre as operações do npm, em especial quando utiliza a estratégia PnP em conjunto com cache e lockfile, gerando uma instalação quase instantânea dos pacotes.

Conclusão

Apesar de diferenças pontuais, ao fim do dia, mais importante do que a escolha de gerenciador de pacotes é a escolha dos pacotes em si.

Quando optamos por utilizar um pacote, embarcamos também em todas as dependências relacionadas àquele pacote, o que pode gerar um efeito cascata desnecessário para o andamento do projeto.

Dito isso, a construção de aplicações modernas e profissionais quase que necessariamente exige a instalação de pacotes e, com isso, a compreensão básica sobre o gerenciamento desses pacotes é uma habilidade necessária para a pessoa desenvolvedora.

Veja também:

Como criar Micro Interações em ReactJS?

Veja mais tutoriais!

Autor: Renan Zambon Braga.

O post Gerenciador de Pacotes: entendendo npm, npx e yarn no Node Package Managers apareceu primeiro em Luby Software.

Para estilizar utilizando uma biblioteca como Styled Components, é necessário criar um componente retornado pela função styled e também exportá-lo. Embora pareça pouca coisa, essa etapa será necessária em absolutamente todo o componente que será criado, o que é quase certo que serão muitos. E estamos falando aqui apenas em criar as condições necessária para iniciar o projeto!

Felizmente, há uma solução muito simples de ser implementada e que causa um grande impacto na produtividade: os snippets, que são blocos de códigos pré-configurados e facilmente acessíveis. O VSCode possui muitas extensões de snippets excelentes que podem ser encontradas sem dificuldade pesquisando “[nome da tecnologia] snippets”.

No entanto, muitas vezes faz mais sentido criar seus próprios snippets, utilizando o seu padrão de escrita ou o padrão estabelecido pelo seu time.

Nesse artigo, vamos aprender o básico sobre como criar snippets no VSCode e aplicar esses conhecimentos na criação de códigos muito familiares para os desenvolvedores de React: a criação de um componente funcional e estilização utilizando o Styled Components.

Passos iniciais para criar snippets no VSCode

Vamos criar nosso primeiro snippet:

1. No VSCode, digite o atalho Ctrl + Shift + P para ter acesso às opções;
2. Selecione “Snippets: Configure User Snippets”;
3. Selecione “New Global Snippets File…” (como ele deverá estar disponível para todos os projetos que faremos, deverá ser um arquivo global). Se o snippet em questão deverá ser disponibilizado para apenas uma linguagem, ele poderá ser criado no arquivo específico ao invés do arquivo global;
4. Escolha um nome para o seu arquivo de snippets. Uma sugestão é separar seus arquivos por tecnologia. Como estamos criando snippets de React, esse será o nome do nosso arquivo.

![[criar snippet.gif]]

Estrutura de configuração do snippet

Assim, criamos um arquivo JSON contendo as instruções de como criar um snippet comentadas e um exemplo simples. Vamos destrinchar a estrutura desse exemplo que o VSCode nos forneceu.

"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

O primeiro passo é definir o nome do snippet, no caso, “Print to console”. Dentro desse objeto, vamos definir:

• “scope” – serão as extensões de arquivo que terão acesso ao snippet (observe a formatação: uma única string com as extensões separadas por vírgula)
• “prefix” – apelido para o VSCode entender que queremos utilizá-lo
• “body” – onde estará contido o código que queremos reutilizar (mais adiante vamos detalhar como formatar o código dentro desse body)
• “description” – detalhará o que o código faz.

Para utilizar esse snippet de exemplo, vamos criar um arquivo com extensão “ts” (perceba que o TypeScript está definido no scope) e digitar o prefix para verificar se ele será reconhecido.

![[2022-09-16 (2).png]]

De fato, ao digitar “log”, a sugestão do nosso snippet é exibida e o nome que foi definido é mostrado no canto direito.

Formatação do código no body do JSON

Você deve ter notado que o “body” (espaço onde armazenamos o código que queremos reaproveitar) tem uma estrutura de array de strings. Portanto, não podemos simplesmente copiar um código escrito em JavaScript e inseri-lo em um espaço que está esperando receber um array de strings.

Uma alternativa seria separar o código em várias strings, indicando os locais onde deveria haver quebra de linha. Porém, isso seria uma tarefa mais trabalhosa do que pode parecer e ainda haveria a preocupação com a indentação do código.

Felizmente há uma ferramenta para nos ajudar nesse processo. Com o Snippet Generator, é possível escrever o código de maneira convencional e ele se preocupa em convertê-lo para a estrutura do snippet.

No exemplo a seguir, definimos um título, o prefixo e o corpo do código e obtemos uma estrutura pronta. Sem a definição do scope, o snippet fica acessível para todo tipo de arquivo. Se esse não for um comportamento desejado, é importante acrescentar o scope manualmente dentro do seu arquivo.

![[2022-09-16 (3).png]]

Sintaxe para a criação do snippet

É comum que você queira criar um snippet mais flexível. Uma maneira de alcançar esse objetivo é definir pontos do código que não serão fixos. Ou seja, em cada contexto específico, o usuário poderá complementar o snippet da maneira que quiser. Assim, o VSCode possibilita definir os locais de parada do cursor e o usuário poderá navegar entre eles mais rapidamente utilizando a tecla Tab.

Esses pontos serão definidos digitando $1, $2, etc., e o cursor irá seguir em ordem crescente. Além disso, o último local do cursor será definido por $0 . Os pontos que tiverem a mesma identificação serão atualizados simultaneamente. Vamos ver um exemplo:

"body": [
"function $1() {",
" return(",
" <$1Container>",
" $0",
" <$1Container/>",
" )",
"}",
"",
"const $1Container = styled.div``",
"",
""
],

O exemplo acima é o body de um snippet que cria um componente funcional e um componente para estilização com o Styled Components.

O primeiro ponto desse código que será modificável é o título do componente. Além disso, esse título deverá aparecer no componente de estilização e ser retornado como container do componente na função. Ou seja, teríamos que digitar esse texto 4 vezes, se não fosse a possibilidade de marcar o local do cursor com $1 e digitá-lo nos 4 locais simultaneamente.

Definição de estrutura

Definido o nome do componente, o próximo passo seria definir sua estrutura. Por isso, a posição final do cursor foi definida com $0 no return da função dentro da tag pai. Dessa forma, precisaríamos apenas dos seguintes passos para iniciar a criação desse componente:

1. Chamar o snippet com o prefix;
2. Digitar o nome do componente + Tab + começar a criar sua estrutura HTML.

Outra maneira de deixar o código mais flexível é utilizando as variáveis do VSCode. As variáveis nos permitem acessar informações importantes que poderão ser úteis para a criação do snippet. Para utilizá-las, basta digitar ${name}, onde name é o nome da variável.

Outra possibilidade é definir um valor padrão para quando a variável não tiver definida com ${name:default}. Alguns exemplos de variáveis são:

• TM_FILENAME: o nome do arquivo em que o snippet está sendo chamado;
• TM_DIRECTORY: o caminho do diretório em que o snippet está sendo chamado;
• TM_SELECTED_TEXT: o texto selecionado no momento em que o snippet é chamado;
• CURRENT_YEAR: ano atual (há outras variáveis relacionadas à data).

As demais variáveis podem ser visualizadas nesta documentação. Os valores das variáveis também podem ser modificados através de expressões regulares. Essa situação acontece, por exemplo, quando se deseja remover a extensão do nome do arquivo.

Criando nosso primeiro snippet

Agora é hora de colocar a mão na massa! Vamos aplicar esses conhecimentos para criar 2 snippets no VSCode com blocos de código familiares a quem desenvolve aplicações com o React: o componente funcional e um componente para estilização com o Styled Components.

Componente funcional

Vamos utilizar a ferramenta de geração de snippets vista anteriormente. O primeiro passo é definir o seu nome. Esse nome não deverá ser tão grande, já que ele será exibido no momento em que o prefix for digitado.

No entanto, ele deverá ser bem descritivo, para que possamos diferenciá-lo de outros snippets. O nome utilizado aqui será “Create React Function Component”.

Definição do prefix

O próximo passo é definir o seu prefix. Uma sugestão é utilizar as primeiras letras do nome do snippet. Assim, teremos “crfc”. Vamos copiar e colar essa estrutura inicial dentro do nosso JSON global.

Ainda precisamos definir o scope do nosso snippet. Como eu desejo acessá-lo apenas em projetos de React sem TypeScript, a escolha natural aqui para o scope é “javascript, javascriptreact”. Caso deseje verificar como o nome das extensões foi definido no VSCode para ser reconhecido no scope, acesse as opções com Ctrl + Shift + P e selecione “Snippets: Configure User Snippets”. Dessa forma, será exibida uma lista com as extensões.

Pensando nisso, essa é a nossa estrutura inicial:

"Create React Function Component": {
"scope": "javascript, javascriptreact",
"prefix": "crfc",
"body": [
"",
"",
""
],
"description": "Create React Function Component"
}

Criação do body

Vamos agora nos dedicar à criação do body. Uma estrutura “crua” de um componente seria:

function Component() {
return(
<div>
</div>
);
}
export default Component;

Perceba, no entanto, que o nome do componente já vem definido, assim como a tag “div”, e esses são elementos que certamente desejaremos mudar, dependendo de onde esse código estiver sendo utilizado.

Então, é mais interessante que o nome do componente e a tag do container não sejam definidos. E, ao invés disso, o usuário tenha acesso mais fácil a esses locais para que possa manipular o código. Portanto, vamos definir locais de parada para o cursor.

"body": [
"function $1() {",
" return(",
" <$2>",
" $0",
" </$2>",
" );",
"}",
"",
"export default $1;"
],

Note agora que no local do nome do componente tem $1, que também aparece na linha do export, para que o usuário digite apenas uma vez. Esse é o primeiro ponto de parada do cursor.

Tag HTML

O próximo ponto é na tag HTML do container para que o usuário possa escolher por si mesmo qual tag utilizar. E o último ponto de parada é o $0, permitindo que a estrutura do componente seja desenvolvida sem a necessidade de nenhum click adicional no mouse.

Outra forma de deixar o nome do componente flexível é utilizando as variáveis. Para o caso em que o nome do arquivo é o mesmo que o nome do componente, basta utilizar a variável “TM_FILENAME_BASE”, que retorna o nome do arquivo sem sua extensão.

"body": [
"function ${TM_FILENAME_BASE}() {",
" return(",
" <$1>",
" $0",
" </$1>",
" );",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],

Agora, se você utiliza uma estrutura de diretório diferente, mas também muito comum, de criar uma pasta com o nome do componente e chamar o arquivo do componente de “index.jsx”, outra variável deverá ser utilizada: a TM_DIRECTORY.

![[2022-09-19 (1).png]]

O problema é que essa variável não retorna apenas o nome do diretório, mas todo o seu caminho. Por isso, é necessário fazer uma pequena transformação utilizando uma expressão regular para que seja retornado apenas o seu nome.

Sem entrar nos detalhes de como funcionam as expressões regulares, podemos utilizar a variável ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}.

Dessa forma, o snippet ficará assim:

"Create React Function Component": {
"scope": "javascript, javascriptreact",
"prefix": "crfc",
"body": [
"function ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}() {",
" return(",
" <$1>",
" $0",
" </$1>",
" );",
"}",
"",
"export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/};"
],
"description": "Create React Function Component"
}

![[criar componente.gif]]

Componente de estilização

Para criar o componente de estilização com o Styled Components, vamos aplicar a mesma estratégia. Dessa vez, o nome do snippet será “Create Styled Component” e o seu prefix será “csc”. Serão acrescentadas ao scope as extensões “typescript”(.ts) e “typescriptreact” (.tsx).

Então, teremos a seguinte estrutura inicial:

"Create Styled Component": {
"scope": "javascript, javascriptreact, typescript, typescriptreact",
"prefix": "csc",
"body": [
"",
"",
""
],
"description": "Create Styled Component"
}

Para o nome do componente, utilizaremos também a variável TM_DIRECTORY modificada pela expressão regular utilizada anteriormente. Além disso, a tag HTML do componente deverá ser flexível, portanto, o primeiro ponto de parada do cursor será no local da tag.

Por fim, o cursor deve estar posicionado de forma que o usuário possa iniciar a configuração de estilos facilmente. O snippet final ficará assim:

"Create Styled Component": {
"scope": "javascript, javascriptreact, typescript, typescriptreact",
"prefix": "csc",
"body": [
"import styled from 'styled-components';",
"",
"const ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}Container = styled.$1`",
" $0",
"`",
"",
"export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}Container;"
],
"description": "Create Styled Component"
}

![[styled.gif]]

Snippet para integrar o componente funcional ao componente de estilização

Se estivermos criando um componente que será estilizado com o Styled Components, é certo que o arquivo com a estilização será importado e, muito provavelmente, a tag HTML retornada por esse componente será o próprio componente criado pelo Styled Components. Assim, podemos criar um snippet de componente que já prevê essa estilização.

O nome deverá especificar que esse é um componente funcional que já importa o componente de estilização. Portanto, um nome possível para esse snippet é “Create React Function Component with Styled Components” e o prefix será “crfcsc”. À estrutura do body será adicionado o import e a tag do componente de estilização criado.

Portanto, o resultado será o seguinte snippet.

"Create React Function Component with Styled Components": {
"scope": "javascript, javascriptreact",
"prefix": "crfcsc",
"body": [
"import ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container from
\"./styles\";",
"",
"function ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}() {",
" return(",
" <${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container>",
" $0 ",
" </${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container>",
" );",
"}",
"",
"export default ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/};"
],
"description": "Create React Function Component with Styled Components"
}

![[function com styled.gif]]

Veja também:

Como criar CRUD Básico com NestJS, GraphQL e MySQL

Próximos passos

Os snippets criados neste artigo têm como finalidade apenas ilustrar o potencial dessa ferramenta para aumentar a produtividade no desenvolvimento. Utilize a documentação e as dicas fornecidas aqui para criar snippets no VSCode de acordo com suas necessidades. Uma sugestão para praticar é reutilizar esses snippets para o caso com TypeScript.

Autor: Vinícius Ribeiro.

O post Como criar snippets no VSCode para agilizar o desenvolvimento em React apareceu primeiro em Luby Software.

Os atalhos do GIT permitirão que possamos otimizar o trabalho do dia a dia, resultando em melhor experiência e principalmente no aumento de produtividade.

[adrotate banner=”4″]

Como utilizar atalhos do GIT?

Toda a lógica dos atalhos consiste na criação de nossos próprios comandos do GIT. Assim, teremos comandos diferenciados e que agem conforme sua preferência, por exemplo:

~: git c “feat: melhorando sua produtividade com o GIT”

No comando acima, na minha máquina, ele executa dois comandos, o “git add .” e “git commit -m “feat: melhorando sua produtividade com o GIT””. Dessa forma, não precisamos mais escrever os dois comandos, mas sim apenas um.

Iniciando a configuração

Então, vamos lá! Primeiramente, abra seu terminal e digite o seguinte comando:

~: git config --global -e

Em seguida, você irá abrir o seu editor de preferência. No meu caso, deixei o arquivo bem cru, então ele está assim:

Neste caso, não temos a sessão [alias]. Dessa forma, vou adicioná-la abaixo das configurações de [user], da seguinte forma:

Após declararmos a sessão de Alias, podemos criar nosso primeiro atalho. Por isso, vamos começar com o comando do GIT que mostra o status. Porém, iremos fazer com que ele retorne o status de uma forma mais enxuta, utilizando o parâmetro “-s”, segue o código:

s = !git status -s

Em seguida, vamos adicionar o comando que demonstrei no início deste artigo, aquele que adiciona os arquivos e “commita” logo em seguida, sendo ele:

c = !git add --all && git commit -m

Obs.: lembre-se que, caso não queira adicionar todos os arquivos alterados para o processo de commit, você deve incluir individualmente os arquivos que deseja com o comando tradicional git add [nome do arquivo] e depois executarmos o comando git commit -m “[Mensagem Descritiva]”. Ou seja, o processo tradicional.

Git log

O próximo comando será o “git log”, usaremos a opção “—pretty=format:” para deixarmos o nosso log mais bonito:

l = !git log --pretty=format:'%C(blue)%h%C(red)%d %C(white)%s - %C(cyan)%cn, %C(green)%cr

O código utilizado segue a seguinte lógica:

• %h: o percentual com a letra h minúscula irá apresentar o hash reduzido do commit;
• %d: o percentual com a letra d minúscula irá mostrar a branch, e também a tag (caso exista) do commit;
• %s: o percentual coma letra s minúscula (de subject) irá demonstrar a mensagem do commit;
• %cn: nome da pessoa que realizou o commit;
• %cr: a data relativa do commit.

Também utilizamos a opção de mostrar cores diferentes para cada coluna, o que facilita a visualização. Para isso, utilizamos o parâmetro % com a letra C maiúscula (%C), seguido da cor que desejamos entre parênteses (blue).

Segue um exemplo de como fica o comando:

Veja também:

Como criar um projeto com Vite

Tutoriais de desenvolvimento de software

Conclusão

Assim concluímos a configuração dos atalhos do GIT que mais utilizamos. Lembrando que existem diversas outras opções de configuração, que podem ser verificadas na documentação oficial do GIT clicando aqui.

Autor: Paulo Santana.

[adrotate banner=”5″]

O post Como configurar atalhos do GIT apareceu primeiro em Luby Software.

Entretanto, antes de qualquer coisa, vamos entender o conceito de todos esses frameworks? Então, vamos lá!

Segundo a documentação, NestJS é:

Nest (NestJS) é mais um framework, voltado principalmente para construção de aplicações Node.js para
servidores Back-end. Dessa forma, uma das vantagens de se usar o NestJS é a alta escalabilidade do lado do servidor e a estrutura automática criada incialmente, seguindo os princípios do S.O.L.I.D.

[adrotate banner=”4″]

Como o NestJS utiliza TypeScript, é possível a criação de códigos fortemente tipados, mas também é possível utilizá-lo com JS puro.

A construção do código inicialmente combina elementos de OOP (Programação Orientada a Objetos), FP (Programação Funcional) e FRP (Programação Reativa Funcional). Além disso, o Nest faz uso de estruturas robustas de servidor HTTP como o Express (o padrão). Bem como, opcionalmente, pode ser configurado para usar o Fastify também!

O Nest fornece um nível de abstração acima dessas estruturas comuns do Node.js (Express/Fastify), mas
também expõe suas APIs diretamente ao desenvolvedor. Dessa forma, oferecendo aos desenvolvedores a liberdade de usar a infinidade de módulos de terceiros que estão disponíveis para a plataforma subjacente.

O que é GraphQL?

Segundo a documentação, GraphQL é:

GraphQL é uma linguagem de consulta para APIs de alto desempenho, relacionado ao tempo de consulta aos principais SGBDs. Dessa forma, o GraphQL fornece uma descrição completa e compreensível dos dados e requisições de sua API, oferecendo aos clientes o poder de solicitar exatamente o que eles precisam e nada mais!

Iniciando com NestJS e GraphQL

Primeiramente, para iniciar nosso projeto CRUD, iremos realizar todas as instalações necessárias para a criação do projeto.

Instalações necessárias

• NodeJS
• Yarn
• Visual Studio Code

Extensões:

1. JavaScript (ES6) code snippets
2. Tabnine AI Autocomplete
3. Path Intellisense
4. Nodejs Snippets
5. Material Icon Theme
6. GitLens — Git supercharged
7. Gitmoji
8. Dracula Official
9. ENV
10. [Deprecated] Bracket Pair Colorizer 2
11. Code Spell Checker

• Insomnia
• XAMPP
• DBeaver

Projeto no github

Para visualizar o projeto deste artigo, clique neste link.

Instalações e start do projeto CRUD

1. Abra o terminal do S.O como admin e execute o comando para instalação do NestJS de maneira Global ⇒ npm i -g @nestjs/cli
2. Agora, execute o terminal em um local da sua preferência para criação do projeto, e digite o comando ⇒ nest new nest-api-withgraphql

Então, após executar o comando acima, a imagem abaixo descreve o que vocês devem visualizar de saída.

3. Na imagem 1, escolha o seu gerenciador de pacotes favorito! Neste caso, vamos escolher o YARN.

Dessa forma, após as instalações para o NestJS estiverem finalizadas, a imagem abaixo descreve o que você deve visualizar de saída.

4. Na imagem 2, digite o comando cd .\NOME_DO_PROJETO para acessar a pasta criada com o projeto que definimos. Logo após entrarmos no projeto, vamos abri-lo no VSCode com o comando code .. Perfeito, agora podemos fechar o terminal!
5. Para entender a estrutura criada, leia a documentação deste link.

Integrando o NestJS com Typeorm e MySql

Documentações de referência para projeto CRUD: https://docs.nestjs.com/techniques/database e https://typeorm.io/.

1. Antes de tudo vamos abrir o terminal em nosso VSCode, através do comando CTRL + J
2. Agora vamos fazer a instalação das dependências do typeorm e mysql:
   yarn add @nestjs/typeorm typeorm mysql2

Observação: vou fazer a instalação do mysql, porque este é o SGBD que mais utilizei na minha trajetória como programador, mas você pode utilizar outros, como postgresql, mssql, etc. É só fazer a instalação da lib e adicionar os parâmetros de conexão conforme apresentado no código abaixo.

Dentro do diretório src , vamos modificar o arquivo app.module.ts.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TypeOrmModule } from '@nestjs/typeorm'
/*
Arquivo para importação dos módulos utilizados no projeto e conexão com o banco de dados!
Sejam bem-vindos ao coração da nossa API!
*/
@Module({
imports: [
TypeOrmModule.forRoot({
type: "mysql",
host: "localhost",
port: 3306,
username: "root",
password: "",
database: "graphql_database",
entities: [
"dist/**/*.entity{.ts,.js}"
],
synchronize: true
})
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule { }

3. Importe o TypeOrmModule e adicione-o dentro do array de imports: []. Isso vai possibilitar a utilização do TypeORM em nossa API. A função forRoot() precisa receber alguns parâmetros de conexão com o banco, através de um json.

Caso queira saber mais sobre esses parâmetros, consulte a documentação neste link.

4. Ative os serviços de mysql e apache no XAMMP ou outro software da sua preferência!

5. Levando em consideração que você já saiba como criar um banco de dados, faça os passos descritos na imagem abaixo para criação desse banco de dados no DBeaver!

Configurando o GraphQL

Documentações de referência para projeto CRUD: https://docs.nestjs.com/graphql/quick-start, https://www.npmjs.com/package/graphql, https://www.npmjs.com/package/@nestjs/apollo, https://www.npmjs.com/package/apollo-server-express e https://www.npmjs.com/package/@nestjs/graphql.

1. Instalação da dependências: yarn add @nestjs/graphql @nestjs/apollo graphql graphql-tools apollo-server-express
2. Dentro do diretório src, vamos modificar o arquivo app.module.ts novamente, com a nova funcionalidade do GraphQLModule:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TypeOrmModule } from '@nestjs/typeorm'
//importações para utilização do graphql
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
@Module({
imports: [
TypeOrmModule.forRoot({
type: "mysql",
host: "localhost",
port: 3306,
username: "root",
password: "",
database: "graphql_database",
entities: [
"dist/**/*.entity{.ts,.js}"
],
synchronize: true
}),
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule { }

Adicione GraphQLModule dentro do array de imports: []. Conforme o código supracitado! Assim, vamos utilizar o autoSchemaFile para fazer a geração do arquivo de schema.gql com as tipagens de forma automática e utilizar o servidor do Apollo para utilização do GraphQL.

Criando o Module, Service, Resolver e Entity de Users

1. Comando para criação do modulo: nest g module user

Dessa forma, a imagem abaixo descreve o que você deve visualizar de saída.

O comando irá instanciar automaticamente o módulo de usuário e criar o arquivo. Assim, o mesmo acontecerá para os próximos passos.

2. Comando para criação do serviço: nest g s user
3. Comando para criação do resolver: nest g r user
4. Vamos criar nosso arquivo de entidade no caminho src/user com o seguinte nome user.entity.ts

5. Na entidade, vamos especificar todas as colunas que teremos em nossa tabela de users no banco de dados.

Configurando nossa entidade de Usuários

Documentações de referência para projeto CRUD: https://docs.nestjs.com/graphql/resolvers e https://docs.nestjs.com/graphql/cli-plugin.

As entidades se assemelham bastante com a estrutura de migrations. Então, é nesse arquivo que definimos como vai ficar estruturado as colunas da tabela em nosso banco de dados!

1. Vamos adicionar ao arquivo que criamos na última etapa do tópico anterior (src/user/user.entity.ts), o seguinte trecho de código:

// importações
import { Field, ID, ObjectType } from '@nestjs/graphql';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
@ObjectType() //Informa que é um objeto
@Entity() //Especifica ao código que essa classe se trata de uma entidade
export class User {
@PrimaryGeneratedColumn() // Especifica ao NestJS que a coluna id é uma coluna de chave primaria que é gerada automaticamente
@Field(() => ID) // Informa ao graphql o tipo da coluna
id: string; // tipagem da coluna
@Column()
name: string;
@Column()
email: string;
}

2. Para não precisar especificar @Field() para colunas de tipos comum e deixar o código mais limpo, podemos utilizar o seguinte trecho de código no arquivo nest-cli.json na raiz do nosso projeto.

{
"collection": "@nestjs/schematics",
"sourceRoot": "src",
"compilerOptions": {
"plugins": [
{
"name": "@nestjs/graphql/plugin",
"options": {
"typeFileNameSuffix": [
".input.ts",
".args.ts",
".entity.ts",
".type.ts"
]
}
}
]
}
}

DTO e Validators

Documentação de referência para projeto CRUD: https://docs.nestjs.com/techniques/validation.

1. Instalação da lib para validação: yarn add class-validator
2. Instalação da lib para transformação da classe: yarn add class-transformer
3. Dentro do caminho src/user, crie uma pasta e nomeie como dto e adicione dois arquivos dentro desta pasta chamada createuser.input.ts e update-user.input.ts
4. Dentro do arquivo create-user.input.ts, adicione o seguinte trecho de código:

// importações
import { InputType } from "@nestjs/graphql";
import { IsEmail, IsNotEmpty, IsString } from "class-validator";
@InputType() //Define que essa classe é do tipo input, que são os valores que serão recebidos pelo endpoint
export class CreateUserInput {
@IsString()// Validação do tipo do input
@IsNotEmpty({ message: "Campo de name obrigatório" })//Validação para não aceitar o valor vazio para chave
name: string; //Tipagem da coluna
@IsEmail()// Validação do tipo do input
@IsNotEmpty({ message: "Campo de email obrigatório" })//Validação para não aceitar o valor vazio para chave
email: string; //Tipagem da coluna
}

Então, dentro do arquivo update-user.input.ts, adicione o seguinte trecho de código:

// importações
import { InputType } from "@nestjs/graphql";
import { IsEmail, IsNotEmpty, IsOptional, IsString } from "class-validator";
@InputType() //Define que essa classe é do tipo input, que são os valores que serão recebidos pelo endpoint
export class UpdateUserInput {
@IsString()// Validação do tipo do input
@IsNotEmpty({ message: "Campo de name obrigatório" })//Validação para não aceitar o valor vazio para chave
@IsOptional()// Define o campo como opcional
name?: string; //Tipagem da coluna
@IsEmail()// Validação do tipo do input
@IsNotEmpty({ message: "Campo de email obrigatório" })//Validação para não aceitar o valor vazio para chave
@IsOptional()// Define o campo como opcional
email?: string; //Tipagem da coluna
}

6. Adicione, no arquivo src/main.ts, o uso global das validações:

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalPipes(new ValidationPipe()) //Para utilizar as validações globalmente
await app.listen(3000);
}
bootstrap();

Implementando o Service de User

Documentação de referência para projeto CRUD: https://docs.nestjs.com/providers#services

Service é o arquivo responsável por conter todas nossas funções que faram comunicação direta com o banco. Além disso, ele se assemelha muito aos controllers em outros frameworks.

Portanto, vamos modificar o arquivo src/user/user.service.ts com o seguinte trecho de código:

// importações
import { Injectable, InternalServerErrorException, NotFoundException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateUserInput } from './dto/create-user.input';
import { UpdateUserInput } from './dto/update-user.input';
import { User } from './user.entity'
@Injectable() // para fazer injeção de dependências no nestjs
export class UserService {
//injeta o repositório utilizando a entidade de usuário
constructor(
@InjectRepository(User)
private userRepository: Repository<User>
) { }
//método para listagem de usuários
async findAllUsers(): Promise<User[]> {
const users = await this.userRepository.find()
return users
}
//método para trazer um usuário por id
async findUserById(id: string): Promise<User> {
const user = await this.userRepository.findOneBy({ id })
if (!user) {
throw new NotFoundException("Usuário não encontrado")
}
return user
}
//método para criar um usuário
async createUser(data: CreateUserInput): Promise<User> {
const user = this.userRepository.create(data);
const userSaved = await this.userRepository.save(user)
if (!userSaved) {
throw new InternalServerErrorException('Falha na criação do usuário')
}
return userSaved
}
//método para alterar um usuário
async updateUser(id: string, data: UpdateUserInput): Promise<User> {
const user = await this.findUserById(id);
await this.userRepository.update(user, { ...data });
const userUpdated = this.userRepository.create({ ...user, ...data })
return userUpdated;
}
//método para exclusão de um usuário
async deleteUser(id: string): Promise<boolean> {
const user = await this.findUserById(id);
const deleted = await this.userRepository.delete(user);
if (deleted) {
return true;
}
return false;
}
}

Implementando o Resolver de User e importando o TypeORM para o módulo de User

Documentação de referência para projeto CRUD: https://docs.nestjs.com/graphql/resolvers#resolvers

Os Resolvers fornecem instruções para transformar uma operação do GraphQL (@Query @Mutation) em dados. Assim, aqui ficará definido o que uma função recebe e o que ela retorna!

1. Vamos modificar o arquivo src/user/user.resolver.ts com o seguinte trecho de código:

// importações
import { Args, Mutation, Resolver, Query } from '@nestjs/graphql';
import { CreateUserInput } from './dto/create-user.input';
import { UpdateUserInput } from './dto/update-user.input';
import { User } from './user.entity';
import { UserService } from './user.service';
@Resolver('User')
export class UserResolver {
//Ejetar nosso userService
constructor(private userService: UserService) { }
@Query(() => [User]) //informa ao graphql que esse método vai retornar um array de usuários e que não há modificação do banco com ela
async users(): Promise<User[]> {
const users = await this.userService.findAllUsers()
return users
}
@Query(() => User) //informa ao graphql que esse método vai retornar um usuário em especifico e que não há modificação do banco
async user(@Args('id') id: string): Promise<User> {
const user = await this.userService.findUserById(id)
return user
}
@Mutation(() => User) //informa ao graphql que esse método vai modificar o estado no nosso banco de dados
async createUser(@Args('data') data: CreateUserInput): Promise<User> {
const user = await this.userService.createUser(data)
return user
}
@Mutation(() => User) //informa ao graphql que esse método vai modificar o estado no nosso banco de dados
async updateUser(
@Args('id') id: string,
@Args('data') data: UpdateUserInput
): Promise<User> {
const user = this.userService.updateUser(id, data);
return user;
}
@Mutation(() => Boolean) //informa ao graphql que esse método vai modificar o estado no nosso banco de dados
async deleteUser(
@Args('id') id: string
): Promise<boolean> {
const deleted = await this.userService.deleteUser(id);
return deleted;
}
}

2. Vamos modificar o arquivo src/user/user.module.ts com o seguinte trecho de código:

import { Module } from '@nestjs/common';
import { UserService } from './user.service';
import { UserResolver } from './user.resolver';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './user.entity';
@Module({
imports: [
TypeOrmModule.forFeature([User])
],
providers: [UserService, UserResolver]
})
export class UserModule { }

Testando nossos endpoints

1. Comando para execução do servidor: yarn run start:dev

Com isso, a saída deve se apresentar como na imagem abaixo:

2. Cole o seguinte endereço no seu navegador: http://localhost:3000/graphql

Dessa forma, após colar o endereço supracitado no navegador, a seguinte página deve aparecer:

Esse é o playground do graphql. Ou seja, a ferramenta que auxilia em nossas requisições!

3. Para utilizar o playground, vamos primeiro fazer uma listagem de todos os usuários! Digite o código abaixo para fazer essa requisição:

query{
users{
id
name
email
}
}

Assim, ao fazer a consulta na aba esquerda, a aba direita da ferramenta deve exibir o seguinte resultado:

Isso acontece porque não temos nenhum usuário registrado.

5. Para registrar um usuário, crie uma nova aba no playground e cole o seguinte trecho de código.

mutation {
createUser(
data: {
name: "Edith Silva"
email: "edith@email.com"
}
) {
id
name
email
}
}

Dessa forma, a resposta deve aparecer como na imagem abaixo:

Então, à essa altura, já conseguimos listar o usuário criado!

6. Agora é só você criar mais 3 novas abas, uma para alterar, outra para mostrar pelo ID e outra para excluir, os Body’s estão disponíveis conforme o trecho de código abaixo:

// Em uma nova aba do playground, adicione o body abaixo para fazer uma busca pelo id
query{
user(id: "1"){
id
name
email
}
}
// Em uma nova aba do playground, adicione o body abaixo para fazer uma Alteração
mutation {
updateUser(id: "1", data: { email: "manoel@gmail.com" }) {
id
name
email
}
}
//Em uma nova aba do playground, adicione o body abaixo para fazer uma exclusão
mutation {
deleteUser(id: "1")
}

Veja também:

Entenda gerenciador de pacotes

Uma fração do CRUD

Assim encerramos nossa implementação de um CRUD básico de usuários, utilizando o NestJS, GraphQL e SGBD MySQL. O que foi ensinado nesse artigo é uma pequena fração de tudo que o CRUD essas demais tecnologias podem nos entregar!

Dessa forma, sugiro que a partir daqui, vocês explorem cada vez mais a própria documentação e qualquer dúvida, estou aberto para discussões através do Discord (Manoel Fernandes Neto#5644) ou Linkedin.

Autor: Manoel Fernandes Neto.

[adrotate banner=”5″]

O post Como criar CRUD Básico com NestJS, GraphQL e MySQL apareceu primeiro em Luby Software.

O que é Vite?

O Vite foi criado pelo Evan You, que também é o criador do Vue.js. Vite significa “rápido” em francês, e se pronuncia /vit/. Essa é uma ferramenta de compilação Javascript que simplifica a maneira como construímos e desenvolvemos front-end de aplicações web.

Além disso, os templates suportados oficialmente pelo Vite são:

• React Js;
• Vue Js;
• Vanilla Js;
• Preact Js;
• Lit Js;
• Svelte Js.

Além disso, em todos eles nós temos a opção com o template em Typescript.

Porque utilizar Vite?

Atualmente, a grande maioria dos navegadores já suportam os ESModules. Ou seja, conseguimos fazer importações entre arquivos Javascript de maneira nativa, o que não era possível. Anteriormente, era necessário a utilização de ferramentas como Babel, Webpack, entre outros.

Sendo assim, muitas funções dessas ferramentas não são mais necessárias. E é disso que o Vite se aproveita.

O Vite faz jus ao nome, sendo bem veloz nas renderizações de fast refresh e também na criação de projetos. Pensando nisso, trouxe também neste artigo a criação de um projeto com essa aplicação.

Criando um projeto utilizando Vite

Para criar um projeto Vite, é recomendado que tenhamos o Node.js da versão 12.2.0 para cima. Isso porque alguns templates serão necessários as versões mais novas.

Assim, para criar seu projeto, dentro do diretório desejado, abra o terminal e execute o comando:

npm create vite@latest

Ou com yarn e pmpn:

yarn create vite
pnpm create vite

Utilizando os templates na criação do projeto

Para criar um projeto Vite com um template específico, mostro aqui o exemplo de um projeto Vue.js:

# npm 6.x
npm create vite@latest nome-do-projeto --template vue
# npm 7+, necessário mais 2 "-" antes do template:
npm create vite@latest nome-do-projeto -- --template vue
# yarn
yarn create vite nome-do-projeto --template vue
# pnpm
pnpm create vite nome-do-projeto -- --template vue

E, para criar um projeto React e Typescript, veja o exemplo a seguir:

# sem passar o nome no comando
npm create vite
# passando o nome no comando
npm create vite my-app

Após rodar esse comando, se você não adicionou diretamente o nome do seu projeto no comando, o Vite irá pedir para você digitar o nome do projeto. Então, você deverá selecionar o framework, que no exemplo abaixo foi react, e depois se você quer o template com ou sem Typescript.

Caso seja a primeira vez que você cria um projeto Vite, ele irá pedir sua instalação na sua máquina. Então, basta confirmar apertando ‘y’ e prosseguir com a criação:

O Vite, por padrão, não vem com as definição de qual gerenciador de pacotes vamos utilizar, ele não roda a instalação de dependências do projeto. Então, após a criação do projeto, temos que instalar as dependências com algum dos comandos a seguir:

yarn install
ou
npm install
ou então
yarn

E, por fim, para rodar nossa aplicação, vamos executar o comando:

npm run dev
ou
yarn dev

E pronto, nossa projeto foi criado e já está rodando.

Implementando Path Mapping

Como eu tinha dito, um tempo atrás tive dificuldade para utilizar o Path Mapping em um projeto Vite. Entretanto, consegui resolver, e vou te mostrar aqui como.

Para que serve o Path Mapping?

O Path Mapping é uma maneira de importar nossos elementos de maneira mais fácil e elegante, sem um monte de ‘../../../’. Com isso, podemos fazer importações apenas com um ‘@’. Veja a diferença:

# sem path mapping
import Header from '../../../components/Header';
# com path mapping
import Header from '@components/Header';

Dessa forma, a aplicação fica muito mais prática e organizada.

Instalação e configuração

Primeiro, vamos instalar como dependência de desenvolvimento o ‘vite-tsconfig-paths’ com o seguinte comando:

npm install vite-tsconfig-paths -D

Depois, no arquivo ‘vite.tsconfig.ts’ vamos colocar o tsconfigPaths dentro dos plugins:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
});

Seu arquivo ficará assim, com os plugins contendo o React e o tsconfigPaths. Após isso, vamos reiniciar nosso projeto e podemos configurar as nossas Paths.

Configurando nossas Paths

No arquivo ‘tsconfig.json’, dentro de compilerOptions, vamos adicionar nossas configurações colocando primeiro nossa baseUrl, que será de onde nossas rotas vão partir, e depois nossas paths. Veja o exemplo a seguir:

"baseUrl": "./src",
"paths": {
"@components/*": ["./components/*"],
"@pages/*": ["./pages/*"],
"@constant/*": ["./constant/*"],
"@store/*": ["./store/*"]
}

Então, agora está pronto e podemos utilizar no nosso projeto normalmente:

import Header from "@components/Header";
import { cars } from "@store/cars.json";

Veja também:

Como evitar renderizações desnecessárias com React.memo

Conclusão

O Vite é uma excelente ferramenta para utilizar e criar seus projetos front-end Javascript ou Typescript, e utilizando o Path Mapping fica ainda melhor e mais elegante. Com ele, você pode esquecer o famoso “create-react-app”.

Autor: João Leonardo Bucch de Moraes.

[adrotate banner=”5″]

O post Como criar um projeto com Vite e implementar Path Mapping apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Conforme nossa aplicação vai crescendo e se tornando mais complexa, essas importações vão ficando cada vez maiores e complexas, com muitos níveis de retorno e torna-se fácil se perder entre essas importações.

Além disso, caso algum arquivo mude de local, todas as importações daquele arquivo deverão ser modificadas, trazendo um trabalho significativo ao programador. A seguir, temos um exemplo de uma importação padrão:

Nesse contexto, podemos utilizar uma configuração no nosso projeto para pré-definir essas rotas de importações, tornando-as mais fáceis de utilizar e muito mais manuteníveis.

Essa configuração é chamada de Path Mapping (mapeamento de caminho), onde utilizamos atalhos nos caminhos dos diretórios para facilitar sua localização.

Então, vamos iniciar o passo a passo de como configurá-lo em um projeto React, com Typescript, criado por meio do create-react-app.

Primeiro passo

Atualize sua árvore do git. Para que tudo seja executado corretamente, é necessário que tudo esteja atualizado no seu git.

Em seguida, iremos utilizar o seguinte comando no terminal: yarn eject (caso esteja usando npm, utilize npm run eject). Esse comando fará com que as configurações do webpack, que antes estavam debaixo dos panos, sejam acessíveis e editáveis.

Assim, irá aparecer uma mensagem de confirmação, pois ejetar o webpack é uma ação que não se pode voltar atrás. Caso você não esteja seguro de continuar, recomendo que leia este artigo até o final antes de desistir do Path Mapping, pois, no decorrer do texto, iremos ver outras formas de fazê-lo. Se tiver certeza e quiser continuar, você pode digitar “y” e apertar enter.

Mas o que é o webpack?

Webpack nada mais é do que um empacotador de código. Com o React, trabalhamos muito com módulos, arquivos de códigos separados e o webpack une tudo em um único arquivo para otimizar nossa aplicação.

Com isso, vamos precisar configurar nosso webpack para que ele entenda nosso Path Mapping e consiga realizar seu trabalho no final.

Segundo passo

Agora que temos nosso webpack acessível, vamos configurá-lo.

Note que temos uma nova pasta em nosso projeto chamada .config. É nela que iremos fazer nossas modificações.

Dentro dessa pasta, abra o arquivo webpack.config.js e busque pela palavra “alias”, utilizando o atalho ctrl + F do teclado (será a segunda opção na busca). Aqui temos as configurações de alias (pseudônimo). Ou seja, é aqui que vamos dizer ao nosso webpack onde estará cada pasta que quisermos.

Vamos colocar nossa pasta de components primeiro. Com isso, dentro dessa configuração de alias, logo no início, vamos colocar o seguinte:

Note que, antes da palavra dirname, temos dois underlines. Assim, nossas alterações ficaram da seguinte forma:

O que fizemos aqui foi dizer ao webpack que, toda vez que usarmos nas importações o @components, estamos na verdade querendo que ele acesse a pasta “../src/components”.

Lembre-se, estamos na pasta .config, logo o comando anterior nos diz para sairmos dessa pasta, acessarmos a pasta src e depois a pasta components. Esse caminho pode mudar dependo de onde a pasta que você deseja colocar no alias esteja e o nome do alias é você que escolhe! Faça novos alias com as principais pastas do seu projeto.

Terceiro passo

Nosso webpack está configurado e, caso nosso projeto não tivesse Typescript, já estaria tudo pronto para usarmos nosso Path Mapping.

Porém, com o Typescript, precisamos configurar nossos alias também no arquivo tsconfig.json, para que o Typescript entenda os caminhos para as nossas pastas por meio do Path Mapping e não apresente erros.

Dessa forma, logo após as configurações de lib e dentro de compilerOptions, no nosso arquivo tsconfig.json, iremos acrescentar as seguintes configurações:

Primeiro, estamos dizendo ao nosso Typescript que o diretório base do nosso projeto é onde nosso arquivo tsconfig está. Depois, nas configurações de path, dizemos ao nosso Typescript que, quando utilizarmos @components seguido de algum arquivo ou pasta, estamos na verdade acessando os arquivos ou pastas seguindo o caminho que especificamos. Lembre-se de que esse caminho pode mudar de acordo com sua organização de diretórios.

Pronto, nosso Typescript e nosso webpack agora irão entender nosso Path Mapping corretamente. Assim, inicie seu projeto com o comando yarn start e, caso ele já esteja rodando, reinicie-o para que todas as configurações funcionem corretamente.

Para utilizar nosso Path Mapping, basta utilizarmos o path que definimos, tanto no Typescript como no Webpack, no nosso exemplo: @components, como na imagem a seguir.

Estude também: Plop.js

Conclusão

Com o Path Mapping, podemos facilitar o nosso desenvolvimento com React e evitar problemas com importações à medida que nossa aplicação escala. É muito recomendado que o Path Mapping seja configurado logo no começo do projeto. Entretanto, ele também pode ser feito posteriormente. O importante é que ele esteja presente para auxiliar e facilitar o desenvolvimento.

A mapeação de caminhos também pode ser feita sem a ejeção do webpack, por meio de bibliotecas como react-app-rewired e react-app-rewired-alias. A escolha de como o Path Mapping será feito vai depender da escolha do time de desenvolvimento, analisando qual cenário será o melhor para o projeto e para o time.

Caso queira explorar um projeto de referência para visualizar melhor as configurações e utilizações do Path Mapping, deixo aqui um repositório de um projeto desenvolvido por mim na Incubadora Javascript da Luby: https://github.com/Ives-Gomes/exotic-cars.

Autor: Ives Moreira.

[adrotate banner=”5″]

O post O que é e como utilizar Path Mapping no desenvolvimento com React apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Recentemente, encontrei essa ferramenta muito útil que facilita a criação de arquivos através de uma interface de linha de comando.

Neste artigo, veremos como podemos automatizar a criação de componentes em uma aplicação React utilizando o Plop.js.

O que é Plop.js?

Plop.js é um micro-generator framework, uma ferramenta que oferece uma maneira simples de gerar código ou qualquer outro tipo de arquivo de texto simples de maneira consistente.

Ele fornece uma API de alto nível e, ao mesmo tempo, muito personalizável. Além disso, no Plop.js não estamos limitados apenas a componentes. Isto é, podemos gerar containers, services, hooks, reducers, actions, utilities, docs, readme e muito mais.

Configuração do projeto

O projeto que criaremos a seguir como exemplo é uma aplicação básica criada com React, TypeScript e Styled-Components.

O exemplo de geração de arquivos é para criação de componentes. Então, se você precisa criar outros arquivos, como hooks, é necessário a criação de novas pastas e arquivos, conforme explicado no exemplo do componente.

Seguiremos a seguinte estrutura para criação dos nossos componentes:

• index.tsx: arquivo do nosso componente;
• styles.ts: arquivo de estilos, utilizando styled-components.

Instalando o Plop.js

Rode o seguinte comando no terminal:

Em seguida, crie um arquivo plopfile.js na raiz do seu projeto.

Agora, precisamos também criar o template que servirá de base para criação dos nossos componentes. Podemos criar uma pasta chamada templates, na raiz do projeto, e adicionar o arquivo component.tsx.hbs.

Assim, utilizaremos HandleBars.js para criar nossos templates.

No package.json, adicione o seguinte comando:

Após isso, é só rodar o comando acima no terminal que o prompt pedirá ao usuário que insira o nome do componente.

Neste momento, basta inserir o nome do componente, clicar em enter e pronto, o plop.js irá gerar nosso arquivo do componente.

Bem simples né?! Agora só precisamos adicionar uma nova ação no arquivo plopfile.js para que seja possível gerarmos o arquivo styles.ts junto com o arquivo do nosso componente.

Para fazer isso, basta adicionarmos uma nova ação no arquivo plopfile.js, como no exemplo abaixo:

Em seguida, iremos criar um arquivo styles.ts.hbs dentro da pasta templates. Este será nosso template base para o arquivo styles.ts. Dessa forma:

Após finalizada a configuração no arquivo plopfile.js e também a criação do template, podemos rodar o comando para criar um novo componente. Dessa vez, ele criará tanto o arquivo index.tsx quanto o arquivo styles.ts.

Como podemos ver acima, os dois arquivos foram criados com uma estrutura de código inicial definida.

Veja também:

Como desenvolver um software de radar meteorológico

Conclusão

Automatizar processos repetitivos é uma forma de aumentarmos nossa produtividade e facilitarmos nosso trabalho. Com o Plop.js podemos gerar arquivos de forma rápida e consistente.

Autor: Luiz Gustavo Santos.

[adrotate banner=”5″]

O post Plop.js: automatizando a criação de arquivos apareceu primeiro em Luby Software.

[adrotate banner=”4″]

O que é Amazon Cognito?

O Amazon Cognito (AWS Cognito) possibilita criar com facilidade e rapidez o cadastramento, autenticação e controle de acesso de usuários em aplicações Web ou Mobile, de maneira altamente escalável, configurável e segura.

Além disso, também facilita que os usuários possam fazer login utilizando provedores de identidade social, como o Facebook, Amazon e Google, e também provedores de identidade empresarial, como o OpenID Connect. Tudo isso pode ser configurado via o próprio console da AWS ou programaticamente.

Explorando o Amazon Cognito

Para exemplificar o uso do Amazon Cognito, vamos construir uma aplicação simples utilizando o Serverless Framework. Criaremos funções lambda para cadastrar e logar usuários no Cognito. Para, assim, utilizá-lo como autorizador em uma função simples, que retornará uma mensagem de boas-vindas ao usuário
autenticado.

Preparação do ambiente

Antes de começar a codificar, é necessário configurar o CLI da AWS com as credenciais de um usuário IAM, criado via console da plataforma. Também é necessário possuir o Serverless Framework instalado em sua máquina.

Criação do projeto

Vamos criar um projeto utilizando um template pré-configurado para trabalhar com a AWS, Node e TypeScript.

Para isso, basta executar o comando abaixo:

Configuração do projeto

Agora, precisamos configurar nosso projeto para trabalhar com o Amazon Cognito. Para isso, vamos alterar o arquivo serverless.ts na raiz do projeto, e adicionar as configurações necessárias.

Primeiramente, precisamos configurar duas variáveis de ambiente. Então, adicionamos isso no bloco environment, são elas: user_pool_id (que contém o ID do grupo de usuários que será utilizado) e client_id (que define o ID do cliente do Amazon Cognito).

Em seguida, precisamos configurar as permissões do AWS IAM, para que as funções lambda que serão criadas a seguir possam ter acesso aos recursos necessários para se trabalhar com o Cognito. Todas as permissões foram adicionadas dentro do bloco iamRoleStatements.

Por fim, precisamos configurar os recursos necessários para se trabalhar com o Cognito. Dessa forma, adicionamos todas as configurações no bloco resources. Nele, criamos e nomeamos o grupo de usuários e cliente no Amazon Cognito, definimos como será o esquema de dados, políticas de validação de senha, número de horas que um token será válido e outras configurações.

Para isso, adicione as seguintes configurações no arquivo serverless.ts:

Criação da função de cadastro em um grupo de usuários do Cognito

Agora que temos nosso projeto criado e configurado, podemos seguir e criar nossa primeira função lambda. Ela será responsável por realizar o cadastro de um usuário no Cognito:

Primeiramente, obtemos os dados recebidos pelo usuário e os validamos. Em seguida, configuramos um objeto com o e-mail validado, o ID do grupo de usuários e algumas configurações adicionais, como a MessageAction (que aqui está definida com “SUPPRESS” para não enviar e-mail de confirmação para o
usuário cadastrado).

Após registrar o usuário, precisamos também salvar a senha de acesso. Então, criamos um objeto que contém o e-mail do usuário criado, a senha validada e o ID do grupo de usuários. Se tudo ocorrer bem, a resposta conterá o e-mail do usuário cadastrado e um status associado.

Para essa função e as demais que serão implementadas, foram utilizadas três outras funções auxiliares, são elas:

• validateCredentials: é responsável por validar a entrada dos dados fornecidos pelos usuários, conferindo se o e-mail e senha são válidos. Para isso, é verificado se a senha possui pelo menos oito caracteres. E, para validar o e-mail, é utilizada uma biblioteca externa para verificar se segue o padrão esperado. Para instalá-la em seu projeto, basta executar o comando npm i validator ou yarn add validator.
• formatResponse: formata a resposta que será enviada para o usuário, definindo seu código de status, corpo da resposta e outras definições.
• badRequest: devolve um objeto que representa o código de status HTTP, Bad Request. Para obter a implementação dessas funções, basta acessar a pasta src/libs, no repositório, que contém todo o código fonte do projeto acessando o link: https://github.com/ivansimplicio/aws-cognito-example.

Criação da função para realizar login no Cognito

Agora que já podemos realizar o cadastro no grupo de usuários do Cognito, precisamos criar também a função para fazer o login na plataforma. Para, assim, obter o token de acesso para utilizá-lo em funções que estarão protegidas.

Então, criamos a função da seguinte maneira:

Aqui, novamente, obtemos as credenciais informadas pelo usuário e as validamos. Em seguida, criamos um objeto com os dados validados, e as informações necessárias para realizar a busca do usuário, como o ID do grupo a qual ele pertence e o ID do cliente do Cognito. Por fim, chamamos a função adminInitiateAuth,passando o objeto criado para tentar autenticar o usuário.

Caso as credenciais estejam corretas, é devolvido um token de acesso como resposta. Com isso, podemos partir para a próxima etapa.

Utilizando o Cognito como autorizador em uma função Lambda

Agora que já podemos cadastrar os usuários no Cognito e obter um token de acesso por meio da função de login criada, podemos testar nosso autorizador utilizando-o em uma nova função lambda.

Para isso, precisamos configurar nossa função da seguinte maneira:

No bloco authorizer, definimos o autorizador que será utilizado para controlar o acesso a função, que verificará se o token de acesso foi passado na requisição. Nomeamos nosso autorizador de CognitoAuthorizer, e precisamos também passar o ARN do nosso grupo de usuários do Cognito. Sendo assim, referenciamos esse recurso e obtemos o ARN dele utilizando a função “:GetAtt”.

Por fim, definimos no bloco claims, que iremos utilizar o campo e-mail do objeto token decodificado. Para, assim, obter o e-mail do usuário que acesse nossa função.

Com a função devidamente configurada, podemos seguir para sua implementação. Abaixo é mostrada a função criada. Ela basicamente resgata o e-mail do usuário autenticado que a está acessando, exibindo uma mensagem de boas-vindas:

A mensagem será exibida caso o usuário tenha informado um token válido. Caso não seja passado um token, ou o token for inválido, o autorizador não permitirá que o usuário tenha acesso a função hello, devolvendo a mensagem “Unauthorized”.

Realizando o deploy

Agora que temos toda a parte de implementação concluída, podemos enviar nossas funções para a AWS e testar o seu funcionamento. Para realizar o deploy, basta executar o seguinte comando pela sua CLI: serverless deploy.

Após alguns instantes, o envio estará concluído e serão exibidas as URLs para acesso de cada uma das funções implementadas, que poderão ser acessadas e testadas.

Veja também:

Como Configurar Atalhos no Git

Biblioteca de tutoriais da Luby

Conclusão

O AWS Cognito é uma excelente opção para quem busca implementar a autenticação e o controle de acesso em seu sistema Web ou Mobile, uma vez que ele provê:

• Armazenamento de identidades de maneira segura e escalável;
• Federação com provedores de identidades sociais e empresariais;
• Fácil integração com aplicativos;
• E ainda mais diversos outros fatores, como ser altamente configurável (o que possibilita que ele se adapte facilmente a boa parte das aplicações).

Autor: Ivanildo Simplício.

[adrotate banner=”5″]

O post Utilizando o Amazon Cognito para implementar autorização em Lambda apareceu primeiro em Luby Software.

Elas são pequenas e sutis, mas servem um grande propósito na web: manter o usuário interessado.

[adrotate banner=”4″]

Você se lembra daquela animação executada quando você curte post do Instagram?

Se a resposta foi não, ela cumpriu sua função. Na verdade, o Instagram é mestre em micro interações, na próxima vez que estiver navegando pela plataforma, tente contar quantas animações existem. Isso porque praticamente toda ação do usuário dispara uma micro interação.

Micro interações podem ser disparadas pelo usuário ou pelo sistema, sempre visando informar algo ao usuário. Nós podemos dividir as micro interações em classes de acordo com seu objetivo. Neste artigo, vamos ver algumas das principais.

Progresso

Pode ser frustrante preencher algo sem saber quando se deve parar. Assim, podemos utilizar micro interações para deixar claro para o usuário quando ele atingiu o objetivo. Por exemplo: criação de senha.

Visualização do estado de um campo

Existem casos em que o usuário precisará preencher um campo complexo, com muitos números. Por isso, ele pode facilmente se perder e gastar mais tempo tentando consertar um erro do que utilizando a aplicação.

Dessa forma, podemos utilizar as micro interações para facilitar essa tarefa.

Por exemplo: preenchimento de um boleto ou cartão de crédito.

Feedback

Toda vez que o usuário realizar uma ação na aplicação, deve ficar claro para ele que a ação foi realizada.

Por exemplo: clique de um botão.

Estado do sistema

Naturalmente, existirão momentos em que o usuário deve esperar a aplicação realizar uma ação. Pensando nisso, é importante manter o usuário informado que algo está acontecendo e ele precisa esperar.

Por exemplo: carregamento de imagem.

Aplicando Micro Interações em ReactJS

Hoje, iremos ver 3 maneiras diferentes de criar/utilizar micro interações em React:

• CSS Animations;
• Bibliotecas de componentes;
• React Simple Animate.

O primeiro exemplo que vamos ver será utilizando CSS Animations. No tutorial, vamos demonstrar isso utilizando o pacote styled-components. Porém, você pode utilizar um arquivo .css ou .module.css.

Para utilizar o styled-components, instale os pacotes necessários com os comandos:

npm install --save styled-components
npm install -D @types/styled-components

Criação de componente

Em seguida, vamos criar um componente chamado ConfirmButton e dar um estilo simples:

Desenvolvimento do botão

Agora, devemos ter um simples botão verde. Para adicionar nossa animação, vamos utilizar o seletor :hover e mudar o backgroundColor. Além disso, vamos utilizar uma tonalidade mais escura:

Agora, se você passar o mouse sobre o botão, vai perceber a mudança de cor. Entretanto, esse efeito não é nada natural. Por isso, para atingirmos nosso objetivo, precisamos utilizar a propriedade transition presente no CSS:

Com isso, teremos um botão que ligeiramente altera sua cor quando o mouse paira sobre ele.

Assim, com esses poucos passos, temos nosso primeiro componente com micro interação.

Bibliotecas de componentes

Em seguida, veremos como bibliotecas de componentes podem facilitar nosso desenvolvimento. Nesse exemplo, vamos utilizar a biblioteca Material UI, que já disponibiliza vários componentes com micro interações, para criar um Skeleton que será visível enquanto alguma informação é carregada.

Para isso, instale a biblioteca com o comando:

npm install @material-ui/lab

Vamos adicionar dois Skeletons: um que representa uma imagem e outro para representar um texto.

Para saber mais sobre o Skeleton acesse a documentação do Material UI. Após adicionar uma lógica para mostrar o Skeleton, enquanto a imagem e texto não são carregados, nosso componente estará pronto:

Por último, iremos mostrar como criar uma animação em Javascript utilizando o framework react-simple-animate.

Para instalar o framework, utilize o comando:

npm install --S react-simple-animate

Vamos criar um botão de curtir com uma animação simples de aumentar e diminuir seu tamanho quando tocado. Para isso, iremos criar um botão com uma imagem dentro, sendo essa imagem um svg de um coração.

Utilizando o hook useAnimateKeyframes, podemos definir os estágios da animação e ligar essa animação ao clique do botão.

Com isso, teremos o resultado:

Veja também:

O que é e como utilizar Path Mapping

Conclusão

O react-simple-animate é um pacote poderoso e eu encorajo você a explorar suas funcionalidades. Contudo, ele não é o único e talvez você encontre o que precisa em outro pacote. Em nosso blog, o Matheus Medeiros fez um post demonstrando o uso do Lottie em React, clique aqui para acessar.

Espero que este artigo tenha te ajudado a entender melhor a filosofia por trás das micro interações e sua utilização. Como podemos concluir, sua implementação não necessita de um conhecimento avançado em animações, apenas uma boa noção de User Exprience.

Caso você queira experienciar essa demo, ela está disponível no meu GitHub, acesse clicando aqui.

Autor: Gustavo de Oliveira Marques

[adrotate banner=”5″]

O post Como criar Micro Interações em ReactJS? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Neste artigo, vamos entender um pouco mais sobre o desenvolvimento do software radar meteorológico, como são medidas suas informações e como visualizá-las, incluindo a utilização das Bibliotecas de Software Livre para Processamento dos Dados. Além disso, vamos falar sobre a preparação do ambiente de desenvolvimento através de ferramentas de desenvolvimento de software como o Anaconda Navigator e Spyder.

Obtenção de dados de radar

A obtenção de dados pode ser realizada a partir do site do Centro Nacional de Monitoramento e Alerta de Desastres Naturais (CEMADEN). Assim, no site podemos encontrar as informações de pluviômetros, estações hidrológicas e radares meteorológicos. 

Os dados são fornecidos no formato Rainbow5, que consiste em um arquivo XML que contém metadados e conteúdo binário. Então, estes arquivos possuem extensão .vol e armazenam as medições do radar.

Estudo das variáveis medidas por Sensoriamento Remoto

Um radar meteorológico funciona emitindo pulsos de energia eletromagnética em frequências de micro-ondas. Ou seja, parte da energia é retroespalhada pelos alvos, e retorna para a mesma direção da antena do radar, sendo captada pelo refletor. 

Dessa forma, a energia recebida é analisada por computadores para determinar a localização do alvo, intensidade da precipitação, informações sobre a velocidade e direção do vento, além da distância (mensurada através da medida do tempo que leva o pulso de energia se deslocar da fonte do alvo e retornar até o refletor).

As variáveis obtidas através desse sistema podem ser analisadas e determinar, por exemplo, a estrutura interna da chuva. Assim, permitem estimar a precipitação, realizar monitoramento e previsão de curtíssimo prazo com diversas aplicações.

Nesta etapa, podemos escolher as variáveis básicas necessárias para realizar a estimativa de precipitação, que são:

Refletividade (Z)

É uma medida da eficiência do alvo de um radar em interceptar e retornar a energia do radar, que depende dos parâmetros físicos do alvo. Bem como o número e tamanho das gotas de chuva por unidade de volume e unidade de mm6m-3.

Refletividade Diferencial (ZDR)

É uma medida do logaritmo da razão entre a refletividade transmitida com pulso horizontal e refletividade transmitida com pulso vertical em um volume. Então, pode também ser pensada como o logaritmo da razão entre a refletividade horizontal para a refletividade vertical nas unidades lineares.

Fase Diferencial Específica (KDP)

É a derivada espacial da fase diferencial. Ou seja, uma comparação da diferença de fase entre os pulsos polarizados horizontal e verticalmente, em duas distâncias diferentes.

Velocidade radial (VR)

É a velocidade de aproximação ou afastamento dos alvos em relação ao radar na direção do feixe.

Utilização das Bibliotecas de Software Livre para Processamento dos Dados do Radar Meteorológico

Para o processamento de dados, podemos utilizar duas bibliotecas com código aberto, que tem o objetivo de ler e manipular os dados de radar, a Python ARM Radar Toolkit (Py- ART) e a Biblioteca para processamento de dados de radar meteorológico (WRADLIB). 

Assim, elas foram criadas para facilitar o uso de dados de radar meteorológico, são bem documentadas e fáceis de usar. Ambas são escritas na linguagem de programação Python.

Anaconda Navigator

Para a utilização das bibliotecas, instalamos a Anaconda Navigator, uma interface gráfica que permite gerenciar ambientes de programação. Então, na Figura 1, é possível ver a interface e algumas aplicações gerenciadas pela Anaconda Navigator.

Spyder

Depois da instalação do Anaconda, utilizamos o ambiente científico Spyder, uma das ferramentas apresentadas em sua tela inicial. Dessa forma, com o Spyder, é possível editar, analisar e depurar arquivos. 

Plotagem do campo PPI

Na Figura 2, podemos ver um exemplo de leitura e plotagem do campo PPI (Plan Position Indicator, em inglês), que é um campo bidimensional do radar meteorológico que representa a variável escolhida (neste caso a refletividade) com a antena do radar no centro da tela e a altura acima do solo com círculos concêntricos. Portanto, a refletividade é plotada conforme uma barra de cores na lateral direita da figura.

Py-Art

Para a utilização da biblioteca Py-Art, além do Python, instalaremos mais quatro bibliotecas, NumPy, SciPy, Matplotlib e netCDF4. 

Py-ART tem a capacidade de ler uma série de formatos de radar meteorológico comuns, incluindo os formatos: Sigmet IRIS, MDV, CF Radial, Universal Format (UF) e arquivos no formato NEXRAD Nível II. O Py-ART também contém rotinas que podem produzir os gráficos de radar mais utilizados, incluindo PPIs, CAPPIs e RHIs.

Nesse caso, o método mais fácil para instalar o Py-ART é usar os pacotes gerenciados pela ferramenta “conda”. Assim , é recomendado criar um novo ambiente ao usar Py-ART ou, até mesmo, outros pacotes como Wradlib, de modo a se criar um ambiente exclusivo para o projeto.

Assim, o Py-ART pode ser usado para uma variedade de tarefas, desde plotagem básica até a execução de processamento mais complexos. Além disso, os usos mais específicos para Py-ART incluem:

• Leitura de dados de radar em vários formatos de arquivo;
• Criação de plotagens e visualização de dados de radar;
• Doppler dealising (remoção do artefato de falseamento da relação velocidade- distância);
• Correção da atenuação;
• Processamento de fase usando um método de programação linear;
• Mapeamento de dados de um ou vários radares em uma grade cartesiana;
• Executar recuperação de dados mapeados ou nos dados brutos originais;
• Gravar dados em coordenadas polares ou cartesianas em arquivos NetCDF.

Do mesmo modo, a leitura dos arquivos do radar meteorológico é feita pelo Py-ART por meio do módulo pyart.io. Portanto, para a utilização da Wradlib, podemos reutilizar o ambiente criado para o Py-Art, por conter as mesmas dependências e adicionar as bibliotecas h5py, h5netcdf, xarray, xmltodict e gdal. Isso porque a Wradlib tem a capacidade de fazer leitura de formatos de dados semelhante ao Py-ART.

Visualizando resultados

Com o Py-ART, é possível criar plotagens de plano gráfico de indicador de posição (PPI) como mostra a Figura 3. Dessa forma, o PPI é gerado de uma varredura de medida angular do sistema de coordenadas horizontais, conhecida como azimute com uma elevação constante.

Em primeiro lugar, a variável é plotada em um plano, em que o centro é a posição do radar meteorológico. Neste caso, a figura 3 mostra um exemplo de PPI utilizando a biblioteca Py-ART, em um raio de 200 km.

Através do uso do Py-ART e Wradlib, é possível gerar e visualizar dados das variáveis básicas, ilustrado na Figura 4. Em (a) Refletividade (Z), em (b) Refletividade Diferencial (ZDR), em (c) Fase Diferencial Específica (KDP) em (d) Velocidade Radial (Vr).

É possível extrair informações dos arquivos do radar meteorológico através da função radar.info(‘compact’) ou radar.info(‘full’) utilizando Py-ART. Isto é, porque eles podem fornecer detalhes sobre os dados armazenados. 

Metadados

Metadados contendo as variáveis: altitude, longitude, latitude, azimute, elevação, metadados, título, versão do arquivo, nome do radar meteorológico, além de outros estão contidos no arquivo, bem como ilustra a Figura 5. Então, para obter detalhes dos arquivos através da biblioteca Wradlib, utilizamos a função wrl.io.read_rainbow(‘path’), onde ‘path’ se refere ao caminho do arquivo.

Plotagem de anéis

Para a plotagem de anéis, podemos utilizar a função display.plot_range_rings(), em que os parâmetro são: um array, para uma faixa de 250 km. Neste caso, utilizamos a função da seguinte maneira: display.plot_range_rings([250]), como podemos ver na fig. 6 (a), display.plot_range_rings([50, 100]) para fig. 6(b), display.plot_range_rings([50, 100, 150, 250]) para fig. 6(c).

Mapa de cores

Além disso, é possível personalizar as cores da plotagem do PPI, através da biblioteca matplotlib, que possui vários mapas de cores integrados acessíveis via matplotlib.cm.get_cmap. Ou através da classe ListedColormap e uma matriz Nx4 numpy de valores entre 0 e 1 para representar os valores RGBA do mapa de cores.

Ainda mais, podemos fazer um novo mapa de cores. Para isso, é necessário informar o comprimento, os intervalos entre as cores e suas respectivas cores. Como podemos ver na Figura 7, N representa o comprimento, a fig. 7 (a) representa os valores para as cores em RGB e fig. 7 (b) mostra os intervalos entre cada cor. Assim, o resultado da plotagem é apresentado na fig. 7 (c), onde o comprimento vai de 0 à 60 e apresenta intervalos de 10 e 5.

Conclusão

Como vimos no artigo, a utilização das bibliotecas Py-ART e Wradlib aponta para a viabilidade no processo de análise, visualização e processamento de dados do radar meteorológico. 

Além disso, dentre diversas facilidades oferecidas por estas bibliotecas, encontra-se a de plotagem. Isto é, por meio da plotagem, conseguimos gerar o PPI. Assim, levando em consideração a utilização da linguagem Python e suas bibliotecas, é possível manipular facilmente as cores geradas no PPI.

Leia também:

Tratamento global de erros em páginas Razor 

[/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]

O post Software radar meteorológico: utilizando bibliotecas de código aberto para processamento de dados apareceu primeiro em Luby Software.