Narzędzia JavaScript Full-Stack Web Developera: CLI

0:00Nie wiem czy zdajesz sobie z tego sprawę, ale w przypadku znajomości JavaScriptu i w

0:04szczególności Node.js możesz tworzyć również aplikacje, które

0:08niekoniecznie będą posiadały graficzny interfejs i będą działać np.

0:12w przeglądarce, ale mogą funkcjonować bezpośrednio w terminalu.

0:15Inaczej mówiąc chodzi mi tutaj o aplikacje CLI.

0:18Taki rodzaj aplikacji może funkcjonować totalnie niezależnie lub też

0:22być częścią Twojego istniejącego projektu i tym samym być odpowiedzialnym za

0:26realizowanie jakiś ściśle określonych zadań, np.

0:29tych dotyczących deploymentu Twojej aplikacji.

0:32Zatem na początku upewnij się tylko, że

0:34mam ustawioną właściwość type na module ze względu na to, że chciałbym tutaj

0:38wykorzystywać ES modules a nie CommonJS.

0:41Przypomnę tylko, że jest to sposób

0:43importowania modułów, w przypadku którego zamiast funkcji require do importowania

0:47modułów wykorzystujemy słowo kluczowe import from.

0:51I teraz kolejnym krokiem będzie dodanie

0:53tutaj jeszcze skryptu inicjalizucjącego, którego zadaniem będzie nic innego jak

0:57wykonanie z pomocą Node.js skryptu zapisanego w katalogu bin initialize.

1:02W związku z tym utworzymy sobie ten plik,

1:04wewnątrz którego na początku zastosujemy prosty console log.

1:08Nie stanowi chyba tutaj zaskoczenia, że w momencie uruchomienia tego skryptu

1:12wyświetli nam się tekst zapisany w Console logu.

1:15Cała magia zaczyna się w momencie, gdy uświadomimy sobie, że z pomocą Node.js

1:19jesteśmy w stanie napisać tutaj skrypt, który zarówno może kontaktować się z

1:23zewnętrznymi usługami lub też wykonywać różnego rodzaju aplikacje na aktualnej

1:27maszynie i mam tutaj na myśli chociażby manipulację plikami.

1:31Zatem raz jeszcze chciałbym podkreślić, że

1:33tego rodzaju skrypty możesz wykorzystać na potrzeby np.

1:35automatyzacji powtarzalnych zadań lub też np.

1:38jako narzędzie, które pozwolą Ci szybko wystartować jakiś projekt i utworzyć jego

1:43konkretną strukturę, zainstalować zależności itd.

1:47Tak czy inaczej, jednym z ważniejszych elementów jeżeli chodzi o tworzenie takich

1:50skryptów jest możliwość przekazywania tutaj zmiennych.

1:53I ponownie w ten sposób przekażemy sobie moje imię lub też po prostu ksywkę Overment.

1:58W tym momencie, jeżeli chciałbym odczytać te argumenty, mógłbym odwołać się do

2:02bieżącego procesu, a następnie z właściwości argv wyciąć dwa pierwsze

2:07elementy, które zawierają informacje na temat aktualnie wykonywanego pliku i tym

2:11samym w tym przypadku nie są nam tutaj potrzebne.

2:14Zatem jeżeli spróbujemy odczytać sobie te

2:16wartości, no to okaże się, że rzeczywiście otrzymaliśmy tutaj nasz parametr.

2:21Jednocześnie jest tutaj kilka elementów, o które musimy zadbać.

2:24Po pierwsze musimy wyciągnąć samą wartość.

2:26Po drugie również klucz.

2:28I po trzecie dobrze byłoby zadbać o to, żeby do tej zmiennej nie trafiły jakieś

2:32niepożądane wartości oraz miały odpowiedni typ.

2:35W związku z tym znacznie lepszym pomysłem

2:37będzie sięgnięcie po istniejącą paczkę, która będzie odpowiedzialna za parsowanie

2:42argumentów przekazanych do naszego skryptu.

2:45No i jak się pewnie domyślasz, takich

2:46polecanych paczek do tego, aby się tym zająć mamy przynajmniej kilka.

2:50I mowa tutaj między innymi o Commander.js Yargs, Minimist czy po prostu Arg.

2:56Jeżeli chodzi o to na jaką z tych paczek się zdecydujesz tak naprawdę moim zdaniem

3:00nie ma to większej różnicy i znacznie lepiej jest je po prostu przejrzeć i

3:04sprawdzić po prostu jak mogą sprawdzić się nam w danej sytuacji.

3:07Jeżeli chodzi o mnie wykorzystam sobie tutaj

3:09Minimist. Tak jak mamy tutaj w dokumentacji.

3:12Musimy tutaj przekazać nasze argumenty do

3:14funkcji Minimist, którą oczywiście musimy zaimportować.

3:18W moim przypadku paczka została już

3:19zainstalowana, więc jeżeli teraz ponownie uruchomimy sobie ten skrypt, no to zwróć

3:23uwagę, że tym razem nasz obiekt wygląda nieco inaczej i jesteśmy w stanie łatwo

3:27odwołać się do poszczególnych parametrów przekazanych do naszego skryptu.

3:31Zatem już teraz parsowanie mamy z głowy.

3:34Natomiast faktycznie trzeba tutaj

3:35przyznać, że w niektórych sytuacjach znacznie lepiej będzie sięgnąć po Arg ze

3:39względu na to, że przykładowo będziemy mogli tutaj określić typ danych, który

3:43może zostać wprowadzony do naszej aplikacji.

3:45W naszym konkretnie przypadku akurat nie jest to wymagane

3:48natomiast myślę, że na potrzeby nieco

3:49bardziej złożonych aplikacji jak najbardziej jest to dobre rozwiązanie.

3:53Kolejnym istotnym elementem tworzenia CLI jest pytanie użytkownika o dane.

3:58Tutaj znowu analogicznie mamy do

3:59dyspozycji przynajmniej kilka paczek, które się tym zajmują,

4:02natomiast myślę, że jedną z najprostszych

4:04i najbardziej użytecznych jest po prostu prompts.

4:07Zaimportujemy ją sobie teraz, a następnie wykorzystamy w następujący sposób.

4:11Jak widzisz, mamy tutaj do dyspozycji składnię

4:13async await, więc bez problemu będziemy w stanie oczekiwać na wartość zapisaną przez

4:17użytkownika, którą potem będziemy mogli sobie odczytać.

4:21No i poza tym, jak widzisz, też wygodnie jesteśmy w stanie poprzez obiekt

4:24konfiguracyjny określić sam typ pola, jego podstawowe ustawienia oraz dodatkowo

4:28jesteśmy w stanie napisać funkcję, która będzie walidować wprowadzone informacje.

4:33Zatem teraz jeszcze tutaj musimy poprawić typ danych i możemy uruchomić nasz skrypt.

4:37W tym momencie możemy zapisać tutaj yes, no i rzeczywiście wartość zostanie odczytana,

4:42a dodatkowo pojawił się tutaj taki symbol sygnalizujący, że wszystko poszło w

4:45porządku, więc teoretycznie moglibyśmy tutaj pytać też o pozostałe informacje.

4:50No i tutaj jeszcze poza tym mam Ci do pokazania kilka

4:52rozszerzeń, które możemy sobie w tym momencie zaimportować do naszego skryptu.

4:56Mianowicie pierwszym z nich jest ora do tego, aby wyświetlać różnego rodzaju

5:00loadery czy też spinnery,

5:02następnie mamy chalk do tego, aby stylować wyświetlany tekst i

5:06dodatkowo mamy też boxen po to, aby wyświetlać tekst w boxach.

5:10W rezultacie, jeżeli teraz uruchomimy sobie nasz skrypt i

5:13ponownie odpowiemy na pytanie, to jak widzisz mieliśmy tutaj spinner, a teraz

5:16wyświetlił się czerwony tekst oraz tekst w boxie.

5:19Te wszystkie elementy to oczywiście

5:21pewnego rodzaju dodatek, z którego możesz, ale nie musisz korzystać.

5:24Jednocześnie z własnego doświadczenia wiem, że korzystanie z takich narzędzi po

5:28prostu sprawia, że tworzenie CLI jest zdecydowanie wygodniejsze, a

5:32osiągnięte rezultat jest łatwiejszy w użyciu.

5:35Na koniec dnia

5:36jednak użyteczność naszego skryptu będzie zależała przede wszystkim od tego, jak

5:40niezawodnie będzie funkcjonował oraz jakie zadania będzie dla nas realizować.

5:45Jeżeli chodzi o narzędzia, które pomogą Ci

5:47przy budowaniu tego rodzaju skryptów, z całą pewnością mogę polecić jeszcze zx.

5:51Jest to narzędzie, z pomocą którego jesteś w stanie w bardzo prosty sposób,

5:55również wykorzystując składnię async await wykonywać polecenia w terminalu.

5:59I teraz przykładowo jeżeli uruchomimy sobie nasz skrypt, to jak widzisz od razu wyświetlił

6:04się tekst, który zapisaliśmy jako polecenie w tym miejscu i co ważniejsze

6:07mieliśmy od razu tutaj dostęp do zaimportowania narzędzi.

6:11Zatem myślę, że na tym etapie już

6:12doskonale rozumiesz na czym polega idea pisania CLI z pomocą

6:16Node.js, ale jeżeli chodzi o praktyczne wykorzystanie takich skryptów,

6:20to one w zasadzie zależą już od tego, co konkretnie chcesz osiągnąć.

6:24Tak jak powiedziałem, w niektórych

6:25sytuacjach mogą być to skrypty, które będziesz wykonywać totalnie niezależnie od

6:29swoich aplikacji, po to, aby ułatwiać sobie jakieś codzienne zadania, a z

6:32drugiej strony mogą być to sytuacje bezpośrednio związane z aplikacją

6:36i w dodatku takie skrypty mogą pomóc Ci na

6:39późniejszym etapie w momencie konfigurowania procesu Deploymentu Twojej

6:43aplikacji na serwerze produkcyjnym, gdzie z pomocą np.

6:46workflow zdefiniowanego w GitHub Actions jesteś w stanie wykonywać takie skrypty i

6:50tym samym stosując te wspomniane przeze mnie narzędzia, jesteś w stanie opracować

6:54skrypt, który dodatkowo będzie bardzo jasno informował Cię o postępach budowania

6:59aplikacji i o ewentualnych błędach, które będą z tego wynikały.

7:03Ostatecznie jednak przygotowywanie takich

7:05skryptów z pewnością zajmuje dodatkowy czas i trzeba go po prostu znaleźć.

7:09Jednocześnie moim zdaniem warto

7:11tym bardziej, że jest tutaj ogromny

7:12potencjał do tego, że raz zainwestowany czas w przygotowanie takiego

7:16skryptu będzie zwracał się wielokrotnie. Ponieważ taka mądrze opracowana aplikacja

7:21niewykluczone, że będzie służyć Ci na przestrzeni różnych projektów.

7:25Tymczasem dzięki za uwagę i zapraszam Cię do kolejnej lekcji.