Sandra Lewandowska

Witaj w mojej przestrzeni!

Register Form

O aplikacji

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]

Uruchomienie lokalne

1. git clone https://github.com/sanlew/register.git

2. npm install

3. ng serve

4. Przejście do http://localhost:4200/

Podgląd online - https://sanlew.github.io/register/

Kod - https://github.com/sanlew/register

Clinic – klient Angular + serwer Java + PostgreSQL

O aplikacji

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

Logowanie użytkownika, zapytanie do serwera.

login(user: UserDTO) {
      this.headers = new Headers({
          "Content-Type": "application/x-www-form-urlencoded",
          "Authorization": "Basic " + btoa(environment.clientId+':'+environment.clientSecret)
        });
      this.options = new RequestOptions({ headers: this.headers });
      this.cred = "username=" + user.email + "&password=" + user.password + "&grant_type=password";
      return this.http.post(environment.authUrl, this.cred, this.options)
      .pipe(map(res => {
      localStorage.setItem('currentUser', JSON.stringify({userName:user.email, token: res.json().access_token}));
      this.router.navigateByUrl("/panel");
      return res;
      }));
  }

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:

updateUserInfo(): Observable<any>{
      this.headers = new Headers({
          "Content-Type": "application/json",
          "Authorization": "Bearer " + this.getToken()
      });
      this.options = new RequestOptions({ headers: this.headers });
      return this.http.get(`${environment.baseApiUrl}` + `/api/users/me`, this.options)
        .pipe(map(res => res.json()));
}

Obsługa URI w kontrolerze:

@GetMapping("/me")
	  public User currentUser() {
	      Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
	      return userRepository.findByEmailIgnoreCase(authentication.getName()).orElse(null);
	 }

Rejestracja – dostępna dla wszystkich, ale został dodany kod reCaptcha, aby wyeliminować działanie botów.

Kod – serwer https://github.com/sanlew/clinic-server

Kod – klient https://github.com/sanlew/clinic-client

Prezentacja online https://sanlew.github.io/clinic-client
Czasami komunikacja z serwerem wolno działa. Część serwerowa znajduje się na Heroku – https://clinic-serv.herokuapp.com/
Część kliencka została umieszczona na GitHub Pages a serwerowa na Heroku.

Uruchomienie aplikacji

1.Serwer: $ mvn spring-boot:run
2.Klient:
$ npm install
$ ng serve

One Page Angular 6

O aplikacji

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]

Uruchomienie lokalne

1. git clone https://github.com/sanlew/mywebsite.git

2. npm install

3. ng serve

4. Przejście do http://localhost:4200/

Podgląd online – https://sanlew.github.io/mywebsite/

Kod – https://github.com/sanlew/mywebsite

Odmiana nazwisk

O aplikacji

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.

Kod – https://github.com/sanlew/lastnames

Uruchomienie aplikacji

1. mvn clean install -U
2. mvn jfx:jar
3. cd target/jfx/app
4. java -jar lastnames-0.0.1-SNAPSHOT-jfx.jar

St3g0 v.0.3

O aplikacji

Aplikacja St3g0 v.0.3 służy do steganografii plików graficznych i jest częścią programu pisanego w ramach studiów.

Więcej szczegółów na temat algorytmu LSB we wpisie: https://sandralewandowska.pl/steganografia/383/lsb/

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.

Link do kodu: Kod – https://github.com/sanlew/st3g0

Uruchomienie aplikacji

1. mvn clean install -U
2. mvn jfx:jar
3. cd target/jfx/app
4. java -jar stego-0.0.1-SNAPSHOT-jfx.jar