Podstawy Programowania: Korzystanie z zewnętrznych modułów

0:00Zobaczyłeś już w jaki sposób można tworzyć

0:02własne moduły a więc dzielić kod na różne pliki,

0:05natomiast teraz pokażę Ci to z czym się

0:07naprawdę na co dzień pracuje w pracy programisty a więc jak korzystać z

0:12zewnętrznych zasobów czyli z bibliotek, które ktoś inny już stworzył. I w tym celu

0:16będziemy chcieli sobie zainstalować taką bibliotekę Moment.js, która pozwoli nam

0:20tutaj w zamówieniu gdzie mieliśmy naszą metodę getDate i sami formatowaliśmy

0:24w taki sposób datę pozwoli nam ją sformatować w prostszy sposób.

0:28Teraz to nie oznacza, że jeżeli mamy do

0:31napisania tutaj kilka linijek własnego kodu to lepiej jest ściągnąć jakąś bibliotekę,

0:35która zajmuje znacznie więcej i skorzystać z jednej z metod, którą ona oferuje

0:40jeżeli ona oferuje np.

0:41100 metod. Tutaj oczywiście trzeba ważyć kiedy

0:44warto coś samemu napisać a kiedy warto skorzystać z gotowego rozwiązania.

0:48Natomiast nie to jest celem tej lekcji aby

0:50rozważać na ten temat tylko to jak zainstalować sobie taką paczkę.

0:54Będę chciał Ci to pokazać i to będzie zależne w różnych platformach, w różnych językach

0:58programowania od tego jakie narzędzia są tam dostępne.

1:01Więc znowu tutaj bardzo mocno nie skupiajmy się na tym jakie mamy narzędzia tylko co

1:06to znaczy, że możemy coś pobrać z zewnątrz i z tego skorzystać.

1:09Dlatego, że i w języku PHP takie narzędzia

1:11będą i w Ruby i w bardzo wielu innych językach. Co jest dla nas najważniejsze,

1:15to w momencie jak sobie zainstalowaliśmy Node,

1:18którego wersję można zwrócić w ten sposób, automatycznie zainstalowało nam się coś takiego

1:22jak npm również nam tutaj zwróci wersję

1:25i jest to właśnie taki Package Manager, który pozwala nam pobierać paczki kodu czyli

1:30właśnie takie moduły, które ktoś już stworzył.

1:32Swoją drogą moglibyśmy stworzyć własne i opublikować je w internecie, ktoś mógłby

1:37również z nich skorzystać. I teraz gdzie możemy szukać takich rozwiązań.

1:41Mamy taką stronę jak npmjs.com i

1:44właśnie tutaj możemy szukać tych modułów, które będą dostępne przez to polecenie npm,

1:48które tutaj przed momentem wpisałem.

1:50I wyszukamy sobie takiej paczki, która nazywa się moment, zauważ, że ona tutaj jest a pod

1:55spodem wszelkie inne, które znaleźliśmy. Przejdziemy tutaj i mamy taką stronę

1:59dokumentacji, która nam mniej więcej mówi jak z tego skorzystać,

2:03chociaż więcej możemy dowiedzieć się

2:05przechodząc na stronę momentjs, którą mamy tutaj link, zaraz tam przejdziemy.

2:10Natomiast najważniejsze jest to jak zainstalować sobie taką paczkę. I w

2:14przypadku npm najpierw musimy utworzyć taki specjalny plik Package.json, który

2:18będzie przechowywał informacje na temat wszystkich zależności naszego projektu.

2:23Robimy to wpisując npm init i jeżeli bym teraz wcisnął Enter to

2:26musiałbym odpowiedzieć na serię różnych pytań.

2:29Jeżeli nie chcę tego robić, chcę to zrobić szybko to dopisujemy coś takiego

2:33i to oznacza, że odpowiadamy yes na każde z pytań, które by się tu mogło pojawić.

2:37Wygeneruje nam się taki plik, tutaj nam pokazało jego treść ale co ważniejsze on jest tutaj.

2:42I teraz jak wejdziemy do tego pliku jest to plik json,

2:46o json nie mówiliśmy w tym kursie ale jest to taka struktura danych, która pozwala nam

2:50przechowywać wartości klucz wartość podobnie jak obiekty w języku JavaScript,

2:54bardzo podobnie to wygląda ale jest to zwykły plik tekstowy,

2:57nie jest to plik języka JavaScript.

