Skip to content

Latest commit

 

History

History
71 lines (51 loc) · 4.51 KB

README.es.md

File metadata and controls

71 lines (51 loc) · 4.51 KB

Segunda parte de la TODO List, agregando fetch

Debes hacer este ejercicio después de la aplicación de la TODO list con React porque la primera parte es el boilerplate perfecto para comenzar a usar APIs.

Para esta segunda parte, sincronizaremos nuestra lista de tareas con una base de datos real, usando la siguiente RESTful y API pública realizada para este ejercicio.

🔗 Clic aquí para acceder a la documentación de la API del TODO-list.

👉 Aqui hay un video explicando como usar el TODO-List API con Fetch.

Todo este ejercicio se trata de la programación asíncrona porque las interacciones desde y hacia el servidor deben realizarse de forma asíncrona. De esa manera, el usuario no tiene que esperar a que llegue la información.

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react boilerplate usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

https://github.com/4GeeksAcademy/react-hello

👉 Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 Instrucciones:

  • Haz que tu TODO List se sincronice con la API de backend cada vez que se agregue o elimine una tarea.
  • Agregue un botón de limpieza de todas las tareas que eliminará toda la lista del servidor y actualizará la lista vacía en el front-end.

Hay 3 momentos críticos en la línea de tiempo de la aplicación (denominado tiempo de ejecución) para centrarse en su integración:

  • Después de que la lista se carga vacía por primera vez (useEffect): Debes obtener (GET) los datos de la API y actualizar las tareas cuando la información finalmente llegue.
  • Cuando se agrega una nueva tarea: Debes PONER (PUT) la nueva lista en el servidor.
  • Cuando se elimina una tarea: Debes PONER (PUT) la nueva lista en el servidor.

💡 Pista:

Utiliza el siguiente fetch call para crear una nueva tarea en el servidor. Recuerda crearte un usuario primero.

fetch('https://playground.4geeks.com/todo/todos/alesanchezr', {
      method: "POST",
      body: JSON.stringify(todo),
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(resp => {
        console.log(resp.ok); // Será true si la respuesta es exitosa
        console.log(resp.status); // El código de estado 201, 300, 400, etc.
        console.log(resp.text()); // Intentará devolver el resultado exacto como string
        return resp.json(); // Intentará parsear el resultado a JSON y retornará una promesa donde puedes usar .then para seguir con la lógica
    })
    .then(data => {
        // Aquí es donde debe comenzar tu código después de que finalice la búsqueda
        console.log(data); // Esto imprimirá en la consola el objeto exacto recibido del servidor
    })
    .catch(error => {
        // Manejo de errores
        console.log(error);
    });

Para cualquier otra solicitud, debes cambiar las variables en el fetch: La URL, el método y el payload.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.