Rullst AcademyRullst Academy/Lição
JavaScript e interação · Lição 13 / 14

Interfaces que explicam a espera

Uma tela vazia pode significar espera, ausência de resultados ou falha. A pessoa precisa saber qual.

Trilhas de aprendizado16 min

Vamos descobrir juntos

  1. 1

    Defina estados como idle, loading, ready, empty e error. Uma lista vazia recebida com sucesso não é um erro. Escreva uma mensagem e uma ação coerente para cada estado.

  2. 2

    A oficina usa uma região de status e aria-busy na área de sugestões. As missões digitadas ficam separadas das sugestões: uma falha ao carregar não deve apagar o plano da pessoa. A ação de tentar de novo continua disponível.

  3. 3

    Ao iniciar uma nova solicitação, incremente uma versão e cancele a anterior. Antes de aplicar qualquer resultado, confira se a versão continua atual. Essa guarda protege também quando o cancelamento chega tarde.

  4. 4

    O projeto encerra uma espera longa com uma mensagem e permite tentar de novo. Tempo limite é uma escolha da aplicação, não uma medida confiável da qualidade da internet. Registre cenários, sequência e resultado esperado no REVIEW.md.

Do exemplo à sua própria interação

Baixe o kit desta atividade, extraia e abra index.html no navegador. Edite lesson.js, salve e recarregue. Você não precisa instalar Node ou pacotes. O README explica HTTP local quando necessário.

A demonstração usa JavaScript preparado. Ela não executa seu código do editor. Baixe sua edição separadamente para testar no kit local.

Meus arquivos e GitHub
Experimentar o projeto que vamos construir

Planejador de pequenas missões

Crie, conclua e revise um plano de estudo com dados fictícios. As missões ficam apenas na memória desta página; ao recarregar, elas somem.

Use um título curto sem dados pessoais e minutos inteiros de 1 a 120. Até 20 missões.

Missões no plano
0
Minutos de todas as missões
0
Missões concluídas
0

Nenhuma missão neste filtro. Adicione uma ou escolha outro filtro.

    Laboratório de sugestões

    Por padrão, os cenários são simulados neste navegador. Nenhuma requisição de sugestões é enviada e seu plano não é substituído.

    Disponível no kit aberto por http://127.0.0.1:8768. Consulte o README; não precisa de uma conta externa.

      Esse JSON contém apenas as missões, não seu código. A demonstração não importa arquivos nem sincroniza aparelhos. O download do JavaScript editado fica no espaço de arquivos da lição.

      Links oficiais e próximo passo

      ✦
      SUA MISSÃO

      Representar estados explícitos e impedir que uma resposta antiga substitua a atual.

      Agora é a sua vez

      Oficina de descobertas

      Pensar antes de executar

      A solicitação A é lenta. B começa depois e retorna uma lista vazia primeiro.
      Monte suas respostas e confira quando estiver pronto.
      Uma pausa para entender

      Uma falha nas sugestões deve apagar as missões digitadas?

      Preciso de uma pista

      Preveja o resultado, execute no seu arquivo e explique a diferença.

      Carregando sua jornada…

      Leve com você

      Monte uma tabela com estado, mensagem e próxima ação. Teste lista vazia, erro e resposta antiga; registre que o plano digitado permaneceu intacto.

      No seu ritmo

      Meus arquivos e GitHub

      Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

      Manual do aluno

      O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

      Conferindo seu acesso à lição…

      Rullstpetbot

      A IA pode errar. Confira no material da lição.