Creare, aggiornare e rieseguire il factoring dei blocchi block-development

Utilizza l’agente di modernizzazione esperienza per lo sviluppo e la migrazione continui di Edge Delivery Services. Inizia con le esigenze dell’autore e i contenuti reali, quindi scegli l’implementazione più piccola che li supporta.

L’agente segue lo sviluppo basato sui contenuti (CDD, Content-Driven Development) per questo lavoro. Inizia dal contenuto reale e da come lo creeranno gli autori, e scrive il codice dopo di esso. In questo modo i modelli di contenuto sono facili da utilizzare per gli autori ed evita blocchi che solo gli sviluppatori possono compilare.

Connetti l’archivio e il ramo previsti, conferma le autorizzazioni di modifica e identifica dove è archiviato il contenuto. Mantenere una linea di base prima di modificare il codice condiviso o i modelli di contenuto.

Componi prima della creazione di un blocco composition

Gli elementi di HTML sono le unità di base, o atomi: intestazioni, paragrafi, collegamenti, elenchi e immagini. Laddove possibile, gli autori devono utilizzare il contenuto predefinito, ovvero il contenuto esterno ai blocchi. Gli stili globali e le proprietà personalizzate CSS, o i token di progettazione, definiscono la tipografia, i colori, la spaziatura e la presentazione con collegamenti e pulsanti condivisi.

Un blocco consente agli autori di contrassegnare il contenuto da inserire in un componente, ad esempio un set di schede o un carosello, in cui il codice non è in grado di distinguerlo dal contenuto predefinito circostante. Nel HTML utilizzato dal sito, un blocco è un div con il nome del blocco come classe. blocks/<name>/<name>.js e blocks/<name>/<name>.css del progetto lo decorano nel browser. Se il codice è in grado di riconoscere un pattern nel contenuto predefinito, può generare il blocco stesso, che aem.live chiama auto-blocking: la boilerplate di AEM, ad esempio, trasforma un collegamento a una pagina /widgets/ in un blocco widget. Mantieni un blocco leggero e mirato. Una differenza visiva da sola non richiede un nuovo blocco: CSS e JavaScript possono assegnare uno stile al contenuto predefinito e una variante o uno stile di sezione può rappresentare la differenza.

Il modello di David raccoglie le regole aem.live per i contenuti che gli autori possono creare facilmente: preferisci il contenuto predefinito, evita i blocchi all’interno dei blocchi, limita il numero di blocchi e varianti e lascia che lo stile dei pulsanti sia quello del blocco o della sezione in cui si trovano. Quando un blocco esegue lo stesso processo di un blocco della raccolta blocchi, riutilizzare il modello di contenuto di tale blocco.

Controlla le convenzioni del progetto prima di generare il codice:

Edge Delivery Services non dispone di controlli per gruppi di pulsanti o note a piè di pagina incorporati. Ogni è una convenzione che il codice del progetto applica al contenuto creato, quindi controlla come il progetto lo implementa e verifica il risultato renderizzato.

Esempio: un teaser flessibile senza blocchi atomici composition-example

I progetti Adobe Experience Manager basati su componenti spesso forniscono un componente teaser o componenti separati per intestazione, immagine, testo e pulsanti, in modo che gli autori possano combinarli. La home page del sito di esempio WKND, ad esempio, promuove ogni viaggio con un teaser dei Componenti core. Con Edge Delivery Services, gli autori scrivono gli stessi elementi direttamente come contenuto predefinito, in una sezione o in una cella di un blocco:

[Image]
## Downhill Skiing Wyoming
A skier's paradise far from crowds and close to nature.
**[View trip](/adventures/downhill-skiing-wyoming)**
_[All adventures](/adventures)_

Nel AEM boilerplate corrente, un collegamento che è solo nel suo paragrafo diventa un pulsante quando viene formattato: grassetto per un pulsante principale, corsivo per un pulsante secondario e grassetto più corsivo per un pulsante di accento. Un link semplice, o un link all’interno di una frase, rimane un link. Gli stili globali conferiscono a questi pulsanti lo stesso aspetto nei blocchi di contenuto predefiniti e all’interno.

Gli autori possono aggiungere, rimuovere o riordinare il titolo, il testo, l’immagine e i collegamenti senza nuovi componenti. Un teaser o un blocco hero è necessario solo se gli autori devono contrassegnare gli elementi che appartengono tra loro; CSS e JavaScript possono posizionare l’immagine accanto al testo anche nel contenuto predefinito. I progetti possono modificare queste convenzioni, pertanto chiedi all’agente di controllare gli script e gli stili del progetto prima di fare affidamento su di essi.

Richiedi un blocco block-prompts

Puoi iniziare con un breve prompt, ad esempio “Crea un blocco di testimonianze”. Aggiungi un contesto in cui aiuta l’agente a trovare una corrispondenza specifica:

Una pagina di riferimento o una schermata mostra l’aspetto della destinazione. Non definisce cosa gli autori modificano, quindi dite anche questo.

Riutilizza blocchi esistenti reuse-blocks

Prima che l’agente crei un blocco, ne cerca uno da riutilizzare o adattare: nella cartella blocks del progetto e nella Raccolta blocchi e nella Parte blocchi per il codice di riferimento. Durante la migrazione, verifica anche la libreria dei blocchi, se disponibile.

Blocchi di compilazione uno alla volta iterate-blocks

Quando hai bisogno di più blocchi, non chiedere a tutti di essi in un unico prompt. Crea prima uno o due blocchi rappresentativi e controllane il modello di contenuto, lo stile e l’authoring. Quindi continua con gli altri, in modo che le decisioni che hai preso, come nomi, varianti e spaziatura, vengano riportate. In una migrazione, genera e convalida i blocchi di un modello rappresentativo prima del resto; vedi Flusso di lavoro di importazione in blocco.

Impostare il comportamento di blocco prima di una migrazione block-instructions

La migrazione genera blocchi dal contenuto trovato nelle pagine sorgente. Per determinare come viene generato un blocco prima che venga generato dall’agente:

La modalità automatica non richiede istruzioni durante un’esecuzione. In seguito, perfeziona i blocchi nella console.

Creare un blocco create

Fornisci l’attività di authoring, il contenuto di esempio, il comportamento e la progettazione desiderati, dove è archiviato il contenuto e una pagina di prova.

Ad esempio:

Crea un blocco delle testimonianze per le nostre pagine basate su documenti. Inizia da questi esempi di contenuto reale: /about e /customers. Controlla prima i blocchi esistenti. Gli autori devono modificare le virgolette, l’attribuzione e l’immagine facoltativa senza la configurazione del layout. Utilizza i nostri token. Includi esempi di testo lungo e senza immagine. Non caricare, inviare o pubblicare.

Sostituisci i percorsi di esempio con il tuo.

Il risultato è un codice riutilizzabile, un modello in cui gli autori ne hanno bisogno e contenuti di esempio che gli autori possono modificare.

Informazioni fornite dall’agente con un blocco block-deliverables

Aggiornare un blocco esistente update

Fornisci il nome del blocco, gli esempi/varianti correnti, la modifica richiesta e i requisiti di compatibilità.

Ad esempio:

Aggiorna cards in modo che la variante del collegamento secondario approvata funzioni su /products e /blog. Mantieni le varianti predefinite e di immagine esistenti e i relativi contenuti creati. Controlla l’interazione con la tastiera e il wrapping per dispositivi mobili. Non riscrivere altre pagine o caricare contenuti.

Sostituisci i percorsi di esempio con il tuo.

Passa il puntatore del mouse sulle modifiche apportate, sulle varianti interessate, sulle istruzioni per l’authoring e su tutte le modifiche al contenuto necessarie.

Refactoring senza modifica del risultato refactor

Il refactoring migliora l’implementazione e al tempo stesso preserva il comportamento concordato. È diverso dal raggruppamento di un catalogo, dalla riprogettazione di un blocco o dalla migrazione del modello di contenuto.

Ad esempio:

Refactoring della logica di decorazione della carta duplicata in blocks/cards/cards.js e blocks/teaser/teaser.js. Mantenere i modelli creati, la semantica di output, l’aspetto, il comportamento dei collegamenti, l’accesso da tastiera e gli hook di analisi. Utilizzare /products e /blog come esempi di regressione. Riportare i rischi di compatibilità e i risultati dei test. Non eseguire la migrazione del contenuto o delle modifiche push.

Sostituisci i percorsi di esempio con il tuo.

Non esiste un comando di refactoring separato: lo si chiede in chat e l’agente modifica il codice come farebbe uno sviluppatore, entro i limiti impostati.

Creare un blocco dinamico dynamic-blocks

Un blocco dinamico carica o calcola il relativo contenuto nel browser, anziché mostrare solo ciò che gli autori scrivono. Ad esempio, un elenco degli articoli più recenti, dei risultati di ricerca o di un elenco filtrato. Chiedi all’agente di crearne uno dopo la migrazione come per qualsiasi altro blocco o di modificare un blocco migrato in questo modo. Descrivi:

Ad esempio:

Crea un blocco elenco articoli che mostra i sei articoli più recenti dell’indice di query del sito, con immagine, titolo e data. Gli autori impostano il numero di articoli e la cartella da elencare in una tabella chiave-valore. Mostra un breve messaggio in assenza di articoli. Prova su /news. Non caricare, inviare o pubblicare.

L’indice della query include solo le pagine pubblicate e solo le proprietà estratte dalla relativa configurazione; pertanto, prima di eseguire il test, controlla entrambe. Convalida gli stati vuoto ed errore e il risultato normale.

Connetti servizi e applicazioni integrations

L’agente scrive il codice che connette il sito ad altri sistemi, inclusi quelli non coperti dai componenti aggiuntivi. Oltre Edge Delivery Services spiega come elaborare un’integrazione con esso. Questa sezione descrive dove viene eseguito tale codice.

Le pagine Edge Delivery Services eseguono questo codice nel browser del visitatore, in modo che ogni connessione faccia parte di un blocco, di un widget o degli script del progetto. Se l’agente deve chiamare un’API che necessita di una chiave mentre funziona, aggiungi la chiave in Impostazioni, non nella chat.

I componenti aggiuntivi sono funzionalità facoltative che l’agente offre per l’attivazione quando un’attività ne ha bisogno. I sistemi che si connettono, chi li possiede e chi accetta il risultato sono le decisioni relative ai progetti. Vedi Il progetto rimane attivo.

Invii modulo form-submissions

Edge Delivery Services distribuisce un modulo, ma non memorizza gli invii né esegue ciò che segue. Nel sito di origine, ogni invio è stato gestito da un server e il server non è visibile durante l’importazione delle pagine. La connessione di una destinazione è uguale per qualsiasi sito Edge Delivery Services, migrato o meno, e poiché l’agente è un agente di codifica per utilizzo generico, puoi richiederlo in qualsiasi momento.

Funzionamento del componente aggiuntivo Forms forms-add-on

Il componente aggiuntivo Forms è progettato per le organizzazioni che dispongono di licenze di Adobe Experience Manager Forms. Prepara i moduli per Edge Delivery Services per Experience Manager Forms. Per ogni modulo di origine con due o più campi, registra i campi in una definizione di modulo, un foglio salvato accanto alla pagina con una riga per campo: il nome, l’etichetta, il tipo, le opzioni e la convalida. Posiziona quindi un blocco di modulo sulla pagina che collega alla definizione. I campi e le etichette sono contenuti in tale definizione, non i dati contenuti in un back-end di moduli. Ogni modulo utilizza lo stesso blocco, denominato form, e la sua definizione determina ciò che viene visualizzato, pertanto l’agente non crea varianti del blocco. Il componente aggiuntivo salva ogni definizione nella cartella della pagina, che prende il nome dal modulo di origine, e non cerca lo stesso modulo nelle altre pagine. Per mantenere un modulo visualizzato in più pagine in un’unica posizione, chiedi all’agente di collegare tali pagine a una singola definizione.

Se il progetto non ha ancora un blocco di modulo, il componente aggiuntivo aggiunge il blocco di modulo di Experience Manager Forms. Questo blocco invia ogni invio al Servizio di invio di Forms, che identifica il modulo in base al percorso della relativa definizione e memorizza i dati nel foglio di calcolo collegato nella riga di invio della definizione. Il componente aggiuntivo non collega un foglio di calcolo e non mantiene l’indirizzo a cui il modulo di origine è stato inviato, pertanto connetti una destinazione prima che il modulo diventi attivo. Vedi Scegli una destinazione. Il componente aggiuntivo non richiede alcuna licenza, ma il blocco del modulo e il servizio di invio Forms richiedono una licenza Experience Manager Forms.

Senza Experience Manager Forms, l’inventario dei campi del componente aggiuntivo è la parte che aiuta ancora: acquisisce i campi, le etichette, i tipi, le opzioni e la convalida di ogni modulo. L’agente non dispone di competenze per altre piattaforme modulo, pertanto è necessario leggere prima la documentazione della piattaforma, come descritto in Lavorare oltre Edge Delivery Services. Può quindi generare un blocco di modulo che legge le stesse definizioni e lo invia alla piattaforma, oppure incorporare il modulo che ospita la piattaforma.

Il componente aggiuntivo legge ogni modulo dal HTML inviato dal server di origine, compresi i moduli di provider di terze parti quando i relativi campi sono presenti in tale HTML. Un modulo aggiunto da uno script nel browser, ad esempio un modulo incorporato da una piattaforma di marketing, non si trova in tale HTML, pertanto il componente aggiuntivo non lo importa. Chiedi all’agente di ricreare il modulo o di incorporarlo nuovamente dalla piattaforma.

Scegli una destinazione form-destination

I moduli di lead appartengono al luogo in cui i team gestiscono già i lead, in una piattaforma di automazione marketing o in un sistema di gestione delle relazioni con i clienti (Customer Relationship Management, CRM), ad esempio:

Quando le richieste devono raggiungere più sistemi, inviale a una piattaforma di integrazione, ad esempio Adobe Workfront Fusion o Microsoft Power Automate, o alla tua API. Con Experience Manager Forms, il servizio di invio Forms memorizza gli invii in un foglio di calcolo o li invia per e-mail e le azioni di invio eseguite su Experience Manager li inoltrano ad altri sistemi, come Marketo Engage, Workfront Fusion, Power Automate o un endpoint REST. Vedere Configurare le azioni di invio.

Molte di queste piattaforme accettano un invio dal browser a un endpoint di modulo che non richiede alcun segreto. Se l’API della piattaforma necessita di una chiave, invia l’invio tramite un servizio lato server che lo mantiene, come descritto in Segreti sopra.

Informi l’agente:

Ad esempio:

Per prima cosa leggi la documentazione del nostro CRM sull’invio dei moduli all’indirizzo https://developer.example.com/forms. Quindi connettere il modulo in /contact al modulo CRM contact-us in https://forms.example.com/submit/contact-us. Mappa nome, cognome, e-mail, società e paese ai campi di gestione delle relazioni con i clienti FirstName, LastName, Email, Company e Country. E-mail e società sono obbligatori. Aggiungi campi nascosti per la sorgente del lead “Sito web”, l’URL della pagina e i parametri UTM della visita. Mostra questa casella di controllo del consenso, deselezionata: “Accetto di ricevere le notizie del prodotto per e-mail”. Dopo un invio corretto, mostra “Grazie, saremo in contatto”. Se l’invio non riesce, conserva le voci del visitatore e mostra un errore con un nuovo tentativo. Esegui il test rispetto alla sandbox del sistema di gestione delle relazioni con i clienti in https://sandbox.example.com. Non caricare, inviare o pubblicare.

Sostituisci gli URL di esempio, i nomi e il testo con il tuo.

L’agente aggiorna la definizione del modulo e il codice del blocco di modulo. Può anche scrivere il codice di un servizio lato server, che il team distribuisce con il segreto. Nella piattaforma ricevente, l’amministratore configura:

Invia una voce di test dal sito di anteprima. Verifica che sia arrivato con ogni campo, abbia avviato il flusso di lavoro previsto e sia stato contrassegnato come test. Ripeti il controllo sul dominio di produzione dopo il passaggio.

Pagine Commerce commerce-pages

Il componente aggiuntivo Commerce Pages estende il flusso di lavoro di importazione delle pagine dell’agente di modernizzazione esperienza per le vetrine di Adobe Commerce. Riconosce le pagine dei dettagli del prodotto e le pagine di elenco dei prodotti sul sito di origine, indipendentemente dalla piattaforma che lo esegue, da segnali come dati strutturati del prodotto, pattern di URL ed elementi di pagina come un campo quantità, una griglia di prodotto o filtri. Ricrea ciascuno come una pagina che contiene solo la SKU del prodotto, o il percorso della categoria, in un blocco di e-commerce e il contenuto circostante, come banner e promozioni, in blocchi standard. I dati del prodotto non vengono importati: il blocco commerce li carica dal catalogo ogni volta che un visitatore apre la pagina. L’agente migra altre pagine con il flusso di lavoro standard.

Il componente aggiuntivo non scrive i blocchi commerce. Utilizza i blocchi di prodotto ed elenco già presenti nel progetto. In caso contrario, sono previsti i blocchi product-details e product-list-page della vetrina commerciale. Avvia il progetto da quella boilerplate e collega la vetrina al tuo catalogo, in modo che le pagine importate mostrino i prodotti quando li controlli. Il componente aggiuntivo non richiede alcuna licenza, ma i componenti di rilascio della vetrina richiedono una licenza Adobe Commerce as a Cloud Service o Adobe Commerce Optimizer. Adobe Commerce Optimizer può anche fornire il catalogo quando un’altra piattaforma commerce gestisce il carrello, il pagamento e gli ordini. Consulta Opzioni back-end.

Per un’altra piattaforma commerce senza Adobe Commerce Optimizer, il componente aggiuntivo non è applicabile. L’agente crea blocchi di prodotti ed elenchi che caricano i dati dall’API della piattaforma, utilizzando la documentazione della piattaforma come descritto in Lavorare oltre Edge Delivery Services.

Il componente aggiuntivo funziona con contenuti basati su documenti. Per i progetti che utilizzano l’authoring Experience Manager, l’agente utilizza la migrazione standard, che importa ciò che ogni pagina di prodotto mostra in quel momento. Decidi con il tuo team come queste pagine si connettono al catalogo.

Convalida e consegna validation

Utilizza i comandi dichiarati di lint e test del progetto, oltre ai controlli del browser sul contenuto reale. Chiedere all’agente di riferire i comandi e i risultati, non solo quelli testati.

Seleziona:

Se un controllo non riesce, mantenete l’esempio fallimentare e correggete il livello interessato più piccolo. Distingue i problemi di anteprima/ramo di codice non aggiornati dagli errori di modello o implementazione. Eseguire nuovamente la verifica del guasto e le relative regressioni.

Esaminare le differenze, posizionare nell’area di visualizzazione solo i file desiderati e eseguire il push attraverso i criteri dell’archivio. Carica il contenuto di prova o di produzione solo se autorizzato; un push di codice non lo salva. Dopo l’unione in main, il codice di blocco viene applicato a ogni pagina del sito attivo che utilizza il blocco. Vedere Modalità di attivazione delle modifiche.

Per il ripristino, ripristinare il codice tramite Git e ripristinare separatamente il contenuto remoto modificato. Mantieni i vecchi esempi compatibili fino a quando non viene accettata qualsiasi migrazione di contenuti richiesta.

Utilizzare il passaggio di consegne del progetto per conservare i file, i modelli, gli esempi, i risultati della convalida, i rischi rimanenti e l’approccio di ripristino per la persona o l’agente successivo.