DEV Community: Jony Hayama

Otimizando um campo de Autocomplete com Postgres e Rails

Jony Hayama — Mon, 14 Nov 2022 17:49:42 +0000

Sabe quando você e seu time erra a mão na hora de estimar uma task?

Task: Criar campo autocomplete que deve sugerir "tags" para o usuário
Estimado em: 3SP

Assim que comecei a trabalhar task ouvi o Faustão falando no meu ouvido: "E-r-r-r-r-r-oooouu".

Existem inúmeras otimizações que podem ser feitas em um campo desses que fiquei até desnorteado.

Gostaria de compartilhar um pouco do que acabei produzindo nessa task. Estou longe de dizer que esta é a melhor forma possível de fazer um campo como esse, mas acredito que é um bom ponta-pé inicial.

Para facilitar a conversa e deixar esse post mais interessante, ao invés de buscar tags, vamos buscar personagens da Marvel.

Se quiser dar uma olhada no resultado final, acessa aí:

Exemplo Funcional: https://marvel.apps.jony.dev/
Código-fonte: https://github.com/jonyhayama/find-marvel-characters

O que eu fiz no Postgres

Se você ainda não conheçe, a Marvel fornece uma API para podermos coletar dados: https://developer.marvel.com/

Como meu objetivo aqui é falar sobre o Postgres, fiz alguns requests para a API, salvei os dados que me interessam em um CSV e criei um seed para importar esses dados no banco.

Se quiser, pode baixar o repositório do projeto e rodar rails db:seed, o CSV está commitado 😜.

Vamos considerar, portanto, que temos uma tabela chamada characters e que precisamos fazer uma busca na coluna name para devolver o resultado dessa pesquisa para o usuário.

Minha primeira ideia foi bem simples:

Character.where('name ILIKE ?', "%#{params[:query]}%").pluck(:name)
# SELECT "characters"."name" FROM "characters" WHERE (name ILIKE '%Iron Man%');
# Execution Time: 2.995 ms

⚠️ OBS:
1 - Vou sempre deixar query gerada pelo ActiveRecord comentada em baixo da instrução para facilitar o papo 😜
2 - Considere que estamos em um Controller e que params[:query] = 'Iron Man'

Logo de cara temos uma otimização a fazer: Em linhas gerais, o Postgres é mais performático fazendo comparações com LIKE do que ILIKE.

Nós conseguimos exatamente o mesmo resultado, porém com um tempo de execução menor, se escrevermos:

Character.where('lower(name) LIKE ?', "%#{params[:query].downcase}%").pluck(:name)
# SELECT "characters"."name" FROM "characters" WHERE (lower(name) LIKE '%iron man%');
# Execution Time: 1.012 ms

A próxima otimização seria criar um índice para a coluna name que está sendo alvo da busca.

Eu já estava pronto para criar uma migration com add_index :characters, :name quando descobri que é possível criar índices baseados em expressões.

Algo simples como:

CREATE INDEX index_characters_lower_name ON characters (lower(name));

O que, naturalmente, traria ainda mais performance já que estamos fazendo a busca baseado exatamente nessa expressão.

Foi então que, antes mesmo de ter tempo de implementar esse índice, o StackOverflow me indagou...

StackOverflow: Já ouviu falar da palavra de pg_trgm?
Eu: Caramba, como será que se fala "trgm"?
Documentação do Postgres: it's "Trigram"
Google Translate: "Trigram" = "Trigrama" em terras tupiniquins.
Eu: Mas o que diabos é um trigrama?
Google: vocábulo de três letras.
Eu:

Lendo a documentação com um pouco mais de carinho e, sem entrar em muitos detalhes (até porque eu acho que nem conseguiria), entendi que:

Usando Trigramas, o Postgres consegue gerar um valor numérico para dizer qual é a similaridade entre dois termos, sendo 0 completamente diferente e 1 exatamente igual.

Isso quer dizer que, com uma simples ordenação, eu poderia retornar sugestões de personagens com mais assertividade:

SELECT
  name,
  similarity(name, 'iron man') AS score
FROM characters
WHERE lower(name) LIKE '%iron man%' 
ORDER BY score DESC;

Corri, abri o rails dbconsole, colei a query e...

ERROR:  function similarity(character varying, unknown) does not exist
LINE 3:   similarity(name, 'iron man') AS score
          ^
HINT:  No function matches the given name and argument types. You might need to add explicit type casts.

De volta à documentação, descobri que é necessário habilitar a extesão primeiro 🙈... então criei uma migration rapidinho:

class EnablePgTrgmExtension < ActiveRecord::Migration[6.0]
  def change
    enable_extension 'pg_trgm'
  end
end
# CREATE EXTENSION pg_trgm;

Agora, com a extensão ativada, query executada, temos o seguinte resultado:

name	score
Iron Man	1
Iron Man (Ultimate)	0.5
Iron Man (Marvel Heroes)	0.42857143
Iron Man/Tony Stark (MAA)	0.4090909
Iron Man (Marvel War of Heroes)	0.32142857
Iron Man (Iron Man 3 - The Official Game)	0.31034482
Iron Man (LEGO Marvel Super Heroes)	0.28125
M.O.D.O.K. (Iron Man 3 - The Official Game)	0.25714287
War Machine (Iron Man 3 - The Official Game)	0.23076923
Crimson Dynamo (Iron Man 3 - The Official Game)	0.20930232

Repare que temos uma ordenação bem diferente em relação à nossa primeira query:

name
Crimson Dynamo (Iron Man 3 - The Official Game)
Iron Man
Iron Man (Iron Man 3 - The Official Game)
Iron Man (LEGO Marvel Super Heroes)
Iron Man (Marvel Heroes)
Iron Man (Marvel War of Heroes)
Iron Man (Ultimate)
Iron Man/Tony Stark (MAA)
M.O.D.O.K. (Iron Man 3 - The Official Game)
War Machine (Iron Man 3 - The Official Game)

Você deve estar se perguntando por que comecei a falar da ordenação antes de criar o índice né?

Simples: podemos criar um índice para o trigrama 😜

Então, finalmente, bora para a migration:

class AddCharacterNameLowerTagIndex < ActiveRecord::Migration[6.0]
  def up
    execute "CREATE INDEX index_characters_lower_name ON characters USING gin (lower(name) gin_trgm_ops);"
  end

  def down
    execute "DROP INDEX index_characters_lower_name;"
  end
end

