Получение треков

В этом примере покажем, как получить список музыки с iTunes API, с помощью библиотеки @app/request

Основные шаги

Так как мы ранее научились создавать экраны, то перейдем сразу к сути и начнем с импорта библиотек.

Импорт библиотек

import {request} from '@app/request';

Импортируем функцию request из библиотеки @app/request, которая используется для выполнения запросов к внешним API.

Получение данных с iTunes API

const response = await reequest.get(`https://itunes.apple.com/search?&term=rock`);
const results = response.body.results;

В этом коде мы используем метод get, чтобы сделать запрос по адресу https://itunes.apple.com/search?&term=rock и, получив данные, сохраняем в переменную results.

Давайте выполним запрос первого элемента и посмотрим что у нас в логах

const results = response.body.results[0];
ctx.log(results)

{
"wrapperType": "track",
"kind": "song",
"artistId": 486597,
"collectionId": 169003304,
"trackId": 169003415,
"artistName": "Journey",
"collectionName": "Greatest Hits (2024 Remaster)",
"trackName": "Don't Stop Believin' (2024 Remaster)",
"collectionCensoredName": "Greatest Hits (2024 Remaster)",
"trackCensoredName": "Don't Stop Believin' (2024 Remaster)",
"artistViewUrl": "https://music.apple.com/us/artist/journey/486597?uo=4",
"collectionViewUrl": "https://music.apple.com/us/album/dont-stop-believin-2024-remaster/169003304?i=169003415&uo=4",
"trackViewUrl": "https://music.apple.com/us/album/dont-stop-believin-2024-remaster/169003304?i=169003415&uo=4",
"previewUrl": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview126/v4/5c/72/97/5c72974f-6022-f760-ad82-35964fb636b5/mzaf_12752096049347330756.plus.aac.p.m4a",
"artworkUrl30": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/30x30bb.jpg",
"artworkUrl60": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/60x60bb.jpg",
"artworkUrl100": "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/71/2d/61/712d617d-f4a4-5904-1b11-d4b4b45c47c5/828768588925.jpg/100x100bb.jpg",
"collectionPrice": 10.99,
"trackPrice": 1.29,
"releaseDate": "1981-06-03T07:00:00Z",
"collectionExplicitness": "notExplicit",
"trackExplicitness": "notExplicit",
"discCount": 1,
"discNumber": 1,
"trackCount": 16,
"trackNumber": 2,
"trackTimeMillis": 250835,
"country": "USA",
"currency": "USD",
"primaryGenreName": "Rock",
"isStreamable": true
}

В этом логе мы видим список песен с ключами такими как:

• название песни
• исполнитель
• жанр
• URL иконок
• цена и тд.

Мы научились делать запросы по API и получать объекты, теперь отрисуем элементы на странице.

Список треков

Выведим список треков на главный экран.

import { request } from '@app/request'

app.screen('/', async (ctx, req) => {
  const response = await request.get(`https://itunes.apple.com/search?&term=rock`)
  const results = response.body.results

  return (
    <screen title="audioplayer">
      {results.map(item => (
        <list-item
          icon={{ url: item.artworkUrl100}}
          content={{ title: item.trackName, subTitle: item.artistName }}
        />
      ))}
    </screen>
  )
})

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

• icon - иконка, которая подтягивается из artworkUrl100
• content
  • title - trackName название песен.
  • subTitle - artistName имя исполнителя.

Добавим стилей и у нас должно получиться следующее:

В следующем примере мы покажем как открывать и воиспроизводить треки: "Как создать плеер?".