Narzędzia JavaScript Full-Stack Web Developera: Techniki pracy

0:00Myślę, że w tym momencie doszliśmy do

0:01punktu, w którym możemy podsumować temat IDE i zrobię to poprzez pokazanie Ci

0:06pewnego rodzaju elementów, w tym przypadku IntelliJ, o których być może nie

0:10wiesz, a które z pewnością sprawdzą Ci się w codziennej pracy.

0:13Zacznijmy więc od początku, np.

0:15od możliwości pobrania naszego projektu

0:17bezpośrednio z repozytorium za pośrednictwem IntelliJ.

0:21Wystarczy, że wybierzemy sobie opcję pobrania projektu z systemu kontroli wersji,

0:25w naszym przypadku jest to Git, a

0:26następnie musimy podać tylko katalog, do którego chcemy pobrać projekt.

0:31W moim przypadku ta ścieżka się zgadza i

0:33tylko dodam, że na początku będzie konieczne autoryzowanie konta, czyli po

0:36prostu zalogowanie się na niego tak aby IntelliJ miał do niego dostęp.

0:40Następnie w momencie gdy już pobierzemy sobie

0:43projekt musimy chwilę poczekać na jego aktywowanie

0:45no i już wszystkie pliki są tutaj dostępne.

0:48Tutaj w kontekście pracy z repozytorium

0:50najważniejszym panelem jest ten, który jest dostępny pod skrótem klawiszowym

0:54Command 9, w przypadku którego mamy pełny wgląd w nasze repozytorium.

0:58Tutaj znajdują się wszystkie branche,

1:00zarówno te lokalne, jak i zdalne oraz pełna historia commitów.

1:04Akurat w tym repozytorium pracuję

1:06samodzielnie i dodatkowo jak widzisz nie wykorzystuję tutaj nawet sensownych nazw

1:10commitów, tylko one są generowane automatycznie w momencie gdy wychodzę w

1:14tym przypadku z obsidiana po prostu tworzony jest commit z aktualną datą.

1:18Dla mnie jest to w zupełności wystarczające,

1:20natomiast nie o tym chciałbym teraz mówić, ponieważ główną zaletą tego widoku jest

1:24jak widzisz możliwość przeglądania sobie i to bardzo wygodnie całej historii zmian.

1:29Po prostu jesteśmy w stanie podejrzeć co kto kiedy robił i w którym miejscu

1:33a dodatkowo wybierając tutaj plik możemy wcisnąć sobie zegarek, aby podejrzeć listę

1:37commitów, która została wprowadzona wyłącznie w tym konkretnym projekcie.

1:41Analogicznie też możemy tutaj włączyć

1:43sobie adnotację git blame, aby precyzyjnie określić kto tą zmianę wprowadził.

1:48Nie muszę chyba podkreślać, jak taka możliwość przeglądania sobie pełnej historii

1:52projektu jest niesamowicie wygodna i szybka.

1:54I tutaj tylko przez wszystkie elementy samego Gita nie będę Cię przeprowadzać,

1:58ponieważ zakładam, że doskonałego już znasz,

2:01natomiast polecam zapoznać się tutaj z dostępnymi opcjami i po prostu przeklikać

2:05sobie ten panel, a przede wszystkim zacząć z niego korzystać.

2:08Jednocześnie ponownie widać tutaj pewien detal.

2:10No bo zobacz, że w tym momencie ten panel zajmuje niemal cały mój ekran, ale nie mam

2:15z tym najmniejszego problemu, ponieważ mam skrót klawiszowy, z pomocą którego jestem

2:18w stanie wywołać go, gdy tylko go potrzebuję.

2:21I jest to kolejny, ale tym razem mocno

2:22praktyczny przykład tego, że trzymanie małych, ale zawsze otwartych paneli jest

2:27po prostu mało wygodne i tylko negatywnie wpływa na Twoją pracę.

2:31No bo wyobraź sobie, że panel Gita wygląda w ten sposób.

2:34Jeżeli chciałbym teraz na nim jakoś

2:36sensownie pracować, no to oczywiście uwzględniając to, że sam font mógłby być

2:40tutaj mniejszy, to i tak muszę się tutaj nieźle na skalować, aby cokolwiek znaleźć.

2:44Jednocześnie jeżeli ten panel jest otwarty, mam wgląd praktycznie we

2:47wszystko, a już w szczególności, że mogę tutaj dostosować sobie np.

2:51to, czy panel Diff zostaje wyświetlony czy też nie.

2:55I teraz kolejnym elementem pracy w

2:57IntelliJ, który może Ci się przydać jest właśnie dodanie tej adnotacji git blame

3:01bezpośrednio w edytorze.

3:03To akurat nie sprawdzi się w momencie, gdy piszesz kod,

3:05ale gdy widzisz jakiś jego dziwny

3:07fragment, to od razu możesz spojrzeć kto dodał taką zmianę no i ponownie albo wejść w

3:12pełną historię pliku, albo też rozpoznać przy okazji jakiego commitu została

3:16wprowadzona ta zmiana i jednocześnie zrozumieć nieco szerszy kontekst.

3:21W tym momencie wydaje mi się, że adnotacje możemy już zamknąć, ale jednocześnie może

3:25włączymy je jeszcze na chwilę, aby zobaczyć sobie Diff.

3:28Czyli w tym przypadku wyświetlają nam się

3:30zmiany wprowadzone w tym konkretnym commicie.

3:32Jednocześnie jeżeli dodamy sobie tutaj jakieś zmiany, a następnie wykorzystamy

3:36sobie tutaj Raycast do tego, aby uruchomić akcję Show Diff na bieżącym pliku, no

3:41to od razu możemy też podejrzeć zmiany, które aktualnie wprowadzamy.

3:44Akurat na przykładzie tej konkretnej jest to bezużyteczna opcja, ale wyobraź sobie,

3:48że masz nieco większy plik i przykładowo chcesz cofnąć niektóre zmiany

3:52i w ten sposób łatwo wyeliminować np.

3:54elementy, które zostały wprowadzone, a

3:56jednocześnie na ten moment nie są już potrzebne.

3:59No i w tym momencie możemy zamknąć też Diff i ewentualnie w momencie, gdy jednak te

4:03zmiany okazały się istotne, to ponownie albo z pomocą Raycast, albo z pomocą skrótu

4:07klawiszowego Command K możemy tutaj utworzyć nowy commit zaznaczając pliki, które nas

4:12interesują i ewentualnie znowu możemy podejrzeć zmiany, które wprowadziliśmy i

4:16raz jeszcze upewnić się, czy wszystko jest tutaj ok

4:19a następnie tutaj możemy wygodnie

4:21wprowadzić komentarz do tego commitu i ewentualnie zaznaczyć, czy chcemy edytować

4:25poprzedni commit, ale z nowym komentarzem lub też po prostu dodać nowy.

4:29W tym przypadku chciałbym scommitować zmiany i ewentualnie mógłbym jeszcze

4:32wcisnąć Command Shift K do tego, aby wysłać je do zdalnego repozytorium.

4:36Na ten moment jednak nie będę tego robił ze względu na to, że jak zapewne wiesz, w

4:40sytuacji gdy pracujemy w zespole wykorzystujemy Pull request.

4:44Zatem to co teraz spróbujemy zrobić to

4:46utworzymy nowy branch na podstawie Brancha mane i nazwiemy go feature .

4:51Od razu w momencie tworzenia brancha

4:53zostaliśmy na niego przełożeni, więc możemy wprowadzić kolejne zmiany.

4:56Te zmiany natychmiast są tutaj trakowane, więc możemy ponownie

5:00dodać je jako nowy commit.

5:01Teraz różnica będzie polegała na tym, że

5:03zamiast pushować zmiany do repozytorium, utworzymy sobie nowe pull request.

5:08No i tutaj, jak się pewnie domyślasz, musimy dodać odpowiedni tytuł oraz opis

5:12i oczywiście w tym momencie wpisuję tutaj mało użyteczne rzeczy,

5:15ale to nie jest na ten moment istotne,

5:17ponieważ o temacie poprawnego zarządzania repozytorium będziemy sobie jeszcze mówić.

5:21Tymczasem tworzymy nowy Pull request i na tym etapie musimy podać jeszcze nazwę zdalnego

5:26brancha. W tym momencie go tworzymy, więc nazwa może być tutaj dowolna,

5:29natomiast jeżeli chcesz wprowadzić jakieś zmiany to oczywiście masz taką możliwość.

5:34Po chwili mamy potwierdzenie, że Pull request został utworzony

5:37więc jeżeli przeniesiemy się teraz do zdalnego repozytorium, to rzeczywiście 13

5:41sekund temu został tutaj utworzony nowy Pull request,

5:44który możemy sobie przejrzeć, edytować lub też naturalnie zmerge-ować bądź odrzucić.

5:49Zatem jak widzisz, bez wątpienia IntelliJ

5:51całkowicie zmienia tutaj styl pracy nad projektem,

5:54ze względu na to, że już na tym etapie

5:55widzimy, że jego integracja z Git po prostu stoi na niesamowitym poziomie i

5:59znacząco ułatwia nam codzienne funkcjonowanie.

6:02Jeżeli chodzi o jego pozostałe funkcje, to

6:04z częścią z nich mieliśmy okazję się już zapoznać, a inne jeszcze na nas czekają.

6:09Na ten moment myślę, że to co

6:10najważniejsze zostało już omówione, ale jeszcze chciałbym zwrócić tutaj uwagę na

6:15pewną funkcję, która w momencie nagrywania tego materiału jest jeszcze w wersji beta

6:19i pomimo tego, że na moim sandbox już z niej korzystałem, tak jednocześnie

6:23staram się raczej nie sięgać po wersję beta jakichś narzędzi

6:27w momencie gdy pracuję nad jakimś super

6:29ważnym projektem produkcyjnym. Polecam Tobie to samo

6:32i jedynie zaznaczę, że taka opcja tutaj istnieje i warto ją obserwować

6:36tym bardziej, że jej idea polega na tym, aby połączyć się poprzez SSH ze zdalnym

6:40serwerem i tam bezpośrednio na nim edytować pliki.

6:43Moim zdaniem do warunków developerskich i

6:46jakiś sandboxów sprawdzi się tutaj idealnie

6:49a jeżeli chodzi o zastosowania produkcyjne

6:51to myślę, że trzeba mieć konkretny powód aby pracować bezpośrednio na żywym

6:55organizmie i plikach, które znajdują się na produkcyjnym serwerze.

6:59W temacie IDE to by było na tyle, więc

7:01dziękuję Ci za uwagę i zapraszam do kolejnych lekcji.