Transcription

Siemanko, witam bardzo serdecznie na moim kanale. Ostatnio parę dni temu na Instastories wrzucałem swoje pierwsze wrażenia ze Strapi. Strapi jest to taki headless CMS, czyli trochę taki CMS bez głowy, w którym nie ma w ogóle frontendowej części, tak jak macie np. w Wordpressie albo w wielu innych CMSach, więc Strapi wydaje mi się bardzo fajnym narzędziem, jeżeli robicie np. aplikacje reactowe albo po prostu rzeźbicie sobie jakiś frontend i potrzebujecie mieć backend. Wtedy myślę, że warto jest skorzystać ze Strapi i w dzisiejszym materiale pokażę wam właśnie jak prosto możecie sobie zrobić własne API, własny backend z użyciem narzędzia Strapi. Więc żeby mieć własny backend musicie mieć NPM, musicie zainstalować Strapi i musicie mieć jakąś bazę danych w waszym systemie. Jeżeli nie chcecie mieć bazy danych np. takiej jak Postgres czy MySQL to możecie skorzystać ze SQLite. Jest to taka baza danych w plikach, ale ja bym zalecał od razu zacząć od Postgresa i to też w dzisiejszym odcinku wam pokażę jak właśnie zrobić to API z użyciem Postgresa. No i dodamy sobie jakiś model, czyli np. artykuł i ten artykuł będziemy mogli wyświetlać sobie w formie JSONa na jakimś endpointzie z tego naszego Strapi, a później te endpointy oczywiście możecie sobie użyć w waszych frontendowych aplikacjach. Więc dzisiaj pokażę jak zainstalować Strapi, pokażę jak tworzyć tam modele oraz jak później korzystać z tych endpointów po stronie frontendowej. Pokażę wam też, że Strapi można łatwo customizować. Myślę, że dzisiaj w tym odcinku nie zdążę wam pokazać już customizacji, a ją pokażę w kolejnych odcinkach, które na pewno pojawią się na tym kanale, więc jeżeli pojawią ci się jakieś pytania odnośnie Strapi, to zapraszam do sekcji komentarzy, bo na pewno będę jeszcze pokazywał wam przynajmniej parę filmików ze Strapi, bo bardzo mi się spodobało to narzędzie i będę z niego korzystał do zbudowania sobie API na swoją stronę fullstack.pl. Przy okazji zapraszam w ogóle na stronę fullstack.pl, możecie sobie się tam dodać do newslettera. Tu jest działo newsletter, możecie zostawić swój e-mail i tutaj wszystkim chętnym będę wysyłał po prostu maile, gdzie informuję o jakimś nowym kontencie, który tworzę, czyli np. podcasty, jakieś takie materiały takie jak ten, ale też zawsze każdego tygodnia staram się wysłać jakieś w miarę interesujące linki, więc tutaj taka mała dygresja odnośnie newslettera, a tymczasem wracamy do... Więc musimy sobie zainstalować Strapi w naszym systemie, najlepiej z flagą global, czyli tak, żebyście mogli używać sobie Strapi nie tylko wewnątrz jednego projektu, ale w całym waszym systemie i po prostu klikacie sobie Enter. Ja już to zrobiłem wcześniej, więc tej komendy nie będę wykonywał, ale wykonam komendę, którą musicie wy wykonać w drugiej kolejności, czyli musimy zrobić np. npx createStrapiApp, czyli to będzie createStrapiApp, tutaj sobie napiszemy nazwę naszego projektu, czyli np. myproject i tutaj niektórzy mogą sobie odpalić QuickStart, QuickStart spowoduje to, że wam się utworzy od razu projekt z użyciem SQLite w wersji development, natomiast ja zrobię sobie ten projekt bez tej flagi, bo chcę skorzystać i pokazać wam przy okazji, jak możecie łatwo sobie podpiąć Postgresa. Więc tutaj jak widzicie już nas zapytał installer jaką chcemy mieć opcję, chcemy mieć opcję manualną, no i chcemy sobie skorzystać z Postgresa. No i teraz jak mieć Postgresa na swoim komputerze? Ja jestem leniwy, więc ja korzystam z Dockera, tutaj macie artykuł o tym, jak sobie pobrać Postgresa z użyciem Dockera. Tu jest jedno takie polecenie, które pozwala nam mieć w tle odpalony ciągle Docker, w którym znajduje się Postgres, więc u mnie np. jak sobie wpiszę docker.ps to zobaczycie, że mam tutaj odpalonego sobie w tle Postgresa i nie musiałem tam się bawić w instalację Postgresa, po prostu bardzo prosto go zainstalowałem z użyciem Dockera i tutaj teraz sobie utworzę bazę danych, więc wejdę sobie w konsolę, psql, myślnik H, localhost, myślnik U, czyli użytkownik Postgres, hasło zwykle we wszystkich kontenerach dockerowych to jest po prostu docker. Jesteśmy w środku i możemy sobie zrobić create database i ja to zrobię np. project, podkreślenie development i tutaj powinna mi się utworzyć baza danych i na dwa danych to jest project, podkreślenie development, host to jest localhost, port 32, username postgres i hasło docker. Nie ma połączenia SSL, myślę, że nie musimy o to dbać tutaj w wersji lokalnej i po chwili widzicie, że nasz projekt został pomyślnie zainstalowany. Mamy tutaj różne polecenia, jest yarn develop, czyli jest to taka opcja w opcji obserwującej, czyli jeżeli w naszym projekcie zajdą jakieś zmiany no to wtedy automatycznie serwer się odświeży, tutaj możemy też wystartować serwer w wersji bez watch mode, możemy sobie zbildować nasz panel admina i możemy wyświetlić sobie wszystkie dostępne komendy. Na razie myślę, że w zupełności wystarczy nam odpalenie, musimy wejść do tego projektu oczywiście, projekt jak on się nazywał, myproject, cd myproject i tutaj sobie możemy odpalić yarn develop i sobie nam się teraz powinien uruchomić nasz serwer w wersji development. Na razie nie jest to nic ciekawego, ale myślę, że zaraz dobrniemy do takiej ciekawszej części, w której po prostu Wam pokażę jak prosto możecie skorzystać z tego Strapi, myślę, że jest to bardzo fajna opcja, zwłaszcza jeżeli jesteście frontend developerami i potrzebujecie mieć jakieś API, no to z użyciem tego Strapi naprawdę szybko możecie to zrobić. Więc username admin, hasło, tutaj sobie jakieś ustalimy i na przykład e-mail mamy sobie artur at fullstack.pl i już widzicie, że jesteśmy w panelu administracyjnym, w panelu administracyjnym Strapi i to jest taki panel, bo mówiłem, że to jest headlessowe CMS, więc możecie się zdziwić, ale jak to, przecież tutaj jest frontend. Tak, jest frontend, ale jest to frontend służący tylko i wyłącznie do tego, żeby zarządzać naszymi modelami, żeby zarządzać naszymi danymi, żeby móc zarządzać na przykład rolami i dostępem do naszych modeli, ale to wszystko, co tutaj sobie wyklikamy, to za chwileczkę zobaczycie, że powoduje tak naprawdę to, że mamy specjalne endpointy, które możemy sobie na froncie z nich korzystać. I tutaj dzisiaj nie będziemy wchodzić w GraphQL, ale ciekawostka jest taka, że Strapi także pozwala korzystać z GraphQL, więc to pokażę myślę, że w kolejnym odcinku, a dzisiaj się skupimy na takim zwykłym API Restore. Więc wchodzimy sobie w Content Manager, tutaj w zasadzie na razie nic nie ma, wejdziemy sobie teraz w Content Type Builder i sobie utworzymy nowy Content Type, nazwiemy go sobie Article i zobaczymy, co tutaj możemy zrobić. No i teraz widzicie, że mamy tutaj już utworzony model Article, teraz możemy sobie dodać jakieś pole, jakiś atrybut do tego modelu i to jest to, co będzie stworzone w bazie danych, czyli ten atrybut to jest to, co będziemy mogli później zwracać w naszym JSON-ie i używać wewnątrz naszego panelu CMS, czyli na przykład mamy artykuł i artykuł może mieć tytuł, może mieć datę publikacji, może mieć flagę, czy jest publicznie dostępny, czy jest opublikowany, możemy mieć na przykład jakąś zawartość, czyli content taki, więc zaraz myślę, że będziecie wiedzieć, o co chodzi. Więc tutaj jest new string, zrobimy sobie title, dodamy sobie jakieś kolejne pole, na przykład zrobimy sobie created ad, proszę bardzo, dodamy sobie kolejne pole i na przykład tym razem skorzystamy, albo nie, damy sobie pole z tak zwanym rich textem i sobie nazwiemy to pole na przykład content, proszę bardzo i damy sobie na przykład flagę boolean published, w momencie kiedy coś jest opublikowane to będzie to true, w momencie kiedy nieopublikowane to false i co tutaj jeszcze możemy dodać? No może na przykład plik, który nazwiemy sobie cover, proszę bardzo, no i widzicie mamy model pierwszy, który nazywamy artykułem, artykuł ma tytuł, datę utworzenia, content, flagę published i mamy na przykład jeszcze tutaj okładkę, czyli cover i zapisujemy sobie ten nasz artykuł i wchodzimy teraz w content manager, widzicie, że już mamy tutaj na przykład artykuł, tutaj spróbujemy sobie jakiś nowy artykuł dodać, widzicie, mamy już tak naprawdę zrobiony edytor, możemy sobie tutaj mój nowy artykuł, artykuł, chciałem zrobić błąd niestety, tutaj widzicie, że jeżeli wybrałem dane typu data, no to możemy sobie po prostu, mamy już tutaj, jakby nie musimy tego ręcznie wpisywać, tylko mamy tutaj jakiś wybierak, z którego możemy skorzystać i sobie wpisać na przykład 16 grudnia godzina 9, tutaj możemy sobie coś tam napisać, możemy skorzystać z jakiejś opcji, tutaj jest w tym edytorze domyślnie markdown, czyli widzicie, że jeżeli coś sobie w tym markdownie wytłuszczymy, to oczywiście to widać, flaga published on, teraz wrzucimy sobie tutaj jakąś okładkę i teraz okładka, no to na przykład weźmiemy okładkę z podcastu, którą ostatnio zrobiłem i zapisujemy sobie ten nasz artykuł, więc artykuł jest już zapisany, na razie jakby nie dzieje się tutaj nic niewiadomo jakiego, ale tylko teraz wam szybko pokażę, wejdziemy sobie do naszej bazy w postgresie, a nie, nie tak, coś źle wpisałem, tutaj w tle nam chodzi serwer, jeszcze raz psql, sql, tak, tu chciałem wejść i tutaj mamy sobie naszego postgresa, baza danych się nazywa project, hasło to było docker i wchodzimy, proszę bardzo, i widzicie, że w bazie danych przez to, co tutaj zrobiłem sobie z poziomu tego naszego API, które już chodzi lokalnie na localhostie, mamy w postgresie pierwszy dodany artykuł, no i teraz spróbujemy sobie ten artykuł pobrać w taki sposób, żeby został on nam zwrócony, więc w tym celu sobie musimy przyznać dostęp do tych artykułów, więc tutaj jak widzicie mamy różne ustawienia, ale tutaj musimy zrobić jakby ustawienia publiczne, więc jeżeli chcemy pobrać na przykład artykuły, no to mamy tutaj różne opcje takie jak count, opcja count to nam zwraca jakby liczbę tych artykułów, mamy też możliwość tworzenia, usuwania, aktualizowania, zwrócenia wszystkich artykułów, albo tylko jednego, więc tutaj przyznamy sobie dostęp do tego, abyśmy mogli z tego endpointa articles po prostu pobierać sobie jakiś artykuł, więc zapiszemy, to zrobiliśmy dla opcji public, tutaj z lewej strony wybrałem roles and permissions, czyli po prostu role i tutaj mamy dwie podstawowe role, oczywiście jak chcemy sobie dodać kolejne role w tym CMS-ie, to możemy to bardzo łatwo zrobić, ale o tym dzisiaj nie będzie, bo filmik by trwał dwie godziny i byście go nie chcieli oglądać, więc mamy tutaj role public i teraz sobie odpalimy nasz postwoman, czyli taka podróbka postmana w wersji bezpłatnej, dostępna jakby z przeglądarki, z poziomu przeglądarki internetowej, no i widzicie, że tutaj odpytuje endpoint localhost, numer portu, tutaj ta ruta articles i zwróciło nam tutaj ten artykuł, mamy tutaj nawet URL do naszej okładki, więc jeżeli na przykład sobie tutaj odpalimy localhost 1337 i na przykład podamy sobie tutaj ten odnośnik, no to widzicie, że jest piękna okładka, którą zrobiłem, mamy tutaj też jakieś inne rzeczy i oczywiście te rzeczy jesteśmy w stanie konsumować w naszych frontendowych aplikacjach, więc zobaczcie, filmik trwa, nie wiem, z 10, 12, 15 minut, a tak naprawdę jednym poleceniem jestem w stanie odpalić sobie tutaj API, więc tak naprawdę całkiem nieźle to działa. Teraz zwróćcie uwagę, że na przykład w sytuacji, gdy usunę te role tutaj i sobie je zapiszę, to nasz serwer oczywiście w tle się przeładuje i jak tutaj odpalę tak raz tego postumen, to już nie powinienem dostać artykułów i mam, widzicie, ładny bardzo dostęp 403, status 403, czyli nie mam dostępu do tego naszego resursa i teraz jakby nie mogę się do niego dostać, bo jakby zabrałem dostęp do tego resursa usuwając ten dostęp public. Oczywiście możemy sobie ustalić, że na przykład chcemy, żeby ten endpoint był wyłącznie dla użytkowników zalogowanych i na przykład to sobie możemy ustawić tu i mamy role authenticated i teraz wystarczy, że sobie zarejestrujemy i zalogujemy użytkownika. No i jak to zrobić? No gdybyście mieli własne API pisane samodzielnie, no to musielibyście spędzić troszeczkę czasu w ekspresie czy tam w jakimś innym systemie do robienia backendu i po prostu napisać sobie autentykację z użyciem JVT lub Auth0 lub jakiegoś innego tam sposobu, a tutaj Strapi oferuje nam na przykład endpointy do już rejestrowania użytkowników i logowania ich, więc tak naprawdę jeden problem mamy z głowy. Tutaj mamy na przykład endpoint localhost ukośnik auth ukośnik local register, no i zobaczymy czy zadziała nam ta opcja. Opcja nie zadziałała, najprawdopodobniej jest tutaj problem z korsem. Tak, jest tu problem z korsem, więc spróbujemy go rozwiązać. Więc jesteśmy w VS Code, możemy sobie wejść teraz zobaczyć co tutaj mamy, bo tak naprawdę Strapi nie jest jakimś czarną skrzynką, która nie wiadomo gdzie nam działa, tylko tak naprawdę jest to zwykły projekt, więc jakbyśmy go dodali sobie na przykład do repo, no to widzicie, że utworzyliśmy artykuły i tutaj Strapi w tle nam utworzył różne pliki, więc tak naprawdę później jak nabierzemy wprawy z tym Strapi, to nawet nie trzeba klikać przez ten panel, ale także możecie sobie definiować swoje własne kontrolery, modele, jakieś serwisy tutaj bezpośrednio z kodu. No ale wejdziemy tutaj w config, wejdziemy w environment, wejdziemy w development i mamy tutaj zakładkę security, mamy kors i mamy kors zenablewany. Damy może po prostu false i zobaczymy czy ten nasz serwer teraz zadziała. Serwer powinien nam się przeładować i wchodzimy do post woman i teraz jeszcze raz sobie wykonamy to zapytanie, więc tutaj sobie w korsie damy jednak, po prostu go zenableujemy i damy origin, żeby nam łapało i zwalało na wszystkie. Oczywiście w developmencie możemy to zrobić, dlatego fajnie, że Strapi nam dzieli te różne JSON-y, te różne configi na development, production i staging. To są takie trzy najczęściej stosowane rodzaje aplikacji, więc w developmencie możemy sobie zezwolić na wszystko i wtedy Wasze aplikacje front-endowe albo np. jak teraz testujemy z tego post woman to powinno to zadziałać w tle, jak zapiszemy ten plik to przez to, że mamy serwer w watch mode to nam się automatycznie przeładuje ten nasz serwer, więc mamy post woman, walimy na nasz lokalny serwer na path out of local register, to jest od razu endpoint przygotowany przez Strapi do rejestracji użytkowników. Tutaj mamy username, email, password. Password bardzo ciężki, sobie tutaj wpisałem. No i teraz zrobimy sobie send i co się stanie? Username already taken, więc poprawimy to, zrobimy sobie np. Artur1 i zrobimy send jeszcze raz i widzicie, że mamy z powrotem otrzymany token JVT, który możemy używać do autentykacji naszego użytkownika, więc w sytuacji, gdy macie np. jakąś front-endową apkę, to możecie sobie to gdzieś zapisać w jakimś tam storze, w redaksie, nie wiem, w local storage, gdzie tam chcecie, jak chcecie, o tym nie jest dzisiejszy odcinek, więc mamy JVT, który został wygenerowany przez nasze Strapi i który może zostać użyty do jakichś tam dalszych akcji, więc teraz spróbujemy zobaczyć, czy ten JVT nam zadziała, więc w tym celu zrobimy sobie endpoint w tutaj Strapi dla naszych artykułów, żeby publiczny nie był dostępny i zrobimy sobie, żeby tylko dla użytkowników zalogowanych zwracało nam te artykuły, więc tutaj sobie je zaznaczymy. No i wracamy do Postwoman, wracamy sobie do kolekcji naszej związanej z artykułami, tutaj spróbujemy sobie pobrać artykuły i jak widzicie w dalszym ciągu mamy 403, spróbujemy teraz dać tutaj jakąś autentykację, zrobimy sobie np. billertoken i ten token sobie wpiszemy tutaj, podamy go sobie na główku i widzicie, że artykuły są teraz zwracane, czyli tak naprawdę z użyciem Strapi możecie mieć przede wszystkim admina, bo możecie te artykuły tworzyć i sobie nimi zarządzać z poziomu tego admina, widzicie, że tutaj mam okładkę, mam tutaj jakiś tekst, mogę to sobie wszystko tutaj wyklikać, ale jak teraz chciałbym np. potrenować sobie pisanie apek w React czy React Native i bym potrzebował sobie mieć taki backend, no to mogę sobie to Strapi teraz lokalnie postawić i korzystać z niego. Jak widzicie, możecie tutaj dużo rzeczy przetrenować, możecie sobie skorzystać z logowania, z rejestracji, ze zwracania artykułów, stworzenia tych nowych artykułów, bo tutaj też tak naprawdę możemy sobie utworzyć endpoint nie tylko do pobierania tych artykułów, ale także tworzenia ich przez użytkowników, więc wygląda to bardzo fajnie. Na dzisiaj to wszystko, co dla Was przygotowałem. Jeżeli filmik Wam się podobał, to możecie zostawić łapska w górę. Jeżeli macie jakieś pytania, jakieś uwagi, to zapraszam do sekcji komentarzy, a ja w kolejnych odcinkach pokażę Wam, jak można zrobić relacje, jak można sobie włączyć GrafQLa, jak można zrobić nieco bardziej zaawansowane rzeczy z użyciem Strapi, więc to wszystko na dzisiaj. Dziękuję bardzo za uwagę. Trzymajcie się. Cześć.