Как реализовать приложение для отслеживания активности Spotify с помощью Next.JS

Введение

Вы большой поклонник Spotify и используете его для всех видов деятельности, от бега до учебы или даже во время сна? Хотите поделиться с друзьями музыкальными исполнителями и песнями, которые вы часто слушаете? А вы технически подкованный человек, который хочет узнавать что-то новое каждый день? В этой статье вы узнаете, как реализовать приложение для отслеживания действий Spotify с использованием платформы Next.js.

Перейти к заявке

Приложение представляет собой одностраничное приложение, которое показывает самые популярные песни и самых популярных исполнителей, которых вы слушали за последний месяц. Приложение также показывает текущую песню, которую вы слушаете, и позволяет пользователям сохранять ссылки Spotify, которые они хотят прослушать позже, отправляя эти ссылки на свои почтовые адреса.

Пользователи могут видеть ваши десять лучших потоковых песен.

Или просмотрите десятку лучших исполнителей.

Или просмотрите текущую песню, которую вы слушаете, и сохраните несколько ссылок Spotify, отправив их на их адреса электронной почты.

Вы создадите это приложение, используя платформу Next.js с TypeScript. Чтобы быстро реализовать функцию отправки электронной почты, вы будете использовать платформу SendGrid, которая предоставляет Javascript SDK, который поможет вам легко интегрироваться с приложением Typescript/Javascript.

Предпосылки

1. Имейте компьютер с Linux, желательно Ubuntu версии 22.04, так как все команды в статье были протестированы на нем.
2. Иметь активированную учетную запись SendGrid, которая позволяет отправлять электронные письма пользователям с зарегистрированного адреса электронной почты.
3. Иметь учетную запись Premium Spotify для воспроизведения песен на Spotify и создания приложения для разработки Spotify на Странице разработки Spotify.
4. Установите Node.js из версии 14.6.0, чтобы вы могли использовать последнюю версию Next.js для создания приложения.
5. Установите Git на свой компьютер, чтобы клонировать существующий код с GitHub.

Обзор шагов для создания приложения

Чтобы собрать приложение, вам нужно будет сделать следующие шаги:

• Шаг 1. Создайте учетную запись SendGrid и попросите службу поддержки клиентов SendGrid активировать эту учетную запись.
• Шаг 2. Создайте учетную запись Spotify и приложение Spotify с конфигурацией для авторизации в приложении для разработки Spotify.
• Шаг 3: Клонируйте код приложения из этого репозитория GitHub
• Шаг 4. Просмотрите структуру кода приложения
• Шаг 5: Запустите приложение
• Шаг 6. Взаимодействие с приложением

Шаг 1: Создайте учетную запись SendGrid

Чтобы создать учетную запись SendGrid, перейдите на страницу регистрации SendGrid.

Затем вам нужно связаться со службой поддержки клиентов, чтобы активировать свою учетную запись SendGrid, чтобы вы могли отправлять электронные письма пользователям приложения. Подробнее о том, как это сделать, вы можете узнать на странице Аккаунт на проверке. Вам потребуется еще несколько дней, чтобы активировать учетную запись SendGrid.

После активации учетной записи SendGrid вам необходимо создать ключ API SendGrid, чтобы отправлять электронные письма клиентам из приложения Next.js. Для этого войдите в SendGrid, затем перейдите по этой ссылке, чтобы создать ключ API SendGrid.

Выберите имя ключа API, затем нажмите «Создать ключ», чтобы сгенерировать новый ключ API SendGrid. Наконец, сохраните значение ключа в безопасном месте. Вы будете использовать этот ключ на шаге 4 для запуска приложения.

Шаг 2. Создайте учетную запись Spotify и приложение для разработки Spotify.

Перейдите на Страницу регистрации Spotify, чтобы создать новую учетную запись Spotify.

Затем перейдите к обновлению учетной записи Spotify до премиум. После этого перейдите на страницу разработчика Spotify, чтобы создать новое приложение Spotify.

Нажмите «Создать приложение» и введите сведения о приложении для «Имя приложения» и «Описание приложения».

Затем перейдите во вновь созданное приложение Spotify, чтобы изменить его настройки.

Нажмите «ИЗМЕНИТЬ НАСТРОЙКИ», чтобы начать настройку приложения Spotify.

Добавьте URL-адрес http://localhost:3001/callback в поле URI перенаправления, чтобы вы могли авторизовать свое приложение с разрешениями Spotify для интеграции с API Spotify.

Существует несколько методов авторизации для Spotify, таких как «Запросить авторизацию пользователя», «Запросить токен доступа» или «Запросить обновленный токен доступа». Вы будете использовать последний, чтобы у вас был токен обновления с бесконечной датой истечения срока действия.

Чтобы создать токен обновления, вам нужно сначала получить идентификатор клиента Spotify и секрет клиента Spotify со страницы приложения.

Сохраните «Идентификатор клиента» и «Секрет клиента» в безопасном месте.

Затем вам нужно создать код авторизации с областью разрешений для доступа к главной статистике пользователя и текущей воспроизводимой песне пользователя: `user-top-read`, `user-read-currently-playing`. Для этого откройте указанный ниже URL-адрес в своем браузере и замените значение client_id вашим фактическим.

https://accounts.spotify.com/authorize?client_id=your_client_id&response_type=code&redirect_uri=http://localhost:3001/callback&scope=user-read-currently-playing+user-top-read

После предоставления вашей учетной записи Spotify и пароля вы должны перейти по адресу, аналогичному приведенному ниже:

http://localhost:3001/callback?code=your_code_value

Сохраните код в безопасном месте.

Теперь вам нужно создать токен base 64 из идентификатора клиента Spotify и секрета Spotify, чтобы авторизовать Spotify для создания токена обновления. Для этого перейдите на этот сайт, чтобы сгенерировать токен base64 в формате your_Spotify_client_id:your_Spotify_secret.

Сохраните токен base64 в безопасном месте.

В терминале выполните следующую команду, чтобы создать токен обновления, не забудьте заменить фактическое значение кода на «your_code» и укажите токен base64 в месте «your_base_64_token».

curl -H "Authorization: Basic your_base_64_token" -d grant_type=authorization_code -d code=your_code -d redirect_uri=http%3A%2F%2Flocalhost:3001/callback https://accounts.spotify.com/api/token

Вы должны увидеть вывод, похожий на:

{
"access_token": "BQB7235SeKq3mlOiU8sP2rxiHDCDiLes760qyE4pU6VosbUr864IGXH1pC1NCozDGiUEfS1X0mesLrA6_8gIydS02424242sfszZs2t2nbibX_FnOssvvPkifGbcHtz2QJwr768Bh_nHQXKkoQZwHS2bxkyXsVAbebzLtPGgqtmr1oHVSZv_nRYtz6jVK7-FGJoF8D3oWydEw",
"token_type": "Bearer",
"expires_in": 3600,
"refresh_token": "AQDkr5BfhANqpytIZhWoVCvSxSHOjp5TJfBnyUZUavF1AOYgrax-aiGEOy8S4p51SQ9jmnjmgLfIWlJwrISzpSBckGK224fswaN4HVlxacnWB_NIweqfR08JodkFobsl9GVk",
"scope": "user-read-currently-playing user-top-read"
}

Возьмите токен обновления и сохраните его. Вы будете использовать этот токен обновления на шаге 5 при запуске приложения Node.js.

Шаг 3. Клонируйте код приложения

Существует ряд файлов и каталогов, с которыми вам нужно работать для создания приложения Next.js. Вы подробно узнаете о структуре приложения Next.js и обязанностях папок и каталогов на шаге 3. На этом этапе вы клонируете готовый к использованию код приложения.

Откройте новый терминал, затем выполните следующие команды, чтобы создать новый каталог в вашей домашней папке на компьютере. Вы можете установить имя для каталога с любым именем. В этой статье давайте назовем новый каталог «Проекты».

mkdir ~/Projects
cd ~/Projects

Затем клонируйте код приложения из этого репозитория GitHub.

git clone https://github.com/cuongld2/twilio-music-info-app.git
cd twilio-music-info-app

Теперь, когда у вас есть код приложения, готовый к использованию на вашем компьютере, давайте перейдем к шагу 3, чтобы узнать, как работает разработка приложения.

Шаг 4. Просмотрите структуру кода приложения

Фреймворк Next.js поддерживает все функции библиотеки React, поскольку он был создан с использованием React. Кроме того, Next.js предоставляет другие функции, позволяющие разработчикам быстро создавать более производительные веб-приложения. Вот некоторые из функций, которые предоставляет Next.js:

• Поддержка нескольких методов рендеринга, таких как серверный рендеринг, клиентский рендеринг или предварительный рендеринг, позволяет разработчикам оптимизировать производительность приложения.
• Встроенная поддержка маршрутизации, чтобы вам не пришлось реализовывать механизм маршрутизации с нуля
• Встроенная поддержка API-маршрутизации, так что вы можете легко создавать API-интерфейсы приложений в одном коде проекта с фронтенд-сервисом.

В текущем открытом терминале выполните следующую команду, чтобы увидеть текущую структуру кода приложения:

tree

├── components
│   ├── Button.module.css
│   ├── Button.tsx
│   ├── Footer.tsx
│   ├── FramerMotion
│   │   ├── AnimatedDiv.tsx
│   │   ├── AnimatedHeading.tsx
│   │   └── AnimatedText.tsx
│   ├── MetaData.tsx
│   ├── MovieCard.tsx
│   ├── OgImage.tsx
│   ├── PageTop.tsx
│   ├── Project.tsx
│   ├── ScrollProgressBar.tsx
│   ├── ScrollToTopButton.tsx
│   ├── SnippetCard.tsx
│   ├── Stats
│   │   ├── Artist.tsx
│   │   └── Track.tsx
│   ├── Support.tsx
│   ├── SVG
│   │   ├── Ditto.tsx
│   │   ├── Flameshot.tsx
│   │   ├── Flux.tsx
│   │   ├── index.tsx
│   │   ├── MicrosoftToDo.tsx
│   │   ├── RainDrop.tsx
│   │   ├── ShareX.tsx
│   │   ├── UPI.tsx
│   │   └── Zip7.tsx
│   └── TopNavbar.tsx
├── content
│   └── FramerMotionVariants.ts
├── context
│   └── darkModeContext.tsx
├── hooks
│   ├── useScrollPercentage.ts
│   └── useWindowLocation.ts
├── layout
│   ├── Layout.tsx
├── lib
│   ├── fetcher.ts
│   ├── spotify.ts
│   ├── types.ts
│   └── windowsAnimation.ts
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── pages
│   ├── 404.tsx
│   ├── api
│   │   ├── now-playing.ts
│   │   ├── save-link.ts
│   │   └── stats
│   │    ├── artists.ts
│   │    └── tracks.ts
│   ├── _app.tsx
│   ├── _document.tsx
│   └── index.tsx
├── postcss.config.js
├── public
│   └── fonts
│    ├── Barlow
│    │   ├── Barlow-400.woff2
│    │   ├── Barlow-500.woff2
│    │   ├── Barlow-600.woff2
│    │   ├── Barlow-700.woff2
│    │   └── Barlow-800.woff2
│    ├── Inter-var.woff2
│    └── Sarina
│        └── Sarina-400.woff2
├── styles
│   └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── utils
 ├── functions.ts

Здесь много файлов, которые вам нужно переварить. Но вкратце, вы можете сгруппировать код приложения по этим категориям:

• Файлы конфигурации проекта
• Утилиты проекта
• Файлы внешних компонентов
• Файлы внешнего интерфейса
• Самодельные библиотеки для взаимодействия со сторонними зависимостями
• Файлы для определения страниц в приложении
• Файлы для создания API
• Публичные файлы для хранения общедоступных изображений, иконок
• Стили для определения глобальных стилей CSS для приложения.

Давайте узнаем о каждом из этих файлов в деталях.

1. Файлы конфигурации проекта

Файлы конфигурации проекта для приложения Next.js включают:

• Файл package.json для объявления всех зависимостей для проекта вместе с другими полезными скриптами.
• Файл `next.config.js` для общей конфигурации приложения Next.js.
• Файл tailwind.config.js определяет конфигурацию CSS tailwind для вашего приложения, поэтому вам не нужно писать свою собственную конфигурацию CSS с нуля.
• Файл tsconfig.json определяет правила конфигурации машинописного текста для проекта.

2. Утилитный файл проекта

Файл утилиты проекта для приложения Next.js, который у вас есть: utils/function.tsfile, который определяет функцию прокрутки приложения.

3. Файлы внешних компонентов

Все файлы внешних компонентов находятся в каталоге components. Здесь вы определяете каждый компонент приложения, например, у вас есть файл Button.tsx, который определяет кнопку «ОТПРАВИТЬ», когда пользователи хотят сохранить ссылки Spotify на свои адреса электронной почты.

import styles from './Button.module.css'
export function Button() {
return (
<button
type="submit"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
SUBMIT
</button>
)
}

4. Файл внешнего макета

Файл макета внешнего интерфейса — это файл layout/Layout.tsx, который определяет общий макет страницы приложения.

import React, { useState } from "react";
import TopNavbar from "../components/TopNavbar";
import ScrollToTopButton from "../components/ScrollToTopButton";
import Footer from "../components/Footer";
export default function Layout({ children }: { children: React.ReactNode }) {
const [showQR, setShowQR] = useState(false);
return (
<>
<TopNavbar />
<main>{children}</main>
<Footer setShowQR={setShowQR} showQR={showQR} />
<ScrollToTopButton />
</>
);
}

5. Самодельные библиотеки

Все библиотеки находятся в каталоге `lib`, который реализует функции для работы с другими зависимостями или предоставляет полезные пользовательские функции для приложения. Например, файл `lib/spotify.ts` определяет функции для получения токена доступа от Spotify с использованием Spotify API или получения текущей воспроизводимой песни в Spotify.

import { SpotifyAccessToken } from "./types";
const client_id = process.env.SPOTIFY_CLIENT_ID;
const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN;
const getAccessToken = async (): Promise<SpotifyAccessToken> => {

const response = await fetch("https://accounts.spotify.com/api/token", {
method: "POST",
headers: {
Authorization: `Basic ${Buffer.from(
`${client_id}:${client_secret}`
).toString("base64")}`,
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({
grant_type: "refresh_token",
refresh_token: refresh_token!,
}),
});
return response.json();
};

export const topTracks = async (): Promise<Response> => {
// Obtain an access token
const { access_token }: { access_token: string } = await getAccessToken();
console.log(access_token);
return fetch(
"https://api.spotify.com/v1/me/top/tracks?limit=10&time_range=short_term",
{
headers: {
Authorization: `Bearer ${access_token}`,
},
});
};

export const topArtists = async () => {
const { access_token } = await getAccessToken();
return fetch(
"https://api.spotify.com/v1/me/top/artists?limit=10&time_range=short_term",
{
headers: {
Authorization: `Bearer ${access_token}`,
},
});
};

export const getArtistInfo = async (artistId: string) => {
const { access_token } = await getAccessToken();
return fetch(
`https://api.spotify.com/v1/artists/${artistId}`,
{
headers: {
Authorization: `Bearer ${access_token}`,
},
}
);
}

export const currentlyPlayingSong = async () => {
const { access_token } = await getAccessToken();
return fetch("https://api.spotify.com/v1/me/player/currently-playing", {
headers: {
Authorization: `Bearer ${access_token}`,
},
});
};

6. Реализация страниц

Все страницы для приложения Next.js находятся в каталоге pages, кроме каталога pages/api, который вместо этого определяет реализацию API. В вашем приложении Next.js у вас есть страница 404 и домашняя страница, которые были определены в файлах 404.tsx и index.tsx.

7. Реализация API

Файлы реализации API находятся в каталоге pages/api. Здесь вы можете найти все реализации API, например, API, позволяющий пользователям сохранять ссылки Spotify на свой адрес электронной почты, находится в файле pages/api/save-link.ts.

import sgMail, { MailDataRequired } from '@sendgrid/mail';

function sendEmail(recipientEmail:string, htmlContent:string, mailSubject:string){
sgMail.setApiKey(process.env.SENDGRID_API_KEY!)
const msg:MailDataRequired = {
to: recipientEmail, // Change to your recipient
from: process.env.SENDGRID_EMAIL!, // Change to your verified sender
subject: mailSubject,
html: htmlContent,
}
sgMail
.send(msg)
.then(() => {
})
.catch((error) => {
console.error(error)
})
}

export default function handler(req: { body?: any; method?: any; }, res: { status: (arg0: number) => { (): any; new(): any; json: { (arg0: { message: string; }): void; new(): any; }; }; }) {
const { method } = req;
if (method === 'POST') {
const { email, mailContent } = req.body;
if (!email || !email.includes('@')) {
res.status(422).json({ message: 'Invalid email address' });
}
sendEmail(email, mailContent,`Successfully save Spotify links`)
res.status(201).json({
message: `Successfully sent email to ${email} to save Spotify links.`,
});
}
}

В Next.js путь к API будет соответствовать пути к файлу. Путь API для сохранения ссылок Spotify — «/api/save-link».

8. Общедоступные файлы

Общедоступные файлы приложения находятся в каталоге public, в котором хранится логотип приложения или общедоступные изображения, которые вы будете использовать в приложении.

9. Файл стилей

Глобальный стиль для приложения находится в файле styles/global.css, который определяет общую конфигурацию пользовательского интерфейса приложения, например размер шрифта или цвет фона.

Теперь, когда вы ознакомились со структурой приложения Next.js, давайте перейдем к тому, как запустить приложение.

Шаг 5: Запустите приложение

Чтобы запустить приложение, вам необходимо сначала предоставить учетные данные Spotify и SendGrid, чтобы ваше приложение могло подключиться к Spotify и SendGrid. Для этого создайте файл переменной среды с именем .env в корневом каталоге вашего проекта с вашими собственными значениями.

SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_secret
SPOTIFY_REFRESH_TOKEN=your_refresh_token
SENDGRID_API_KEY=your_api_key
SENDGRID_EMAIL=your_sendgrid_sender_email

Сохраните файл .env, затем выполните следующую команду, чтобы запустить приложение:

npm run dev

Приложение будет доступно на порту `3001`.

> [email protected] dev
> next dev -p 3001
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
info - Loaded env from /home/donaldle/Projects/Personal/twilio/music-theme-apps/j471n.in/.env
> [PWA] PWA support is disabled
> [PWA] PWA support is disabled
event - compiled client and server successfully in 5.7s (597 modules)
wait - compiling / (client and server)…
wait - compiling /404 (client and server)…
event - compiled client and server successfully in 539 ms (622 modules)

Давайте перейдем к следующему шагу, чтобы взаимодействовать с приложением.

Шаг 6. Взаимодействие с приложением

Откройте браузер, перейдите по адресу localhost:3001, чтобы просмотреть домашнюю страницу приложения. Здесь вы можете увидеть свои любимые песни Spotify за последние 4 недели.

Прокрутите немного вниз, вы можете увидеть любимых исполнителей за последние 4 недели.

Внизу страницы вы можете увидеть текущую воспроизводимую песню вашей учетной записи Spotify и форму для пользователей вашего приложения для отправки ссылок Spotify на их адреса электронной почты.

Давайте попробуем ввести адрес электронной почты и несколько ссылок Spotify в текстовые поля. Нажмите на кнопку «ОТПРАВИТЬ». Вскоре вы получите электронное письмо с предоставленными ссылками.

Теперь вы можете поделиться своим приложением с друзьями, чтобы вы, ребята, могли вместе обсуждать свои любимые песни и исполнителей.

Заключение

Из этой статьи вы узнали, как реализовать приложение для отслеживания действий Spotify с помощью Next.js. С помощью платформы Next.js вы можете легко создать производительное веб-приложение благодаря поддержке нескольких типов рендеринга, а также возможностям динамической маршрутизации. Благодаря интеграции приложения Next.js с SendGrid ваши пользователи смогут легко связываться с вами по электронной почте прямо из вашего приложения. Чтобы узнать больше о других вариантах использования SendGrid, посетите страницу блога SendGrid.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

• 👏 Хлопайте за историю и подписывайтесь на автора 👉
• 📰 Смотрите больше контента в публикации Level Up Coding
• 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
• 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу