Używanie natywnych modułów Node.js na przykładzie Path i Util

W tym artykule, który jest częścią kursu Node.js dalej kontynuujemy „podróż” po funkcjach i obiektach dostępnych w Node.js z poziomu globalnego.

A konkretnie zajmiemy się funkcją require().

Korzystaliśmy już z funkcji require() w poprzednim artykule z tego kursu do załadowania modułu Path i przypisania go do zmiennej o tej samej nazwie:

var path = require("path");

Funkcja require() służy do ładowania/importowania modułów Node.js. Moduł path jest dostępny w Node.js po jego zainstalowaniu na Twoim komputerze/serwerze (są to tak zwane moduły ‚core’). Znacznie większa kolekcja modułów znajduje się jednak na zdalnym repozytorium NPM. Aby z nich korzystać, trzeba je najpierw zainstalować, co zademonstruję w dalszej części kursu. Na razie omówimy sobie moduły, których użycie w aplikacji nie wymaga instalacji przez NPM.

Modułu path używa się do operacji związanych ze ścieżkami plików w aplikacji. Na przykład wcześniej użyliśmy jej do wyciągnięcia nazwy aktualnego pliku:

var path = require("path");
console.log(path.basename(__filename));

basename() to metoda w module path, która w połączeniu z parametrem __filename wyrzuca nazwę pliku (z którego została wywołana). Natomiast jeśli chcemy uzyskać nazwę aktualnego katalogu, możemy użyć parametru __dirname.

var path = require("path");
console.log(path.basename(__dirname));

Za pomocą modułu path, a konkretnie metody join(), możemy łatwo konfigurować swoje własne ścieżki i katalogi. Na przykład załóżmy, że chcemy utworzyć w naszej aplikacji katalog ‚uploads’ na pliki wgrywane przez użytkowników, a w nim utworzyć podkatalog ‚images’ na zdjęcia. Na koniec chcemy otrzymać pełną ścieżkę dostępu do tego katalogu. Dzięki metodzie join() modułu path jest to banalne:

var path = require("path");
console.log(path.join(__dirname, 'uploads','images'));

Czyli do aktualnego katalogu dodajemy dwa foldery, funkcja console.log() wyświetla całą ścieżkę na ekranie.

tutorial-node-js-moduly

Innym interesującym modułem dostępnym natywnie w Node.js jest moduł util. Zaimportujmy go sobie do zmiennej util:

var util = require("util");

Aha, nie musimy trzymać importowanych modułów w zmiennych var, mogą to być również stale const, jeśli mamy pewność, że nie będziemy ich zmieniać. A w przypadku importowania modułów w Node.js, najczęściej tak właśnie jest.

Więc dla odmiany, zainicjujmy ten moduł do stałej util:

const util = require("util");

Moduł ten posiada sporo funkcji-helperów ułatwiających proces tworzenia aplikacji, a szczególnie własnych modułów. Ich pełna lista znajduje się oczywiście w dokumentacji Node.js.

Jedną z interesujących metod jest log(). Możemy jej użyć zamiast javascriptowej standardowej console.log(). Różnica jest taka, że oprócz logowania informacji na ekran, util.log() dodaje również timestamp, kiedy zostało to wykonane. Zastąpmy console.log() w naszym poprzednim skrycie metodą util.log():

var path = require("path");
const util = require("util");
util.log(path.join(__dirname, 'uploads','images'));

Po uruchomieniu mamy taki wynik:

tutorial-node-js-dodawanie-modulow

Widzimy, że oprócz ścieżki dostępu mamy czas wykonania 31 lipca o 09:56.

Jako, że Node.js jest ‚zasilany’ preprocesorem v8 z przeglądarki Google Chrome, możemy użyć tego modułu i jego metod do np. sprawdzenia aktualnego zużycia pamięci serwera. Taką metodą jest getHeapStatistics(). Zobaczmy jak działa, dodając ją do naszego poprzedniego skryptu:

var path = require("path");
const util = require("util");
const v8 = require("v8"); // importujemy moduł v8 do stałej v8
util.log(path.join(__dirname, 'uploads','images'));
util.log(v8.getHeapStatistics()); // wyświetlamy informacje o aktualnym zużyciu pamięci

Uruchamiamy i widzimy dodatkowy log – obiekt zawierający różne parametry dotyczące aktualnych zasobów serwera:

tutorial-node-js-modul-v8

Asynchroniczność w Node.js – pierwsze kroki

W tym tutorialu zapoznamy się z asynchronicznością Node.js na przykładzie wykorzystania funkcji związanych z kontrolą upływu czasu, które dostępne są globalnie w Node.js.

Tworzymy plik apka.js i umieszczamy w niej poniższy kod, który najpierw inicjuje zmienną wait z wartością 3000, wyrzuca do konsoli tekst Zaczynamy... a następnie uruchamia funkcję setTimeout(), która z kolei wykonuje swój pierwszy parametr (czyli funkcję callback) najszybciej po upływie czasu określonego w drugim parametrze, czyli wait. Jak głosi dokumentacja, parametr ten podać należy w milisekundach, czyli tysięcznych częściach sekundy. W naszym przypadku będą to 3000 milisekund = 3 sekundy. Funkcja, która wykona się po upływie tych 3 sekund nie robi nic innego, tylko wyrzuca do konsoli tekst 'Upłynęły minimum 3 sek...'.

