¿Cómo usar Node JS para consumir servicios web?

Ahora, vamos a explicarlo con la API de Spotify

Primero que nada, creamos un nuevo documento de JavaScript al que llamaremos ‘app.js’ (la terminación de los archivos de JavaScript es .js). Ahora, declaramos una constante llamada http utilizando el módulo http de Node.js, HTTP es un protocolo para la transferencia de datos ‘Hyper Text Transfer Protocol’, y, a continuación, creamos nuestro servidor de forma local (solo en nuestra computadora) con http.createServer

const http = require('node:http');
const server = http.createServer(
            

En method utilizamos POST ya que queremos enviar estos datos de forma oculta para el usuario, ya que ahí va nuestra id y contraseña personal, por lo tanto no queremos que el usuario pueda verlos, o mucho peor, modificarlos, ya que esto podría resultar en fallos en la página. En headers utilizamos el link que nos proporciona la documentación de spotify y en el body van nuestras credenciales personales las cuales son únicas para cada usuario.
Ahora, utilizamos la función fetch, la cual se utiliza para hacer peticiones y comunicarnos con la red. A esta función le pasamos de parámetros el endpoint y las opciones para que sepa a dónde acceder. Y si es que encuentra una respuesta regresa un archivo JSON con lo que encontró. Que, en este caso tendrá nuestro token para ahora si, poder realizar búsquedas dentro de spotify.

fetch(endpoint_spotify, requestOptions).then(function (r){
    return r.json();
})
        

A continuación, creamos un nuevo set de opciones al que incluimos nuestro Token. Y posteriormente, realizamos un nuevo fetch, ahora con el endpoint de artista el cual es un link a la página de cierto artista o grupo y con nuestro token, para acceder a cierta información de dicho artista.

.then(function(j){
    token = j.access_token;
    const artistOptions = {
        headers: {
            'Authorization': 'Bearer ' + token
    }
};
    return fetch(endpoint_artist, artistOptions);
        

Después, realizamos una validación de si la respuesta que recibimos en dicho fetch es positiva o si hay algún error. Si todo está bien, pasamos el JSOn que recibimos como respuesta a la siguiente función, pero en caso de error lanzamos un error.

.then(function (response) {
    if (response.ok) {
        return response.json();
    } else {
        throw new Error('Error al obtener información del artista');
    }
})  
        

Si todo salió bien hasta este punto, tomaremos el JSOn que recibimos en el punto anterior y extraemos cierta información como el nombre del artista, una foto y los géneros de su música. Para posteriormente, incluirlas en un documento HTML que es lo que mostraremos en pantalla.

.then(function datos(artistData) {
const artistName = artistData.name;
const artistGenres = artistData.genres;
const artistFollowers = artistData.followers.total;

const imageSrc = artistData.images[0].url;
const imageHeight = artistData.images[0].height;
const imageWidth = artistData.images[0].width;

const html = `
<h1>${artistName}</h1>
<img src="${imageSrc}" alt="${artistName}">
<p>Gêneros: ${artistGenres.join(', ')}</p>

`; //ê es para ponerle acento a la e

res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
return html;
})
.catch(function (error) {
    res.write('Error en el servidor: ' + error.message);
    res.end();
    });
});    
        

Por último, aunque esté al final del código, es muy importante montar el servidor en nuestros puertos locales y hacer que estén esperando una respuesta de las funciones para actuar en base a ellas.

Pruébalo

Ya te explicamos como funciona el código, ahora vamos a usarlo, ingresa el nombre de un artista y te mostraremos una imagen de él, que géneros canta y cuántos seguidores tiene en la plataforma.

Nombre

Géneros relacionados:

Seguidores:

Ahora con OpenAI

Así como la API de spotify nos puede servir para acceder a información de un artista, su música, etc. La API de OpenAI tiene múltiples propósitos los cuales utilizan los modelos de Inteligencia Artificial que tiene la empresa, probablemente hayas escuchado, o incluso usado ChatGpt o Dalle (Estos 2 con hipervínculo). Entre las funciones de la API están que podemos generar imágenes, hacer consultas como a ChatGPT o pasar texto a audio. En esta ocasión, nos concentramos simplemente en hacerle peticiones al modelo de ChatGPT. Vamos a combinar la respuesta que obtuvimos de Spotify para en base a ella, pedirle recomendaciones musicales a GPT.
Para esto, empezamos con una nueva función, la cual recibe 2 parámetros los cuales obtuvimos con la API de Spotify. El nombre del artista y los géneros de su música. También declaramos el endpoint, es muy importante este paso ya que cada API tiene uno diferente y nuestras opciones, entre las cuales va nuestro token y el contenido, que es lo que le queremos preguntar al modelo.

const endpoint_ai = "https://api.openai.com/v1/chat/completions";
const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-TU KEY'
    },
    body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{
            "role": "user",
            "content": `Recomiendame 3 artistas basado en que me gusta ${artistName} y me gustan los siguientes géneros: ${artistGenres.join(', ')}`
        }]
    })
};
        

Ahora, utilizaremos de nuevo la función fetch para hacerle peticiones al servidor. Si la respuesta que recibimos es buena, pasamos el JSON que recibimos como respuesta a la siguiente función, en caso de que haya un error mandamos una alerta del error. Por último, extraemos la respuesta que recibimos del JSON para mostrarsela al usuario.

return fetch(endpoint_ai, options).then(function(response){
if (response.ok) {
    return response.json();
}
else{
    throw new Error('Error al obtener recomendaciones');
    }}).then(function(data) {
    return data.choices.map(function(choice) {
        return choice.message.content;
    });
});
} 
        

Un lindo gatito...

En los 2 ejemplos anteriores utilizamos las funcionalidades de NodeJs, Javascript y las APIs para mostrarte información según tus gustos y hacerte una pequeña recomendación. Pero, ya es tiempo de relajarnos un poco viendo fotos de gatitos. Si, nos leiste bien, utilizaremos una API la cual, entre otras funciones, puede mostrarnos fotos de gatos. Así que, eso haremos!!!
Creamos nuestra función la cual se llamará cats. Y lo primero que haremos es declarar las opciones, donde únicamente irá el header con nuestro token, el cual obtuvimos al hacer nuestra cuenta. Y posteriormente declaramos el endpoint, este endpoint en particular nos lleva a una imagen random de un gato.

 const cat_options= {
    header:{
        'x-api-key' : 'TU_KEY'
    }
};
const endpoint_cats = 'https://api.thecatapi.com/v1/images/search';
        

Posteriormente, utilizamos la función fetch con el endpoint y nuestras opciones para hacerle una solicitud al servidor. Lo que esperamos obtener de regreso es un JSON del cual a continuación podemos extraer el url donde encontraremos una imagen random de un gato. Para mostrarla en pantalla creamos un pequeño html que únicamente contendrá nuestra imagen.

fetch(endpoint_cats, cat_options).then(function(respuesta){
        return respuesta.json();
    }).then(function data(r){
        console.log(r);
        return r;
    }).then(function gatito(j){
        imagen = j[0].url;

        const html = `
        <img src="${imagen}">
        `; 
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(html);
        //res.end();
    })

}   
       

Y listo, ahora tenemos una imagen de un gato!!!

Cambios recomendados por otro equipo

1. Redondear las esquinas de los bloques de Codigo, para mejorar la estetica de la pagina.
2. Alinear la información del artista (Nombre, Generos, Seguidores) a la izquierda para mejor comprensión. Antes, teniamos el nombre centrado y los géneros y seguidores jstificados a la izquierda.
3. Mejorar el formato de la respuesta que nos dio ChatGPT. Previamente, recibiamos la respuesta como un bloque de texto y la desplegabamos de esa forma. Ahora, le pedimos que nos la diera en un formato JSON y luego le hicimos un parse para poder acceder a cada elemeneto de forma unica y mpostrarlos en pantalla de mejor manera.