O que eu fiz no Rails

Agora que temos uma query bacana, é só uma questão de reescrevê-la utilizando o ActiveRecord, certo?

query = params[:query].downcase
Character.select("name, similarity(name, '#{query}') AS score").where('lower(name) LIKE ?', "%#{query}%").order('score DESC').load.pluck(:name)

🤔 Ficou meio grande né?

Sem contar que, naturalmente, a gente não deve simplesmente concatenar um parâmetro enviado pelo usuário na nossa query...

Infelizmente o select() não tem a mesma sanitização que o where() que te permite fazer parameter binding.

Para driblar esse problema, podemos usar um método chamado sanitize_sql_array() para nos auxiliar:

query = params[:query].downcase
Character.select(ActiveRecord::Base::sanitize_sql_array(["name, similarity(name, ?) AS score", query])).where('lower(name) LIKE ?', "%#{query}%").order('score DESC').load.pluck(:name)

🤔 Como estamos acessando ActiveRecord::Base, há grandes chances de isso ficar melhor no Model...vamos transformar isso num scopo?

# app/models/character.rb
class Character < ApplicationRecord
  scope :order_by_name_similarity, ->(name) {
    select('*')
      .select(sanitize_sql_array(["similarity(name, ?) AS score", name]))
      .order("score DESC")
  }
end

Repare que optei por deixar o padrão select(*) ao invés de select(:name), dessa forma temos o objeto completo e podemos utilizar outros dados no retorno (se necessário).

Agora a consulta em si fica bem mais simples:

query = params[:query].downcase
Character.where('lower(name) LIKE ?', "%#{query}%").order_by_name_similarity(query)
# SELECT *, similarity(name, 'iron man') AS score FROM "characters" WHERE (lower(name) LIKE '%iron man%') ORDER BY score DESC

Acho interessante também adicionar um limit(10) para não ter uma lista muito grande de opções aparecendo para o usuário.

No final do dia, o método no Controller ficou assim:

def index
  query = params[:query].downcase
  @characters = Character.where('lower(name) LIKE ?', "%#{query}%").order_by_name_similarity(query).limit(10)
  # SELECT *, similarity(name, 'iron man') AS score FROM "characters" WHERE (lower(name) LIKE '%iron man%') ORDER BY score DESC LIMIT 10

  expires_in 10.minutes
end

Repare que também adicionei um expires_in 10.minutes para o navegador pode cachear essa resposta.

É claro que cada caso é um caso e - talvez - 10 minutos não seja a melhor estratégia, mas meu ponto é: é importante ter alguma estratégia de cache.

Não sei você, mas pra mim tudo isso passou longe dos 3SPs estimados inicialmente. Especialmente se considerarmos que ainda falta fazer o front.

Para falar a verdade mesmo, eu dei uma ajustada na história... quando disse que "antes mesmo de criar o índice"... convenhamos... você sabe que eu fiz, desfiz e fiz de novo né? 😜

Só organizei a história de uma forma mais cronológica, mas rolou muita pesquisa, teste e re-teste até chegar nessa nessa solução.

E olha que só falamos de Back...vou deixar o Front para um próximo post.

PS: Não encontrei um lugar no meio do texto, mas queria deixar uma queryzinha de presente que talvez lhe seja útil:

SELECT indexname, indexdef FROM pg_indexes WHERE tablename = 'characters';

Ess query lista os índices de uma determinada tabela.

EM TEMPO:

Quando comecei a trabalhar no front, comecei a tentar faze a busca por outras personagens.

Foi nessa que eu descobri que o nome oficial é "Spider-man". Não é "Spider man", nem "spiderman"...

Para a busca por "Spider man", podemos fazer um mini-hack rapidinho:

query = params[:query].downcase.gsub(/ /, '%')

Já para "spiderman" acho que a coisa complica mais e - talvez - pg_trgm não seja o ideal...

É nessa hora que ferramentas como Elastic Search, Algolia e afins podem ser aliadas...mas tudo tem seu custo (seja financeiro ou de implementação) 😜

Tem ideias, críticas ou sugestões? comenta aí :D

Acessando o "compartilhar" nativo, vulgo Web-Share, em VanillaJS e Vue

Jony Hayama — Thu, 11 Aug 2022 19:09:09 +0000

Nessa semana estive trabalhando em uma demanda simples de um cliente Freela.

O projeto consiste em um daqueles formulários interativos que você responde X perguntas e tem um resultado no final, vulgo, um Quiz.

A ideia é que o resultado fosse compartilhado no Insta com a hashtag de uma campanha para que o usuário pudesse participar de uma promoção.

Meu desafio em si foi descobrir como fazer um botão "compartilhar" desses. O Facebook tem um "widget" que é só copiar, colar e pronto. Não encontrei nada similar para o Insta...

Foi então que me veio na cabeça a ideia de tentar utilizar a UI nativa do smartphone do usuário. Afinal, cada usuário já está acostumado a utilizar essa interface em inúmeras operações de compartilhar que são feitas todos os dias.

📖 Parti para a pesquisa e encontrei a tal da API do Web Share.

Segundo a documentação do MDN, até o presente momento, o suporte ainda é parcial, mas nos pareceu uma solução bastante viável dado o nosso público-alvo.

Existem ainda algumas restrições adicionais como:

O site precisa ser acessado via HTTPS
O recurso precisa ser invocado por uma ação direta do usuário

HTTPs é super fácil com o Let's Encrypt 🙌 e, de fato, queríamos que o usuário clicasse em "compartilhar" para poder enviar nossa imagem, então, até aqui, tudo certo!

