Nuxt.js: Połączenia z innymi źródłami danych
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Część tej lekcji zajmiemy się.
Integracją z wiki.
Czyli tworzenie jak i stworzyliśmy sobie tutaj katalog API.
Podłączyliśmy go.
Do naszego config za pomocą właściwości Serwer middleware.
I dzięki temu. Możemy odpytywać nasze API za pomocą.
Kernela czy później.
Z frontendu właśnie na poziomie
komponentów, bądź przekazując te dane jeszcze inaczej w sposób typowo tekstowy.
Więc stwórzmy sobie nowego roota.
Nazwijmy go. Sobie Wiki.
Diaz.
I kopiujemy całą.
Treść naszego routera Springa.
Czyli tutaj możemy stworzyć sobie nasz testowy endpoint.
Powiedzmy nazwiemy go wiki. Zapiszemy?
Tu się powinien nam serwer przeładować.
Widzę, że komputer Hiro dalej chodzi, ale
nie powinno to być problemem i zobaczymy Wiki.
I faktycznie.
Dostaliśmy zwrotkę z serwera, to.
Znaczy, że ten nasz endpoint się nie
zarejestrował, a nie zarejestrował się dlatego, bo faktycznie nie.
Pobraliśmy go tutaj.
Więc jeśli sobie pobierzemy Wiki From Raus Fiki Miki, zapiszemy to.
W tym momencie nasz serwer się buduje, bo
wcześniej nawet o tym pliku txt nie mógł wiedzieć.
I faktycznie dostajemy. Zwrotkę.
OK.
Więc to co zrobimy teraz to przejdziemy do naszego pliku wiki.
Teraz importujemy faktycznie wiki, że
jest, a trzeba oczywiście przejść tutaj do.
Dokumentacji albo do opisu tej paczki na npm.
I tutaj jest cały opis do czego służy ta paczka, jak ona działa i.
Jak się za nią. Zabrać.
Więc zaczniemy od prostej instalacji pakietu.
Jest i w międzyczasie.
Zobaczmy jak się tego używa.
Widzimy, że jest to prosty import i API jest.
Naprawdę. Jasne.
Wywołujemy wiki i na danym page'u, który nas interesuje np.
jeżeli interesuje nasz Batman. To będziemy mieli.
Różne informacje. Które są.
Dostępne tutaj w tej sekcji dokumentacji,
z której będziemy bardzo intensywnie korzystać na następnych lekcjach.
Więc kopiemy sobie ten fragment.
Widzimy, że już się nam to zainstalowało, więc po prostu to sobie tutaj wklejamy.
I.
Tak naprawdę, więc możemy tutaj to zmienić na Capital Case.
Tutaj też na Capital Case.
Jak widzimy wiki bazuje.
Na procesach, ponieważ mamy tutaj funkcję D.
Jest to typowy wskaźnik, że API czy dana biblioteka wspiera.
Promise i zamiast tutaj zwracać to do konsoli.
Chociaż moglibyśmy też to tak zostawić. To być może.
Zróbmy to tak, że w momencie odpytywania
naszego wiki to się będzie tutaj nam zwracało.
I. W momencie gdy.
Skończy się to zapytanie, to ja sobie tutaj przesunę.
Zapiszemy to.
Wtedy chcemy wysłać status 200 i wysłać te.
Dane, które właśnie tutaj pobraliśmy.
Więc wyślijmy to tutaj.
Mam nadzieję, że to nie jest promise.
Wydaje mi się, że tam może być jeszcze Promise.
Dlatego ja tutaj.
Cofnę się do.
Tego i faktycznie jest to też promil, w
związku z czym musimy zrobić jeszcze jeden, a ja to cofnę.
Czyli tutaj. Return.
I kolejne dalej albo data.
No i możemy zrobić.
Czyli ten.
Zobaczymy co się stanie.
Zapiszemy to.
Widzę, że tutaj jest coś nie tak. Chyba podwójne.
Nawiasy zapiszmy i odczytując.
API wiki.
Widzimy, że dłużej to zajęło, bo faktycznie wydarzyło się jakieś zapytanie.
Do serwerów Wikipedii.
I dostaliśmy informację, że alter ego.
Batmana to jest faktycznie posłaniec.
Więc świetnie, mamy to faktycznie ogarnięte.
Zobaczmy co się stanie, jeżeli wyślemy tutaj zamiast.
Prostego send obiekt.
Czyli stan.
I tutaj Short Henderson nawalił, ustawił, nawalił.
Aplikujemy to i ponownie curl.
I widzimy, że mamy proste API.
Które zwraca nam czas. Który będziemy mogli.
Wykorzystywać na frontend.
To, co trzeba zrobić jeszcze, to przede
wszystkim przechwycić informacje dotyczące jakiego page'a interesuje nas.
Aplikacja. Zaczęła.
Nie chcielibyśmy zawsze dostawać informacji o Batmanie.
Jeżeli chcemy dowiedzieć się czegoś o Januszu.
Kurczaku, w związku z czym zamiast robić to w taki sposób.
Że tutaj hard kodujemy. Tę wartość, to możemy pobrać.
Z obiektu. Request różne informacje na temat.
Tego requestów.
Albo alternatywnie, jeżeli skupiamy się na testowym API a tak to wygląda.
No to możemy sobie. Stworzyć tutaj kolejny.
Parametr i np.
pobrać informacje.
Tutaj wywołujemy funkcję.
Info i tutaj podać dynamiczny parametr, który będzie.
Tak naprawdę informacją, który parametr po kim chcemy.
Pobrać. Czyli jeśli na przykład.
Sobie zrobimy Page ID oraz Property Properties.
I teraz jak dostać się do tych właściwości?
Bo tutaj mamy całkiem sporą ścieżkę.
Oczywiście testowe API to jest też bardzo
długi temat, o którym można byłoby zrobić osobny kurs.
Ale na nasze potrzeby po prostu chcielibyśmy.
Się dostać do tych parametrów. Tutaj.
Czyli będziemy w stanie stworzyć to na takiej zasadzie, że odpytuje.
Curl api localhost fiki i teraz info page tutaj powiedzmy Batman.
Property.
I powiedzmy alter ego, to będziemy dostawać informacje, że jest to fajne.
W tym momencie oczywiście to nie jest.
Zapisane, w związku z czym dostajemy jakąś typową 400 czwórkę z samego Nexta.
I jak się do tego dostać?
Jak się dostać do tych parametrów?
Otóż na obiekcie REG mamy.
Właściwości takie jak parametr EQ.
Parametr.
I tak samo jak odwołujemy się do każdego obiektu, możemy odwołać się do tych.
Nazw zmiennych w taki sposób, czyli id.
Id równa się tak oraz.
Ponownie property równa się tak.
I teraz jedyne co musimy zrobić to podać tutaj.
Id. Oraz.
Property.
Gdy to napiszemy, wyczyść ekran.
I tutaj oczywiście trzeba mieć cel.
Coś tutaj się.
Wszystko wyświetla, ale faktycznie dostajemy informację bezpłatnie.
Czy w związku z tym, jeżeli chcielibyśmy.
Sprawdzić to na innej informacji.
Zobaczmy, czy Superman.
Ma np.
też jakieś alter ego.
I wydaje się, że.
Niestety nie tutaj.
Się wydarzył jakiś błąd, bo dostaliśmy ponownie.
A został tutaj niestety literówek.
Usunąłem Slasha.
Coś się brzydko dzieje.
Z tym terminalem.
Zrób mi jeszcze raz Kira.
Albo sami to napiszmy.
Czyli tak localhost 8000 API wiki info Tagi SuperMemo property.
Alter.
Tego.
Są raczej małe szanse, że.
Te dwa także będą miały dokładnie takie same.
Opcje, ale akurat się złożyło także i to, że tak jest.
I faktycznie widzimy, że dostajemy informacje.
O alter ego Supermena.
W związku z czym mamy już połączenie.
Z API Wikipedii.
Tutaj co prawda wykorzystujemy do tego Promise, moglibyśmy.
To zrobić na async, ale i tak co może też później na etapie sprzątania naszego kodu.
Zrobimy.
I w kolejnych lekcjach.
To na czym się skupimy to na tym, aby stworzyć odpowiednie.
Pointy, które będą. Nam potrzebne.
Do.
Uzupełnienia naszych danych na front endzie.
Prawdopodobnie z tego akurat wpisu nie
będziemy korzystać, bo jest zbyt specyficzny na nasze potrzeby,
w związku z czym przejdziemy przez dokumentację wiki CSS.
Tak po krótce bez żadnych nadmiarowych analiz.
Z tego co. Możemy tutaj zrobić tylko tyle aby.
Wykonać zadanie, które.
Założyliśmy sobie wybierając projekt Mini PADI.
W związku z czym zapraszam Cię do kolejnej lekcji.
Gdzie stworzymy kolejne end pointy, które
wykorzystamy w kolejnych sekcjach tego kursu.
Linki
Kod
Zmiany wprowadzone w lekcji · 8 min
diff --git a/14/minipedia/api/index.js b/14/minipedia/api/index.js
index 7f3258c..619d0b7 100644
--- a/14/minipedia/api/index.js
+++ b/14/minipedia/api/index.js
@@ -1,8 +1,10 @@
import Express from 'express';
import Ping from './routes/ping';
+import Wiki from './routes/wiki';
const app = Express();
app.use(Ping);
+app.use(Wiki);
export default app;
\ No newline at end of file
diff --git a/14/minipedia/api/routes/wiki.js b/14/minipedia/api/routes/wiki.js
new file mode 100644
index 0000000..5683060
--- /dev/null
+++ b/14/minipedia/api/routes/wiki.js
@@ -0,0 +1,21 @@
+import { Router } from 'express';
+import Wiki from 'wikijs';
+
+
+const router = Router();
+
+router.get('/wiki/info/page/:id/property/:property', (req, res) => {
+ const id = req.params.id;
+ const property = req.params.property;
+ Wiki()
+ .page(id)
+ .then(page => {
+ return page.info(property);
+ })
+ .then(value => {
+ return res.status(200).json({ value });
+ });
+});
+
+
+export default router;
\ No newline at end of file