Направите апликацију за претрагу музике са Реацт и Спотифи АПИ-јем

Спотифи је потпуно променио начин на који преносимо музику помоћу каталога који садржи милионе песама, албума и плејлиста.

Користећи његов веб АПИ, можете учинити своје Спотифи искуство још забавнијим тако што ћете направити сопствену Реацт апликацију за претрагу музике. АПИ пружа приступ низу музичких података које можете користити да направите прилагођену музичку апликацију и прилагодите је својим укусима.

Спотифи за програмере

Спотифи нуди широк спектар функција за стримовање музике као што су претрага, репродукција ван мреже и персонализоване препоруке. Платформа Спотифи за програмере пружа приступ АПИ-јима и СДК-овима који покрећу ове функције. У овом водичу ћете истражити веб АПИ и научити како да га интегришете у своју Реацт апликацију да бисте тражили песме које вам се свиђају.

Региструјте се за налог

Да бисте започели, морате да имате Спотифи налог. Ако га већ немате, посетите га

Региструјте своју апликацију

Када се пријавите на конзолу за програмере, региструјте своју апликацију да бисте добили приступ веб АПИ-ју. На страници контролне табле кликните на Креирајте апликацију дугме, попуните назив и опис и на крају прихватите услове и одредбе за креирање апликације.

На крају, кликните на Измена подешавања дугме да бисте променили подешавања УРЛ-а за преусмеравање. Пошто је ваша апликација још увек у развојном режиму, додајте http://localhost: 3000 као УРЛ за преусмеравање. Ово је УРЛ на који желите да преусмерите корисника након што се аутентификују помоћу Спотифи-а.

Након регистрације ваше апликације, Спотифи ће вам пружити ваш јединствени ИД клијента и тајне клијента које можете користити за:

• Додајте ток Спотифи аутентификације да бисте се пријавили са својим Спотифи акредитивима у вашој Реацт апликацији.
• Набавите свој јединствени токен за приступ да бисте слали захтеве различитим крајњим тачкама веб АПИ-ја, укључујући претрагу података као што су нумере или албуми.

Подесите Реацт Цлиент

Направите Реацт апликацију и идите до основног директоријума и креирајте нову датотеку, .енв, да подесите неке променљиве окружења. ИД клијента можете добити са контролне табле за програмере Спотифи.

РЕАЦТ_АПП_СПОТИФИ_ЦЛИЕНТ_ИД = "ИД вашег клијента"
РЕАЦТ_АПП_СПОТИФИ_РЕДИРЕЦТ_УРИ = " http://localhost: 3000"
РЕАЦТ_АПП_СПОТИФИ_АУТХ_ЕНДПОИНТ = " https://accounts.spotify.com/authorize"
РЕАЦТ_АПП_СПОТИФИ_РЕСПОНСЕ_ТИПЕ = "жетон"

Инсталирајте потребне пакете

Инсталирајте Акиос. Користићете његове методе за прављење ХТТП захтева ка Спотифи-овом веб АПИ-ју.

нпм инсталл акиос

Додајте Спотифи-јев ток рада за аутентификацију

Спотифи наводи да сви захтеви ка било којој крајњој тачки Веб АПИ-ја имају важећи приступни токен у заглављу захтева. Да бисте добили токен за приступ, ваша апликација мора прво да се аутентификује помоћу Спотифи-а.

Спотифи подржава неколико аутентификација и ауторизацијаметоде као што су ауторизациони код, клијентски акредитиви или имплицитне методе доделе.

Најједноставнији за имплементацију је имплицитни метод давања који захтева да апликација шаље захтеве крајњој тачки аутентификације (додали сте ово у ЕНВ датотеци), прелазећи преко вашег ИД-а клијента. Након успешне аутентификације, Спотифи ће одговорити пружањем токена за приступ који истиче током одређеног периода.

Отворите датотеку срц/Апп.јс, избришите шаблон Реацт кода и додајте код испод:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз Сеарцхер из'./цомпонентс/Сеарцхер';
функцијаАпликација() {
конст ЦЛИЕНТ_ИД=процесс.енв. РЕАЦТ_АПП_СПОТИФИ_ЦЛИЕНТ_ИД
конст РЕДИРЕЦТ_УРИ =процесс.енв. РЕАЦТ_АПП_СПОТИФИ_РЕДИРЕЦТ_УРИ 
конст АУТХ_ЕНДПОИНТ =процесс.енв. РЕАЦТ_АПП_СПОТИФИ_АУТХ_ЕНДПОИНТ 
конст РЕСПОНСЕ_ТИПЕ = процесс.енв. РЕАЦТ_АПП_СПОТИФИ_РЕСПОНСЕ_ТИПЕ
конст [токен, сетТокен] = усеСтате("");
 усеЕффецт(() => { 
конст хасх = прозор.лоцатион.хасх;
дозволити токен = прозор.лоцалСтораге.гетИтем("жетон");

ако (хеш && хеш) {
 токен = хасх.субстринг(1).разделити("&").нађи(елем => елем.стартсВитх("аццесс_токен")).разделити("=")[1];
прозор.лоцатион.хасх = "";
прозор.лоцалСтораге.сетИтем("жетон", токен);
 }
 сетТокен (жетон)
 }, [])
конст одјава = () => {
 сетТокен("");
прозор.лоцалСтораге.ремовеИтем("жетон");
 }
повратак (

"Апликација">
„Заглавље апликације“>
"СеарцхЦонтаинер">
Сеарцхли</h2>
 {!токен? 


`${АУТХ_ЕНДПОИНТ}?цлиент_ид=${ЦЛИЕНТ_ИД}&редирецт_ури=${РЕДИРЕЦТ_УРИ}&респонсе_типе=${РЕСПОНСЕ_ТИПЕ}`}>
 Пријавите се на Спотифи
 </a>
 </div> 
 :



"одјавити се"онЦлицк={логоут}>Одјава</button> 
 </div 
 }
 </div>
 </header>
 </div>
 );
}




извозУобичајено Апликација;

Хајде да то разложимо:

• Ова компонента условно приказује компоненту претраге и дугме за одјаву, ако је приступни токен је присутан у супротном, он приказује див са везом која упућује корисника на Спотифи овлашћење страна. Веза садржи параметре упита који одређују вредности ЦЛИЕНТ_ИД, РЕДИРЕЦТ_УРИ и РЕСПОНСЕ_ТИПЕ.
• Када сте аутентификовали корисника, позовите усеЕффецт куку да покренете блок кода када се компонента монтира. Овај блок кода преузима приступни токен из хеша УРЛ-а и поставља га као нову вредност променљиве стања токена. Такође чува токен у локалном складишту да би опстао у стању аутентификације.
• Са приступним токеном који је ускладиштен у стању, он се прослеђује као подршка компоненти Сеарцхер-а за слање захтева за Спотифи веб АПИ.
• Да бисте се одјавили, код једноставно уклања приступни токен из локалне меморије и поставља стање токена на празан низ.

Имплементирајте функцију претраживања и рендерирајте резултате

У директоријуму /срц креирајте нову фасциклу и назовите је компоненте. Унутар ове фасцикле направите нову датотеку: Сеарцхер.јс и додајте код испод.

увоз Реагујте, {усеСтате, усеЕффецт} из'реаговати'
увоз акиос из'акиос';
функцијаСеарцхер(реквизити) {
конст [сеарцхКеи, сетСеарцхКеи] = усеСтате("")
конст [трацкс, сетТрацкс] = усеСтате([])

конст аццесс_токен = пропс.токен

конст сеарцхАртист = асинц () => {
конст {подаци} = чекати акиос.гет(" https://api.spotify.com/v1/search", {
 заглавља: ​​{
'Тип садржаја': "апплицатион/јсон",
'Овлашћење': `Носилац ${аццесс_токен}`
 },
 параметри: {
 к: тастер за претрагу,
 тип: "уметник"
 }
 })

вар артистИД = дата.артистс.итемс[0].ид
вар артистТрацкс = чекати акиос.гет(` https://api.spotify.com/v1/artists/${артистИД}/top-tracks`, {
 заглавља: ​​{
 Овлашћење: `Носилац ${аццесс_токен}`
 },
 параметри: {
 граница: 10,
 тржиште: 'САД'
 }
 })
 сетТрацкс (артистТрацкс.дата.трацкс);
 }
повратак (
 <>

"Формулар за претрагу">
 цлассНаме ="име"
 типе="текст"
 плацехолдер=„Тражи по имену извођача...“
 онЦханге={(е) => {сетСеарцхКеи (е.таргет.валуе)}}

 />
Сеарцх</button> 
 </div>
 {
 трацкс.слице(0, 5).Мапа(трацк => (




 {трацк.наме}</li>
 </ul>
 </div>
 ))
 }
 </> 
 )
}


извозУобичајено Сеарцхер

Хајде да то разложимо:

• Компонента дефинише константу аццесс_токен коју поставља на својство токена које се преноси као проп. Касније прослеђује овај токен у заглављу АПИ захтева до крајње тачке АПИ-ја за претрагу Спотифи-а.
• Дефинишите два стања: кључ за претрагу и трагове. СеарцхКеи стање садржи тренутну вредност уноса за претрагу. Стање нумера садржи низ од 10 најбољих песама за извођача које ће Спотифи претрага вратити.
• СеарцхАртист функција упућује ГЕТ захтев АПИ-ју Спотифи за претрагу података уметника на основу вредности сеарцхКеи.
• Затим извлачи ИД извођача из података одговора и прави још један ГЕТ захтев за преузимање најбољих нумера за тог извођача. Из података о одговорима издваја првих 10 нумера и поставља променљиву нумера.
• Компонента враћа поље за унос и дугме за претрагу. Када корисник кликне на дугме за претрагу, он позива функцију сеарцхАртист да преузме и прикаже најбоље нумере за одређеног извођача. Коначно, користи функцију мапе да прикаже првих пет нумера у низу трагова као листу.

Покрените развојни сервер да ажурирате промене, а затим пређите на http://localhost: 3000 у вашем претраживачу да бисте видели резултате.

Прилагодите своју апликацију помоћу функција Спотифи-а

У овом водичу су истакнути кораци потребни за упућивање захтева веб АПИ-ју Спотифаја за претрагу музичких података извођача. Међутим, можете учинити више са Спотифи-овим функцијама које пружају његови СДК-ови и АПИ-ји, као што је интеграција његовог плејера за веб репродукцију са истим изгледом и осећајем као на Спотифи-у.

Предност Спотифи-ових СДК-ова и АПИ-ја је у томе што су богати функцијама и можете их лако интегрисати у било коју веб или мобилну апликацију.