Antes de seguir, criei uma funçãozinha para não ter que ficar copiando e colando toda hora (Let's keep it DRY 😜):

Com a função no jeito, vamos começar a brincadeira compartilhando um link só para esquentar os motores:

Naturalmente que, no Insta, faz mais sentido compartilhar uma imagem. Portanto precisamos passar a utilizar a propriedade files que espera um array de File.

O primeiro exemplo que encontrei para gerar esse array, foi o de simplesmente ler o resultado de um determinado input:

⚠️ OBS: Inicialmente tentei ativar o WebShare no evento change do input, mas nem sempre isso foi considerado um "user gesture", por isso precisei adicionar o botão. Se tiver interesse em validações bem detalhadas e outros possíveis cenários, da uma conferida nesse exemplo da W3C.

Funciona até que legal, mas a minha imagem estava em um servidor e não no dispositivo do usuário...

De certa forma, eu precisava converter uma URL em um File, o que (para a minha surpresa) pode ser feito facilmente utilizando o fetch:

Depois que consegui organizar minha lógica foi hora de levar isso para o Vue, que é o framework utilizado no projeto.

Para isso, optei por utilizar uma biblioteca chamada VueUse que, dentre outras coisas, leva a reatividade para o shareObj de uma forma bem interessante.

Daí para frente foi só git commit, git push e npm run build 🥳

Mini-hack para acessar seu Banco de Dados (Postgres) do Heroku com Rails localmente

Jony Hayama — Mon, 11 Jul 2022 18:41:46 +0000

Existem coisas que, de tão simples, são geniais. Essa ideia chegou até mim através do comentário de colega, um herói que não usa capa. Não é nada revolucionário, mas é algo que me deixou com a sensação de "por que eu nunca fiz isso antes?".

⚠️ ATENÇÃO: Isso que vou compartilhar é um hackzinho, um "recurso técnico", no português claro: uma gambiarra. E - como toda gambiarra - precisa ter cuidado na hora de usar.

Disclaimer feito, bora lá.

Em anos de desenvolvimento, eu sempre me condicionei a pensar "vou copiar o banco de staging para ter uma massa de dados". Muitos desenvolvedores utilizam Seeds para esse propósito e fazem um ótimo trabalho com isso.

Sempre que surge um bug, meu mindset é: vamos descobrir como replicar isso em staging, para poder copiar o banco e investigar localmente.

Nenhum problema até que você tenha um banco enorme. Daqueles que você precisa ir fazer outra coisa enquanto está baixando e restaurando. É um tempo em que você pode dar uma olhada no backlog, ou talvez dar uma olhada nos PRs dos colegas, ou simplesmente ir tomar café... Mas convenhamos, seria mais produtivo já poder codar.

Bom, eis que eu estava copiando um banco monstruoso e comentei com o meu colega...

Eu: putz, tô baixando o banco, parece que vai demorar... 😩
Colega: porque você não conecta direto em staging?
Eu: como assim? 🤔
Colega: se o banco é enorme e você não vai editar nada, conecta direto em staging
Eu: como faço isso?
Colega:
DATABASE_URL=`heroku config:get DATABASE_URL -a your-app` rails s
Eu:

Simples assim, posso adicionar um byebug onde eu quiser para investigar o problema 🥳!

Se você também usa o Heroku, tenho certeza que já tropeçou no comando heroku config em algum momento para trabalhar com variáveis de ambiente. Eu mesmo já mencionei ele no primeiro artigo que escrevi no dev.to.

Eu já até cheguei a usar, para copiar uma ENV que estava em staging para o meu .env.local. Já até vi ele jogado em um makefile em um script que já não lembro mais o que fazia...

Mas confesso que essa ideia nunca tinha me passado pela cabeça 🤦‍♂️

O mais interessante é que não precisamos nos limitar ao rails s...

DATABASE_URL=`heroku config:get DATABASE_URL -a your-app` rails c

E nem sequer ao Rails:

psql -d `heroku config:get DATABASE_URL -a your-app`

Agora, se você, assim como eu, é bastante preguiçoso, pode criar aliases e funções no seu ~/.zshrc:

alias stgdburl="heroku config:get DATABASE_URL -a your-app"

function stgdb() {
  export DATABASE_URL=`stgdburl`
  "$@"
}

🧙 Magicamente os comandos passam a ser:

stgdb rails s
stgdb rails c
psql -d stgdburl

⚠️ ATENÇÃO: Antes de sair correndo e fuçando tudo isso, convém dar uma olhadinha no seu config/database.yml e dar uma lida na documentação do rails.
É importante saber como está a sua configuração para saber como a aplicação irá se comportar com a presença do DATABASE_URL.

Como você já deve ter percebido, da para conectar em qualquer banco, inclusive prod.

Então, cuidado 😜

Reticências com tooltip automático (Vue)

Jony Hayama — Mon, 13 Jun 2022 17:20:00 +0000

TLDR;

🔗 Resultado final

A história

Hoje a responsável pela UX da empresa onde trabalho nos trouxe uma solicitação bem simples:

"quando um determinado texto for muito grande, exiba somente as duas primeiras linhas e, quando o usuário passar o mouse, mostre a dica de tela com o texto completo".

-- UX da Empresa

Num primeiro momento pensamos em limitar o número de caracteres e fazer com o bom velho substring:

Mas aí veio a pergunta "quantos caracteres perfazem duas linhas?" 🤔

Fica bastante difícil definir essa quantidade quando não estamos utilizando uma fonte monoespaçada... E mesmo assim, fica bastante complicado se trouxermos a responsividade para a equação...

Pensando nisso, resolvemos nos adaptar e utilizar o elegantíssimo line-clamp do CSS:

🔀 PR criado.

🚀 Solução enviada para staging.

🤞 Só falta aprovação de QA e...

"Seria interessante que a dica de tela fosse exibida somente se o texto tiver sido truncado".

-- QA da empresa

E volta o cão arrependido para pensar mais um pouco sobre o assunto 😢.

Revisitando a solução baseada em quantidade de caracteres, poderíamos resolver assim:

Mas eu sou teimoso.

O line-clamp é mais elegante. Reflete melhor a problemática de exibir por quantidade de linhas.

Depois de pesquisar um pouco, encontrei uma forma de avaliar se o texto foi truncado baseado no tamanho do container utilizando as propriedades scrollWidth e scrollHeight:

No final do dia, com a lógica na cabeça, criei dois componentes, um baseado na quantidade de caracteres (sim, as vezes queremos limitar um texto por caracteres e não por linhas) e outro baseado em linhas.

Agora, no nosso projeto sempre que precisamos disso basta utilizarmos:

<line-clamp text="texto" :lines="2" />
<truncate-text text="texto" :max-char="50" />

Exemplo:

⚠️ IMPORTANTE: Nenhum dos códigos acima foi compartilhado na intenção de ser copiado e colado, é apenas uma forma de exemplificar o recurso 😜

Espero que isso lhe seja útil. Estou sempre aberto à pitacos e sugestões 😀

PS: Confesso que adoraria uma solução que não dependesse de JS... juro que tentei...mas não encontrei... se souber, compartilha aí 🙏

Meu ambiente para desenvolvimento web com WSL2 - Apache + MySQL + PHP (WordPress)

Jony Hayama — Mon, 08 Jun 2020 19:54:01 +0000

Esse post é o último de uma série de 4

Importante

Quero reforçar que essa instalação é para um ambiente de DESENVOLVIMENTO. Há diversas configurações de segurança que precisam ser feitas para um servidor de produção!

Apache

Primeiramente vamos instalar o Apache. Para um ambiente PHP, há muitas pessoas que utilizam Nginx ou simplesmente o php -S. Minha escolha pelo apache se dá por um motivo bastante simples: Tenho uma revenda de hospedagem com cPanel que utiliza essa tecnologia. Como coloco a vasta maioria dos meus clientes lá, prefiro que meu ambiente de desenvolvimento reflita (pelo menos em partes) o ambiente que terei por lá.

Então bora:

sudo apt update  
sudo apt install apache2

Para iniciar nosso servidor, basta utilizar:

sudo service apache2 start

Acesse http://localhost no seu navegador e verá a página padrão do apache2:

MySQL

Como já está disponível no apt, basta executar:

sudo apt install mysql-server

Assim como na instalação do PostgreSQL, tenho o costume de criar um usuário para mim e não ficar utilizando o root para tudo, portanto, vamos lá, acesse o mysql com o comando abaixo:

sudo mysql -u root

Segue o comando para criar seu usuário:

CREATE USER 'meu-nome-de-usuario'@'localhost' IDENTIFIED BY 'MinhaSenhaSecreta'; FLUSH PRIVILEGES;

Agora que ele está criado, precisamos dar permissão para que ele acesse todos os bancos:

GRANT ALL PRIVILEGES ON *.* TO 'meu-nome-de-usuario'@'localhost'; FLUSH PRIVILEGES;

Por fim, precisamos adicionar a permissão de conceder permissões para o nosso usuário:

GRANT GRANT OPTION ON *.* TO 'meu-nome-de-usuario'@'localhost'; FLUSH PRIVILEGES;

PHP

A inslação do PHP em si é a mais direta possível:

sudo apt install php libapache2-mod-php php-mysql

Configurações adicionais

Nem todas as configurações abaixo são necessárias para todos, por isso listá-las separadamente. A maioria delas exige que você reinicie o apache para que tenham efeito, portanto já vou deixar o comando aqui 😉

sudo service apache2 restart

PHPMyAdmin

Há diversas formas de gerenciar seu banco de dados MySQL. Particularmente utilizo o PHPMyAdmin pelo mesmo motivo que uso o Apache: Para refletir meu ambiente de produção.

Há quem prefira baixar os arquivos diretamente do site oficial e fazer as configurações manualmente. Pessoalmente prefiro instalá-lo pelo apt:

sudo apt update
sudo apt install phpmyadmin php-mbstring
sudo phpenmod mbstring

Agora precisamos adicionar as configurações que já vêm prontinhas ao apache, para isso vamos editar o arquivo:

sudo vim /etc/apache2/apache2.conf

Basta adicionar essa linha ao final:

Include /etc/phpmyadmin/apache.conf

Reinicie o apache e acesse http://localhost/phpmyadmin para ver se tudo está funcionando :)

ModRewrite

Como o WordPress utiliza o mod_rewrite para criar suas URL amigáveis, é necessário ativá-lo:

sudo a2enmod rewrite

Alterando a pasta padrão do Apache

Pode ser frescura, mas prefiro ter meus projetos na pasta ~/www, “sue me”.

Para que o apache considere essa pasta como o padrão para localhost, precisamos editar o arquivo 000-default.conf. Particularmente estou usando o vim como editor, mas você pode fazer com o editor de sua preferência:

sudo vim /etc/apache2/sites-enabled/000-default.conf

Nesse arquivo, precisamos colocar o endereço completo de onde estão nossos arquivos. O atalho ~ não funciona. Normalmente o endereço é /home/meu-usuario/www. No meu caso, a pasta é /home/jony/www. Se você não tem certeza de qual é o endereço da pasta que deseja, basta acessá-la e utilizar o comando pwd.

Agora que já sabemos o endereço que vamos utilizar, altere a linha do DocumentRoot para o novo endereço e adicione o bloco abaixo no final do arquivo, lembre-se de substituir o meu endereço pelo seu 😉:

<Directory "/home/jony/www">  
   Order allow,deny  
   Allow from all  
   Options Indexes FollowSymLinks MultiViews  
   AllowOverride All  
   Require all granted  
</Directory>

Permissão de arquivos

Para que o apache consiga editar seus arquivos, você precisa que seus arquivos pertençam ao grupo www-data, o problema é que nosso usuário não pertence a esse grupo, ou seja, se simplesmente trocarmos o grupo, nós perderíamos a possibilidade de editar nosso arquivos…

Portanto, vamos adicionar nosso usuário ao grupo:

sudo adduser $USER www-data

Como eu compartilho a pasta ~/www entre vários projetos (nem todos PHP) prefiro adicionar permissões, projeto-a-projeto, portanto, toda vez que inicio um projeto php, rodo os seguintes comandos:

sudo chown -R $USER:www-data /home/jony/www/novo-projeto  
cd ~/www/novo-projeto
sudo find . -type f -exec chmod 664 {} + ;  
sudo find . -type d -exec chmod 775 {} + ;

Permitindo arquivos maiores

Por padrão, o tamanho máximo de upload de arquivos do apache é 2MB, que é bem pouco, portanto, vamos aumentá-lo.

Para isso, vamos editar o arquivo:

sudo vim /etc/php/7.4/apache2/php.ini

Precisamos ajustar as duas configurações abaixo. Estou colocando 100M (representando 100 megabytes), mas você pode colocar outro valor que preferir.

Infelizmente essas informações não estão perto uma da outra e o arquivo também é bem grande, portanto é necessário procurá-las.

post_max_size = 100M  
upload_max_filesize = 100M

Dica: Para fazer uma busca pelo vim , basta digitar /texto-procurado 😉

Depois de alteradas, salve o arquivo e reinicie o apache.

SSL

Muitas vezes instalo plugins no WordPress para fazer o redirecionamento para a versão com SSL do site. Em produção, com um servidor — de fato — certificado, funciona que é uma beleza, mas quando copio os arquivos para meu servidor local, fico trancado para fora do /wp-admin 🤦‍♂️. Para facilitar a vida e não ter que ficar navegando no banco ou desativando o plugin toda vez que isso acontece, prefiro configurar um certificado auto-assinado localmente. Ainda vejo a mensagem de “site não seguro”, mas isso não é um problema, já que essa mensagem só aparece para mim :)

