Use o MongoDB como o armazenamento de dados para seu CMS Strapi Headless
Avalie esse Tutorial
A web moderna está desenvolvendo rapidamente e uma das melhores novidades dos últimos anos é o surgimento de frameworks deCMS headless . Confio que os sistemas Headless CMS farão pelo conteúdo o que as APIs RESTful fizeram pelo SaaS. A ideia é simples: você desacoplar a criação e o gerenciamento de conteúdo da camada de apresentação. Em seguida, você expõe o conteúdo por meio de APIs RESTful ou GraphQL para ser consumido pelo front-end.
As estruturas headless CMS funcionam especialmente bem com geradores de sites estáticos que Tradicionalmente dependem de arquivos de marcação simples para gerenciamento de conteúdo. Isso funciona muito bem para um pequeno blog pessoal, por exemplo, mas rapidamente se torna uma confusão de gerenciamento quando você tem vários autores, muitos tipos diferentes de conteúdo e requisitos em constante mudança. Um sistema Headless CMS trata da organização e criação do conteúdo, oferecendo flexibilidade sobre como você deseja apresentar o conteúdo.
Hoje, vamos dar uma olhada em um Headless CMS de código aberto chamadoStri. Tirapi vem da palavra "bootstrap" e ajuda a inicializar sua API. Nesta publicação, vamos ver alguns dos recursos do Snapi e como ele pode nos ajudar a gerenciar nosso conteúdo, bem como como podemos combiná-lo com o MongoDB para ter uma plataforma de gerenciamento de conteúdo moderna.
Para este tutorial, você precisará de:
Você pode baixar o Node.js aquie ele vem com a versão mais recente do npm e npx. Para o MongoDB, use oMongoDB Atlas gratuitamente.
O Strapi é uma estrutura Headless CMS de código aberto. É essencialmente um painel de back-end ou de administração para criação de conteúdo. Ele permite que os desenvolvedores definam facilmente uma estrutura de conteúdo personalizada e a personalizem totalmente para seu caso de uso. A estrutura tem um sistema de plug-in realmente poderoso para facilitar a criação e o gerenciamento de conteúdo, independentemente do seu caso de uso.
Neste tutorial, configuraremos e configuraremos o Stringi. Faremos isso de duas maneiras. Primeiro, faremos uma instalação padrão para começar rapidamente e mostrar a funcionalidade do Strapi e, em seguida, também criaremos uma segunda instância que usa o MongoDB como banco de dados para armazenar nosso conteúdo.
Para começar a usar o Stringi, executaremos um comando em nosso terminal usando npx. Se você tiver uma versão recente do Node e o npm instalados, o npx também já estará instalado, então basta executar o seguinte comando em um diretório onde você deseja que seu aplicativo Tirapi permaneça:
Sinta-se livre para alterar o nome
my-project para uma opção mais adequada. O argumento--quickstart usará uma série de opções de configuração padrão para que você comece a usar o mais rápido possível.O comando npx levará algum tempo para ser executado e fazer o download de todos os pacotes necessários e, uma vez concluído, ele iniciará automaticamente o aplicativo Strapi. Se isso não acontecer, navegue até o diretório
my-projecte execute-o:Isso iniciará o servidor Strapi. Quando ele estiver em funcionamento, navegue até
localhost:1337 em seu navegador e você verá a seguinte tela de boas-vindas:
Preencha as informações com dados reais ou falsos e você será levado ao seu novo painel.
Se você vir o painel da foto acima, está tudo pronto! Quando passamos o argumento
--quickstartem nosso comando npx, o Strapi criou um banco de dados SQLite para usar e armazenar nossos dados. Você pode encontrar esse arquivo de banco de dados se navegar até o diretóriomy-projecte procurar no diretório.tmp.Sinta-se à vontade para mexer no painel de administração para se familiarizar com o Strapi. Em seguida, executaremos novamente nosso script de criação, mas, desta vez, não passaremos o argumento
--quickstart. Teremos que definir alguns itens de configuração diferentes, principalmente a configuração do nosso banco de dados. Quando estiver pronto, prossiga para a próxima seção.Antes de começarmos a trabalhar com o Strapi, executaremos novamente o script de instalação e alteraremos nosso provedor de banco de dados do SQLite padrão para o MongoDB. Há muitos motivos pelos quais você gostaria de usar o MongoDB em seu aplicativo Strapi, mas um dos mais convincentes para mim é que muitas máquinas virtuais são efêmeras; portanto, se você estiver instalando o Strapi em uma VM para testá-lo, toda vez que você reiniciar o aplicativo, esse banco de dados SQLite desaparecerá e você terá que começar de novo.
Agora então, Go em frente e interrompa a execução do nosso aplicativo Stringi e excluamos a pasta
my-project. Começaremos do zero. Depois de fazer isso, execute o seguinte comando:Após alguns segundos, você será solicitado a escolher um tipo de instalação. Você pode escolher entre Início rápido e Personalizado, e você deseja selecionar Personalizado. Em seguida, para seu cliente de banco de dados, selecione MongoDB, na MongoDB CLI ele pode dizer Mongo. Para o nome do banco de dados, você pode escolher qualquer nome que faça sentido para você, eu usaria stringi. Você ainda não precisa ter um banco de dados criado em sua instância do MongoDB Atlas, o Stringi fará isso por você.
Em seguida, você será solicitado a fornecer o URL do host. Se você estiver executando seu MongoDB database no Atlas, o host será exclusivo para seu cluster. Para encontrá-lo, Go para o painel do MongoDB Atlas, navegue até a guiaClusters e clique no botãoConectar. Escolha qualquer uma das opções e sua string de conexão será exibida. Será a parte destacada na imagem abaixo.
Adicione sua connection string e a próxima opção solicitada será +srv connection e, para isso, você dirá true. Depois disso, será solicitada uma porta, mas você pode ignorar isso, pois estamos usando uma conexão
srv. Por fim, você será solicitado a fornecer seu nome de usuário e senha para o cluster específico. Adicione-os e continue. Você será solicitado para um banco de dados de autenticação e você pode deixar em branco e apenas pressionar Enter para continuar. E, no final de tudo, você receberá sua pergunta final solicitando Habilitar conexão SSL e, para esta, passar para y ou true.Sua janela de terminal terá a seguinte aparência quando tudo estiver pronto:
Depois que você passar o argumentoY para a pergunta final, o npx cuidará do resto e criará seu aplicativo Strapi, desta vez usando o MongoDB como armazenamento de dados. Para garantir que tudo funcione corretamente, depois que a instalação for concluída, navegue até o diretório do projeto e execute:
Seu aplicativo será executado mais uma vez em
localhost:1337 e você será recebido com a familiar tela de boas-vindas.Para ver o esquema do banco de dados no MongoDB Atlas, navegue até seu painel, Go no cluster que você escolheu para instalar o banco de dados Strapi e visualize suas collection. Por padrão, será assim:
Agora que configuramos o Strapi para usar o MongoDB como nosso banco de dados, Go entrar no painel do Strapi em
localhost:1337/admin e aprender a usar alguns dos recursos que este Headless CMS oferece. Começaremos criando um novo tipo de conteúdo. Navegue até a seçãoContent-Types Builder do painel e clique no botãoCriar novo tipo de collection.Um tipo de collection é, como o nome indica, um tipo de conteúdo para seu aplicativo. Pode ser uma postagem de blog, uma promoção, uma dica rápida ou, na verdade, qualquer tipo de conteúdo de que você precise para seu aplicativo. Vamos criar um post de blog. A primeira coisa que precisamos fazer é dar um nome a ele. Darei à minha collection de posts de blog o nome muito criativo de Posts.
Depois de definir o nome, adicionaremos uma série de campos para nossa coleção. É aqui que o Strapi realmente se destaca. A instalação padrão fornece muitos tipos de dados diferentes para trabalhar, como texto para um título ou rich text para o corpo de uma postagem de blog, mas o Strapi também nos permite criar componentes personalizados e até mesmo personalizar esses tipos padrão para atender às nossas necessidades.
Minha postagem no blog terá um título do tipo Text, um elementoContent para o conteúdo da postagem do tipo Rich Text e um valorPublished do tipo Date para quando a postagem for publicada. Sinta-se à vontade para copiar meu layout ou criar o seu próprio. Quando estiver satisfeito, clique no botão Salvar e o servidor Strapi será reiniciado e você verá seu novo tipo de coleção na navegação principal.
Go criar algumas postagens para o nosso blog. Agora que criamos algumas postagens, podemos visualizar o conteúdo no painel do Strapi e também na visualização de collections do MongoDB Atlas. Observe no MongoDB Atlas que uma nova collection chamada posts foi criada e que ela agora contém os posts do blog que escrevemos.
Estamos apenas começando a descobrir o que está disponível com o Strapi. Deixe-me mostrar mais um recurso poderoso do Strapi.
- Crie um novo tipo de conteúdo, chame-o de tagse dê a ele apenas um campo chamado nome.
- Abra seu tipo de coleção de Postagens existente e clique no botãoAdicionar outro campo.
- A partir daqui, selecione o tipo de campo de Relation.
- No lado esquerdo, você verá Posts e, no lado direito, clique na seta suspensa, localize sua nova Tags collection e selecione-a.
- Por fim, selecione o último visual para que diga Post has many Tags e clique em Finish.
Observe que algumas das opções são 1 tradicionais :1, 1, relacionamentos M que você pode se lembrar do mundo tradicional do RDBMS. Observe que, embora estejamos usando o MongoDB, esses relacionamentos serão representados corretamente para que você não precise se preocupar com o modelo de dados subjacente.
Go em frente e crie algumas entradas em sua nova coleção de Tags e, em seguida, vá para uma postagem existente que você criou. Você verá a opção de adicionar
tags à sua publicação e terá um menu suspenso para escolher. Não será mais necessário adivinhar qual deve ser a tag... será NodeJS, ou Node.Js, ou talvez apenas Node?Até agora, criamos nosso aplicativo Strapi, criamos vários tipos de conteúdo e criamos algum conteúdo, mas como usamos esse conteúdo nos aplicativos que devem consumi-lo? Temos duas opções. Podemos expor os dados por meio de endpoints RESTful ou via GraphQL. Mostrarei a ambos.
Vamos primeiro dar uma olhada na abordagem RESTful. Quando criamos um novo tipo de conteúdo, o Strapi cria automaticamente um ponto de extremidade RESTFul para nós. Assim, poderíamos acessar nossas postagens em
localhost:1337/posts e nossas tags em localhost:1337/tags. Mas não tão rápido, se tentarmos navegar para qualquer um desses pontos de extremidade, seremos tratados com uma mensagem403 Forbidden. Não tornamos esses endpoints disponíveis publicamente.Go so, acesse a seção Roles & Permissions (Funções Permissões ) do painel do Strapi, selecione a funçãoPublic (Público ) e você verá uma lista de permissões por recurso e tipo de conteúdo. Por padrão, todas elas estão desativadas. Para nossa demonstração, vamos ativar as permissõescount, find e findOne para as coleçõesPosts e Tags.
Agora, se você navegar até
localhost:1337/posts ou localhost:1337:tags, verá seu conteúdo ser entregue no formato JSON.Para acessar nosso conteúdo via GraphQL, precisaremos habilitar o plug-in GraphQL. Navegue até a abaMarketplace no dashboard do Stringi e baixe o plugin GraphQL. O download e a instalação do plug-in levarão alguns minutos. Depois de instalado, você pode acessar todo o seu conteúdo navegando até
localhost:1337/graphql. Você precisará garantir que as funções e permissões das diferentes coleções estejam disponíveis, mas se você tiver feito o exemplo RESTful acima, elas estarão.
Obtemos tudo o que esperáveis com o plugin GraphQL. Podemos visualizar todo o nosso esquema e Docs, executar queries e mutações e tudo simplesmente funciona. Agora podemos consumir esses dados facilmente com qualquer front-end. Digamos que estejamos criando um aplicativo com Gatsby ou Next.js, podemos chamar nosso endpoint, obter todos os dados e gerar todas as páginas com antecedência, proporcionando o melhor desempenho da categoria, bem como o gerenciamento de conteúdo.
Neste tutorial, apresentei o Strapi, um dos melhores frameworks de CMS Headless de código aberto do mercado. Eu falei sobre como você pode usar o Strapi com o MongoDB para ter um armazenamento de dados permanente e abordei vários recursos da estrutura Strapi. Finalmente, mostrei como acessar seu conteúdo Strapi com APIs RESTful e GraphQL.
Se você quiser ver um artigo sobre como podemos consumir nosso conteúdo Strapi em um gerador estático de sites como Gatsby ou Hugo, ou como você pode estender o Strapi para seu caso de uso, me avise nos fóruns da MongoDB Communitye ficarei feliz em escreverum artigo!
Se você deseja armazenar com segurança seu conteúdo Strapi no MongoDB, inscreva-se gratuitamente no MongoDB Atlas.
Boa criação de conteúdo!