Aktivera AEM Screens för din demowebbplats

Lär dig hur du får en komplett as a Cloud Service AEM Screens-upplevelse på din demowebbplats.

Story hittills

I det föregående dokumentet om AEM Reference Demos Add-on, Skapa demowebbplats, du skapade en demowebbplats baserat på mallarna för tillägget Referensdemo. Nu bör du:

• Lär dig hur du kommer åt AEM.
• Lär dig hur du skapar en webbplats baserad på en mall.
• Förstå grunderna för navigering i webbplatsstrukturen och redigering av en sida.

Nu när du har en egen demosajt att utforska och förstår verktygen som hjälper dig att hantera dina demosajter kan du aktivera AEM Screens fullständiga as a Cloud Service upplevelse för dina demosajter.

Syfte

Tillägget AEM Reference Demos innehåller AEM Screens-innehåll för We.Cafe, ett kaféföretag. Det här dokumentet hjälper dig att förstå hur du kör demokonfigurationen We.Cafe i AEM Screens. När du har läst bör du:

• Lär dig grunderna i AEM Screens.
• Förstå demoinnehållet för We.Cafe.
• Lär dig konfigurera AEM Screens för We.Cafe.
  • Lär dig skapa ett skärmsprojekt för We.Cafe.
  • Kan konfigurera en simulerad vädertjänst med Google Sheets och API:er.
  • Simulera dynamiskt föränderligt skärminnehåll baserat på din"vädertjänst".
  • Installera och använd skärmspelaren.

Förstå skärmar

AEM Screens as a Cloud Service är en digital signeringslösning som gör det möjligt för marknadsförare att skapa och hantera dynamiska digitala upplevelser i stor skala. Med AEM Screens as a Cloud Service kan ni skapa engagerande och dynamiska digitala signeringsupplevelser som ska användas på offentliga platser.

Genom att installera tillägget AEM Reference Demos får du automatiskt tillgång till Web.Cafe-innehåll för AEM Screens i din demoredigeringsmiljö. Stegen som beskrivs i Distribuera ett projekt för demonstrationsskärmar hjälper er att få ut det mesta av AEM Screens genom att publicera materialet och distribuera det till mediespelare osv.

Förstå demoinnehållet

Kaféet We.Cafe består av tre butiker på tre platser i USA. Alla tre butikerna har tre liknande upplevelser:

• Ett menybord ovanför räknaren med två eller tre vertikala paneler
• En entréskärm med en horisontell eller vertikal panel som bjuder in kunder till butiken
• En snabb självbeställande kiosk-buske för att kringgå kön med en vertikal surfplatta

Platsen New York antas befinna sig i en mindre butik som inte har så mycket utrymme, och som sådan:

• Menypanelen har bara två vertikala paneler i stället för tre för San Francisco och San Jose
• Ingångsvyn placeras lodrätt i stället för vågrätt

Cafélayouter

Platserna We.Cafe har följande layouter.

Ingång

Ingångspresentationen är dagsdelad och ändrar bara den första bilden från morgon till eftermiddag. På varje omgång i sekvensen annonserar den även olika kaffepreparationer med hjälp av en inbäddad sekvens med datapriser för att spela upp olika objekt varje gång.

Den sista bilden på ingångskanalerna är också riktad (d.v.s. dynamiskt ändrad) baserat på den yttre temperaturen, som kan simuleras enligt beskrivningen i Skapa simulerad datakälla -avsnitt.

Distribuera ett projekt för demonstrationsskärmar

Så här använder du demoinnehåll i sandlådan som du skapade i Skapa program måste en plats skapas baserat på en mall.

Om du inte redan har skapat en demowebbplats för We.Cafe följer du bara samma steg som i Skapa demowebbplats -avsnitt. När du väljer mall väljer du bara Webbplatsmall för We.Cafe.

När guiden har slutförts hittar du innehållet som har distribuerats under Webbplatser och du kan navigera och utforska precis som annat innehåll.

Nu när du har demoinnehåll från We.Cafe kan du välja hur du vill testa AEM Screens:

• Om du bara vill utforska innehållet i AEM Sites Console kan du börja utforska och upptäcka mer i Ytterligare resurser sektion! ingen mer åtgärd krävs.
• Om du vill använda alla dynamiska funktioner i AEM Screens fortsätter du till nästa avsnitt, Ändra skärminnehåll dynamiskt.

Ändra skärminnehåll dynamiskt

På samma sätt som AEM Sites kan AEM Screens ändra innehåll dynamiskt baserat på sammanhang. Demon We.Cafe har kanaler som är konfigurerade att visa olika innehåll beroende på aktuell temperatur. Om du vill simulera den här upplevelsen måste du skapa en egen enkel vädertjänst.

Skapa simulerad datakälla

Eftersom det är svårt att ändra vädret under en demonstration eller under testningen måste temperaturförändringarna simuleras. En vädertjänst simuleras genom att ett temperaturvärde lagras i ett Google Sheet-kalkylblad som AEM ContextHub anropar för att hämta temperaturen.

Skapa Google API-nyckel

Först måste du skapa en Google API-nyckel för att underlätta datautbyte.

1. Logga in på ett Google-konto.

2. Öppna molnkonsolen med den här länken https://console.cloud.google.com.

3. Skapa ett projekt genom att klicka på det aktuella projektnamnet längst upp till vänster i verktygsfältet efter Google Cloud Platform etikett.

   

4. Klicka på i projektväljardialogrutan NYTT PROJEKT.

   

5. Ge projektet ett namn och klicka på SKAPA.

   

6. Se till att ditt nya projekt är markerat och välj sedan hamburger-menyn på kontrollpanelen i molnkonsolen API:er och tjänster.

   

7. Klicka på i den vänstra panelen i fönstret API:er och tjänster Referenser längst upp i fönstret och klicka sedan på SKAPA AUTENTISERINGSUPPGIFTER och API-nyckel.

   

8. Kopiera den nya API-nyckeln i dialogrutan och spara den för senare bruk. Klicka STÄNG så att du kan stänga dialogrutan.

Aktivera Google Sheets API

Om du vill tillåta utbyte av Google Sheets-data med API-nyckeln måste du aktivera Google Sheets API.

1. Återgå till Google Cloud Console på https://console.cloud.google.com för ditt projekt och använd sedan hamburger-menyn för att välja API:er och tjänster > Bibliotek.

   

2. Bläddra till API-biblioteksskärmen för att hitta din sökning efter Google Sheets API och klicka sedan på den.

   

3. I Google Sheets API fönster, klicka AKTIVERA.

   

Skapa Google-kalkylblad

Nu kan du skapa ett Google-kalkylblad för att lagra dina väderdata.

1. Gå till https://docs.google.com och skapa ett Google Sheets-kalkylblad.

2. Definiera temperaturen genom att ange 32 i cell A2.

3. Dela dokumentet genom att klicka Dela längst upp till höger i fönstret och under Hämta länk, klicka Ändra.

   

4. Kopiera länken till nästa steg.

   

5. Leta reda på blads-ID:t.

   • Blad-ID är den slumpmässiga teckensträngen i bladet som du kopierade efter d/ och före /edit.
   • Till exempel:
     • Om URL:en är https://docs.google.com/spreadsheets/d/1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30/edit#gid=0
     • Kalkylblads-ID är 1cNM7j1B52HgMdsjf8frCQrXpnypIb8NkJ98YcxqaEP30.

6. Kopiera kalkylblads-ID:t för framtida bruk.

Testa vädertjänsten

Nu när du har skapat datakällan som ett Google-kalkylblad och aktiverat åtkomst via API testar du det för att se till att vädertjänsten är tillgänglig.

1. Öppna en webbläsare.

2. Ange följande begäran och ersätt de tabell-ID och API-nyckelvärden som du sparade tidigare.

   https://sheets.googleapis.com/v4/spreadsheets/<yourSheetID>/values/Sheet1?key=<yourAPIKey>
   

3. Om du tar emot JSON-data som liknar följande, konfigureras de korrekt.

   {
     "range": "Sheet1!A1:Z1000",
     "majorDimension": "ROWS",
     "values": [
       [],
       [
         "32"
       ]
     ]
   }
   

AEM Screens kan använda samma tjänst för att komma åt simulerade väderdata som konfigureras i nästa steg.

Konfigurera ContextHub

AEM Screens kan ändra innehåll dynamiskt baserat på sammanhang. Demon We.Cafe har kanaler konfigurerade att visa olika innehåll beroende på aktuell temperatur med hjälp av AEM ContextHub.

När skärminnehållet visas anropar ContextHub vädertjänsten för att hitta den aktuella temperaturen för att avgöra vilket innehåll som ska visas.

I demosyfte kan du ändra värdena i bladet. ContextHub känner igen detta och innehållet justeras i kanalen enligt den uppdaterade temperaturen.

1. Gå till AEMaaCS-författarinstansen Global Navigation > Tools > Sites > ContextHub.
2. Välj den konfigurationsbehållare som har samma namn som det du gav projektet när du skapade Skärmar-projektet från Webbplatsmall för We.Cafe.
3. Välj Configuration > ContextHub Configuration > Google Sheets klicka sedan på Nästa överst till höger.
4. Konfigurationen bör redan ha förkonfigurerade JSON-data. Det finns två värden som måste ändras:
   1. Ersätt [your Google Sheets id] med det blad-ID som du sparade tidigare.
   2. Ersätt [your Google API Key] med API-nyckeln som du sparade tidigare.
5. Klicka Spara.

Nu kan du ändra temperaturvärdet i Google Sheet-kalkylbladet och ContextHub uppdaterar skärmar dynamiskt när det"ser väderändringen".

Testa dynamiska data

Nu när AEM Screens och ContextHub är anslutna till din vädertjänst kan du testa den för att se hur skärmar kan uppdatera innehåll dynamiskt.

1. Få åtkomst till din författarinstans för sandlådan.

2. Navigera till webbplatskonsolen via Global Navigation > Sites och välj följande sida Skärmar > <project-name> > Kanaler > Ingång morgon (stående).

   

3. Klicka Redigera i verktygsfältet eller skriv kortkommandot e så att du kan redigera sidan.

4. I redigeraren kan du se innehållet. En bild markeras i blått med en målikon i hörnet.

   

5. Ändra temperaturen som du angett i kalkylbladet från 32 till 70 och se hur innehållet ändras.

   

Den aktuella bilden har ändrats från en varmt kopp te till ett kallt kaffe, baserat på att temperaturen har ändrats från en fryst 32°F (0°C) till en bekväm 21°C (70°F).

Anslut skärmar as a Cloud Service

Om du även vill skapa en riktig digital signeringsupplevelse, inklusive en spelare som körs på en digital signeringsenhet eller på datorn, följer du de här stegen.

Du kan också förhandsgranska demon i kanalredigeraren i AEMaaCS.

Konfigurera AEM Screens as a Cloud Service

Först måste du publicera ditt demoinnehåll för skärmar på AEM Screens as a Cloud Service och konfigurera tjänsten.

1. Publicera innehållet i ditt demoskärmsprojekt.

2. Navigera till as a Cloud Service skärmar på https://experience.adobe.com/screens och logga in.

3. Kontrollera att du är i rätt ordning i skärmens övre högra hörn.

   

4. Klicka på i det övre vänstra hörnet Redigera inställningar -ikonen, formad som ett kugghjul.

   

5. Ange URL:er till AEMaaCS-författaren och publicera förekomster där du skapade demowebbplatsen och klicka på Spara.

   

6. När du väl är ansluten till dina demoinstanser drar skärmar igång kanalinnehållet. Klicka Kanaler i den vänstra panelen så att du kan se de publicerade kanalerna. Det kan ta en stund innan informationen har fyllts i. Du kan klicka på den blå Synkronisera längst upp till höger på skärmen för att uppdatera informationen.

   

7. Klicka Visar till vänster. Du har ännu inte skapat något för din demo. Du kan simulera platsen för We.Cafe genom att skapa mappar för varje. Klicka Skapa längst upp till höger på skärmen och välj Mapp.

   

8. Ange ett mappnamn, till exempel San Jose och klicka Skapa.

9. Öppna mappen genom att klicka på den och sedan klicka på Skapa längst upp till höger och välj Visa.

10. Ange ett visningsnamn och klicka på Skapa.

    

11. När visningen har skapats klickar du på visningsnamnet för att öppna skärmen med visningsinformation. Visningen måste tilldelas en kanal som har synkroniserats från din demowebbplats. Klicka Tilldela kanal längst upp till höger på skärmen.

    

12. Markera kanalen i dialogrutan och klicka på Tilldela.

    

Du kan upprepa de här stegen för ytterligare platser och visningar. När du är klar har du länkat din demowebbplats till AEM Screens och slutfört den nödvändiga konfigurationen.

Du kan enkelt förhandsgranska filmen i kanalredigeraren i AEMaaCS.

Använda skärmuppspelaren

Om du vill visa innehållet som på en riktig skärm kan du hämta spelaren och konfigurera den lokalt. AEM Screens as a Cloud Service levererar materialet till spelaren

Generera en registreringskod

Först måste du skapa en registreringskod för att säkert ansluta en spelare till AEM Screens as a Cloud Service.

1. Navigera till as a Cloud Service skärmar på https://experience.adobe.com/screens och logga in.

2. Kontrollera att du är i rätt ordning i skärmens övre högra hörn.

   

3. Klicka på i den vänstra panelen Player Management > Registration Codes och sedan klicka Skapa kod längst upp till höger på skärmen.

1. Ange ett namn för koden och klicka på Skapa.

   

2. När koden har skapats visas den i listan. Klicka för att kopiera koden.

   

Installera och konfigurera spelare

1. Hämta spelaren för din plattform från https://download.macromedia.com/screens/ och installera det.

2. Kör spelaren och växla sedan till Konfiguration -fliken.

3. Rulla längst ned, klicka och bekräfta båda Återställ till fabrik och Ändra till molnläge alternativ.

   

4. Spelaren ändras automatiskt till Spelarregistrering -fliken. Ange koden som du skapade tidigare och klicka på Registrera.

   

5. Växla till Systeminformation för att bekräfta att spelaren har registrerats.

   

Tilldela spelare till en bildskärm

1. Navigera till as a Cloud Service skärmar på https://experience.adobe.com/screens och logga in.

2. Kontrollera att du är i rätt ordning i skärmens övre högra hörn.

   

3. Klicka på i den vänstra panelen Spelarhantering > Spelare och du ser den spelare som du har installerat och registrerat tidigare.

   

4. Klicka på spelarens namn så att du kan öppna informationen om den. Klicka Tilldela för visning i skärmens övre högra hörn.

   

5. I dialogrutan väljer du den visning som du skapade tidigare och klickar sedan på Välj.

   

Uppspelning!

När du har tilldelat en skärm till en spelare skickar AEM Screens as a Cloud Service innehållet till spelaren där det är synligt.

What's Next

Nu när du har slutfört den här delen av AEM Reference Demo Add-on ska du:

• Lär dig grunderna i AEM Screens.
• Förstå demoinnehållet för We.Cafe.
• Lär dig konfigurera AEM Screens för We.Cafe.

Nu är du redo att utforska möjligheterna i AEM Screens med dina egna demosajter. Fortsätt till nästa avsnitt av resan, Hantera dina demowebbplatser, där du får lära dig mer om de verktyg du kan använda för att hantera dina demowebbplatser och hur du tar bort dem.

Du kan även ta en titt på några av de tillgängliga resurserna i Avsnittet Ytterligare resurser om du vill veta mer om de funktioner du såg under den här resan.

Ytterligare resurser

• ContextHub-dokumentation - Lär dig hur ContextHub kan användas för att anpassa innehåll baserat på användarsammanhang utöver väderförhållanden.
• Använda API-nycklar - Google-dokumentation - En praktisk referens om hur du använder Google API-nycklar.
• Visar - Läs mer om vad en skärm är i AEM Screens och vad den kan göra.
• Ladda ned Player - Lär dig hur du kommer åt skärmspelaren och hur du installerar.
• Registrera spelare - Lär dig hur du konfigurerar och registrerar en spelare i ditt AEM Screens-projekt.
• Tilldela spelare till en bildskärm - Konfigurera en spelare för att visa ditt innehåll.