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.

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.

È 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

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

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.

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

Risorse Business.Adobe.com