/ / Xây dựng ứng dụng tìm kiếm âm nhạc với API React và Spotify

Xây dựng ứng dụng tìm kiếm âm nhạc với API React và Spotify

Spotify đã thay đổi hoàn toàn cách chúng ta truyền phát nhạc với một danh mục chứa hàng triệu bài hát, album và danh sách phát.


Sử dụng API web của nó, bạn có thể làm cho trải nghiệm Spotify của mình trở nên thú vị hơn bằng cách xây dựng ứng dụng tìm kiếm nhạc React của riêng bạn. API cung cấp quyền truy cập vào nhiều loại dữ liệu âm nhạc mà bạn có thể sử dụng để xây dựng ứng dụng âm nhạc tùy chỉnh và cá nhân hóa ứng dụng đó theo sở thích của mình.


Spotify dành cho nhà phát triển

Spotify cung cấp nhiều tính năng truyền phát nhạc như tìm kiếm, phát lại ngoại tuyến và các đề xuất được cá nhân hóa. Nền tảng Spotify dành cho nhà phát triển cung cấp quyền truy cập vào các API và SDK hỗ trợ các tính năng này. Trong hướng dẫn này, bạn sẽ khám phá web API và tìm hiểu cách tích hợp nó vào ứng dụng React của bạn để tìm kiếm các bài hát bạn thích.

logo spotify trên màn hình điện thoại

Đăng kí một tài khoản

Để bắt đầu, bạn cần có tài khoản Spotify. Nếu bạn chưa có, hãy truy cập trang đăng ký Spotify. Tuy nhiên, nếu bạn đã có, hãy đăng nhập vào bảng điều khiển Spotify dành cho nhà phát triển.

Đăng ký ứng dụng của bạn

Khi bạn đăng nhập vào bảng điều khiển dành cho nhà phát triển, hãy đăng ký ứng dụng của bạn để có quyền truy cập vào API web. Trên trang bảng điều khiển, nhấp vào Tạo một ứng dụng điền vào tên và mô tả, và cuối cùng, chấp nhận các điều khoản và điều kiện để tạo ứng dụng.

Trang cài đặt ứng dụng mới trên bảng điều khiển dành cho nhà phát triển của spotify

Cuối cùng, bấm vào Chỉnh sửa cài đặt để thay đổi cài đặt URL chuyển hướng. Vì ứng dụng của bạn vẫn đang ở chế độ phát triển, hãy thêm http://localhost:3000 làm URL chuyển hướng của bạn. Đây là URL bạn muốn chuyển hướng người dùng đến sau khi họ xác thực với Spotify.

Trang cài đặt ứng dụng trên bảng điều khiển dành cho nhà phát triển của spotify.

Sau khi đăng ký ứng dụng của bạn, Spotify sẽ cung cấp ID khách hàng duy nhất của bạn và bí mật khách hàng mà bạn có thể sử dụng để:

  • Thêm luồng xác thực Spotify để đăng nhập bằng thông tin xác thực Spotify trong ứng dụng React của bạn.
  • Nhận mã thông báo truy cập duy nhất của bạn để đưa ra yêu cầu tới các điểm cuối API web khác nhau, bao gồm tìm kiếm dữ liệu như bản nhạc hoặc album.

Thiết lập ứng dụng khách React

Tạo một ứng dụng React và điều hướng đến thư mục gốc và tạo một tệp mới, .env, để đặt một số biến môi trường. Bạn có thể lấy ID khách hàng của mình từ bảng điều khiển dành cho nhà phát triển của Spotify.

 REACT_APP_SPOTIFY_CLIENT_ID = "your client ID"
REACT_APP_SPOTIFY_REDIRECT_URI = "http://localhost:3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "token"

Cài đặt các gói cần thiết

Cài đặt Axios. Bạn sẽ sử dụng các phương thức của nó để thực hiện các yêu cầu HTTP tới API web của Spotify.

 npm install axios 

