diff --git "a/docs/report/DodanieOg\305\202oszenia.png" "b/docs/report/DodanieOg\305\202oszenia.png" new file mode 100644 index 0000000..1c29981 Binary files /dev/null and "b/docs/report/DodanieOg\305\202oszenia.png" differ diff --git "a/docs/report/EdycjaOg\305\202oszenia.png" "b/docs/report/EdycjaOg\305\202oszenia.png" new file mode 100644 index 0000000..bab2257 Binary files /dev/null and "b/docs/report/EdycjaOg\305\202oszenia.png" differ diff --git a/docs/report/Filtrowanie.png b/docs/report/Filtrowanie.png new file mode 100644 index 0000000..f18a6cc Binary files /dev/null and b/docs/report/Filtrowanie.png differ diff --git a/docs/report/KasowanieKonta.png b/docs/report/KasowanieKonta.png new file mode 100644 index 0000000..6e5d4cd Binary files /dev/null and b/docs/report/KasowanieKonta.png differ diff --git "a/docs/report/KasowanieOg\305\202oszenia.png" "b/docs/report/KasowanieOg\305\202oszenia.png" new file mode 100644 index 0000000..d219bad Binary files /dev/null and "b/docs/report/KasowanieOg\305\202oszenia.png" differ diff --git a/docs/report/KlikniecieWNiepoprawnyLink.png b/docs/report/KlikniecieWNiepoprawnyLink.png new file mode 100644 index 0000000..8cf8e25 Binary files /dev/null and b/docs/report/KlikniecieWNiepoprawnyLink.png differ diff --git "a/docs/report/Klikni\304\231cieWWyga\305\233ni\304\231tyLink.png" "b/docs/report/Klikni\304\231cieWWyga\305\233ni\304\231tyLink.png" new file mode 100644 index 0000000..aa5b7f9 Binary files /dev/null and "b/docs/report/Klikni\304\231cieWWyga\305\233ni\304\231tyLink.png" differ diff --git a/docs/report/Mail.png b/docs/report/Mail.png new file mode 100644 index 0000000..c19b0eb Binary files /dev/null and b/docs/report/Mail.png differ diff --git "a/docs/report/NieIstniej\304\205caStrona.png" "b/docs/report/NieIstniej\304\205caStrona.png" new file mode 100644 index 0000000..c2bca4f Binary files /dev/null and "b/docs/report/NieIstniej\304\205caStrona.png" differ diff --git "a/docs/report/PonowneWys\305\202anieLinku.png" "b/docs/report/PonowneWys\305\202anieLinku.png" new file mode 100644 index 0000000..d315ab0 Binary files /dev/null and "b/docs/report/PonowneWys\305\202anieLinku.png" differ diff --git a/docs/report/Sprawozdanie Noticeboard.pdf b/docs/report/Sprawozdanie Noticeboard.pdf new file mode 100644 index 0000000..e3deec0 Binary files /dev/null and b/docs/report/Sprawozdanie Noticeboard.pdf differ diff --git "a/docs/report/StronaG\305\202\303\263wna.png" "b/docs/report/StronaG\305\202\303\263wna.png" new file mode 100644 index 0000000..77ead5c Binary files /dev/null and "b/docs/report/StronaG\305\202\303\263wna.png" differ diff --git a/docs/report/StronaLogowania.png b/docs/report/StronaLogowania.png new file mode 100644 index 0000000..86b34c7 Binary files /dev/null and b/docs/report/StronaLogowania.png differ diff --git "a/docs/report/StronaOg\305\202oszenia.png" "b/docs/report/StronaOg\305\202oszenia.png" new file mode 100644 index 0000000..b7e4397 Binary files /dev/null and "b/docs/report/StronaOg\305\202oszenia.png" differ diff --git "a/docs/report/StronaOg\305\202oszeniaW\305\202a\305\233ciciel.png" "b/docs/report/StronaOg\305\202oszeniaW\305\202a\305\233ciciel.png" new file mode 100644 index 0000000..2af0388 Binary files /dev/null and "b/docs/report/StronaOg\305\202oszeniaW\305\202a\305\233ciciel.png" differ diff --git a/docs/report/StronaPotwierdzeniaRejestracji.png b/docs/report/StronaPotwierdzeniaRejestracji.png new file mode 100644 index 0000000..bb705f0 Binary files /dev/null and b/docs/report/StronaPotwierdzeniaRejestracji.png differ diff --git a/docs/report/StronaRejestracji.png b/docs/report/StronaRejestracji.png new file mode 100644 index 0000000..f807229 Binary files /dev/null and b/docs/report/StronaRejestracji.png differ diff --git "a/docs/report/StronaU\305\274ytkownika.png" "b/docs/report/StronaU\305\274ytkownika.png" new file mode 100644 index 0000000..05a8cf9 Binary files /dev/null and "b/docs/report/StronaU\305\274ytkownika.png" differ diff --git "a/docs/report/StronaU\305\274ytkownikaW\305\202a\305\233ciciel.png" "b/docs/report/StronaU\305\274ytkownikaW\305\202a\305\233ciciel.png" new file mode 100644 index 0000000..89e1ab7 Binary files /dev/null and "b/docs/report/StronaU\305\274ytkownikaW\305\202a\305\233ciciel.png" differ diff --git a/docs/report/Weryfikacja.png b/docs/report/Weryfikacja.png new file mode 100644 index 0000000..7c072f2 Binary files /dev/null and b/docs/report/Weryfikacja.png differ diff --git "a/docs/report/ZmianaHas\305\202a.png" "b/docs/report/ZmianaHas\305\202a.png" new file mode 100644 index 0000000..cb0784a Binary files /dev/null and "b/docs/report/ZmianaHas\305\202a.png" differ diff --git a/docs/report/main.tex b/docs/report/main.tex new file mode 100644 index 0000000..bde7836 --- /dev/null +++ b/docs/report/main.tex @@ -0,0 +1,273 @@ +\documentclass{article} + +\usepackage[utf8]{inputenc} +\usepackage[T1]{fontenc} +\usepackage{polski} +\usepackage{indentfirst} +\usepackage{lastpage} +\usepackage{natbib} +\usepackage{graphicx} +\usepackage{sidecap} +\usepackage{wrapfig} +\usepackage{subfig} +\usepackage{caption} +\usepackage{hyperref} +\usepackage{float} + +\usepackage{geometry} + \geometry{ + a4paper, + total={170mm,257mm}, + left=20mm, + top=20mm, + } + +\captionsetup[figure]{name={Zrzut ekranu}} + +\usepackage{fancyhdr} +\pagestyle{fancy} +\fancyhf{} +\rhead{Franciszek Wysocki} +\rfoot{Strona \thepage \hspace{1pt} z \pageref{LastPage}} + +\title{Sprawozdanie końcowe z realizacji projektu pt. \\ ,,Noticeboard''} +\author{} +\date{} + +\begin{document} +\maketitle + +\begin{flushright} +\par +\vfill +\par +{\fontsize{11}{11}\selectfont + Wykonał: Franciszek Wysocki + + Sprawdzający: mgr inż. Paweł Zawadzki + + Data: 04-06-2021 +} +\end{flushright} +\thispagestyle{empty} + +\newpage +\lhead{Spis treści} +\tableofcontents + +\newpage + + + +\lhead{Cel projektu} +\section{Cel projektu} + + Celem projektu było stworzenie serwisu ogłoszeniowego - aplikacji webowej w architekturze klient-serwer, która umożliwi m.in. rejestrację i logowanie, wyświetlanie, dodawanie, edytowanie i kasowanie pojedyńczych ogłoszeń oraz pobieranie (paginacja, lazy loading), sortowanie i filtrowanie stron z ogłoszeniami. + +\section{Wykorzystane technologie} + Baza danych: + \begin{itemize} + \item PostGreSQL; + \item Docker. + \end{itemize} + + Back-end: + \begin{itemize} + \item Java; + \item Spring Boot. + \end{itemize} + + Front-end: + \begin{itemize} + \item JavaScript; + \item React; + \item Redux; + \item Bootstrap 5; + \item Css; + \item Html. + \end{itemize} + Wersje zostały wymienione w specyfikacji implementacyjnej. + +\section{Zmiany względem specyfikacji} + Zaplanowana struktura projektu, wykorzystane narzędzia oraz sposoby testowania nie zmieniły się znacząco względem założeń. \\ + + Zmianie uległo natomiast kilka funkcjonalności: dodanie profilu użytkownika, dodanie możliwości zmiany hasła, możliwości skasowania konta, aktywację konta poprzez e-mail. \\ + + Z podstawowych założeń, które zakładałem nie implementowałem jedynie podziału na kategorie (uznałem to za zbędne i wolałem skupić się na innych dodatkowych funkcjach). +\section{Uruchomienie aplikacji} + Aplikacja w wersji produkcyjnej jest uruchomiona na stałe i można z niej korzystać pod adresem \\ \href{https://noticeboard.pl}{https://noticeboard.pl}. \\ + Aplikację starałem się zrobić możliwie bezpieczną (hashowane hasła użytkownika, szyfrowane hasła do bazy danych, maila itd... w pliku application.yml, szyfrowane połączenie HTTPS), jednak wolałbym nie odpowiadać za pozostawione tam dane, dlatego polecam skorzystać z \href{https://temp-mail.org/en/}{tymczasowego adresu e-mail}, \href{https://random-data-generator.com/generator-losowych-imion-i-nazwisk/}{generatora imion i nazwisk} oraz \href{https://thispersondoesnotexist.com/}{generatora twarzy}, a do samych treści ogłoszeń np. \href{https://olx.pl}{z innego serwisu ogłoszeniowego}.\\ + + Aby uruchomić aplikację w trybie deweloperskim należy oddzielnie uruchomić (1) serwer z bazą danych, (2) back-end i (3) front-end. +\begin{enumerate} + \item Uruchomienie serwera bazy danych PostgreSQL w dockerze (port: 5555):\\ + \texttt{docker-compose up database}\\ + \item Uruchomienie aplikacji back-endowej (port: 8080):\\ + Aby utworzyć plik wykonywalny można wykorzystać Mavena: \\ + \texttt{mvn clean install} \\ + a następnie: \\ + \texttt{java -Djasypt.encryptor.password=secretKey -jar noticeboard-0.0.1-SNAPSHOT.jar} \\ + W miejsce secretKey należy podać klucz umożliwiający odszyfrowanie haseł do bazy danych, skrzynki mailowej oraz magazynu na klucze (SSL), znajdujących się w pliku application.yml. \\ + \item Uruchomienie aplikacji front-endowej (port: 3000):\\ + Tutaj również na początku należy skorzystać z menadżera pakietów (zewnętrzne pakiety nie są przechowywane w repozytorium): \\ + \texttt{npm install} \\ + a następnie można uruchomić aplikację:\\ + \texttt{npm start}\\ +\end{enumerate} + Testy można uruchomić niezależnie (nie wymagają one podania klucza): + \begin{enumerate} + \item Back-end: \\ + \texttt{mvn test} \\ + \item Front-end: \\ + \texttt{npm test} \\ + \end{enumerate} + +\lhead{Przykładowe scenariusze użytkowania} +\section{Przykładowe scenariusze użytkowania} +\begin{itemize} + \item Użytkownik jest ogłoszeniobiorcą. + \begin{enumerate} + \item Użytkownik przechodzi pod wskazany adres URL \href{https://noticeboard.pl}{https://noticeboard.pl} i bez zalogowania może przeglądać strony z ogłoszeniami. + \begin{center} + + \includegraphics[width=15.5cm]{StronaGłówna.png} + \captionof{figure}{} + \end{center} + \item Użytkownik filtruje i sortuje ogłoszenia. + \begin{center} + \centering \includegraphics[width=15.5cm]{Filtrowanie.png} + \captionof{figure}{} + \end{center} + \item Użytkownik otwiera ogłoszenie i wyświetla szczegółowy opis, dane sprzedawcy i jego adres email do kontaktu. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaOgłoszenia.png} + \captionof{figure}{} + \end{center} + \item Użytkownik przechodzi na stronę (w tym przypadku innego) sprzedawcy i przegląda jego inne ogłoszenia. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaUżytkownika.png} + \captionof{figure}{} + \end{center} + \end{enumerate} + + \item Użytkownik zakłada konto oraz loguje się: + \begin{enumerate} + \item Użytkownik przechodzi na stronę rejestracji i wprowadza wymagane dane. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaRejestracji.png} + \captionof{figure}{} + \end{center} + \item Użytkownik zostaje poinformowany o wysłaniu maila z linkiem aktywacyjnym. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaPotwierdzeniaRejestracji.png} + \captionof{figure}{} + \end{center} + \item Użytkownik otwiera skrzynkę mailową i klika w link aktywacyjny. + \begin{center} + \centering \includegraphics[width=15.5cm]{Mail.png} + \captionof{figure}{} + \end{center} + \item Użytkownik zostaje poinformowany o sukcesie operacji i ma możliwość przejścia do strony logowania. + \begin{center} + \centering \includegraphics[width=15.5cm]{Weryfikacja.png} + \captionof{figure}{} + \end{center} + \item Użytkownik loguje się. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaLogowania.png} + \captionof{figure}{} + \end{center} + \item Użytkownik zostaje przekierowany na stronę główną. + \end{enumerate} + + \item Użytkownik zarządza swoim kontem + \begin{enumerate} + \item Zalogowany użytkownik przechodzi na swój profil. Jedynie on ma możliwość wyświetlenia panelu edycji. Użytkownik w samym panelu może zmienić zdjęcie profilowe, imię oraz nazwisko. + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaUżytkownikaWłaściciel.png} + \captionof{figure}{} + \end{center} + \item Użytkownik kilka ,,Zmień hasło''. + \begin{center} + \centering \includegraphics[width=15.5cm]{ZmianaHasła.png} + \captionof{figure}{} + \end{center} + \item Użytkownik kilka ,,Skasuj konto''. + \begin{center} + \centering \includegraphics[width=15.5cm]{KasowanieKonta.png} + \captionof{figure}{} + \end{center} + \end{enumerate} + + \item Użytkownik jest ogłoszeniodawcą. + \begin{enumerate} + \item Zalogowany użytkownik klika ,,Dodaj ogłoszenie'' na pasku nawigacyjnym. + \item Użytkownik podaje tytuł, opis, cenę, lokalizację, adres email oraz załadowuje zdjęcia, po czym zatwierdza operację. + \begin{center} + \centering \includegraphics[width=15.5cm]{DodanieOgłoszenia.png} + \captionof{figure}{} + \end{center} + \item Użytkownik przechodzi na stronę swojego ogłoszenia (zamiast linku do jego profilu ma przyciski do skasowania i edycji ogłoszenia). + \begin{center} + \centering \includegraphics[width=15.5cm]{StronaOgłoszeniaWłaściciel.png} + \captionof{figure}{} + \end{center} + \item Użytkownik edytuje swoje (np. błędne) ogłoszenie. + \begin{center} + \includegraphics[width=15.5cm]{EdycjaOgłoszenia.png} + \captionof{figure}{} + \end{center} + \item Użytkownik kasuje swoje (np. nieaktualne) ogłoszenie. + \begin{center} + \centering \includegraphics[width=15.5cm]{KasowanieOgłoszenia.png} + \captionof{figure}{} + \end{center} + \item Użytkownik wylogowuje się i zostaje przekierowany na stronę główną. + \end{enumerate} + \end{itemize} + + \lhead{Reakcje na błędy ze strony użytkownika} + \section{Reakcje na błędy ze strony użytkownika} + \begin{itemize} + \item Użytkownik przechodzi pod niepoprawny adres URL: + \begin{center} + \centering \includegraphics[width=15.5cm]{NieIstniejącaStrona.png} + \captionof{figure}{} + \end{center} + \item Użytkownik kilka w uszkodzony link aktywujący konto: + \begin{center} + \centering \includegraphics[width=15.5cm]{KlikniecieWNiepoprawnyLink.png} + \captionof{figure}{} + \end{center} + \item Użytkownik kilka w wygasły link aktywujący konto: + \begin{center} + \centering \includegraphics[width=15.5cm]{KliknięcieWWygaśniętyLink.png} + \captionof{figure}{} + \end{center} + + + Po kliknięciu ,,spróbuj ponownie'' użytkownik ma możliwość wysłania ponownego linku aktywacyjnego: + \begin{center} + \centering \includegraphics[width=15.5cm]{PonowneWysłanieLinku.png} + \captionof{figure}{} + \end{center} + \item Pozostałe obsługiwane błędy: + \begin{itemize} + \item Pozostawienie pustego pola w formularzu lub za krótki/długi ciąg znaków (komunikat); + \item Niedopasowanie hasła/adresu e-mail do wzorca np. podczas rejestracji (komunikat); + \item Próba zalogowania, rejestracji, aktywacji konta, będąc zalogowanym (przekierowanie); + \item Próba zarządzania czyimś ogłoszeniem/kontem (przekierowanie + zablokowanie po stronie back-endu). + \end{itemize} + \end{itemize} + + + \lhead{Podsumowanie i wnioski} + \section{Podsumowanie i wnioski} + Największą przyjemność i jednocześnie największą trudność sprawiało mi implementowanie logiki aplikacji m.in. zarządzanie zdjęciami (od odczytu po serwowanie z cachowaniem), wysyłanie e-maili z tokenami (ważnymi 15 minut) i sam CRUD. Dużo czasu poświęciłem na samo wdrożenie aplikacji z certyfikatem SSL, co nie okazało się bardzo skomplikowane, ale brakowało mi wiedzy, jak to zrobić. + Bardzo spodobała mi się praca z Lombokiem, Mapstructem i Spring Data JPA, które pozwoliły na korzystanie z metod bez implementowania ich. \\ + + Front-end aplikacji chciałem stworzyć prosty i elegancki. Starałem się też, aby aplikacja była responsywna i przetestowałem ją na kilku urządzeniach i przegladarkach. Praca nad front-endem była momentami uciążliwa np. przesuwanie się elementów po rozwinięciu panelu/filtrów, jednak udało mi się to wyeliminować. \\ + + Sam projekt uważam za udany i jestem z niego bardzo zadowolony. Zrozumiałem i nauczyłem się bardzo wielu rzeczy, które myślę, że z pewnością wykorzystam w przyszłości. + +\end{document} \ No newline at end of file