Lädt...


🔧 Porque GitHub Codespaces é a melhor ferramenta para seu Workshop de programação


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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.

visual de como criar um codespaces

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):

como criar o json

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 got 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.
interface Ui do github no vscode

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, que tenha 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 usar 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!

...

🔧 Porque GitHub Codespaces é a melhor ferramenta para seu Workshop de programação


📈 173.57 Punkte
🔧 Programmierung

🔧 MySQL, PostgreSQL e MariaDB, qual o melhor para o seu uso?


📈 57.84 Punkte
🔧 Programmierung

🔧 Desenvolva suas habilidades de programação de forma divertida: 10 jogos para aprender programação


📈 55.92 Punkte
🔧 Programmierung

📰 Microsoft integriert Visual Studio Codespaces in GitHub Codespaces


📈 47.1 Punkte
📰 IT Nachrichten

📰 Microsoft integriert Visual Studio Codespaces in GitHub Codespaces


📈 47.1 Punkte
📰 IT Security Nachrichten

🔧 Documentação técnica para iniciantes, parte 1: criando um bom README para o seu projeto


📈 46.09 Punkte
🔧 Programmierung

🔧 Reactjs, o 80/20 do seu melhor e mais performático código


📈 44.97 Punkte
🔧 Programmierung

🔧 Calculadora de Horas: Uma Ferramenta Essencial para a Gestão de Tempo


📈 43.17 Punkte
🔧 Programmierung

🔧 Clingon: A Ferramenta CLI para Geração de Recursos


📈 43.17 Punkte
🔧 Programmierung

🔧 Programação Orientada a Objetos e Programação Funcional


📈 43.05 Punkte
🔧 Programmierung

🔧 Decorator: Personalize Seu Carro no Mundo da Programação 🚗🛠️


📈 41.89 Punkte
🔧 Programmierung

🔧 3 motivos do porquê testes unitários não são suficientes para Microservices com Spring Boot


📈 40.78 Punkte
🔧 Programmierung

🔧 Como a tecnologia ajuda a escolher a melhor época do ano para viajar


📈 37.47 Punkte
🔧 Programmierung

🔧 GraphQL vs. REST: Qual é a Melhor Escolha para sua API?


📈 37.47 Punkte
🔧 Programmierung

🔧 Web ou App? Qual o melhor para criar em Flutter?


📈 37.47 Punkte
🔧 Programmierung

🔧 Ocultar Slides ou Criar Novas Derivações: Qual a Melhor Abordagem para Apresentações?


📈 37.47 Punkte
🔧 Programmierung

🔧 Usando a gem httplog para uma melhor análise dos logs


📈 37.47 Punkte
🔧 Programmierung

🍏 A melhor maneira de converter de HEIC para PDF no Mac


📈 37.47 Punkte
🍏 iOS / Mac OS

🔧 Tentando Conquistar o Mundo da Programação: Dicas para Resolver Problemas


📈 34.39 Punkte
🔧 Programmierung

🔧 Como tem sido o meu processo criativo para escrever um livro infantil sobre programação


📈 34.39 Punkte
🔧 Programmierung

🔧 Lista de Exercícios para treinar Lógica de Programação 2.


📈 34.39 Punkte
🔧 Programmierung

🔧 Lista de Exercícios para treinar Lógica de Programação


📈 34.39 Punkte
🔧 Programmierung

🔧 15 Livros para você Aprender a Criar Sua Própria Linguagem de Programação


📈 34.39 Punkte
🔧 Programmierung

🔧 Como a programação ajudou minha viagem para a Coreia do Sul


📈 34.39 Punkte
🔧 Programmierung

🔧 [S.O.L.I.D.] Os Cinco Pilares da Programação Orientada a Objetos para Desenvolvedores.


📈 34.39 Punkte
🔧 Programmierung

🔧 Ponteiros na programação para iniciantes.


📈 34.39 Punkte
🔧 Programmierung

🔧 Dicas para iniciantes na programação:


📈 34.39 Punkte
🔧 Programmierung

🔧 Dominando os Desafios da Programação: Um Guia para os Erros Léxicos, Sintáticos e Semânticos


📈 34.39 Punkte
🔧 Programmierung

🔧 🌟🚀💻 Plataforma Gamificada para Aprender Programação ✨🎮


📈 34.39 Punkte
🔧 Programmierung

🔧 Otimizando Custos na AWS: O Poder do Spot.io para Reduzir seu AWS Billing


📈 33.22 Punkte
🔧 Programmierung

matomo