Gitpod: ambiente de programação em nuvem

Já pensou em conseguir criar um projeto sem configurar um ambiente, validar uma ideia e tudo isso já estar dentro do seu GitHub? É bem comum eu precisar validar alguma ideia que eu tive, principalmente quando o time vai fazer uma tarefa mais complexa e normalmente todo mundo tem um fluxo de, criar um mini projetinho e sair codando uma proposta ou PoC (Proof of Concept). O problema desses projetinhos é que trabalhando com JavaScript é super comum termos vários desses projetinhos perdidos pelo computador e termos várias pastas node_modules, comendo toda nossa memória e normalmente só descobrimos isso tarde demais. Felizmente recentemente comecei a usar o Gitpod e a ideia desse post é compartilhar o por que acho que ele é um forte candidato para resolver esse problema dos projetinhos espalhados no PC.

Conhecendo o Gitpod

A primeira vista, se você trabalha com Visual Studio Code considere-se pronto para usar essa ferramenta, caso não conheça, da uma olhada nesse post meu falando justamente desse editor que roubou meu coração. Isso se da pelo fato do Gitpod usar como base o Projeto Theia que, em linhas gerais, é um port do VS Code para rodar dentro de um browser.

Para usar o Gitpod, você precisa ter uma conta no GitLab ou GitHub (falamos mais sobre Git e Github e os primeiros passos aqui) e depois acessar https://gitpod.io/login/

Criando o primeiro projeto

Após criar sua conta, você será levado para uma página com uma listagem de vários templates onde você pode clicar e já sair codando

Porém, como vamos trabalhar com o create-react-app nesse exemplo, vamos criar um repositório novo, que no meu caso é https://github.com/omariosouto/poc-create-react-app

Para conseguir acessar o ambiente vinculado com esse repo, vamos precisar acessar no navegador uma URL que vai ser:

• O próprio site do https://gitpod.io/# como prefixo e como sufixo a URL do nosso repositório, ficando algo assim no meu caso: https://gitpod.io/#https://github.com/omariosouto/poc-create-react-app
• Após um pequeno loading, será possível ver um editor aberto com um terminal onde podemos criar o setup base do nosso projeto

Após ter arquivos no seu projeto, você pode instalar a extensão do Gitpod e subir o editor navegando direto pelo GitHub, o que ele faz é o processo de gerar a url com o prefixo deles + a URL do repositório que você quer trabalhar.

Agora basta no terminal aberto dentro do editor, basta executarmos o comando yarn create react-app ./ e após tudo ser baixado, podemos visualizar o resultado rodando yarn start e então será aberto um browser que você pode visualizar tudo o que estiver codando e abrir e fechar isso sempre que quiser via a aba ports, do lado do terminal que o Gitpod libera para nós trabalharmos

Vale olhar também que o Gitpod gera uma URL pública, o que facilita caso você queira mostrar o que está fazendo para outros membros do time, ou só testar em uma tela maior.

Salvando seu progresso

Após fazer as alterações necessárias na sua POC/Projeto, basta fazer um commit como faria na sua máquina normalmente, a única diferença aqui é que vai ser necessário liberar algumas permissões na sua conta do GitHub, atráves desse link https://gitpod.io/access-control/?toBeReviewed=github.com, para que o GitPod possa atualizar os arquivos dentro do seu projeto.

Se quiser ver o código da uma olhada aqui: https://github.com/omariosouto/poc-create-react-app

OBS: Aqui lembre-se de só habilitar o necessário e se não se sentir confiante em liberar os acessos de escrita, crie uma conta para testar ou só não habilite acesso aos projetos da empresa onde você trabalha.

Ajustando seu projeto para trabalhar com o Gitpod

Como temos praticamente um VSCode, é plenamente possível instalar extensões aqui e caso você queira fazer um setup mais legal em seu projeto de já vir com testes rodando, servidor na porta 3000 já com tudo ligadinho, você pode adicionar em seu projeto um arquivo de configuração que você pode ver mais detalhes através desse link: https://www.gitpod.io/docs/config-start-tasks/

Precisa pagar?

Bom como todo mundo nessa vida precisa pagar boletos, a ferramenta tem sua versão grauita comm 50 horas de uso por mês, um número bem justo para testar e ir experimentando e caso você queira ter um uso ilimitado (se for usar como editor principal com certeza vai precisar) da uma olhada nos planos aqui nesse link e vê o que faria mais sentido para você.

Vale a pena como editor principal?

Bom, ao meu ver é sempre bom testar novas ferramentas, se você tiver uma boa conexão de internet eu só tenho a dizer vai fundo. A primeira vez que usei senti um pouco de input lag, mas já esperava por isso (diferente de quem testou o Google Stadia e achou que tudo ia rodar 100%).

Particularmente achei a proposta bem legal e fico feliz de estar vivendo o futuro que eu comentava a algo em torno de 3 anos atrás, chuto que com alternativas desse tipo e uma internet boa (lembrando que o acesso a internet que em vários lugares do mundo ainda é bem precário), bastaria um Chromebook ou um computador com menos hardware para programmar (quemm sabe um raspberry?), e a preocupação com setup de ambientes ia ser bem menor e também.

Consigo imaginar inúmeras aplicabilidades disso tanto para exercícios aqui na Alura, projetos de faculdade (Eu mesmo já usei um editor parecido enquanto fazia um curso a distância de Ciências da Computação pelo https://edx.org, na época usei o Cloud9).

Ainda não usaria como editor principal, mas ao longo do ano irei me forçar para fazer mais testes e volto em um outro post para falar sobre as experiências.

E falando em experiências, caso você queira ver algumas delas da uma olhada no meu canal no youtube "Dev Soutinho" e se quiser bater um papo comigo vem no twitter @omariosouto, até o próximo post :)