Aplikacja to sam klient w Angularze 6. Prezentuje formularz rejestracji podzielony na 3 kroki. Wygląd częściowo bazuje na wyglądzie aplikacji Clinic Jednak tutaj walidacja formularza używa template-driven forms.
Tak jak w innych aplikacjach użyto frameworka MDBootstrap w darmowej wersji. Częściowo dodałam tłumaczenie strony za pomocą biblioteki ngx-translate. Przełączanie języka zostało zaimplementowane w Clinic
. Domyślny język można też zmienić w pliku app.coponent.ts zmieniając symbol języka na ‘pl’translate.setDefaultLang('en')
Dodatkowe informacje
Aplikacja zdeployowana na GitHub Pages za pomocą angular-cli-ghpages.
Użycie dla projektów na Angular CLI 6: $ ng build --prod --base-href "https://[USERNAME].github.io/[REPOSITORY_NAME]/"
$ npx ngh --dir=dist/[PROJECT_NAME]
Aplikacja Clinic to właściwie zalążek pomysłu na wirtualną przychodnię. Projekt zawiera w sobie elementy, które były dodane z myślą o dalszej rozbudowie. Składa się z klienta w Angularze 6 i części serwerowej opartej na Spring Boot 2 i Javie 8. Clinic to hobbystyczne przedsięwzięcie mające na celu zbudowanie aplikacji wykorzystującej nowe technologie.
Do tej pory zrealizowane m.in. zostały:
– przykładowa komunikacja REST między klientem a serwerem za pomocą obiektów JSON,
– autoryzacja użytkownika za pomocą Spring Security i OAuth2,
– połączenie z bazą danych PosgreSQL,
– walidacja pól w formularzu rejestracji,
– Google reCaptcha w formularzu rejestracji.
Na stronie głównej umieszczony jest przykad pobierania danych. Z rozwijanej listy użytkownik może wybrać specjalizację lekarza, w liście po prawej pojawią się nazwiska lekarzy przypinych do wybranej specjalizacji. Wyszukiwarka miała ułatwiać wyszukanie konkretnych wizyt. Wizyty nie zostały jeszcze obsłużone.
Dostępny dla wszystkich jest panel logowania. Przykładowe dane to
user: user@user
pass: useruser
Po zalogowaniu użytkownik może przejść do panelu użytkownika. Pobierane są tam imię i nazwisko na podstawie przesłanego tokena.
Zapytanie przesłane do serwera:
Mywebsite to przykład prostej strony typu One Page. Projekt powstał jako aplikacja angularowa w celu polepszenia umiejętności front-endowych.
Widoki były tworzone za pomocą frameworka MDBootstrap w darmowej wersji. Do tłumaczenie strony użyłam biblioteki ngx-translate.
Dodatkowe informacje
Aplikacja zdeployowana na GitHub Pages za pomocą angular-cli-ghpages.
Użycie dla projektów na Angular CLI 6: $ ng build --prod --base-href "https://[USERNAME].github.io/[REPOSITORY_NAME]/"
$ npx ngh --dir=dist/[PROJECT_NAME]
Aplikacja Lastnames pomaga odmieniać polskie nazwiska przez przypadki. Użytkownik wpisuje wybrane nazwisko w mianowniku rodzaju męskiego, następnie zaznacza czy chce odmienić formę dla kobiety, mężczyzny lub liczby mnogiej. Po wciśnięciu “OK” program przeszukuje plik tekstowy, aby dopasować podane nazwisko do wzorca odmiany. Uwaga. Program posiada ograniczoną bazę wzorców i mimo dołożonych starań, mogą pojawić się nazwiska, których odmiana nie będzie uwzględniona lub będzie niepoprawna. Niektóre nazwiska posiadają również więcej niż jedną dopuszczalną formę odmiany, np. Gołąb (dopełniacz Gołębia lub Gołąba)
W programie użyto:
JavaFX 8 – odpowiada za graficzny interfejs aplikacji z pomocą Gluon Scene Builder, Java 8 – jako minimalny wymóg do współpracy z JavaFX 8, JUnit 4 – proste testy do sprawdzenia poprawnej odmiany, regexp – wyrażenia regularne do odnalezienia odpowiedniej reguły odmiany nazwiska.
Po wybraniu przycisku Next zostaje wywołana metoda validate() danego kontrolera. Jeśli brakuje pola lub jest uzupełnione nieprawidłowo, wyświetlony zostaje komunikat o błędzie a przejście do kolejnego kroku jest blokowane.
Użyte technologie/narzędzia/biblioteki:
JavaFX 8 – odpowiada za graficzny interfejs aplikacji z pomocą Gluon Scene Builder, Java 8 – jako minimalny wymóg do współpracy z JavaFX 8, Maven – do pobrania bibliotek wymaganych w projekcie, Google Guice – użycie adnotacji @Inject dla pól pozwala otrzymać udostępniony obiekt WindowData. Ułatwia to przedstawienie poszczególnych kroków formularza na osobnych widokach, slf4j z log4j – wyświetlanie/zapis logów.
Prezentację aplikacji można zobaczyć na poniższych filmach.
W pierwszym wideo ukrywaną informacją jest plik graficzny, a w drugim zwykły tekst.