S2E4 Tworzenie szablonu bootstrap 5 dla angular’owej aplikacji skrótowiec.

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