El proyecto con el que comencé 2022 ha sido Ludere.

Un poco de historia

Llevaba unas semanas con la idea de preparar un pequeño proyectito con NextJS para probar un poco las opciones que trae y en qué mejora a trabajar con React.

Así que me puse manos a la obra y en dos semanas tenía lista parte de la estructura de la aplicación web:

• ✅ Página principal
• ✅ Página de juego
• ⬜ Página de usuario

Mientras decido un poco cómo afrontar el diseño de la página de usuario: queda por ver cómo mostrar el progreso de los videojuegos jugados, cómo organizar los mismos, etc., me he lanzado a gestionar las consultas a la API de videojuegos para obtener la información relativa a ellos.

Estructura de datos y comunicación entre capas.

No tengo todavía muy claro si es la forma correcta y más eficiente de realizar estas consultas, pero funciona.

Mi frontend consulta a la API local de NextJS pidiéndole información acerca de un juego y es esta la que va a interactuar con la API externa para obtener la información requerida.

Así, defino por un lado la respuesta al GET que se lanza sobre la API local:

export default async function handler(req, res) {
  const {
    method,
    query: { id },
  } = req;

  if (method === "GET") {
    try {
      const result = await getGame(id);
      res.status(201).json(result[0]);
    } catch (error) {
      res.status(500).json(error);
    }
  }

Al mismo tiempo que implemento en mi gameUtils.js las funciones asociadas a la API externa:

const getGame = async (id) => {
try {
    const url = 'https://api.igdb.com/v4/games'
    const request = `fields: *; where id = ${id};`
    const result = await axios.post(url,request,{
        headers: headers
    })
    return result.data;

} catch (error) {
    console.log(error);
}
}

De esta manera, una llamada a localhost:3000/api/games/740 me va a devolver un JSON con toda la información del juego con el ID 740.

El siguiente paso va a ser obtener información de múltiples juegos a la vez mediante el uso de getMultipleGames([id])