22.3 Crea il tuo dashboard in tempo reale EXP News

Obiettivi

  • Scopri come Project Firefly può fornire un dashboard personalizzato in tempo reale che mostra le informazioni provenienti da AEP.
  • Scopri come creare ed eseguire questo dashboard di esempio.

Prerequisiti

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

22.3.1 Scarica il codice sorgente

Il codice sorgente di questo progetto è disponibile internamente su https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard e sviluppato da Duy Nguyen dal team di Adobe I/O.
Tuttavia, per evitare che tutti possano capire come clonare o scaricare codice da un archivio github, abbiamo reso il codice disponibile come file ZIP direttamente da questo modulo di abilitazione. Se ti senti a tuo agio utilizzando github, puoi anche clonare il codice da lì.

Per ottenere il blocco del codice sorgente da questo modulo di abilitazione:

  • Scarica da qui.
  • Estrai il file ZIP in una posizione sul tuo computer.

22.3.2 Creare il dashboard in tempo reale

Per creare l'app Firefly del dashboard in tempo reale:

Vai alla directory in cui hai estratto il file ZIP nell’esercizio 22.3.1, ad esempio poc-aep-realtime-dashboard-master.

Nella directory, esegui npm install per installare tutti i pacchetti richiesti per l'applicazione.

npminstall

Copia il .env file di ambiente (contenente tutte le configurazioni per l’ambiente di runtime di Adobe I/O) dal [ldap]HelloWorld progetto creato e distribuito nell’esercizio 22.2.

Ad esempio: cp <rmaurHelloWorld directory>/.env . per Mac OS o copy <rmaurHellowWorld directory>\.env . per Windows.

Nota che il file di ambiente è un cosiddetto file nascosto e potresti non vedere il file in Finder / Explorer, quindi è meglio copiare il file utilizzando la riga di comando.

cp

È possibile controllare .env file di ambiente utilizzando l'editor di testo o il comando preferito. Deve definire il tuo spazio dei nomi Adobe I/O e il codice di autenticazione

more

Distribuire l'app utilizzando aio app deploy. Anche in questo caso, l'output visualizzato potrebbe differire dalla schermata sottostante, ma attendi di vedere Ben fatto, la tua app è ora online??.

distribuire

L’app dashboard finale è ora disponibile sull’URL indicato come ultimo nell’output dal aio app deploy comando; Ad esempio https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • Copia dell’URL.
  • Apri un nuovo incognito finestra del browser e accedi a https://experience.adobe.com.
  • Verifica di essere nell’organizzazione corretta (seleziona nell’angolo in alto a destra): --envName--.
  • Incolla l’URL. L’app dashboard diventerà disponibile.

app dashboard aep

L'app Project Firefly EXP News Realtime Dashboard non fornirà ancora informazioni, perché non gli abbiamo detto da dove ricevere le sue informazioni. Questo è il punto in cui il modulo di abilitazione precedente, ad Adobe Launch Server Side Forwarding, diventa rilevante, quindi fino all’esercizio successivo.

Ora hai finito questo esercizio.

Passaggio successivo: 22.4 Connetti la raccolta dati EXP News al tuo dashboard in tempo reale EXP News

Torna al modulo 22

Torna a tutti i moduli

In questa pagina