Spotify API برای ایجاد کارت “Listening now”.

معرفی

در این پست وبلاگ، ما یک قطعه کد را بررسی خواهیم کرد که نشان می‌دهد چگونه می‌توان یک پوشش API Spotify با استفاده از Next.js و کتابخانه محبوب مشتری HTTP، Axios ایجاد کرد. این کدی که خواهیم نوشت، به شما امکان می دهد اطلاعاتی در مورد آهنگ در حال پخش در حساب Spotify خود دریافت کنید و جزئیاتی مانند عنوان آهنگ، هنرمند، آلبوم، URL تصویر جلد آلبوم و URL آهنگ Spotify را بازیابی کنید. این به شما بستگی دارد که هر چیزی را که دوست دارید نشان دهید، این نمونه من است که من در حال حاضر در وب سایت شخصی خود از آن استفاده می کنم، بنابراین هر چقدر که دوست دارید خلاق باشید. بنابراین من دیگر زحمت نخواهم داد، بیایید به کد شیرجه بزنیم و بفهمیم که چگونه کار می کند.

ایده پشت پروژه

راستش چیز خاصی نیست، همانطور که قبلاً در بالا ذکر کردم، می خواستم نشان دهم که در حال حاضر به کدام موسیقی در Spotify گوش می دهم و چه کسی می داند، شاید برخی از بازدیدکنندگان ناشناس آهنگ را دوست داشته باشند، بنابراین حداقل در این مورد می توانم انجام دهم، موسیقی خوب را توصیه کنم 🙂

توضیح کد

کد با وارد شدن ماژول های ضروری برای این پروژه، querystring و axios آغاز می شود. querystring برای رشته‌بندی پارامترهای درخواست استفاده می‌شود (شما مجبور نیستید از آن استفاده کنید، من قبلاً آن را در پروژه داشتم، بنابراین استفاده خوبی از آن پیدا کنید اما ضروری نیست)، در حالی که axios برای درخواست‌های HTTP به Spotify API استفاده می‌شود.

کد زیر متغیرهای محیطی مورد نیاز را که SPOTIFY_CLIENT_ID، SPOTIFY_CLIENT_SECRET و SPOTIFY_REFRESH_TOKEN نام دارند، با استفاده از تخصیص تخریب ساختار از شی process.env بازیابی می کند. این متغیرها اطلاعات حساس را ذخیره می کنند و باید ایمن نگه داشته شوند، به همین دلیل استفاده از متغیر محیطی اکیداً توصیه می شود. توجه داشته باشید که باید توکن های خود را از پورتال توسعه دهنده Spotify دریافت کنید.

را نشانه سپس متغیر با رمزگذاری client_id و client_secret با استفاده از کدگذاری Base64 ایجاد می شود. زمانی که بخواهیم درخواست کنیم از آن برای احراز هویت به عنوان یک توکن حامل استفاده خواهد شد نشانه دسترسی از Spotify

دو ثابت، NOW_PLAYING_ENDPOINT و TOKEN_ENDPOINT، به ترتیب نقاط پایانی Spotify API را برای بازیابی اطلاعات آهنگ در حال پخش و دریافت نشانه‌های دسترسی ذخیره می‌کنند.

import querystring from 'querystring'
import axios from 'axios'

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const token = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

را getAccessToken تابع، همانطور که قبلاً گفته شد، برای واکشی نشانه دسترسی از Spotify استفاده خواهد شد، یک درخواست POST به TOKEN_ENDPOINT ارسال می کند. https://accounts.spotify.com/api/token با پارامترهای لازم، از جمله grant_type تنظیم شده است refresh_token و refresh_token به دست آمده از متغیرهای محیطی. درخواست شامل هدر Authorization با client_id و client_secret کدگذاری شده است. داده های پاسخ که حاوی نشانه دسترسی است، برگردانده می شود.

const getAccessToken = async () => {
  const response = await axios.post(
    TOKEN_ENDPOINT,
    querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token
    }),
    {
      headers: {
        Authorization: `Basic ${token}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )

  return response.data
}

بیایید به سراغ getNowPlaying function یکی دیگر از عملکردهای ناهمزمان است که اطلاعات آهنگ در حال پخش را از NOW_PLAYING_ENDPOINT API بازیابی می کند. https://api.spotify.com/v1/me/player/currently-playing. ابتدا getAccessToken را فراخوانی می کند تا توکن دسترسی را بدست آورد، سپس یک درخواست GET را برای آن ارسال می کند NOW_PLAYING_ENDPOINT با رمز دسترسی موجود در هدر مجوز.

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken()
  return axios.get(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

بالاخره داریم به callSpotifyApi تابعی که به صورت پیش فرض صادر می شود و فراخوانی می شود. تماس می گیرد getNowPlaying برای دریافت اطلاعات آهنگ در حال پخش. اگر وضعیت پاسخگویی باشد 204 (بدون محتوا) یا خطایی رخ می دهد، یک پاسخ JSON ارسال می کند که نشان می دهد چیزی در حال حاضر پخش نمی شود، بنابراین باید چیز دیگری را نشان دهید. در غیر این صورت، اگر آهنگی در حال پخش باشد، داده های مربوطه را از پاسخ استخراج می کند و یک شی JSON حاوی جزئیات مربوط به آهنگ در حال پخش را می سازد.

const spotifyApi = async (_, res) => {
  const response = await getNowPlaying()
  if (
    response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
  ) {
    return res.status(200).json({ isPlaying: false })
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify
  }

  res.status(200).json(data)
}

export default spotifyApi

بنابراین در نهایت، اینجاست spotify.js فایل، تکمیل شد

/* eslint-disable camelcase */
// /pages/api/spotify.js
import querystring from 'querystring'
import axios from 'axios'

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const token = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

const getAccessToken = async () => {
  const response = await axios.post(
    TOKEN_ENDPOINT,
    querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token
    }),
    {
      headers: {
        Authorization: `Basic ${token}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )

  return response.data
}

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken()
  return axios.get(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

const spotifyApi = async (_, res) => {
  const response = await getNowPlaying()
  if (
    response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
  ) {
    return res.status(200).json({ isPlaying: false })
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify
  }

  res.status(200).json(data)
}

export default spotifyApi

کارت اسپاتیفای

بنابراین اساساً برای کارت Spotify شما می توانید هر آنچه را که دوست دارید بسازید، بنابراین با خیال راحت آن را با ترجیحات خود بسازید. من در این پروژه از Next.js با Tailwind استفاده کرده‌ام و برای فراخوانی Spotify API از SWR استفاده کردم که در اصل «React Hook برای واکشی داده‌ها» است، اما اگر می‌خواهید اطلاعات بیشتری در مورد آن موضوع پیدا کنید، می‌توانید پست دیگر من را بررسی کنید SWR چیست؟ و چگونه می تواند برنامه های React شما را بهبود بخشد.
بنابراین در اینجا نحوه نگاه کردن به داخل برنامه من است وقتی که من چیزی گوش نمی دهم:

بنابراین در اینجا نحوه نگاه کردن به داخل برنامه من هنگام گوش دادن است:

نتیجه

در این پست وبلاگ، یک قطعه کد را بررسی کردیم که نشان می‌دهد چگونه می‌توان یک بسته‌بندی API Spotify با استفاده از Next.js و Axios، به همین سادگی، ایجاد کرد. این کد به شما امکان می دهد اطلاعاتی در مورد آهنگ در حال پخش در Spotify دریافت کنید و جزئیاتی مانند عنوان آهنگ، هنرمند، آلبوم، URL تصویر جلد آلبوم و URL آهنگ Spotify را بازیابی کنید. می‌توانید از این کد به‌عنوان نقطه شروع برای ایجاد عملکردهای پیشرفته‌تر مرتبط با Spotify در برنامه‌های خود استفاده کنید یا می‌توانید ایده‌های بهتری دریافت کنید. به راحتی می توانید کد را مطابق با نیازهای خاص خود تغییر دهید و گسترش دهید. امیدوارم کمک کرده باشم، اگر سوالی دارید لطفاً به من اطلاع دهید و کدنویسی مبارک!