Slug: aula04-quiz-api

Hora de finalizar a página de quiz, com todos os passos necessários para jogar: selecionar a alternativa, receber feedback na tela em caso de erro ou acerto, contagem de pontos e exibição da tela de resultados.

Durante o desenvolvimento, vamos ver mais sobre o funcionamento das props, como trabalhar com mais de uma instância do mesmo componente na tela, pensar na lógica para capturar cliques, tratar os resultados e engatilhar mudanças de estado a cada ação do usuário.

Para que você possa publicar seu quiz e divulgar outros quizzes na tela, vamos começar com as ferramentas do Next.js para criação de endpoints e manejo de requisições e respostas.

Conteúdo detalhado dessa aula

• Criar o componente <Input>
• Desenvolver o algoritmo de seleção de alternativa para cada pergunta
• Statements x expressões no React
• Ver mais sobre props do React e a prop key
• Manejo de estados com a renderização de várias instâncias de um mesmo componente
• Lógica da seleção de alternativas, habilitação do botão e troca de pergunta (utilizando estados, atributos do HTML e índices da array)
• Lógica da contagem de pontos com alteração de estado
• Atualização dos pontos com o ciclo de atualização do React
• Exibir a tela de resultados com a soma dos pontos e as alternativas escolhidas ao final das perguntas
• Usar atributo data-[] para passar informações de estilo para o componente das alternativas
• Criar lambda servers com Next.js para retornar endpoints
• Passar configurações de CORS para poder acessar quizes externos

Se você ainda não fez o deploy do seu projeto na Vercel, agora é a hora! Compartilhe no Discord e também nas redes sociais. Não esquece de marcar a gente!

Desafios dessa aula!

• Desafio do Paulo: Resolver a contagem de pontos utilizando um bitset (ou bitmap)!
• Mais um desafio do Paulo: Publique seu quiz na Vercel e faça barulho nas redes, tageando o @rauchg!
• Desafio da Ju: Pegue o query param name e exiba o nome da pessoa que está jogando na tela de resultados. Dica: o Next.js tem uma lib pra te ajudar nisso!

Dica para resolver o desafio dos quizes da galera

Vamos deixar aqui um trecho de código para te ajudar a resolver este desafio:

<ExternalQuizList hasName={hasName}>
	{db.external.map((url) => {
		const prepareUrl = url
			.replace(/\//g, '')
			.replace('https:', '')
			.replace('.vercel.app', '');

		const [repoName, user] = prepareUrl.split('.');
		return (
			<li key={url}>
				<Widget.Topic href={`/quiz/${user}__${repoName}?name=${name}`}>
					{`${user}/${repoName}`}
				</Widget.Topic>
			</li>
		);
	})}
</ExternalQuizList>

A implementação por enquanto fica com você! A resposta deste desafio vem com a próxima (e última) aula!

Links importantes para você acompanhar a aula

• Gist com o CSS dos componentes usados na aula
• Repositório do código final da aula 4
• Código que usamos para criar o endpoint api/db

Links citados nessa aula

• Post do Soutinho sobre Fetch API
• Vídeo do Soutinho sobre array.reduce()

Como compartilhar seu quiz:

Você pode, depois do deploy, simplesmente marcar a gente e também usar as hashtags #ImersaoReact e #alura. Mas quer fazer melhor? Você pode usar esse plugin do Chrome para gravar o seu site em ação, scrollar e mostrar efeitos especiais e ainda passear pelo seu código quando ele estiver interessante.

Poste no seu Instagram, Linkedin, Twitter ou Facebook e não esqueça de marcar #ImersaoReact, @aluraonline e nosso time para que a gente deixe um comentário e, quem sabe, você apareça nos extras das aulas!