w Praktyce
3 godz. 17 min · ReactJS · Full-stack i Programowanie
Przemysław NowakSoftware EngineerJeżeli masz już doświadczenie w tworzeniu aplikacji komunikujących się z backendem to z pewnością wiesz czym jest ból niespójnego API oraz wielu sposobów wykonywania requestu po dane. Apollo rozwiązuje ten problem udostępniając jedno proste API do obsługi komunikacji z serwerem GraphQL. Nie musisz się martwić o to jak otworzyć kanał WebSocket dla subskrypcji czy o to jak napisać poprawny Query Document - to wszystko i jeszcze więcej dostarcza dla nas Apollo Client.
Apollo 3 posiada niesamowity mechanizm cache, który pozwala zaoszczędzić czas na wykonywanie zapytań oraz setup bibliotek do przechowywania stanu serwera. Wszystkie request trafiają do warstwy pamięci podręcznej, którą zarządza dla nas Apollo - wybiera, dodaje oraz łączy odpowiednie podzbiory tak aby jak najmniej komunikować się z serwerem, a mimo to wiedzieć jaki jest jego stan. Dodatkową cechą mechanizmu Cache jest to, że może być łatwo użyty jako stan lokalny - bez potrzeby instalowania bibliotek takich jak Redux, jesteśmy w stanie stworzyć aplikację stateful w niesamowitym tempie!
Być może spotkałeś się już kiedyś z problemem Unit Testów, które działają - są na "zielono" ale mimo wszystko aplikacji jest zepsuta - to przykład źle napisanych jednostek. Komunikacja z serwerem i odbieranie danych to kluczowy element każdej aplikacji - dlatego ważne jest aby stworzyć poprawne unit testy, które będą nas chronić przed zepsutą aplikacją na produkcji. W kursie tym poznasz poprawny sposób na testowanie klienta Apollo, tak aby testy były stabilne i spełniały swoją rolę.
Z pewnością wyobrażasz sobie magiczne aplikację, które działają szybko bez potrzeby czekania na odpowiedzi z serwera oraz posiadające poprawne dane. Skoro tak, wiesz również, że stworzenie takich aplikacji wymaga wiele pracy, dodatkowych bibliotek oraz rozpisania każdego przypadku, tak aby wiedzieć kiedy dane są poprawne a kiedy trzeba zapytać serwer o nie jeszcze raz... A co jeżeli Ci powiem, że Apollo zrobi to za nas? Podejście Cache-First, o które oparta jest biblioteka klienta apollo dostarcza nam te wszystkie w/w cechy, a kurs ten pokaże Ci jak sprawnie posługiwać się tymi narzędziami.
Apollo to poważny gracz w wielu stackach technologicznych. Jeżeli firma decyduje się używać GraphQL - który jest coraz bardziej popularny - to przeważnie w parze idzie Apollo. Dlatego w wielu ofertach pracy możesz spotkać tą technologię jako wymaganą. Zresztą, nie bez przyczyny, Apollo pozwala na sprawne, spójne oraz szybkie budowanie aplikacji czy to z Reactem, czy to z Angularem, Vue, Svelte oraz z Androidem czy iOS - mając jeden wspólny interfejs pracy, firmy są wstanie tworzyć aplikację w różnych technologiach komunikujących się z warstwą Apollo w jeden określony sposób.
Kurs ten jest stworzony z myślą o FrontEnd developerach znających ReactJS oraz podstawy GraphQL, którzy chcą dodać do swojego arsenału technologicznego poważną broń jaką jest Apollo.
W tej lekcji pokażę Ci na jakim API będziemy sobie działać.
Jesteśmy aktualnie na stronie SQL Composer Samples.
W zasadzie jest to po prostu repozytorium git above.
Jest to swego rodzaju open VPS i można
powiedzieć gdzie możemy sobie eksplorować i wgl.
A tutaj jest to zrobione z bazą MongoDB.
Mamy tutaj informacje jak sobie zainstalować właśnie to lokalnie, aby
działać z tym lokalnie i zachęcałbym Cię żebyś to zrobił lokalnie.
Za chwilę Ci pokażę jak to zrobić.
Natomiast jeżeli będziesz miał jakieś problemy z instalacją lokalną
i nie uda Ci się tego zrobić, to również znajdziesz ten link w źródłach.
Ponieważ to IPA i również jest wystawiony
na I roku, więc możesz tego również używać.
Natomiast wraz z przeszczepem
przestrzenią czasu, ja nie jestem w stanie zagwarantować, że ten link będzie działał.
Dlatego najlepiej spróbować to uruchomić lokalnie.
Nie jest to tak naprawdę skomplikowane.
Jedyna rzecz jaką trzeba zrobić, to zainstalować MongoDB.
I są tutaj instalatory.
W zasadzie instrukcja jak to zrobić na każdą platformy.
Ja robiłem to na maxa i dosłownie to co zrobiłem to przeszedłem przez te kroki.
A więc wykonałem w terminalu najpierw ten krok, później ten.
Jeżeli nie masz jeszcze
zainstalowanego to również musisz przejść do preview i zainstalować sobie grę.
W zasadzie to nie jest tutaj.
Tutaj jest dokładniej link do instalacji
homebrew, a więc musisz skopiować sobie tą komendę i wtedy
zainstalujesz homebrew jeżeli tego nie masz na swoim maku.
Ale jeżeli masz to to super.
Wtedy możesz od razu przejść tutaj i wykonać tą drugą komendę i to wszystko.
I wtedy MongoDB będzie zainstalowane.
Więc to API które za chwilę będziemy sobie
instalować również będzie już działało na bazie danych.
I również tutaj jest przykład instalacji na Windowsa.
Jak to zrobić?
Co trzeba pobrać?
I jest tutaj dokładnie cały opis.
A więc w zasadzie trzeba robić to co jest
tutaj napisane i to wszystko powinno działać.
Jeżeli będą jakieś problemy,
no to oczywiście trzeba będzie o tym pisać w tej sekcji.
Natomiast myślę, że tutaj problemów nie będzie.
Jest to dosyć prosta instalacja,
przez którą ja już przeszedłem i dokładnie nie chcę Ci tego pokazywać, a zrobiłem
dokładnie te 3 kroki i mi się wszystko poprawnie zainstalowało.
Dobrze, więc przejdźmy teraz.
Może zamknijmy te dwie zakładki.
Przejdźmy teraz tutaj i zrobimy tę instalację.
Jeżeli sobie ściągnąłeś aktualne źródła to w katalogu 01 mamy katalog server.
Jeżeli tego nie zrobiłeś i chciałbyś jakby
sobie iść obok to możesz również sklonować sobie to repo klikając czy to po https czy
po access, skopiować link i skopiować i sklonować sobie te repozytorium.
Natomiast ja stworzyłem to również w naszym edu webowych.
Edu webowym źródle i mamy to tutaj właśnie w katalogu 01.
Jest to właśnie teraz w tym katalogu 01 i mamy tutaj katalog server.
Jeżeli do niego przejdziemy to powinniśmy mieć wszystkie pliki.
Więc przejdźmy do tych instrukcji.
To co musimy zrobić to rpm install i potem wykonać tą komendę npm transit która
szczepi nam takie podstawowe dane, żeby ta nasza baza danych nie była pusta, żebyśmy
mieli na czym pracować, a później restartuje nam aplikację na porcie 3000.
Skupimy te npm install na początku i to wykonajmy i poczekajmy sekundę.
OK. I mi się już wszystko zainstalowało.
Może wyczyszczę sobie konsolę,
abyśmy mieli więcej miejsca i przejdźmy z powrotem do
to git HB i skopiuj sobie tutaj po prostu te dwie komendy.
Może na początku wykonamy to npm race, żeby zobaczyć czy nie mamy żadnych błędów.
OK, wszystko się wykonało.
Site completed. Super.
I teraz wykonajmy z komendantem RAM start
i zobaczmy czy będzie nam tutaj całe nasze API działało.
Teraz startuje naszą aplikację.
No i wygląda na to, że działa.
Skopiuj ten link localhost 3000
do przeglądarki i tutaj właśnie mamy listę tych aplikacji.
Będziemy korzystać z tego
z tego API, a więc również w ten sam sposób musimy to skopiować tutaj.
No i fajnie.
Jak widać na porcie 3000 mamy już nasze API gotowe, a więc będziemy
do tego API się odwołać również w naszej aplikacji frontend owej.
Jeżeli popatrzymy również na to co mamy na I roku, to jest dokładnie to samo.
Możemy przejść sobie przez dokumentację na szybko.
Mamy tutaj mutacje, subskrypcję oraz query jedno duże query WR i WR.
Jest to swego rodzaju domena, w której
możemy po prostu konwertować kolejne rzeczy.
Możemy tutaj klarować produkty, możemy klarować kategorie zamówienia.
Generalnie to API to jest to takie API
sklepowe i możemy sobie na takim sklepie na Arduino działać.
Mamy tutaj wszystkie te dobrodziejstwa.
My implementujemy tylko część tych rzeczy, bo oczywiście gdybyśmy chcieli całe API
nurtu inne zaimplementować, zajęłoby nam to znacznie, znacznie dłużej.
Ale co jest fajne to to, że tak naprawdę będziesz miał to API zostawione dla
siebie, więc jeżeli będziesz chciał kolejne funkcjonalności implementować czy
kolejne subskrypcje czy kolejne mutacje, aby mieć taki pełny projekt w portfolio
i również tworzyć architekturę tej aplikacji,
rozwijać ją, to będziesz miał również taki fajny produkt ze swoim API.
Dlatego zachęcam Cię abyś jednak spróbował sobie to odpalić.
Jak widziałeś to były tylko 3 komendy jeżeli chodzi o instalację tego serwera.
I myślę, że z mojego również nie
powinieneś mieć żadnych problemów aby zainstalować.
Wtedy będziesz miał u siebie lokalnie
takie API i będziesz mógł sobie eksplorować.
Zwłaszcza, że jest tutaj dużo więcej takich przykładowo Chat API.
Nie chcę już tutaj przez to przechodzić,
nawet tutaj jest Cloud API prawa interwencji.
Mógłbyś również się tego uczyć czy Elastic Service.
To oczywiście już jest znacznie inny temat.
Natomiast warto warto to mieć lokalnie.
Tak jak wspomniałem, wtedy będziesz miał
gwarancję, że to wszystko będzie działało, a w momencie kiedy ten link przestanie
działać, no to wtedy tracisz jakby tą możliwość.
Natomiast tak jak wspomniałem, jeżeli chciałbyś to zrobić wygodniej, nie chce Ci
się teraz tego nie robić instalować, to również możesz z tego linku korzystać.
Więc w momencie kiedy będziemy w aplikacji pod podłączać Apollo to wtedy zamiast
używać tego linku to po prostu sobie skopiujesz te.
Więc to już zależy od Ciebie.
Myślę, że to wszystko już w tej lekcji.
Więc ja zapraszam Cię do kolejnej lekcji, gdzie zaczniemy sobie instalować frontend.