Zadanie
Čo klient chcel
- Ukázať aktuálne videá a živé vysielania bez ručného dopĺňania
- Rýchle načítanie bez prekročenia limitov YouTube
- Jednoduché ovládanie aj pre bežného diváka
Výzva
S čím klient prišiel
Streamline, s. r. o. vyrába od roku 1996 televízne relácie, dokumenty, reklamy a eventy a čoraz viac aj online vysielania. Nové videá pribúdajú na YouTube a web ich mal ukazovať bez toho, aby ich niekto musel ručne dopĺňať.
YouTube Data API (rozhranie, cez ktoré web číta údaje z YouTube) má denný limit požiadaviek. Web, ktorý by sa naň pýtal pri každej návšteve, by limit rýchlo vyčerpal a spomalil sa.
Riešenie
Čo sme urobili a prečo
Galéria, ktorá sa plní sama. Web cez YouTube Data API v3 načíta videá z kanála (názov, popis, náhľad, dátum, dĺžku a počet zhliadnutí) a zobrazí ich ako prehľadné karty.
Šetrenie limitov. Odpovede z YouTube sa ukladajú do JSON cache (dočasnej kópie na serveri). Web sa na YouTube pýta len raz za čas, nie pri každej návšteve, takže je rýchly a limit API nevyčerpá.
Pohodlné prezeranie. Videá sa dajú zoradiť na najnovšie, najsledovanejšie a najstaršie a ďalšie sa načítajú tlačidlom. Prehrávajú sa cez youtube-nocookie.com, teda bez sledovacích cookies YouTube, kým divák video nespustí.
Živé a plánované vysielania. Prehľad zobrazuje aj živé a plánované streamy a ich stav sa aktualizuje automaticky.
Tmavý režim. Web má prepínač svetlého a tmavého vzhľadu.
Dodávka
Čo klient dostal
- Web s prehľadom videí, živých aj plánovaných vysielaní
- Napojenie na YouTube Data API v3 s JSON cache
- Zoradenie podľa dátumu a sledovanosti, načítanie ďalších videí
- Prehrávanie bez sledovacích cookies do spustenia videa
- Responzívne rozhranie so svetlým a tmavým režimom
- Automatickú aktualizáciu stavu vysielaní
Výsledky
Čo sa dá overiť
Priebeh
Ako projekt prebiehal (2 týždne)
-
Návrh
Prehľad videí z pohľadu diváka a tok dát z YouTube.
-
Vývoj
Web, PHP backend, napojenie na YouTube Data API a cache.
-
Spustenie
Nasadenie a ladenie rýchlosti.
Technológie
Na čom to beží
- YouTube Data API v3
- oficiálne rozhranie YouTube, z ktorého web číta videá
- JSON cache
- dočasná kópia údajov, vďaka ktorej je web rýchly a šetrí limity
- PHP
- načítanie a spracovanie videí na serveri
- Tailwind CSS
- vzhľad so svetlým a tmavým režimom
Galéria
Ukážky
(otvorí obrázok v plnej veľkosti v novom okne)
(otvorí obrázok v plnej veľkosti v novom okne)