Como construir seu primeiro projeto WordPress headless com ACF + WPGraphQL

Todo mundo tem suas ferramentas favoritas quando se trata de desenvolvimento WordPress, e a ideia de construir um site headless sem essas ferramentas pode ser assustadora. Felizmente, duas ferramentas favoritas dos desenvolvedores do WordPress - ACF e WPGraphQL - podem ajudá-lo a mergulhar no desenvolvimento sem cabeça.

Nesta sessão, o advogado do desenvolvedor sênior do WP Engine, Jeff Everhart, mostra os meandros da infraestrutura criando um site de demonstração em apenas alguns minutos usando o Atlas!

Diapositivos da Sessão:

Transcrição:

JEFF EVERHART: E aí, pessoal? Meu nome é Jeff Everhart, um desenvolvedor sênior aqui na WP Engine. Muito obrigado por participar da minha palestra hoje sobre a construção de seu primeiro projeto WordPress headless com ACF e WP GraphQL. Antes de começar a construir, sempre gosto de dar algum contexto sobre o que é o WordPress sem cabeça. Parece que sem cabeça está se tornando menos um termo de nicho e mais popular, então tentarei manter a explicação curta.

O Headless WordPress, em sua essência, é sobre o uso do WordPress CMS por meio de uma API para alimentar algum outro tipo de aplicativo. Se observarmos o diagrama neste slide, quando um usuário solicita site.com/page, em vez de o WordPress lidar com essa solicitação, um aplicativo JavaScript responde a essa rota. Ele examina o caminho, determina quais dados precisa do WordPress ou de outras fontes, faz essas chamadas de API e gera uma resposta para o usuário.

É importante observar que o que está nesse slot de tempo de execução do Node.js pode realmente ser qualquer número de diferentes tipos de aplicativos ou clientes. Vimos vários exemplos de aplicativos móveis ou sites criados com todas as estruturas mais populares que usam esse padrão com grande sucesso. Agora que você tem uma boa ideia do que é o WordPress headless, vamos percorrer a pilha de tecnologia que usaremos no projeto de hoje.

Em nossa camada mais posterior, usaremos o WP GraphQL como nossa API. O WP GraphQL transforma seu back-end do WordPress em uma poderosa API GraphQL. Ele aplica todas as mesmas funções e verificações de segurança de recursos que o WordPress nativo e a API REST principal fazem. O WP GraphQL é uma ótima opção para desenvolver aplicativos headless porque, usando sua linguagem de consulta declarativa, podemos consultar diferentes tipos de conteúdo em todo o ofício de conteúdo. Assim obtendo posts, páginas com suas categorias tudo na mesma requisição.

Agora, vamos ver como podemos estruturar e modelar alguns dados mais complexos usando o WordPress CMS. Muitos desenvolvedores que abordam projetos headless precisam modelar e armazenar dados diferentes, certo? Estende-se além das postagens ou páginas típicas do WordPress. ACF ou campos personalizados avançados é uma ótima ferramenta para modelar esses campos personalizados. Em uma versão futura, ele se tornará ainda mais poderoso, permitindo que você registre tipos de postagem e taxonomias diretamente na interface do usuário na versão gratuita deste plug-in.

Ele disponibiliza todos os dados pela API REST facilmente, mas precisará instalar uma extensão WP GraphQL para adicionar alguns desses dados de campo ao nosso esquema GraphQL. Pessoalmente, estou muito animado para ver este plug-in evoluir à medida que se torna mais poderoso para desenvolvedores headless.

Agora que podemos modelar dados complexos e consultá-los por meio do WP GraphQL, precisamos de alguma maneira de criar essas experiências modernas da Web para nossos usuários, além de oferecer suporte aos editores de conteúdo que já conhecem e amam o WordPress. É aí que entra o Faust. Faust é uma estrutura de duas partes que consiste em um plug-in WordPress e uma estrutura JavaScript baseada em Next.js. Eles trabalham juntos para tornar a construção de sites WordPress headless fácil e intuitiva.

Ele adiciona suporte para coisas como visualizações de postagem e autenticação pronta para uso, e você pode se apoiar em uma experiência de hierarquia de modelo WP reimaginada em JavaScript moderno. O Faust.js pretende ser uma plataforma muito extensível e vem com um sistema de plug-in e uma barra de administração que você pode usar para personalizar e criar experiências que dão suporte ao seu caso de uso específico.

Por último, mas não menos importante, precisaremos de algumas maneiras de trabalhar com essas ferramentas localmente e em produção. Usando migração local e WP, reuni todos os recursos do WordPress necessários para este projeto em um único arquivo zip que você pode arrastar e soltar no local para começar. Assim que terminarmos de construir nosso site, podemos enviar nosso trabalho para a plataforma Atlas. A solução completa de hospedagem sem cabeça do Atlas WP Engine combina seu back-end do WordPress e um contêiner Node.js, todos ajustados para trabalhar juntos, disponíveis por meio de um painel integrado.

Então, agora que você tem um bom entendimento de todas as ferramentas que usaremos na apresentação de hoje, vamos pular direto e começar a construir. Abra a URL neste slide para acessar o código de demonstração no navegador. Tentei tornar essa experiência o mais fácil possível de acompanhar, mas cobriremos muito terreno nos próximos 25 minutos, então fique à vontade para assistir agora e consultar este repositório do GitHub e o gravação desta sessão mais tarde para continuar trabalhando após a conferência. Se o resto da decodificação é um show de carros, então esta sessão é sobre a construção de motores. Trocadilho totalmente intencional.

Agora que temos o repositório GitHub aberto, vamos começar. A primeira coisa que recomendo que você faça é criar um fork deste repositório em sua própria conta. Se você examinar o que está contido neste repositório, verá vários exemplos de código, bem como algumas instruções passo a passo no leia-me para tudo o que faremos nesta apresentação. Na verdade, faremos muitas cópias e colagens diretamente deste repositório em seu projeto. Para clonar isso localmente, vamos executar o comando Git clone dentro do seu terminal.

Isso levará apenas um segundo para baixar e, depois de baixar o projeto, vamos em frente e mudar nosso diretório para o diretório do projeto. A partir daí, executarei um comando para abrir este projeto no VS Code, mas fique à vontade para usar o editor de código que desejar. Como o VS Code já possui um terminal integrado, posso limpar isso e, em seguida, fechar o iTerm. E agora, podemos fazer a transição para colocar nosso site local WordPress. Para fazer isso, vamos abrir este projeto no Finder e, em seguida, localizar o arquivo zip de demonstração do WP sem cabeça que preparei para você.

Arrastaremos e soltaremos esse arquivo zip diretamente no ambiente de desenvolvimento local, e o local iniciará o processo de descompactação e inicialização de seu site WordPress de demonstração para você. Podemos ficar com os padrões e, em seguida, o local levará apenas alguns minutos para criar um novo site WordPress. Agora, esse é um ótimo recurso do WP Migrate Pro que me permite exportar qualquer site como um zip e arrastar e soltar diretamente no local para que eu possa levar um site de produção para minha máquina local muito rapidamente, independentemente da plataforma.

Assim que terminar a instalação, você pode querer ir em frente e confiar neste certificado SSL, e então iremos em frente e abriremos este projeto no WP Admin. A partir daí, iremos em frente e apenas minimizamos o local, pois ele já está em execução e não precisamos fazer mais nada com ele. A partir daí, abriremos nosso repositório, onde você encontrará um nome de usuário e uma senha de administrador que já criei para este site de demonstração. Você deve ser capaz de usar essas credenciais para prosseguir e fazer login no painel WP Admin. A partir daí, levaremos apenas um segundo para nos situarmos com esta instalação local do WordPress.

A primeira coisa que faremos é dar uma olhada nos plugins que estão instalados com este site WordPress. Vemos coisas como campos personalizados avançados para modelagem de dados. Temos faltas para habilitar alguns de nossos recursos headless, WP GraphQL para atuar como uma API para nosso site e, em seguida, WP GraphQL para extensão ACF para exibir alguns dos grupos de campos ACF. Agora, vamos dar uma olhada nas postagens também. Se você observar todas as diferentes postagens de demonstração que preenchi previamente dentro deste projeto, podemos ver que temos várias postagens diferentes com várias categorias diferentes.

Se dermos uma olhada no conteúdo de cada postagem, veremos que temos um monte de conteúdo de corpo, algumas imagens, imagens em destaque e alguns grupos de campos ACF que já criamos e pré-preenchemos. Então, vamos dar uma olhada nos grupos de campos com mais detalhes. Se abrirmos o menu ACF, você verá que temos dois grupos de campos criados – recursos alimentares e mixtape doce. Vamos dar uma olhada nos recursos alimentares primeiro.

Este é apenas um grupo de campos realmente básico com dois campos individuais – texto e URL. Para cada uma dessas coisas, tenho a opção Mostrar no GraphQL marcada para que apareçam no GraphQL. Em seguida, também verifiquei essa opção no nível do grupo de campos. Além disso, tenho alguma lógica condicional para determinar quando renderizar essas postagens - portanto, se a categoria da postagem for igual a comida. E vamos conferir como é a doce mixtape.

Veremos que isso se parece bastante com nossos recursos alimentares e que temos alguns campos diferentes. Cada um tem a opção Mostrar no GraphQL marcada, além de ter isso marcado no nível do grupo de campos. Podemos ver que existem algumas configurações diferentes que a extensão WP GraphQL nos fornece e que talvez não precisemos. Além disso, podemos ver que estamos exibindo isso condicionalmente com base na categoria de postagem também.

Agora, vamos dar uma olhada no WP GraphQL e o que ele nos oferece em termos de ferramentas. Se abrirmos o menu GraphQL, entraremos no IDE gráfico. Agora, este é um ambiente de desenvolvimento interativo que permite criar consultas usando o WP GraphQL. Podemos especificar que queremos, digamos, as 10 primeiras postagens com categorias e incluir nossos campos ACF adicionais aqui também. Quando clicamos no botão Executar, recebemos dados ativos de nosso site WordPress que correspondem aos dados dessa consulta.

Se quisermos, podemos abrir a janela Query Composer e compor visualmente aspectos de nossa consulta. Portanto, esta é uma ferramenta realmente útil se você não tiver certeza de quais campos ou dados específicos podem estar em um determinado objeto do WordPress. Você pode usar o Query Composer para explorar e executar essas consultas em tempo real. Agora, vamos configurar o Faust abrindo o menu de configurações do Faust. Como eu disse na palestra de introdução, Faust é realmente uma estrutura de duas partes que consiste em um plug-in do WordPress e sua base de código front-end.

Portanto, se voltarmos ao menu de configurações do plug-in do WordPress, veremos que definimos essa opção para o URL do site front-end, que apontará para o endereço do nosso site front-end. Logo abaixo, na opção de chave secreta, vamos prosseguir e clicar em regenerar para gerar uma chave exclusiva que você pode usar para seu projeto de demonstração. A partir daí, vamos voltar para a base de código JavaScript e vamos executar este comando para copiar um arquivo de amostra de variável de ambiente em um que possamos usar com nosso site.

Depois de executá-lo, abra o arquivo .env.localfile e faremos algumas alterações. A primeira coisa é que substituirá a próxima opção de URL pública do WordPress pela localização do seu site local. Portanto, ACF.WPEngine.local. E também pegaremos o valor da chave secreta e o usaremos para nossa chave secreta Faust. Certifique-se de descomentar isso também e, em seguida, a última variável de ambiente é realmente útil apenas para teste e desenvolvimento local, para que você possa suavizar quaisquer problemas de SSL que possa ter ao se conectar ao ambiente de desenvolvimento local.

A partir daí, vamos querer executar o NPM Install para instalar todas as dependências do nosso projeto e, uma vez feito isso, podemos dar o pontapé inicial e executar o NPM Run Dev para iniciar nosso projeto. Isso levará apenas um segundo para compilar, mas assim que o fizer, podemos abrir localhost:3000 no navegador e veremos nosso site Faust em ação.

Uma vez renderizado, você pode ver que Faust já está lidando com alguma mágica para nós. Se olharmos para esse menu no canto superior direito, podemos ver que ele já está puxando páginas e conteúdo de nossos menus que definimos em nosso back-end do WordPress e, se voltarmos ao nosso administrador do WordPress, podemos ver como essa conexão funciona com um pouco mais de detalhes.

Como o plug-in Faust conhece o endereço do nosso URL de front-end, ele reescreve muitos links, como os links de visualização, para que, quando você os abrir no navegador, eles abram no URL do site de front-end, para que você Estamos obtendo uma visualização real ao vivo de como seu conteúdo ficará no front-end.

Agora, vamos mergulhar mais fundo na estrutura do nosso projeto Faust JavaScript. Se você estiver familiarizado com o trabalho em Next.js, provavelmente já usou o diretório da página para criar componentes de página que implementam suas rotas. Você ainda pode fazer isso no Faust, mas ele se baseia nesse conceito, fornecendo uma rota abrangente chamada WordPress node, que permite que você pegue qualquer URI que o WordPress gerencie e resolva isso para um conteúdo específico.

Em seguida, obtemos alguns dados adicionais sobre esse item de conteúdo e os passamos por nossos componentes para que possamos resolver essa parte do conteúdo individual para um modelo específico na pasta de modelos do WP. Isso é muito semelhante ao conceito de hierarquia de modelos e aos temas tradicionais do WordPress, além de muitas convenções de nomenclatura. Por exemplo, frontpage.js é a página inicial do nosso site, enquanto page.js é responsável por renderizar coisas do tipo de conteúdo da página. E o single.js está lá para renderizar postagens únicas.

Agora, vamos começar e tornar nosso frontpage.js um pouco mais dinâmico. OK . Então, para começar, vamos abrir nosso arquivo page.js e nos dar um pouco mais de espaço para trabalhar. Então, se olharmos para o conteúdo deste arquivo, podemos ver que existem três partes principais. Há o próprio componente que renderizamos, uma propriedade de consulta que é anexada ao componente e é executada toda vez que renderizamos o componente e, em seguida, algumas variáveis ​​que podemos passar na parte inferior.

E como você pode ver, existem duas maneiras principais de usar isso. Usando o gancho de consulta de uso dentro do componente, ou pode ser passado como props para o próprio componente, e você verá isso em um exemplo mais adiante. Então, vamos voltar ao repositório e começar com a etapa 2.1 para atualizar a consulta para nosso frontpage.js. Então, vamos copiar isso, voltar para o IDE gráfico e apenas brincar por um segundo. Portanto, esta consulta que temos em nossa área de transferência deve obter as 10 primeiras postagens e alguns dados associados a cada uma dessas postagens.

E então, se clicarmos lá e executá-lo, veremos que tudo funciona muito bem. E então vamos querer ir em frente e adicionar isso à nossa propriedade de consulta do componente. Então vamos encontrar um bom lugar para fazer isso e apenas colá-lo lá e reformatar um pouco. E o que isso faz é adicionar essa parte individual da consulta à própria consulta. Portanto, ainda precisamos disponibilizar os resultados dessa consulta para o restante do nosso componente, então vamos em frente e adicionar esta linha adicional que apenas extrai o resultado da postagem em uma variável com a qual podemos trabalhar.

Agora, a próxima etapa para tornar essa página inicial dinâmica é criar um componente para renderizar esses trechos de postagem. Então, vamos fazer isso e criar alguns arquivos na pasta de componentes, e mencionarei aqui que– vou em frente e criarei um postexcerpt.js dentro de uma pasta de trechos de postagem, e eu' Na verdade, estou apenas duplicando a estrutura dos componentes existentes que fazem parte deste projeto Faust.js Getting Started. Você é realmente livre para fazer o que quiser aqui, e estou apenas seguindo a estrutura que já foi apresentada para mim como parte deste Guia de introdução.

