TUTORIAL

Valeria Aispuro A01642923
Hannia Peña A01644068


Unsplashed background img 1
Your custom image
¿Qué es nodeJS?

Es un entorno que permite ejecutar código de javascript sin necesidad de usar un navegador web es comúnmente usada en desarrollo web debido a que permite que se realicen múltiples tareas de manera asíncrona, gracias a esta característica este entorno es el ideal para realizar solicitudes a APIs externas sin bloquear el hilo principal de la aplicación que se esté desarrollando.

Your custom image
¿Qué es un API?

Es una interfaz, la cual permite conectar diferentes aplicaciones o servicios para que puedan interactuar entre sí, y esta comunicación se logra a través de un conjunto de reglas o protocolos.

La API permite definir qué información de la aplicación con la que se quiere interactuar está disponible y cómo solicitarla.

settings

Tipos de métodos

SOLICITUD GET: nos permite mostrar la información de un recurso específico en un servidor web.

SOLICITUD POST: esta solicitud se utiliza para enviar datos a un servidor web para que posteriormente éste los procese, permitiendo crear nuevos recursos, modificar los existentes o simplemente enviar información a su procesamiento.

Unsplashed background img 2

Instalar Node.js

Pasos a seguir para instalar node:
1. Instalar Node.js en tu sistema. Puedes descargarlo desde este link https://nodejs.org/.
2. Asegúrate que esté instalado con la versión correcta poniendo node -v node -v en tu terminal.
3. Una vez que esté instalado correctamente, crea un nuevo directorio para tu proyecto y navega hacia él con la terminal.
4. Inicializa tu proyecto node y luego crea un archivo JavaScript para tu aplicación y comienza a escribir tu código.

Unsplashed background img 2

Servicios Web Node.js

Pasos para poder consumir servicios web usando Node.js:
1. Instalar el módulo request, el cual nos permitirá realizar solicitudes, para instalarlo solo se debe escribir el siguiente comando en el código importamos la API Fetch: import fetch from “fetch”;
2. Definir la URL a la que se le desea hacer la solicitud: Conts url= “https://request.ejemplo.com”;
3. De manera opcional se puede crear un objeto de configuración:

              

const options = { method: 'GET', headers: { 'Content-Type': 'application/json', // El tipo de contenido }, };

4. Se realiza la solicitud de la siguiente manera:

              

fetch(url, options) .then(response => response.json()) .then(data => { // Procesar la respuesta console.log(data); }) .catch(error => { // Manejar el error console.error(error); });

5. Los métodos y otros parámetros pueden especificarse en la configuración de la solicitud.

Unsplashed background img 2

Framework-
Materialize

Pasos a seguir ya que quieres usar un framework:
1. Una vez que ya tienes instalado Node.js, crea un archivo HTML en el directorio de tu proyecto.
2. Hay muchos frameworks con los que puedes trabajar, sin embargo en este tutorial vamos a utilizar Materialize con VS Code.
3. En tu archivo HTML vas a escribir html:5 y VS Code va a proporcionar la plantilla.
4. Vas a agregar en head:
head img 1
Y en body esto:
body img 2
5. Una vez agregado ya puedes hacer uso de los componentes que Materialize ofrece. Estos los encuentras en su página web.
6. En caso de que quieras hacer uso de una plantilla, puedes dirigirte a la página web de materialize en donde puedes encontrar plantillas para que las puedas usar a tu gusto.

Unsplashed background img 2

API-
Spotify

Cómo usar API de spotify:
1. Crea una cuenta en spotify developers: https://developer.spotify.com/.
2. Crea una nueva aplicación de tipo aplicación web
3. Obtén tu Client ID y Client Secret
4. Importamos la biblioteca Spotify Web API

                

npm install spotify-web-api-js

5. Crea una variable con tu Cliente ID
Const clientId = “Client_ID”
6. Crea una instancia de la API
Const spotifyApi=new SpotifyWebApi{
clientId: clientId
});

7. Redirige al usuario a la página de spotify

                

const authUrl = spotifyApi.getAuthorizeURL({ redirectUri: 'YOUR_REDIRECT_URI', scopes: ['user-read-private', 'user-read-email'], }); window.location.href = authUrl;

8. Obten el token de acceso

                

const code = getCodeFromUrl(); spotifyApi.authorizationCodeGrant(code).then((data) => { // Guarda el token de acceso y el refresh token localStorage.setItem('accessToken', data.accessToken); localStorage.setItem('refreshToken', data.refreshToken); });

9. Utiliza el token para realizar peticiones

              

const headers = { 'Authorization': `Bearer ${localStorage.getItem('accessToken')}` }; spotifyApi.getMe(headers).then((data) => { // Accede a la información del usuario console.log(data); });

Unsplashed background img 2

Spotify y Node.js

En este caso se obtiene el token directo en el código.
1. Crea un archivo .js
2. Agrega las siguientes librerias para que tu código pueda funcionar correctamente:
const http = require('node:http');
const querystring = require('node:querystring');
const url = require('node:url');

3. Asegurate de ya tener tu Client ID y tu Client secret, en caso de no tenerlos, sigue los pasos anteriormnete mencionados para obtenerlos.
4. Utiliza este código para utilizar el endpoint de Spotify, sustiye las claves por tus propios datos:

              

const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'grant_type=client_credentials&client_id=c4ff2d7214454c4292ecb7ecfaf3d83b &client_secret=0ce8ce5af8b843cab71ba3d84ba7a560' };

5. Una vez que ya está listo el token, ya puedes usar un API
Opciones de API:
1. https://api.spotify.com/v1/search?q=artista&type=artist, donde la parte verde será un parámetro que venga desde el cliente usando el url.
2. https://api.spotify.com/v1/search?q=canción&type=track, donde la parte verde será un parámetro que venga desde el cliente usando el url.
3. https://api.spotify.com/v1/search?q=album&type=album, donde la parte verde será un parámetro que venga desde el cliente usando el url.

Unsplashed background img 2

Nuestro código

Nuestro programa es un servidor HTTP que busca información sobre una canción en Spotify y luego utiliza OpenAI para recomendar canciones similares.
1. Importamos los módulos http, querystring y url de Node.js para manejar solicitudes HTTP y URL.
2. Definimos la función search_track, esta función:
1) Toma un token de autenticación y el nombre de una canción como entrada.
2) Utiliza estos datos para realizar una búsqueda de la canción en Spotify a través de su API.
3) Luego devuelve los datos de la canción encontrada.
3. Luego la función miFuncion:
1) Toma el nombre de una canción como entrada.
2) Primero busca información sobre la canción en Spotify utilizando la función searchTrack.
3) Luego utiliza OpenAI para recomendar canciones similares al nombre de la canción que se dio.
4. Luego creamos un servidor HTTP utilizando el módulo http de Node.js.
5. Cuando se recibe una solicitud HTTP en el puerto 3000, el servidor llama a la función miFuncion con el nombre de una canción predefinida.
6. Una vez que miFuncion ha completado su ejecución, el servidor envía las recomendaciones de canciones similares como respuesta al user.
7. Utilizamos server.listen para hacer que el servidor escuche en el puerto 3000 y usamos la dirección de IP local '127.0.0.1'.

Código:

Código img 1
Código img 2
Código img 3
Output img 1

Fin del tutorial

Unsplashed background img 3