Ten samouczek przeprowadzi Cię przez tworzenie prostej aplikacji „Hello World” w React. Zaczniesz od podstaw, a potem stopniowo dodasz kolejne funkcje. Tego samego kodu możesz użyć w widoku tablicy, widoku elementu lub widżecie pulpitu.

Obsługiwane frameworki

Ten samouczek jest tylko przykładem i został napisany w React. Framework monday apps nie jest powiązany z żadnym konkretnym frameworkiem, więc możesz użyć dowolnego frameworka JavaScript po stronie klienta i dowolnego języka programowania po stronie serwera. Pamiętaj, że widoki i widżety działają w przeglądarce klienta, dlatego muszą być kompilowane do HTML, CSS i JavaScript.

Zanim zaczniemy

Czego się nauczysz

• Jak zbudować prostą aplikację „Hello World” w React
• Jak spakować i przesłać gotową do produkcyjnego użycia aplikację monday

Wymagania wstępne

• Podstawowa znajomość programowania internetowego (HTML, CSS, JS)
• Środowisko NodeJS na komputerze oraz menedżer pakietów, taki jak npm lub yarn.
• Konto monday.com. Jeśli go nie masz, zarejestruj się tutaj, aby utworzyć bezpłatne konto deweloperskie: tutaj.
• Dostęp do tokena API monday.com

Krok 1. Utwórz aplikację monday

1. Utwórz aplikację.
2. Dodaj funkcję aplikacji. Wybierz Widok tablicy (Board View), Widok ustawień konta (Account Settings View) lub Widżet pulpitu (Dashboard Widget).
3. Wybierz szablon albo utwórz własny od podstaw. W tym samouczku wybierzemy Quickstart - ReactJS.
4. Zobaczysz poniższy ekran. Pozostaw tę kartę otwartą i przejdź do następnej sekcji.

Krok 2: Skonfiguruj środowisko programistyczne

Po wybraniu Quickstart - ReactJS musisz skonfigurować środowisko programistyczne.

1. Zainstaluj apps-cli (mapps) globalnie:

npm i -g @mondaycom/apps-cli

2. Zainicjuj go za pomocą tokena API monday.com:

mapps init -t YOUR_TOKEN

3. Pobierz i uruchom aplikację Quickstart. CLI utworzy też tymczasowy, bezpieczny tunel, dzięki któremu monday.com będzie mieć dostęp do aplikacji uruchomionej lokalnie.

mapps app:scaffold ./ quickstart-react

To polecenie:

• Pobierze projekt quickstart-react do bieżącego katalogu
• Zainstaluje zależności (npm install)
• Uruchomi aplikację lokalnie zaraz po instalacji (npm run start)

4. Poczekaj na zakończenie instalacji. Może to potrwać kilka minut.

Krok 3: Połącz aplikację z monday.com

1. Gdy aplikacja będzie działać, zobaczysz komunikat podobny do tego:

Twoja aplikacja jest dostępna pod tym adresem URL: https://abc1234asdlqwe.loca.lit

2. Wróć do ekranu z końca kroku 1 i wklej adres URL.
3. Jeśli w przyszłości chcesz uruchomić aplikację ręcznie:

cd quickstart-react
npm run start

Krok 4: Zaktualizuj podstawowe informacje o widoku

Po skonfigurowaniu środowiska programistycznego system automatycznie przekieruje Cię do edytora funkcji (Feature Editor).

1. Otwórz kartę Szczegóły funkcji (Feature Details).

Uwaga: W tym miejscu możesz dodać tytuł i opis widoku tablicy lub widżetu. Użytkownicy zobaczą tytuł i opis w widoku lub w centrum pulpitów (Dashboard Center).

2. Możesz zaktualizować nazwę i opis funkcji, link Dowiedz się więcej (Learn More) lub link Opinia (Feedback). Możesz też zdecydować, czy ukryć elementy sterujące tablicy.

3. Zapisz zmiany i przejdź do karty Konfiguracja widoku (View Setup).

4. Na karcie zobaczysz początkową przykładową aplikację z napisem Hello Monday Apps.

5. Teraz możesz po raz pierwszy wczytać aplikację za pomocą adresu URL tunelu.

Niedawno dodaliśmy do aplikacji element Attention Box z naszego systemu projektowego. Tak wygląda po pierwszym otwarciu aplikacji:

Więcej informacji o naszym systemie projektowym znajdziesz tutaj. Możesz też zapoznać się z elementem Attention Box.

Krok 5: Edytuj plik src/App.js, aby dodać prosty interfejs

1. Przejdź do folderu quickstart-react.
2. Otwórz plik App.js pobrany w pakiecie z kodem początkowym.
3. W funkcji App znajdziesz funkcję return().
4. Jeśli chcesz zmienić tekst wyświetlany w elemencie Attention Box przy pierwszym uruchomieniu, użyj właściwości text tego elementu. Jest ona przypisana do zmiennej attentionBoxText. Zastąp tekst wybraną treścią, a zostanie ona wyświetlona w elemencie Attention Box.

Uwaga: Po wykonaniu tych kroków metoda return() powinna wyglądać mniej więcej tak:

  const attentionBoxText = `Ready to start my app journey by building a view!`

  return (
    <div className="App">
      <AttentionBox
        title="Hello Monday Apps!"
        text={attentionBoxText}
        type="success"
      />
    </div>
  );

Po otwarciu sekcji konfiguracji widoku przejdź do podglądu (Preview). Zobaczysz:

Teraz możemy edytować element stylu z naszego systemu projektowego!

Krok 6: Prześlij kompilację aplikacji monday

Aby zbudować prostą aplikację, spakujemy ją do pliku ZIP i prześlemy na serwer monday.com.

1. Skompiluj kod React do wersji produkcyjnej, uruchamiając npm run build. To polecenie utworzy nowy folder build w Twoim katalogu.
2. Spakuj zawartość folderu build do archiwum ZIP.
3. Otwórz funkcję i wybierz kartę Kompilacje (Builds). Kliknij Nowa kompilacja (New Build), aby przesłać kod produkcyjny.
4. Prześlij utworzony plik ZIP.
5. Otwórz tablicę i dodaj do niej swój widok. Aplikacja powinna wyświetlić dane pierwszego elementu na tablicy.

📘 Bezpieczeństwo w naszej sieci CDN

Gdy przesyłasz na naszą platformę aplikację działającą po stronie klienta, jest ona hostowana w sieci CDN aplikacji monday.com. Pamiętaj, że ta sieć CDN nie wymaga uwierzytelniania. Wszystkie widoki i widżety przesłane na naszą platformę będą publicznie dostępne pod losowo wygenerowanym, trudnym do odgadnięcia adresem URL.

Jeśli to Ci nie odpowiada, możesz udostępniać aplikację za pomocą adresu URL iframe.