Publicar na Internet e pôr no CV

Hoje o teu Mini-CRM sai do teu computador: vais publicá-lo gratuitamente no GitHub Pages, com um endereço que abre em qualquer telemóvel — e que podes pôr no CV.

🎯 No fim desta aula vais conseguir

🧰 Antes de começar

  1. Abre a pasta meu-crm no VS Code. Confirma que tens o README.md e o TESTES.md da aula 18 e que a função limpar() está aplicada — não publiques um CRM vulnerável.
  2. Faz uma cópia de segurança: meu-crm-antes-aula19.zip.
  3. Vais precisar de entrar no teu email pessoal para confirmar a conta do GitHub. Tens de saber a palavra-passe do teu email. Só tu a sabes: o professor nunca te vai pedir palavras-passe.
  4. Se puderes, tem o telemóvel à mão para testar o site no fim.

😕 Perdeste o teu projeto? Fala já com o professor. Em último caso, publica o ponto de controlo da aula 16 com o teu nome e as tuas cores e vai acrescentando as personalizações.

Parte A — Antes de publicar (≈ 10 min)

1 O que vai ficar público (RGPD)

Tudo o que envias para um repositório público do GitHub pode ser visto e copiado por qualquer pessoa do mundo — e, mesmo que apagues mais tarde, podem ter ficado cópias. Por isso, antes de publicar, verifica com atenção o que está na pasta.

Boa notícia: os clientes que criaste no CRM não vão para a Internet. Eles estão no localStorage do teu browser, não nos ficheiros. Só vão os ficheiros da pasta.

⚠️ Verifica antes de enviar:

  • Nos ficheiros não há nomes, emails, telefones ou NIF de pessoas reais (vê os clientes de exemplo, se tens a função criarExemplos da aula 8, e o README.md).
  • Na pasta meu-crm não há cópias de segurança (copia-crm.json) nem exportações (clientes.csv): esses ficheiros têm os dados do teu CRM. Se os guardaste lá, move-os para outra pasta.
  • No README, como autor, põe só o teu nome e a turma (nada de telefone, morada ou email).
  • Nunca escrevas palavras-passe em nenhum ficheiro de código.

🤔 Prevê: quando o site estiver publicado e um colega o abrir no telemóvel dele, que clientes é que ele vai ver? (Vais confirmar no passo 7.)

Parte B — Publicar no GitHub Pages (≈ 50 min)

2 O que é o GitHub

O GitHub é o site onde milhões de programadores e empresas guardam os seus projetos. Cada projeto fica num repositório (uma pasta online com o histórico de todas as alterações). Quem procura programadores costuma pedir o link do GitHub — é o teu portefólio.

O GitHub Pages é um serviço gratuito do GitHub que transforma um repositório num site. Serve para sites feitos só com HTML, CSS e JavaScript — exatamente como o teu CRM, que não precisa de servidor porque guarda os dados no browser.

💡 O GitHub está em inglês. Nesta página, os nomes dos botões aparecem a negrito, tal e qual como no ecrã. O aspeto do site muda de vez em quando: se um botão estiver noutro sítio, procura o mesmo nome.

3 Criar a tua conta

A conta é tua: és tu que a crias, com o teu email, e só tu sabes a palavra-passe.

  1. Vai a github.com e carrega em Sign up (canto superior direito).
  2. Em Email, escreve o teu email pessoal (ou o da escola, se o professor o indicar).
  3. Em Password, cria uma palavra-passe nova (diferente da do email): pelo menos 15 caracteres, ou pelo menos 8 com letras minúsculas e números. Escreve-a num sítio seguro. Não a digas a ninguém — nem ao professor.
  4. Em Username, escolhe o teu nome de utilizador. Vai aparecer no endereço do teu site e no teu CV, por isso escolhe algo profissional, como o nome e o apelido (ex.: ana-ferreira-dev). Nada de alcunhas!
  5. Em Your Country/Region, escolhe Portugal e carrega em Continue (ou Create account).
  6. Aparece uma verificação (Verify your account) — um pequeno quebra-cabeças para provar que és uma pessoa. Resolve-o tu.
  7. Vai ao teu email: o GitHub enviou-te um código. Escreve-o na página para confirmar a conta.
  8. Entra com Sign in (email ou username + palavra-passe). Se aparecerem perguntas sobre ti, podes responder ou saltar (Skip personalization).

