DocumentatieAEMTutorials voor AEMAEM Headless-tutorial

Integratie van clienttoepassingen

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar

In het vorige hoofdstuk, creeerde en bijwerkte voortgeduurde vragen gebruikend Ontdekkingsreiziger GraphiQL.

Dit hoofdstuk begeleidt u door de stappen om de voortgeduurde vragen met de WKND cliënttoepassing (alias WKND App) te integreren gebruikend de verzoeken van HTTP GET binnen bestaande componenten van het Reageren. Het biedt ook een optionele uitdaging om uw AEM headless lessen toe te passen, codeerexpertise om de WKND-clienttoepassing te verbeteren.

Vereisten prerequisites

Dit document is onderdeel van een zelfstudie met meerdere onderdelen. Controleer of de vorige hoofdstukken zijn voltooid voordat u verdergaat met dit hoofdstuk. De WKND cliënttoepassing verbindt met AEM publiceer dienst, zodat is het belangrijk dat u het volgende aan de AEM publicatiedienst publiceerde.

  • Projectconfiguraties
  • GraphQL-eindpunten
  • Modellen van inhoudsfragmenten
  • Geautoriseerde inhoudsfragmenten
  • GraphQL blijft vragen

De IDE screenshots in dit hoofdstuk komen uit Code van Visual Studio

Hoofdstuk 1-4 Oplossingspakket (optioneel) solution-package

Er is een oplossingspakket beschikbaar om te worden geïnstalleerd dat de stappen in AEM UI voor hoofdstukken 1-4 voltooit. Dit pakket is niet nodig als de vorige hoofdstukken zijn voltooid.

  1. Download geavanceerd-GraphQL-Tutorial-Oplossing-Pakket-1.2.zip.
  2. In AEM, navigeer aan Hulpmiddelen > Plaatsing > Pakketten om tot de Manager van het Pakket toegang te hebben.
  3. Upload en installeer het pakket (ZIP-bestand) dat u in de vorige stap hebt gedownload.
  4. Repliceer het pakket naar de AEM Publish-service

Doelstellingen objectives

In dit leerprogramma, leert u hoe te om de verzoeken om voortgeduurde vragen in de steekproefWKND GraphQL React app te integreren gebruikend AEM Koploze Cliënt voor JavaScript.

De voorbeeldclienttoepassing klonen en uitvoeren clone-client-app

Om de zelfstudie te versnellen, wordt een startapp van React JS geleverd.

  1. Kloon de adobe/aem-guides-wknd-grafischbewaarplaats:

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Bewerk het aem-guides-wknd-graphql/advanced-tutorial/.env.development -bestand en stel REACT_APP_HOST_URI zo in dat het naar uw doel AEM publicatieservice wijst.

    Werk de authentificatiemethode bij als het verbinden met een auteursinstantie.

    code language-plain 
    # Server namespace
REACT_APP_HOST_URI=https://publish-pxx-eyy.adobeaemcloud.com

#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=

# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=

# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json

# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
REACT_APP_BASIC_AUTH_USER=
REACT_APP_BASIC_AUTH_PASS=

    Reageer de Milieu van de Ontwikkeling van de Toepassing

    note note
    NOTE
    De bovenstaande instructies moeten Reageren app met de AEM dienst van Publish verbinden, nochtans om met de AEM dienst van de Auteur een lokaal ontwikkelingstoken voor uw milieu van doelAEM as a Cloud Service te verbinden.
    Het is ook mogelijk om app met a lokale instantie van de Auteur te verbinden gebruikend AEMaaCS SDKgebruikend basisauthentificatie.

  3. Open een terminal en voer de opdrachten uit:

    code language-shell 
    $ cd aem-guides-wknd-graphql/advanced-tutorial
