Desenvolvendo um Quiz (tema COVID-19) em Flutter com Google Sheets
Notas de aula do professor Kleber de Oliveira Andrade
Quiz (em inglês: quiz, plural quizzes) é o nome dado a um jogo ou desporto mental no qual os jogadores (individualmente ou em equipas) tentam responder corretamente a questões que lhes são colocadas. Em alguns contextos, a palavra também é utilizada como sinônimo de teste informal para a avaliação de aquisição de conhecimentos ou capacidades em ambientes de aprendizagem.
Criando e configurando o Google Sheets
O Google Sheets é um programa de planilha incluído como parte de um pacote de escritório de software gratuito baseado na Web oferecido pelo Google em seu serviço Google Drive.
- Entre com sua conta do Google.
- Vá para o Google Drive e crie um novo documento do ‘Planilhas Google’ onde deseja armazenar suas perguntas e respostas e abra-o.
- Configure as colunas do cabeçalho da planilha e você verá assim: (Perguntas sobre COVID-19; Resposta correta; Resposta errada).
Adicione perguntas e respostas na sua planilha de acordo com as colunas (se quiser, pode copiar a minha planilha clicando aqui)
Vamos abrir agora o Google Script (Ferramentas → Editor de script).
Abria a tela de script
Vamos escrever o seguinte script (substitua a function myFunction) pela nossa função doGet que vai acessar a tabela atual, e colocar cada linha de pergunta / resposta 1 / resposta 2 dentro dos arrays e depois converter em Json.
Salve o script (eu dei o nome de Quiz) e agora vamos publicar ele (Publicar → Implantar como aplicativo da web). Assim, este código vai ficar disponível na internet para que nossa aplicativo posso acessa-lo.
Você verá uma janela como essa. Apenas selecione “Execute the app” como “Me” e “Who has access to the app” como “Anyone, even anonymous”. Clique em Deploy.
É necessária autorização! Basta revisar as permissões. Em seguida, selecione sua Conta do Google.
Você verá assim: basta expandir o item ‘Avançado’ e clicar em ‘Acessar Quiz (não seguro)’.
Aceite essas permissões e pronto!
Por fim, você verá uma janela como esta com a URL do aplicativo Web. Guarde essa URL da Web para utilizar no nosso código. Usaremos esse URL para fazer solicitações HTTP GET do nosso aplicativo.
Criando o projeto
Abra o Visual Studio Code, e abra a paleta de comandos (Ctrl + Shift + P) e digite: Flutter: New Project
- Digite o nome do projeto Flutter (quiz_covid19);
- Selecione a pasta para criar o projeto Flutter;
Estrutura do projeto
O diagrama abaixo apresenta as comunicações do nosso aplicativo.
- QuizPage é classe que apresentar uma interface visual para o usuário interagir;
- QuizController é a classe que controla o fluxo quiz;
- Question descreve a estrutura de dados utilizada pelo quiz;
- QuizApi é uma classe que se conecta ao GoogleScript e converte a resposta no modelo entendível pelo aplicativo;
- Google Script é o serviço criado para pegar as informações da planilha, converter para um json e entregar a quem estiver fazendo a requisição http;
- Google Sheets é a planilha criada no Google Drive e que armazena as informações do quiz.
Por isso, dentro do projeto teremos um diretório chamado lib, e a arvore de arquivos deve ser como a apresentada abaixo:
Dependências
No arquivo pubspec.yaml adicione as seguintes dependências para este projeto
Programa Principal
Vamos atualizar o arquivo main.dart
Vale ressaltar que a classe QuizPage ainda não existe, então é normal ter um erro apontando para a linha 15.
Classe Question
Crie a classe Question (lib → models → question.dart), que utilizaremos para desenhar representar cada pergunta/resposta (linha da tabela).
Classe QuizApi (Service)
Crie a classe QuizApi (lib → services → quiz_api.dart), que utilizaremos para acessar a API do Google Sheets e chegar no script que criamos, assim, teremos acesso a todas as informações da tabela.
Para entender melhor o que fizemos, você precisa estudar a classe http (acesse aqui). Também assista este vídeo antes de programar, caso não saiba o que é uma API.
Você deve trocar a minha url pela url do seu google script (aquela que você guardou quando aceitou as permissões do google no script da planilha)
Classe QuizController (Controller)
Crie a classe QuizController (lib → controllers→ quiz_controller.dart), que utilizaremos para manter uma lista das perguntas, passar para próxima pergunta e embaralhar as respostas.
Criando Componentes
Sempre que possível, iremos criar alguns componentes para facilitar o desenho das telas e também para reutilizar componentes em outros projetos.
Classe CenteredCircularProgress
Crie a classe CenteredCircularProgress (lib → components → centered_circular_progress.dart), que apresentará um Container para exibir um circulo animado que indica o progresso do carregamento. Para isso será utilizado o widget CircularProgress.
Classe CenteredMessage
Crie a classe CenteredMessage (lib → components → centered_message.dart), que apresentará um Container para exibir uma mensagem e ícone no centro.
Classe ResultDialog
Crie a classe ResultDialog (lib → components → result_dialog.dart), que apresentará um AlertDialog com o resultado da resposta do jogador ao clicar no botão de resposta.
Classe FinishDialog
Crie a classe FinishDialog (lib → components → finish_dialog.dart), que apresentará um AlertDialog com o placar final e uma mensagem para o jogor. Além disso, iremos colocar três botões: compartilhar (usando o plugin Share); botão jogar novamente; botão sair.
Classe QuizPage (View)
Crie a classe QuizPage (lib → pages → quiz_page.dart), que utilizaremos para desenhar o quiz, que será composto por: uma área de pergunta, dois botões e uma barra de pontuação.
Resultados
Agora, aperte F5 para iniciar a depuração do projeto
Selecione um emulador existente ou crie um novo se for necessário. Se seu celular estiver plugado no computador e com o modo desenvolver ativado, você poderá rodar o aplicativo direto no celular.
Conseguiu chegar até aqui? Parabéns, você acaba de criar um quiz para aprender mais sobre o COVID-19.
Lembre-se fique em casa para ajudar no combate ao vírus.
O código completo pode ser baixado aqui.
Espero que tenham gostado, deixem seus comentários a baixo e um forte abraço!
Desafio
- Defina um tema para o seu Quiz e monte um Google Sheets para ele com pelo menos 20 questões.
- Trocar os ícones tradicionais pelos ícones da biblioteca FontAwesom (plugin font_awesome_flutter);
- Crie um Widget na pasta components referente a área da Pergunta (QuestionContainer); Trocar o método _buildQuestion pelo Widget que você criou. Dicar, utilize CTRL + . para refatorar o método e criar um Widget.
- Crie um Widget na pasta components referente ao botão de resposta (AnswerButton). Trocar o método _buildAnswerButton pelo Widget que você criou. Dicar, utilize CTRL + . para refatorar o método e criar um Widget.
- Adicionar animações no AlertDialog de resultado (ResultDialog) e no AlertDialog final (FinishDialog)para deixar o Quiz mais dinâmico (tutorial);
