Vad händer om ett arbetsflöde som tar nästan en timme idag kan bli en hanterad och upprepningsbar process i Experience Cloud – med ett enda klick? Den här guiden visar hur Adobe App Builder förvandlar manuell driftsättning till skalbar automatisering och går igenom de exakta stegen för att gå från koncept till publicerad företagsapp.

För inte så länge sedan hjälpte jag en stor fintech-organisation att effektivisera sina Adobe Target-arbetsflöden. Deras team spenderade nästan 45 minuter med att konfigurera logik för visningsbegränsningar för varje aktivitet – en noggrann dans med inställningar, målgrupper, regler och valideringar. När jag såg det hända tyckte jag att det måste finnas ett bättre sätt. Tänk om allt det här kunde hända på bara några minuter – eller till och med ett klick?

Det ledde mig rakt in i Adobe App Builder.

I stora företagsmiljöer förlitar sig team ofta på en blandning av verktyg, skript och teamkunskaper för att få till rutinmässigt arbete. Ingenting är helt ”oanvändbart”, men allt känns som om det tar fler steg än vad det borde. App Builder erbjuder en annan väg: I stället för att arbeta runt plattformen kan du bygga in arbetsflödet i den.

Ett anpassat gränssnitt. Mer information om Adobe Experience Cloud. Drivs av din logik, API:er och automatisering.

Det är precis vad jag har skapat – en enkel intern app som automatiskt hanterar hela konfigurationen av visningsbegränsningar. Det som tidigare var dussintals manuella åtgärder blev en enkel kontrollpanel som var inbäddad direkt i Adobe-användargränssnittet.

I den här artikeln berättar jag hur App Builder fungerar, varför det är ett så värdefullt verktyg för team i storföretag och hur du kan gå igenom de kommandon och konfigurationer som behövs för att få igång din egen app. Vare sig du automatiserar ett nischat arbetsflöde eller bygger en komplett intern produkt, bör den här guiden ge dig en bra startpunkt.

Vad är Adobe App Builder?

Adobe App Builder är ett komplett ramverk för applikationer och exekvering som låter dig skapa anpassade molnbaserade applikationer som kan köras på Adobe infrastruktur. Med det kan utvecklare utöka funktionaliteten i Adobe Experience Cloud, Adobe Experience Platform och andra Adobe-produkter. Med App Builder kan team skapa anpassade integreringar mellan Adobe och tredjepartssystem för att effektivisera verksamheten och förbättra arbetsflödet.

App Builder tillhandahåller flera olika mallar som fungerar som utgångspunkt för olika typer av integreringar. I den här artikeln fokuserar jag på tillägget excshell som gör att din applikation kan köras direkt i Adobe Experience Cloud-gränssnittet.

Varje app är:

• Autentiserad med Adobe IMS

• Driftsatt serverlöst med Adobe I/O Runtime

• Integrerad med din organisations Adobe Experience Cloud-miljö

• Hanterad med en enhetlig utvecklarkonsol och en gemensam arbetsytemodell för projekt

Kort och gott: Det är ditt anpassade tilläggsramverk för Adobe Experience Cloud.

Konsultperspektiv

Som konsult stöter jag ofta på team i storföretag som vill:

• Effektivisera arbetsflöden för intern marknadsföring eller innehållsgranskning

• Tillhandahålla kontrollerad insyn i komplexa mål- eller AEM-konfigurationer

• Automatisera repetitiva API-uppgifter såsom kampanjsynkronisering eller målgruppsskapande

App Builder löser det här utan problem. Det kombinerar säker exekvering, spektrumbaserade UI-komponenter och hanterad åtkomstkontroll, vilket möjliggör snabb utveckling utan att hantera infrastruktur eller autentiseringsuppgifter.

Översikt över verkliga exempel

En av mina kunder stod inför en komplex aktivitetskonfiguration i Adobe Target som innebar flera tekniska steg och var tidskrävande. Jag erbjöd mig att bygga en app som hanterade den komplexa 45 minuter långa konfigurationen med ett enda klick. Den här appen skulle integreras med Adobe Target Admin-API:et för att hantera aktiviteter, erbjudanden och målgrupper. Viktiga funktioner:

• Sökbar och sorterbar lista med målaktiviteter

• Arbetsplatsfilter som behåller användarvalet

• Informationsmetod med åtgärder per upplevelse

• Erbjudandeuppdatering med ett klick (metadata för inmatningar)

• Valfri målgruppsgenerering med konfigurerbara värden

• Spectrum-formaterat gränssnitt (Spectrum CSS) för ett Adobe-utseende

Snabbstart (ny miljö)

1) Förhandskrav

• Adobe Developer Console-åtkomst (projekt med App Builder)

• Node.js 18+ och npm

• Adobe I/O CLI: npm install -g @adobe/aio-cli

• Inloggad på Adobe: aio-inloggning

2) Initiering

Om du börjar från början:

3) Konfigurera app.config.yaml

Filen app.config.yaml definierar hur din app kan integreras med Adobe Experience Cloud. Den talar om för App Builder vilket typ av tillägg du bygger, var de lokala filerna finns och vilka serveråtgärder som ska köras i Adobe I/O Runtime.

På en hög nivå anger du:

• Tilläggstyp – i det här fallet Experience Cloud Shell-tillägget (dx/excshell/1) som gör att appen kan visas direkt i Adobe Experience Cloud-gränssnittet.

• Lokal implementering – en referens till huvudstartpunkten för HTML (till exempel index.html) tillsammans med metadata såsom appens namn, beskrivning och ikon.

• Mappen Web assets – oftast en web-src-katalog som innehåller den lokala Spektrum-formateringen.

• Exekveringsåtgärder – en uppsättning Node.js-funktioner (till exempel ”getTargetActivities”, ”updateOffer” osv.) som driftsätts till Adobes serverlösa infrastruktur. Varje åtgärd innehåller detaljer som:

  • Sökvägen till JavaScript-funktionsfilen

  • Vare sig den är tillgänglig på webben eller inte

  • Exekveringsversionen av Node.js

  • Alla anteckningar (som att kräva Adobe-autentisering)

Kort och gott: Den här konfigurationen kopplar användargränssnittet till serverlogiken och gör att appen kan identifieras av Experience Cloud när den har driftsatts.

4) Lokal utveckling

Appen finns på http://localhost:9080 med direktinläsning och IMS-autentisering (när den startas i Experience Cloud-gränssnittet).

5) Driftsätt till en Workspace

Byt arbetsyta vid behov (t.ex. scen, produktion):

6) Publicera i katalog (produktion)

När Exchange har godkänt applikationen visas den i App Builder-katalogen för din organisation.

Åtgärder (serverlösa API:er)

Exempel som används i den här appen (Node.js, @adobe/aio-sdk + node-fetch):

• getTargetActivities – Visar målaktiviteter för organisationen/klientorganisationen

• getActivity – Hämtar information om en specifik aktivitet (/target/actions/{type}/{id})

• getOffer – Läser ett JSON-erbjudande (/target/offers/json/{offerId})

• updateOffer – Uppdaterar ett erbjudande (PUT /target/offers/content/{offerId})

• createAudience – Skapar en målgrupp med regelbaserad logik

Varje åtgärd hämtar en IMS-åtkomsttoken från det cachelagrade tillståndsarkivet (ifyllt av åtgärden getAccessToken) och anropar Adobe Target-API:er med rubrikerna Authorization: Bearer <token> och X-API-Key: <clientId>.

Front-end (Spectrum UI)

Gränssnittet är en enkel HTML/JS med Spectrum CSS:

• Sök indata med knappen Rensa

• Workspace-väljare (bakgrundsväljare)

• Tabell med statuschip och formaterade tidsstämplar

• Modal dialog med kontrollerna Uppdatera erbjudande och Skapa målgrupp (tillval)

Gränssnittet lagrar den valda arbetsytan i localStorage så att filtret finns kvar mellan sessionerna.

Kommandoreferens

God praxis och anteckningar

• Använd runtime.done() (via @adobe/exc-app Runtime) när du kör i Experience Cloud-gränssnittet för att undvika gränssnittstimeout (för SPA-konfigurationer).

• Undvik långvariga åtgärder, returnera snabbt och spela upp eller posta vid behov.

• Använd Spectrum-komponenter som körs i bakgrunden för att få ett konsekvent gränssnitt.

• Behåll auth-logiken i åtgärder, lokal hårdvara anropar dina åtgärder, inte Adobe API:er direkt.

• Bevara användarfilter (såsom arbetsyta) i localStorage för bättre användarupplevelse.

• Kontrollera metadata (namn, ikon) och inkludera tilläggsblock i app.config.yaml för Exchange-publicering.

Dokumentation

• Adobe App Builder – Komma igång

• Developer Console