Primeiro vamos habilitar o módulo no apache:

sudo a2enmod ssl

Reinicie seu apache e vamos criar o seguinte diretório:

sudo mkdir /etc/apache2/ssl

Agora, vamos criar o certificado em si:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache2/ssl/apache.key -out /etc/apache2/ssl/apache.crt

Você precisará responder algumas perguntas para que o certificado seja gerado. Abaixo, deixei as respostas que utilizei:

Country Name (2 letter code) [AU]:BR  
State or Province Name (full name) [Some-State]:Minas Gerais  
Locality Name (eg, city) []:Varginha  
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Jony Hayama  
Organizational Unit Name (eg, section) []:<vazio>  
Common Name (e.g. server FQDN or YOUR name) []:localhost  
Email Address []:localhost@localhost

Agora precisamos configurar nosso apache para utilizar o certificado que criamos na pasta que desejamos, portanto vamos editar o arquivo:

sudo vim /etc/apache2/sites-available/default-ssl.conf

Excluindo os comentários, esse arquivo vem com o conteúdo abaixo:

<IfModule mod_ssl.c>
 <VirtualHost _default_:443>
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/html
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  SSLEngine on
  SSLCertificateFile /etc/ssl/certs/ssl-cert-snakeoil.pem
  SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key
  <FilesMatch "\.(cgi|shtml|phtml|php)$">
   SSLOptions +StdEnvVars
  </FilesMatch>
  <Directory /usr/lib/cgi-bin>
   SSLOptions +StdEnvVars
  </Directory>
 </VirtualHost>
</IfModule>

O arquivo finalizado ficará assim:

<IfModule mod_ssl.c>
 <VirtualHost _default_:443>
  ServerAdmin webmaster@localhost
  ServerName localhost
  DocumentRoot /home/jony/www
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  SSLEngine on
  SSLCertificateFile /etc/apache2/ssl/apache.crt
  SSLCertificateKeyFile /etc/apache2/ssl/apache.key
  <FilesMatch "\.(cgi|shtml|phtml|php)$">
   SSLOptions +StdEnvVars
  </FilesMatch>
  <Directory /home/jony/www>
   SSLOptions +StdEnvVars
   DirectoryIndex index.php
   AllowOverride All
   Order allow,deny
   Allow from all
  </Directory>
  BrowserMatch "MSIE [2-6]" \
          nokeepalive ssl-unclean-shutdown \
          downgrade-1.0 force-response-1.0
  BrowserMatch "MSIE [17-9]" ssl-unclean-shutdown
 </VirtualHost>
</IfModule>

Destaquei o endereço pois eu não utilizo o endereço padrão do apache que é /var/www/html.

Por fim, é necessário habilitar as configurações do arquivo:

sudo a2ensite default-ssl.conf

Prontinho, basta reiniciar seu apache e você poderá acessar http**s**://localhost .

WordPress

Instalar o WordPress também é simples e direto, então bora lá:

wget [https://wordpress.org/latest.tar.gz](https://wordpress.org/latest.tar.gz); tar -vzxf latest.tar.gz; mv wordpress **nova-pasta**;

Lembre-se de ajustar as permissões de arquivo conforme descrito mais acima.

Agora basta acessar http://localhost/**nova-pasta** e seguir os passos de instalação do próprio WP.

Conclusão

Este ambiente não é perfeito, mas têm me atendido bem. Em linhas gerais gostaria que o WSL tivesse um pouco mais de performance, mas nada que atrapalhe o dia-a-dia.

Basicamente acredito que o WSL é um ótimo meio termo entre Linux direto e um Mac. Se você, como eu, precisa de diversos aplicativos comerciais que não estão disponíveis para o pinguim e não tem grana suficiente para comprar uma maçã, acredito que esse ambiente é para você :)

Essa foi a minha primeira série de posts publicada no Medium, espero que tenha gostado!

Meu ambiente para desenvolvimento web com WSL2 - Javascript (AdonisJS + React + VueJS)

Jony Hayama — Tue, 02 Jun 2020 12:24:46 +0000

Esse post é o terceiro de uma série de 4

Como banco de dados para o AdonisJS, utilizo o PostgreSQL, que já mostrei como faço a instalação no post anterior, portanto não vou repeti-lo :)

O fato mais interessante do WSL é que ele permite que executemos comandos na Distro (quase) como se estivéssemos rodando o Linux diretamente. Há alguns detalhes aqui e ali, mas confesso que fiquei bastante surpreso com o fato da instalação do Node ser exatamente igual à que fazia diretamente no Ubuntu.

NVM

Esse é o gerenciador de versões do Node, da mesma forma que o RVM é para o Ruby.

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh) | bash

IMPORTANTE: durante a escrita desse post, a última versão disponível era a 0.35.3, recomendo que dê uma olhada no repositório oficial para instalar a versão mais recente: https://github.com/nvm-sh/nvm#install--update-script

Durante a instalação o NVM faz o seu melhor para já se adicionar ao arquivo ~/.zshrc, mas ele nem sempre consegue 🤷‍♀️. Portanto, abra uma nova aba e verifique se é possível executar o comando nvm -v (se você vêm seguindo desde o começo, pode só verificar se o termo nvm fica verde 😉).

Caso o NVM não esteja disponível, não se desespere, basta adicionar as linhas abaixo ao final do seu arquivo ~./zshrc:

export NVM_DIR="$HOME/.nvm"  
\[ -s "$NVM\_DIR/nvm.sh" \] && \\. "$NVM\_DIR/nvm.sh" # This loads nvm

Node e NPM

Depois de instalado o NVM, é hora de instalar o Node. Particularmente sempre instalo a versão LTS primeiro para deixá-la como padrão, portanto aí vai o comando:

nvm install --lts

Yarn

Via de regra prefiro usar o Yarn como gerenciador de dependências. Em linhas gerais eu o considero mais performático e, como estamos num ambiente que é — por definição — mais lento do que se estivéssemos diretamente no Linux, qualquer milésimo de segundo conta!

Primeiro precisamos adicionar o yarn ao repositório apt:

