Objazdowa wycieczka po wygenerowanym kodzie, czyli JHipster tutorial part 3

Witam Cię w ten poniedziałkowy poranek!

Mam nadzieję, że weekend miałeś udany i nabrałeś sił do nadchodzących wyzwań w tym tygodniu. Czuję, że najbliższe siedem dni będzie naprawdę udane. 🙂

W ostatnim wpisie była drobna przerwa od JHipstera, bo pisałem o Dockerze. Tak naprawdę oba tematy trochę się łączą, bo bardzo wygodnie jest uruchamiać naszą aplikację właśnie w kontenerze. Udało nam się to z resztą zrobić pod koniec ostatniego posta.

Z kolei jeszcze wcześniej opisywałem proces generowania kodu przez JHipstera. Dziś zatem zapraszam zatem na wycieczkę po meandrach naszej aplikacji. 🙂

Otwieramy projekt

Najwygodniej otworzyć nasz projekt w jakimś IDE. Ja używam IntelliJ IDEA, w którym jest to bardzo proste. Wystarczy kliknąć File | Open… i wskazać główny katalog aplikacji. Potem musimy chwilkę poczekać aż IntelliJ otworzy projekt i zaindeksuje wszystkie pliki. Długo to trwa? Zależy od mocy Twojej maszyny 🙂

Po krótkiej chwili nasz kod jest otwarty i gotowy do pracy.

Warto jeszcze na samym początku skonfigurować IDE w ten sposób, aby automatycznie budowało nasz projekt. Dzięki temu możliwy będzie „hot reload” naszej aplikacji. W tym celu w IntelliJ wchodzimy w File | Settings, następnie w Build, Execution, Deployment | Compiler i zaznaczamy opcję „Build project automatically”.

Objazdowa wycieczka po kodzie

Zapraszam teraz na wycieczkę po wygenerowanych plikach. Postaram się podczas niej opisać najważniejsze elementy aplikacji. Nie omówię każdego elementu, gdyż po pierwsze jest tego za dużo, a po drugie, jeszcze nie wiem do czego niektóre pliki służą 🙂

Główny katalog projektu powinna wyglądać mniej więcej tak:

Zacznijmy od czegoś prostego i zerknijmy na plik „.editorconfig”. Jest to plik konfiguracyjny narzędzia EditorConfig, które służy do zdefiniowania i ujednolicenia stylu formatowania kodu. Większość popularnych IDE wspiera to narzędzie albo natywnie, albo przy pomocy odpowiedniej wtyczki. IntelliJ powinien sam zauważyć obecność tego pliku i poinformować o tym komunikatem na górze ekranu. Klikamy wtedy „OK” i IDE automatycznie wczyta konfigurację.

Następnie widzimy pliczek „.gitignore”, który jest już elegancko dostosowany pod naszego JHisptera. Z kolei plik „angular-cli.json” jest konfiguracją Angular Command Line Interface, czyli narzędzia służącego do zarządzania aplikacją Angularową. Nie będę tutaj drążył tego tematu, Angularowi na pewno zostanie poświęcony osobny wpis (albo nawet kilka ;)).

Istotny jest zestaw plików konfiguracyjnych Gradle:. „gradle.properties”, gdzie są m. in. wersje używanych bibliotek, „gradlew” oraz „gradlew.bat”, które służą do uruchamiana Gradle Wrappera oraz „build.gradle”, czyli odpowiednik Mavenowego „pom.xml”. Z tą zasadniczą różnicą, że ten pierwszy jest napisany w Groovy’im, a ten drugi to po prostu xml.

Warto w tym miejscu nadmienić, że pliki „gradlew” oraz „gradlew.bat” są wykonywalne. Wystarczy wpisać:

$ ./gradlew

I nasza aplikacja zostanie uruchomiona. Jeśli nie chcemy używać Dockera, to można też odpalać projekt w ten sposób. 🙂

Ważnym plikiem jest „package.json”, w którym są trzymane podstawowe informacje o aplikacji (np. nazwa) jak również zależności używane w projekcie. Z tego pliku korzysta Yarn.

Przejdźmy zatem głębiej, do folderu „src”. Jest tam katalog „test”, w którym jak nietrudno się domyślić, są testy. 🙂 Zarówno części backendowej jak i frontendowej.

Z kolei w „src/main” znajdują się katalogi:

  • docker – Dockerfile oraz pliki .yml służące do uruchamiania naszej aplikacji w środowisku Dockera. Więcej na ten temat pisałem tutaj.
  • java – mój ulubiony katalog 🙂 Tu jest wszystko co związane ze Javą, Springiem, JPA i ogólnie pojętym backendem.
  • resources – tu są różne rzeczy, m.in. konfiguracja Liquibase czy szablony maili, które JHipster wysyła (np. przy zakładaniu konta).
  • webapp – w tym miejscu siedzi Angular. Póki co boję się zaglądać głębiej 🙂

Chodźmy zatem jeszcze dalej i rzućmy okiem na to co znajduje się w „src/main/java”. Pod nazwą naszego pakietu (którą podaliśmy podczas generowania aplikacji) znajduje się cały zestaw Javowych klas i pakietów. Na samym wierzchu jest plik {NAZWA_PROJEKTU}App.java” (w moim przypadku „MoocyourlifeApp.java”), w którym znajduje się metoda main. Możemy poprzez IntelliJ kliknąć na niej „run” i w ten sposób uruchomimy nasz projekt. Jest to kolejny sposób na wystartowanie naszej aplikacji.

Skoro nasz projekt jest już uruchomiony…

to zobaczmy co ten dotychczas wygenerowany kod robi. Wpisujemy „localhost:8080” w przeglądarce i widzimy ekran powitalny:

Logujemy się na konto administratora wpisując login „admin” i takie samo hasło. Jako administrator widzimy na pasku u góry strony kilka zakładek:

Możemy tu zmienić ustawienia konta, przełączyć język, dodać encję do naszego modelu (temu tematowi poświęcę niedługo osobny wpis) oraz zarządzać aplikacją. Właśnie w zakładce „Administracja” jest kilka interesujących opcji:

  • Użytkownicy – tu możemy zarządzać kontami naszych użytkowników.
  • Metryki – w tym miejscy znajduję się przeróżne statystyki działania aplikacji. Szczególnie przydatne miejsce, gdy pojawią się jakieś problemy.
  • Status – Informacje o statusie zewnętrznych usług m.in. bazy danych.
  • Konfiguracja – duuużo rożnych możliwości dostrajania naszej apki…
  • Audyty – tu możemy „śledzić” naszych użytkowników. Kto co i kiedy robił 🙂
  • Logi – możliwość przełączania poziomów logowania różnych loggerów.
  • API – tu jest dokumentacja naszego REST API backendowego wygenerowana przez Swaggera. Warto poklikać i wykonać kilka przykładowych zapytań.

Jak sam widzisz nasza aplikacja już całkiem dużo potrafi, a nie napisaliśmy jeszcze ani jednej linijki kodu! 🙂 Póki co JHipster robi dobrą robotę.

Na dziś to tyle!

Jeżeli podczas naszej wycieczki coś było dla Ciebie niejasne albo nie wiesz do czego służą niektóre pliki to nie przejmuj się! Ja też jeszcze nie wiem za co odpowiadają niektóre rzeczy. Ale jak to mówią: „nie od razu Kraków zbudowano”. Nasza wiedza będzie rosła wraz z ilości przeprogramowanych godzin. 🙂 Poza tym, zachęcam do zadawania pytań w komentarzach – razem łatwiej będzie rozwiązywać problemy i wątpliwości.

Zatem powodzenia w nadchodzącym tygodniu i…

NIECH KOD BĘDZIE Z TOBĄ!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *