Sandra Lewandowska

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