View a markdown version of this page

Tutorial: inizia a creare da un'app vuota - AWS App Studio
PrerequisitiFase 1: creazione di un'applicazionePassaggio 2: crea un'entità per definire i dati della tua appFase 3: Progettare l'interfaccia utente (UI) e la logicaFase 4: Visualizzare l'anteprima dell'applicazioneFase 5: Pubblica l'applicazione su Test in corso ambienteFasi successive

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à.

Tutorial: inizia a creare da un'app vuota

In questo tutorial, creerai un'applicazione interna per la richiesta di riunione con i clienti utilizzando AWS App Studio. Scoprirai come creare app in App Studio, concentrandoti su casi d'uso reali ed esempi pratici. Inoltre, imparerai a definire le strutture dei 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ù rapido e semplice 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: Genera un'app usando l'intelligenza artificiale.

La chiave per capire come creare applicazioni con App Studio è comprendere i seguenti quattro concetti fondamentali e il modo in cui interagiscono: 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 puoi personalizzare in base alle tue esigenze specifiche.

  • Automazioni: con le automazioni, puoi definire la logica e i flussi di lavoro che regolano il comportamento della tua 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 usarli 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, denominati entità. Le entità rappresentano i diversi tipi di dati che devi archiviare e utilizzare, come richieste di riunioni con i clienti, ordini del giorno o partecipanti. Puoi connettere questi modelli di dati a una varietà di fonti di dati, inclusi AWS servizi e API esterne, utilizzando i connettori di App Studio.

  • Connettori: App Studio fornisce connessioni con un'ampia gamma di fonti di dati, che includono 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 i dati e le funzionalità di questi servizi e applicazioni esterne di livello aziendale nelle tue applicazioni.

Man mano che avanzi nel tutorial, scoprirai come i concetti chiave di componenti, dati e automazione si uniscono per creare la tua applicazione interna di Customer Meeting Request.

Di seguito sono riportati i passaggi di alto livello che descrivono cosa farai in questo tutorial:

  1. 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 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 la tua applicazione e alimenta i vari componenti e automazioni che creerai.

  2. Crea la tua interfaccia utente (UI): con il modello di dati in atto, il tutorial ti guida nella creazione dell'interfaccia utente (UI). In App Studio, puoi creare l'interfaccia utente aggiungendo pagine e aggiungendo componenti ad esse. Aggiungerai componenti come tabelle , viste di dettaglio e calendari a una pagina del dashboard 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 delle richieste di riunione. Questa pagina include un componente Form per la raccolta dei dati e un componente Button per inviarli.

  3. 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à.

  4. Migliora con la convalida e le espressioni: per garantire l'integrità e l'accuratezza dei tuoi dati, aggiungerai regole di convalida al componente Modulo. Ciò contribuirà a garantire che gli utenti forniscano informazioni complete e valide durante la creazione di nuovi record delle richieste di riunione. Inoltre, potrete utilizzare 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.

  5. 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 ai tuoi utenti un'esperienza fluida e intuitiva.

  6. Pubblica l'applicazione: infine, distribuirai l'applicazione interna completa di Customer Meeting Request e la renderai accessibile ai tuoi utenti. Grazie alla 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 ampie competenze di programmazione.

Prerequisiti

Prima di iniziare, rivedi e completa i seguenti prerequisiti:

  • Accesso ad AWS App Studio. Per ulteriori informazioni, consulta Configurazione e accesso a AWS App Studio.

  • Facoltativo: rivedi AWS Concetti di App Studio per acquisire familiarità con importanti concetti di App Studio.

  • Facoltativo: comprensione dei concetti di base dello sviluppo web, come la JavaScript sintassi.

  • Facoltativo: familiarità con AWS i servizi.

