22.2 Introduzione al progetto Firefly

Obiettivi

  • Comprendere il progetto Firefly.
  • Scopri come impostare un progetto di esempio con Project Firefly.

Prerequisiti

Prima di avviare questo esercizio, assicurati di aver installato e configurato NodeJS e Adobe I/O CLI sul computer. Vedi Esercizio 22.1 - Configurare l'ambiente per i dettagli.

22.2.1 Imposta il tuo progetto personale

Per iniziare a utilizzare Project Firefly, utilizzeremo la console di Adobe I/O per configurare il nostro progetto personale.

Accedi a Console per sviluppatori di Adobe utilizzando il tuo Adobe ID.

Se sei accolto con un nuovo Benvenuto nella nuova Adobe Developer Console procedura guidata, fai clic su Salta o fai clic su Successivo per attraversarlo.

Creazione guidata Benvenuto

Assicurati di selezionare l’organizzazione corretta in alto a destra: --envName--.

Organizzazione

Fai clic su Crea progetto da modello.

In Sfoglia modelli schermata della procedura guidata, seleziona Progetto Firefly.

Modello a lucciola

In Configurare un progetto modelli la schermata della procedura guidata fornisce i seguenti dettagli:

Modello1

  • Titolo del progetto: [ldapname] Realtime Dashboard for EXP News dove sostituire [ldapname] con il proprio nome LDAP Adobe, ad esempio rmaur Realtime Dashboard for EXP News.
  • Nome app: [ldapname]EXPNews dove sostituire [ldapname] con il proprio nome LDAP Adobe, ad esempio rmaurEXPNews.
  • Assicurati Includi runtime in ogni area di lavoro è selezionato.

Fai clic su + Aggiungi area di lavoro per aggiungere un’area di lavoro aggiuntiva.

Fornisci i seguenti dettagli per l’area di lavoro:

  • Nome area di lavoro: Development.

  • Descrizione area di lavoro: Development workspace for EXP News RT Dashboard.

Modello2

Fai clic su Salva per salvare la nuova area di lavoro.

Fai clic su Salva per salvare il progetto.

Il progetto verrà creato e, dopo un po', lo verrà visualizzato nella schermata di panoramica.

Panoramica

Fai clic su Sviluppo nella sezione Sviluppo per visualizzare ulteriori dettagli sull'ambiente di runtime specifico creato per l'applicazione Project Firefly.

PanoramicaSviluppo

È possibile visualizzare l'ambiente dello spazio dei nomi runtime creato come parte dell'applicazione; nell'esempio 133309-rmaurexpnews-development

Ora abbiamo finito di creare il nostro ambiente di runtime Adobe I/O, che abbiamo bisogno per la nostra applicazione Project Firefly.

22.2.2 Accedere da Adobe I/O CLI

Per creare un esempio di applicazione Project Firefly, è necessario utilizzare la riga di comando in Windows o Mac OS. Le schermate utilizzate di seguito sono basate su Mac OS X ma i comandi eseguiti sono gli stessi.

Apri Terminal in Mac OS o un prompt dei comandi in Windows

Passa alla posizione specifica dell'unità in cui desideri creare il primo progetto. Ad esempio Sviluppo

% cd Development

Accedi, utilizzando

% aio login

TerminalLogin

Viene visualizzata una finestra del browser in cui viene richiesto di accedere con il proprio Adobe ID. Se la finestra non si apre automaticamente, puoi anche copiare e incollare l’URL stampato nel browser per effettuare l’accesso.

% aio login
Visit this url to log in:
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

Dopo aver effettuato l'accesso, puoi chiudere la finestra del browser e tornare al Terminal. Vedreste una stringa stampata nel terminale. Questo è il token utente. Viene memorizzato automaticamente nella configurazione, consentendo a Project Firefly di utilizzare il token per parlare Console per sviluppatori di Adobe.

TerminalLoggedIn

22.2.3 Bootstrap una nuova app da Adobe I/O CLI

In Terminal sul sistema operativo Mac o in un prompt dei comandi su Windows, inizia a creare una nuova app, che verrà denominata [ldap]HelloWorld.

Ad esempio:

% aio app init rmaurHelloWorld

Ti verranno poste alcune domande su come desideri che l’app venga caricata e configurata:

  • Seleziona organizzazione. Per cercare rapidamente l’organizzazione --envName-- digitare i primi caratteri dietro Seleziona organizzazione. Quindi seleziona --envName-- dall’elenco risultante.

Passaggio 1

  • Seleziona progetto. Per cercare rapidamente il progetto, digita il nome LDAP e seleziona il progetto creato nell’esercizio 22.2.1. Ad esempio, cerca rmaur quindi seleziona rmaur Realtime Dashboard for EXP News dall’elenco risultante.

Passaggio 1

Seleziona area di lavoro. Seleziona la Development area di lavoro creata come parte dell’esercizio 22.2.1.

Passaggio 1

Adobe I/O di funzionalità dell'app da abilitare per questo progetto?

Selezionare i componenti da includere. Seleziona Actions: Deploy Runtime actions.

Passaggio 1

Quale tipo di azioni di esempio desideri creare?

Selezionare il tipo di azioni da generare. Seleziona Generic.

Passaggio 1

Quale tipo di interfaccia desideri aggiungere al progetto?

Selezionare il modello da generare. Seleziona React Spectrum 3. Questo indica che utilizzeremo Spettro Adobe, il nostro sistema di progettazione, per creare l'app.

Passaggio 1

Stiamo per creare una nuova azione di esempio che illustra come accedere a un’API esterna.

Come assegnare un nome a questa azione?. Premere Invio per accettare il valore predefinito (generic).

Passaggio 1

Stiamo per creare una nuova azione di esempio che crea messaggi in formato eventi cloud e pubblica in Adobe I/O Events.

Come assegnare un nome a questa azione?. Premere Invio per accettare il valore predefinito (publish-events).

Passaggio 1

La procedura guidata genera ora il codice necessario per l’applicazione e indica che il completamento è stato completato con ✔ App initialization finished!.

Passaggio 1

Vai alla directory dell'app appena creata [ladp]HelloWorld ed elencare i file generati.
% cd rmaurHelloWorld
% ls (Mac OS) o
> dir (Windows)

Passaggio 1

21.2.4 Creazione e distribuzione dell'app

Ci sono diversi modi per creare / testare / distribuire l'applicazione, ma per questa abilitazione lo manteniamo semplice e distribuiremo l'app immediatamente utilizzando l'Experience Cloud Shell.

Per creare e distribuire l’app:

In Terminal nel sistema operativo Mac o nel prompt dei comandi in Windows, assicurati di essere nella directory creata come parte dell'app ([ldap]rmaurHelloWorld), quindi digitare:
% aio app deploy

Passaggio 1

L’output può essere diverso nel tuo caso e con le modifiche che si verificano in Project Firefly, ma è importante che il messaggio venga visualizzato per primo Generare correttamente l’app è pronta per la distribuzione ?? che viene seguito dopo un po’ con il messaggio finale Ben fatto, la tua app è ora online??.

Una volta implementata l’app, hai 2 URL per visualizzare l’app finale.

Copia l’URL che utilizza la shell Experience Cloud, indicato da Per visualizzare l'applicazione distribuita nella shell dell'Experience Cloud: …. L’URL utilizza il nome dell’area di lavoro di sviluppo di Adobe I/O come identificatore univoco.

Apri un nuovo browser in incognito e passa a https://experience.adobe.com. Dopo l'accesso, accertati di selezionare l'organizzazione corretta in alto a destra: --envName--.

Incolla l’URL dal passaggio 2 nel browser. Se tutto va bene, verrà visualizzata la seguente schermata.

Passaggio 2

Seleziona Azioni dell'app dalla barra a sinistra. In Esegui le azioni back-end dell'applicazione

  • Seleziona Generico dal Azioni (obbligatorio) elenco a discesa.
  • Fai clic su Richiama
  • I risultati di questa invocazione verranno visualizzati nella risultati scatola. Puoi ingrandirlo per visualizzare più contenuto.

Passaggio 3

La prima app Project Firefly è stata distribuita correttamente e l'esercizio è terminato.

Passaggio successivo: 22.3 Crea il tuo dashboard in tempo reale EXP News

Torna al modulo 22

Torna a tutti i moduli

In questa pagina