Ensinar uma turma é complicado.
Cada pessoa tem um computador diferente, com configurações diferentes, estudantes precisam instalar ferramentas para acompanhar suas aulas, e nem sempre a instalação dá certo de primeira, e isso consome tempo e energia.

Se a aula for online, é mais difícil, ainda de dar o melhor suporte para cada estudante.

Mas o Codespace pode te ajudar com boa parte desses problemas.

O que é o GitHub CodeSpaces?

O GitHub Codespaces é um ambiente de desenvolvimento instantâneo baseado em nuvem que usa um container para fornecer linguagens e ferramentas comuns para desenvolvimento.

Ele é configurável, o que permite que você crie um ambiente de desenvolvimento personalizado para seu workshop ou projeto.

E como isso me ajuda em Workshops?

Com o Codespaces, todas as pessoas estudantes do seu curso têm a mesma base para começar o projeto em seus navegadores, sem a necessidade de instalar ferramenta alguma.

Tudo o que você precisa fazer é ter um tutorial de como começar a usar o Codespaces.

Depois disso, é só compartilhar o seu ambiente de desenvolvimento, e sua turma vai começar do mesmo ponto de partida.

Como criar um Codespace

Primeiramente, precisamos de um repositório no Github. Você pode compartilhar com as pessoas participando do seu workshop um template base, ou pedir para que elas criem um repositório novo.

Na página inicial do repositório, procuramos o botão verde “Code’ e no dropdown, escolhemos a aba Codespaces.

Logo depois clicamos no botão verde “Create codespace on main” e seu ambiente de desenvolvimento online será aberto.

Personalizando para seu workshop

Agora que todas as pessoas fazendo seu workshop estão no mesmo ambiente inicial, você pode compartilhar extensões e ferramentas necessárias para o projeto, e em pouco tempo, todas as pessoas estudantes estarão prontas para botar a mão na código.

Por exemplo, para um projeto de front-end você pode usar ferramentas como

• ESLint: para ajudar estudantes a encontrar mais fácilmente erros no código,

• Prettier: ajudar na formatação e organização do código

• Deploy to GitHub: Uma extensão criada pela minha companheira de trabalho, Rizel, que te ajudar a subir seu projeto para o GitHub Pages diretamente do seu IDE

Essas são apenas algumas sugestões, mas como o Codespaces praticamente te oferece um Visual Studio Code no seu navegador, você pode usar quase todas as extensões encontradas na versão desktop, inclusive os temas bonitinhos hihi.

Quer ainda mais praticidade? Use auto-load para as extensões

Para ficar ainda mais fácil que todas as pessoas fazendo seu workhop tenha as mesmas ferramentas, você pode preparar um arquivo .json com todas as extensões necessárias e compartilhar com elas.

No root do projeto, crie uma pasta chamada .devcontainer e dentro dela crie um arquivo com o nome de devcontainer.json. Dentro desse arquivo você pode colocar os valores de ID das extenções do VS Code, como no exemplo abaixo:

devcontainer.json

{ 

    "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "blackgirlbytes.deploy-to-github-pages"
    ]

 }

`

Compartilhando esse arquivo .json pré-criado por você pessoa instrutora, com as extensões necessárias, em poucos segundos todas as pessoas acompanhando a aula, terão todas as ferramentas necessárias.

Você pode atualizar seu devcontainer.json manualmente, ou indo na extensão e clicando em Add to devcontainer.json, como mostrado na imagem abaixo (note que para fazer isso você tem que ter o arquivo já criado):

Sem “brigar” com version control

Toda pessoa desenvolvedora que eu conheço, independente da experiência, apanha de version control em um momento ou outro (quem nunca né?), então facilitaria muito o seu workshop, se pudéssemos fazer commits e push sem brigar com o git né?

Então outra vantagem de se usar Codespaces para suas aulas, é que participantes não precisam escrever comandos git para commitar seu projeto, porque no Codespaces temos acesso a UI de source control do VS Code, para ajudar suas pessoas estudantes a fazer o stage, commit e push das suas atualizações mais facilmente, apenas com cliques.

Não confundir!

Não confunda o codespaces com o github.dev.

O github.dev é um editor de código em navegador leve, que pode ser acessado facilmente de qualquer repositório no GitHub (abra um repositório no seu Github agora, e da página inicial aperte o . no seu teclado e espere a mágica acontecer).

Enquanto o github.dev é uma ótima ferramenta, ele não é Codespaces. Basicamente, o codespaces é github.dev bombado haha.

Considerações

Espero que esse post tenha te ensinado algo, e que se você for uma pessoa instrutora, use essas dicas na sua próxima aula! (me avise se deu certo).

Esse post foi inspirado por um post que a Rizel escreveu ano passado sobre como ela usa o Codespaces como instrutora de front-end. Você pode ler esse artigo aqui, em inglês.

Para ficar por dentro das novidades do GitHub em português, siga o GitHub Brasil no Twitter e no Linkedin!

Aproveite e me siga também haha <3

Feliz ano novo!