Applications with Rullst I · Lesson 10 / 14

Connect without losing context

The network may fail before or after a write.

Let's discover together

1
web/app.js uses fetch to list, create and complete. response.ok covers 200–299; fetch normally resolves its Promise even for 422 or 503. An error response must be checked, not mistaken for success just because it arrived.
2
The form keeps the title when creation is not confirmed. After 201, it can clear it: creation was confirmed even if the following list refresh fails. busy blocks local double clicks; it does not prevent duplication by another client or a later repeated call.
3
If the connection drops, the server may already have written and the response may be lost. The message therefore asks you to refresh before repeating POST. Creation has no automatic retry. Check this with a controlled lab failure, without affecting other services.
4
Titles are inserted with textContent, not innerHTML. Enter <em>Orbit</em>: it should appear literally, not as markup. Safety depends on context; textContent suits node text, not every URL, CSS or other destination.

Your application workbench

The kit includes a complete app to investigate and modify. The excerpt below explains this step; the editor contains the indicated file. Rullst Academy does not compile or run this server in your browser.

File to study and modify

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;

Extract the kit to a new folder and open a terminal beside Cargo.toml. Use Rust 1.96+; the first build may download dependencies and take time. Then open http://127.0.0.1:3010. Stop with Ctrl+C and run again after editing.

cargo test --locked
cargo run --locked

My files and GitHub

Download your draft and replace the indicated file in your extracted copy. The editor saves one file in this browser; your account saves assessments and XP. The ZIP excludes your edits. GitHub sends only the confirmed file; use Git manually for the whole app, excluding databases, backups and secrets.

Official links and next step

✦

YOUR MISSION

Handle HTTP responses and network failures while preserving user understanding.

Take it with you

Stop only your server and try submitting a fictional task. Check the message and preserved form. Restart, refresh and explain why a network failure alone cannot prove nothing was written.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Your path, step by step

Download activity materials

Download the lesson example and a workbook for your notes. The ZIP includes a guide to organizing activities in one or more repositories. Publishing is optional; eligible accounts can also use the GitHub upload button.

Your file for this lesson

Edit the example or record what you learned. This space does not run code or grade answers. The draft is saved only in this browser, separately per account; you choose when to download or upload to GitHub.

The example may be only a snippet or outline. Changing the extension does not make it a complete program. The activity ZIP contains starting material; the edited-file button downloads your text.

My code or notes

'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();

File format

Your text will be saved in this browser when you edit it. On a shared computer, clear your drafts when finished.

Direct upload accepts up to 8 KiB of text in one file. Use downloads and the manual guide for projects with multiple files.

Connect without losing context

Let's discover together

Your application workbench

File to study and modify

Official links and next step

Now it's your turn

Decide before running

Take it with you

My files and GitHub

Your file for this lesson

Save to my GitHub

Rullstpetbot