curl -sS [https://dl.yarnpkg.com/debian/pubkey.gpg](https://dl.yarnpkg.com/debian/pubkey.gpg) | sudo apt-key add -  
echo "deb [https://dl.yarnpkg.com/debian/](https://dl.yarnpkg.com/debian/) stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Agora é só rodar

sudo apt update && sudo apt install yarn

Se tudo ocorreu bem, você deve conseguir rodar yarn -v e ver a versão instalada.

Além disso, para conseguirmos instalar pacotes globalmente, precisamos adicionar a linha abaixo no nosso ~/.zshrc :

export PATH="$PATH:$(yarn global bin)"

Caso tenha dúvidas, basta dar um pulinho da documentação oficial: https://classic.yarnpkg.com/en/docs/install/#debian-stable

Como diria o ditado, estamos com a faca e o queijo na mão. Agora que o ambiente está pronto, podemos seguir com nosso desenvolvimento JS normalmente. Abaixo vou listar os comandos para instalação dos CLIs de cada biblioteca/framework que utilizo e como verificar sua instalação.

AdonisJS

Instale com:

yarn global add [@adonisjs/cli](http://twitter.com/adonisjs/cli "Twitter profile for @adonisjs/cli")

Verifique com:

adonis --version

Documentação: https://adonisjs.com/docs/4.1/installation

React

Instale com:

yarn global add create-react-app

Verifique com:

create-react-app --version

Documentação: https://create-react-app.dev/docs/getting-started/

Vue

Instale com:

yarn global add [@vue/cli](http://twitter.com/vue/cli "Twitter profile for @vue/cli")

Verifique com:

vue --version

Documentação: https://cli.vuejs.org/guide/installation.html

Meu ambiente para desenvolvimento web com WSL2 - Ruby on Rails (PostgreSQL)

Jony Hayama — Mon, 25 May 2020 17:34:07 +0000

Esse post é o segundo de uma série de 4

Na empresa onde trabalho, utilizamos Ruby on Rails com PostgreSQL para quase todos os projetos, é a nossa “go to language”.

PostgreSQL

Antes de mais nada, gosto de instalar o banco de dados. Estranhamente (ou não), durante a escrita deste post encontrei um erro ao fazer a instalação do banco que (até hoje) não consegui descobrir o motivo exato.

Depois de instalado tudo parece ok, entretanto, não é possível conectar-se ao banco. Sempre ocorre o erro de que o servidor não foi iniciado. Tentei fazer diversos ajustes no postgresql.conf e no pg_hba.conf, mas o fato é que há algum problema na instalação do PostgreSQL no WSL2. É necessário, portanto, reverter ao WSL1 para fazer a instalação. Ao final, pode voltar ao WSL2 que tudo funcionará perfeitamente.

Caso não se lembre, o comando a ser executado no PowerShell é:

wsl --set-version <Distro> <Version>

Agora, abra seu WSL e rode os comandos abaixo:

sudo apt update  
sudo apt install postgresql postgresql-contrib libpq-dev

Via de regra, sempre crio um usuário de banco “superuser” com o mesmo nome do meu usuário Linux. Para isso, basta mudarmos para a conta postgres:

sudo -i -u postgres

e usar o comando abaixo para criar o usuário:

createuser --interactive

O próprio script irá te solicitar que preencha os dados do novo usuário. Como disse antes, sempre crio um usuário que possui o mesmo nome do meu usuário linux. Caso não seja solicitada a senha durante a criação do usuário, pasta acessar o psql e executar o comando abaixo substituindo [nome-do-usuario] pelo nome de usuário que você acabou de criar.

\password [nome-do-usuario]

Se foi necessário criar uma senha utilizando o comando acima, digite \q para sair do psql.

Depois de criado o nosso usuário, já não há mais necessidade de estar logado com a conta postgres, portanto pode sair utilizando o comando exit.

Por força do hábito, sempre que preciso criar um banco, utilizo o comando abaixo:

sudo -u postgres createdb [nome-do-banco]

Há, naturalmente, diversas formas mais práticas de criar e gerenciar seus bancos de dados do que o terminal. Minha sugestão é instalar o pgAdmin. É só baixar a versão para Windows e configurar o acesso como localhost.

Uma característica do WSL é que é necessário iniciar o servidor sempre que o WSL for fechado, portanto segue o comando:

sudo service postgresql start

RVM

Para gerenciar as versões do Ruby, utilizo o RVM. Há uma versão dedicada ao Ubuntu e para instalá-la, precisamos, primeiramente instalar o software-properties-common:

sudo apt-get install software-properties-common

Agora, precisamos adicionar o PPA e instalá-lo via apt :

sudo apt-add-repository -y ppa:rael-gc/rvmsudo apt-get updatesudo apt-get install rvm

Por fim, para que o RVM venha sempre carregado, precisamos executar o comando abaixo:

echo 'source "/etc/profile.d/rvm.sh"' >> ~/.zshrc

Esse último é um pouco diferente da documentação oficial, pois utilizamos o zsh e não o bash. Caso encontre algum problema, acesse o repositório oficial: https://github.com/rvm/ubuntu_rvm

Agora você já pode rodar o comando abaixo para instalar a versão do Ruby que seu projeto utiliza:

rvm install ruby[-versao-do-ruby]

Caso seja uma aplicação novinha em folha, basta omitir a versão e instalar a mais recente :)

Agora que temos o Ruby instalado, precisamos também instalar o bundler

gem install bundler

Letter Opener

Se você, como eu, utiliza a gem letter_opener, você perceberá que o navegador não abre quando o e-mail é enviado. Isso pois o comando para abrir o navegador é enviado para seu WSL, portanto é necessário fazer uma configuração adicional para que o WSL encontrei seu browser. No meu caso, utilizo o Chrome, portanto, basta adicionar a seguinte linha ao seu ~/.zshrc

# Add BROWSER  
export BROWSER='/mnt/c/Program\ Files\ \\(x86\\)/Google/Chrome/Application/chrome.exe'

Outro probleminha que encontrará é que, agora, seu navegador abre, mas o endereço do arquivo é incorreto

Ainda não descobri uma forma de fazer isso automaticamente, por hora eu simplesmente adiciono o endereço abaixo ao caminho gerado:

wsl%24/Ubuntu-20.04/

o caminho acaba ficando algo como:

file://wsl%24/Ubuntu-20.04/home/jony/www/...

NodeJS

Por fim, as versões mais recentes do Rails precisam do Node para funcionar. Em especial por terem substituído o Sprockets pelo Webpacker. Como eu utilizo o mesmo ambiente para desenvolver aplicações JS eu prefiro usar o NVM (que vou explicar como instalar na próxima postagem da série), mas nada impede que você instale a versão do node disponível no apt:

sudo apt install nodejs

A partir daqui já podemos seguir com um fluxo trabalho comum... Podemos executar bundle install, rails db:migration, rails s, etc...

Como o objetivo desse post é compartilhar meu ambiente de trabalho, vou parando por aqui, mas se tiver interesse em “continuar nesse caminho”, dê uma olhada no Guia oficial: https://guides.rubyonrails.org/getting_started.html#creating-the-blog-application

Meu ambiente para desenvolvimento web com WSL2 - Geral

Jony Hayama — Mon, 18 May 2020 17:02:25 +0000

Há mais ou menos seis meses tenho utilizado o WSL2 como meu ambiente principal de desenvolvimento. Anteriormente usava a versão 1 e anteriormente o Ubuntu.

Atualmente tenho diferentes projetos criados com Ruby on Rails, React, AdonisJS, VueJS, WordPress e utilizo o VS Code como editor principal.

Esse é o primeiro post de uma série de 4:

Muitos usuário Linux vão torcer o nariz e dizer que seria melhor utilizar o Ubuntu diretamente ou o Mint ou Debian ou qualquer outra distro. Em linhas gerais, concordo. Meu principal problema, entretanto, é o simples fato dos aplicativos comerciais (como Photoshop, CorelDraw, Illustrator, pacote Office, etc.) não serem muito amigáveis com o pinguim.

Já usei as alterativas open source (como Gimp, Inkscape, LibreOffice, etc.), mas não consigo obrigar parceiros de trabalho a fazer o mesmo 🤷‍♂️. Já usei Wine, mas no final ficou meio "esquisito". Já usei dual boot e não suporto ter que reiniciar a máquina só por conta de uma aplicação.

Como (ainda) não tenho condições de trocar meu carro por uma maçã mordida, fico com o Windows que já veio instalado no meu notebook.

WSL não é perfeito. A versão 1 é bem lenta quando se trata de trabalho com muitos arquivos (leia-se npm install, bundle install e similares). A versão 2 trás uma melhora significativa nesse aspecto (apesar de ter seus problemas também). A Microsoft têm trabalhado bastante nessa frente e eu acredito que o resultado é excepcional. Vale lembrar, entretanto, que ainda estamos na fase de "preview", ou seja, alguns bugs são esperados.

Enfim, a ideia deste post não é justificar cada uma das minha escolhas, mas apenas compartilhá-las :)

Instalando o WSL

Antes de mais nada é necessário habilitar o WSL no sistema. Para isso, basta executar o comando abaixo no PowerShell:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Assim que o comando terminar de executar, será solicitado que você reinicie seu PC.

Agora, vá na Microsoft Store e faça uma busca por "Ubuntu". Existem outras distros na loja, não cheguei a testá-las, mas como já estou acostumado, uso o Ubuntu mesmo. A versão que utilizo é a 18.04.

Pausa para assimilar a instalação de uma distro Linux dentro da Microsoft Store…

Clique em "Obter" e a própria Store fará a instalação. Depois de instalado, será possível acessar o ambiente do Ubuntu diretamente do menu Iniciar. Na primeira vez que você o fizer, será necessário cadastrar seu usuário senha.

Já fiz esse setup diversas vezes para diversos colegas de trabalho e até hoje não tive problemas, mas a própria Microsoft possui um Troubleshoot nesse link: https://docs.microsoft.com/pt-br/windows/wsl/install-win10

Ativando a versão 2

Para usar a versão do WLS, é necessário (até o momento de escrita dessa postagem) ingressar no Windows Insider Program.

Agora, é necessário ativar o componente opcional "Plataforma de máquina virutal", o que pode ser feito executando os comandos abaixo no PowerShell e reiniciando o PC.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

De volta ao PowerShell, você pode verificar a versão do WSL para cada versão usando o comando wsl -l -v. Agora é só executar:

wsl --set-version <Distro> 2

Caso precise de mais detalhes, acesse a documentação da própria Microsoft: https://docs.microsoft.com/pt-br/windows/wsl/wsl2-install

Windows Terminal

Existem várias opções para usar um terminal no Windows. Uma das mais populares é o Hyper, que funciona muito bem também, mas com o Windows Terminal foi amor à primeira vista. Nele você consegue abrir abas de qualquer terminal que existe no Windows (Power Shell, cmd, WSL), ele aceita splits e a configuração é um simples JSON!

Então corre lá na Microsoft Store e instale-o, pode me agradecer depois ;)

