- 1. Preâmbulo
- 2. Resumo do projeto
- 3. Objetivos de aprendizagem
- 4. Considerações gerais
- 5. Recomendações
- 6. Escopo do projeto
- 7. Ambiente de trabalho e leitura complementar
- 8. Considerações técnicas
Trivia é um tipo de jogo, geralmente no âmbito de uma competição, no qual se coloca uma série de perguntas cujas respostas devem ser escolhidas entre diferentes opções pré-determinadas.
Atualmente, existem muitas possibilidades de participar de uma trivia online. Com uma busca rápida na internet, você poderá perceber que existem trivias sobre diversos temas (ciências, séries, televisão etc.).
O que devo fazer exatamente? Obviamente, você vai criar o aplicativo web de uma trivia. Não tenha medo, você vai aprender muito nesses dias.
O objetivo principal deste projeto é que você tenha uma primeira experiência no desenvolvimento de aplicativos Web que interajam com as usuárias através do navegador, utilizando HTML, CSS e JavaScript.
O tema é livre, decida rapidamente e depois pense em como deve ser a experiência para suas usuárias. Pense nas telas, no fluxo, nas mensagens, cores etc.
Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
-
Uso de HTML semântico
-
Uso de seletores de CSS
-
Uso de seletores de DOM
-
Gerenciamento de eventos de DOM
-
Manipulação dinâmica de DOM
-
Tipos de dados primitivos
-
Strings (cadenas de caracteres)
-
Variáveis (declaração, atribuição, escopo)
-
Uso de condicionais (if-else, switch, operador ternário)
-
Uso de funções (parâmetros, argumentos, valor de retorno)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
-
Desenhar a aplicação pensando e entendendo o usuário
-
Criar protótipos para obter feedback e iterar
- Concluir o projeto não é um requisito para ser admitida no bootcamp.
- Este projeto deve ser feito em dupla.
- Certifique-se de que ambas possam fazer e aprender tudo. Não se trata de "dividir" o trabalho para fazer "mais". O objetivo é aprender colaborativamente, e não "terminar e entregar".
- Queremos que você aprenda o que ainda não sabe. Seja transparente para que possamos entender seu processo de aprendizagem. Estamos interessados no processo e não apenas no resultado final.
Algo que sempre ajuda a "concretizar" o que você tem em mente é fazer um protótipo simples de todo o projeto no papel. Desenhar é um processo rápido que permite entender como, quando e onde as coisas acontecem; onde exatamente você deve dizer isso ou aquilo, o que acontece se a usuária fizer A ou B, onde ela deve clicar, quais informações exatamente você deseja mostrar a ela etc. Gaste um máximo de duas horas nisso antes de começar a programar.
Não gaste horas discutindo o tema da trivia ou fazendo logotipos com a sensação de que você está "avançando". É natural que você tenha o impulso de fazer isso - é o seu cérebro pedindo um pouco de satisfação imediata. Não se deixe enganar pela "ilusão" de avanço; seu objetivo é aprender. Enfrente o mais rápido possível o que você não sabe, pois essa é a única maneira de alcançá-lo.
Evite a tentação de copiar e colar código que "funciona" para concluir o projeto sem entender como ou por que funciona. Prefira sempre fazer pouco, mas que seja algo que você entende e pode explicar, ao invés de fazer muito que funciona pela metade e/ou que você não sabe bem como ou por que funciona.
Um "superpoder" que esperamos que você possa desenvolver durante o bootcamp é definir "microprojetos" que o levarão passo a passo, mas transversalmente, à solução do "grande projeto". Poderíamos dizer que é como começar montando um quebra-cabeça pelos cantos ou arestas sem necessariamente saber como eles vão se encaixar no final. Deixe-se levar e explore livremente. Você não precisa saber tudo antes de começar.
Posteriormente, daremos algumas sugestões como exemplo.
Sabemos que cada uma de vocês sabe um pouco mais ou menos sobre Desenvolvimento Web. Não esquecemos que cada uma tem experiências de vida e motivações diferentes, personalidades diferentes, aprende no seu ritmo etc. Fingir que tudo isso não existe e pedir a todas que aprendam e concluam de forma idêntica seria um absurdo. Propomos que você trabalhe em marcos ou etapas incrementais de acordo com suas possibilidades. Não esperamos que todas completem os 3 marcos.
Não trabalhe como se fosse uma fábrica fazendo toooooooooooooooooodo o HTML e CSS de todas as telas que você imaginou para depois começar com tooooooooooooooooooooodo o JavaScript e a funcionalidade. O risco de trabalhar assim é que você obtenha muitas partes sem nenhuma ou meia funcionalidade e aprenda pouco; não faça o inverso também - muitas funcionalidades no console, mas sem uma interface que possa ser usada por uma usuária não desenvolvedora.
A metáfora a seguir pode ajudá-la a entender melhor a ideia.
Essas etapas, do skate ao carro, são o que chamaremos de "marcos". Você é livre para seguir esta recomendação ou trabalhar como preferir. Pode ser útil se você está apenas começando a aprender Desenvolvimento Web - você decide.
Alerta de spoiler: vá praticando tomar suas próprias decisões de aprendizagem, pois assim serão os 6 meses de bootcamp.
A versão mais simples de uma trivia.
- 1 única tela ou visualização.
- 2 questões com pelo menos 3 alternativas de resposta cada.
- 1 botão para responder e ver qual é a alternativa correta.
Não informa se você estava correto ou não, apenas informa qual alternativa estava correta.
- Duas perguntas com as suas respectivas alternativas de respostas em forma de radio buttons (🔘)
- Um botão para “Responder e ver resultados”.
Como construir uma página básica HTML com elementos de formulário.
Quando a usuária der um click em algum dos radio button, mostre uma mensagem de alerta (alert) no navegador que contenha o valor (texto) do radio button clicado.
Dica: Para mostrar uma mensagem de alerta básica há uma função JavaScript chamada “alert”. Esta função pode “escutar” eventos do navegador como click e fazer algo quando isso acontecer, usando onclick ou addEventListener.
- Detectar eventos do navegador (os clicks da usuária) e fazer algo quando isso acontecer.
- Identificar os elementos HTML que estão no navegador e obter seus valores e/ou estados.
Ao invés de mostrar o valor de cada radio button quando se clica nele, a opção é apenas selecionada. O alert com os valores dos radio button selecionados é mostrado quando se tem o click no botão “Responder e ver resultados”.
- Detectar eventos no navegador (os clicks do usuário).
- Identificar os elementos HTML que existem no navegador e obter seus valores/estados.
Adicione uma tela de boas-vindas simples com os seguintes elementos e características:
- Uma caixa de texto (input text) na qual o jogador escreve seu nome.
- Um botão "jogar" ou "começar" para ir para as perguntas.
- Desta vez, deve haver pelo menos 3 perguntas com suas respectivas alternativas de resposta.
- Antes das perguntas deve-se dizer "Olá, [o nome que foi inserido na tela de boas-vindas]"
- O botão de resposta mostra a alternativa correta para cada pergunta e também mostra se cada uma das respostas estava correta ou incorreta.
- Um botão para jogar novamente que retorna à tela inicial onde o nome é solicitado.
Sugestão de microprojeto A
Avalie se as respostas selecionadas estão corretas ou incorretas. Para fazer isso,
escolha uma das alternativas da pergunta 1 como a resposta “correta”. Ao dar click
no botão “Responder e ver resultados” mostra um alert
que diga “Resposta correta” ou “Resposta incorreta” conforme apropriado.
Dicas: Leia sobre condicionais e controle de fluxo (IF, ELSE).
- Identificar os elementos HTML que estão no navegador e obter seus valores e/ou estados.
- Comparar os valores/estados dos elementos e fazer algo conforme o resultado obtido da comparação/avaliação.
- Permite à usuária escolher entre 2 tipos de perguntas depois de escrever seu nome e antes de responder. Por exemplo, umas sobre comida e outras sobre cervejas.
- Adiciona uma pontuação para respostas corretas e incorretas e exibe uma pontuação total no final.
Se você fez tudo acima e tem um pouco mais de tempo, decida o que mais gostaria de fazer para melhorar seu projeto. Você pode, por exemplo, adicionar uma contagem regressiva com um limite de tempo para responder às perguntas. Você pode enviar seu código para um repositório GitHub e publicar seu aplicativo Web no GitHub Pages e compartilhar a URL com quem você quiser.
Independentemente de quão longe você vá, certifique-se de documentar brevemente seu trabalho em um documento do Google ou no arquivo README.md do seu repositório (se você estiver trabalhando com um). Conte-nos um pouco sobre seu processo de design da experiência de uso e como você acha que ele resolve a necessidade (ou "problema") da sua usuária. Inclua algumas imagens de seus protótipos em papel para nos ajudar a entender o processo, não o resultado. Você mudou algumas coisas ao longo do caminho? Quais? Por quê?
Talvez você prefira trabalhar com uma ferramenta de edição de código on-line, como Codepen ou Replit.
- Antes de tudo, certifique-se de ter um 📝 bom editor de texto, algo como Atom ou VSCode.
- Para executar os comandos a seguir você precisará de uma 🐚 UNIX Shell,
que é um programa que interpreta linhas de comando (command-line interpreter)
assim como ter o git
instalado. Se você já utiliza um sistema operacional "UNIX-like", como
GNU/Linux ou MacOS já terá uma shell (terminal) instalada por padrão (e
provavelmente
gittambém). Se seu sistema é Windows você poderá usar Git bash, mas indicamos testar 🐧 GNU/Linux. - Faça seu próprio :forkand_knife: fork do repositório. Seus mentores vão compartilhar um _link para o repositório com acesso de leitura.
- :arrowdown: Clone seu_fork em seu computador (cópia local).
- Metodologias Ágeis
- Scrum em menos de 2 minutos
- Scrum em detalhes. Não esperamos que faça tudo isso neste projeto.
- Todo o seu projeto deve ser entregue em um link funcional. Pode ser o link do seu repositório github ou o link do seu projeto online Replit, Codepen ou CodeSandbox
A lógica do projeto deve ser totalmente implementada em JS, HTML e CSS. Neste projeto não é permitido usar bibliotecas ou frameworks, somente vanilla JavaScript (Javascript puro).
Este boilerplate (modelo de projeto no repositório GitHub) contém três arquivos. Você é livre para adicionar ou remover arquivos/pastas. Se você usar um editor de código on-line como Codepen ou Replit, ignore este ponto.
Aqui vai a página que será mostrada para o usuário. Também nos serve para indicar que script será usado e unir tudo que fizemos.
Você encontrará uma tag inicial, que se desejar, pode excluir e começar do zero:
<div id="root"></div>Este arquivo deve conter as regras de estilo. Queremos que escreva suas próprias regras, por isso pedimos que não use frameworks de CSS (Bootstrap, materialize, etc).
Aqui você escreverá todo o código que tenha a ver com a interação com o DOM (seleção, atualização e manipulação de elementos do DOM e eventos), entre outras funções que são necessárias para atualizar o resultado na tela (UI).
Pode começar a programar!