Aplicaciones con Rullst I · Lección 10 / 14

Conectar sin perder el contexto

La red puede fallar antes o después de una escritura.

Vamos a descubrir juntos

1
web/app.js usa fetch para listar, crear y completar. response.ok cubre 200–299; fetch normalmente resuelve la Promise incluso para 422 o 503. Una respuesta de error debe comprobarse, no confundirse con éxito solo por llegar.
2
El formulario conserva el título si no confirma la creación. Tras un 201 puede borrarlo: la creación se confirmó aunque falle la actualización posterior de la lista. busy bloquea doble clic local; no evita duplicación por otro cliente o por repetir luego la llamada.
3
Si cae la conexión, quizá el servidor ya escribió y se perdió la respuesta. Por eso el mensaje pide actualizar antes de repetir POST. La creación no tiene reintento automático. Compruébalo con un fallo controlado del laboratorio, sin afectar otros servicios.
4
Los títulos se insertan con textContent, no innerHTML. Escribe <em>Orbit</em>: debe aparecer literalmente, no como marcado. La seguridad depende del contexto; textContent sirve para texto de un nodo, no para cualquier URL, CSS u otro destino.

Tu mesa de aplicaciones

El kit incluye la aplicación completa para investigar y modificar. El fragmento explica esta etapa; el editor contiene el archivo indicado. Rullst Academy no compila ni ejecuta este servidor en el navegador.

Archivo para estudiar y 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;

Extrae el kit en una carpeta nueva y abre el terminal junto a Cargo.toml. Usa Rust 1.96+; la primera compilación puede descargar dependencias y tardar. Abre http://127.0.0.1:3010. Detén con Ctrl+C y ejecuta de nuevo tras editar.

cargo test --locked
cargo run --locked

Mis archivos y GitHub

Descarga tu borrador y sustituye el archivo indicado en tu copia extraída. El editor guarda un archivo en este navegador; tu cuenta guarda evaluaciones y XP. El ZIP excluye tus cambios. GitHub envía solo el archivo confirmado; usa Git manual para la aplicación entera, sin bases, respaldos ni secretos.

Enlaces oficiales y siguiente paso

✦

TU MISIÓN

Tratar respuestas HTTP y fallos de red preservando la comprensión del usuario.

Ahora te toca

Taller de descubrimientos

Decide antes de ejecutar

Tratar respuestas HTTP y fallos de red preservando la comprensión del usuario.

01¿Una respuesta 503 tiene response.ok=true?02Tras un POST sin respuesta confirmada, ¿qué reduce duplicados?

Prepara tus respuestas y comprueba cuando estés listo.

Una pausa para entender

¿Cómo mostrar un título con <em> sin interpretarlo como HTML?

Ejecutar el título como JavaScriptAsignarlo al textContent de un elementoConcatenarlo en innerHTML

Necesito una pista

El título es dato textual. Elegir la API de salida adecuada evita convertirlo en marcado ejecutable.

Cargando tu camino…

Llévatelo contigo

Detén solo tu servidor e intenta enviar una tarea ficticia. Revisa el mensaje y la conservación del formulario. Reinicia, actualiza y explica por qué un fallo de red no demuestra que no se escribió nada.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

'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 del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Conectar sin perder el contexto

Vamos a descubrir juntos

Tu mesa de aplicaciones

Archivo para estudiar y modificar

Enlaces oficiales y siguiente paso

Ahora te toca

Decide antes de ejecutar

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot