Snelle installatie AEM zonder koppen met de lokale AEM SDK setup
Met de snelle installatie zonder AEM Headless kunt u de inhoud in de praktijk brengen met AEM Headless via inhoud van het WKND-voorbeeldproject Site en een voorbeeldtoepassing React (een SPA) die de inhoud gebruikt boven AEM Headless GraphQL API's. Deze gids gebruikt AEM as a Cloud Service SDK.
Vereisten prerequisites
De volgende gereedschappen moeten lokaal worden geïnstalleerd:
- [ JDK 11 ](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent%2 Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14)
- Node.js v18
- Git
1. Installeer de AEM SDK aem-sdk
Deze opstelling gebruikt SDK van AEM as a Cloud Serviceom AEM GraphQL APIs te onderzoeken. In deze sectie vindt u een snelle handleiding voor het installeren van de AEM SDK en het uitvoeren ervan in de modus Auteur. Een meer gedetailleerde gids voor vestiging een lokale ontwikkelomgeving kan hierworden gevonden.
-
Navigeer aan het Portaal van de Distributie van de Software> AEM as a Cloud Service en download de recentste versie van AEM SDK.
-
Pak de download uit en kopieer de QuickStart-jar (
aem-sdk-quickstart-XXX.jar
) naar een toegewezen map, d.w.z.~/aem-sdk/author
. -
Wijzig de naam van het jar-bestand in
aem-author-p4502.jar
.De naam
author
geeft aan dat de Quickstart-jar begint in de modus Auteur.p4502
geeft de QuickStart-uitvoering op poort 4502 aan. -
Als u de AEM wilt installeren en starten, opent u een opdrachtprompt in de map met het jar-bestand en voert u de volgende opdracht uit:
code language-shell $ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar
-
Geef een beheerderswachtwoord op als
admin
. Om het even welk admin wachtwoord is aanvaardbaar, nochtans adviseert het omadmin
voor lokale ontwikkeling te gebruiken om de behoefte te verminderen om te vormen. -
Wanneer de AEM dienst klaar is met installeren, zou een nieuw browser venster in http://localhost:4502moeten openen.
-
Meld u aan met de gebruikersnaam
admin
en het wachtwoord dat u hebt geselecteerd tijdens AEM eerste opstarten (meestaladmin
).
2. Voorbeeldinhoud installeren install-sample-content
De inhoud van de steekproef van de plaats van de Verwijzing WKND wordt gebruikt om het leerprogramma te versnellen. De WKND is een fictief levensstijl, vaak gebruikt bij AEM training.
De plaats WKND omvat configuraties die worden vereist om a eindpunt van GraphQLbloot te stellen. In een implementatie in de praktijk, volg de gedocumenteerde stappen om de eindpunten van GraphQLin uw klantenproject te omvatten. A CORSis ook verpakt als deel van de Plaats WKND. Een configuratie CORS wordt vereist om toegang tot een externe toepassing te verlenen, kan meer informatie over CORShieronder worden gevonden.
-
Download het recentste gecompileerde AEM Pakket voor Plaats WKND: aem-guides-wknd.all-x.x.x.zip.
note note NOTE Zorg ervoor om de standaardversie compatibel met AEM as a Cloud Service te downloaden en niet de classic
versie. -
Van het AEM menu van het Begin, navigeer aan Hulpmiddelen > Plaatsing > Pakketten.
-
Klik Upload Pakket en kies het pakket WKND dat in de vroegere stap wordt gedownload. Klik installeren om het pakket te installeren.
-
Van het AEM Begin menu, navigeer aan Assets > Dossiers > Gedeelde WKND > Engels > Vluchtelingen.
Dit is een map met alle middelen die bestaan uit de verschillende avonturen die door het WKND-merk worden bevorderd. Dit omvat traditionele media types zoals beelden en video, en media specifiek voor AEM als Fragmenten van de Inhoud.
-
Klik in het Afslanken van Wyoming omslag en klik het Afslappen van het Filgment van de Inhoud Wyoming kaart:
-
De redacteur van het Fragment van de Inhoud opent voor het Downhill Scheidend Wyoming adventure.
Merk op dat de diverse gebieden zoals Titel, Beschrijving, en Activiteit het fragment bepalen.
de Fragmenten van de Inhoud zijn één van de manieren inhoud in AEM kan worden beheerd. Inhoudsfragment is herbruikbaar, presentatie-agnostische inhoud die bestaat uit gestructureerde gegevenselementen zoals tekst, tekst met opmaak, datums of verwijzingen naar andere inhoudsfragmenten. Inhoudsfragmenten worden later in de snelle installatie gedetailleerder onderzocht.
-
Klik annuleren om het fragment te sluiten. U kunt vrij navigeren in sommige andere mappen en de andere Adventure-inhoud verkennen.
3. Download en voer de WKND React-app uit sample-app
Een van de doelstellingen van deze zelfstudie is om te tonen hoe u AEM inhoud van een externe toepassing kunt gebruiken met de GraphQL API's. In deze zelfstudie wordt een voorbeeld van React App gebruikt. De React-app is opzettelijk eenvoudig en richt zich op de integratie met AEM GraphQL-API's.
-
Open een nieuwe bevelherinnering en kloon de steekproef React app van GitHub:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app
-
Open de React-app in
aem-guides-wknd-graphql/react-app
in de IDE van uw keuze. -
Open het bestand
.env.development
at/.env.development
in de IDE. Controleer of de regelREACT_APP_AUTHORIZATION
geen opmerkingen bevat en of het bestand de volgende variabelen declareert:code language-plain REACT_APP_HOST_URI=http://localhost:4502 REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json # Use Authorization when connecting to an AEM Author environment REACT_APP_AUTHORIZATION=admin:admin
Zorg ervoor dat
REACT_APP_HOST_URI
punten naar de lokale AEM-SDK wijst. Voor gemak, verbindt dit snelle begin app React met AEM Auteur. de diensten van de auteur vereisen authentificatie, zodat gebruikt app deadmin
gebruiker om zijn verbinding te vestigen. Het is gebruikelijk om tijdens de ontwikkeling een app te verbinden met AEM auteur, omdat dit het snel doorlopen van inhoud zonder dat wijzigingen hoeven te worden gepubliceerd vergemakkelijkt.note note NOTE In een productiescenario zal App met een AEM Publish milieu verbinden. Dit wordt behandeld meer in detail in de sectie van de Plaatsing van de 0} Productie. -
Installeer en start de React-app:
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
Een nieuw browser venster opent automatisch app op http://localhost:3000.
Er wordt een lijst met de avontuurlijke inhoud van AEM weergegeven.
-
Klik op een van de avontuurafbeeldingen om de details van het avontuur weer te geven. Er wordt een verzoek ingediend om AEM de details voor een avontuur te retourneren.
-
Gebruik de ontwikkelaarshulpmiddelen van browser om de verzoeken van het Netwerk te inspecteren. Bekijk de XHR verzoeken en bekijk veelvoudige verzoeken van GET aan
/graphql/execute.json/...
. Dit wegvoorvoegsel roept AEM blijvend vraageindpunt aan, dat de voortgezette vraag selecteert uit te voeren gebruikend de naam en gecodeerde parameters na de prefix.
4. Inhoud bewerken in AEM
Zorg dat de React-app actief is en werk de inhoud bij in de AEM en controleer of deze wijziging in de app wordt doorgevoerd.
-
Navigeer aan AEM http://localhost:4502.
-
Navigeer aan Assets > Dossiers > Gedeelde WKND > Engels > Vluchtelingen > Bali Surf Camp.
-
Klik in het Bali Surf de inhoudsfragment van de Camp inhoud om de redacteur van het Fragment van de Inhoud te openen.
-
Wijzig de Titel en de Beschrijving van het avontuur.
-
Klik sparen om de veranderingen te bewaren.
-
Vernieuw React app in http://localhost:3000om uw veranderingen te zien:
5. Ontdek GraphiQL graphiql
-
Open GraphiQLdoor aan Hulpmiddelen te navigeren > Algemeen > de redacteur van de Vraag van GraphQL
-
Selecteer bestaande voortgeduurde vragen op de linkerzijde, en stel hen in werking om de resultaten te zien.
note note NOTE Het hulpmiddel GraphiQL en GraphQL API wordt onderzocht meer in detail later in het leerprogramma.
Gefeliciteerd! congratulations
U hebt nu een externe toepassing die AEM inhoud verbruikt met GraphQL. U kunt de code in de app React bekijken en blijven experimenteren met het wijzigen van bestaande inhoudsfragmenten.