Codificando no Browser

Um pouco antes de sair de férias peguei uma dica de um youtuber que falava sobre possibilidade de desenvolver  diretamente no browser utilizando uma estrutura de docker. Para quem vem do desktop, aquilo parecia muito estranho e me chamou a atenção.

Por outro lado, tenho alguns projetos em typescript e nodejs que seria perfeitamente aplicável esta ideia. Fui lá conferir o material e fiquei impressionado com facilidade ao utilizar a ferramenta.
De partida queria tentar usar “Flutter” lá na ferramenta, depois de muitas buscas no google cheguei a algumas soluções para configurar o docker a carregar as ferramentas necessária para o desafio que vou descrever aqui em passos a serem seguidos.

GitPod como ferramenta

1 – Ter uma conta no GitHub;
2 – instalar no chrome a extenção https://www.gitpod.io/docs/20_browser_extension/
3 – entrar na conta no GitHub, agora irá ver um novo botão ao lado dos seus projetos “GitPod”; executando o GitPod irá criar uma instância do docker para editar o código do seu projeto;

VSCode – no Docker

Ao criar o GitPod já irá iniciar um VSCode para você editar o código e já vem instalado com algumas extensões para sair usando. Vale a pena ler a documentação do GitPod para ver como que ele funciona, quando irá descobrir que eles não tiveram autorização para baixar as extensões automaticamente para o VSC. Não chega a ser um complicador, basta baixa a extensão desejada para a máquina local (download) e arrastá-la para sobre a pasta de extensões do VSC no browser e ele irá subir a extensão e fazer a instalação lá no docker.

Se estiver trabalhado com Typescript, javascript e outros, talvez já esteja pronto – já para flutter é preciso baixar o SDK e aquelas coisas que já estamos acostumados. Pensando em docker, é possível configurar para fazer o trabalho ao iniciar, ao que passarei a discorrer.

Se ainda não tem um projeto Flutter lá no GitHub, crie uma pasta nova vazia para ele. Se já tem, pode reaproveitá-la para criar o conteúdo necessário a configuração. Neste ponto você já entrou pelo botão do GitPod que aparece no GitHub e já está na máquina do docker, então vamos criar dois arquivos. Vai no terminal (prompt) do VSC e digite “gp init”, isto fará com que o GitPod crie dois novos arquivos na pasta.
Arquivo: .gitpod.yml

image:
  file: .gitpod.Dockerfile

tasks:
  - before: |
      export PATH=$FLUTTER_HOME/bin:$ANDROID_HOME/bin:$ANDROID_HOME/platform-tools:$PATH
      mkdir -p /home/gitpod/.android
      touch /home/gitpod/.android/repositories.cfg
    init: |
      echo "Installing Flutter SDK..."
      cd /workspace && wget -qO flutter_sdk.tar.xz https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.9.1+hotfix.4-stable.tar.xz && tar -xf flutter_sdk.tar.xz && rm -f flutter_sdk.tar.xz
      echo "Installing Android SDK..."
      mkdir -p /workspace/android-sdk && cd /workspace/android-sdk && wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip && unzip -qq sdk-tools-linux-4333796.zip && rm -f sdk-tools-linux-4333796.zip
      echo y | /workspace/android-sdk/tools/bin/sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3"
      echo "Init Flutter..."
      flutter channel master
      flutter upgrade
      yes | flutter doctor --android-licenses
      cd /workspace/gitpod-flutter
      flutter pub get
      flutter config --enable-web
      flutter doctor
    command: |
      echo "Ready to go!"
  - command: |
      export PATH=$FLUTTER_HOME/bin:$ANDROID_HOME/bin:$ANDROID_HOME/platform-tools:$PATH
      flutter upgrade
      flutter pub get
      flutter config --enable-web
      flutter doctor
      echo "Ready to start!"
vscode:
  extensions:
    - Dart-Code.dart-code@3.5.0-beta.1:Wg2nTABftVR/Dry4tqeY1w==
    - Dart-Code.flutter@3.5.0:/kOacEWdiDRLyN/idUiM4A==
    - Nash.awesome-flutter-snippets@2.0.3:6jLJSOqEGV5k8R0xYG7Oqg==

A parte da extensions, pode ocorrer que seja necessário instalar elas em separado, fica de exemplo como que eu estou usando.
Arquivo:.gitpod.Dockerfile

FROM gitpod/workspace-full-vnc

ENV ANDROID_HOME=/workspace/android-sdk \
    FLUTTER_ROOT=/workspace/flutter \
    FLUTTER_HOME=/workspace/flutter

USER root

RUN apt-get update && \
    apt-get -y install build-essential libkrb5-dev gcc make gradle openjdk-8-jdk && \
    apt-get clean && \
    apt-get -y autoremove

Agora que já tem os arquivos de configuração do docker é necessário parar a área de trabalho “stop workspace” que fica lá nas opções de usuário (no menu do avatar) e depois iniciar novamente o workspace quando será instalado o SDK e deixar tudo configurado para iniciar o trabalho.

Se for mais confortável, pode fazer um fork de https://github.com/amarildolacerda/flutter_dart e pegar as configurações diretamente no projeto – ainda de brinde vai alguns exemplos que tenho usado no aprendizado.

Se gostou, deixa os seus comentários para que eu me reoriente as novas publicações.

Gratidão e bom uso.