Komma igång - självstudiekurs för utvecklare

Den här självstudiekursen hjälper dig att komma igång med ett nytt Adobe Experience Manager-projekt (AEM). Om tio till tjugo minuter har du skapat en egen webbplats och kunnat skapa, förhandsgranska och publicera eget innehåll, formatera och lägga till nya block.

Förutsättningar:

I den här självstudien används macOS, Chrome och Visual Studio Code som utvecklingsmiljö och skärmbilderna och instruktionerna återspeglar konfigurationen. Du kan använda ett annat operativsystem, en annan webbläsare och en annan kodredigerare, men det gränssnitt du ser och de steg du måste ta kan variera beroende på hur du gör.

Kom igång med databasmallen för mallar

Det snabbaste och enklaste sättet att komma igång med AEM bästa praxis är att skapa din databas med GitHub-databasen som mall.

https://github.com/adobe/aem-boilerplate

Klicka bara på Use this template knapp och markera Create a new repositoryoch välj var du vill skapa den här databasen.

Vi rekommenderar att databasen är inställd på public.

Det enda återstående steget i GitHub är att installera AEM Code Sync GitHub App på din databas genom att klicka på den här länken: https://github.com/apps/aem-code-sync/installations/new

I Repository access inställningarna för AEM Code Sync App (Synkronisera kod) ska du välja Only select Repositories (inte All Repositories). Välj sedan din nya databas och klicka på Save.

Anteckning: Om du använder Github Enterprise med IP-filtrering kan du lägga till följande IP-adress i tillåtelselista: 3.227.118.73

Grattis! Du har en ny webbplats på https://<branch>--<repo>--<owner>.hlx.page/ I exemplet ovan är det https://main--my-website--lighthouse100.hlx.page/

Länka din egen innehållskälla med Google Drive

I din gaffel i GitHub-databasen pekar webbplatsen mot en befintlig innehållskälla i Google Drive. Se den här mappen för exempelinnehåll.

Det här innehållet är skrivskyddat, men det kan kopieras till din Google Drive-mapp och fungera som startpunkt.

Om du vill skapa ditt eget innehåll skapar du en mapp i din egen Google Drive och delar mappen med Adobe Experience Manager-användaren (helix@adobe.com).

Ett bra sätt att börja skapa eget innehåll är att kopiera index, nav och footer från exempelinnehållet och bekanta dig med innehållsstrukturen. nav och footer ändras inte ofta i ett projekt och har en särskild struktur. De flesta filer i ett projekt liknar index.

Öppna filerna och kopiera/klistra in hela innehållet i motsvarande filer i din egen Google Drive. Du kan även hämta filerna via Download All eller ladda ned enskilda filer. Kom dock ihåg att konvertera den hämtade filen .docx filer tillbaka till Google Docs när du överför dem till din mapp på din Google Drive.

Nu när du har ditt innehåll måste du koppla det till ditt GitHub-svar. Det gör du genom att ändra referensen i fstab.yaml i GitHub-rapporten till den mapp du just delade.
Kopiera/klistra in mappens URL från din Google Drive till fstab.yaml.

Tänk på att när du har gjort den ändringen kommer du att se 404 not found fel eftersom ditt innehåll inte har förhandsgranskats än. Se nästa avsnitt för att se hur du börjar redigera och förhandsgranska ditt innehåll. Om du kopierade över index, nav och footer alla dessa tre är separata dokument med sina egna förhandsgransknings- och publiceringscykler, så se till att du förhandsgranskar (och publicerar) alla dem om det behövs.

Genomför ändringarna och du har kopplat en egen innehållskälla till webbplatsen.

Förhandsgranska och publicera ditt innehåll

När du har slutfört det sista steget är den nya innehållskällan inte tom, men inget innehåll har befordrats till preview eller live , vilket innebär att din webbplats används i 404-tal.

Om du vill förhandsgranska innehåll måste författaren installera tillägget Sidekick Chrome. Hitta Chrome-tillägg här.

När du har lagt till tillägget i Chrome, glöm inte att fästa det, blir det lättare att hitta det.

Om du vill konfigurera Chrome-tillägget går du till den tidigare delade Google Drive-mappen och klickar på tilläggsikonen i webbläsarens verktygsfält och väljer Add this project.

När tillägget har installerats och ditt projekt har lagts till kan du förhandsgranska och publicera ditt innehåll från Google Drive.

Markera alla tre dokumenten och aktivera AEM Sidekick genom att klicka på det fästa tillägget. Ett nytt verktygsfält visas. Klicka på preview eller publish kommer att utlösa motsvarande åtgärd.

Öppna index och göra några ändringar. Aktivera Sidekick genom att klicka på det fästa tillägget och sedan på Preview som startar förhandsgranskningen och öppnar en ny flik med förhandsvisningsåtergivningen av innehållet.

Börja utveckla format och funktionalitet

För att komma igång med utvecklingen är det enklast att installera AEM Command Line Interface (CLI) och klona ditt svar lokalt genom att använda följande.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Därefter ändras programmet till din projektmapp och du kan starta den lokala utvecklingsmiljön med följande.

cd <repo>
aem up

Detta öppnas http://localhost:3000/ och du är redo att göra ändringar.
Ett bra ställe att börja på blocks mapp där det mesta av stilen och koden finns i ett projekt. Gör bara en ändring i en .css eller .js och du bör omedelbart se ändringarna i webbläsaren.

När du är redo att föra över ändringarna använder du bara Git för att lägga till, implementera och skicka koden till förhandsgranskningen (https://<branch>--<repo>--<owner>.hlx.page/) och produktion (https://<branch>--<repo>--<owner>.hlx.live/).

Nu är det klart! Grattis, din första webbplats är igång. Om du behöver hjälp med självstudiekursen kan du gå med i vår Discord-kanal eller kontakta oss.