Oh my ZSH

Particularmente gosto de um terminal cheio de auxílios visuais. Algo nessa linha:

Terminal sexy

Para chegar lá, primeiro precisamos instalar o ZSH:

sudo apt install zsh

Agora que o ZSH está instalado, bora instalar o Oh My ZSH

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Existem diversos plugins com diversas funcionalidades que já vêm junto com a instalação, você pode ver a lista completa em https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins

Particularmente uso dois que não estão na lista:

1 - zsh-syntax-highlighting que adiciona uma cor verde ou vermelha ao digitar um comando para te ajudar a ver se está correto ou não, para instalá-lo:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

2 - zsh-autosuggestions que irá exibir sugestões de comandos baseado no histórico de comandos que você já digitou, para instalá-lo:

git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

Depois de instalar os plugins será necessários adicioná-los na linha de plugins no seu ~./zshrc, vai ficar assim:

plugins=(
 git
 zsh-syntax-highlighting
 zsh-autosuggestions
)

Powerlevel10k

Esse será o responsável por deixar nosso terminal bonitão! Para exibir os ícones da maneira correta, primeiro precisamos instalar uma Nerd Font. Via de regra eu uso a Hack, mas se você é daqueles programadores que curte uma "ligature" sugiro a FiraCode. Baixe o pacode zip e instale as fontes.

Agora só é necessário ajustar a configuração do nosso terminal para exibir essa nova fonte. Já que vamos alterar esse arquivo, acredito que seja uma boa oportunidade para instalar o tema Dracula (que eu adoro).

Então abra as opções do seu terminal (ctrl + ,) e adicione o array abaixo, logo depois do array de profiles:

"schemes": [
    {
        "name" : "Dracula",
        "background" : "#272935",
        "black" : "#21222C",
        "blue" : "#BD93F9",
        "cyan" : "#8BE9FD",
        "foreground" : "#F8F8F2",
        "green" : "#50FA7B",
        "purple" : "#FF79C6",
        "red" : "#FF5555",
        "white" : "#F8F8F2",
        "yellow" : "#FFB86C",
        "brightBlack" : "#6272A4",
        "brightBlue" : "#D6ACFF",
        "brightCyan" : "#A4FFFF",
        "brightGreen" : "#69FF94",
        "brightPurple" : "#FF92DF",
        "brightRed" : "#FF6E6E",
        "brightWhite" : "#F8F8F2",
        "brightYellow" : "#FFFFA5"
    }
]

Agora, no seu array de profiles altere o objeto do seu WSL acrescentando o seguinte:

"fontFace": "FiraCode Nerd Font",
"colorScheme": "Dracula",
"fontSize": 10

Seu objeto ficará mais ou menos assim:

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl",
    "fontFace": "FiraCode Nerd Font",
    "colorScheme": "Dracula",
    "fontSize": 10
}

Ainda nas opções do terminal, sugiro alterar o defaultProfile para o guid equivalente ao seu WSL, assim eles será o padrão ao abrir uma nova aba.

Finalmente é hora de instalar o Powerlevel10k, portanto execute esse comando no seu terminal:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

Agora abra seu ~/.zshrc e altere a linha do tema para ZSH_THEME="powerlevel10k/powerlevel10k" e abra uma nova aba do WLS. Você será levado para um wizard para que escolha as opções que achar mais interessante.

VS Code

Acesse o site e baixe o instalável: https://code.visualstudio.com/. A instalação segue o bom e velho modelo "next, next, next, install". Sim, a instalação é feita no Windows e não no WSL.

Para fazer com que ele funcione em conjunto com o WSL, é necessário adicionar duas extensões, aí vão:

Depois das extensões instaladas, basta acessar uma pasta no seu WSL e executar code . e o VS Code baixará um server para seu WSL e abrirá com a indicação de que você está no seu ambiente Ubuntu.

Como já disse, adoro o tema Drácula, e alguns auxílios visuais, portanto vou deixar aqui uma pequena lista das extensões que uso no meu dia-a-dia bem como algumas configurações que utilizo no meu editor.

Extensões:

Bracket Pair Colorizer
Dracula Official
Highlight Matching Tag
Material Icon Theme
GitLens (não só pelos auxílios visuais, mas adoro o current line blame 😂)

settings.json:

"editor.tabSize": 2,
"highlight-matching-tag.styles": {
  "opening": {
    "full": {
      "custom": {
        "dark": {
          "backgroundColor": "rgba(255, 255, 255, .15)",
          "borderWidth": "1px 0 1px 0",
          "borderColor": "rgb(80, 250, 123)",
          "borderStyle": "solid",
          "right": "10px"
        },
        "light": {
          "backgroundColor": "rgba(0, 0, 0, .15)",
          "borderWidth": "1px 0 1px 0",
          "borderColor": "brown",
          "borderStyle": "solid",
          "right": "10px"
        }
      }
    }
  },
  "closing": {
    "full": {
      "custom": {
        "dark": {
          "backgroundColor": "rgba(255, 255, 255, .15)",
          "borderWidth": "1px 0 1px 0",
          "borderColor": "rgb(80, 250, 123)",
          "borderStyle": "solid",
          "right": "10px"
        },
        "light": {
          "backgroundColor": "rgba(0, 0, 0, .15)",
          "borderWidth": "1px 0 1px 0",
          "borderColor": "brown",
          "borderStyle": "solid",
          "right": "10px"
        }
      }
    }
  }
},
"files.autoSave": "off",
"editor.fontFamily": "'FiraCode Nerd Font', Consolas, 'Courier New', monospace",
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss05'"

Acredito que essas configurações sejam bem genéricas e se aplicam a qualquer linguagem que você resolva utilizar para desenvolver. Como disse no começo dessa postagem, eu utilizo stacks diferentes dependendo do projeto em que vou trabalhar. Nas próximas postagens vou compartilhar stack por stack, acompanhe! 😊

Também publicado no Medium

Como clonar um app no Heroku

Jony Hayama — Sun, 17 May 2020 19:48:35 +0000

Originalmente postado no Medium

Hoje fui confrontado com uma task super simples: Criar 3 ambientes de staging para que nossos QAs trabalharem e assim evitar que fiquem “trombando” uns nos outros. O nosso cenário até o momento era, 1 ambiente por projeto e 2 profissionais para fazer os testes.

Nosso problema surgiu quando decidimos fazer uma força-tarefa e agilizar as entregas para um cliente em específico. Todo o time será realocado para o mesmo projeto. Aliado a isso, um novo QA foi contratado para compor a equipe.

Agora ficamos: 1 projeto, 3 QAs e apenas 1 ambiente para que façam seus testes.

Com apenas um ambiente, é natural que não consigam testar coisas diferentes em paralelo. Nossa ideia foi bastante simples: Criar um ambiente de staging para cada um e compartilho como fizemos:

A ideia é copiar o app my-staging para my-new-staging. Estou partindo do pressuposto que o Heroku Cli já está instalado e operando.

Repositório

Aqui trabalhamos com o Automatic Deploy, vinculado a uma branch específica do GitHub (carinhosamente chamada de stg/star-wars).

Esse processo é bastante simples:

git checkout master
git pull
git checkout -b stg/star-wars
git push -u origin HEAD

Depois crie a nova aplicação no Heroku e na seção “Deploy” conecte seu GitHub e escolha a branch conforme o print abaixo:

Copiando as variáveis de ambiente

Primeiro copiamos as variáveis para um txt qualquer:

heroku config -s -a my-staging > heroku-env.txt

Depois é necessário enviá-las para a nova aplicação. Antes disso, é importante revisar as variáveis que, de fato, precisam ir. De cara, precisamos remover DATABASE_URL, já que o banco de dados será outro.

cat heroku-env.txt | tr '\n' ' ' | xargs heroku config:set -a my-new-staging

Copiando o banco de dados (PostgreSQL)

Primeiramente precisamos gerar o backup na app de origem:

heroku pg:backups:capture -a my-staging

Esse comando terá uma resposta parecida com o print abaixo:

O importante aqui é a referência b079, que utilizaremos no próximo comando:

heroku pg:backups:restore my-staging::b079 --app my-new-staging

Repeti esse processo mais duas vezes e voilà card movido para “done” 😃