✅ Deves ver: a página inicial do GitHub (o Dashboard), com a tua imagem de perfil no canto superior direito.

😕 Problemas a criar a conta
  • O código não chega ao email → espera 2 minutos e vê a pasta Spam/Lixo. Alguns emails da escola bloqueiam mensagens externas: usa o email pessoal.
  • «Username … is not available» → esse nome já existe. Junta outra palavra ou um número (ex.: ana-ferreira-tig).
  • A palavra-passe não é aceite → é curta ou fraca, ou aparece em listas de palavras-passe roubadas. Escolhe outra mais comprida.
  • Mais tarde, o GitHub pode pedir-te para ativares a verificação em dois passos (2FA) com uma aplicação no telemóvel. Faz isso em casa, com calma, e guarda os códigos de recuperação (recovery codes) num sítio seguro.

4 Criar o repositório

  1. No canto superior direito, carrega no + e depois em New repository.
  2. Em Repository name, escreve mini-crm (minúsculas, com hífen).
  3. Em Description, escreve: Mini-CRM — aplicação web de gestão de clientes (HTML, CSS, JavaScript).
  4. Escolhe Public. (O GitHub Pages gratuito só funciona com repositórios públicos.)
  5. Deixa desligada a opção Add README (nalgumas versões aparece como Add a README file) — tu já tens o teu README.md.
  6. Carrega no botão verde Create repository.

✅ Deves ver: a página do repositório vazio, com o título o-teu-username / mini-crm e um quadro Quick setup com uma frase que acaba em uploading an existing file.

5 Enviar os ficheiros

  1. No quadro Quick setup, clica no link uploading an existing file. (Se o repositório já tiver ficheiros, o caminho é Add file → Upload files.)
  2. No Explorador de Ficheiros do Windows, entra dentro da pasta meu-crm, seleciona todos os ficheiros com Ctrl+A e arrasta-os para a zona Drag files here to add them to your repository.
  3. Espera até todos os ficheiros aparecerem na lista por baixo da zona cinzenta.
  4. Mais abaixo, em Commit changes, escreve na primeira caixa: Primeira versão do Mini-CRM.
  5. Carrega no botão verde Commit changes.

⚠️ Arrasta os FICHEIROS, não a pasta. O index.html tem de ficar logo na «entrada» do repositório (na raiz), e não dentro de uma pasta meu-crm.

Um commit é uma «fotografia» do projeto guardada no histórico, com uma mensagem a dizer o que mudou. Numa equipa, é assim que todos sabem quem mudou o quê e quando.

✅ Deves ver: a lista dos teus ficheiros (app.js, dados.js, index.html, README.md…) e, por baixo, o teu README já formatado, com títulos e listas.

😕 Não correu bem?
  • Aparece uma pasta meu-crm em vez dos ficheiros → arrastaste a pasta. Não faz mal: no passo 6, o endereço do teu site vai acabar em /mini-crm/meu-crm/ em vez de /mini-crm/. Se preferires o endereço curto, pede ajuda ao professor.
  • O arrastar não funciona → clica em choose your files, entra na pasta meu-crm, seleciona tudo com Ctrl+A e carrega em Abrir.
  • Os ficheiros não aparecem no repositório → esqueceste-te de carregar em Commit changes. Repete o envio.

6 Ligar o GitHub Pages

  1. No topo do repositório, carrega no separador Settings (tem uma roda dentada ⚙️).
  2. No menu da esquerda, na zona Code and automation, carrega em Pages.
  3. Em Build and deployment, na caixa Source, escolhe Deploy from a branch.
  4. Em Branch, troca None por main; na caixa ao lado deixa / (root). Carrega em Save.
  5. Espera 1 a 2 minutos e recarrega a página (F5). No topo vai aparecer Your site is live at https://o-teu-username.github.io/mini-crm/ e o botão Visit site.

💡 Enquanto esperas, abre o separador Actions do repositório: vês o trabalho pages build and deployment com uma bolinha amarela (a preparar) que passa a um visto verde (pronto).

✅ Deves ver: ao carregar em Visit site, o teu CRM, com as tuas cores, num endereço que começa por https:// e acaba em .github.io/mini-crm/. Copia este endereço: é o link do teu projeto!

😕 O site não aparece ou aparece estranho
  • «404 — There isn't a GitHub Pages site here» → espera mais um pouco (às vezes até 10 minutos) e recarrega com Ctrl+F5. Confirma que o index.html está na raiz do repositório e se chama exatamente assim, em minúsculas.
  • O site aparece sem cores → no servidor do GitHub, maiúsculas contam: Style.css não é o mesmo que style.css. O nome do ficheiro tem de ser igual ao que está no <link href="style.css"> do index.html. (No Windows funcionava porque o Windows não distingue.)
  • Os botões não fazem nada → abre a Consola (F12) no site publicado. Se aparecer 404 num ficheiro .js, o nome do ficheiro não coincide com o do <script src="…">.
  • Não aparece a opção de escolher a branch ou pede um upgrade → o repositório está privado. Em Settings → General, lá em baixo em Danger Zone, carrega em Change visibility e escolhe Public.

7 Testar no computador e no telemóvel

  1. No computador, abre o teu link e cria um cliente (inventado!).
  2. No telemóvel, abre o mesmo link: escreve-o no browser ou, no Chrome do computador, clica com o botão direito na página → Criar código QR para esta página e lê o código com a câmara do telemóvel.
  3. Usa o CRM no telemóvel: cria um cliente, uma interação e uma oportunidade.
  4. Volta ao computador e recarrega a página.

✅ Deves ver: o CRM funciona no telemóvel, mas o cliente que criaste no telemóvel não aparece no computador (e vice-versa).

Porquê? Os dados ficam no localStorage de cada browser, em cada aparelho. O site é igual para todos, mas cada visitante tem a sua própria «gaveta» de dados — e a de quem visita pela primeira vez está vazia. Numa empresa a sério, os dados ficariam numa base de dados num servidor, partilhada por todos (e só teríamos de mudar o dados.js!).

💡 Recomendação: quem abrir o teu link vai ver um CRM vazio e pode não perceber o que faz. A solução é o CRM criar clientes de exemplo (inventados) quando está vazio — foi o desafio da aula 8 e é o desafio ⭐ de hoje.

8 Atualizar o site e completar o README

Sempre que mudares algum ficheiro no VS Code, tens de o enviar outra vez: no repositório, Add file → Upload files → arrasta os ficheiros alterados → escreve uma mensagem (ex.: Acrescenta o link ao README) → Commit changes. Os ficheiros com o mesmo nome são substituídos. Passados 1–2 minutos, o site atualiza-se (usa Ctrl+F5 para veres a versão nova).

Vamos acrescentar ao README o link e uma captura de ecrã:

  1. Abre o teu CRM com alguns clientes de exemplo. Carrega em Windows+Shift+S, seleciona a zona do ecrã com o CRM, clica na notificação que aparece no canto e guarda a imagem (ícone da disquete) como captura.png, dentro da pasta meu-crm.
  2. No README.md, troca a secção «Experimentar» por esta (com o teu endereço):
  1. Envia o README.md e a captura.png para o repositório (Add file → Upload files → Commit changes).
  2. Bónus: na página do repositório, à direita, ao lado de About, carrega na roda dentada ⚙️. Marca Use your GitHub Pages website e carrega em Save changes. O link do site fica visível no topo do repositório.

✅ Deves ver: na página do repositório, o README com o link (que se pode clicar) e a imagem do teu CRM.

😕 A imagem não aparece
  • O nome tem de ser exatamente igual nos dois sítios: captura.png no README e no ficheiro enviado (maiúsculas contam; Captura.PNG não serve).
  • Confirma que enviaste também o ficheiro da imagem, e não só o README.

Parte C — O projeto no teu CV (≈ 25 min)

9 O projeto no CV (Europass)

Qualquer pessoa escreve «sei programar» no CV. Um link para uma aplicação a funcionar prova-o. Este projeto vai ser útil quando procurares lugar para a Formação em Contexto de Trabalho (estágio) ou o primeiro emprego.

O CV Europass é o modelo europeu de CV. Cria-o (ou atualiza-o) em europass.europa.eu e acrescenta a secção Projetos. Adapta este modelo — troca tudo o que está entre [ ]:

💡 Usa verbos de ação (desenvolvi, testei, publiquei), sê concreto e não exageres: na entrevista podem pedir-te para explicares o que fizeste. Na secção Competências digitais do Europass podes acrescentar HTML, CSS, JavaScript, SQL e GitHub.

10 O projeto no LinkedIn (opcional)

O LinkedIn é a rede social profissional: as empresas usam-na para encontrar candidatos. Não é obrigatório teres conta (só a partir dos 16 anos). Se tiveres, acrescenta o projeto na secção Projetos do perfil e, se quiseres, faz uma publicação. Modelo para adaptar:

11 E se não puderes usar o GitHub?

🔎 Investiga

  1. No teu site publicado, carrega em Ctrl+U. O que vês? Qualquer visitante consegue ver o teu código? Que cuidados é que isso exige?
  2. Abre o teu site numa janela anónima (Ctrl+Shift+N). Os clientes que criaste estão lá? Porquê?
  3. No repositório, clica em Commits (por cima da lista de ficheiros, com o ícone de um relógio). O que vês? Para que serve este histórico numa equipa de programadores?
  4. Abre o sql-lab.html no site publicado (acrescenta sql-lab.html ao fim do teu endereço) e carrega em «Usar os meus dados do CRM». Que dados aparecem: os do teu computador ou os do site? Porquê?

✍️ Tarefas do projeto (contam para a avaliação)

T1 · Site publicado e link entregue

O teu CRM está publicado (GitHub Pages ou, em alternativa, Netlify) e funciona: abre com as tuas cores, deixa criar clientes, interações e oportunidades. Envia o link ao professor pela plataforma que ele indicar.

💡 Antes de enviares, abre o link numa janela anónima e no telemóvel. Se funciona lá, funciona para o professor.

T2 · README com link e captura de ecrã

Na página do repositório, o README mostra o link do site (clicável) e uma captura de ecrã do teu CRM.

💡 A captura fica mais bonita com 3 ou 4 clientes de exemplo inventados e algumas oportunidades no quadro.

T3 · O projeto no CV

O teu CV (Europass ou outro) tem a secção Projetos com o Mini-CRM, adaptado ao teu projeto e com o link. Guarda-o em PDF e mostra-o ao professor.

💡 Relê o texto: está escrito em português correto? Diz o que tu fizeste (as tuas personalizações)?

⭐ Desafio · Clientes de exemplo para quem visita

Quando o CRM abre vazio (primeira visita), cria automaticamente 3 clientes de exemplo, inventados e adaptados ao teu setor (com os teus estados e os teus campos novos). Publica a versão nova.

💡 Lembra-te do desafio da aula 8: uma função que faz push de 3 objetos para a lista clientes e depois chama guardar('clientes', clientes). No arranque (fim do app.js), antes de atualizarEcra();, chama-a só se clientes.length === 0. Para testar, abre o site numa janela anónima.

📦 O que mostrar ao professor

⏱️ Se sobrar tempo

🤖 Pedir ajuda à IA (opcional)

A IA pode ajudar-te a melhorar a redação do CV — mas o conteúdo tem de ser verdadeiro e teu. Não lhe dês dados pessoais (morada, telefone, NIF). Copia o pedido e cola o teu texto no fim:

📖 Palavras novas

GitHub
Site onde se guardam e partilham projetos de programação.
Repositório
A «pasta online» de um projeto, com todos os ficheiros e o histórico das alterações.
Commit
Uma «fotografia» do projeto guardada no histórico, com uma mensagem a dizer o que mudou.
GitHub Pages
Serviço gratuito do GitHub que publica um repositório como site.
Alojamento (hosting)
Serviço que guarda um site num servidor ligado à Internet, para qualquer pessoa o abrir.
Raiz (root)
A «entrada» do repositório ou do site: a pasta principal, onde tem de estar o index.html.
Público / privado
Um repositório público pode ser visto por qualquer pessoa; um privado, só por quem tiver autorização.
Portefólio
Conjunto de trabalhos que mostram o que sabes fazer.
Europass
Modelo europeu de CV, que se cria gratuitamente em europass.europa.eu.
Cache
Cópia que o browser guarda dos sites para os abrir mais depressa. Ctrl+F5 obriga a ir buscar a versão nova.