DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Introdução - Tutorial do desenvolvedor

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

Na era digital de hoje, criar formulários amigáveis é essencial para qualquer organização. O AEM Forms Edge Delivery Services (EDS) permite criar formulários usando ferramentas familiares como o Google Docs e o Microsoft Office.

Esses formulários enviam dados diretamente para um arquivo do Microsoft Excel ou do Google Sheets, permitindo que você use um ecossistema vibrante e APIs robustas do Google Sheets, do Microsoft Excel e do Microsoft SharePoint para processar facilmente os dados enviados ou iniciar um fluxo de trabalho de negócios existente.

O AEM Forms fornece um bloco, conhecido como Bloco adaptável do Forms, para ajudar você a criar formulários facilmente para capturar e armazenar dados capturados. Você pode criar um novo projeto AEM pré-configurado com o Bloco Forms Adaptável ou adicionar o Bloco Forms AEM Adaptável a um projeto existente.

Este tutorial do AEM Forms orienta você na criação, visualização e publicação de seu próprio formulário personalizado com um novo projeto do Adobe Experience Manager (AEM) Forms.

Pré-requisitos

  • Você tem uma conta GitHub e compreende as noções básicas sobre Git.
  • Você tem uma conta do Google ou do Microsoft SharePoint.
  • Você entende as noções básicas do HTML, CSS e JavaScript.
  • Você tem o Node/npm instalado para desenvolvimento local.

Atenção! Este tutorial usa macOS, Chrome e Visual Studio Code. Embora as etapas possam ser adaptadas para outras configurações, as capturas de tela e os elementos específicos da interface do usuário podem ser diferentes com base no sistema operacional, no navegador e no editor de código escolhidos.

Criar um novo projeto AEM pré-configurado com o Bloco Forms adaptável

O modelo AEM Forms Boilerplate permite iniciar rapidamente com um projeto AEM pré-configurado com o Bloco de Forms adaptável. É a maneira mais rápida e fácil de seguir as práticas recomendadas para AEM e começar a criar seus formulários.

Introdução ao modelo de repositório padronizado do AEM Forms

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

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

      Modelo do AEM 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.

      Criar novo repositório usando o Modelo do AEM Forms

    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.

    Definir o repositório como público

  2. Instale o aplicativo GitHub de sincronização de código 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 AEM, selecione a opção Selecionar apenas repositórios e selecione o repositório recém-criado. Clique em Salvar.

    Definir o repositório como público

    note note
    NOTE
    Se você estiver usando o GitHub Enterprise com filtragem de IP, é possível adicionar o seguinte IP à inclui na lista de permissões: 3.227.118.73

    Parabéns! Você tem um novo site em execução em https://<branch>--<repo>--<owner>.hlx.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á funcionando em https://main–wefinance–wkndforms.hlx.page/.

Vincular sua própria fonte de conteúdo

Seu repositório GitHub recém-criado aponta para exemplo de conteúdo armazenado em uma pasta da Unidade Google. Esse conteúdo somente leitura fornece um excelente ponto de partida para seus formulários. Sinta-se à vontade para copiá-lo em seu próprio Google Drive e personalizá-lo para atender às suas necessidades.

Conteúdo de exemplo na Unidade Google

Para copiar o conteúdo de amostra para sua própria pasta de conteúdo e apontar seu repositório GitHub para sua própria pasta de conteúdo:

  1. 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.

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

    Use a opção Gerenciar Acesso para compartilhar a pasta com o Usuário AEM - SharePoint

    Use a opção Gerenciar Acesso para compartilhar a pasta com o Usuário AEM - Unidade Google

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

    Compartilhar pasta com Usuário AEM, fornecer direitos de edição-SharePoint

    Compartilhar pasta com Usuário AEM, fornecer direitos de edição- Unidade Google

  3. Copie o conteúdo de exemplo armazenado na pasta da Unidade Google para sua pasta. Para copiar:

    1. Baixe os arquivos juntos ou baixe arquivos individuais.

      Baixar Conteúdo de Exemplo

      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 em projetos AEM.

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

      Conteúdo de exemplo na Unidade Google

      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.

  4. 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. Abra o fstab.yaml para edição.

    3. Substitua a referência existente pelo caminho para a pasta que você compartilhou com o usuário AEM (helix@adobe.com).

      Conteúdo de exemplo na Unidade Google

      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 atualizado depois de atualizar a referência e tudo ficará bem. Se você encontrar problemas de compilação, consulte Solução de problemas de compilação do GitHub.

      Confirmar arquivo fsatab.yaml atualizado

      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.

Pré-visualizar e publicar seu conteúdo

Após concluir a última etapa, a nova fonte de conteúdo não ficará vazia, mas não estará visível no site até que seja promovida para a pré-visualização ou estágios ao vivo. No momento, isso pode causar erros 404.

Para visualizar conteúdo não publicado:

  1. Instale a extensão do Chrome chamada AEM Sidekick.

    Instalar AEM Sidekick

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

    AEM Sidekick de pinos

  2. 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.

    AEM Sidekick - Adicionar um projeto

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

  3. 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.

    Selecionar todos os arquivos

  4. Clique no ícone de 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:

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.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>.hlx.page/enquiry.

    Por exemplo, se o repositório do seu projeto for chamado de "wefinance", estiver localizado sob o proprietário da conta "wkndforms" e você estiver usando a ramificação "main", o URL será:

    https://main–wefinance–wkndforms.hlx.page.

Criar um formulário

O conteúdo de amostra inclui uma folha de "consulta" que serve como modelo para o formulário "consulta". Cada linha da planilha representa um campo de formulário, e os cabeçalhos de coluna definem as propriedades do campo. Este formulário de amostra oferece uma vantagem inicial na criação do formulário.

Formulário de consulta

Vamos começar com a atualização de um rótulo de campo. Abra a folha 'consulta' para edição, altere o rótulo do botão enviar para Let's Chat e use o AEM Sidekick para visualizar e publicar o arquivo.

Formulário de consulta

Ao visualizar ou publicar o arquivo, uma versão JSON do arquivo é exibida em uma nova guia. Copie o URL de visualização (.hlx.page) ou publicação (.hlx.live) do arquivo.

JSON da planilha de formulário

Abra o arquivo enquiry e substitua a URL no bloco de formulário pela URL do arquivo copiado na etapa anterior. Certifique-se de que o URL seja um hiperlink.

Arquivo de consulta com a URL .json da URL da planilha

Use o AEM Sidekick para visualizar e publicar o documento de consulta.

Arquivo de consulta com a URL .json da URL da planilha

Para visualizar o formulário de consulta atualizado, vá para o seguinte URL:

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

O rótulo do botão de envio é atualizado para Let's Chat.

Formulário de consulta

Para obter informações detalhadas sobre como criar e publicar um novo formulário, vá para o guia criar um formulário.

Começar a desenvolver estilo e funcionalidade

Para começar a usar rapidamente um ambiente de desenvolvimento local de AEM:

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

    code language-bash 
        npm install -g @adobe/aem-cli

  2. Clonar o projeto do GitHub: clone o repositório de projetos do GitHub usando o comando a seguir, substituindo <owner> com o proprietário do repositório e <repo> com o nome do repositório:

    code language-none 
    git clone https://github.com/<owner>/<repo>

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

    code language-none 
    cd <repo>
aem up

A pasta Bloco de Forms Adaptável blocks/form é o seu playground para estilo e código de seus formulários! Edite quaisquer arquivos .css ou .js neste diretório e você verá as alterações refletidas instantaneamente em seu navegador.

Pronto para apresentar sua criação? Use o Git para confirmar e enviar suas alterações. Isso atualiza seus ambientes de visualização e produção acessíveis nesses URLs (substitua espaços reservados pelos detalhes do projeto):

Visualização: https://<branch>--<repo>--<owner>.hlx.page/
Produção: https://<branch>--<repo>--<owner>.hlx.live/

Parabéns! Você configurou seu ambiente de desenvolvimento local com êxito e implantou suas alterações.

Adicionar bloco adaptável do Forms ao projeto AEM existente

https://video.tv.adobe.com/v/3427789

Se você tiver um projeto AEM existente, é possível integrar o Bloco de Forms adaptável ao seu projeto atual para começar a criar formulários.

NOTE
Esta etapa se aplica aos projetos compilados com a Estrutura AEM. Se você criou seu projeto AEM usando o Modelo do AEM Forms, ignore esta etapa.

Para Integrar O:

  1. Clonar o repositório de Blocos do Adaptive Forms: https://github.com/adobe-rnd/aem-boilerplate-forms no computador.

  2. Dentro da pasta baixada, localize a pasta blocks/form. Copiar esta pasta. Agora, navegue até a pasta local blocks do projeto AEM e cole a pasta do formulário copiado aqui.

  3. Confirme e envie essas alterações para seu projeto AEM no GitHub.

Pronto! O bloco adaptável do Forms agora faz parte do projeto AEM. Você pode começar a criar e adicionar formulários às páginas AEM.

Solução de problemas de build do GitHub

Verifique se o processo de criação do GitHub está descomplicado, solucionando possíveis problemas:

  • Resolver Erro de Caminho do Módulo:
    Se você encontrar o erro "Não é possível resolver o caminho para o módulo "'…/…/scripts/lib-franklin.js'", navegue até o arquivo [EDS Project]/blocks/forms/form.js. Atualize a instrução de importação substituindo o arquivo lib-franklin.js pelo arquivo aem.js.

  • Manipular Erros de Linting:
    Caso encontre erros de impressão, você pode ignorá-los. Abra o arquivo [Projeto EDS]/package.json e modifique o script "lint" de "lint": "npm run lint:js && npm run lint:css" para "lint": "echo 'skipping linting for now'". Salve o arquivo e confirme as alterações no projeto GitHub.

Consulte também:

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab