Przejdź do głównej treści

Interfejs i design

Wprowadzenie​

Rozwój frontendu, czyli tego, co jest przetwarzane wizualnie przez przeglądarkę, odbywa się w folderze ui.

Domyślnie w tym folderze znajduje się środowisko programistyczne oparte na ReactJS z Ant.Design i Less, kompilowane przy użyciu Vite.

Mimo że domyślne środowisko jest skonfigurowane pod te technologie, ponieważ są dziś powszechnie stosowane, nie jest ono do nich ograniczone.

Jeśli chcesz użyć innej technologii, takiej jak VueJS, MaterialUI, Sass, Bootstrap, TypeScript itp., wystarczy zmienić w folderze 📂 ui konfigurację 📂 package.json i 📂 vite.config.js na preferowane technologie.

Więcej o zintegrowanym i centralnym terminalu.

Wymagania wstępne​

Przed rozpoczęciem warto upewnić się, że masz zainstalowany Bun.

Zobacz, jak zainstalować Bun.

Aby lepiej zrozumieć działanie interfejsu użytkowania, polecamy:

Rozszerzanie usługi​

Po utworzeniu usługi pracownicy w 📂 server/services/pracownicy.js za pomocą Visual Studio Code, która udostępnia informacje w formacie JSON pod adresem:

Następnym krokiem jest rozszerzenie jej tak, aby prezentowała dane w interfejsie przeglądarki.

Za pomocą tych danych przedstawimy je w tabeli i na wykresie.

Zakładając, że masz otwarty Visual Studio Code lub inny edytor tekstu z aplikacją Demo.

Otwórz w edytorze następujący plik:

📂 ui/src/containers/KontenerDashboardu/index.jsx

Zmodyfikujemy istniejący kod.

Przygotowanie state​

Na samym początku komponentu KontenerDashboardu wewnątrz function znajduje się definicja jego state.

Dodaj nowy wpis do przechowywania danych pracowników w następujący sposób:

            // 👇 Dodaj nowe linie kodu poniżej:
            const [pracownicy, setPracownicy] = useState([]);
            const [ladowanie, setLadowanie] = useState(false);

Czyli dodaj nową linię stanu const [pracownicy, setPracownicy] = useState([]);.

Utworzenie funkcji wczytajPracownikow​

Nieco niżej zauważ, że istnieje funkcja o nazwie wczytajPracownikow; funkcja ta pobiera dane pracowników, które są obecnie wyświetlane na dashboardzie.

Ta funkcja służy do wczytywania danych pracowników.

Wstaw poniższy kod:

    /**
    *** 🚀 Wczytuje dane pracowników.
    ***    Poprzez wykonanie usługi:
    **     http://localhost:9000/services/pracownicy
    */
    const wczytajPracownikow = () => {
        setPracownicy([]);
        setLadowanie(true);
        _service({
            url: intl.locale.indexOf('pl') == 0 ? '/services/pracownicy' : '/services/workers',
            success: (odpowiedz) => {
                setPracownicy(odpowiedz.json);
                setLadowanie(false);
            },
            fail: (e) => {
                setLadowanie(false);
                console.error('Błąd usługi pracowników.', e);
                message.error(intl.formatMessage({ id: `${komunikaty}.blad_ladowania` }));
            }
        });
    };

Powyższy kod przekazuje dane pracowników do state komponentu w ReactJS, wykonując usługę pracownicy, która po otrzymaniu danych w JSON zapisuje je w state przez wywołanie setPracownicy.

Końcowy kod powinien mieć następującą strukturę:

    useEffect(() => {
        ...
    }, []);

    const wczytajPracownikow = () => {
        ...
    }

    return ( 
        ...
    );

Gdzie ... to poszczególne linie kodu pominięte w odpowiednich blokach.

Uruchomienie hooka useEffect​

Teraz pozostaje uruchomić nasz hook useEffect, gdy komponent jest „montowany”; hook ten jest wykonywany, gdy komponent jest budowany w warstwie wizualnej przeglądarki.

W tym celu wystarczy nieco wyżej dodać linię kodu wczytajPracownikow(); wewnątrz hooka useEffect w następujący sposób:

    useEffect(() => {
        wczytajPracownikow();
    }, []);

Ta nowa linia kodu wywoła funkcję wykonującą usługę http://localhost:9000/services/pracownicy, utworzoną wcześniej, aby pobrać dane w JSON i zapisać je w state (stanie) komponentu do zaprezentowania w return (widoku).

Kompilacja​

Zapisz plik, a następnie zauważ, że w terminalu, w którym działa Netuno, pojawi się wynik nowej kompilacji ui, z nowymi liniami wyniku kompilacji ReactJS + Vite.

Oczekiwany wynik w terminalu powinien być podobny do poniższego:

> ui@1.0.0 watch netuno/apps/demo/ui
> bunx --bun vite build --watch

vite v7.1.2 building for production...

watching for file changes...

(!) outDir netuno/apps/demo/public is not inside project root and will not be emptied.
Use --emptyOutDir to override.

build started...
transforming...
✓ 4008 modules transformed.

rendering chunks...
computing gzip size...
../public/scripts/ui.js  1,433.96 kB │ gzip: 421.89 kB
built in 2128ms.

Jeśli w kompilacji wystąpi jakikolwiek błąd, w terminalu pojawi się wskazanie problemu.

Do tego miejsca zrealizowaliśmy korzystanie z naszej usługi pracownicy, a uzyskane dane są zapisywane w state komponentu KontenerDashboardu, dzięki czemu są dostępne do wykorzystania w return.

Prezentacja danych​

Pozostaje zaprezentować dane wizualnie w interfejsie, który użytkownik widzi w przeglądarce.

Aby przedstawić dane w przeglądarce, musimy zmienić return, który odpowiada za wygląd wizualny komponentów w ReactJS.

Na końcu kodu KontenerDashboardu znajdziesz: return ( ... );

Zmodyfikujemy go, dodając tylko jedną linię kodu, aby zawierał jeszcze komponent WizualizacjaDanych, który zaprezentuje dane dotyczące pracowników. Kod powinien wyglądać następująco:

    // 🔍 W istniejącym kodzie znajdź:
    return (
    <div ref={ref}>
      { ladowanie == false ?
        <WizualizacjaDanych data={pracownicy} />
        : <Spin/>
      }
      <ListaUslug />
    </div>
  );

Zauważ, że należy dodać tylko poniższą linię:

<WizualizacjaDanych data={pracownicy} />

W ten sposób WizualizacjaDanych otrzyma dane uzyskane przez usługę pracownicy poprzez JSON, które zostały zapisane w state.

Ostateczna kompilacja​

Zapisz plik ze wszystkimi dotychczasowymi zmianami.

Upewnij się, że w wynikach terminala nie ma błędów.

Teraz odśwież stronę w przeglądarce, a powinieneś zobaczyć końcowy wynik, albo alternatywnie kliknij poniższy link:

Jeśli dashboard pojawi się jako pusty, oznacza to, że w kodzie są błędy.

Sprawdź w konsoli przeglądarki w narzędziach deweloperskich, czy występują błędy.

Dowiedz się więcej 👇​

Krótkie wprowadzenie do ReactJS: