Mão na massa

Você vai precisar de uma conta no GitHub. Se ainda não tem, veja Criando uma conta no GitHub.

Travou em algum passo? Veja Travou?, no fim da página.

1. Crie o seu repositório

Um repositório é uma pasta no GitHub que guarda todos os arquivos de um projeto. O Rails Girls SP preparou um modelo de repositório que deixa o seu codespace pronto, com o Ruby e o Rails instalados. Ele ainda não tem o app: você vai criar o app no passo 4.

1. Abra o modelo: github.com/RailsGirls-SP/codespaces-rails.
2. Clique no botão Use this template e depois em Create a new repository.
3. Em Repository name, escreva mural-de-recados.
4. Em Choose visibility, escolha Public. Assim, a equipe de mentoria consegue ver o seu código pelo link, e o seu app fica no seu perfil do GitHub. Você pode mudar isso depois, se quiser.
5. Clique em Create repository.

Repositórios públicos podem ser vistos por qualquer pessoa: nunca coloque senhas ou dados pessoais nos arquivos do projeto.

Confira: você está na página do seu repositório, com o seu nome de usuária antes de /mural-de-recados.

Terminou? Abra o passo 2. Abra o seu codespace

2. Abra o seu codespace

Um codespace é um computador na nuvem, ligado ao seu repositório. Você usa pelo navegador.

1. Na página do repositório, clique no botão verde Code.
2. Escolha a aba Codespaces.
3. Clique em Create codespace on main.

Dê um palpite: o que você acha que vai abrir?

Na primeira vez, o codespace leva alguns minutos para ficar pronto: ele está instalando o Rails para você. Enquanto isso, aparece o aviso Building codespace… no canto inferior direito.

Pode aparecer a pergunta Do you trust the authors of the files in this folder? (Você confia em quem criou os arquivos desta pasta?). Os arquivos vieram do modelo do Rails Girls SP, então clique em Trust Folder & Continue.

Quando o codespace terminar de carregar, o terminal mostra uma mensagem de boas-vindas e fica pronto para receber comandos.

Confira: a tela tem três áreas.

• À esquerda, o Explorer: a lista de arquivos do projeto.
• No meio, o editor: onde os arquivos abrem quando você clica neles.
• Embaixo, o terminal: onde você digita comandos. Se ele não aparecer, abra pelo menu ☰ → Terminal → New Terminal. Veja mais sobre o terminal em Terminal básico.

À direita, pode aparecer um painel de chat com IA. Você pode fechar esse painel clicando no X.

Terminou? Abra o passo 3. Confira as ferramentas

3. Confira as ferramentas

No terminal, digite:

ruby -v

E depois:

rails -v

Confira: o resultado de cada comando aparece logo abaixo dele. O primeiro mostra a versão do Ruby, e o segundo, a versão do Rails. Se aparecerem números de versão, as ferramentas estão prontas.

Terminou? Abra o passo 4. Crie o app

4. Crie o app

Dê um palpite: o comando se chama rails new. O que você acha que ele vai criar?

No terminal, digite (o ponto no final faz parte do comando):

rails new .

O comando leva um ou dois minutos. Ele cria os arquivos e depois baixa as bibliotecas que o Rails usa.

Logo no começo, o Rails vai perguntar se pode sobrescrever o arquivo README.md, que veio do modelo. Digite Y (de yes, sim) e aperte Enter para confirmar: o README do modelo é trocado pelo README do seu app.

Confira: o terminal mostrou uma lista enorme de linhas começando com create, e o Explorer agora tem várias pastas novas, como app, config e db. Era o que você esperava?

Terminou? Abra o passo 5. Ligue o servidor

5. Ligue o servidor

No terminal, digite:

bin/rails server

Dê um palpite: o que vai acontecer com o terminal depois desse comando?

Confira:

• O terminal mostra algumas mensagens e fica parado, sem voltar para o lugar de digitar. Isso é normal: o servidor está ligado, esperando visitas.
• No canto da tela, aparece um aviso dizendo que a aplicação está rodando na porta 3000. Clique em Open in Browser.

• Abre uma aba nova com a página de boas-vindas do Rails. 🎉

Essa é a primeira página do seu app Mural de recados. Ainda não tem nenhum recado, mas o app já existe!

Terminou? Abra o passo 6. Guarde o seu progresso

6. Guarde o seu progresso

Os arquivos do app estão no codespace, mas ainda não foram guardados no seu repositório no GitHub. Para guardar, você vai fazer um commit: um registro de como o projeto está agora, com uma mensagem dizendo o que mudou. Veja mais em Git básico.

1. Na barra da esquerda, clique no ícone de Source Control (o terceiro, com bolinhas ligadas por linhas). O número em cima dele mostra quantos arquivos mudaram.

2. Ao lado de Changes, clique no + (Stage All Changes). Assim, todos os arquivos vão entrar no commit.

   

3. Confira se a lista agora se chama Staged Changes. No campo de mensagem, escreva o que mudou, por exemplo Cria o app Mural de recados, e clique em Commit.

   

   Dê um palpite: depois do commit, os arquivos já aparecem no seu repositório no GitHub?

4. Ainda não: o commit está guardado só no codespace. Para mandar para o GitHub, clique em Sync Changes.

   

5. Na janela que abrir, clique em OK.

   

Confira: em Graph, na parte de baixo do painel, o seu commit aparece com a etiqueta main e um ícone de nuvem ao lado: isso quer dizer que ele já está no GitHub.

Um codespace parado por muito tempo é apagado pelo GitHub (o padrão é depois de 30 dias). O que não foi enviado com Sync Changes se perde junto. Por isso, termine sempre com o commit e o Sync.

Daqui pra frente, todo capítulo termina assim: com o app funcionando e um commit guardando o seu progresso.

Terminou? Abra o passo 7. Confira no GitHub

7. Confira no GitHub

Agora o seu código não está só no codespace: ele também está guardado no seu repositório no GitHub.

Dê um palpite: o que vai aparecer na página do seu repositório?

1. Volte para a aba do navegador com a página do seu repositório (aquela do passo 1) ou abra github.com/seu-nome-de-usuária/mural-de-recados.
2. Recarregue a página.

Confira: as pastas e os arquivos do app aparecem na lista, e ao lado de quase todos está a mensagem do seu commit, Cria o app Mural de recados. Só a pasta .devcontainer e o LICENSE continuam com Initial commit: eles vieram do modelo.

Travou?

Abra o problema que aconteceu com você:

O terminal diz rails: command not found

O codespace ainda está instalando o Rails. Espere o terminal parar de mostrar mensagens e tente de novo. Se o erro continuar, peça ajuda.

O aviso da porta 3000 não apareceu, ou você fechou sem querer

No painel de baixo, abra a aba Ports e procure a linha App (3000). As outras portas da lista são do próprio editor e podem ser ignoradas. Passe o mouse sobre o endereço da coluna Forwarded Address e clique no ícone de globo que aparece, para abrir o app no navegador.

A página mostra o erro "Blocked hosts"

O Rails bloqueou o endereço do codespace. Peça ajuda para alguém da mentoria ou veja a solução nas notas para a mentoria.

O codespace desligou ou você fechou a aba

1. Abra a página do seu repositório no GitHub e clique no botão verde Code.
2. Escolha a aba Codespaces.
3. Clique no seu codespace. O GitHub dá a ele um nome aleatório, como literate invention.

Quando ele abrir, ligue o servidor de novo com bin/rails server.

Também dá para encontrar todos os seus codespaces em github.com/codespaces. Clique no seu codespace, na lista de baixo:

Não clique em New codespace nem em Use this template: eles criam outro codespace, vazio, sem o seu app.

Fechou sem dar Sync das mudanças?

Calma: nada se perdeu. Os seus arquivos e o seu commit continuam guardados no codespace. Abra o codespace de novo (veja “O codespace desligou ou você fechou a aba”) e, no painel Source Control, clique em Sync Changes. Se você ainda não tinha feito o commit, faça os passos do commit antes.

Mentoria: veja as notas deste capítulo.

Terminou?

Siga para O que aconteceu? e entenda cada passo.