Flusso di lavoro dell'app Web

In AppMaster Web Designer, puoi configurare la logica aziendale per le applicazioni web sul lato frontend oltre alla logica backend . Questa potente funzionalità consente di creare applicazioni Web sofisticate e dinamiche su misura per esigenze aziendali specifiche.

In un contesto di applicazione Web, i processi aziendali potrebbero includere l'autenticazione dell'utente, l'elaborazione dei dati, le transazioni online, la gestione dei contenuti, le operazioni del servizio clienti e la personalizzazione degli elementi dell'interfaccia utente in base alle condizioni.

Tre livelli di logica aziendale in AppMaster Web Designer:

• Trigger dell'applicazione: si tratta di trigger di alto livello che rispondono a eventi o stati a livello di applicazione, attivando processi aziendali specifici.
• Processi aziendali generici: si tratta di insiemi predefiniti di operazioni che possono essere applicati in varie parti dell'applicazione, automatizzando le attività e semplificando i flussi di lavoro.
• Trigger di elementi: più granulari dei trigger di applicazione, sono collegati a specifici elementi dell'interfaccia utente, attivando processi aziendali in base alle interazioni con questi elementi.

Sfruttando questi livelli di logica aziendale, AppMaster Web Designer ti consente di creare applicazioni web che non siano solo visivamente accattivanti ma anche intelligenti e reattive alle esigenze e ai comportamenti degli utenti.

🔔 È importante ricaricare l'anteprima in esecuzione dopo aver aggiunto eventuali nuove logiche aziendali per avviare la BP.

Trigger dell'applicazione

I trigger di applicazione in AppMaster Web Designer sono trigger di alto livello che rispondono a eventi o stati a livello di applicazione e eseguono l'esecuzione di processi aziendali specifici per migliorare la funzionalità e l'esperienza dell'utente.

AppMaster offre una varietà di trigger di applicazione, ciascuno progettato per scenari specifici:

• All'avvio dell'app: attivato all'avvio dell'applicazione, ideale per le procedure di configurazione iniziale.
• On App Navigate: si attiva durante la navigazione tra diverse parti dell'applicazione.
• On App Blur: attivato quando l'applicazione perde il focus, utile per mettere in pausa o salvare azioni.
• Al focus dell'app: viene eseguito quando l'applicazione riacquista il focus, ottimo per riprendere o aggiornare il contenuto.
• Su app nascosta: attivato quando l'applicazione è ridotta a icona o non visibile sullo schermo.
• Visibile sull'app: si attiva quando l'applicazione diventa nuovamente visibile, utile per aggiornare il contenuto.
• On App Destroy: viene eseguito durante il processo di arresto dell'applicazione.
• Su app online: attivato quando l'applicazione rileva uno stato online, perfetto per sincronizzare i dati.
• Su app offline: si attiva quando l'applicazione va offline, abilitando le funzionalità offline.
• Autenticazione sull'app richiesta: si attiva alla ricezione di una risposta "401 (Non autorizzato)", richiedendo la riautenticazione dell'utente.
• Su app Proibita: si attiva con una risposta "403 (Proibita)", generalmente utilizzata per il controllo degli accessi e le autorizzazioni.

L'elenco esatto dei trigger dell'applicazione può essere ampliato creando endpoint WebSocket a livello di backend dell'applicazione.

Questi trigger possono essere utilizzati per gestire l'autorizzazione dell'utente all'avvio, verificare i diritti di accesso, configurare il reindirizzamento in caso di modifiche dell'autorizzazione, gestire gli errori e molto altro, rendendoli indispensabili nella creazione di un'applicazione web reattiva e sicura.

Processi aziendali generici

I processi aziendali generici in AppMaster Web Designer sono progettati specificamente per incapsulare operazioni ripetitive e logica ridondante in flussi distinti. Una volta creati, questi processi aziendali possono essere integrati perfettamente come blocchi distinti in qualsiasi livello dei processi aziendali della tua applicazione web.

Caratteristiche principali:

