Introdução - Tutorial do desenvolvedor

Crie um repositório GitHub para seu projeto do AEM. Para criar um repositório:

1. Ir para https://github.com/adobe-rnd/aem-boilerplate-forms.

   

2. Clique na opção Usar este modelo e selecione a opção Criar um novo repositório. A tela criar um novo repositório é aberta.

   

3. Na tela Criar um novo repositório, selecione o proprietário e especifique o Nome do repositório. A Adobe recomenda que o repositório seja definido como Público. Então, selecione a opção pública e clique em Criar Repositório.

Instale o aplicativo GitHub de sincronização de código da AEM em seu repositório. Para instalar:

1. Ir para https://github.com/apps/aem-code-sync/installations/new.
2. Na tela Instalar sincronização de código do AEM, selecione a opção Selecionar apenas repositórios e selecione o repositório recém-criado. Clique em Salvar.

Parabéns! Você tem um novo site em execução em https://<branch>--<repo>--<owner>.aem.page/.

• <branch> refere-se à ramificação do seu repositório GitHub.
• <repository> indica seu repositório GitHub.
• <owner> refere-se ao nome de usuário da sua conta GitHub que hospeda seu repositório GitHub.

Por exemplo, se o nome da ramificação for main, o repositório for wefinance e o proprietário for wkndforms, o site estará ativo e em execução em https://main--wefinance--wkndforms.aem.page
<!—(https://main–wefinance–wkndform.aem.page)–>

Crie uma nova pasta especificamente para o conteúdo do AEM no Google Drive ou no Microsoft SharePoint. Este documento usa uma pasta criada no Microsoft SharePoint.

Compartilhe a pasta com o usuário do Adobe Experience Manager (forms@adobe.com).

Certifique-se de ter fornecido direitos de edição na pasta ao usuário do Adobe Experience Manager.

{width="50%"}

{width="50%"}

Copie o conteúdo de exemplo para sua pasta. Para copiar:

1. Descompacte a pasta baixada e copie o conteúdo.

   

   Os arquivos nav e footer definem o layout básico de suas páginas e raramente mudam em todo o projeto. Eles também têm uma estrutura específica diferente da maioria dos outros arquivos de conteúdo. Ao examinar esses arquivos, você terá uma ideia de como o conteúdo é organizado no AEM Projects.

2. Faça upload desses arquivos para a pasta Microsoft SharePoint ou Google Drive.

   

   Certifique-se de copiar a folha enquiry do conteúdo de amostra para sua pasta no Google Drive ou no Microsoft SharePoint. Ele contém a estrutura de um formulário de amostra.

Agora que sua pasta de conteúdo está configurada, é hora de vinculá-la ao seu projeto no GitHub que você criou usando o AEM Forms Boilerplate anteriormente. Para conectar:

1. Vá para o repositório GitHub criado anteriormente usando a Matriz do AEM Forms.

2. Adicione o arquivo fstab.yaml à pasta raiz.

3. Adicione a referência com o caminho para a pasta que você compartilhou com o usuário do AEM (forms@adobe.com).

   

   Se você usar o Microsoft SharePoint, o caminho da pasta usará o seguinte formato:

   code language-html
   https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

   Por exemplo,

   code language-html
   https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

   Para obter mais informações sobre como gerenciar arquivos com o Microsoft SharePoint, consulte Como usar o Adobe SharePoint.

4. Confirme o arquivo fsatb.yaml depois de adicionar a referência e tudo ficará bem. Se você encontrar problemas de compilação, consulte Solução de problemas de compilação do GitHub.

   

   Isso conecta sua pasta de conteúdo ao seu site. Depois de atualizar a referência, você pode enfrentar os erros "404 Não encontrado" inicialmente. Isso ocorre porque seu conteúdo ainda não foi visualizado. A próxima seção explica como começar a criar e visualizar seu conteúdo.

Instale a extensão do Chrome chamada AEM Sidekick.

Depois de instalar a extensão no Chrome, não se esqueça de fixá-la, isso facilita a localização.

Para configurar a extensão do Sidekick Chrome, vá para a pasta Google Drive ou Microsoft SharePoint compartilhada anteriormente, clique com o botão direito do mouse no ícone de extensão na barra de ferramentas do navegador e selecione Add this project.

Quando a extensão for instalada e seu projeto for adicionado, você estará pronto para visualizar e publicar seu conteúdo do Google Drive.

Selecione todos os documentos na pasta Microsoft SharePoint ou Google Drive. Você pode escolher vários documentos mantendo pressionada a tecla Ctrl (Windows/Linux) ou a tecla Cmd (Mac) enquanto clica em.

Clique no ícone do AEM Sidekick fixado à barra de extensão do Chrome. Uma barra de ferramentas é exibida na tela. Você pode optar por visualizar ou publicar seu conteúdo.

Se você copiou mais de index, nav, footer e enquiry arquivos, todos esses são documentos separados com seus próprios ciclos de visualização e publicação, portanto, visualize (e publique) todos eles.

Ao visualizar os arquivos, novas guias do navegador exibem os documentos. Para visualizar o formulário de amostra, vá para o seguinte URL:

https://<branch>--<repository>--<owner>.aem.live

• <branch> refere-se à ramificação do seu repositório GitHub.
• <repository> indica seu repositório GitHub.
• <owner> refere-se ao nome de usuário da sua conta GitHub que hospeda seu repositório GitHub.

URL https://<branch>--<repo>--<owner>.aem.page/enquiry.

Por exemplo, se o repositório do seu projeto se chamar "wefinance", estiver localizado sob o proprietário da conta "wkndform" e você estiver usando a ramificação "main" e o nome do formulário como enquiry, a URL será: https://main--wefinance--wkndform.aem.live/enquiry.
<!—(https://main–wefinance–wkndform.aem.live/enquiry).–>

Instalar a AEM CLI: a AEM CLI simplifica as tarefas de desenvolvimento. Vamos instalá-lo globalmente usando npm:

    npm install -g @adobe/aem-cli

Clonar o projeto do GitHub: clone o repositório de projetos do GitHub usando o seguinte comando, substituindo <owner> pelo proprietário do repositório e <repo> pelo nome do repositório:

git clone https://github.com/<owner>/<repo>

Inicie o ambiente local: navegue até o diretório do projeto e acione a instância local do AEM com um único comando:

cd <repo>
aem up

Navegue até a pasta do repositório do Projeto AEM no sistema local.

Copie e cole as seguintes pastas e arquivos do AEM Forms Boilerplate no seu projeto do AEM:

• Pasta bloco de formulários
• arquivo form-editor-support.js
• Arquivo form-editor-support.css

Navegue até o arquivo /scripts/editor-support.js no seu projeto do AEM e atualize-o com o arquivo editor-support.js no Modelo do AEM Forms

Navegue até /models/_section.json no seu projeto do AEM e anexe "formulário" e "formulário-incorporado-adaptável-formulário" à matriz de componentes do objeto filters:

    "filters": [
    {
  "id": "section",
  "components": [
    .
    .
    .
    "form",
    "embed-adaptive-form"
  ]
 }]

(Opcional) Navegue até /.eslintignore no seu projeto do AEM e adicione abaixo das linhas de código:

blocks/form/rules/formula/*
blocks/form/rules/model/*
blocks/form/rules/functions.js
scripts/editor-support.js
scripts/editor-support-rte.js

(Opcional) Navegue até /.eslintrc.js no seu projeto do AEM e adicione abaixo das linhas de código no objeto rules:

'xwalk/max-cells': ['error', {
  '*': 4, // default limit for all models
  form: 15,
  wizard: 12,
  'form-button': 7,
  'checkbox-group': 20,
  checkbox: 19,
  'date-input': 21,
  'drop-down': 19,
  email: 22,
  'file-input': 20,
  'form-fragment': 15,
  'form-image': 7,
  'multiline-input': 23,
  'number-input': 22,
  panel: 17,
  'radio-group': 20,
  'form-reset-button': 7,
  'form-submit-button': 7,
  'telephone-input': 20,
  'text-input': 23,
  accordion: 14,
  modal: 11,
  rating: 18,
  password: 20,
  tnc: 12,
}],
'xwalk/no-orphan-collapsible-fields': 'off', // Disable until enhancement is done for Forms properties

Abra o terminal e execute os comandos abaixo:

npm i
npm run build:json

Confirme e envie essas alterações para o repositório de projetos do AEM no GitHub.