Consultar una API con Flask y actualizar la página web si los datos devueltos han cambiado.

23 Jul, 2023 Programación 0

Estoy construyendo un reproductor personalizado de música de Spotify utilizando Flask en el backend para manejar las llamadas a la API de Spotify. Obtiene información de la canción que se está reproduciendo actualmente y la muestra en la página web local. Ahora necesito consultar la API de Spotify (aproximadamente cada 2 segundos) para comprobar si ha cambiado la canción y, en caso afirmativo, actualizar la página web (preferiblemente con JavaScript para que no sea necesario refrescar la página). No estoy seguro de cómo hacer esto con Flask o si hay un mejor método para hacerlo. Creo que puedo resolver el problema creando y llamando una función asincrónica para hacer la consulta, pero si se identifica un cambio, no estoy seguro de qué hacer a partir de ahí.

Aquí está la vista de Spotify que tengo hasta ahora. Estoy utilizando la biblioteca spotipy dentro de las funciones de autenticación personalizada y reproducción actual en un archivo spotify.py.

# Página del reproductor de Spotify
@app.route('/spotify')
def spotify():

    # Obtener instancia de Spotify y token de autorización
    authData = dev.auth()
    sp = authData[0]
    token = authData[1]

    current = dev.now_playing(sp, token)

    # Asignar información de la canción individual a una variable para enviarla a la página web mediante Jinja
    separator = ', '
    return render_template('spotify.html',
                           artists=separator.join(current[0]),
                           song=current[1],
                           album=current[2],
                           cover_url=current[3],
                           year=current[4],
                           auth_tok=token
                           )

Tengo experiencia limitada en desarrollo web y esta es la primera vez que utilizo Flask. Estoy utilizando este proyecto para aprender más, pero me he encontrado con este obstáculo.

davy.ai

July 23, 2023 at 6:26 pm

Para verificar continuamente los cambios en la canción que se está reproduciendo en la API de Spotify, puedes utilizar JavaScript en el front-end de tu aplicación Flask. Puedes utilizar la función setInterval() para realizar consultas a la API de Spotify cada 2 segundos aproximadamente, y actualizar la página web si se detecta un cambio en la canción. Aquí tienes un ejemplo de implementación:

En tu archivo spotify.html, agrega una nueva etiqueta de script al final del archivo para manejar la lógica del front-end:

<script>
function pollSpotify(token) {
  setInterval(() => {
    // Realiza una solicitud GET para obtener la canción que se está reproduciendo actualmente
    fetch('https://api.spotify.com/v1/me/player/currently-playing', {
      headers: {
        'Authorization': 'Bearer ' + token
      }
    })
    .then(response => response.json())
    .then(data => {
      // Verifica si la canción ha cambiado
      if (data.item.name !== currentSong) {
        // Actualiza la información de la canción que se está reproduciendo en la página web
        document.getElementById('song').textContent = data.item.name;
        document.getElementById('artists').textContent = data.item.artists.map(artist => artist.name).join(', ');
        document.getElementById('album').textContent = data.item.album.name;
        document.getElementById('cover').src = data.item.album.images[0].url;

        // Actualiza la variable currentSong con el nombre de la nueva canción para verificar nuevamente en el siguiente intervalo
        currentSong = data.item.name;
      }
    })
    .catch(error => console.error(error));
  }, 2000);
}

// Llama a la función pollSpotify con el token de autorización desde la ruta de Flask
pollSpotify('{{ auth_tok }}');
</script>

Modifica tu ruta de Flask para enviar el nombre de la canción actual como una variable de JavaScript al template spotify.html:

# Página del reproductor de Spotify
@app.route('/spotify')
def spotify():
    # Obtén una instancia de Spotify y el token de autorización
    authData = dev.auth()
    sp = authData[0]
    token = authData[1]

    current = dev.now_playing(sp, token)

    # Asigna la información de la canción individual a una variable para enviarla a la página web a través de Jinja
    separator = ', '
    return render_template('spotify.html', 
        artists = separator.join(current[0]),
        song = current[1],
        album = current[2],
        cover_url = current[3],
        year = current[4],
        auth_tok = token,
        current_song = current[1] # Agrega el nombre de la canción actual como una variable de JS
    )

Actualiza tu template spotify.html para utilizar la variable de JavaScript y mostrar la información de la canción actual:

<div>
  <h3 id="song">{{ current_song }}</h3>
  <p id="artists">{{ artists }}</p>
  <p id="album">{{ album }}</p>
  <img id="cover" src="{{ cover_url }}" alt="Portada del álbum">
</div>

Con estas actualizaciones, tu aplicación Flask verificará continuamente la API de Spotify en busca de cambios en la canción que se está reproduciendo actualmente, y actualizará la página web si se detecta un cambio, sin la necesidad de actualizar la página.

es.davy.ai

¿Tienes una pregunta?

Consultar una API con Flask y actualizar la página web si los datos devueltos han cambiado.

Answer

davy.ai