$ npm install
$ npm start

  4. Een nieuw browser venster zou op http://localhost:3000moeten laden

  5. Tik Camping > Yosemite Backpackaging om de Yosemite details van het Backpackaging-avontuur te bekijken.

    Yosemite het BackpackagingScherm

  6. Open de ontwikkelaarsgereedschappen van de browser en inspecteer de aanvraag XHR

    POST GraphQL

    U zou GET verzoeken aan het eindpunt van GraphQL met project config naam (wknd-shared), voortgeduurde vraagnaam (adventure-by-slug), veranderlijke naam (slug), waarde (yosemite-backpacking), en speciale karaktercoderingen moeten zien.

IMPORTANT
Als u zich afvraagt waarom het GraphQL API verzoek tegen http://localhost:3000 en NIET tegen het AEM domein van de Dienst van Publish wordt gemaakt, herzie onder het Hoodvan Basisleerprogramma.

De code controleren

In het Basisleerprogramma - bouw een Reactie app die AEM 1} stap van GraphQL APIs gebruikt hadden wij herzien en enkele zeer belangrijke dossiers verbeterd om hands-on deskundigheid te krijgen.Controleer de belangrijkste bestanden voordat u de WKND-app verbetert.

Component redigeren Adventures Reageren

De WKND React app belangrijkste mening is de lijst van alle avonturen en u kunt deze die avonturen filtreren op activiteitstype zoals Camping, Cyclling worden gebaseerd. Deze weergave wordt gerenderd door de component Adventures . Hieronder vindt u de belangrijkste implementatiedetails:

  • Het argument src/components/Adventures.js call useAllAdventures(adventureActivity) haak en here adventureActivity is activity type.

  • De useAllAdventures(adventureActivity) haak wordt gedefinieerd in het src/api/usePersistedQueries.js -bestand. Gebaseerd op adventureActivity waarde, bepaalt het welke voortgezette vraag om te roepen. Als de waarde null is, wordt wknd-shared/adventures-by-activity aangeroepen, anders worden alle beschikbare avonturen wknd-shared/adventures-all opgehaald.

  • De haak gebruikt de hoofdfunctie fetchPersistedQuery(..) die de uitvoering van de query aan AEMHeadless via aemHeadlessClient.js delegeert.

  • De haak retourneert ook alleen de relevante gegevens van de AEM GraphQL-respons op response.data?.adventureList?.items , zodat de Adventures React view-componenten niet op de hoogte zijn van de bovenliggende JSON-structuren.

  • Op succesvolle vraaguitvoering, AdventureListItem(..) geef functie van Adventures.js terug voegt HTML element toe om het Beeld, de Lengte van de Trip, de Prijs, en de informatie van de Titel te tonen.

Component redigeren AdventureDetail Reageren

De component AdventureDetail React geeft de details van het avontuur terug. Hieronder vindt u de belangrijkste implementatiedetails:

  • Het argument src/components/AdventureDetail.js call useAdventureBySlug(slug) haak en here slug is queryparameter.

  • Zoals hierboven wordt de useAdventureBySlug(slug) haak gedefinieerd in het src/api/usePersistedQueries.js -bestand. wknd-shared/adventure-by-slug persisted query wordt aangeroepen door te delegeren aan AEMHeadless via aemHeadlessClient.js .

  • Als de query met succes is uitgevoerd, voegt de renderfunctie AdventureDetailRender(..) van AdventureDetail.js het element HTML toe om de Adventure-details weer te geven.

De code verbeteren

Gebruik adventure-details-by-slug voortgezette query

In het vorige hoofdstuk, creeerden wij de adventure-details-by-slug voortgezette vraag, verstrekt het extra informatie van het avontuur zoals plaats, instructorTeam, en beheerder. Vervang adventure-by-slug door adventure-details-by-slug aanhoudende query om deze extra informatie te renderen.

  1. Open src/api/usePersistedQueries.js.

  2. De functie zoeken useAdventureBySlug() en query bijwerken als

 ...

 // Call the AEM GraphQL persisted query named "wknd-shared/adventure-details-by-slug" with parameters
 response = await fetchPersistedQuery(
 "wknd-shared/adventure-details-by-slug",
 queryParameters
 );

 ...

