Przepływ pracy w aplikacji internetowej

W AppMaster Web Designer możesz skonfigurować logikę biznesową dla aplikacji internetowych po stronie frontendu , oprócz logiki backendu . Ta zaawansowana funkcja umożliwia tworzenie wyrafinowanych, dynamicznych aplikacji internetowych dostosowanych do konkretnych potrzeb biznesowych.

W kontekście aplikacji internetowej procesy biznesowe mogą obejmować uwierzytelnianie użytkowników, przetwarzanie danych, transakcje online, zarządzanie treścią, operacje związane z obsługą klienta i dostosowywanie elementów interfejsu użytkownika w zależności od warunków.

Trzy poziomy logiki biznesowej w AppMaster Web Designer:

• Wyzwalacze aplikacji: Są to wyzwalacze wysokiego poziomu, które reagują na zdarzenia lub stany całej aplikacji, uruchamiając określone procesy biznesowe.
• Ogólne procesy biznesowe: są to predefiniowane zestawy operacji, które można zastosować w różnych częściach aplikacji, automatyzując zadania i usprawniając przepływy pracy.
• Wyzwalacze elementów: Bardziej szczegółowe niż wyzwalacze aplikacji, są powiązane z określonymi elementami interfejsu użytkownika, aktywując procesy biznesowe w oparciu o interakcje z tymi elementami.

Wykorzystując te poziomy logiki biznesowej, AppMaster Web Designer umożliwia tworzenie aplikacji internetowych, które są nie tylko atrakcyjne wizualnie, ale także inteligentne i reagujące na potrzeby i zachowania użytkowników.

🔔 Ważne jest, aby ponownie załadować bieżący podgląd po dodaniu nowej logiki biznesowej w celu uruchomienia BP.

Wyzwalacze aplikacji

Wyzwalacze aplikacji w AppMaster Web Designer to wyzwalacze wysokiego poziomu, które reagują na zdarzenia lub stany całej aplikacji, uruchamiając wykonanie określonych procesów biznesowych w celu zwiększenia funkcjonalności i komfortu użytkownika.

AppMaster oferuje różnorodne wyzwalacze aplikacji, każdy zaprojektowany dla określonych scenariuszy:

• Przy uruchomieniu aplikacji: Aktywowany podczas uruchamiania aplikacji, idealny do procedur wstępnej konfiguracji.
• Nawigacja w aplikacji: Uruchamia się podczas nawigacji pomiędzy różnymi częściami aplikacji.
• Rozmycie w aplikacji: Wywoływane, gdy aplikacja traci ostrość, przydatne do wstrzymywania lub zapisywania działań.
• Przy skupieniu aplikacji: uruchamia się, gdy aplikacja odzyskuje ostrość, co doskonale nadaje się do wznawiania lub aktualizowania zawartości.
• W aplikacji ukrytej: Aktywowane, gdy aplikacja jest zminimalizowana lub niewidoczna na ekranie.
• Przy widoczności aplikacji: uruchamia się, gdy aplikacja znów stanie się widoczna, co jest przydatne do odświeżania zawartości.
• On App Destroy: Wykonuje się podczas procesu zamykania aplikacji.
• W aplikacji online: wyzwalane, gdy aplikacja wykryje status online, idealne do synchronizacji danych.
• W aplikacji offline: Uruchamia się, gdy aplikacja przechodzi w tryb offline, umożliwiając korzystanie z funkcji offline.
• Wymagane uwierzytelnienie aplikacji: Aktywuje się po otrzymaniu odpowiedzi „401 (nieautoryzowane)”, monitującej o ponowne uwierzytelnienie użytkownika.
• W aplikacji zabronione: wyzwala odpowiedź „403 (zabronione)”, zwykle używaną do kontroli dostępu i uprawnień.

Dokładną listę wyzwalaczy aplikacji można rozszerzyć, tworząc punkty końcowe WebSocket na poziomie zaplecza aplikacji.

Wyzwalacze te można wykorzystać do zarządzania autoryzacją użytkownika przy uruchomieniu, weryfikowania praw dostępu, konfigurowania przekierowań po zmianach autoryzacji, obsługi błędów i wielu innych, co czyni je niezbędnymi do stworzenia responsywnej i bezpiecznej aplikacji internetowej.

Ogólne procesy biznesowe

Ogólne procesy biznesowe w aplikacji AppMaster Web Designer zostały specjalnie zaprojektowane w celu enkapsulacji powtarzalnych operacji i nadmiarowej logiki w odrębne przepływy. Po utworzeniu te procesy biznesowe można bezproblemowo zintegrować jako odrębne bloki z dowolnym poziomem procesów biznesowych aplikacji internetowej.

Kluczowe cechy:

• Efektywne zarządzanie przepływem pracy: Przenosząc typowe zadania do ogólnych procesów biznesowych, znacznie ograniczasz powielanie i usprawniasz przepływ pracy w aplikacji.
• Funkcjonalność frontonu: Odzwierciedlając funkcjonalność procesów biznesowych backendu, ogólne procesy biznesowe są w unikalny sposób wykonywane na frontonie . Pozwala to na szybszą interakcję i natychmiastową informację zwrotną w interfejsie użytkownika.

Łatwość ponownego użycia:

Aby użyć ogólnego procesu biznesowego podczas budowania logiki, po prostu przeciągnij żądany blok z grupy BP utworzonych przez użytkownika na swoje płótno.

🔔 Uwzględnienie wydajności: należy pamiętać, że w przypadku złożonych i wymagających dużej ilości zasobów zadań zalecamy wykonywanie tych procesów po stronie serwera (backend). Takie podejście zapewnia lepszą wydajność i efektywność, szczególnie w przypadku operacji wymagających obliczeń lub wymagających bezpiecznego przetwarzania wrażliwych danych.

Wyzwalacze elementów

Wyzwalacze komponentów w AppMaster Web Designer są niezbędne do dodawania interaktywności do aplikacji internetowych. Wyzwalacze te są powiązane z określonymi elementami interfejsu użytkownika i aktywują predefiniowane procesy biznesowe w odpowiedzi na interakcje użytkownika. Każdy komponent aplikacji ma zestaw wyzwalaczy, które można dostosować, aby zapewnić dynamiczne i angażujące doświadczenie użytkownika:

• Typowe wyzwalacze: Komponenty mają wspólny zestaw standardowych wyzwalaczy, takich jak onCreate , onDestroy , onShow i onHide , które reagują na zmiany cyklu życia i widoczności komponentu.
• Konkretne wyzwalacze: Oprócz typowych wyzwalaczy komponenty mają unikalne wyzwalacze dostosowane do ich funkcjonalności. Na przykład Button może mieć wyzwalacz onClick , Tabela może odpowiadać na onUpdateData , a Tabs może mieć wyzwalacz onTabSelect .

Pomimo różnorodności podstawowa zasada pozostaje spójna: zdarzenie uruchamia odpowiedni proces biznesowy. Efektywnie wykorzystując wyzwalacze komponentowe, możesz stworzyć interaktywną i responsywną aplikację internetową, która reaguje na dane wejściowe użytkownika w czasie rzeczywistym, poprawiając ogólne wrażenia użytkownika i czyniąc aplikację bardziej intuicyjną i przyjazną dla użytkownika.

Dostęp do wyzwalaczy

Aby wyświetlić i skonfigurować wyzwalacze komponentu, wybierz komponent na płótnie i przejdź do zakładki „Przepływ pracy” na prawym pasku bocznym. Tutaj znajdziesz listę dostępnych wyzwalaczy. Kliknięcie jednego z nich umożliwia dołączenie do niego żądanego procesu biznesowego. Wyzwalacze z dołączoną logiką są podświetlone na niebiesko w celu łatwej identyfikacji.

Tworzenie procesów biznesowych

Konfigurowanie procesu biznesowego dla wyzwalacza komponentu opiera się na podobnym podejściu do tworzenia procesów biznesowych zaplecza, jak pokazano w module 4. Będziesz używać wspólnego obszaru roboczego, do którego dodawane są bloki reprezentujące różne działania. Połączenia pomiędzy tymi blokami definiują sekwencję działań, pozwalając na intuicyjne budowanie złożonych przepływów pracy.

Budowanie przepływu pracy aplikacji

Stwórzmy taki proces biznesowy dla przycisku Oblicz. Najpierw zdecyduj, co musimy zrobić po kliknięciu przycisku:

• Znajdź wartości X i Y. Pobierz je z odpowiednich pól wejściowych.
• Uruchom punkt końcowy do obliczeń i przekaż do niego parametry X i Y.
• Spraw, aby kontener wyników był widoczny.
• Umieść wynik obliczeń w wymaganych polach Etykieta.

Wybierz element przycisku Calc na płótnie i kliknij wyzwalacz onClick .

Edytor procesów biznesowych będzie otwarty. Tutaj zbudujemy nasz proces biznesowy dla przycisku.

Uzyskaj wartości z danych wejściowych

Pierwszym krokiem jest pobranie wartości wprowadzonych przez użytkownika. W tym celu AppMaster udostępnia blok danych wejściowych typu Float Get Data, który zawiera „Klucz elementu” jako parametr wejściowy i generuje „Wartość”, zasadniczo odczytując bieżące wartości z określonego komponentu.

Ponieważ mamy dwa oddzielne pola (reprezentujące wartości X i Y), będziesz musiał użyć dwóch bloków „Input Float Get Data” - po jednym dla każdego pola wejściowego.

Aby to skonfigurować:

• Przeciągnij dwa bloki danych wejściowych Float Get na płótno dla każdego pola wejściowego.
• Ustaw klucz elementu dla każdego bloku tak, aby odpowiadał odpowiednim wejściom pływającym. To łączy blok z właściwym elementem interfejsu użytkownika, zapewniając odczytanie właściwych danych.

Jeśli wcześniej zmieniłeś nazwy elementów w Projektancie interfejsu użytkownika podczas tworzenia interfejsu, zlokalizowanie i wybranie niezbędnego komponentu dla każdego bloku stanie się proste.

☝️ Zmiana nazw elementów na etapie projektowania ułatwia ich późniejszą identyfikację podczas konfiguracji logiki biznesowej.

Uruchom punkt końcowy

Po pobraniu danych wejściowych użytkownika kolejną fazą przepływu pracy aplikacji internetowej jest zainicjowanie punktu końcowego . Ten krytyczny krok ustanawia połączenie między frontendem (interfejsem użytkownika) a backendem (procesami po stronie serwera) aplikacji internetowej, a polecenie do obliczeń jest przesyłane z przeglądarki na serwer.

Punkty końcowe w AppMaster są reprezentowane jako odrębne bloki procesów biznesowych w aplikacji. Aby skorzystać z naszych punktów końcowych, po prostu wybierz odpowiedni z listy bloków procesów biznesowych i przeciągnij go na swoje płótno.

W module 5 skonfigurowaliśmy punkt końcowy za pomocą metody GET i przypisaliśmy mu podstawowy adres URL „module4-basic” . Powinieneś znaleźć go na liście - Żądanie serwera GET /module4-basic/ i przeciągnij go na płótno.

W przeciwieństwie do komponentów, punkty końcowe AppMaster nie wymagają ustawienia swojego identyfikatora, ponieważ jest on predefiniowany. Ta funkcja usprawnia proces integracji punktów końcowych z logiką biznesową.

Ostatnim krokiem jest wprowadzenie wartości X i Y uzyskanych w poprzednim kroku do punktu końcowego. Dzięki temu backend może odbierać i przetwarzać te dane wejściowe, wykonując niezbędne obliczenia.

Stan elementów interfejsu użytkownika

Następnym krokiem w przepływie pracy aplikacji internetowej jest zarządzanie widocznością kontenerów — w szczególności pokazywanie kontenera wyświetlającego wyniki i ukrywanie kontenera zawierającego wskazówkę.

Oto jak to osiągnąć:

1. Rozpocznij od przeciągnięcia dwóch bloków właściwości Flex Update na płótno.
2. Dla każdego bloku właściwości Flex Update przypisz parametr klucza elementu odpowiadający odpowiednim kontenerom – jeden dla kontenera wyników, a drugi dla kontenera podpowiedzi.
3. Skonfiguruj parametr widoczności w tych blokach. Ustaw parametr Visible na True dla kontenera wyników, upewniając się, że stanie się on widoczny po obliczeniu. I odwrotnie, ustaw ten parametr na False , aby kontener wskazówek ukrył go po zakończeniu obliczeń.

Implementując te kroki, utworzysz dynamiczną odpowiedź w interfejsie aplikacji. Po akcji użytkownika, takiej jak kliknięcie przycisku w celu wykonania obliczeń, aplikacja automatycznie ukrywa kontener podpowiedzi i wyświetla kontener wyników.

To nie tylko poprawia komfort użytkownika, ale także utrzymuje interfejs aplikacji w czystości i pozwala skupić się na istotnych informacjach na każdym etapie interakcji.

Podgląd w czasie rzeczywistym

Aby ocenić postęp procesu biznesowego, możesz łatwo wyświetlić podgląd wyników pośrednich:

1. Najpierw kliknij przycisk Zapisz i wyjdź w edytorze procesów biznesowych. Ta czynność spowoduje zapisanie bieżącego przepływu pracy i zamknięcie edytora procesów biznesowych.
2. Uruchom podgląd swojej aplikacji internetowej w czasie rzeczywistym , aby sprawdzić interakcję z aplikacją tak, jakby była aktywna.
3. Przetestuj funkcjonalność, klikając przycisk Oblicz .

Jeśli Twój proces biznesowy został poprawnie skonfigurowany, zobaczysz dynamiczną reakcję: kontener z podpowiedzią zostanie ukryty, a jednocześnie odsłonięty zostanie kontener wyświetlający wyniki.

Ta metoda testowania oferuje praktyczny i natychmiastowy sposób sprawdzenia, czy procesy biznesowe działają zgodnie z założeniami, umożliwiając dokonanie niezbędnych korekt przed sfinalizowaniem aplikacji.

Renderowanie danych

Po pomyślnym przetestowaniu logiki aplikacji nadszedł czas na dalsze udoskonalenie logiki biznesowej.

Ostatnim krokiem jest wyświetlenie obliczonych wyników w interfejsie aplikacji internetowej. Zmapujemy dane wyjściowe naszego procesu biznesowego zaplecza na odpowiednie elementy interfejsu użytkownika Twojej aplikacji internetowej.

Biorąc pod uwagę, że wyniki z backendu są zwracane w ustalonej kolejności, Twoim zadaniem jest dopasowanie każdego fragmentu danych (elementu tablicy) do prawidłowego elementu bloku tekstu w interfejsie użytkownika.

Do obsługi danych będziemy wykorzystywać następujące bloki:

• Element tablicy : użyj ich, aby uzyskać dostęp do poszczególnych elementów tablicy wynikowej. Będziesz potrzebował bloku dla każdego indeksu, od 0 do 4.
• Na tekst: ponieważ dane są w formacie Float, użyj tego bloku, aby przekonwertować te wartości Float na format tekstowy odpowiedni do wyświetlenia.
• Dane aktualizacji bloku tekstowego: ten blok jest niezbędny do zapełnienia bloków tekstowych w interfejsie użytkownika przekonwertowanymi danymi tekstowymi.

Bloki te wyodrębnią dane z tablicy wyników, przekonwertują je na format tekstowy, a następnie zaktualizują odpowiednie bloki tekstowe w interfejsie użytkownika.

Oto jak to skonfigurować:

1. Umieść te bloki na płótnie.
2. W bloku Array Element wprowadź tablicę otrzymaną z punktu końcowego (zacznij od 0).
3. Ustaw indeks, aby wskazywał odpowiedni element w tablicy.
4. Połącz wartość wyjściową elementu tablicy z blokiem To Text .
5. Określ klucz elementu w danych aktualizacji bloku tekstowego dla elementu interfejsu użytkownika, w którym mają być wyświetlane dane.
6. Połącz bloki sekwencyjnie.

Powiel tę sekwencję bloków dla każdego elementu tablicy, którą chcesz wyświetlić. Dostosuj indeks w każdym bloku „Element tablicy”, aby odpowiadał różnym elementom tablicy.

Upewnij się, że te bloki są również połączone sekwencyjnie.

Ostateczny wynik

To kończy tworzenie procesu biznesowego.

Zapisz swój proces biznesowy i sprawdź efekt końcowy w podglądzie. Uruchom podgląd aplikacji w tym planie wdrożenia, w którym opublikowałeś punkt końcowy w module 5 .

🎉 Gratulujemy fantastycznego osiągnięcia!

Udało Ci się stworzyć w pełni funkcjonalną aplikację internetową z logiką biznesową i interaktywnym interfejsem użytkownika. Jeśli wszystko działa zgodnie z oczekiwaniami, możesz teraz wykonać kolejny, ostatni krok polegający na opublikowaniu aplikacji i udostępnieniu jej użytkownikom.

Ale podróż nie kończy się tutaj. Istnieje wiele możliwości dalszego udoskonalenia aplikacji! Możesz poprawić atrakcyjność wizualną i wygodę użytkownika, dostosowując wygląd elementów interfejsu użytkownika lub rozszerzając logikę aplikacji internetowej. Na przykład możesz ustawić wymagane pola i dodać przycisk resetujący pola bez ręcznego czyszczenia każdego wpisu.