Thêm quy trình xác thực của Spotify

Spotify chỉ định rằng tất cả các yêu cầu đối với bất kỳ điểm cuối API Web nào đều có mã thông báo truy cập hợp lệ trong tiêu đề yêu cầu. Để nhận mã thông báo truy cập, ứng dụng của bạn trước tiên cần xác thực với Spotify.

Spotify hỗ trợ một số xác thực và ủy quyền các phương thức như mã ủy quyền, thông tin đăng nhập của khách hàng hoặc các phương thức cấp ngầm.

Cách đơn giản nhất để triển khai là phương thức cấp ngầm yêu cầu ứng dụng đưa ra yêu cầu tới điểm cuối xác thực (bạn đã thêm điểm này vào tệp ENV), chuyển qua ID ứng dụng khách của bạn. Sau khi xác thực thành công, Spotify sẽ phản hồi bằng cách cung cấp mã thông báo truy cập hết hạn trong một khoảng thời gian nhất định.

Mở tệp src/App.js của bạn, xóa mã React soạn sẵn và thêm mã bên dưới:

 import React, { useState, useEffect } from 'react';
import Searcher from './components/Searcher';

function App() {
    const CLIENT_ID=process.env.REACT_APP_SPOTIFY_CLIENT_ID
    const REDIRECT_URI =process.env.REACT_APP_SPOTIFY_REDIRECT_URI
   const AUTH_ENDPOINT =process.env.REACT_APP_SPOTIFY_AUTH_ENDPOINT
   const RESPONSE_TYPE = process.env.REACT_APP_SPOTIFY_RESPONSE_TYPE

    const [token, setToken] = useState("");

    useEffect(() => {
        const hash = window.location.hash;
        let token = window.localStorage.getItem("token");
  
        if (hash && hash) {
            token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1];
            window.location.hash = "";
            window.localStorage.setItem("token", token);
        }

        setToken(token)
    }, [])

    const logout = () => {
        setToken("");
        window.localStorage.removeItem("token");
    }

    return (
      <div className="App">
        <header className="App-header">
          <div className="SearchContainer">
            <h2>Searchly</h2>
            {!token ?
              <div >
                <a href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>
                 Login to Spotify
               </a>
              </div>
              :
              <div>
                <Searcher token={token} />
                <button className= "logOut"onClick={logout}>Logout</button>
              </div
            }
          </div>
        </header>
      </div>
    );
}

export default App;

Hãy chia nhỏ nó ra:

  • Thành phần này hiển thị có điều kiện thành phần tìm kiếm và nút đăng xuất, nếu không có mã thông báo truy cập, nó sẽ hiển thị div có liên kết hướng người dùng đến trang ủy quyền Spotify. Liên kết chứa các tham số truy vấn chỉ định các giá trị CLIENT_ID, REDIRECT_URI và RESPONSE_TYPE.
  • Sau khi bạn đã xác thực người dùng, hãy gọi hook useEffect để chạy khối mã khi thành phần này được gắn kết. Khối mã này truy xuất mã thông báo truy cập từ hàm băm URL và đặt nó làm giá trị mới của biến trạng thái mã thông báo. Nó cũng lưu trữ mã thông báo trong bộ nhớ cục bộ để duy trì trạng thái xác thực.
  • Với mã thông báo truy cập được lưu trữ ở trạng thái, nó được chuyển dưới dạng hỗ trợ cho thành phần Người tìm kiếm để thực hiện các yêu cầu đối với API web của Spotify.
  • Để đăng xuất, mã chỉ cần xóa mã thông báo truy cập khỏi bộ nhớ cục bộ và đặt trạng thái mã thông báo thành một chuỗi trống.

Triển khai Chức năng Tìm kiếm và Kết xuất Kết quả

Trong thư mục /src, tạo một thư mục mới và đặt tên là components. Trong thư mục này, tạo một tệp mới: Searcher.js và thêm mã bên dưới.

 import React, {useState, useEffect} from 'react'
import axios from 'axios';

function Searcher(props) {
    const [searchKey, setSearchKey] = useState("")
    const [tracks, setTracks] = useState([])
  
    const access_token = props.token
    
    const searchArtist = async () => {
        const {data} = await axios.get("https://api.spotify.com/v1/search", {
            headers: {
                'Content-Type' : "application/json",
                'Authorization': `Bearer ${access_token}`
            },
            params: {
                q: searchKey,
                type: "artist"
            }
        })
      
        var artistID = data.artists.items[0].id

        var artistTracks = await axios.get(`https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
            headers: {
                Authorization: `Bearer ${access_token}`
            },
            params: {
                limit: 10,
                market: 'US'
            }
        })

        setTracks(artistTracks.data.tracks);
    }

    return (
      <>
      <div className="SearchForm">
        <input
          className ="Name"
          type="text"
          placeholder="Search By Artist Name ..."
          onChange={(e) => {setSearchKey(e.target.value)}}
          
          />
        <button onClick={searchArtist}>Search</button>
      </div>
      {
        tracks.slice(0, 5).map(track => (
            <div key={track.id} >
                <ul>
                    <li > {track.name}</li>
                </ul>
            </div>
        ))
      }
      </>
    )
}

export default Searcher

Hãy chia nhỏ nó ra:

  • Thành phần xác định hằng số access_token mà nó đặt thành thuộc tính mã thông báo được truyền dưới dạng chỗ dựa. Sau đó, nó sẽ chuyển mã thông báo này trong tiêu đề của yêu cầu API tới điểm cuối API tìm kiếm của Spotify.
  • Xác định hai trạng thái: khóa tìm kiếm và theo dõi. Trạng thái khóa tìm kiếm giữ giá trị hiện tại của đầu vào tìm kiếm. Trạng thái bản nhạc chứa một mảng gồm 10 bản nhạc hàng đầu cho nghệ sĩ mà tìm kiếm Spotify sẽ trả về.
  • Hàm searchArtist tạo yêu cầu GET tới API Spotify để tìm kiếm dữ liệu của nghệ sĩ dựa trên giá trị khóa tìm kiếm.
  • Sau đó, nó trích xuất ID của nghệ sĩ từ dữ liệu phản hồi và thực hiện một yêu cầu GET khác để truy xuất các bản nhạc hàng đầu cho nghệ sĩ đó. Từ dữ liệu phản hồi, nó trích xuất 10 bản nhạc hàng đầu và đặt biến bản nhạc.
  • Thành phần trả về một trường đầu vào và một nút tìm kiếm. Khi người dùng nhấp vào nút tìm kiếm, nó sẽ gọi hàm searchArtist để tìm nạp và hiển thị các bản nhạc hàng đầu cho một nghệ sĩ cụ thể. Cuối cùng, nó sử dụng chức năng bản đồ để hiển thị năm bản nhạc hàng đầu trong mảng bản nhạc dưới dạng danh sách.

Chạy máy chủ phát triển của bạn để cập nhật các thay đổi, sau đó truy cập http://localhost:3000 trong trình duyệt của bạn để xem kết quả.

Tùy chỉnh ứng dụng của bạn với các tính năng của Spotify

Hướng dẫn này nêu bật các bước cần thiết để gửi yêu cầu tới API web của Spotify nhằm tìm kiếm dữ liệu âm nhạc của nghệ sĩ. Tuy nhiên, bạn có thể làm được nhiều hơn với các tính năng của Spotify được cung cấp bởi SDK và API của nó, chẳng hạn như tích hợp trình phát lại trên web của nó với giao diện giống như trên Spotify.

Ưu điểm của SDK và API của Spotify là chúng có nhiều tính năng và bạn có thể dễ dàng tích hợp chúng vào bất kỳ trang web hoặc ứng dụng di động nào.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *