SPA Editor-project create-project

Download het beginpunt voor deze zelfstudie via Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start

De volgende map en bestandsstructuur vertegenwoordigen het AEM Project dat is gegenereerd door het Maven-archetype op het lokale bestandssysteem:

|--- aem-guides-wknd-spa
    |--- all/
    |--- core/
    |--- dispatcher/
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.content/
    |--- ui.frontend /
    |--- it.tests/
    |--- pom.xml
    |--- README.md
    |--- .gitignore
    |--- archetype.properties

De volgende eigenschappen werden gebruikt toen het produceren van het AEM project van AEM archetype van het Project:

Verzeker een geval van AEM plaatselijk op haven 4502 loopt.

Van de terminal van de bevellijn verifieert dat Maven geïnstalleerd is:

$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

Voer de onderstaande opdracht Maven uit vanuit de map aem-guides-wknd-spa om het project te bouwen en te implementeren in AEM:

$ mvn -PautoInstallSinglePackage clean install

Als het gebruiken van AEM 6.x:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

De veelvoudige modules van het project zouden moeten worden opgesteld en aan AEM worden opgesteld.

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Het Gemaakt profiel autoInstallSinglePackage compileert de individuele modules van het project en stelt één enkel pakket aan de AEM instantie op. Door gebrek wordt dit pakket opgesteld aan een AEM instantie die plaatselijk op haven 4502 loopt en met de geloofsbrieven van admin:admin.

Navigeer aan Package Manager op uw lokale AEM instantie: http://localhost:4502/crx/packmgr/index.jsp.

Er moeten drie pakketten worden weergegeven voor wknd-spa-angular.all , wknd-spa-angular.ui.apps en wknd-spa-angular.ui.content .

Alle aangepaste code die nodig is voor het project, wordt in deze pakketten gebundeld en op de AEM-runtime geïnstalleerd.

Er moeten ook verschillende pakketten worden weergegeven voor spa.project.core en core.wcm.components . Dit zijn gebiedsdelen automatisch inbegrepen door archetype. Meer informatie over AEM de Componenten van de Kern kan hierworden gevonden.

Navigeer aan de Sites console: http://localhost:4502/sites.html/content.

De WKND-SPA bevat een basissitestructuur met een land, taal en homepage. Deze hiërarchie is gebaseerd op de standaardwaarden van het archetype voor language_country en isSingleCountryWebsite . Deze waarden kunnen worden beschreven door de beschikbare eigenschappenbij te werken wanneer het produceren van een project.

Open de pagina us > en > WKND SPA Angular Home Page door de pagina te selecteren en op de knop Edit op de menubalk te klikken:

Er is al een component Text toegevoegd aan de pagina. U kunt deze component op dezelfde manier bewerken als elke andere component in AEM.

Voeg een extra Text -component aan de pagina toe.

U ziet dat de ontwerpervaring vergelijkbaar is met die van een traditionele AEM Sites-pagina. Momenteel is een beperkt aantal componenten beschikbaar die kunnen worden gebruikt. Tijdens de zelfstudie wordt meer toegevoegd.

Klik in Page Editor op het menu Page Information > View as Published :

Dit zal een nieuw lusje met de vraagparameter ?wcmmode=disabled openen die effectief de AEM redacteur uitzet: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Bekijk de bron van de pagina. U ziet dat de tekstinhoud Hello World of een van de andere inhoud niet is gevonden. In plaats daarvan ziet u HTML als volgt:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
    ...
</body>
...

clientlib-angular.min.js is de Angular SPA die op de pagina wordt geladen en die verantwoordelijk is voor het renderen van de inhoud.

waar komt de inhoud uit?

Terugkeer aan het lusje: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

Open de de ontwikkelaarshulpmiddelen van browser en inspecteer het netwerkverkeer van de pagina tijdens verfrissen zich. Bekijk de XHR verzoeken:

Er zou een verzoek aan http://localhost:4502/content/wknd-spa-angular/us/en.model.jsonmoeten zijn. Dit bevat alle inhoud, geformatteerd in JSON, die de SPA zal drijven.

In een nieuw lusje, open http://localhost:4502/content/wknd-spa-angular/us/en.model.json

De aanvraag en.model.json vertegenwoordigt het inhoudsmodel waarop de toepassing wordt gebaseerd. Inspect de JSON-uitvoer en u moet het fragment kunnen vinden dat de Text -component(en) vertegenwoordigt.

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
},
...

In het volgende hoofdstuk zullen wij inspecteren hoe de inhoud JSON van AEM Componenten aan SPA Componenten wordt in kaart gebracht om de basis van de AEM SPA Ervaring te vormen.