var wait = 3000;
console.log("Zaczynamy...");
setTimeout(function(){
    console.log("Upłynęły minimum 3 sek...")
}, wait);

Po zapisaniu i uruchomieniu skryptu komendą node w wierszu poleceń, powinniśmy zobaczyć taki wynik:

kurs-node-js-poczatki

Przy czym ten drugi tekst pojawi się oczywiście nie od razu, ale po upływie co najmniej 3 sekund.

Zobaczmy, co się stanie, gdy dodamy jeszcze jeden console.lo() na koniec kodu:

var wait = 3000;
console.log("Zaczynamy...");
setTimeout(function(){
    console.log("Upłynęły minimum 3 sek...")
}, wait);
console.log("jestem na końcu ;)");

Wynik:

kurs-node-js-pierwsze-kroki-asynchroniczny

Fakt, że instrukcja, która w naszym kodzie jest ostatnia wcale nie wykonała się jako ostatnia ale przed callbackiem z funkcji setTimout() świadczy o asynchronicznym działaniu javascriptu i całego Node.js. Nasz program, w momencie gdy dotarł do instrukcji setTimeout() nie czekał aż miną 3 sekundy, ale zlecił tej funkcji odczekanie tych 3 sekund, wykonanie callbacka i wrócenie z wynikiem. Sam natomiast wykonał kolejną instrukcję, czyli console.log(„jestem na końcu ;)”);. Kiedy setTimeout() wrócił do głównego wątku naszego programu z wynikiem, wtedy został wykonany. Stąd taka kolejność komunikatów naszego programu. Więcej o asynchroniczności napisałem w tym artykule: Co to znaczy, że Javascript jest asynchroniczny?

Jak zainstalować Node.js

Najłatwiejszym sposobem zainstalowania Node.js jest odwiedzenie oficjalnej strony https://nodejs.org/en/ i pobranie go poprzez kliknięcie z zielony przycisk na głównej stronie. Spowoduje to pobranie Node.js w wersji na Twój system. W momencie gdy dodaję ten tutorial, dostępne są dwa przyciski:

tutorial-node-js-jak-zainstalowac

Node.js jest często aktualizowany, więc prawdopodobnie widzisz już inne cyferki przy numerze wersji. Tak czy inaczej proponuję wybrać przycisk z lewej, ponieważ prowadzi on do ostatniej stabilnej wersji, natomiast przycisk po prawej jest najnowszym, ale może nie do końca przetestowanym w naturalnym i praktycznym środowisku wydaniem.

Możesz także zajrzeć do zakładki Downloads na powyższej stronie i stamtąd wybrać wersję instalatora oraz wersję systemową.

Po pobraniu instalatora, odpalamy go i postępujemy według instrukcji. Instalacja w domyślnych opcjach jest jak najbardziej zalecana, więc nie musimy nic zmieniać czy dodatkowo konfigurować. Jeśli jednak życzysz sobie zmienić ścieżkę instalacji (na Windowsie domyślnie będzie w Program Files), śmiało.

Po zainstalowaniu sprawdźmy, czy wszystko przebiegło pomyślnie. Wchodzimy w wiersz poleceń lub terminal, w zależności od systemu operacyjnego na naszym komputerze. Wiersz poleceń na Windows uruchamiamy przez kliknięcie na menu Start i wpisanie w wyszukiwarkę hasła: cmd.

W wierszu poleceń wpisujemy komendę:

node -v

i wciskamy Enter. W odpowiedzi uzyskamy wersję Node, którą właśnie zainstalowaliśmy. W moim przypadku jest to wersja 6.10.2

tutorial-node-js-instalacja-na-ubuntu-windows

Gratuluję, od teraz możesz programować w Node.js na swoim komputerze :).

Jak działa Node.js

Node.js to narzędzie, które umożliwia tworzenie i utrzymywanie skryptów w języku Javascript poza środowiskiem przeglądarki internetowej. Oznacza to, że możemy uruchamiać aplikacje javascript na komputerze, laptopie, czy serwerze i nie musimy do tego celu włączać przeglądarki. Ten szybki framework jest dostępny na wszystkich głównych środowiskach operacyjnych – Windowsie, Linuksie i MacOS.

Niewątpliwie jasnym punktem Node.js jest również npm, czyli Node Package Manager – narzędzie działające w command line, które daje programistom dostęp do potężnej biblioteki darmowych (open-source) modułów i bibliotek ułatwiających i przyspieszających tworzenie aplikacji.

Mówi się, że Node.js działa w systemie non-blocking w odróznieniu od np. zestawu PHP+Apache, który działa w systemie blocking. Innymi słowy: asynchronicznie i synchronicznie.

Pozwolę sobie wyjaśnić różnicę na przykładzie wizyty na poczcie w celu odebrania paczki, w której czynne jest jedno okienko. node.js-tutorial-jak-dziala

Scenariusz 1, poczta działa w Apache + PHP

Taką właśnie pocztę, (którą każdy z nas zna i czasem – chętnie lub niechętnie – odwiedza) można porównać do serwera Apache z PHP. Podchodzimy do okienka, podajemy pani awizo. Jest to nasz request do serwera. Pani zabiera awizo i idzie na zaplecze w poszukiwaniu naszej paczki. Przez ten czas my stoimy przy okienku i cierpliwe czekamy, aż nasz request do serwera przyniesie wynik, czyli aż nasza pani z poczty przyniesie paczkę z zaplecza.

Poczta działa synchronicznie. Do momentu aż pani z okienka do nas wróci, działanie poczty jest zablokowane. Nie możemy wydać innego polecenia (np. kupić znaczek albo pocztówkę), pozostali klienci również czekają. Nie możemy zrobić nic innego, serwer wykonuje nasz request i wykona kolejny dopiero wtedy, gdy skończy aktualny.

Scenariusz 2, poczta działa w Node.js

Natomiast gdyby poczta była stworzona w Node.js, nasza wizyta przebiegłaby mniej więcej tak: Wchodzimy na pocztę, podchodzi do nas pani obsługująca klientów. Wydajemy jej prośbę (przekazujemy awizo). Pani zabiera awiso, ale wcale nie idzie na zaplecze szukać naszej paczki, ale przekazuje je asystentowi – magazynierowi, który przejmuje to zadanie. Natomiast pani na poczcie gotowa jest w tym momencie obsłużyć kolejną prośbę – którą np. jest kupno znaczka. I analogicznie, pani bierze od nas pieniądze na znaczek i przekazuje je kasjerowi, który teraz przejmie od niej zadanie odszukania znaczka w asortymencice, zaksięgowania wpłaty w kasie, przyszykowania reszty itp. Pani obsługująca klientów może w tym czasie obsłużyć kolejną prośbę.

Jak zauważyłeś, pani na poczcie w tym scenariuszu jest cholernie obrotna. Celowo nie piszę już ‚pani z okienka’, bo pani nie ma czasu siedzieć w okienku. Biega od klienta do klienta, spełniając ich żądania.

Ale co z naszą paczką? Kiedy magazynier odnajdzie ją na zapleczu, przynosi ją do pani obsługującej klientów, a ona przekazuje ją nam. To obrazuje, dlaczego Node.js jest asynchroniczny. Poczta równolegle szukała naszej paczki (za sprawą magazyniera), a w międzyczasie obsługiwała inne prośby klientów.

Mam nadzieję, że to porównanie do poczty jest trafione i pomocne :). Jeszcze kilka słów podsumowania.

W założeniu, asynchroniczna poczta Node.js działa po prostu sprawniej niż synchroniczna poczta Apache. W powyższym porównaniu pani z okienka jest wątkiem serwera. Zatem zarówno Node.js jak i Apache (w domyśle, chociaż można go zmusić do innego trybu) działają w jednym wątku. Z tą róznicą, że Node.js działa asynchronicznie, a Apache synchronicznie. Chociaż dla wnikliwych, w przypadku Node.js mamy do czynienia z dwoma wątkami. W tym drugim, pobocznym wątku wykonują się działania magazyniera czy kasjerki przy kupowaniu znaczka, czyli instrukcje mające dziać się asynchronicznie, równolegle – tak aby główny wątek mógł w tym czasie nieprzerwanie robić coś innego. Generalne instrukcje wykonywane są przez jeden wątek, natomiast instrukcje asynchroniczne „przejmowane” są przez drugi wątek, który zwraca ich wynik do głównego wątku (paczka, znaczek). Wyniki układane są w kolejkę do tego głównego wątku (kto pierwszy ten lepszy), który zbiera je po kolei. Trochę więcej na ten temat znajdziesz w tym osobnym artykule na temat asynchronicznego Javascriptu.

Kurs Node.js – poznać i zrozumieć

Witaj w kursie Node.js, którego celem jest otwarcie Ci drzwi do tego środowiska programistycznego. Kurs składa się z szeregu tutoriali, w których opisuję jak postawić pierwsze kroki w Node.js, poznać jego najważniejsze funkcje i nauczyć się z nich poprawnie korzystać.

Każdy tutorial Node.js, który znajdziesz poniżej składa się na cały kurs. Jeśli zapoznasz się z nimi, powinieneś wiedzieć jak działa Node.js w swojej najważniejszej, asynchronicznej postaci, czym jest event loop, obiekty globalne, jak asynchronicznie zarządzać plikami (otwarcie, edycja, odczytywanie), komunikacja z innym serwerem poprzez web sockety i zapytania http. Dowiesz się również jak pracować z npm, czyli node package manager.

Do kogo skierowany jest ten kurs?

Sam dopiero poznaję tajniki Node.js, więc z pewnością nie zamierzam w tym miejscu pouczać wyjadaczy tego frameworka. Poniższe tutoriale skierowane są raczej do osób zaciekiowionych Node.js, którzy chcieliby sprawdzić ‚z czym to się je’. Jednakowoż dobrze, jeśli masz za sobą trochę praktyki w czystym Javascript, ponieważ programowanie w Node.js to właściwie programowanie w Javascript.

Zaawansowanych programistów również zapraszam do lektury i odświeżenia sobie podstaw. A także do komentarzy i zgłaszania usprawnień, lepszych praktyk lub własnych pomysłów :).

Kurs jest na bieżąco aktualizowany o nowe tutoriale, w miarę jak powstają.

Co to znaczy że Javascript jest asynchroniczny?

Stawiasz pierwsze kroki w Javascripcie? A może język ten towarzyszy Ci już od dawna, jednak dopiero od niedawna zaczynasz poznawać jego mechanikę, próbując zrozumieć logikę stojącą za wykonanym kodem? Ja, będąc samoukiem o bardziej backendowym doświadczeniu, należę do tej drugiej grupy. Przeglądając różne kursy i tutoriale, trafiałem raz po raz na to magiczne słowo ‚asynchroniczność’ – które w wielu przypadkach stanowiło wytłumaczenie dla jakiejś kwestii językowej, natomiast dla mnie było niezrozumiałe. Jeśli też szukasz informacji na ten temat, poniżej postaram się wytłumaczyć, dlaczego mówi się, że kod javascript jest asynchroniczny.

Zacznijmy jednak z innej strony, czyli co oznacza synchroniczny kod?

Javascript tak naprawdę nie jest w 100% asynchroniczny. Znaczna jego część działa również synchronicznie. Kod wykonywany synchronicznie to taki, który wykonuje się linijka po linijce w kolejności, jakiej został napisany. Oczywiście mam tu na myśli niekoniecznie cały plik ze skryptem ale także krótszy blok kodu, stanowiący swoją odrębną całość – np. funkcja, która potem może być wywoływana w innym miejscu. Przykład synchronicznego javascriptu mamy poniżej:

var age = 24;
console.log(age);
age = age + 1;
console.log(age);

Powyższy 4-wierszowy kod wykonuje się wiersz po wierszu, czyli jeśli skopiujesz ten kod i wkleisz do konsoli przeglądarki (śmiało, możesz zrobić to nawet teraz jak to czytasz), otrzymasz wynik:

24
25

Oto jak przeglądarka interpretuje powyższy kod. Najpierw zaglądamy do pierwszej linijki, gdzie nastąpiła deklaracja (a zarazem również inicjalizacja) zmiennej age oraz przypisanie jej wartości 24. To wszystko w pierwszym wierszu. Następnie przeglądarka przeszła do drugiej linijki, aby ją zinterpretować i wykonała znajdujący się w niej kod, ‚wypluwając’ do konsoli wartość zmiennej age za pomocą funkcji console.log(). Czyli 24. Następnie zwiększyliśmy wartość age o 1 (trzecia linijka), a w czwartej wypisaliśmy nową wartość (25) w konsoli – znów za pomocą funkcji console.log().

A teraz zobacz co się dzieje, gdy przed ostatnią linijkę wstawimy do wykonania inną funkcję (która działa właśnie asynchronicznie):

var age = 24;
console.log(age);
age = age + 1;
// start nowy fragment
$.get('plik.txt', function () { 
    console.log('Mam plik.txt, więc teraz wykonam asynchronczne instrukcje stąd.');
});
// end nowy fragment
console.log(age);

W rezultacie otrzymamy taki wynik:

24
25
Mam plik.txt, więc teraz wykonuję asynchronczne instrukcje stąd.

Rzut okiem na rezultat i już widzimy, gdzie tkwi różnica między kodem synchronicznym a asynchronicznym. Mimo, że dodaliśmy fragment wywołujący funkcję $.get przed kodem wyświetlającym wartość age = 25. to w wynikach mamy ewidentnie dowód na to, że skrypt tej funkcji (czyli console.log(Mam plik.txt, więc teraz wykonuję asynchroniczne instrukcje stąd.)) wykonał się później.

To dlatego, że $.get to funkcja asynchroniczna. Przeglądarka doszła do linijki, w której ją wywołujemy i synchronicznie wykonała tylko pierwszą jej część – oderwała się od głównego wątku w poszukiwaniu pliku plik.txt. Ale główny wątek nie czeka, aż plik zostanie odnaleziony (lub czy w ogóle) tylko bierze się za interpretację kolejnej linii (console.log(age)) i wyrzuca ją na ekran konsoli. Dopiero później do wątku wracają informacje o odnalezieniu pliku plik.txt oraz instrukcje, co należy w tym przypadku wykonać (jeśli plik nie zostałby znaleziony, możemy tu wyświetlić błąd). Zapisane są one w drugim parametrze tej funkcji, która notabene też jest funkcją. Jest to tzw. callback (call back – czyli „wykonaj po powrocie”), który wykonuje jedną operację po odnalezieniu pliku: console.log('Mam plik.txt, więc...');.

Plusy i minusy asynchronicznego Javascriptu

W powyższym przykładzie, dzięki temu że Javascript pozwala na asynchroniczne wykonywanie kodu, możemy cieszyć się niezaburzonym działaniem naszej aplikacji w razie gdyby ‚zgarnięcie’ pliku z serwera okazało się dłuższe, niż cierpliwość użytkownika:) Zamiast bezczynnie czekać na zwrot zawartości pliku, skrypt może w tym czasie wykonać inne rzeczy.

Z drugiej strony asynchroniczny kod sprawia, że dużym wyzwaniem staje się utrzymanie pełnej kontroli nad tym, kiedy i w jakiej kolejności wykonają się asynchroniczne fragmenty. Gdybyśmy do naszego powyższego kodu dodali jeszcze jedno wywołanie $.get…:

var age = 24;
console.log(age);
age = age + 1;
$.get('plik.txt', function () { 
    console.log('Mam plik.txt, więc teraz wykonam asynchronczne instrukcje stąd.');
});
// start: Kolejne wywołanie $.get
$.get('plik2.dat', function () { 
    console.log('Mam plik2.dat, więc teraz wykonam asynchronczne instrukcje stąd.');
});
// end
console.log(age);

… zaczęłyby się schody, ponieważ tak naprawdę nie wiemy, który z plików zostanie zgarnięty wcześniej i związana z nim funkcja callback wykona się pierwsza. Wpływ na to ma nie tylko rozmiar plików (który jest większy) ale też przepustowość łącza, obciążenie serwera w danym momencie itd. Nowoczesny javascript pełen jest programowania asynchronicznego, dlatego jeśli chcemy się w nim odnaleźć i być w nim dobrzy, musimy nauczyć się tworzyć kod, który będzie działać stabilnie niezależnie od tego, który asynchroniczny callback wykona się pierwszy. Co oczywiście w pewnych okolicznościach może być trudne.

Różnice między HTML a XHTML

Twórcy HTML5 zaimplementowali w nim 2 tryby parsowania danych – HTML oraz XML. W zależności od tego, w jaki sposób programista określi typ zawartości „Content-Type” w nagłówku dokumentu html, taki tryb parsowania (składni) zostanie przyjęty w całym dokumencie. Programista możę użyć następujących tagów do określenia składni:

Content-type: text/html

Content-type: application/xml+xhtml

Typ `text/html` charakteryzuje się poniższymi cechami:

  • Dokument musi zaczynać się definicją !DOCTYPE html.

    <!DOCTYPE html />

  • Nie jest wymagane stosowanie otwierających lub zamykających znaczników dla wszystkich tagów,

    <p> Tu jest pierwszy akapit. <p> A tu drugi, zauważ że nie zamknęliśmy poprzedniego...

  • Tylko elementy nie obejmujące innych mogą (ale nie muszą) być zamykane za pomocą />. Np. br, img, hr, link,

  • Tagi i atrybuty można pisać zarówno małymi jak i wielkimi literami bez wpływu na działanie strony,

    <span>Jakiś tekst</spAN>

  • Wartości dla atrybutów nie muszą być w cudzysłowiach,

    <img src=obrazek.jpg />

  • Można stosować puste atrybuty (checked, disabled), Nie trzeba stosować znaków unikowych dla znaków specjalnych,

Natomiast XML to drugi tryb składni, który może być stosowany. Jest on dużo bardziej restrykcyjny i nazywa się go również XHTML. Innymi słowy, XHTML jest to kod HTML zapisany za pomocą składni XML. W nagłówku dokumenty określany jest jako Content-Type: application/xml+xhtml.

Cechy charakterystyczne XHTML:

  • Wszystkie elementy muszą mieć tag otwierający,
  • Wszystkie elementy, które mogą obejmować inne muszą mieć tag zamykający (np. ‚p‚, ‚span‚, ‚div‚),
  • Elementy można zamykać za pomocą />, Rozmiar ma znaczenie 🙂 – należy używać jednolitego rozmiaru liter dla tagów i atrybutów (z reguły jest to zapis małymi literami),
  • Wartości atrybutów muszą być zawierane w cudzysłowie Nie można stosować pustych atrybutów (zamiast disabled, stosujemy disabled = "disabled" itd.)
  • Znaki specjalne muszę być być zastąpione wersjami unikowymi.

Z powyższych informacji łatwo wysnuć wniosek, że stosowanie składni XHTML może przyprawić o większy ból głowy, z kolei składnia text/html jest dużo bardziej „liberalna” i ma większą tolerancję na różne sposoby pisania kodu.

WordPress dla początkujących

Witaj w kursie WordPressa dla początkujących.

W tym kursie online nauczysz się uruchomić i rozwinąć własną stronę na WordPressie. Proste, łatwe do przyswojenia lekcje zabiorą Cię przez proces tworzenie kompletnej, funkcjonalnej i profesjonalnej strony, o jakiej zawsze marzyłeś/aś. Nieważne, do jakich celów chcesz stworzyć stronę. Ten kurs pomoże Ci założyć stronę internetową każdego kalibru stronę dla firmy, stroną hobbystyczną czy nawet e-sklep.

Szczególnie, jeśli nie masz do czynienia z tworzeniem stron i pragniesz dopiero zgłębić ten temat.

Autor kursu podchodzi do tworzenia strony kompleksowo – dowiesz się także jak zamówić domenę dla swojej strony (czyli adres internetowy), zainstalować WordPressa, przygotować wygląd i treści, a w końcu uruchomić stronę online.

Ten obszerny, a jednocześnie łatwy do przyswojenia kurs online od podstaw nauczy Cię:

  • jak założyć adres dla swojej strony
  • jak założyć konto hostingowe dla strony na WordPress
  • jak zainstalować i skonfigurować WordPressa
  • jak dostosować WordPressa do swoich potrzeb, aby uzyskać efektowną stronę i odpowiednie funkcjonalności
  • jak instalować wtyczki i zarządzać nimi w celu rozsszerzenia możliwości Twojej strony WordPress
  • wykorzystać potencjał ustawień WordPressa do potrzeb Twojej strony
  • jak testować funkcjonowanie strony na WordPressie, wyszukiwać i poprawiać błędy
  • jak opublikować stronę na WordPressie w Internecie

Dla kogo jest ten kurs? Ten kurs WordPressa online kierowany jest przede wszystkim do początkujących – osób na co dzień niezwiązanych z tematyką budowy stron. WordPress został stworzony z myślą o zachowaniu prostoty obsługi i umożliwia stworzenie atrakcyjnej strony oraz późniejsze jej zarządzanie przez każdego.

Dlatego w tym kursie nie rozmawiamy o skomplikowanym kodowaniu w HTML czy PHP, ale podejmujemy drogę do budowy strony, którą może podjąć każdy, bez względu na stopień doświadczenia z Internetem i stronami WWW. Możesz nie mieć pojęcia o tworzeniu stron, a po tym kursie w kilka godzin będziesz cieszyć się własnym nowoczesnym serwisem WWW.

Krótki opis AngularJS

AngularJS powstał kilka lat temu jako biblioteka Javascript, chociaż sami twórcy używają w stosunku do niego określenia framework, a nawet superheroiczny framework. Zamiast rozwodzić się nad słówkami, podsumujmy po prostu kilka faktów o AngularJS.

czym-jest-angular-js-kurs

Czy AngularJS to framework?

AngularJS ma kilka cech, które rzeczywiście pozwalają nazywać go frameworkiem. Konkretnie frameworkiem Javascript. Jakie to cechy? Narzuca programistom pewne schematy, które muszą przyjąć przy organizowaniu struktury swoich aplikacji i generalnie przy kodowaniu. Aby to ułatwić, AngularJS oferuje gotowe, zdefiniowane już instrukcje, a także całe moduły, które możemy wykorzystywać w naszych aplikacjach. Dotyczą one np. tworzenia szablonów i layoutów, filtrowania danych, czy też ich dynamicznego ‚doczepiania’, znanego pod terminem ‚data binding’. Jeśli miałeś styczność z jakimiś frameworkami (niekoniecznie Javascript), z pewnością rozumiesz, że takie właściwości pozwalają określać tym terminem również Angulara. Jeśli przyjmiemy ten narzucony przez framework styl tworzenia kodu, będziemy korzystać z oferowanych przez niego w tej materii rozwiązań, najczęściej otrzymamy w zamian wygodę, komfort, upłynnienie procesu tworzenia aplikacji itp.

AngularJS i aplikacje SPA

Kolejnym znanym faktem o AngularJS jest jego wsparcie do tworzenia aplikacji działających w obrębie jednej, pojedynczej strony – z ang. Single Page Applications. Oznacza to, ze bez względu na to jak zaawansowaną aplikację napiszemy, wystarczy otworzyć ją w przeglądarce internetowej tylko raz, później nie musi się nic przeładowywać ani przekierowywać na inne strony – przez cały czas korzystania z aplikacji użytkownik pozostaje na tej jednej stronie. Oczywiście to nie oznacza, że aplikacje tworzone w AngularJS są jakoś ograniczone. Jak najbardziej w obrębie tej jednej strony, za pomocą routingu możemy wyświetlać zróżnicowaną zawartość tak, że odbiorca końcowy ma wrażenie, że przechodzą do różnych części aplikacji, ale technicznie będą cały czas pozostawać w obrębie jednej strony. Zaletą Single Page Applications jest niewątpliwie prędkość wczytywania danych i ogólna szybkość działania aplikacji, ponieważ nie musimy przeładowywać stron, a wyświetlamy tylko taką zawartość, jaka w danej chwili jest nam potrzebna.

AngularJS to javascript

I wreszcie trzecia cecha charakterystyczna AngularJS, o której wspomniałem już we wstępie – opiera się na Javascript. Jeśli masz doświadczenie z pisaniem skryptów w tym języku, opanowanie AngularjS powinno być dla Ciebie dużo łatwiejsze. Zanim weźmiemy się za AngularJS, warto poznać najpierw przynajmniej podstawy javascript.

Jak zainstalować AngularJS i odpalić pierwszy skrypt

Ta lekcja kursu AngularJS: Kurs Podstawowy. dostępna jest również w wersji video. Możesz obejrzeć ją tutaj:

W tym artykule dowiesz się jak wykonać pierwsze kroki w AngularJS – głównie jak zainstalować ten framework w swoim serwisie WWW, aby móc korzystać z jego zalet. Stworzymy także prostą aplikację, która sprawdzi, czy poprawnie zainstalowaliśmy bibliotekę AngularJS. Finalny projekt możesz zobaczyć pod przyciskiem Demo z prawej strony lub pod tym linkiem. Gotowy? Zaczynamy!

Zaciąganie AngularJS lokalnie lub z sieci CDN

Dodawanie frejmworku AngularJS do projektu jest proste. Przebiega w taki sam sposób, jak dodawanie każdej innej biblioteki. Wchodzimy na stronę angularjs.org i mamy na niej kilka możliwości pobrania bibliotek. Najszybciej będzie kliknąć na przycisk Download. Wyświetli się okienko gdzie możemy doprecyzować, jaką wersję AngluarJS chcemy pobrać:

sciagnac-angularjs

Możemy wybrać, czy ma być wersja stabilna (stable) czy nowsza, ale niekoniecznie stabilna (unstable).
Tak samo możemy wybrać wersję skompresowaną (minified) lub nieskompresowaną. Skompresowana to znaczy skrócona, głównie w celu zmniejszenia rozmiaru pliku. W tej wersji wszystkie zmienne maja krótsze nazwy, nie ma w niej komentarzy itd. Natomiast wersja nieskompresowana posiada to wszystko, a więc pozwala zajrzeć do kodu angulara napisanego przez jego twórców. Możemy także pobrać całą paczkę spakowaną w formacie zip. Mamy także dostępny link do CDN, czyli content delivery network, inaczej „sieci dostarczania treści”. Sieć CDN poprawia szybkość wczytywania strony dla użytkowników – istnieją rozproszone po całym świecie tak zwane punkty dostępowe, a plik ładowany jest użytkownikowi z takiego punktu dostępowego, który jest najbliżej jego lokalizacji. Także zasadniczo CDN ma same zalety, ale jest tez jedna wada. Jeśli planujesz pracować nad projektem lokalnie, bez dostępu do Internetu, wtedy AngularJS nie będzie działał, ponieważ nie bedziesz miał go pobranego lokalnie na swój komputer. Z tego względu ja ściągnę bibliotekę i będę ładował ją do pliku z lokalnego komputera.

Pod sekcją Extras kryją się przeróżne dodatki:

angularjs-moduly

Czasem do swojej aplikacji możesz potrzebować dodatkowych modułów AngularJS, które wzbogacą go o jakieś funkcjonalności. Wtedy znajdziesz je tutaj. Ale wracamy do naszej instalacji. Klikamy Download:

pobieranie-bibliotek--angularjs

Tworzenie struktury katalogów projektu

Pobrałem bibliotekę na dysk, otwieram wiec mój folder, gdzie zapisuje pobrane pliki z Internetu, a na pulpicie utworzę nowy folder i dam mu nazwę Projekt. Kopiuje pobraną bibliotekę do mojego folderu. Wewnątrz stworzę kolejny folder na moje biblioteki, dam mu nazwę biblioteki. Wchodzę do tego folderu i wewnątrz tworze kolejny folder o nazwie angular. To będzie miejsce na wszystkie pliki angularjs naszego projektu. Wypakowujemy więc tutaj plik angular.min.js który przed chwila pobraliśmy. Tak wygląda struktura folderów aplikacji po powyższych operacjach:

angularjs-kurs

Tworzenie pierwszego kodu aplikacji

Możemy teraz przystąpić do ‚mięsa’ – czyli kodowania. Otwieramy edytor tekstowy – ja akurat używam programu Brackets, ale możesz to robić np. w NotepPad++ lub nawet notatniku – jak komu wygodniej. Przenosimy folder projektu na obszar roboczy na belkę po lewej stronie Brackets, aby mieć całe drzewo katalogów projektu w programie. Następnie tworzymy plik html w glównym folderze Projekt. W Brackets robimy to poprzez kliknięcie prawym przyciskiem i wybranie opcji do tworzenia nowego pliku.

instalacja-angularjs

Wpisujemy nazwę index.html. Wpiszmy teraz podstawowy, naprawde podstawowy schemat strony html:

<!doctype html>
<html lang='pl'>
<head>
    <meta charset="UTF-8">
    <title>Projekt AngularJS</title>
</head>
<body>
</body>
</html>

W tagach tytuł wpisujemy np. Projekt AngularJS.

Dodawanie biblioteki AngularJS

Okej, mamy więc prostą stronę HTML. Aby zmienić ją w aplikację angularJS, musimy najpierw zaciągnąć tę bibliotekę. Zwykle wszelkie biblioteki Javascript dodaje się na dole strony, jednak w przypadku AngularJS warto zrobić to na górze. Dlaczego? Ponieważ angularJS można „miesza” dużo przy tagach html i szablonie layoutu, więc lepiej dodać go na górze, aby załadował się przed tagami html. Wpisuje tag script pod tytulem, następnie atrybut src i tutaj dodaję sciezkę do pliku angularj.min.js:

<script src="biblioteki/angular/angular.min.js"></script>

Jak pamiętamy, skopiowaliśmy go do folderu biblioteki, następnie angular. Ale to nie wszystko, musimy jeszcze wskazać bibliotece angularJS, że ten kod html w tym pliku index.html będzie naszą aplikacją. Robimy to poprzez dodanie atrybutu ngAPP w tagu html, który mamy na początku aplikacji:

<html lang='pl' ng-app>

Z punktu widzenia angularJS ten atrybut nazywa się dyrektywą. AngularJS rozumie dyrektywy jako komendy, które mu wydajemy. Także za każdym razem gdy widzisz słowa „dyrektywa AngularJS”, chodzi o jedno z takich specjalnych poleceń, które wydajemy bibliotece. Dyrektyw jest wiele, wszystkie opisane są w dokumentacji, np. więcej na temat tej dyrektywy ng-app dowiesz się na tej stronie. Wszystkie dyrektywy AngularJS zaczynają się od liter ng oraz myślnika, po którym następuje nazwa danej dyrektywy. Dyrektyw nie musimy używać na całym dokumencie w tagu html, ale możemy ich uzywać również w poszczególnych sekcjach, divach, elementach strony. Dzięki temu łatwo stosuje się AngularJS razem z innymi frameworkami, jak Jquery.

Pierwszy skrypt AngularJS

Teraz sprawdzmy, czy w ogóle zrobiliśmy wszystko poprawnie, czy AngularJS działa jak należy. Dodajmy gdzieś w sekcji body pole input. Dajemy type ‘text’ i teraz najważniejsze – dajemy atrybut ng-model o wartości IMIĘ. Cały kod wygląda w ten sposób:

<!doctype html>
<html lang='pl' ng-app>
<head>
    <meta charset="UTF-8">
    <title>Projekt AngularJS</title>
    <script src="biblioteki/angular/angular.min.js"></script>
</head>
<body>
    <input type="text" ng-model="Imie"/>
</body>
</html>

Czyli ten atrybut jest dyrektywą AngularJS, za jej pomocą wysyłamy żądanie o znalezienie modelu o nazwie ‘imie’. Teraz poniżej dodajemy nagłówek h2 i wpisujemy w nim tekst: Witaj,, następnie otwieramy i zamykamy podwójne nawiasy klamrowe, w którym wpisujemy słowo imie.

<input type="text" ng-model="Imie"/>
<h2>Witaj {{Imie}}</h2>

W ten sposób dyrektywa ng-model spowoduje połączenie pola input z tym nagłówkiem. Gdy zapiszesz teraz plik index.html i otworzysz go w przeglądarce, następnie wpiszesz swoje imię w pole input, od razu pokaże się ono również w nagłówku poniżej.

jak-zainstalowac-angualrjs

Jak działa dyrektywa ng-model

Dyrektywa ng model łączy elementy formularza, takie jak pole tekstowe, pole select czy obszar tekstu textarea z właściwością $scope. Czym jest scope dowiesz się dokładnie w kolejnych lekcjach, ale jak widzisz ta dyrektywa świetnie pokazuje magię angularJS – szybko możemy połączyć jeden element formularza z innym miejscem w szablonie strony czy aplikacji i wyświetlać jego wartości DYNAMICZNIE bez odświeżania strony. Te podwójne kwadratowe nawiasy w nagłówku {{}} w AngularJS określa się elementami szablonu. Głównie służą one do wyświetlania informacji użytkownikom końcowym – w naszym przypadku wyświetlana jest aktualna wartość pola tekstowego powyżej nagłówka – dzięki połączeniu tych dwóch elementów przez dyrektywę ng-model. Podwójne klamry mogą być też wyrażeniami – czyli skomplikowanymi działaniami arytmetycznymi, wyświetlającymi ich wynik. W tym wypadku nasze wyrażenie jest proste – wyświetlenie wartości zmiennej imie.

Łączenie danych w AngularJS czyli data binding

Jeśli znasz Javascript, wiesz ze uzyskanie takiego efektu jaki mamy teraz w naszej aplikacji, (że cokolwiek wpiszę w pole wyświetla się od razu w tagu ‚h2’ poniżej) zajęło by dużo czasu i sporo linijek kodu. Tymczasem AngularJS czyni to szybko i jak widzisz dość efektownie. Takie łączenie elementów szablonu html ze sobą przez dyrektywy i wyrażenia AngularJS nazywa się z angielskiego data bajnding. Czyli łączenie danych. Oznacza że dane w naszym modelu są bezpośrednio połączone z wyrażeniem. I jeśli zmienimy jedno, natychmiast spowoduje to zmianę drugiego.

Mam nadzieję że ten artykuł pomógł Ci „liznąć” AngularJS i pokazał Ci, jak duży drzemie w nim potencjał. Zapewniam Cię, że w miarę zgłębiania tego języka skryptowego, poznasz kolejne nie mniej pasjonujące elementy.