Agregar puntos de Rodada

¿Cómo crear paradas de una rodada en una aplicación?

Las paradas son esenciales en rodadas largas. Estas paradas, indispensables para repostar combustible, tomar fotografías, descansar o comer, nos permiten disfrutar del viaje. En este artículo, aprenderemos a implementar las paradas en una aplicación de rodadas, usando ejemplos específicos de un fragmento de código.

¿Cómo se definen las variables y métodos de paradas?

Iniciaremos con la creación de variables y métodos que permiten configurar y manejar las paradas en nuestra aplicación.

let wayPoints = []; // Almacenará múltiples paradas
let masterWayPoint = ""; // Caja de entrada para una sola parada

Aquí definimos wayPoints como un arreglo para almacenar las distintas paradas de una rodada. La variable masterWayPoint se usará para registrar cada parada individual.

Posteriormente, se definirá el método addWayPoint:

function addWayPoint() {
  // Añado la parada del masterWayPoint al arreglo wayPoints
  wayPoints.push(masterWayPoint);
  masterWayPoint = ""; // Limpio la caja de entrada
}

Este método añade las paradas ingresadas desde la caja de texto al arreglo de wayPoints. También limpia el campo de entrada después de añadir una nueva parada.

¿Cómo se integra la lógica en la interfaz de la aplicación?

Ahora conectaremos nuestra lógica con la interfaz visual aprovechando elementos HTML.

En el archivo Raiford.html, debajo de una sección de fecha, añadiremos un nuevo ítem:

<div>
  <label>Agregar Parada</label>
  <input type="text" placeholder="Ciudad Ejemplo" oninput="masterWayPoint = this.value"/>
  <button onclick="addWayPoint()">Agregar</button>
</div>

Estas líneas de código crean un campo de texto con un botón. Al hacer clic en el botón se llama al método addWayPoint, que transfiere el texto ingresado a wayPoints.

¿Cómo se visualizan las paradas en la interfaz de usuario?

Reflejaremos las paradas añadidas usando una lista que se actualizará cada vez que se agregue una nueva parada.

<ul id="wayPointsList">
  <!-- Iteraremos sobre los elementos de wayPoints para mostrarlos -->
  <li v-for="point in wayPoints">{{ point }}</li>
</ul>

La etiqueta <ul> contiene una lista que se llena dinámicamente con las paradas almacenadas en wayPoints, para así proveer feedback visual al usuario sobre las paradas registradas.

¿Cómo se resuelven los errores comunes?

En el código, pueden surgir errores durante la implementación. Por ejemplo, verificar los errores de presentación en la consola y el control de errores de objeto puede ser crucial para un funcionamiento correcto.

• Error de presentación: Asegúrate de que las reglas CSS aplicadas respeten el diseño planificado y no se vean alteradas los elementos de la interfaz.

• Error en Backend: Asegúrate de utilizar el método fetch correctamente al crear rodadas. Esto es crucial para garantizar que el objeto es manipulado adecuadamente por el backend.

// En el controlador:
async function createRaid(req, res) {
  const raid = await Raid.create(req.body).fetch(); // Fetch para obtener el objeto creado
  res.json({ success: true, raid });
}

En estas líneas, corregimos potenciales errores al usar fetch() para asegurar que el objeto raid nuevo se obtenga de la base de datos.

¿Qué sigue después al mejorar la aplicación?

Para mejorar aún más la funcionalidad de nuestra aplicación, podemos calcular las distancias entre las paradas y obtener información meteorológica en tiempo real. Continuar aprendiendo y practicando proporcionará más oportunidades para explorar y enriquecer la experiencia completa del usuario, haciendo cada rodada aún más placentera.