Aplicações com Rullst I · Lição 10 / 14

Conectar sem perder o contexto

A rede pode falhar antes ou depois de uma gravação.

Vamos descobrir juntos

1
web/app.js usa fetch para listar, criar e concluir. response.ok cobre status 200–299; fetch normalmente resolve a Promise mesmo para 422 ou 503. Uma resposta de erro precisa ser verificada, não confundida com sucesso por ter chegado.
2
O formulário mantém o título quando não confirma a criação. Depois de uma resposta 201, pode limpá-lo: a criação foi confirmada, mesmo que a atualização posterior da lista falhe. Um indicador busy bloqueia duplo clique local; ele não impede duplicação por outro cliente ou por repetir a chamada depois.
3
Se a conexão cair, talvez o servidor já tenha gravado e a resposta tenha se perdido. Por isso a mensagem orienta atualizar a lista antes de repetir POST. Não há retry automático para criação. Confira esse caso com uma falha controlada no laboratório, sem interferir em outros serviços.
4
Os títulos são inseridos com textContent, não innerHTML. Escreva <em>Orbit</em>: ele deve aparecer literalmente, sem virar marcação. Segurança depende do contexto; textContent é adequado para texto de um nó, não uma regra universal para URLs, CSS ou qualquer destino.

Sua bancada de aplicações

O kit inclui o aplicativo completo para investigar e modificar. O trecho abaixo explica esta etapa; o editor contém o arquivo indicado. A Rullst Academy não compila nem executa esse servidor no navegador.

Arquivo para estudar e modificar

web/app.js

const response = await fetch("/api/missions");
if (!response.ok) throw Error("Request failed");
const items = await response.json();
text.textContent = item.title;

Extraia o kit numa pasta nova e abra o terminal junto a Cargo.toml. Use Rust 1.96+; o primeiro build pode baixar dependências e demorar. Depois abra http://127.0.0.1:3010. Pare com Ctrl+C e execute novamente após editar.

cargo test --locked
cargo run --locked

Meus arquivos e GitHub

Baixe seu rascunho e substitua o arquivo indicado na sua cópia extraída. O editor guarda um arquivo neste navegador; a conta guarda avaliações e XP. O ZIP não contém suas alterações. GitHub envia só o arquivo confirmado; para o aplicativo completo use Git manual, sem bancos, backups ou segredos.

Links oficiais e próximo passo

✦

SUA MISSÃO

Tratar resposta HTTP e falha de rede preservando a compreensão do usuário.

Agora é a sua vez

Oficina de descobertas

Decida antes de executar

Tratar resposta HTTP e falha de rede preservando a compreensão do usuário.

01Uma resposta 503 tem response.ok verdadeiro?02Após um POST sem resposta confirmada, qual passo reduz duplicações?

Monte suas respostas e confira quando estiver pronto.

Uma pausa para entender

Como mostrar um título que contém <em> sem interpretá-lo como HTML?

Executar o título como JavaScriptAtribuir ao textContent de um elementoConcatenar em innerHTML

Preciso de uma pista

O título é dado textual. Escolher a API de saída adequada evita transformá-lo em marcação executável.

Carregando sua jornada…

Leve com você

Pare apenas seu servidor e tente enviar uma tarefa fictícia. Confira a mensagem e a preservação do formulário. Reinicie, atualize a lista e explique por que uma falha de rede não basta para afirmar que nada foi gravado.

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…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

'use strict';
const messages = {
  language:['Idioma','Language','Idioma'], lab:['Projeto local de aprendizagem','Local learning project','Proyecto local de aprendizaje'],
  title:['Quadro de missões','Mission board','Tablero de misiones'],
  boundary:['Use tarefas fictícias. Este aplicativo local não tem contas nem permissões e não está pronto para hospedagem pública.','Use fictional tasks. This local app has no accounts or permissions and is not ready for public hosting.','Usa tareas ficticias. Esta aplicación local no tiene cuentas ni permisos y no está lista para publicación pública.'],
  new:['Uma nova missão','A new mission','Una nueva misión'],task:['Título da missão','Mission title','Título de la misión'],
  help:['Use 1–80 pontos de código Unicode após retirar espaços nas pontas. O servidor também confere essa regra.','Use 1–80 Unicode code points after trimming spaces. The server checks the rule too.','Usa 1–80 puntos de código Unicode tras quitar espacios en los extremos. El servidor también verifica la regla.'],
  priority:['Prioridade','Priority','Prioridad'], low:['1 · Baixa','1 · Low','1 · Baja'], medium:['2 · Média','2 · Medium','2 · Media'], high:['3 · Alta','3 · High','3 · Alta'],
  add:['Salvar missão','Save mission','Guardar misión'], missions:['Missões salvas','Saved missions','Misiones guardadas'], refresh:['Atualizar','Refresh','Actualizar'],
  order:['Até 100 missões, por prioridade decrescente e depois id crescente. Títulos podem repetir; ids são estáveis.','Up to 100 missions, highest priority first, then oldest id. Titles can repeat; ids are stable.','Hasta 100 misiones, por prioridad descendente e id ascendente. Los títulos pueden repetirse; los ids son estables.'],
  loading:['Consultando o servidor…','Checking the server…','Consultando al servidor…'], empty:['Ainda não há missões.','No missions yet.','Aún no hay misiones.'],
  loaded:['Lista atualizada.','List refreshed.','Lista actualizada.'], saved:['Missão salva.','Mission saved.','Misión guardada.'], updated:['Conclusão atualizada.','Completion updated.','Finalización actualizada.'],
  saved_refresh_failed:['Missão salva, mas não foi possível atualizar a lista. Use Atualizar; não reenvie a mesma missão.','Mission saved, but the list could not refresh. Use Refresh; do not submit the same mission again.','Misión guardada, pero no se pudo actualizar la lista. Usa Actualizar; no envíes otra vez la misma misión.'],
  invalid_title:['Confira o título: 1–80 pontos de código, sem caracteres de controle.','Check the title: 1–80 code points, no control characters.','Revisa el título: 1–80 puntos de código, sin caracteres de control.'],
  invalid_priority:['Escolha prioridade 1, 2 ou 3.','Choose priority 1, 2 or 3.','Elige prioridad 1, 2 o 3.'],
  invalid_json:['Formato de entrada inválido. Confira os campos e tente novamente.','Invalid input format. Check the fields and try again.','Formato de entrada no válido. Revisa los campos e inténtalo de nuevo.'],
  not_found:['Missão não encontrada. Atualize a lista.','Mission not found. Refresh the list.','Misión no encontrada. Actualiza la lista.'],
  invalid_origin:['Abra este aplicativo em http://127.0.0.1:3010.','Open this app at http://127.0.0.1:3010.','Abre esta aplicación en http://127.0.0.1:3010.'],
  storage_unavailable:['Não foi possível acessar o banco. Preserve o formulário e verifique o servidor.','The database is unavailable. Keep the form and check the server.','No se puede acceder a la base. Conserva el formulario y revisa el servidor.'],
  network:['Não foi possível confirmar a resposta. Seu formulário continua aqui; atualize a lista antes de repetir um envio.','The response could not be confirmed. Your form stays here; refresh the list before repeating a submission.','No se pudo confirmar la respuesta. Tu formulario sigue aquí; actualiza la lista antes de repetir un envío.'],
  failed:['Resposta inesperada; consulte o servidor.','Unexpected response; check the server.','Respuesta inesperada; revisa el servidor.'],
  done:['Concluída','Completed','Completada'], pending:['Pendente','Pending','Pendiente']
};
const locales=['pt-BR','en','es'];
const language=document.querySelector('#language');
language.value=navigator.language.startsWith('pt')?'pt-BR':navigator.language.startsWith('es')?'es':'en';
let items=[], busy=false;
const t=key=>(messages[key]||messages.failed)[locales.indexOf(language.value)];
const status=document.querySelector('#status');
function announce(key){status.textContent=t(key);}
function render(){
  const list=document.querySelector('#missions');list.replaceChildren();
  for(const item of items){
    const row=document.createElement('li'),label=document.createElement('label'),box=document.createElement('input'),text=document.createElement('span');
    box.type='checkbox';box.id='mission-'+item.id;box.checked=item.done;box.disabled=busy;
    text.textContent=`#${item.id} · ${item.title} · ${t('priority')}: ${item.priority} · ${t(item.done?'done':'pending')}`;
    box.addEventListener('change',()=>change(item.id,box.checked));label.append(box,text);row.append(label);list.append(row);
  }
}
function setBusy(value){busy=value;document.querySelectorAll('button,#missions input,#mission-form input,#mission-form select').forEach(el=>{el.disabled=value;});}
async function api(url,options={}){
  let response;
  try{response=await fetch(url,options);}catch{throw Error('network');}
  if(!response.ok){const data=await response.json().catch(()=>({}));throw Error(data.error||'failed');}
  return response.status===204?null:response.json();
}
async function refresh(){
  if(busy)return;setBusy(true);announce('loading');
  try{items=await api('/api/missions');render();announce(items.length?'loaded':'empty');}
  catch(error){announce(error.message);}finally{setBusy(false);}
}
async function change(id,done){
  if(busy)return;setBusy(true);
  try{await api(`/api/missions/${id}/completion`,{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({done})});items.find(item=>item.id===id).done=done;announce('updated');}
  catch(error){announce(error.message);}finally{setBusy(false);render();document.getElementById('mission-'+id)?.focus();}
}
document.querySelector('#mission-form').addEventListener('submit',async event=>{
  event.preventDefault();if(busy)return;setBusy(true);
  const title=document.querySelector('#title'),priority=document.querySelector('#priority');
  try{
    await api('/api/missions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({title:title.value,priority:Number(priority.value)})});
    title.value='';
    try{items=await api('/api/missions');render();announce('saved');}catch{announce('saved_refresh_failed');}
  }catch(error){announce(error.message);}finally{setBusy(false);title.focus();}
});
function translate(){document.documentElement.lang=language.value;document.title=t('title')+' · Rullst Academy';document.querySelectorAll('[data-i18n]').forEach(el=>{el.textContent=t(el.dataset.i18n);});render();status.textContent='';}
language.addEventListener('change',translate);document.querySelector('#refresh').addEventListener('click',refresh);
translate();refresh();

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Conectar sem perder o contexto

Vamos descobrir juntos

Sua bancada de aplicações

Arquivo para estudar e modificar

Links oficiais e próximo passo

Agora é a sua vez

Decida antes de executar

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot