Primeiro tutorial sobre AEM Headless
Bem-vindo ao tutorial sobre como criar uma experiência da Web usando o React, totalmente equipado com APIs AEM Headless e o GraphQL. Neste tutorial, guiaremos você pelo processo de criação de uma aplicação Web dinâmica e interativa combinando o poder das APIs headless do React, do Adobe Experience Manager (AEM) e do GraphQL.
O React é uma biblioteca popular do JavaScript para criação de interfaces de usuário, conhecida por sua simplicidade, reutilização e arquitetura baseada em componentes. O AEM fornece recursos robustos de gerenciamento de conteúdo e expõe APIs headless que permitem aos desenvolvedores acessar conteúdo e dados armazenados no AEM por meio de uma variedade de canais e aplicativos.
Ao utilizar APIs AEM Headless, você pode recuperar conteúdo, ativos e dados da instância do AEM e usá-los para potencializar o aplicativo React. O GraphQL, uma linguagem de consulta flexível para APIs, fornece uma maneira eficiente e precisa de solicitar dados específicos da sua instância do AEM, permitindo uma integração perfeita entre o React e o AEM.
Neste tutorial, guiaremos você pelo processo passo a passo de criação de uma experiência da Web usando as APIs do React e do AEM Headless com o GraphQL. Você aprenderá a configurar seu ambiente de desenvolvimento, estabelecer uma conexão entre o React e o AEM, recuperar conteúdo usando consultas do GraphQL e renderizá-lo dinamicamente em seu aplicativo web.
Abordaremos tópicos como configurar seu projeto no React, estabelecer autenticação com AEM, consultar conteúdo do AEM usando o GraphQL, manipular dados em seus componentes do React e otimizar o desempenho usando armazenamento em cache e paginação.
Ao final deste tutorial, você terá uma sólida compreensão de como aproveitar as APIs do React, do AEM Headless e do GraphQL para criar uma experiência da Web poderosa e envolvente. Então, vamos nos aprofundar e começar a criar seu próximo aplicativo web!
Pré-requisitos
Habilidades
- Proficiência no React
- Proficiência no GraphQL
- Conhecimento básico do AEM as a Cloud Service
AEM as a Cloud Service
Este tutorial requer acesso de administrador a um ambiente do AEM as a Cloud Service.
Software
- Node.js v16+
- Verifique a versão do nó executando
node -v
na linha de comando
- Verifique a versão do nó executando
- npm 6+
- Verifique sua versão do npm executando
npm -v
na linha de comando
- Verifique sua versão do npm executando
- Git
- Verifique sua versão do Git executando
git -v
na linha de comando
- Verifique sua versão do Git executando
Use o gerenciador de versão de nó (nvm) para endereçar ter várias versões do node.js na mesma máquina.
Verifique se você tem privilégios para instalar o software globalmente no computador.
Próxima etapa
Agora que seu ambiente está configurado, vamos seguir para a próxima etapa: Configurar e criar conteúdo no AEM as a Cloud Service