Kurs Java

Uruchomienie frontendu i backendu

Zakładamy, że przystępujesz do tego materiału po ściągnięciu źródeł z rozdziału Startujemy! oraz że wiesz już, na czym polega uruchomienie samego frontendu Angulara z wykorzystaniem Angular Live Development Server.

W bieżącym rozdziale pokażemy Ci, jak zacząć pracę ze ściągniętą aplikacją, a w szczególności jak zbudować, zaimportować oraz jak uruchomić zarówno frontend, jak i backend naszej aplikacji. Rekomendujemy przejście przez kolejne paragrafy, zachowując ich kolejność.

Zawartość katalogu z aplikacją

Wchodząc do katalogu z aplikacją, od razu zauważysz, że znajdują się tam dwa katalogi oraz pom.xml Katalog startappa-angular zawiera projekt frontendowy, a katalog startappa-spring-boot zawiera backend:
Oba te projekty zawierają po jednym właściwym pom.xml w swoich katalogach, a ten pom.xml z powyższego zdjęcia zawiera jedynie podstawowe informacje o projekcie oraz wskazuje, że startappa-angular i startappa-spring-boot są jego modułami:

Build aplikacji

Plik pom.xml wskazany na zdjęciu w poprzednim paragrafie wyznacza nam miejsce, w któym powinniśmy teraz wykonać builda całej aplikacji. Chcemy, aby aplikacja zainstalowała się w lokalnym repozytorium Mavena, dlatego uruchomimy komendę mvn clean install (clean w zasadzie można pominąć za pierwszym razem, ale też nie zaszkodzi go użyć):
Po uruchomieniu komendy musisz uzbroić się w cierpliwość, ponieważ w trakcie jej działania Maven będzie ściągał nie tylko zależności Java, ale również te frontendowe, a tych jest co najmniej kilkaset. Oprócz tego, dzięki skonfigurowany pluginom do Mavena, komenda ściągnie i zainstaluje lokalnie (w katalogu projektu frontendowego) wszystkie wymagane narzędzia, takie jak na przykład nodejs.
Uruchomią się również kompilacje Angular-a, Angular Material oraz dodatkowych zależności Javascript:
Po wykonaniu się wszystkich etapów budowania projektu zobaczysz podsumowanie podobne do poniższego:
Jak widzisz na naszej, całkiem niezłej maszynie i świetnym łączu trwało to ponad 2 minuty.

Otwarcie frontendu w IDE

W tym miejscu zaczyna się najciekawsza część tego rozdziału. Zaczynamy zaglądać do naszych projektów. Na początek frontend. Uruchamiamy IDE, w naszym przypadku jest to WebStorm, który jest trochę zmodyfikowaną wersją IntelliJ-a. Warto go ściągnąć i popracować w nim przez miesiąc, ponieważ tyle trwa bezpłatny trial tego narzędzia (później wykup kosztuje około 50zł miesięcznie). Przypominamy, że link znajduje się w rozdziale Wprowadzenie do Angulara.

Oczywiście zawsze, gdy już trochę zaznajomisz się z WebStormem i Angularem, możesz po takim miesiącu przesiąść się na darmowe narzędzie, np. Visual Studio Code. Wtedy będziesz już wiedział(a), jakie masz potrzeby podczas tworzenia kodu w Angularze i łatwiej Ci będzie wyszukać odpowiednie wtyczki do Visuala.

Tak więc w WebStorm otwieramy projekt, wybierając katalog frontendowy:
Po otwarciu zobaczysz drzewko projektowe. W tym momencie zwróć uwagę na porównanie dwóch poniższych widoków. Pierwszy jest widokiem projektu zanim nastąpiło wykonanie komendy mvn clean install, a drugi już po jej wykonaniu (czyli stan obecny - o ile wykonujesz kroki w tym rozdziale po kolei):
To, co zostało zaznaczone czerwoną ramką to dwa katalogi, które pojawiły się w ramach wykonanego przez nas builda. Pierwszy katalog node zawiera lokalną instalację nodejs, a drugi node_modules zawiera wszystkie zależności Javascript, w tym Angulara, Angular Material oraz AngularCli. W katalogu tym znajdziesz kilkaset podkatalogów i to głównie ściąganie i instalowanie tego zestawu zajmowało tak wiele czasu podczas builda projektu.

Uruchomienie frontendu w IDE

Nie pozostało nam nic innego, jak uruchomić otwarty projekt frontendu. Możemy owszem skorzystać z wtyczki AngularCli do WebStorma, ale na początku swojej drogi z Angularem i AngularCli warto o zrobić z poziomu terminala IDE. Otwieramy zatem terminal:
Następnie w oknie terminala wpisujemy komendę ng serve, która zaserwuje nam frontend za pomocą Angular Live Development Server, dzięki czemu otrzymamy do niego dostęp z poziomu przeglądarki.
Po uruchomieniu ng serve powinien się pojawić widok podobny do poniższego (nie przejmujemy się ewentualnymi warningami):
W Twoim terminalu pojawiła się informacja o tym, że Angular Live Development Server wystartował i masz dostęp do aplikacji pod wskazanym adresem localhost:4200. Innymi słowy, w przeglądarce pojawi się taki widok:
Oczywiście próba logowania na użytkownika zapisanego w aplikacji zakończy się błędem, ponieważ do tej pory uruchomiliśmy tylko frontend. Tak więc teraz musimy jeszcze uruchomić nasz backend i do tego użyjemy regularnego IntelliJ-a.

Otwarcie backendu w IDE

Najpierw otwórzmy nasz projekt backendowy w IDE:
IntelliJ otworzy projekt, a następnie odczyta i zaindeksuje wszystkie potrzebne mu elementy.

Uruchomienie backendu w IDE

Otwarcie projektu wraz z indeksacją może chwilę potrwać, ale jak już wszystko zostanie wykonane, możemy od razu przystąpić do uruchomienia backendu za pomocą RunApplication:
Widok konsoli po uruchomieniu będzie podobny do tego:
Od teraz masz otwarty zarówno frontend jak i backend w dwóch osobnych narzędziach deweloperskich, a także oba projekty są uruchomione. Backend na porcie 8080, a frontend na porcie 4200. Możesz więc wykonać logowanie na użytkownika podanego w rozdziale Starter projektu albo też możesz zarejestrować nowego użytkownika w zakładce Registration.
Appa Notka. Prace nad treściami kursowymi uwzględniającymi nowy frontend Angular trwają obecnie i treści te będą udostępniane sukcesywnie, począwszy od czerwca. Mimo zmiany technologii frontendowej backend nie zmienił się prawie w ogóle (poza drobnymi zmianami, o których wspominamy w komentarzach kodu). Tak więc możesz kontynuować część backendową kursu tak jak dawniej, począwszy od rozdziału Starter projektu.

Oczywiście nadal możesz korzystać z poprzedniej wersji kursu, która zawiera frontend w AngularJS. Kurs tej wersji aplikacji webowej standardowo zaczyna się od rozdziału O aplikacji.

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy: stackshare
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .


Pozycjonowanie stron: Grupa TENSE