Configuración de API Rest con TypeScript y JSON para Platzi Store

¿Cómo exponemos la data inicial con TypeScript?

La exposición de recursos desde un servidor es un paso crítico al desarrollar aplicaciones web con TypeScript. Aquí hablaremos sobre cómo configurar y exponer estos recursos como JSON para ser utilizados en nuestro proyecto.

¿Qué necesitamos para configurar la data inicial?

Primero, debes tener preparado el initial state que se utilizará en el proyecto. Este estado contiene datos esenciales como proyectos, recursos y elementos necesarios para trabajar en la aplicación. Puedes encontrar este archivo en el GIS provisto y simplemente copiar los elementos necesarios a tu proyecto.

¿Cómo integramos el estado inicial en el proyecto?

Después de haber copiado el initial state, es fundamental añadirlo a tu aplicación TypeScript. Aquí te mostramos cómo hacerlo:

1. Incluir el initial state: Cierra todos los elementos previos y ubica el archivo index.ts. Aquí, añade el initial state que has copiado previamente. Esto acelerará el desarrollo ya que no profundizaremos en la creación de CRUDs y conexiones a bases de datos.

2. Crear una ruta para la API: Utiliza app.get para configurar la ruta donde expondrás la información. El ejemplo que vamos a considerar sería API v1, que es donde se expondrá el JSON.

app.get('/API-v1', (req: Request, res: Response) => {
  res.json(initialState);
});

¿Cómo probamos la API localmente?

Una vez configurada, es vital asegurarnos de que el servidor está sirviendo nuestros datos correctamente. Esto se puede verificar de la siguiente manera:

• Ejecutar el servidor: Utiliza npm run dev para iniciar el proyecto usando Webpack y asegurarte de que se sirva en el puerto 3000.

• Revisar la salida en el navegador: Accede a la ruta configurada (/API-v1). Si todo está configurado correctamente, deberías ver la respuesta del servidor con los datos en formato JSON.

¿Cómo verificamos que los datos no son strings?

Para confirmar que los datos son, efectivamente, JSON y no strings, puedes usar las herramientas de desarrollador del navegador:

1. Abrir el inspector: Ve a Network y realiza una nueva petición.

2. Ver el Preview: Verás que la respuesta se resuelve en un código 200 y muestra el objeto JSON correctamente, permitiéndote interactuar con cada elemento.

Consejos adicionales

• Si realizas cambios en tu código, al no usar herramientas como Nodemon o Watch, necesitarás reiniciar el servidor manualmente.

Estos pasos son esenciales para cualquier desarrollador que busca exponer datos en una aplicación de backend con TypeScript. Te animamos a seguir explorando y aprendiendo sobre temas más avanzados, como aprender a crear un CRUD y conectarse a bases de datos con el curso de Express disponible en Platzi. Cada paso que das te acerca más al dominio total del backend. ¡Sigue adelante!