PRT-Hub
Categories:
PRT-Hub
Projekt PRTHub, jest stroną internetową postawioną na naszym formułowym serwerze, która służy do zgromadzenia funkcji ułatwiających członkom zespołu pracę na warsztacie. Poza przydatnymi informacjami na stronie głównej, która jest dostępna po zalogowaniu się, możemy zauważyć m.in. generatory do ofert oraz stopek do maili. Strona jest ciągle rozbudowywana o nowe funkcje.
Osoby odpowiedzialne:
- Wiktoria Czech
Gdzie można znaleźć ten projekt?
Projekt znajduje się na stronie internetowej, wymagane jest zalogowanie się: PRT-Hub
Jak z niego korzystać?
Po wejściu w adres strony internetowej klikamy w bolid lub z przycisk w prawym górnym rogu żeby się zalogować. Podajemy swoje dane i logujemy się.
Zostajemy przekierowani na stronę główną gdzie możemy zobaczyć czas pozostały do nadchodzących zawodów w tym sezonie oraz kalendarz z informacją o sprzątaniu dla danej sekcji. 3 przyciski pod kalendarzem przeniosą nas na strony opisane na przyciskach.
Po lewej stronie widzimy granatowy pasek nawigacji, dzięki któremu możemy przejść na interesujące nas podstrony.
Tworzenie ofert oraz generator stopek
Oba projekty wymagają uzupełnienia formularza, który pojawia się gdy wejdziemy w odpowiednią zakładkę na pasku nawigacji. Pola wymagane oznaczono czerwoną gwiazdką i podano też przykładowe dane w okienkach. Po naciśnięciu przycisku Wygeneruj/Wyślij dostajemy informację zwrotną w formie pola z informacją czy nasze żądanie powiodło się.
Dla generatora stopek po najechaniu na słowo POCZTA lub naciśnięciu któregokolwiek z kolorowych przycisków w formularzu wyświetlona zostaje lista z popularnymi serwisami pocztowymi. Należy wybrać swoją pocztę i kliknąć w nią. Pojawi się lista kroków jak dodać wygenerowaną stopkę. Wytłuszczony przycisk TUTAJ otwiera w nowym oknie link z instrukcją w razie problemów.
Panel sponsorów
Wchodząc w panel sponsorów widzimy 4 karty, które sortują naszych aktualnych sponsorów na kategorie. Wchodząc w interesującą nas kartę widzimy listę sponsorów z danej kategorii. Reszta funkcji widoczna w oknie nawigacji będzie programowana i uzupełniana na bieżąco.
Część Techniczna
Wyżej opisany projekt obejmuje część frontendową pisaną w frameworku REACT na Node.js w wersji 18.12.1. Zainstalowany poprzez komendę npm i antd layout ant-designu został w różnych częściach projektu zaimplementowany w celu ukrócenia sobie męki programowania „koła” na nowo.
Każda podstrona bądź znacząca część strony została wydzielona do osobnych folderów, zawierających komponent javascriptowy z css’em do niego w celu zachowania jakiejkolwiek przejrzystości kodu. Przy programowaniu każdej części strony ogarnięto responsywność ale nie była ona testowana na każdym telefonie. W celu nadpisania defaultowego wyglądu niektórych komponentów antd wrzucono „!important” w css.
Cele
- Skalowalność: możliwość dodania nowych funkcji
- Ułatwienie dostępu: Generowanie prawidłowych pdf do zakupu części bolidowych, wyszukiwarka
- ALL in ONE: dużo przydatnych funkcji zebranych w jednym miejscu
Założenia projektowe
Do projektu nie mogą mieć dostępu osoby niezalogowane. Funkcjonalność ponad wygląd ale to nie znaczy , że strona ma wyglądać beznadziejnie. Przyjazne UI.
Użyte technologie
- Framework: React ^ 18.2.0
- Oprogramowanie: Node.js ^ 18.12.1
Biblioteki:
- Ant-design-icons ^ 5.0.1
- Antd ^ 5.2.3
- History ^ 5.3.0
Napotkane problemy
Kalendarz:
W celu wykonania jakiejkolwiek operacji na kalendarzu antd nie odwoływać się do zmiennych w obiekcie – są prywatne. Wszystkie prywatne zmienne oznaczone są „_” przed nazwą zmiennej.