Wyzwanie: napisz serwis wideo cz. 1
Przygotowałem dla Was pierwsze wyzwanie – zadaniem jest napisanie serwisu wideo zbliżonego do YouTube. W piątek, sobotę i niedzielę, umieszczę w tym wpisie film wideo z proponowanym rozwiązaniem.
To jak podejmujesz wyzwanie? 🙂 Swoim rozwiązaniem możesz podzielić się w grupie „Wymiataj w JS” na Facebooku. Jeśli masz pytania lub problemy z tym zadaniem, to również zadawaj śmiało pytania na grupie lub naszym Discordzie. I pamiętaj – nie ma głupich pytań, są tylko głupie odpowiedzi 🙂
Opis zadania
Stwórz za pomocą Reacta serwis wyświetlający Twoje ulubione filmy wideo. Na start możemy wykorzystać filmiki z YouTube albo Vimeo.
Z każdym nowym dniem, po moich podpowiedziach prawdopodobnie będziesz chciał/chciała refaktorować swój projekt. Nie krępuj się – nawet jest to wskazane 🙂
Założenia podstawowe – dane, czyli listę filmów będziemy trzymali w tej części w lokalnym pliku database.json
. Później zamienimy to na komunikację z bazą danych poprzez REST API.
Wymagania
- Stwórz nowy projekt za pomocą
create-react-app
- Pomyśl nad strukturą plików i katalogów – na razie luźno, później będziemy ją zmieniać
- Stwórz plik
database.json
, który będzie zawierał listę obiektów:
[ { "title": "Mój ulubiony filmik 1", "description": "Opis mojego ulubionego filmiku", "video_url": "Adres URL do filmu np.: https://youtu.be/Bey4XXJAqS8" }, { "title": "Mój ulubiony filmik 2", "description": "Opis mojego ulubionego filmiku 2", "video_url": "https://youtu.be/Bey4XXJAqS8" } ]
- Stwórz komponent do wyświetlania pojedyńczego filmu np.
Video
- Stwórz komponent, który będzie wyświetlał listę wideo i korzystał z komponentów
Video
np. może być to komponentVideoList
. - Osadź komponent
VideoList
w głównej aplikacji czyli wApp
- W komponencie
Video
możesz skorzystać z narzędzia do generowania adresu URL do miniaturek: np.: http://www.get-youtube-thumbnail.com/ - Do wyświetlania wideo wykorzystaj albo player HTML5 lub inną bibliotekę (np. Video.js, Plyr.io)
Pamiętaj, aby w tym zadaniu postarać się nie korzystać z routingu – tym zajmiemy się w innej części.
Filmy z podpowiedziami zostaną umieszczone w tym wpisie:
- 25.09.2020 (piątek) – godz. 10:00
- 26.09.2020 (sobota) – godz. 10:00
- 27.09.2020 (niedziela) – godz. 10:00
Powodzenia! 🙂
Przykłady rozwiązania:
Część 1 (25.09.2020)
Część 2 (26.09.2020)
Część 3 (27.09.2020)
Programuję w JavaScript po stronie przeglądarki i serwera, chętnie dzielę się wiedzą jako prelegent i trener IT oraz jestem tzw. rekruterem technicznym. Oznacza to, że podczas rozmów rekrutacyjnych sprawdzam techniczne umiejętności kandydatów ubiegających się na stanowiska Junior, Mid i Senior developerów.