Hoofdstuk 5 - Pagina's met inhoudsservices ontwerpen

Hoofdstuk 5 van de AEM zelfstudie zonder koptekst behandelt het maken van de pagina van de sjablonen die zijn gedefinieerd in hoofdstuk 4. De pagina die in dit hoofdstuk wordt gemaakt, fungeert als het eindpunt van JSON HTTP voor de Mobile-app.

NOTE
De pagina-inhoudarchitectuur van /content/wknd-mobile/en/api is vooraf gebouwd. De basispagina's en en api dienen een architectonisch en organisatorisch doel, maar zijn niet strikt vereist. Als API-inhoud kan worden gelokaliseerd, kunt u het beste de gebruikelijke best practices voor taalkopieën en beheer van meerdere pagina's volgen, aangezien API-pagina's net als elke AEM Sites-pagina kunnen worden gelokaliseerd.

De API-pagina voor gebeurtenissen maken

  1. Navigeren naar AEM> Sites > WKND Mobile > English >API.

  2. Tik op het label op de API-pagina Tik vervolgens op de knop Maken in de bovenste actiebalk en maak een nieuwe API voor gebeurtenissen onder de API-pagina.

    1. Tikken Maken in de bovenste actiebalk
    2. Selecteren API voor gebeurtenissen template
    3. In de Naam veld enter gebeurtenissen
    4. In de Titel veld enter API voor gebeurtenissen
    5. Tikken Maken in de bovenste actiebalk om de pagina te maken
    6. Tikken Gereed om terug te keren naar de AEM Sites-beheerder

De API-pagina voor gebeurtenissen ontwerpen

NOTE
Het project bevat CSS om enkele basisstijlen voor de auteur te bieden.
  1. Bewerk de API voor gebeurtenissen pagina door naar AEM > Sites > WKND Mobile > English > API, selecteert u de API voor gebeurtenissen pagina, en tikken Bewerken in de bovenste actiebalk.

  2. Voeg een logoafbeelding om in de app weer te geven door deze van de Asset Finder naar de tijdelijke aanduiding voor de afbeeldingscomponent te slepen.

    • Gebruik het meegeleverde logo op /content/dam/wknd-mobile/images/wknd-logo.png.
  3. Toevoegen labellijn boven de gebeurtenissen weer te geven.

    1. Bewerk de Tekst component
    2. Voer de tekst in:
      • The WKND is here.
  4. Selecteer de gebeurtenissen weer te geven:

    1. Stel de volgende configuratie in op de knop Eigenschappen tab:

      • Model: Gebeurtenis
      • Bovenliggend pad: /content/dam/wknd-mobile/nl/events
      • Tags: <leave blank="">
    2. Stel de volgende configuratie in op de knop Elementen tab:

      • Verwijder alle vermelde elementen om ervoor te zorgen dat ALLE elementen van de fragmenten voor gebeurtenisinhoud zichtbaar zijn.

De JSON-uitvoer van de API-pagina controleren

De JSON-uitvoer en de indeling ervan kunnen worden gecontroleerd door de pagina aan te vragen bij de .model.json kiezer.

Deze JSON-structuur (of -schema) moet goed worden begrepen door consumenten van deze API. Het is van essentieel belang dat gebruikers weten welke aspecten van de structuur vast zijn (dat wil zeggen: het logo (afbeelding) en de live tag (tekst) van de API voor gebeurtenissen en zijn vloeiend (dat wil zeggen: de gebeurtenissen vermeld onder de component Lijst van het Fragment van de Inhoud).

Als u dit contract niet toepast op een gepubliceerde API, kan dit leiden tot een onjuist gedrag in de betreffende apps.

  1. In nieuwe browsertabbladen kunt u de API-pagina's voor gebeurtenissen aanvragen met de opdracht .model.json kiezer, die de JSON Exporter van AEM Content Services aanroept en de pagina en componenten serialiseert in een genormaliseerde, goed gedefinieerde JSON-structuur.

    De JSON-structuur die door deze pagina's wordt gemaakt, is de structuur waarop apps moeten worden uitgelijnd.

  2. Vraag de API voor gebeurtenissen pagina als JSON.

    Het resultaat moet er ongeveer als volgt uitzien:

AEM Content Services JSON-uitvoer

NOTE
Deze JSON kan worden uitgevoerd in een gespannen (geformatteerd) wijze voor menselijke leesbaarheid door te gebruiken .tidy kiezer:

Volgende stap

Installeer desgewenst de com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip inhoudspakket op AEM auteur via AEM Package Manager. Dit pakket bevat de configuraties en inhoud die in dit en vorige hoofdstukken van de zelfstudie worden beschreven.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4