Když jsem byl poprvé představen API s (Aplikační programovací rozhraní), byl jsem nadšený. Jak úžasné je, že můžeme využít sílu jedné nebo mnoha dalších aplikací ve své vlastní!? Pak jsem zkusil podat svůj první požadavek... Řekněme, že jsem dalších pár hodin strávil učením se o každých 400 je tam nějaká chyba. Jak tedy vlastně získáme API hezky odpovídat? Tento článek vás provede jednoduchým GET požadavek na YouTube Search API pomocí javascriptu a trochu JQuery . Jdeme na to!
Nastavení prostředí:
- Otevřete nové pero v CodePen
-
Přidejte Jquery do vašeho
.htmlsoubor. Budeme potřebovat Jquery abychom mohli podat naši žádost a aktualizovat několik prvků HTML, které brzy přidáme.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
Pokud máte něco proti CodePen, můžete si soubory vytvořit na místním počítači a upravit je ve svém oblíbeném textovém editoru.
-
Potřebujeme několik dalších prvků HTML, abychom mohli zobrazit data, která získáme zpět z youtube API. Přidejte do
.htmlnásledující soubor:
<iframe src=""></iframe> <h3>Video Title</h3> <p class="description">Video Description<p>
V tomto okamžiku by vaše stránka měla vypadat takto:
- Získejte klíč API. To je nezbytné pro odesílání požadavků na YouTube Data API. Požadavky bez tohoto klíče odpoví jedním z těch ošklivých 400 kódů. Přejděte do konzole pro vývojáře Google. Pokud nemáte účet, věnujte chvilku jeho založení (je to zdarma!) . Jakmile se přihlásíte, budete muset:
- Vytvořte nový projekt
- Povolte rozhraní YouTube Data API
- Vytvořte přihlašovací údaje
- Zkopírujte svůj klíč API
Zde je rychlé video, pokud chcete vidět, jak jsem získal klíč k tomuto výukovému programu:
Odeslání požadavku GET
Máme naši HTML šablonu, máme náš API klíč, teď pojďme napsat nějaký javascript. Budeme používat Ajax – funkci zabudovanou do JQuery, abychom mohli podat náš požadavek. Pojďme napsat funkci, která vytvoří GET požadavek na youtube API. V této žádosti předáme YouTube nějaké informace a řekneme jim, že chceme, aby nám poslali zpět nějaké informace o videu. S těmito informacemi budeme moci úspěšně vložit video na naši stránku!
Funkce našeho požadavku:
Do .js vložte následující soubor:
function getVideo() {
$.ajax({
type: 'GET',
url: 'https://www.googleapis.com/youtube/v3/search',
data: {
key: 'PASTE YOUR API KEY HERE',
q: "cats",
part: 'snippet',
maxResults: 1,
type: 'video',
videoEmbeddable: true,
},
success: function(data){
embedVideo(data)
},
error: function(response){
console.log("Request Failed");
}
});
}
Naše getVideo() funkce volá metodu jquery ajax . Tato zpráva přebírá objekt s některými speciálními vlastnostmi, který nám pomáhá požadovat a zpracovávat naše data. Pojďme si rozebrat vlastnosti uvnitř tohoto ajax zavolejte.
- Naše první vlastnost určuje, že vytváříme
GETžádost. - Potom nastavíme
pathdo datového rozhraní youtube API jako řetězec. - Dále definujeme
datavlastnost a vytvořte objekt, který bude obsahovat všechny potřebné parametry, které youtube potřebuje. Akeyapartvlastnosti jsou vyžadovány API. Vložte svůj nově vytvořený klíč API (v uvozovkách) a ujistěte se, že zadáváte"snippet"jako vašepart. To zajistí, že obdržíme objekt se všemi informacemi nezbytnými k vložení našeho videa. Přidal jsem několik dalších vlastností, abychom se ujistili, že získáme zpět životaschopná data. Abych získal zpět pouze jedno video, nastavil jsemmaxResultsna1.typeavideoEmbeddablezajistit, že dostanu zpět data pro video, které lze skutečně vložit na web. Neváhejte a prohlédněte si dokumentaci k vyhledávání na youtube, abyste viděli všechny možnosti, které můžete do datového objektu vložit. successzavolá funkci s daty, které obdržíme zpět z našehoGETžádost.ajaxmetoda bude magicky čekat, až obdržíme data, než zavolá funkci. Během chvilky vypíšemeembedVideofunkce uvnitř, takže jen vydržte!- Nakonec přiřadíme
errorna funkci, která zaznamená odpověď serveru, pokud je neúspěšná.
Použití údajů přijatých z naší žádosti
Je čas zjistit, jestli se nám něco vrátí! Přidejte následující kód, abyste zpracovali úspěšný požadavek a vykreslili některá data do DOM .
Přidejte následující do .js soubor:
function embedVideo(data) {
$('iframe').attr('src', 'https://www.youtube.com/embed/' + data.items[0].id.videoId)
$('h3').text(data.items[0].snippet.title)
$('.description').text(data.items[0].snippet.description)
}
data je nám vrácen naším ajax zprávu jako pole. V prvním řádku uvnitř naší funkce používáme jquery vyberte naše iframe a aktualizujte src atribut. Chcete-li vložit video, musíte zadat 'https://www.youtube.com/embed/' + jedinečný videoId ke kterým můžeme přistupovat v rámci datového pole z naší žádosti. Protože přijímáme pouze jedno video, přistupujeme k indexu 0 pomocí data.items[0] poté přistoupíme k id vlastnost a nakonec videoId vlastnictví. Docela vrtání, ale očekávejte to při práci s většinou API. Následující dva řádky používají podobné procházení datového pole k získání názvu a popisu videa a aktualizují h3 a p text na DOM .
Dokončujeme!
Dále zkontrolujte, zda jste vložili klíč API do getVideo funkce!!
Udělejme naši žádost! Musíme zavolat naše getVideo funkce. Přidejte následující vyvolání funkce na konec .js soubor:
getVideo();
V tuto chvíli by vaše aplikace měla vypadat následovně:
Zkuste změnit q řetězec uvnitř vašeho ajax požádat a sledovat aktualizaci aplikace na nové video! Docela cool, že? Pokud chcete vidět celý kód pohromadě, podívejte se na aplikaci na CodePen. Vytáhl(a) jsem klíč datového rozhraní API youtube takže se ujistěte, že jste vložili ten svůj, abyste skutečně viděli některá zobrazená data!
Pokud jste se dostali až sem, doufejme, že se budete cítit o něco méně ztraceni při vytváření požadavků na rozhraní API. Až příště!
Avery
Odkaz na můj CodePen pro tento příspěvek, pokud jej chcete forkovat