Aanvullende informatie weergeven

  1. Open src/components/AdventureDetail.js als u aanvullende informatie over de avontuur wilt weergeven

  2. Zoek de functie AdventureDetailRender(..) en werk de retourfunctie bij als

    code language-javascript 
    ...

return (<>
    <h1 className="adventure-detail-title">{title}</h1>
    <div className="adventure-detail-info">

        <LocationInfo {...location} />

        ...

        <Location {...location} />

        <Administrator {...administrator} />

        <InstructorTeam {...instructorTeam} />

    </div>
</>);

...

  3. Definieer ook de corresponderende renderfuncties:

    LocationInfo

    code language-javascript 
    function LocationInfo({name}) {

    if (!name) {
        return null;
    }

    return (
        <>
            <div className="adventure-detail-info-label">Location</div>
            <div className="adventure-detail-info-description">{name}</div>
        </>
    );

}

    Plaats

    code language-javascript 
    function Location({ contactInfo }) {

    if (!contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-location'>
                <h2>Where we meet</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Phone:{contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email:{contactInfo.email}</div>
            </div>
        </>);
}

    InstructorTeam

    code language-javascript 
    function InstructorTeam({ _metadata }) {

    if (!_metadata) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-team'>
                <h2>Instruction Team</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Team Name: {_metadata.stringMetadata[0].value}</div>
            </div>
        </>);
}

    Beheerder

    code language-javascript 
    function Administrator({ fullName, contactInfo }) {

    if (!fullName || !contactInfo) {
        return null;
    }

    return (
        <>
            <div className='adventure-detail-administrator'>
                <h2>Administrator</h2>
                <hr />
                <div className="adventure-detail-addtional-info">Name: {fullName}</div>
                <div className="adventure-detail-addtional-info">Phone: {contactInfo.phone}</div>
                <div className="adventure-detail-addtional-info">Email: {contactInfo.email}</div>
            </div>
        </>);
}

Nieuwe stijlen definiëren

  1. Open src/components/AdventureDetail.scss en voeg de volgende klassendefinities toe

    code language-css 
    .adventure-detail-administrator,
.adventure-detail-team,
.adventure-detail-location {
margin-top: 1em;
width: 100%;
float: right;
}

.adventure-detail-addtional-info {
padding: 10px 0px 5px 0px;
text-transform: uppercase;
}
TIP
De bijgewerkte dossiers zijn beschikbaar onder AEM Guides WKND - GraphQL project, zie Geavanceerde sectie van het Leerprogramma.

Nadat de bovenstaande verbeteringen zijn voltooid, ziet de WKND-app er als volgt uit en toont de ontwikkelaarsgereedschappen van de browser adventure-details-by-slug de voortgezette queryaanroep.

Verbeterde APP van WKND

Uitdaging voor uitbreiding (optioneel)

WKND Reageer app's belangrijkste mening staat u toe om deze avonturen te filtreren die op activiteitentype zoals worden gebaseerd Camping, het Cycliseren. Nochtans het bedrijfsteam van WKND wil een extra Gebaseerde het filtreren van de Plaats vermogen hebben. De eisen zijn:

  • Op WKND App's belangrijkste mening, in de hoogste linkerzijde of juiste hoek voeg het filtreren van de Plaats pictogram toe.
  • Het klikken het filtreren van de Plaats pictogram zou lijst van plaatsen moeten tonen.
  • Als u op een gewenste locatie in de lijst klikt, worden alleen overeenkomende avonturen weergegeven.
  • Als er slechts één passend avontuur is, wordt de mening van de Details van het Avontuur getoond.

Gefeliciteerd

Gefeliciteerd! U hebt de voortgezette query's nu geïntegreerd en geïmplementeerd in de WKND-voorbeeldapp.

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