22.3 Crea il tuo dashboard EXP News in tempo reale

Obiettivi

  • Scopri come Project Firefly può distribuire una dashboard personalizzata in tempo reale che mostra informazioni da AEP.
  • Scopri come creare ed eseguire questo dashboard di esempio.

Prerequisiti

Prima di avviare questo esercizio, assicurarsi di aver installato e configurato NodeJS e Adobe I/O CLI sul computer. Per ulteriori informazioni, vedere Esercizio 21.1 - Impostazione dell'ambiente.

22.3.1 Scaricare il codice sorgente

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

Per recuperare il codice sorgente dall'interno di questo modulo di abilitazione:

  • Scaricatelo da qui.
  • Estrarre il file ZIP in una posizione sul computer.

22.3.2 Creare il dashboard in tempo reale

Per creare un'app Flash dashboard in tempo reale:

Andate alla directory in cui avete estratto il file ZIP nell'esercizio 22.3.1, ad esempio poc-aep-realtime-dashboard-master.

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

npminstall

Copiate il file di ambiente .env (contenente tutta la configurazione dell'ambiente di runtime Adobe I/O ) dal progetto [ldap]HelloWorld creato e distribuito nell'esercizio 22.2.

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

Il file dell'ambiente è un cosiddetto file nascosto che potrebbe non essere visualizzato nel Finder/Esplora risorse, pertanto è meglio copiare il file utilizzando la riga di comando.

cp

È possibile esaminare il file di ambiente .env utilizzando l'editor di testo o il comando preferito. Deve definire il namespace Adobe I/O e il codice di autenticazione

more

Distribuite l'app utilizzando aio app deploy. Anche in questo caso, l'output visualizzato potrebbe essere diverso da quello riportato di seguito, ma attendete che venga visualizzato Ben fatto, l'app ora è online ??.

distribuire

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

  • Copia dell’URL.
  • Aprite una nuova finestra del browser incognito ed effettuate l'accesso a https://experience.adobe.com.
  • Verifica di essere nell’organizzazione corretta (seleziona nell’angolo in alto a destra): --envName--.
  • Incollate l’URL. L'app dashboard diventerà disponibile.

app dashboard AEP

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

Ora avete finito questo esercizio.

Passaggio successivo: 22.4 Connessione della raccolta di dati EXP News al dashboard in tempo reale EXP News

Torna al modulo 22

Torna a tutti i moduli

In questa pagina