Z tego poradnika dowiesz się jak:
* Stworzyć szablon widoku dla aplikacji angular przy użyciu frameworka html bootstrap 5, * Stworzyć design aplikacji zaprojektowany wcześniej w figma, * Nadpisać oraz dodać swoje reguły scss w bootstrap 5.
Przed przystąpieniem do tego kroku powinieneś zapoznać się z designem aplikacji w figmie oraz założeniami biznesowymi:
S2E1 Tworzenie designu aplikacji skrótowiec Skrótowiec – aplikacja do wyszukiwania skrótów internetowych
1.Przegląd plików frontend wygenerowanych przez jhipster
Podczas tworzenia aplikacji będziesz korzystał z jhipstera, tak jak pisałem w wcześniejszym poście, ułatwia i przyspiesza pracę, dlatego warto z niego korzystać i nie powielać gotowego już kodu.
S2E2 Programowanie szkieletu aplikacji skrótowiec
Ważne! Upewnij się czy masz zainstalowane:
- java 11,
- maven
- Node.js wersję LTS
Świeżo wygenerowany front end aplikacji znajduje się w katalogu: src/main/webapp
webapp ├── app - Folder z Apką │ ├── account - User account management UI │ ├── admin - Administration UI │ ├── blocks - Common building blocks like configuration and interceptors │ ├── entities - Wygenerowane encje │ ├── home - Strona domowa (startowa jhipstera) │ ├── layouts - Wspólne layouty storn np navigation lub error pages │ ├── shared - Wspólne serwisy jak authentication orazinternationalization │ ├── app.main.ts - Główna klasa aplikacji │ ├── app.module.ts - Konfiguracja aplikacji │ ├── app-routing.module.ts - Router dla aplikacji ├── content - Static content │ ├── css - CSS │ ├── images - Images ├── i18n - Plik z tłumaczeniami ├── scss - Sass style sheet ├── swagger-ui - Swagger UI front-end ├── 404.html - strona 404 ├── favicon.ico - Fav iconka ├── index.html - Strona główna ├── robots.txt - Plik konfiguracyjny dla web botów
Szczegóły znajdziesz na stronie jhipstera w dziale development => using angular.
Sprawdź, jak teraz wygląda aplikacja bez żadnych zmian, wykonaj polecenie:
./mvnw lub dla windowsa mvnw
Jak uruchomi się backend to w nowym oknie terminala wykonaj polecenie:
npm start
Jeśli wszystko poszło zgodnie z planem to teraz każda frontendowa zmiana będzie automatycznie odświeżać okno przeglądarki.
2.Stylowanie bootstrap’owej strony głównej
Pierwszy release oznaczony 0.0.1 posiada zmiany dotyczące strony głównej aplikacji zgodnie z designem w figmie. Ten releasea nie będzie zawierał dostosowania do mniejszych ekranów. W kolejnym kroku po zaprogramowaniu frontu na duże urządzenia, zajmiesz się dostosowaniem widoku do telefonów / tabletów.
W Tym releasie znajdują się komity z branchy:
https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commits/release/0.0.1
- feature/top-section,
- feature/most-searched-section,
- feature/about-app,
- feature/create-app-like-this-one,
- feature/footer.
Będę wypisywał tylko istotne zmiany, tak żebyś miał jaśniejszy obraz zmian. Kosmetykę pozostawię bez komentarza np. zmianę szerokości padding lub margin na 0 😊, na tym etapie powinieneś bez problemu zobaczyć to sam w historii w gicie.
Kodowanie wyglądu aplikacji rozpocząłem od zmian w pliku:
src/main/webapp/content/scss/_bootstrap-variables.scss
w którym pod zmiennymi np. $primary są ustawiane kolory dla bootstrapa. . Dodałem 2 nowe zmienne z kolorami z designu z figmy: $light oraz $dark.
Teraz przyszedł czas na dodanie czcionki Lato. Dodajesz ją w pliku
src/main/webapp/content/scss/lato-font.scss
a sam plik importujesz do:
src/main/webapp/content/scss/_bootstrap-variables.scss
za pomocą:
@import url('lato-font.scss');
(Zawartości pliku proszę przeglądaj w gicie lub w intellij, nie będę ich tu kopiował).
W pliku:
src/main/webapp/app/layouts/navbar/navbar.component.html
dodaję zgodnie z designem w figmie pozycje menu oraz logo, sam plik logo jest powiększony dwukrotnie względem oryginału, tak aby dobrze prezentował się na ekranach retina.
W gałęzi feature/top-section ponadto dodaję koleją czcionkę kanit, podobnie jak opisałem to powyżej. Zmieniam faviconkę z hipsterskiej muszki na logo skrótowca.
W tym miejscu dodaję także layout samej wyszukiwarki, dwa divy, jeden po lewej z ciemnym tłem, który posiada:
- slogan : Szybka i wygodna wyszukiwarka,
- wybór miejsca szukania,
- – część formularza wyszukiwania z inputem

Drugi div po prawej w którym jest przycisk szukania oraz obrazek:

Góra strony gotowa, w następnych wpisach pokażę Ci jak oprogramować validację w angularze oraz backendzie. Teraz zajmiemy się sekcją Najczęściej wyszukiwane.
Tworzenie sekcji najczęściej wyszukiwane:

Tutaj sprawa wygląda dużo prościej niż z poprzednią sekcją, kod możesz podejrzeć na branchu:
https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commit/8d729490a851b2d3e81ac8af6c0f09592eff64f2
Na początku dodałem tło z pliku most-searched-bg.jpg oraz wycentrowaną tabelę.
Do ustawienia w środku używamy bootstrapowego flexa (d-flex justify-content-center). Design tabeli był zgodny z tym co bootstrap posiada w klasie calss=”table-light”.
Light color jest nadpisany w pliku src/main/webapp/content/scss/_bootstrap-variables.scss dlatego css zgadza się z designem w figmie.
Tworzenie pozostałych sekcji:

Ta sekcja składa się z dwóch div, jeden jest w całości wypełniony tłem, drugi będzie posiadał treść
https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commit/39aa35efbff21ba2be93479d493cdef6f50fe863
Tak jak poprzednio wycentrowałem treść używając wygodnego flexa.

Sekcja stwórz taką aplikację jest odwrotnością poprzedniej:
https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commit/7bb1a22899e41f9a288c9e7324e2a3f8280286c9
Na sam koniec najprostsza sprawa, czyli stylowanie stopki:
https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commit/cded6d28f877587b8be2e3bfe40e7d63d8a80b02