Fase 1: creazione di un'applicazione

  1. Accedi ad App Studio.

  2. Nella barra di navigazione a sinistra, scegli Builder hub e scegli + Crea app.

  3. Scegli Inizia da zero.

  4. Nel campo Nome app, fornisci un nome per la tua app, ad esempioCustomer Meeting Requests.

  5. Se ti viene chiesto di selezionare fonti di dati o un connettore, scegli Ignora per gli scopi di questo tutorial.

  6. Scegli Successivo per continuare.

  7. (Facoltativo): guarda il video tutorial per una rapida panoramica sulla creazione di app in App Studio.

  8. Scegli Modifica app, che ti porta all'app builder di App Studio.

Passaggio 2: crea un'entità per definire i dati della tua app

Le entità rappresentano tabelle che contengono i dati dell'applicazione, in modo simile alle tabelle di un database. Invece dell'interfaccia utente (UI) e delle automazioni dell'applicazione che si connettono direttamente alle origini dati, si connettono prima alle entità. Le entità fungono da intermediario tra la tua fonte di dati effettiva e la tua app App Studio e forniscono un unico posto per gestire e accedere ai tuoi 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 un'origine 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 chiave primaria: 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 di testo (likemeetingName) 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é impone l'integrità dei dati, previene la duplicazione dei dati e consente un recupero e un'interrogazione efficienti dei dati.

Per creare un'entità gestita

  1. Scegli Dati dal menu della barra in alto.

  2. Scegli + Crea entità.

  3. Scegli Crea entità gestita da App Studio.

  4. Nel campo Nome entità, fornisci un nome per la tua entità. Per questo tutorial, digita MeetingRequests.

  5. 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.

  6. Per il tipo di dati della chiave primaria, scegli Float.

  7. Scegliere Create entity (Crea entità).

Aggiungi campi alla tua entità

Per ogni campo, specificherai il nome visualizzato, che è 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 univoco per il campo all'interno dell'applicazione.

Infine, selezionerai il tipo di dati che meglio rappresenta il tipo di dati che desideri memorizzare 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 stai memorizzando i nomi dei clienti nella tua richiesta di riunione, devi 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:

    1. 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

    2. 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

    3. Aggiungi un campo che rappresenta l'agenda della riunione con le seguenti informazioni:

      • Nome visualizzato: Agenda

      • Nome del sistema: agenda

      • Tipo di dati: String

    4. 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 in che modo l'applicazione gestisce e visualizza vari tipi di dati, senza fare affidamento su dati effettivi 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à

  1. Scegli la scheda Dati di esempio nel banner.

  2. Scegli Genera altri dati di esempio.

  3. Selezionare Salva.

Facoltativamente, scegli Connessione nel banner per rivedere i dettagli sul connettore e sulla tabella DynamoDB creata per te.

Fase 3: Progettare l'interfaccia utente (UI) e la logica

Aggiungere una pagina di dashboard 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 sono dotate di una pagina predefinita, quindi potrai rinominarla invece di aggiungerne una nuova da utilizzare come semplice pagina del dashboard per le richieste di riunione.

Per rinominare la pagina predefinita

  1. Nel menu di navigazione della barra superiore, scegli Pagine.

  2. 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 richieste di riunione.

Per aggiungere un componente della tabella alla pagina del dashboard delle richieste di riunione

  1. Nel pannello Componenti a destra, individua il componente Tabella e trascinalo sull'area di disegno.

  2. Scegliete la tabella nell'area di disegno per selezionarla.

  3. Nel pannello Proprietà sul lato destro, aggiorna le seguenti impostazioni:

    1. Scegli l'icona a forma di matita in cui rinominare la tabella. meetingRequestsTable

    2. Nel menu a discesa Fonte, scegli Entità.

    3. Nel menu a discesa Azioni dati, scegli l'entità che hai creato (MeetingRequests) e scegli + Aggiungi azioni dati.

  4. Se richiesto, scegli GetAll.

    Nota

    L'azione GetAll è un tipo specifico di azione 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 riga nella tabella.

Aggiungere una pagina di creazione della richiesta di riunione

Quindi, crea una pagina che contenga un modulo che gli utenti finali utilizzeranno per creare 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

  1. Nel banner in alto, scegli Pagine.

  2. Nel pannello a sinistra, scegli + Aggiungi.

  3. 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 le 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

  1. Nel menu Componenti a destra, trova il componente Modulo e trascinalo sull'area di disegno.

  2. Seleziona Genera modulo.

  3. Dal menu a discesa, seleziona l'MeetingRequestsentità.

  4. Scegliere Generate (Genera).

  5. Scegli il pulsante Invia nell'area di disegno per selezionarla.

  6. Nel pannello delle proprietà a destra, nella sezione Trigger, scegli + Aggiungi.

  7. Scegli Naviga.

  8. Nel pannello delle proprietà a destra, modifica il nome dell'azione con qualcosa di descrittivo, ad esempio. Navigate to MeetingRequestsDashboard

  9. Cambia il tipo di navigazione in pagina. Nel menu a discesa Naviga verso, scegliMeetingRequestsDashboard.

Ora che abbiamo una pagina e un modulo per la creazione delle richieste di riunione, vogliamo semplificare l'accesso a questa pagina dalla MeetingRequestsDashboard pagina, in modo che gli utenti finali che consultano la dashboard possano creare facilmente 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 per navigare da a MeetingRequestsDashboard CreateMeetingRequest

  1. Nel banner in alto, scegli Pagine.

  2. Scegli la MeetingRequestsDashboard pagina.

  3. Nel pannello Componenti a destra, trova il componente Button, trascinalo sull'area di disegno e posizionalo sopra la tabella.

  4. Scegliete il pulsante appena aggiunto per selezionarlo.

  5. Nel pannello Proprietà sul lato destro, aggiorna le seguenti impostazioni:

    1. Seleziona l'icona a forma di matita in cui rinominare il pulsante. createMeetingRequestButton

    2. Etichetta del pulsante:Create Meeting Request. Questo è il nome che vedranno gli utenti finali.

    3. Nel menu a discesa Icona, seleziona + Plus.

    4. Crea un trigger che indirizzi l'utente finale alla pagina: MeetingRequestsDashboard

      1. Nella sezione Trigger, scegli + Aggiungi.

      2. In Tipo di azione, seleziona Naviga.

      3. Scegli il trigger che hai appena creato per configurarlo.

      4. In Nome azione, fornisci un nome descrittivo come. NavigateToCreateMeetingRequest

      5. Nel menu a discesa Tipo di navigazione, seleziona Pagina.

      6. Nel menu a discesa Naviga verso, seleziona la CreateMeetingRequest pagina.

Fase 4: Visualizzare l'anteprima dell'applicazione

Puoi visualizzare l'anteprima di 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 a risorse esterne tramite connettori, come le fonti di dati. È invece possibile utilizzare dati di esempio e output simulati per testare la funzionalità.

Per visualizzare l'anteprima dell'app per il test

  1. Nell'angolo in alto a destra dell'app builder, scegli Anteprima.

  2. Interagisci con la MeetingRequestsDashboard pagina e prova la tabella, il modulo e i pulsanti.

Fase 5: Pubblica l'applicazione su Test in corso ambiente

Ora che hai finito di creare, configurare e testare la tua applicazione, è il momento di pubblicarla nell'ambiente di test per eseguire i test finali e poi condividerla con gli utenti.

Per pubblicare la tua app nell'ambiente di test

  1. Nell'angolo in alto a destra dell'app builder, scegli Pubblica.

  2. Aggiungi una descrizione della versione per l'ambiente di test.

  3. Rivedi e seleziona la casella di controllo relativa allo SLA.

  4. Scegli Avvia. La pubblicazione potrebbe richiedere fino a 15 minuti.

  5. (Facoltativo) Quando sei pronto, puoi consentire ad altri l'accesso scegliendo Condividi e seguendo le istruzioni.

    Nota

    Per condividere le 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, vedereAmbienti applicativi.

Fasi successive

Ora che hai creato la tua prima app, ecco alcuni passaggi successivi:

  1. 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.

  2. Per saperne di più sulla creazione di app, consulta laDocumentazione del generatore. In particolare, potrebbero essere utili i seguenti argomenti da esplorare:

    Inoltre, i seguenti argomenti contengono ulteriori informazioni sui concetti discussi nel tutorial: