Porque GitHub Codespaces a melhor ferramenta para seu Workshop de programao

Ensinar uma turma complicado.
Cada pessoa tem um computador diferente, com configuraes diferentes, estudantes precisam instalar ferramentas para acompanhar suas aulas, e nem sempre a instalao d certo de primeira, e isso consome tempo e energia.

Se a aula for online, mais difcil, 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 instantneo baseado em nuvem que usa um container para fornecer linguagens e ferramentas comuns para desenvolvimento.

Ele configurvel, 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 tm a mesma base para comear o projeto em seus navegadores, sem a necessidade de instalar ferramenta alguma.

Tudo o que voc precisa fazer ter um tutorial de como comear a usar o Codespaces.

Depois disso, s compartilhar o seu ambiente de desenvolvimento, e sua turma vai comear do mesmo ponto de partida.

Como criar um Codespace

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

Na pgina inicial do repositrio, procuramos o boto verde Code e no dropdown, escolhemos a aba Codespaces.

Logo depois clicamos no boto 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 esto no mesmo ambiente inicial, voc pode compartilhar extenses e ferramentas necessrias para o projeto, e em pouco tempo, todas as pessoas estudantes estaro prontas para botar a mo na cdigo.

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

• ESLint: para ajudar estudantes a encontrar mais fcilmente erros no cdigo,

• Prettier: ajudar na formatao e organizao do cdigo

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

Essas so apenas algumas sugestes, mas como o Codespaces praticamente te oferece um Visual Studio Code no seu navegador, voc pode usar quase todas as extenses encontradas na verso desktop, inclusive os temas bonitinhos hihi.

Quer ainda mais praticidade? Use auto-load para as extenses

Para ficar ainda mais fcil que todas as pessoas fazendo seu workhop tenha as mesmas ferramentas, voc pode preparar um arquivo .json com todas as extenses necessrias 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 extenes 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 extenses necessrias, em poucos segundos todas as pessoas acompanhando a aula, tero todas as ferramentas necessrias.

Voc pode atualizar seu devcontainer.json manualmente, ou indo na extenso 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 conheo, independente da experincia, apanha de version control em um momento ou outro (quem nunca n?), ento facilitaria muito o seu workshop, se pudssemos fazer commits e push sem brigar com o got n?

Ento outra vantagem de se usar Codespaces para suas aulas, que participantes no 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 atualizaes mais facilmente, apenas com cliques.

No confundir!

No confunda o codespaces com o github.dev.

O github.dev um editor de cdigo em navegador leve, que pode ser acessado facilmente de qualquer repositrio no GitHub (abra um repositrio no seu Github agora, e da pgina inicial aperte o . no seu teclado e espere a mgica acontecer).

Enquanto o github.dev uma tima ferramenta, ele no Codespaces. Basicamente, o codespaces github.dev bombado haha.

Consideraes

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

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

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

Aproveite e me siga tambm haha <3

Feliz ano novo!