Assim que tivermos todos esses três arquivos, começaremos a adicionar algumas coisas a eles para renderizar essas postagens. Portanto, a primeira coisa que faremos é colocar algum conteúdo em nosso componente de trecho de postagem. E então vamos apenas copiar e colar isso de nosso repositório, e podemos ver que estamos importando esse arquivo module.css. E temos uma função chamada excerto do post que é o nosso componente que prova um prop que é o post, então estamos renderizando uma seção, tendo um link que vai direto para o URI do post, renderizando o título. Então, lá embaixo, temos blocos de categoria que também estamos renderizando e, em seguida, usando um conjunto perigoso em nosso HTML para definir o conteúdo HTML para o trecho da postagem.

Agora, quando tudo estiver ótimo e salvo, vamos salvar isso, mas também entraremos aqui e adicionaremos esse estilo de escopo adicional ao nosso componente para estilizar essas tags span para nossas categorias e, em seguida, apenas faça alguma importação e exportação dentro do arquivo index.js para levá-lo de uma exportação padrão para uma exportação nomeada e salvaremos todas essas coisas. E a última etapa para tornar isso disponível para uso em outras coisas é adicionar mais uma linha de exportação ao arquivo index.js da nossa pasta de componentes. E agora que fizemos isso, se voltarmos para a página inicial, frontpage.js, poderemos apenas adicionar uma importação adicional à nossa declaração de importação existente para usar nosso trecho de postagem.

Agora, vamos querer encontrar um lugar para implementar isso, e se descermos e olharmos dentro do nosso elemento principal, veremos que temos algumas coisas logo abaixo do herói - o que faremos é apenas copie e cole parte do código no repositório e sobrescreva o que está dentro desse main com o uso de nosso trecho de postagem. E vamos reformatar um pouco para suavizar algumas coisas, mas você pode ver que o que estamos fazendo está dentro desse contêiner, vamos mapear a matriz de postagens que recebemos como um resultado de nossa consulta e, em seguida, retornamos um componente de trecho de postagem onde passamos na postagem e damos uma chave.

E então, se prosseguirmos e salvarmos tudo isso, renderizarmos no navegador e atualizarmos, veremos que temos uma ótima página inicial dinâmica. Sim, cada um desses títulos tem um link clicável, assim como os blocos de categorias individuais. E se clicarmos, podemos ver que, com o benefício dos modelos que já existem no Faust, todo o nosso material de postagem já está sendo renderizado, embora estejamos perdendo alguns desses grupos de recursos que criamos usando o ACF. Portanto, se clicarmos em uma segunda postagem, podemos ver que uma renderiza muito bem, assim como todos os links de categoria pré-criados que são - estamos apenas usando esses URIs de categoria para nos apoiar no Faust ao renderizar esse modelo JS de categoria .

Ok, agora que temos uma página inicial dinâmica, vamos prosseguir para obter esses campos ACF para renderizar em nosso modelo single.js. Então vá em frente e apenas limpe nosso editor de código, e então podemos abrir o arquivo single.js e dar uma olhada no que está dentro dele. Sabemos que, nesse nível superior, temos essa função de componente que estamos exportando que, na verdade, usa props, e a propriedade component.query que tem uma consulta GraphQL dinâmica que está lendo algumas dessas variáveis ​​que recebemos de volta da consulta inicial.

E o que queremos fazer no final é exibir alguns desses diferentes recursos de postagem na parte inferior do conteúdo de nossa postagem. Então eu volto para o repositório e desço até a etapa 3.1, onde atualizamos a consulta de postagem única, e vamos dar uma olhada nela porque ela começa a puxar tanto a mixtape doce quanto os grupos de campos de recursos alimentares que criamos em o passo anterior. Se eu pegar essa consulta e copiá-la e colá-la no gráfico, irei em frente e codificarei um ID de banco de dados para uma postagem e removerei apenas algumas dessas coisas diferentes que não precisamos, como como visualização e aquele outro fragmento .

Se eu for em frente e executar isso, veremos que recebo de volta alguns dados que contêm realmente o que eu esperava. O conteúdo, eu recebo de volta o autor, e eu recebo de volta, importante, ambos os grupos de campos e seus dados. Então, vou copiar essa consulta e voltar para single.js. A partir daí, substituirei essa parte da consulta pelo que obtive da minha área de transferência. Podemos ir em frente e salvar isso. Você pode reformatá-lo se quiser, mas isso é agnóstico de espaço em branco, então acho que, na maioria das vezes, parece bom.

Então, a partir daí, vamos querer fazer a mesma coisa que fizemos na última etapa, onde incluímos isso em nossa consulta. Agora, queremos ter certeza de que disponibilizamos essas variáveis ​​dentro de nosso componente. Então, vamos adicioná-los a essa declaração de estruturação e, além disso, como temos algumas categorias diferentes para nossas postagens, queremos criar algumas coisas booleanas para nos ajudar a determinar se devemos ou não exibir recursos alimentares ou mixtape doce. Porque, como você pode ver, não importa o que estamos recebendo de volta, e se não houver nada para encontrar para os campos de mixtape, eles retornarão como nulos. Vou querer fazer algumas verificações condicionais aqui, então adicionarei essas duas linhas de código ao nosso arquivo.

E o que isso basicamente faz é criar algumas variáveis ​​booleanas que podemos usar abaixo para renderizar modelos condicionalmente. Nesta coisa, estamos olhando para os nós de cada categoria e, basicamente, filtrando-os para determinar se eles têm ou não comida ou música e, em seguida, verificando a duração. Provavelmente há muitas maneiras de implementar esse tipo de variável booleana, portanto, sinta-se à vontade para alterar isso se tiver uma maneira mais limpa de fazer isso, mas para nossos propósitos aqui, acho que funcionará bem.

Agora, a próxima etapa é que realmente queremos, como na etapa anterior, criar alguns componentes adicionais. Então, vou em frente e dentro do meu arquivo de componentes, vá em frente e crie um componente de recursos alimentares. Então, vou criar uma pasta e, em seguida, um arquivo food resources.js dentro dela e, junto com isso, vou criar um arquivo index.js, bem como um arquivo de módulos CSS. E agora esse arquivo de módulos SCSS é realmente útil porque nos permite definir o escopo de nossos estilos para esse componente específico. Parece uma sintaxe esquisita para fazer isso, mas no final é um resultado realmente limpo porque não precisamos escrever um monte de classes e outras coisas.

Vou começar a copiar e colar o código do componente do repositório diretamente nesses arquivos. Podemos ver que temos uma função de recursos alimentares que leva dois adereços nome da receita e link da receita, então estamos renderizando aqueles abaixo da nossa idade com o emoji burrito. Também copiaremos e colaremos alguns estilos de arquivo SCC nessa pasta específica e, em seguida, nos certificaremos de exportá-los das pastas de componentes index.js. E assim como no exemplo anterior, vamos querer ir em frente e exportar isso no index.js da nossa pasta de componentes também para que possamos ter um grupo muito bom para importar, como você viu diretamente naqueles componentes pasta em outro lugar em alguns desses arquivos diferentes.

Assim que tivermos adicionado isso, voltaremos nossa atenção para o componente de recursos musicais e faremos a mesma coisa. Vamos prosseguir e criar a mesma estrutura de arquivo. Portanto, a pasta de recursos de música e um arquivo musicresources.js dentro dela. Em seguida, criaremos um arquivo index.js para exportá-lo e também nosso arquivo musicresources.module.scss para esses estilos de escopo.

Assim que tivermos tudo isso, faremos a mesma coisa que fizemos com nossos recursos alimentares e apenas copiar e colar parte desse código do repositório. Podemos ver que este componente parece quase idêntico. Temos recursos musicais. Na verdade, ele tem três props em vez de dois, mas tínhamos três campos nesse grupo de campos, mas a convenção do styles.component é a mesma. E estamos apenas fazendo uma renderização ligeiramente diferente porque temos conteúdo diferente.

Então, a partir daí, também adicionaremos nosso código SCSS e nos certificaremos de exportá-lo das pastas de componentes index.js e também importá-lo para nossa pasta aqui, e acho que realmente fiz - vamos renomear rapidamente isso e apenas certifique-se de que todas as nossas nomenclaturas tenham uma boa aparência, para que nosso index.js e componentes encontrem nossos recursos musicais e tudo isso seja ótimo. Então, agora, vamos fechar todas essas guias estranhas porque estamos prontos para realmente implementar esses componentes em nosso arquivo single.js.

Então, para fazer isso, vamos apenas adicionar esses dois componentes à nossa declaração de importação existente, que já os reconhece automaticamente, e encontraremos um bom lugar para fazer isso. E então temos esse componente wrapper de conteúdo aqui. E agora, estamos transmitindo o conteúdo, mas isso também aceitará opcionalmente crianças. Assim, podemos passar o conteúdo, mas também passar alguns componentes filhos diretamente para esse wrapper de conteúdo, para que seja exibido naquele bom espaço horizontal que já temos e tudo esteja alinhado.

Então é isso que vamos fazer, e então vamos copiar e colar esse código lá, reformatá-lo e conversar sobre o que está acontecendo neste exemplo específico. Portanto, dentro desse componente wrapper de conteúdo, estamos usando as variáveis ​​booleanas is food e is music para renderizar condicionalmente os componentes de recursos correspondentes. Portanto, se comida for verdadeira e esta postagem estiver na categoria de comida, nós a renderizaremos. E se for música, faremos a mesma coisa. E aí, você pode ver que estamos passando em todos os diferentes adereços necessários para renderizar isso.

E se voltarmos e atualizarmos uma de nossas páginas de modelo single.js, podemos ver que nossos recursos alimentares estão sendo renderizados da maneira que esperávamos, e esse link funcionaria apropriadamente se voltássemos ao WP Admin ou à nossa página inicial página. E se encontrarmos um e a categoria de comida ou música, podemos abrir o Kinfolk Synth DIY e ver como é o nosso componente de recursos musicais, e tudo parece ótimo. E se encontrarmos um que realmente esteja em ambas as categorias, podemos ver que, na verdade, na parte inferior, renderiza esses dois componentes exatamente da maneira que esperamos.

OK. Então, agora que temos nosso site do jeito que queremos, vamos passar a falar sobre como implantar este site. Agora, criei uma seção do repositório GitHub para nós e, na verdade, criei uma ramificação implantada totalmente separada na ramificação final. Então, executando o Git check-out finalizado, nós o obteremos. E você também pode simplesmente implantar essa ramificação diretamente no Atlas, que é a solução de hospedagem WordPress headless do WP Engine.

Isso fornece a você uma instalação do WordPress e um contêiner Node.js, e você pode se inscrever para uma conta sandbox gratuita apenas clicando neste botão na página inicial do Atlas. Leve você a um fórum muito rápido e, como você pode ver, o preço é zero. Você ainda pode ter que colocar um cartão de crédito que usamos apenas para fins de prevenção de fraudes, mas você pode ter uma conta gratuita para brincar com tudo isso para testá-lo, para aprender sem cabeça para o desejo do seu coração. Então, vou abrir o painel do WP Engine para começar a implantar este site no Atlas.

A primeira coisa que vou fazer é abrir minha lista de sites e abrir meu site WordPress de produção. Então, na verdade, este site sem cabeçalho ACF que você vê aqui, onde abrirei o WP Admin em uma nova janela, é o site pai do arquivo zip que todos vocês estão usando localmente. Fiz um zip usando a exportação do WP e é isso que vou usar para minha implantação de produção.

A partir daí, clicarei na guia Atlas e clicarei em Criar aplicativo. E eu sou presenteado com esta opção. Vou escolher Pull From Repo e, em seguida, clicar em Continue. E se eu não me autentiquei com o GitHub, é aqui que você faria, mas como já estou, posso simplesmente ir em frente e selecionar meu repositório. Então, vamos em frente e selecionar o repositório que estamos usando para este projeto, clique em Continuar, então vou implantar meu aplicativo no US Central.

A partir daqui, ele permite que eu escolha um branch e, como eu disse, vou usar Finished. Também há opções se você estiver usando um monorepo, o que não estamos, e vou deixar I Have My WordPress Installation marcado e Search For My ACF Headless Site. Agora, aqui, vou querer, na verdade, em vez de usar um arquivo .env, vou querer copiar duas variáveis ​​de ambiente do meu projeto de arquivos.

Portanto, o primeiro é o próximo URL público do WordPress. Essas são as mesmas variáveis ​​de ambiente que definimos em nosso projeto local e copiarei o link para minha instalação de produção do WordPress lá. Em seguida, adicionarei outra variável de ambiente, e esta será para nossa chave secreta Faust. Então, vou copiá-lo do menu Faust Settings, colocá-lo lá e definir a chave para Faust Secret Key.

Feito isso, posso prosseguir e clicar em Criar aplicativo, e o Atlas iniciará o processo de criação e implantação do meu aplicativo. Durante o processo de compilação do Atlas, ele executará a instalação do NPM e seu comando de compilação do NPM para qualquer estrutura que você esteja usando. E, depois que todo esse código for criado, ele implantará esse contêiner Node para você em nossa rede. E assim que tudo isso girar por apenas um segundo, devemos receber uma mensagem de sucesso e, em seguida, podemos clicar no URL fornecido para nós e realmente ver nosso site ao vivo.

Assim, receberemos nossa mensagem de sucesso e, em seguida, podemos prosseguir e abrir esse URL em outra guia. E aí podemos ver que nosso site se parece exatamente com o local, e está extraindo todos os dados corretos, todas as imagens corretas e até mesmo absorvendo todo o nosso conteúdo ACF. Vários de nossos posts parecem realmente ótimos, e nosso desempenho no Atlas– Na verdade, estou usando algumas imagens muito grandes aqui, portanto, se você perceber alguma lentidão, certamente é devido às minhas escolhas.

A plataforma Atlas está repleta de recursos que os desenvolvedores JavaScript modernos apreciarão. Infelizmente, não há tempo suficiente nesta apresentação para analisar todos eles em detalhes.

Mas o Atlas faz um trabalho muito bom ao reunir detalhes importantes das partes de front-end e back-end de seu ecossistema headless em um painel conveniente, onde você pode ver logs de build individuais e a saída de build, examinar implantações, variáveis ​​de ambiente que você usou para uma compilação específica, bem como ter acesso a configurações ou recursos adicionais que você pode habilitar, como ambientes de visualização, onde você pode criar um ambiente adicional para cada PR criado em seu repositório GitHub ou criar webhooks de ambiente para reconstruir partes específicas de seu aplicativo ou CDN conforme você faz alterações no WordPress.

Todas essas coisas se tornam possíveis com a plataforma Atlas, e isso realmente diminui a barreira para começar a construir com o WordPress headless.

Uau. Parabéns, como eu disse, foi muito para cobrir em 25 minutos. Sinta-se à vontade para continuar praticando após a apresentação e entre em contato comigo se tiver alguma dúvida sobre como começar a usar os recursos de demonstração. Se você estiver interessado em aprender mais sobre headless, mas precisa de um espaço para fazê-lo, inscreva-se em uma conta gratuita do Atlas Sandbox. Além de implantar seus próprios repositórios de código, como fizemos hoje, você também pode começar com alguns de nossos esquemas pré-fabricados, que são pilhas de projeto de um clique que podem ajudá-lo a ver como um projeto headless se parece quando é concluído.

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.