• Gestione efficiente del flusso di lavoro: spostando le attività comuni nei processi aziendali generici, riduci in modo significativo la duplicazione e ottimizzi il flusso di lavoro della tua applicazione.
• Funzionalità del frontend: pur rispecchiando la funzionalità dei processi aziendali di backend, i processi aziendali generici vengono eseguiti in modo univoco sul frontend . Ciò consente interazioni più rapide e feedback immediato all'interno dell'interfaccia utente.

Facilità di riutilizzo:

Per utilizzare un processo aziendale generico durante la creazione della logica, trascina semplicemente il blocco desiderato dal gruppo BP creati dall'utente sull'area di disegno.

🔔 Considerazione sulle prestazioni: è importante notare che per attività complesse e ad uso intensivo di risorse, consigliamo di eseguire questi processi sul lato server (Backend). Questo approccio garantisce prestazioni ed efficienza migliori, soprattutto per le operazioni che richiedono risorse computazionali o che richiedono una gestione sicura di dati sensibili.

Trigger degli elementi

I trigger dei componenti in AppMaster Web Designer sono essenziali per aggiungere interattività alle tue applicazioni web. Questi trigger sono legati a specifici elementi dell'interfaccia utente, attivando processi aziendali predefiniti in risposta alle interazioni dell'utente. Ogni componente della tua applicazione dispone di una serie di trigger che possono essere personalizzati per creare un'esperienza utente dinamica e coinvolgente:

• Trigger comuni: i componenti condividono una serie di trigger standard come onCreate , onDestroy , onShow e onHide , che rispondono al ciclo di vita del componente e alle modifiche alla visibilità.
• Trigger specifici: oltre ai trigger comuni, i componenti dispongono di trigger unici adattati alla loro funzionalità. Ad esempio, un pulsante potrebbe avere un trigger onClick , una tabella potrebbe rispondere a onUpdateData e una scheda potrebbe avere un trigger onTabSelect .

Nonostante la varietà, il principio di fondo rimane coerente: un evento innesca un processo aziendale corrispondente. Utilizzando in modo efficace i trigger dei componenti, puoi creare un'applicazione web interattiva e reattiva che reagisce agli input dell'utente in tempo reale, migliorando l'esperienza utente complessiva e rendendo la tua applicazione più intuitiva e facile da usare.

Accesso ai trigger

Per visualizzare e configurare i trigger di un componente, seleziona il componente sull'area di disegno e vai alla scheda "Flusso di lavoro" nella barra laterale destra. Qui troverai un elenco dei trigger disponibili. Facendo clic su uno di essi è possibile allegarvi il processo aziendale desiderato. I trigger con logica collegata sono evidenziati in blu per una facile identificazione.

Creazione di processi aziendali

L'impostazione di un processo aziendale per un trigger di componente segue un approccio simile alla creazione del processo aziendale backend, come visto nel Modulo 4. Utilizzerai un'area di disegno comune in cui verranno aggiunti blocchi che rappresentano azioni diverse. Le connessioni tra questi blocchi definiscono la sequenza delle azioni, consentendo di costruire flussi di lavoro complessi in modo intuitivo.

Creazione del flusso di lavoro dell'applicazione

Creiamo un processo aziendale di questo tipo per il pulsante Calcola. Innanzitutto, decidi cosa dobbiamo fare quando si fa clic sul pulsante:

• Scopri i valori X e Y. Ottienili dai campi di input corrispondenti.
• Avvia un endpoint per i calcoli e passagli i parametri X e Y.
• Rendi visibile il contenitore dei risultati.
• Inserisci il risultato del calcolo nei campi Etichetta richiesti.

Seleziona il nostro elemento Pulsante Calc nell'area di disegno e fai clic sul trigger onClick .

L'editor dei processi aziendali sarà aperto. Qui costruiremo il nostro processo aziendale per il pulsante.

Ottieni valori dagli input

Il primo passo è ottenere i valori immessi dall'utente. Per questo, AppMaster fornisce il blocco Input Float Get Data, che presenta una "Chiave elemento" come parametro di input e restituisce il "Valore", leggendo essenzialmente i valori correnti dal componente specificato.

Poiché abbiamo due campi separati (che rappresentano i valori X e Y), dovrai utilizzare due blocchi "Input Float Get Data", uno per ciascun campo di input.

Per configurarlo:

• Trascina due Input Float Get Data Blocks sulla tua tela per ciascun campo di input.
• Imposta la chiave dell'elemento per ciascun blocco in modo che corrisponda ai rispettivi ingressi Float. Ciò collega il blocco all'elemento dell'interfaccia utente corretto, assicurando che legga i dati corretti.

Se in precedenza hai rinominato gli elementi nell'UI Designer durante la creazione dell'interfaccia, individuare e selezionare il componente necessario per ciascun blocco diventa semplice.

☝️ Rinominare gli elementi durante la fase di progettazione aiuta a identificarli facilmente in seguito durante la configurazione della logica aziendale.

Avvia l'endpoint

Dopo il recupero degli input dell'utente, la fase successiva nel flusso di lavoro dell'applicazione Web consiste nell'avviare l' Endpoint . Questo passaggio fondamentale stabilisce la connessione tra il frontend (l'interfaccia utente) e il backend (processi lato server) della tua applicazione web e il comando per i calcoli viene trasmesso dal browser al server.

Gli endpoint in AppMaster sono rappresentati come blocchi di processi aziendali distinti all'interno dell'applicazione. Per utilizzare i nostri endpoint, scegli semplicemente quello appropriato dall'elenco dei blocchi dei processi aziendali e trascinalo nel tuo canvas.

Nel modulo 5 abbiamo configurato un endpoint con un metodo GET e gli abbiamo assegnato l'URL di base "module4-basic" . Dovresti trovarlo elencato come - Richiesta server GET /module4-basic/ e trascinarlo nell'area di disegno.

A differenza dei componenti, gli endpoint AppMaster non richiedono l'impostazione del proprio ID, poiché è predefinita. Questa funzionalità semplifica il processo di integrazione degli endpoint nella logica aziendale.

Il passaggio finale consiste nell'inserire i valori X e Y ottenuti dal passaggio precedente nell'endpoint. Ciò consente al backend di ricevere ed elaborare questi input, eseguendo i calcoli necessari.

Stato degli elementi dell'interfaccia utente

Il passaggio successivo nel flusso di lavoro dell'applicazione Web è gestire la visibilità dei contenitori, in particolare mostrare il contenitore che mostra i risultati e nascondere il contenitore che contiene un suggerimento.

Ecco come ottenere questo risultato:

1. Inizia trascinando due blocchi Flex Update Properties sulla tua tela.
2. Per ciascun blocco Flex Update Properties , assegnare il parametro Element Key corrispondente ai rispettivi contenitori: uno per il contenitore dei risultati e l'altro per il contenitore dei suggerimenti.
3. Configura il parametro di visibilità all'interno di questi blocchi. Imposta il parametro Visible su True per il contenitore dei risultati, assicurandoti che diventi visibile dopo il calcolo. Al contrario, imposta questo parametro su False affinché il contenitore dei suggerimenti lo nasconda al completamento del calcolo.

Implementando questi passaggi, crei una risposta dinamica nell'interfaccia dell'applicazione. In seguito all'azione di un utente, ad esempio facendo clic su un pulsante per eseguire calcoli, l'applicazione nasconde automaticamente il contenitore dei suggerimenti e visualizza il contenitore dei risultati.

Ciò non solo migliora l'esperienza dell'utente, ma mantiene anche l'interfaccia dell'applicazione pulita e focalizzata sulle informazioni rilevanti in ogni fase dell'interazione.

Anteprima in tempo reale

Per valutare lo stato di avanzamento del tuo processo aziendale, puoi facilmente visualizzare in anteprima i risultati intermedi:

1. Innanzitutto, fai clic sul pulsante Salva ed esci nell'editor dei processi aziendali. Questa azione salverà il flusso di lavoro corrente e chiuderà l'editor dei processi aziendali.
2. Esegui un'anteprima in tempo reale della tua applicazione web per verificare l'interazione con l'applicazione come se fosse live.
3. Testare la funzionalità facendo clic sul pulsante Calcola .

Se il tuo processo aziendale è stato impostato correttamente, vedrai la risposta dinamica: il contenitore con il suggerimento verrà nascosto e, contemporaneamente, verrà rivelato il contenitore che mostra i risultati.

Questo metodo di test offre un modo pratico e immediato per garantire che i processi aziendali funzionino come previsto, consentendoti di apportare eventuali modifiche necessarie prima di finalizzare la tua richiesta.

Rappresentazione dei dati

Dopo aver testato con successo la logica della tua applicazione, è il momento di perfezionare ulteriormente la logica aziendale.

Il passaggio finale prevede la visualizzazione dei risultati calcolati nell'interfaccia della tua applicazione web. Mapperemo i dati di output del nostro processo aziendale di backend agli elementi dell'interfaccia utente pertinenti della tua applicazione web.

Dato che i risultati dal backend vengono restituiti in un ordine predeterminato, il tuo compito è allineare ogni dato (elemento array) con l'elemento Blocco di testo corretto nella tua interfaccia utente.

Per il trattamento dei dati utilizzeremo i seguenti blocchi:

• Elemento dell'array : utilizzali per accedere ai singoli elementi all'interno dell'array dei risultati. Avrai bisogno di un blocco per ciascun indice, compreso tra 0 e 4.
• In testo: poiché i tuoi dati sono in formato Float, utilizza questo blocco per convertire questi valori Float in un formato di testo adatto alla visualizzazione.
• Dati aggiornamento blocco testo: questo blocco è essenziale per popolare i blocchi di testo nell'interfaccia utente con i dati di testo convertiti.

Questi blocchi estrarranno i dati dall'array dei risultati, li convertiranno in un formato di testo e quindi aggiorneranno i blocchi di testo corrispondenti nell'interfaccia utente.

Ecco come configurarlo:

1. Posiziona questi blocchi sulla tela.
2. Nel blocco Array Element , inserisci l'array ricevuto dal tuo endpoint (inizia da 0).
3. Imposta l' indice in modo che abbia come target l'elemento appropriato all'interno dell'array.
4. Connetti il ​​valore di output dell'elemento array al blocco To Text .
5. Specifica la chiave dell'elemento nel blocco di testo Aggiorna dati nell'elemento dell'interfaccia utente in cui desideri che vengano visualizzati i dati.
6. Collega i blocchi in sequenza.

Duplica questa sequenza di blocchi per ciascun elemento dell'array che desideri visualizzare. Regola l'indice in ciascun blocco 'Array Element' in modo che corrisponda ai diversi elementi dell'array.

Assicurarsi che anche questi blocchi siano collegati in sequenza.

Risultato finale

Ciò completa la creazione del processo aziendale.

Salva il tuo processo aziendale e controlla il risultato finale nell'anteprima. Esegui un'anteprima dell'applicazione sul piano di distribuzione in cui hai pubblicato il tuo endpoint nel Modulo 5 .

🎉 Congratulazioni per il fantastico risultato!

Hai sviluppato con successo un'applicazione web completamente funzionale con logica aziendale e un'interfaccia utente interattiva. Se tutto funziona come previsto, ora sei pronto per compiere il passaggio finale successivo: pubblicare la tua applicazione e condividerla con gli utenti.

Ma il viaggio non si ferma qui. Ci sono ampie opportunità per perfezionare ulteriormente la tua candidatura! Puoi migliorare l'attrattiva visiva e l'esperienza utente personalizzando l'aspetto degli elementi dell'interfaccia utente o espandendo la logica dell'applicazione web. Ad esempio, puoi rendere obbligatori i campi e aggiungere un pulsante per reimpostare i campi senza cancellare manualmente ciascun input.