2:59Teraz kiedy mamy taki plik, tutaj po prawej

3:02stronie sobie to wyczyszczę, to będziemy mogli ten moment sobie zainstalować,

3:05takim poleceniem jak jest tutaj npm i moment, wpiszmy,

3:09można też wpisać pełną wersję czyli install ale wystarczy skróconą czyli i moment

3:14i to nam z internetu pobierze tę paczkę i zainstaluje nam ją w naszym folderze. Ok, tutaj sobie wyczyszczę,

3:22ona została zainstalowana i to co jest

3:24najważniejsze to do tego pliku Package.json zobacz został dodany taki klucz dependenciec

3:28i tutaj taki kolejny obiekt gdzie mamy nazwę zależności i jej wersję.

3:33To jest właśnie po to, że kiedy nasz

3:34projekt będzie gotowy i przekażemy go komuś innemu, to on będzie mógł mając plik

3:39Package.json wpisać npm install nie podając tutaj moment ani nic innego

3:44i wtedy npm sprawdzi sobie wszystkie

3:46zależności, które znajdują się w tym pliku i pobierze je z internetu.

3:50Natomiast teraz mógłbyś zapytać gdzie się nam ten moment pojawił.

3:53Nigdzie tego nie widzisz. Dlatego, że ja w swoim edytorze tutaj mam wykluczone

3:57pokazywanie katalogu node_modules bo nie jest on dla nas istotny,

4:00natomiast jeżeli bym sobie otworzył ten plik czy ten folder w zasadzie w Finder

4:06czyli na Windowsie będzie to Eksplorator plików, zobaczy ten folder jest tutaj, to

4:11pojawił się tam katalog node_modules. I on właśnie zawiera moment

4:15I tu jest cała ta biblioteka. Nie musisz się martwić tym, że tu jest dużo rzeczy ale

4:19wiadomo, że gdzieś tutaj jest kod, który nas interesuje. Taki jak Moment.js. Czyli

4:24ktoś napisał taką bibliotekę, udostępnił ją i my teraz nie możemy korzystać w ogóle

4:28nie zagłębia się w to jak ona działa pod spodem, bo nie to jest naszym zmartwieniem.

4:33Natomiast to znajduje się właśnie w katalogu node_modules, który jak wspomniałem

4:35wykluczyłem żeby u mnie się nie pokazywał. I teraz jak my będziemy nasz projekt gdzieś

4:40udostępniać to nie będziemy go udostępniać z tym katalogiem node_modules

4:43tylko właśnie z plikiem Package.json i

4:46ktoś, jakiś inny programista z naszego zespołu jeżeli wpisze tutaj

4:49tak jak mówiłem npm install to

4:51automatycznie mu się ten katalog node_modules utworzy i wszystko się pobierze.

4:55Więc zainstalowaliśmy sobie teraz jedną z paczek taką pobranych z Internetu.

5:00No i teraz będziemy chcieli z niej skorzystać

5:02dlatego przejdziemy sobie do pliku, w którym chcemy to zrobić.

5:05Nie musimy tego robić tutaj w tym pliku Index.

5:07Możemy to zrobić tam gdzie jest nam to potrzebne.

5:09Więc ja chciałbym zamienić naszą funkcję

5:12getDate, którą tutaj mieliśmy, która nam formatowała

5:15to w ten sposób na użycie właśnie tej biblioteki moment.js

5:19Dlatego ta biblioteka będzie nam w tym pliku potrzebna

5:22a więc w tym pliku na górze możemy powiedzieć

5:24const utworzyć stałą moment i powiedzieć require,

5:28to co robiliśmy w lekcji poprzedniej,

5:30ale w lekcji poprzedniej w tym pliku podawaliśmy taką ścieżkę

5:34kropka, slash żeby powiedzieć, że

5:37chcemy w tym samym katalogu znaleźć plik order i go zaimportować.

5:40Natomiast jak coś importujemy z tych pobranych z internetu paczek, które

5:43znajdują się w katalogu node_modules to nie musimy tutaj pisać node_modeles itd.

5:48tylko podajemy nazwę,

5:50w tym przypadku moment w ten sposób i node po prostu wie, że jak tutaj nie ma żadnej

5:55ścieżki takiej lokalnej to ma wyszukać paczki moment w katalogu node_modules.

6:00Tyle wystarczy zrobić i okazuje się, że

6:02teraz pod stałą moment będziemy mieli dokładnie to co programista tego modułu

6:07wyeksportował. Czyli tak jak my tutaj w pliku Order.js

6:10na końcu mówiliśmy

6:11eksportujemy tę klasę i jak ktoś sobie zaimportuje

6:16ten plik to mu zaimportujemy właśnie taką klasę.

6:19To tutaj tak samo programista tego momentu

6:22coś wyeksportował dla nas i jak my zaimportujemy poprzez require

6:25mamy to tutaj pod moment.

6:27Dokładnie tak to będzie wyglądać.

6:29I teraz jest dobry czas żeby przejść tutaj na stronę momentjs

6:33i tutaj w dokumentacji znaleźć jak się z tego korzysta. Właśnie na tym to polega, że

6:38jak znajdujemy jakieś rozwiązanie w internecie to możemy w dokumentacji

6:41poczytać jak z tego skorzystać. Nie musimy zaglądać do kodu, który ktoś napisał.

6:45Więc przejdziemy sobie do dokumentacji i tutaj jak się dobrze przyjrzymy to

6:49widzimy, że jak wywołamy to moment to co zaimportowaliśmy, że to jest jakaś

6:53funkcja i ona będzie zwracać jakiś obiekt bo widzimy, że po kropce można się

6:58odwoływać do kolejnych rzeczy. Więc jak po kropce się do czegoś odwołujemy,

7:01to znaczy, że ta funkcja zwraca nam jakiś obiekt.

7:04I teraz możemy do tej metody tutaj, do tej funkcji w zasadzie przekazać datę i to nam zwróci

7:10taki obiekt, na którym będzie wiele różnych metod.

7:13I ja będę chciał odpowiednio to wyświetlić więc zobacz ile tutaj mamy rzeczy,

7:17ale ja przejdę do Display żeby Ci pokazać, że możemy skorzystać z funkcji czy tutaj w

7:22zasadzie z takiej metody format i podać odpowiednio np.

7:26dd mm itd.

7:28I co ciekawe jeżeli podamy sobie dwa razy MM to nam zwróci miesiąc z tej daty z

7:33takim zerem na początku, coś czego my nie mieliśmy.

7:36Jak podamy tylko duże M to nam zwróci

7:38bez tego zera na początku. Więc zobaczmy jakby nam to mogło działać, jak byśmy mogli zastąpić

7:43naszą funkcję getDate, która tutaj była właśnie żeby skorzystała z momentu.

7:48Wiemy, że pod this.date mamy datę i my tą

7:51datę będziemy chcieli do momentu przekazać. Bo jeszcze raz jak zerkniemy na stronę

7:55dokumentacji, jak wywołamy tylko funkcję moment i nic nie podamy

7:58to ona bierze aktualną datę jako tą datę, którą chcemy formować. A ja

8:03chcę tutaj podać konkretną datę. Więc będę chciał tutaj utworzyć sobie, może zróbmy

8:07taką stałą, którą nazwę date, wywołam moment i przekaże tutaj this.date.

8:13Zobacz, ja teraz wywołałem jakąś funkcję,

8:15którą zaimportowaliśmy z paczki pobranej z internetu,

8:18nie wnikam w to co ona robi pod spodem,

8:20wystarczy, że według dokumentacji będę korzystał z jej metod.

8:24Mieliśmy to this.date tutaj a to jest dokładne to co tu

8:28przekazaliśmy, czyli jakąś datę i teraz to po prostu przekazałem do tej

8:32funkcji moment. Cała ta funkcja zwróciła jakiś obiekt,

8:36zapisałem go pod stałą date i ten obiekt

8:38ma różne metody. Jedną z tych metod jest właśnie metoda, zobaczmy sobie tutaj, format.

8:44Tylko, że tutaj ktoś z tego skorzystał

8:47w taki sposób, że od razu moment i od razu format a ja sobie to co moment zwraca

8:51zapisałem w stałej i dopiero będę korzystał z kropka format.

8:54To działa dokładnie tak samo.

8:55Więc zwróćmy tutaj i będziemy chcieli po prostu z tej naszej funkcji getDate zwrócić date

9:01czyli odwołuje się już do tej stałej, która

9:03z momentu coś przechowuje i następnie format

9:08i będziemy chcieli to sformować zgodnie z tą dokumentacją czyli podajemy taki string

9:13i jeszcze raz wrócę sobie tutaj i będę chciał mieć na początku dzień czyli poszukajmy dzień.

9:19Jeżeli chcę mieć dzień i na początku żeby było 0:1 0:2 to dwa razy duże D.

9:24Zapiszmy to sobie, dwa razy duże D, potem chcę mieć kropkę tak jak mieliśmy do tej pory,

9:30potem miesiąc, zrobimy sobie dwa razy duże M

9:34miesiąc i pełny rok,

9:35poszukajmy w dokumentacji jak to wygląda.

9:38Podajemy cztery razy y.

9:39To będzie pełny rok.

9:41I zauważ, że jak się nad tym zastanowimy

9:43my cały czas tutaj korzystamy z języka JavaScript tu nie ma jakiejś specjalnej

9:47magii, po prostu ktoś kto stworzył tą bibliotekę moment pozwala do metody format

9:51przekazać zwykły string. I pod spodem gdzieś analizuje czy tam jest np.

9:56DD i co ma za to podstawić jak to podstawiać itd. tego

10:00w tym kursie nie pokazywaliśmy jak możemy bardziej manipulować na takich ciągach znaków ale

10:05zapewniam Cię, że to wszystko jest możliwe i w języku JavaScript i w innych.

10:09Więc tutaj my nie musimy się tym martwić przekazujemy string, w którym podajemy

10:13jakby taki schemat, taki szablon według dokumentacji co chcemy mieć.

10:16Gdybym zamiast kropek pomiędzy tymi

10:18wartościami chciał pauzy to muszę je tylko tutaj wpisać.

10:21I okazuje się, że teraz ta metoda format

10:24zwróci nam kolejny string czyli już sformatowaną datę

10:28i to właśnie my zwrócimy z naszej funkcji getDate. A przypomnę Ci, że z tej funkcji

10:32korzystaliśmy w innej naszej metodzie czyli tutaj w getInfo.

10:37Jeżeli będę chciał sobie to uruchomić i

10:39zapisać, przejdziemy tutaj, tu wszystko się dzieje ale musimy sobie to

10:44uruchomić wpisując nodemon -q index.js

10:48zauważ, że wszystko działa jak należy.

10:50I mamy ładnie sformatowaną datę czyli nasz program działa identycznie jak wcześniej

10:54ale teraz korzystamy z biblioteki moment.js

10:57i jeżeli w którymś momencie stwierdzę, że

10:59chcę to sformatować inaczej czyli tak jak jest tutaj pokazane a więc np.

11:04będę chciał wyświetlić January, February itd to skorzystam z trzech M,

11:09zobaczmy czy by nam to zadziałało.

11:123 razy M zapisuje i teraz rzeczywiście

11:14mamy 0:2 Drugi Mar jak marzec to jest w języku angielskim,

11:18ale co ważne możemy tutaj ustawić

11:20specjalnie tłumaczenie na język polski to też można znaleźć dokumentacji i wtedy

11:24tutaj byłoby zamiast Mar to my moglibyśmy mieć po prostu Marzec.

11:28Tak więc to wszystko jest możliwe i zauważ w jak prosty sposób możemy to zmienić.

11:32Nie interesuje nas jak to wszystko działa pod spodem, to jest kod, który ktoś już

11:35napisał i udostępnił w formie takiego modułu.

11:38Mam nadzieję, że na tym przykładzie widzisz jak potężne daje nam możliwości

11:43korzystanie z różnych bibliotek, które ktoś już napisał i udostępnił w internecie

11:48i teraz najważniejsze jest abyś Ty jako

11:49programista potrafił realizować swoje cele.

11:52Czyli jeżeli masz do zrobienia jakiś

11:54program to nie wynajdywał koła na nowo ale korzystał z tych komponentów, które już są

11:58i dopisywał własne, które są niezbędne żeby taki program działał.

12:02Jeśli natomiast chodzi o same narzędzia

12:04tak jak tutaj skorzystaliśmy z npm to jak będziesz korzystał z języka PHP to tam

12:08jest narzędzie, które nazywa się Composer i działa praktycznie identycznie.

12:12Tak więc w każdym języku programowania znajdziesz podobne narzędzia, które

12:15pozwalają Ci pobierać z Internetu jakieś moduły i z nich korzystać.

12:19Nie jest ważne jak to zrobić,

12:20ważne jest, że można to zrobić i żeby rozumieć po co taką operację się wykonuje.