Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
In questo tutorial, creerai un'applicazione interna di Customer Meeting Request utilizzando AWS App Studio. Imparerai a creare app in App Studio, concentrandoti su casi d'uso reali ed esempi pratici. Inoltre, imparerai a definire le strutture di dati, la progettazione dell'interfaccia utente e la distribuzione delle app.
Nota
Questo tutorial spiega come creare un'app da zero, partendo da un'app vuota. In genere, è molto più semplice e veloce utilizzare l'intelligenza artificiale per generare un'app e le relative risorse fornendo una descrizione dell'app che si desidera creare. Per ulteriori informazioni, consulta Tutorial: generare un'app utilizzando l'intelligenza artificiale.
La chiave per capire come creare applicazioni con App Studio è comprendere i seguenti quattro concetti fondamentali e come funzionano insieme: componenti, automazioni, dati e connettori.
-
Componenti: i componenti sono gli elementi costitutivi dell'interfaccia utente dell'applicazione. Rappresentano elementi visivi come tabelle, moduli e pulsanti. Ogni componente ha il proprio set di proprietà, che è possibile personalizzare in base alle proprie esigenze specifiche.
-
Automazioni: con le automazioni, puoi definire la logica e i flussi di lavoro che regolano il comportamento dell'applicazione. Puoi utilizzare le automazioni per creare, aggiornare, leggere o eliminare righe in una tabella di dati o per interagire con oggetti in un bucket Amazon S3. Puoi anche usarle per gestire attività come la convalida dei dati, le notifiche o le integrazioni con altri sistemi.
-
Dati: i dati sono le informazioni che alimentano l'applicazione. In App Studio, puoi definire modelli di dati, chiamati entità. Le entità rappresentano i diversi tipi di dati che è necessario archiviare e utilizzare, ad esempio le richieste di riunione dei clienti, gli ordini del giorno o i partecipanti. Puoi connettere questi modelli di dati a una varietà di fonti di dati, tra cui AWS servizi ed esterne APIs, utilizzando i connettori di App Studio.
-
Connettori: App Studio fornisce connessioni con un'ampia gamma di fonti di dati, tra cui AWS servizi come Aurora, DynamoDB e Amazon Redshift. Le fonti di dati includono anche servizi di terze parti come Salesforce o molti altri che utilizzano OpenAPI o connettori API generici. Puoi utilizzare i connettori di App Studio per incorporare facilmente nelle tue applicazioni dati e funzionalità di questi servizi e applicazioni esterne di livello aziendale.
Man mano che avanzi nel tutorial, scoprirai come i concetti chiave di componenti, dati e automazione si uniscono per creare l'applicazione interna Customer Meeting Request.
Di seguito sono riportati passaggi di alto livello che descrivono cosa farai in questo tutorial:
-
Inizia con i dati: molte applicazioni iniziano con un modello di dati, quindi questo tutorial inizia anche con i dati. Per creare l'app Customer Meeting Request, inizierai creando un'
MeetingRequestsentità. Questa entità rappresenta la struttura di dati per l'archiviazione di tutte le informazioni pertinenti alla richiesta di riunione, come il nome del cliente, la data della riunione, l'agenda e i partecipanti. Questo modello di dati funge da base per l'applicazione e alimenta i vari componenti e automazioni che creerai. -
Crea la tua interfaccia utente (UI): dopo aver implementato il modello di dati, il tutorial ti guida nella creazione dell'interfaccia utente (UI). In App Studio, crei l'interfaccia utente aggiungendo pagine e componenti ad esse. Aggiungerai componenti come tabelle, viste di dettaglio e calendari a una pagina del pannello di controllo per le richieste di riunione. Questi componenti saranno progettati per visualizzare e interagire con i dati archiviati nell'
MeetingRequestsentità. Ciò consente agli utenti di visualizzare, gestire e pianificare le riunioni con i clienti. Creerai anche una pagina per la creazione di una richiesta di riunione. Questa pagina include un componente Form per raccogliere dati e un componente Button per inviarli. -
Aggiungi la logica aziendale con le automazioni: per migliorare la funzionalità della tua applicazione, configurerai alcuni componenti per consentire le interazioni con gli utenti. Alcuni esempi sono la navigazione verso una pagina o la creazione di un nuovo record di richiesta di riunione nell'
MeetingRequestsentità. -
Migliora con la convalida e le espressioni: per garantire l'integrità e l'accuratezza dei tuoi dati, aggiungerai regole di convalida al componente Form. Ciò contribuirà a garantire che gli utenti forniscano informazioni complete e valide durante la creazione di nuovi record di richieste di riunione. Inoltre, utilizzerete le espressioni per fare riferimento e manipolare i dati all'interno dell'applicazione in modo da poter visualizzare informazioni dinamiche e contestuali in tutta l'interfaccia utente.
-
Anteprima e test: prima di distribuire l'applicazione, avrete la possibilità di visualizzarla in anteprima e testarla a fondo. Ciò ti consentirà di verificare che i componenti, i dati e le automazioni funzionino tutti insieme senza problemi. Ciò offre agli utenti un'esperienza fluida e intuitiva.
-
Pubblica l'applicazione: infine, implementerai l'applicazione Customer Meeting Request interna completa e la renderai accessibile ai tuoi utenti. Con la potenza dell'approccio low-code di App Studio, avrai creato un'applicazione personalizzata che soddisfa le esigenze specifiche della tua organizzazione, senza la necessità di una vasta esperienza di programmazione.
Prerequisiti
Prima di iniziare, esamina e completa i seguenti prerequisiti:
-
Accesso ad AWS App Studio. Per ulteriori informazioni, consulta Configurazione e accesso ad AWS App Studio.
-
Facoltativo: AWS Concetti di App Studio consultalo per acquisire familiarità con importanti concetti di App Studio.
-
Facoltativo: comprensione dei concetti di base dello sviluppo web, come JavaScript la sintassi.
-
Facoltativo: familiarità con AWS i servizi.
Fase 1: creazione di un'applicazione
-
Accedi ad App Studio.
-
Nella barra di navigazione a sinistra, scegli Builder hub e scegli + Crea app.
-
Scegli Inizia da zero.
-
Nel campo Nome app, fornisci un nome per la tua app, ad esempio
Customer Meeting Requests. -
Se ti viene chiesto di selezionare le fonti di dati o un connettore, scegli Ignora ai fini di questo tutorial.
-
Scegli Successivo per continuare.
-
(Facoltativo): guarda il video tutorial per una rapida panoramica sulla creazione di app in App Studio.
-
Scegli Modifica app, che ti porta all'app builder di App Studio.
Passaggio 2: crea un'entità per definire i dati dell'app
Le entità rappresentano tabelle che contengono i dati dell'applicazione, simili alle tabelle di un database. Invece dell'interfaccia utente (UI) dell'applicazione e delle automazioni che si connettono direttamente alle fonti di dati, si connettono innanzitutto alle entità. Le entità fungono da intermediario tra la fonte di dati effettiva e l'app App Studio e forniscono un unico posto per gestire e accedere ai dati.
Esistono quattro modi per creare un'entità. Per questo tutorial, utilizzerai l'entità gestita da App Studio.
Crea un'entità gestita
La creazione di un'entità gestita crea anche una tabella DynamoDB corrispondente gestita da App Studio. Quando vengono apportate modifiche all'entità nell'app App Studio, la tabella DynamoDB viene aggiornata automaticamente. Con questa opzione, non è necessario creare, gestire o connettersi manualmente a una fonte di dati di terze parti o designare la mappatura dai campi delle entità alle colonne della tabella.
Quando si crea un'entità, è necessario definire un campo chiave primaria. Una chiave primaria funge da identificatore univoco per ogni record o riga dell'entità. Ciò garantisce che ogni record possa essere facilmente identificato e recuperato senza ambiguità. La chiave primaria è costituita dalle seguenti proprietà:
-
Nome della chiave primaria: un nome per il campo chiave primaria dell'entità.
-
Tipo di dati della chiave primaria: il tipo di campo della chiave primaria. In App Studio, i tipi di chiave primaria supportati sono String per il testo e Float per un numero. Una chiave primaria testuale (like
meetingName) avrebbe un tipo di String e una chiave primaria numerica (likemeetingId) avrebbe un tipo di Float.
La chiave primaria è un componente cruciale di un'entità perché rafforza l'integrità dei dati, previene la duplicazione dei dati e consente un recupero e un'interrogazione efficienti dei dati.
Per creare un'entità gestita
-
Scegli Dati dal menu della barra in alto.
-
Scegli + Crea entità.
-
Scegli Crea entità gestita da App Studio.
-
Nel campo Nome dell'entità, fornisci un nome per la tua entità. Per questo tutorial, digita
MeetingRequests. -
Nel campo Chiave primaria, inserisci l'etichetta del nome della chiave primaria da assegnare alla colonna della chiave primaria dell'entità. Per questo tutorial, digita
requestID. -
Per il tipo di dati della chiave primaria, scegli Float.
-
Scegliere Create entity (Crea entità).
Aggiungi campi alla tua entità
Per ogni campo, specificherai il nome visualizzato, ovvero l'etichetta visibile agli utenti dell'app. Il nome visualizzato può contenere spazi e caratteri speciali, ma deve essere univoco all'interno dell'entità. Il nome visualizzato funge da etichetta intuitiva per il campo e aiuta gli utenti a identificarne e comprenderne facilmente lo scopo.
Successivamente, fornirai il nome del sistema, un identificatore univoco utilizzato internamente dall'applicazione per fare riferimento al campo. Il nome del sistema deve essere conciso, senza spazi o caratteri speciali. Il nome del sistema consente all'applicazione di apportare modifiche ai dati del campo. Funge da punto di riferimento unico per il campo all'interno dell'applicazione.
Infine, selezionerai il tipo di dati che meglio rappresenta il tipo di dati che desideri archiviare nel campo, ad esempio String (text), Boolean (true/false), Date, Decimal, Float, Integer o. DateTime La definizione del tipo di dati appropriato garantisce l'integrità dei dati e consente la corretta gestione ed elaborazione dei valori del campo. Ad esempio, se memorizzi i nomi dei clienti nella richiesta di riunione, dovresti selezionare il tipo di String dati per contenere i valori di testo.
Per aggiungere campi alla tua MeetingRequests entità
-
Scegli + Aggiungi campo per aggiungere i seguenti quattro campi:
-
Aggiungi un campo che rappresenta il nome di un cliente con le seguenti informazioni:
-
Nome visualizzato:
Customer name -
Nome del sistema:
customerName -
Tipo di dati:
String
-
-
Aggiungi un campo che rappresenta la data della riunione con le seguenti informazioni:
-
Nome visualizzato:
Meeting date -
Nome del sistema:
meetingDate -
Tipo di dati:
DateTime
-
-
Aggiungi un campo che rappresenta l'ordine del giorno della riunione con le seguenti informazioni:
-
Nome visualizzato:
Agenda -
Nome del sistema:
agenda -
Tipo di dati:
String
-
-
Aggiungi un campo per rappresentare i partecipanti alla riunione con le seguenti informazioni:
-
Nome visualizzato:
Attendees -
Nome del sistema:
attendees -
Tipo di dati:
String
-
-
Puoi aggiungere dati di esempio alla tua entità che puoi utilizzare per testare e visualizzare in anteprima l'applicazione prima di pubblicarla. Aggiungendo fino a 500 righe di dati fittizi, è possibile simulare scenari reali ed esaminare come l'applicazione gestisce e visualizza vari tipi di dati, senza fare affidamento su dati reali o connettersi a servizi esterni. Ciò consente di identificare e risolvere eventuali problemi o incongruenze nelle prime fasi del processo di sviluppo. Ciò garantisce che l'applicazione funzioni come previsto quando si tratta di dati effettivi.
Per aggiungere dati di esempio alla tua entità
-
Scegli la scheda Dati di esempio nel banner.
-
Scegli Genera altri dati di esempio.
-
Scegli Save (Salva).
Facoltativamente, scegli Connessione nel banner per esaminare i dettagli sul connettore e sulla tabella DynamoDB creata per te.
Fase 3: Progettazione dell'interfaccia utente (UI) e della logica
Aggiungi una pagina del pannello di controllo per le richieste di riunione
In App Studio, ogni pagina rappresenta una schermata dell'interfaccia utente (UI) dell'applicazione con cui gli utenti interagiranno. All'interno di queste pagine, puoi aggiungere vari componenti come tabelle, moduli e pulsanti per creare il layout e la funzionalità desiderati.
Le applicazioni appena create hanno una pagina predefinita, quindi dovrete rinominarla invece di aggiungerne una nuova da utilizzare come semplice pagina del pannello di controllo per le richieste di riunione.
Per rinominare la pagina predefinita
-
Nel menu di navigazione della barra superiore, scegli Pagine.
-
Nel pannello a sinistra, fai doppio clic su Pagina1, rinominala in e premi Invio.
MeetingRequestsDashboard
Ora, aggiungi un componente di tabella alla pagina che verrà utilizzato per visualizzare le convocazioni di riunione.
Per aggiungere un componente di tabella alla pagina del pannello di controllo delle richieste di riunione
-
Nel pannello Componenti a destra, individuate il componente Tabella e trascinatelo sull'area di disegno.
-
Scegliete la tabella nell'area di disegno per selezionarla.
-
Nel pannello Proprietà a destra, aggiorna le seguenti impostazioni:
-
Scegliete l'icona a forma di matita con cui rinominare la tabella.
meetingRequestsTable -
Nel menu a discesa Sorgente, scegli Entità.
-
Nel menu a discesa Azioni dati, scegli l'entità che hai creato (
MeetingRequests) e scegli + Aggiungi azioni sui dati.
-
-
Se richiesto, scegli GetAll.
Nota
L'azione GetAll data è un tipo specifico di azione sui dati che recupera tutti i record (righe) da un'entità specificata. Quando si associa l'azione GetAll data a un componente della tabella, ad esempio, la tabella viene compilata automaticamente con tutti i dati dell'entità connessa e visualizza ogni record come una riga della tabella.
Aggiungere una pagina per la creazione di una richiesta di riunione
Quindi, crea una pagina che contenga un modulo che gli utenti finali utilizzeranno per creare le convocazioni di riunione. Aggiungerai anche un pulsante di invio che crea il record nell'MeetingRequestsentità e quindi riporta l'utente finale alla MeetingRequestsDashboard pagina.
Per aggiungere una pagina di creazione di una richiesta di riunione
-
Nel banner superiore, scegli Pagine.
-
Nel pannello a sinistra, scegli + Aggiungi.
-
Nel pannello delle proprietà a destra, seleziona l'icona a forma di matita e rinomina la pagina in.
CreateMeetingRequest
Ora che la pagina è stata aggiunta, aggiungerai un modulo alla pagina che gli utenti finali utilizzeranno per inserire informazioni per creare una richiesta di riunione nell'MeetingRequestsentità. App Studio offre un metodo per generare un modulo da un'entità esistente, che compila automaticamente i campi del modulo in base ai campi dell'entità e genera anche un pulsante di invio per creare un record nell'entità con gli input del modulo.
Per generare automaticamente un modulo da un'entità nella pagina di creazione della richiesta di riunione
-
Nel menu Componenti a destra, trova il componente Form e trascinalo sull'area di disegno.
-
Seleziona Genera modulo.
-
Dal menu a discesa, seleziona l'
MeetingRequestsentità. -
Scegliere Generate (Genera).
-
Scegli il pulsante Invia sull'area di disegno per selezionarla.
-
Nel pannello delle proprietà a destra, nella sezione Trigger, scegli + Aggiungi.
-
Scegli Naviga.
-
Nel pannello delle proprietà a destra, modifica il nome dell'azione in qualcosa di descrittivo, ad esempio.
Navigate to MeetingRequestsDashboard -
Cambia il tipo di navigazione in pagina. Nel menu a discesa Vai a, scegli
MeetingRequestsDashboard.
Ora che abbiamo una pagina e un modulo per la creazione delle richieste di riunione, vogliamo semplificare la navigazione a questa pagina dalla MeetingRequestsDashboard pagina, in modo che gli utenti finali che esaminano la dashboard possano creare facilmente le convocazioni di riunione. Utilizza la procedura seguente per creare un pulsante nella MeetingRequestsDashboard pagina che consente di accedere alla CreateMeetingRequest pagina.
Per aggiungere un pulsante da cui passare a MeetingRequestsDashboardCreateMeetingRequest
-
Nel banner superiore, scegli Pagine.
-
Scegli la
MeetingRequestsDashboardpagina. -
Nel pannello Componenti a destra, individuate il componente Button, trascinatelo sull'area di disegno e posizionatelo sopra la tabella.
-
Scegliete il pulsante appena aggiunto per selezionarlo.
-
Nel pannello Proprietà a destra, aggiorna le seguenti impostazioni:
-
Seleziona l'icona a forma di matita per rinominare il pulsante.
createMeetingRequestButton -
Etichetta del pulsante:
Create Meeting Request. Questo è il nome che vedranno gli utenti finali. -
Nel menu a discesa Icone, seleziona + Plus.
-
Crea un trigger che indirizza l'utente finale alla pagina:
MeetingRequestsDashboard-
Nella sezione Trigger, scegli + Aggiungi.
-
In Tipo di azione, seleziona Naviga.
-
Scegli il trigger che hai appena creato per configurarlo.
-
In Nome azione, fornisci un nome descrittivo come
NavigateToCreateMeetingRequest. -
Nel menu a discesa Tipo di navigazione, seleziona Pagina.
-
Nel menu a discesa Vai a, seleziona la
CreateMeetingRequestpagina.
-
-
Passaggio 4: Visualizza l'anteprima dell'applicazione
Puoi vedere in anteprima un'applicazione in App Studio per vedere come apparirà agli utenti. Inoltre, puoi testarne la funzionalità utilizzandola e controllando i log in un pannello di debug.
L'ambiente di anteprima dell'applicazione non supporta la visualizzazione di dati in tempo reale. Inoltre, non supporta la connessione con risorse esterne tramite connettori, ad esempio fonti di dati. Puoi invece utilizzare dati di esempio e output simulati per testare la funzionalità.
Per visualizzare in anteprima l'app per il test
-
Nell'angolo in alto a destra dell'app builder, scegli Anteprima.
-
Interagisci con la
MeetingRequestsDashboardpagina e prova la tabella, il modulo e i pulsanti.
Fase 5: Pubblicare l'applicazione nell'ambiente di test
Ora che hai finito di creare, configurare e testare l'applicazione, è il momento di pubblicarla nell'ambiente di test per eseguire i test finali e condividerla con gli utenti.
Per pubblicare la tua app nell'ambiente di test
-
Nell'angolo in alto a destra dell'app builder, scegli Pubblica.
-
Aggiungi una descrizione della versione per l'ambiente di test.
-
Controlla e seleziona la casella di controllo relativa allo SLA.
-
Scegli Avvia. La pubblicazione potrebbe richiedere fino a 15 minuti.
-
(Facoltativo) Quando sei pronto, puoi concedere l'accesso ad altri utenti scegliendo Condividi e seguendo le istruzioni.
Nota
Per condividere app, un amministratore deve aver creato gruppi di utenti finali.
Dopo il test, scegli nuovamente Pubblica per promuovere l'applicazione nell'ambiente di produzione. Per ulteriori informazioni sui diversi ambienti applicativi, consultaAmbienti applicativi.
Passaggi successivi
Ora che hai creato la tua prima app, ecco alcuni passaggi successivi:
-
Continua a creare l'app tutorial. Ora che hai configurato i dati, alcune pagine e un'automazione, puoi aggiungere altre pagine e aggiungere componenti per saperne di più sulla creazione di app.
-
Per ulteriori informazioni sulla creazione di app, consulta laDocumentazione Builder. In particolare, potrebbe essere utile approfondire i seguenti argomenti:
Inoltre, i seguenti argomenti contengono ulteriori informazioni sui concetti discussi nel tutorial:
