Nuxt.js: Aktualizacja głównych informacji

0:00Cześć!

0:00Z tej lekcji skupimy się tylko i wyłącznie na komponencie.

0:04Full info box, czyli postaramy się, aby ładował się tutaj prawdziwy MIME image

0:10obrazka i zajmiemy się tutaj tymi nazwami pojedynczych właściwości,

0:16które w tym momencie wyświetlają się jeden do jednego.

0:18I chyba nad tym się na początku skończymy tą sekcją wybudowaną.

0:23Czyli jeśli sobie stworzymy tutaj nowy terminal.

0:27Przejdziemy tutaj do kolejnej lekcji, do lekcji 20.

0:31I odpalimy npm install dodasz.

0:36No to będziemy w stanie korzystać z całych

0:37dobrodziejstw Logitecha i jedną z takich funkcji, która nas będzie

0:42interesowała tutaj jest funkcja status start case.

0:47Tutaj chyba nie widać, bo to nie jest dokumentacja.

0:50Jeszcze tutaj mamy informację jak ją

0:52zainstalować i tu jest przycisk do dokumentacji

0:55i możemy tutaj sobie wpisać start start case i ta funkcja konwertuje nam dowolny

1:02string na taki tekst, który wygląda mniej więcej jak.

1:07To, jak piszemy normalne zdania, w związku z czym wykorzystamy sobie te funkcje.

1:11Będziemy musieli oczywiście zaimportować Judasza.

1:17Czyli tutaj w naszym komponencie.

1:21Import from pilotaż.

1:25Prawdopodobnie będziemy musieli tutaj zrobić gwiazdka na slajdach.

1:29Zobaczymy. Wydaje mi się, że tak powinniśmy zrobić.

1:32Możliwe, że nie.

1:33I tutaj deklarujemy nową metodę news.

1:38Convert to.

1:41Start ok.

1:43I ta metoda będzie właśnie korzystała z tego, co sobie tutaj kupowaliśmy.

1:48I wykorzystamy tutaj właśnie tę metodę,

1:50którą znaleźliśmy, czyli będziemy zwracali wynik funkcji start case.

1:55I tutaj to, co przekażemy sobie w parametrze, czyli powiedzmy string.

1:59I musimy oczywiście zrobić to nie jest

2:01indeks, kropka, więc to sobie przeniesiemy tylko w naszym komponencie.

2:07Halifax.

2:10Full info box otwieramy.

2:14Tutaj ten komponent

2:16ewidentnie jest cięższym komponentem niż cała reszta

2:21i wynika to ciekawe tylko i wyłącznie z tego jak API jest zbudowane.

2:26W związku z czym to też jest częsta

2:28sytuacja, że jeśli stworzymy nasze API w słaby sposób,

2:33tudzież po prostu niedostosowane do tego co będziemy robić w projekcie,

2:37to czasami się tak zdarza, że po prostu musimy robić różne hacki na front endzie.

2:42No i jako że my tutaj operujemy z zewnętrznym API, nie

2:45bardzo jesteśmy w stanie tutaj zmodyfikować tego API, więc musimy robić

2:48takie tudzież różnego rodzaju adaptery do API,

2:53które będą tak jakby pośredniczył między tym z czym pracujemy bezpośrednio.

2:58Następca przychodzi nam z API.

3:00W każdym razie, jeżeli wykorzystamy metodę Convert to Start case

3:05i przetestujemy ją po prostu robiąc jakiś przykładowy Heloł Kamil Hack.

3:12Zapiszemy i zobaczymy czy da się w ogóle.

3:14Renderuje i jest błąd failed.

3:19Chyba nie było tam przecinka gdzieś na dole.

3:22Tak, oczywiście tutaj nie ma przecinka.

3:24Zapiszmy.

3:25I to się nam powinno wyświetlić tutaj na samym dole w tym komponencie.

3:30Hello, Kamerka jest tutaj się wyświetliła,

3:33w związku z czym faktycznie widzimy, że to działa.

3:38I jedyne co musimy teraz zrobić, to po prostu wykorzystać tą metodę,

3:42pozbyć się jej z naszego widoku i wykorzystać ją tutaj w pierwszym

3:47parametrze czy w pierwszej komórce naszej tabeli naszego wiersza.

3:53No i jak zapiszemy to, to w tym momencie

3:55teoretycznie te najciekawsze i wszystkie inne właściwości powinny się

3:59zaadaptować do takich wielkości jakich byśmy się ich spodziewali.

4:03Tutaj chyba jest jakiś problem z CSS em.

4:05Moglibyśmy dać jakąś stałą szerokość tej

4:08tabeli, aby one zawsze były przynajmniej jakieś.

4:13Natomiast jest to detal wizualny.

4:16Nie będziemy się tym chyba przejmować.

4:17Najważniejszy jest ten obrazek w tym

4:19momencie i z tym obrazkiem niestety troszkę będziemy musieli się namęczyć.

4:22W związku z czym przejdźmy od razu do roboty.

4:25Fika możemy pominąć, ponieważ ciężko jest tutaj określić jaka to będzie fika.

4:31Niestety API nie zwraca nam takich informacji.

4:33Tutaj oczywiście, ale przynajmniej dekoracyjnego dajemy.

4:37Nie jest to do końca obrazek dekoracyjny,

4:39ale ciężko też powiedzieć jak to będzie przedstawione.

4:43MIME image for the query.

4:46Możemy sobie napisać np.

4:48a caption.

4:50Tak samo możemy Name image of.

4:57Main thing.

5:01I tutaj możemy wstawić faktycznie co to jest?

5:05Jesteśmy w stanie to zrobić jak podzielimy

5:07nasze widoki na osobne podstrony i będziemy mieli dostęp do

5:12informacji jaką podstronę obecnie oglądamy.

5:15W tym momencie nie jesteśmy tego w stanie

5:16zrobić, ale sam obrazek wyświetlić jesteśmy w stanie.

5:19W związku z czym mail on już tutaj nam się pokazuje.

5:24Tutaj nam się alt nawet uruchomił.

5:26Zobaczmy jak wygląda treść naszego mailingu.

5:30I jak widzimy jest.

5:32Jest to ścieżka do obrazka.

5:34Została wykryta przez to, że mamy tutaj kropka png na końcu,

5:37ale jest to ścieżka relatywna do naszego projektu i tak naprawdę nie jesteśmy w

5:41stanie stwierdzić, gdzie konkretnie w internecie leży ten

5:44obrazek i dlatego wykorzystamy tutaj nasze image.

5:50Które zwraca po prostu wszystko.

5:54Każdy jeden obrazek, który znajduje się na danej stronie.

5:57Czyli zrobimy sobie konsolę lub.

6:00Pastor.

6:03Stats real images.

6:07I tutaj też to akurat nam się ładnie wypisze w

6:09konsoli, więc nie musimy tego stringi wstawiać.

6:14Odświeżam, bo wymaga odświeżenia strony.

6:18Niestety link nie uruchamia.

6:23I tutaj nie widzę.

6:24Co prawda.

6:27Tego co sobie wpisaliśmy.

6:28Możliwe, że tak.

6:29To jest news, a nie ma.

6:32Zobaczmy czy nie mamy drugiego z paskiem.

6:34Nie mamy, więc zapiszemy i ponownie odświeżamy.

6:38Oho!

6:40Wyczyścił stronę ponownie.

6:44Zatrzymajmy i zobaczmy, co tam się znajduje.

6:46Robimy więc. To są informacje, które dostajemy.

6:50Z naszego API i mamy na każdym z tych elementów tablicę

6:55pole Image info i to info zawiera w sobie bazę.

6:58Dużo informacji, mamy description,

7:00description, short url i tutaj są różne informacje o tym obrazku.

7:06Nas bardziej interesuje faktyczna jego nazwa.

7:10I tutaj widzimy, że w title zawiera się ta

7:13informacja, a więc możemy przejść kierować się przez wszystkie

7:16robimy i poszukać tego obrazka, który był zadeklarowany jako kolejny mecz.

7:20Tutaj też będziemy musieli zrobić jako include.

7:22Nie jest to idealne rozwiązanie,

7:24ale pracujemy z tym co mamy, w związku z czym tak na tablicy robimy.

7:28Szukamy na każdym z obiektów pola title i szukamy w nim naszego Main image.

7:36I zróbmy to tutaj.

7:41Find.

7:43Image.

7:46Image. Kropka.

7:47Title.

7:50I klucz.

7:53I tutaj nasz image.

7:56I zwrócimy ten element, jeśli uda się go

7:59znaleźć, bo możliwe, że się nam nie uda ze względu na jakiś błąd programistyczny.

8:08Jakiś błąd się pojawił.

8:11Ciekawe.

8:13Fajnie byłoby mieć na koncie mecze jest fajne.

8:16Oczywiście musimy tutaj zarobić pieniędzy.

8:19Bo jest to nasz kompas.

8:23Zdefiniowane tutaj.

8:27Poczekamy.

8:29I faktycznie znalazł jeden obiekt.

8:31I na tym obiekcie powinniśmy mieć już

8:33informację o tym, jaki jest jego bezpośredni obraz.

8:37Tutaj mamy nawet jego dyskretny URL.

8:40Jestem ciekaw, czy bylibyśmy w stanie

8:42jakoś pobrać deskryptory tego obrazka programowo.

8:45Zobaczmy co tam się dzieje.

8:48Do czego to nas przekieruje?

8:53Nie ma tutaj.

8:56Informacji.

8:58Są to opisy, ale wydaje mi się, że nie ma

9:02sensu pobierać tych informacji i wyświetlać osobno.

9:06Możemy to po prostu pominąć, więc poszukajmy po prostu.

9:10Gdzie w naszym API znajduje się

9:12absolutny link do tego pola, bo powinien się tam znaleźć.

9:18Jeśli dobrze pamiętam API wiki to jest wiki czy jest dalej?

9:23Warto zawsze pamiętać, że jeżeli pracujemy

9:25z API to trzeba spoglądać do tego jak jest ono zbudowane i.

9:30Co jest napisane w jego dokumentacji.

9:35Czy jest tutaj jakaś dodatkowa informacja?

9:37Czego się tam możemy spodziewać?

9:39Robimy jazz?

9:41Niestety nie bardzo.

9:43Ciekaw jestem.

9:45Wewnątrz nie powinna być, a tu jest oczywiście, ale mi się schował.

9:49W związku z czym skoro mamy już obiekt, zrobimy, że jesteśmy w stanie pobrać z

9:54niego info URL i w taki sposób wyświetlić ten obraz, więc to też zróbmy.

10:00Przenieśmy sobie tę logikę.

10:06Do osobnego kompozyt property.

10:11I być może zmienimy tutaj tą logikę, która będzie nam zwracała

10:16pierwszy obrazek, bo nie jest to już nam w tym momencie potrzebne, chociaż

10:21prawdopodobnie dobrze byłoby w pewnym sensie zostawić tego support.

10:25Ale wydaje mi się, że mamy też tutaj za komentowane w naszym sektorze konsolowym.

10:32Bez star state MIME image.

10:36Więc będziemy mieli do tego dostęp potencjalnie.

10:39Ja tutaj to skomentuję tylko chwilowo.

10:43Tego fragmentu kodu się tam pozostawmy,

10:46niech się renderuje to co ma się tam wyrenderować.

10:49Strona się już chyba przebudowana, ale ją odświeżamy.

10:53Pomyślmy troszkę.

10:54Pasek narzędzi przeglądarki.

10:58I faktycznie wypisał nam się tutaj.

11:03Czy to jest faktycznie main image?

11:06Wydaje mi się, że nie był to bezpośredni

11:09link do obrazków, przynajmniej nie w każdym tagu, które oglądałem.

11:14Ale załóżmy, że faktycznie to wystarczy i nie potrzebowaliśmy w ogóle pracować nad

11:20tamtym podejściem, które będzie nam szukało.

11:24Zrobimy z naszego obrazka.

11:26I faktycznie chyba to się w tym przypadku akurat sprawdziło.

11:29Jestem ciekawy czy jak zmienimy to na coś innego czyli np.

11:33routing, metro, wieże.

11:36Zmienimy to na.

11:39Robimy. Czy moglibyśmy?

11:42Batmana.

11:44I zobaczymy czy faktycznie podmieni się na obrazek Batmana.

11:50Po odświeżeniu strony oczywiście.

11:52I faktycznie zadziałało.

11:53W związku z czym być może.

11:57W innym fragmencie tego API będziemy musieli zrobić tego typu trick, czyli po

12:02prostu wyszukać obrazek na podstawie jego nazwy, a potem znaleźć go w rogu.

12:07Jeżeli nie mamy takiej potrzeby, to tym lepiej dla nas.

12:10Mniej kodu, ale tak jak widzimy mamy tutaj już cały nasz full info box,

12:15który być może nie wygląda najlepiej ze względu na.

12:19Jego szerokość.

12:20Jestem ciekaw czy możemy tutaj po prostu ustawić minimalną szerokość

12:25na jakąś wartość powiedzmy 300 pikseli i to się nam troszkę rozszerzy.

12:30Natomiast ta treść będzie miała priorytet, więc moglibyśmy ustawić to na kolumnie,

12:35ale tak jak mówiłem nie ma to większego znaczenia, a na różnych podstronach te.

12:39Ten box może mieć też różną szerokość.

12:41W związku z czym zostawmy to na tym etapie.

12:44I tym sposobem faktycznie pobieramy nasze

12:47informacje z API, wyświetlamy je na naszym front endzie i

12:52jak byśmy sprawdzili to faktycznie one są renderowane na backend.

12:56Bo gdy otworzymy źródło strony to te informacje są tam od razu zawarte.

13:02W następnych lekcjach oczywiście jeszcze będziemy czyścić komponenty.

13:07Indeks.

13:09Tak, aby nie znajdowały się tutaj w ogóle żadne zakamuflowane HTML.

13:13W miarę możliwości niektóre rzeczy będą związane z

13:16działaniem, a nie z całą treścią, którą zaciągamy z API.

13:20Ale tutaj widzę, że sama moglibyśmy zrobić.

13:23Tak naprawdę nawet nie jest to koniecznie.

13:28Coś, co musielibyśmy wrzucać w komponent, więc moglibyśmy tutaj po prostu wrzucić.

13:34Star Stable Summary i prawdopodobnie też by zadziałało.

13:41Usuńmy, odświeżamy i faktycznie to działa.

13:45W związku z czym większość tej treści mamy już tutaj zrobioną.

13:50I tak samo References.

13:52Moglibyśmy tutaj zrobić, ale nie znajdzie się już na to czas w następnych lekcjach.