Szybkie i Nowoczesne Strony
4 godz. 29 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorI tak i nie! Gatsby to faktycznie React wzbogacony o pewne supermoce. Na początku kursu dowiesz się, jak poprawnie ich używać. Opowiem Ci w jaki sposób zaszyto Reach Router we wnętrze Gatsbyego – zobaczysz, że to bardzo intuicyjne i wygodne rozwiązanie. Ponadto opowiem Ci, w jaki sposób tworzyć uniwersalne, globalne style i layouty dla naszej aplikacji, aby zaoszczędzić sobie pracy. W tym wszystkim pomogą nam pluginy przygotowane specjalnie dla Gatsbyego (psst! Czy wiesz, że Gatsby posiada ich ponad 1500?).
Nie masz konta na fejsie? Nie szkodzi! Facebook stworzył nie tylko popularną platformę społecznością (i Reacta 😎), ale także przełomową specyfikację dla GraphQL – języka służącego do komunikacji między klientem a serwerem. To właśnie GraphQL zasila Gatsbyego w warstwę danych. Nie ważne czy mówimy o obrazkach, plikach markdown, json, yaml czy po prostu API – aby to wszystko ze sobą pogodzić musisz znać GraphQL. A ja w tym kursie pokażę Ci, że korzystanie z niego to czysta przyjemność.
Na początku pomysł importowania obrazów przez GraphQL może Ci się wydawać przerostem formy nad treścią. Dlatego poświęciłem w tym kursie cały dział na to, aby pokazać Ci, jak potężne możliwości stoją przed developerem wyposażonym w GraphQL, Sharp Image Transformer oraz Gatsbyego. Zapomnij o skalowaniu, przerabianiu i dostosowywaniu obrazków ręcznie w programach graficznych. Sprytne rozwiązania w Gatsbym pozwolą Ci za pomocą paru linijek zoptymalizować zasoby wizualne dla twojej strony.
Zarządzanie treścią to krytyczny punkt wielu produktów cyfrowych – z jednej strony CMS (content management system) musi być użyteczny dla developera przygotowującego całą strukturę treści, ale z drugiej strony ich końcowym użytkownikiem zawsze jest edytor, który nie musi znać się na programowaniu. W tym kursie pokażę Ci, jak w dosłownie kilku krokach stworzyć wygodną w użyciu strukturę dla bloga w oparciu o pliki markdown. Z małym udziwnieniem. Będą to pliki MDX łączące prostotę plików markdown z potężnymi możliwościami Reacta.
HeadlessCMS to podejście, które może przywoływać na myśl horrory klasy B, natomiast ich działanie przyprawia o zachwyt rodem z komedii romantycznej. Gdy zobaczysz jak proste, intuicyjne i wygodne (zarówno dla developera i edytora) jest korzystanie z podejścia headless, już nigdy nie wrócisz do klasycznych CMS-ów. W tym kursie pokażę Ci to na przykładzie fenomenalnego produktu jakim jest DatoCMS, którego odkryłem podczas budowania dużej struktury informacji dla strony mojej firmy.
Deployment strony w Gatsbym zajmuje dosłownie kilka sekund, zwłaszcza jeśli użyjemy do tego odpowiednich narzędzi. W tym kursie dowiesz się, w jaki sposób Gatsby przygotowuje zasoby przed wysłaniem ich na serwer, skąd biorą się dane w Gatsbym oraz w jaki sposób wdrożyć gotową stronę za pomocą serwisu Netlify.
Ten kurs powstał z myślą o osobach, które chcą być na bieżąco ze zmieniającym się ekosystemem frontendowym. Kurs koncentruje się nie tylko na Gatsby.js, ale także na technologiach orbitujących wokół tej technologii, korespondujących z nowym trendem nazwanym JAMStack.
2.19.12+
Okej zaczynamy kolejny rozdział tym razem posłużymy się headless cms
do stworzenia podobnej struktury jak wcześniej zrobiliśmy za pomocą mdx
i zanim w ogóle zaczniemy robić cokolwiek w data cms bo ten
cms wybrałem w tym kursie to muszę ci tak pokrótce opowiedzieć czym jest w ogóle headless
cms i jeśli chcesz to może wejść sobie na ten link który
będzie załączony do tej lekcji tutaj jest wyjaśnione tak do szczegółowo
czym w ogóle jest headless cms czym jest decoupled cms czym
to się różni od tych klasycznych cms ja natomiast chciałbym tylko powiedzieć tak bardzo krótko
bardzo szybko że headless cms to jest takie nowe podejście w tworzeniu kontentu
które polega na tym że nie mamy z tym cms spiętego żadnego
frontendu w taki sposób że cms będzie determinował tak naprawdę layout
wygląd i tak dalej oczywiście może to robić do pewnego stopnia ale
za taki klasyczny cms uważa się na przykład wordpress gdzie
z jednej strony tworzymy content ale ten content natychmiast jest osadzony w jakimś
layout'cie ponieważ przykład za pomocą gutenberga czyli tego buildera
wbudowanego w wordpress tworzymy od razu layout naszego artykułu naszej
strony i później ona przez tego wordpressa jest renderowana natomiast headless
cms to jest takie typowe api to jest to się nazywa baas czyli
czyli to jest po prsotu nasz backend którego sami
nie musimy pisać natomiast możemy w nim tworzyć pewne modele danych
pewne później dane które następnie możemy sobie pobierać za pomocą wygodnego api
i to co jest właśnie fajne w datocms robiłem bardzo długi reasearch na
temat cms generalnie przeszedłem przez content full przez graph cms
przez właśnie jeszcze kilka innych takich popularnych headless cms
i ostatecznie wylądowałem na datocms ponieważ
uważam że jest najlżejszy jeśli chodzi o interfejs jest najbardziej intuicyjny
najszybszy a co więcej zawiera jeden taki
killer feature moim zdaniem który po prostu sprawia że ten cms jest
najlepszy ze wszystkich jaki widziałem do tej pory inne go nie mają dlatego to jest dla mnie istotne
i pokażę ci za chwilkę jaki feature mi chodzi tylko najpierw załóżmy sobie konto w
momencie kiedy wykonujesz ten kurs możliwe że trochę będzie to inaczej wyglądać ale
tym się za bardzo nie przejmujemy więc po prostu stwórzmy sobie jakieś konto ja
stworzę konto fejkowe żeby po prostu pokazać w tym kursie jak to działa rejestracja
nie powinna tutaj sprawdzić żadnego problemu więc jeśli już przejdziemy do tego panelu tego
dashboardu gdzie możemy tworzyć sobie nowe projekty to nie pozostaje nam nic innego jak stworzyć po
prostu pusty projekt możemy go nazwać hatta website
jak
zobaczysz zostaniemy przeniesieni do innej strony z odrębnym
adresem i to będzie od tej pory nasz panel admina więc nie musimy już później
wchodzić do dotacms jakoś się tam logować wystarczy że wejdziemy sobie tutaj podamy
kredki czyli credential to jest taki skrót czyli login i hasło i będziemy
zalogowani i kiedy już wylądujemy w tym cms to możemy
się tutaj trochę porozglądać zobaczyć co my tutaj mamy pierwsze co może wpaść ci
w oko to graphql znany i lubiany z niego będziemy korzystać
trochę później najpierw musimy stworzyć jakiś model po prostu możemy sobie tutaj
parę rzeczy poustawiać mamy całkiem sporą dowolność jeśli chodzi o interface
co jest mega spoko i też to bardzo lubię że mogę sobie na przykład dobrać jakiś kolor
który na przykład mniej mnie razi w oczy niż ten czerwony z samego początku
więc no to jest taka pierdoła oczywiście mamy tutaj informacje
dotyczące naszego planu możemy zobaczyć czy nie wyczerpaliśmy jakiegoś limitu
czy generalnie wszystko trzymany w ryzach w tym darmowym planie jeśli
będziemy się zbliżać do jakiegoś tam limitu no to jest to znak ostrzegawczy
dla nas że trzeba jednak dokupić ten kolejny plan on jest chyba za 15 dolarów
ja w ogóle to tak brzmi trochę jak reklama ja naprawdę lubię ten cms po prostu tutaj nikt
mnie nie przekupił żebym jakoś w jakiś sposób reklamował jest to po prostu dobry produkt z
racji że mamy tutaj 1000 rekordów to jednak chwilkę nam zajmie żeby to wykorzystać
jeśli chodzi o traffic to mamy tutaj 10 gb i przypominam
że gatsby tworzy statyczną stronę i zaciąga dane z cms
tylko podczas build więc to nie będzie tak że ktoś wejdzie na naszą stronę to będzie pobierać jakieś
dane więc nie za bardzo musimy się tym traffic'iem przejmować dość ciężko będzie go wykorzystać
w miesiąc jedyne co może nas tutaj zainteresować co jest takim
sporym ograniczaniem to jest 15 modeli które możemy stworzyć i
jeśli tworzymy jakąś dużo bardziej skomplikowaną strukturę danych to
to 15 modeli może być niewystarczające ale skoro już przy modelach jesteśmy
to zobaczmy co możemy tutaj zrobić stwórzmy sobie jakikolwiek model
na razie nazwijmy go na przykład article dobry pomysł od razu nam tutaj
podpowiedziało zresztą mamy artykuły na naszej stronie więc w sumie to jest naprawdę
dobry pomysł zapiszmy sobie ten model i
teraz możemy do tego modelu dodawać nowe pola zaraz pokażę ci
w praktyce jak wygląda wpisywanie później kontentu do takiego modelu na razie
sobie stwórzmy właśnie model to jest taka forma to jest taki
po prostu do odlewania taka forma żeby tworzyć kolejne instancje danego
modelu nie więc stwórzmy sobie tak najpierw tytuł tytuł
zawsze jest krótki do tego wybierzemy sobie
single line string możemy go nazwać title musimy
powiedzieć że jest required na bo każdy artykuł musi mieć jakiś tytuł możemy
powiedzieć że jest to unikalne pole wtedy nie zrobimy tak że będzie takie same
tytuły a wiemy na przykład że pobieramy na podstawie
sluga który jest stworzony w oparciu o tytuł pewne dane więc
lepiej żeby te tytuły tytuły faktycznie były unikalne więc wtedy jeśli jakiś edytor
na przykład chciałby dodać kolejny tytuł który jest taki sam jak jakiś inny w naszej
bazie danych no to wtedy dostanie informacje słuchaj już taki tytuł istnieje lepiej go nazwij
jakoś inaczej limitu znaków nie musimy dawać tutaj
na razie wszystko jest okej dobra
myślę że możemy to tak zapisać kolejnym polem które myślę że musimy dodać
jest author tutaj musimy zrobić required
no bo wiadomo że każdy artykuł ma swojego autora nie
musi być to unikalne pole ponieważ mamy takich samych autorów czasami możemy tutaj nawet
dodać default value abigail donutdough
bo to jest nasza główna autorka
i raczej nie będzie tak że na blogu takim autorskim dla jakiejś konkretnej firmy
będą pisać różne osoby więc w razie gdyby to się zmieniło na to można
zawsze to podmienić ale żeby nie trzeba było tego za każdym razem wpisywać to ta wartość
zawsze będzie już wpisana na samym początku i teraz opowiem
ci w tym momencie jak wyglądały modele w innych cms
i co mnie strasznie denerwowało załóżmy że na przykład mieliśmy featured image
albo jakiś obrazek po prostu nazwijmy go na przykład tak
już pal licho te dodatkowe pola i mieliśmy na przykład później jakiś tekst tutaj
wybierzmy sobie tekst ten dłuższy możemy tutaj wybrać również sposób
w jaki będziemy go pisać ja chcę żeby to było simple text area ponieważ całe stylowanie będzie
po prostu zrobione na froncie ale oprócz tego mieliśmy
jeszcze markdown editor i html editor więc jeśli chcielibyśmy markdown wyrenderować
to też jest możliwe ale my zostaniemy przy tym najprostszym i tutaj na przykład możemy
wpisać sobie paragraf i teraz spróbujmy
sobie napisać coś w tym modelu jakiś kontent więc przejdziemy
sobie do zakładki content tutaj już widzimy że nasz artykuł jest
gotowy do wypełnienia i możemy stworzyć sobie nowy rekord rekord
czyli właśnie jakąś instancję danego modelu nazwijmy
go dine and design bo mamy taki artykuł autorka jest
wpisana wcześniej możemy dodać jakiś nowy obrazek i możemy tutaj zacząć
pisać sobie ja sobie skopiuję z naszej strony po prostu
to co mieliśmy wcześniej tu wpisane i zapisuje to i
teraz w taki sposób będziemy mogli później dostawać dane do
naszego gatsby w sensie przejdźmy sobie do api explorera i spróbujmy
zaciągnąć ten artykuł jak widzisz pojawiły
się tutaj od razu podobne query jak mieliśmy w graphql w gatsby mamy article
i all articles więc możemy wziąć sobie all articles i
weźmy sobie faktycznie title featured
image author i paragraph tutaj
jeszcze możemy sobie wyciągnąć widzę z tego featured image
na przykład url dobra i w taki sposób będziemy
dostawać te dane ale problem polega na tym że tworzenie
contentu to nie jest takie tworzenie z jakiejś kalki która zawsze wygląda tak
samo ja bardzo nie lubię czegoś takiego że edytor ma narzucone że może
dodać tylko 1 obrazek 1 paragraf i tak dalej uważam że to nie
jest do końca fajne i uważam że na przykład powinno być coś takiego że możemy
w artykule dodawać na przykład kilka paragrafów w różnej kolejności możemy
zmieniać ich kolejność możemy dodawać między nimi jakieś zdjęcia możemy dodawać
jakieś śródtytuły na przykład na tym to wszystko polega i oczywiście można by
było wykorzystać do tego jakiś rich text editor który zaraz ci pokażę jak wygląda
modele mamy zawsze w settings więc wrócimy sobie teraz tutaj i jeśli mielibyśmy
tutaj na przykład html editor wrócimy
sobie do kontentu to
zobaczysz że możemy tutaj dodawać faktycznie obrazki i później byśmy mieli
po prostu wyrenderowany html z tego pola problem polega na tym że to
nie cms ma renderować tego html tylko gatsby ma go renderować więc
nie chcemy żeby coś ingerowało aż tak bardzo w to jak będzie wyglądał
finalny kod naszego artykułu za to odpowiada front a cms
ma nam dostarczać tylko dane dlatego ja bardzo lubię takie podejście gdzie
edytor ma jak najmniej rzeczy do manipulowania wyglądem a jak najwięcej
do po prostu manipulowania tym co ma robić czyli pisania tekstu czy dodawanie obrazków
bo wiadomo że edytorzy często nie są osobami technicznymi więc nie
można od nich oczekiwać że rozumieją na przykład co może zepsuć html w
edytorze html dlatego ja wychodzę z założenia że to
co zrobiło datocms jest tutaj naprawdę spoko zobacz mamy tutaj coś takiego
jak modular content stwórzmy sobie tutaj po prostu article
content na przykład tutaj
na razie nic nie musimy dodawać usuśmy sobie ten
paragraf featured image możemy zostawić ponieważ to będzie
ten obrazek do thumbnail czyli do miniaturki natomiast tutaj zrobimy
sobie jeszcze jedną rzecz zauważ że pod article content pojawił się
nowy guzik który jest jakby zagnieżdżony modular blocks
to się nazywa i możemy tutaj dodać sobie na przykład paragraf i
paragraf może zawierać paragraph
content możemy sobie tutaj ustawić znowu simple text area i
na razie tutaj nic więcej nie musimy dawać
kolejnym blokiem których chcielibyśmy dodawać jest na przykład śródtytuł więc załóżmy
że to będzie heading po prostu i tutaj znowu musimy zagnieździć heading
content oczywiście to jak ja to robię to jest jakby tylko propozycja
można te strukturę troszkę inaczej jeszcze zrobić ale załóżmy że ona jest w miarę słuszna
i na przykład trzecim blokiem który chcemy dodawać jest article
image i wewnątrz tego bloku możemy zrobić
na przykład image data i w ten sposób przygotowaliśmy sobie
coś co się właśnie nazywa modular content w wordpressie często to
można na przykład spotkać pod nazwą repeater więc teraz przejdźmy sobie do naszego
artykułu i zobaczmy co my tutaj mamy to
co mieliśmy wcześniej wpisane oczywiście zostało to co jest tutaj nowe to to że możemy dodawać
sobie na przykład heading skopiujemy sobie nasz heading
później możemy dodać na przykład paragraph
widzę że paragraph źle zapisałem wracamy
bardzo fajne to jest też w tym cms że bardzo łatwo można nanosić
zmiany do modeli w innych cms bywało to dość kłopotliwe i zajmowało
chwilkę więc propsy multi paragraph text a nie
jest okej wracamy do contentu wklejamy
tutaj to co mieliśmy jako content
i na przykład chcemy dodać jeszcze teraz jakiś obrazek widzę
że tutaj obrazek wrzuciłem jako single line string oczywiście to jest niepoprawne to
ma być media single asset image
data dobra podczas tworzenia tego
contentu często właśnie takie pomyłki się zdarzają właśnie fajne żeby mieć
możliwość szybkiego naprawienia tego co zepsuliśmy na
przykład dodajmy jeszcze jeden paragraf załóżmy że on będzie taki sam jak ten dobra
i stworzyliśmy sobie strukturę naszego artykułu widzimy że mamy tutaj coś
takiego jak tytuł autora featured image później mamy jakiś tam
śródtytuł mamy paragraf mamy obrazek mamy kolejny paragraf
i to co jest właśnie fajne to to że możemy zamieniać kolejność tych rzeczy na przykład
możemy to przesunąć do góry możemy to na przykład przesunąć na dół jeśli chcemy
śródtytuł nie musi być od razu na samym początku może być na przykład między paragrafami
bo tutaj na przykład byłby jakiś wstęp cokolwiek teraz przejdźmy sobie do
api explorera a musimy tylko zapisać nasze zmiany przechodzimy
do api explorera paragraf już nie
istnieje ale mamy za to article
content i teraz to co jest delikatnym utrudnieniem to fakt że jak zrobimy po
prostu control spację to nic nam nie podpowie zobaczymy tylko type name ale
w datocms żeby pobrać sobie ten modular content w odpowiedniej kolejności to
musimy wykorzystać znane nam już fragmenty fragmenty wykorzystywaliśmy
wcześniej dla gatsby image tutaj również zaczynamy fragmenty od trzech kropek później
wpisujemy on i możemy sobie wybrać te dane
które nas interesują na przykład heading record które wewnątrz zawierają heading
content później będziemy mieć on paragraph record
paragraph content warto w cms
być jakby konsekwentnym w nazewnictwie więc tutaj jeśli
mamy article image to w środku będziemy mieć image data
z racji że akurat image nie ma contentu tylko ma właśnie
jakieś dane na przykład url które musimy tutaj wyciągnąć taką
sobie przyjąłem tutaj konwencję i teraz jeśli zapuścimy to
query to zobaczymy że dostaniemy w odpowiedniej kolejności nasze artykuły
headingi i obrazki zauważ że
headingi są jako pierwsze a mimo wszystko hdeading jest w odpowiednim miejscu tak jak
wpisaliśmy w naszym contencie czyli na drugim miejscu po pierwszym paragrafie niezależnie
od kolejności tutaj tego query zawsze będziemy mieć odpowiednią kolejność w
tablicy którą zwróci nam datocms to jest naprawdę super wygodne
za chwilkę ci pokażę dlaczego ale to już w następnej lekcji no bo w końcu musimy
to query do czegoś wykorzystać tylko na sam koniec jeszcze chciałem powiedzieć bo
ja bardzo nie takiego wrażenia sprawiania takiego wrażenia w kursach że
to jest jakaś magia i ja na przykład sobie te fragmenty tutaj wyczarowałem z kapelusza
że ja od razu wiedziałem jak to wpisać oczywiście że nie wiedziałem i na początku kiedy uczyłem
się też datocms to musiałem skądś to wziąć to nie jest tak że te
fragmenty są jakąś konwencją która zawsze wygląda tak samo zauważ że w gatsby
mieliśmy gatsby image sharp które po prostu było razem pisane później
z jakimś podkreślnikiem tutaj fragmenty są inaczej pisane mamy trzy kropki później mamy
on później mam jakąś nazwę tego rekordu o który nam chodzi i po
prostu wszedłem do datocms docs które
swoją drogą są naprawdę spoko poszukałem tego o co mi chodzi czyli
szukałem content delivery api no bo to jest
właśnie to api które dostarcza nam treści i później poszukałem
modular content szukałem tego dlatego że oczywiście na samym
początku kiedy korzystałem z tego modular content to chciałem po prostu wpisać
heading na przykład i nic mi się nie wyświetlało i nie wiedziałem czemu dlatego wszedłem
sobie tutaj i zobaczyłem że mamy tutaj po prostu taki fragment który
piszemy w ten sposób i stąd właśnie się tego dowiedziałam więc zawsze jeśli czegoś
nie wiesz po prostu jeśli gdzieś się zgubisz to pamiętaj że jest dokumentacja która
jest naprawdę dobrze przygotowana zarówno dla dato jak i gravcms jak i
pewnie mdx i wielu wielu innych rzeczy dokumentacja jest twoim przyjacielem i
warto tutaj zaglądać jeśli czegoś nie rozumiesz to na pewno tutaj znajdziesz odpowiedź
która przynajmniej da ci jakiś start do dalszej pracy a
teraz już koniec tego gadania zaczynamy następną lekcję