nvm jest potrzebny do instalowania node.js, dzięki niemu możemy używać różnych wersji do różnych programów. Chcemy zainstalować wersję 10.15.1. Trzeba wpisać następujące zaklęcia:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash# tu trzeba otworzyć nową konsolę albo wykonać wypisane polecenianvm install v12.16.1nvm use v12.16.1Po wykonaniu tych poleceń powinniśmy mieć dostępne programy node i nvm. Jeśli wszystko się udało, to wywołanie node -v wypisze v10.15.1.
Na tych zajęciach dla ustalenia uwagi użyjemy VS Code. Na kolejnych laboratoriach nie ma obowiązku go używać.
W laboratorium jest już zainstalowany, uruchamia się go pisząc code.
Jeśli nie chcemy, żeby Microsoft za dużo o nas wiedział można wyłączyć wysyłanie wszelkich informacji, które normalnie są przesyłane:
telemetryZmiany zapisują się automatycznie, więc kończymy zamykając zakładkę.
W tym tygodniu zajmiemy się przygotowaną już aplikacją, trzeba więc ją ściągnąć i przygotować do uruchamiania. Aplikacja jest dostępna pod adresem
https://www.dropbox.com/s/c8k8edlypk2aidx/zly.program.tar.bz2?dl=0 i po ściągnięciu trzeba ją rozpakować.
Aplikacja wymaga wielu bibliotek, które nie są dołączone. W związu z tym po wejściu do katalogu zly.program trzeba je zainstalować:
npm installJeśli wszystko się udało, to wywołanie:
npm startwypisze coś takiego:
> zly.program@0.0.0 start /home/luke/szkolne.www.2019/zly.program> node ./bin/wwwa przeglądarką (używami Firefoksa) da się wejść na stronę http://localhost:3000/.
Uruchamiamy code pisząc code, a potem z menu File klikamy Open folder..., wyszukujemy katalog zly.program i go wybieramy.
Gdy otworzymy np. plik app.js, to wyświetli się jakiś kod w Javascripcie, niezbyt może interesujący, ale w fantastycznych kolorach. Tak samo public/index.html, który będziemy zaraz modyfikowali.
W Firefoksie otwieramy http://localhost:3000/. Skoro jest jakiś kalkulator, to spróbujmy go użyć, np. policzyć pole koła o promieniu 1. Powinno wyjść Π, a wyszło coś innego. Szukamy błędu w programie!
F12 powinno włączyć narzędzia deweloperskie, ale w laboratorium nie zawsze działa, wtedy pomaga Ctrl-Shift-I, albo można je wyszukać w menu.
W zakładce Inspector widać <script>, niezbyt super sformatowany, ale widać napis policzPole, pewnie tam trzeba szukać błędu. W zakładce Debugger widać to dużo lepiej, trzeba tylko wybrać (index) po lewej stronie i zjechać w dół albo wcisnąć Ctrl-F i wyszukać napis policzPole. Od razu widać, że wzór jest marny.
Ale czy to jest to miejsce? Warto zweryfikować to w debuggerze. Ustawiamy breakpoint w linii ze wzorem (klikamy na numer linii, pokazuje się niebieska strzałka) i przeładowujemy stronę. Znowu wpisujemy promień, klikamy Policz i nie dzieje się nic.
Sprawdzamy czemu. W ostatnim wierszu skryptu jest coś o #policz, co może mieć związek z naszym niedziałającym przyciskiem, i odwołujemy się tam do zamien, a tak nazywa się jedna z funkcji w programie. Ustawiamy na niej breakpoint i wciskamy przycisk. Program zatrzymuje się i możemy zobaczyć co się dzieje. Po prawej stronie stos i lista zmiennych, nad nimi ikony do wykonywania programu. Nas interesuje Step over (F10) i Step in (F11). Wykonujemy kilka kroków z użyciem F10 i widzimy, że program w ogóle nie wchodzi do środka if. Gdy najedziemy myszką na cookie w wierszu z if, to wyświetli się napis stoj=true, co pewnie jest przyczyną naszych problemów.
Tu kilka słów o ciasteczkach mógłby prowadzący powiedzieć https://en.wikipedia.org/wiki/HTTP_cookie.
W zakładce Storage możemy zobaczyć ciasteczka (Cookies), i widać, że jest tam ciasteczko o nazwie stoj. Kasujemy je klikając prawym przyciskiem i wybierając któreś Delete.
Kończymy poprzednie wykonanie skryptu wybierając strzałkę (F8) w zakładce Debugger i ponownie klikamy policz. Tym razem wchodzimy do policzPole i jesteśmy już pewni, że to tu jest błąd.
W VS Code poprawiamy wzór (wszystko jest w pliku public/index.html) i żeby ułatwić sobie życie kasujemy if oraz nawias zamykający. Kod ma teraz bezsensowne wcięcie, ale możemy go ponownie sformatować: F1 i w okienku spisujemy format, na liście jest kilka pozycji w tym Format Document, jest tam też skrót klawiszowy (pod Linuksem zwykle Ctrl-Shift-I, ale może być inny).
I już powinno być wszystko ok.
A tymczasem go nie widać. Wracamy na pierwszą stronę, tam w zakładce Inspector wybieramy strzałkę po lewej stronie i najeżdżamy na przycisk Policz. W okienku zaznacza się <button ...>, czyli tak wyglądają przyciski. Klikamy przycisk, i znowu za pomocą strzałki wybieramy okienko z wynikiem. Widać, że w kodzie pod nim też jest <button ...>, ale się nie wyświetla. Gdy go wybierzemy, to po prawej stronie jest podejrzany napis display: none. Gdy najedziemy myszką, to wyświetla się haczyk, który można kliknąć, i wtedy przycisk się pojawia.
Poprawiamy to od razu w edytorze, np. szukając (Ctrl-F) napisu #najwieksze i kasując ten fragment.
Po wciśnięciu nowo znalezionego przycisku przechodzimy na nową stronę z listą rekordowych pól. Ale czy wszystko zapisuje się poprawnie? Po wysłaniu kilku innych pól okazuje się, że wyświetlane są trzy pola, ale wcale nie te największe. Musimy poszukać błędu, tym razem po stronie serwera.
Wybieramy zakładkę debuggera, ikonę z kółkiem zębatym na górze, to powinno wyświetlić propozycję stworzenia konfiguracji Launch Program. To utworzy plik .vscode/launch.json, o zawartości:
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/bin/www" } ]}Teraz można uruchomić program, ale najpierw trzeba zatrzymać ten uruchomiony w terminalu, Ctrl-C. Po kliknięciu zielonej strzałki obok napisu Launch Program program zaczyna działać, a my ustawiamy breakpoint w pliku routes/index.js w wywołaniu funkcji route.get('najwieksze'....
Teraz gdy wyślemy wynik program się zatrzyma, znowu F10 i F11 to pojedyncze kroki, ale dalsze wykonanie programu to F5. Po lewej stronie widać zmienne lokalne i globalne, a gdy zmienna jest zdefiniowana, to jej wartość widać też po najechaniu myszką w okienku edytora.
Próbujemy zobaczyć co się dzieje. Gdy przyślemy kilka wyników (można modyfikować liczbę w pasku przeglądarki zamiast klikać przyciski), to widać, że lista wcale nie zawiera trzech pozycji tylko wszystkie do tej pory wysłane i wybierane są najmniejsze, a nie największe.
Poprawiamy: slice powinien mieć argumenty 0,3 a nie -3, a na dodatek powinniśmy wynik zapisywać do req.app.locals.najwieksze.
Przeładowujemy aplikację i już, wszystko zdaje się działać.
routes jest okropny, funkcja nie jest wydzielona, więc nie ma jej jak testować,index.html jest myląca,