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:
1 npx create-strapi-app my-project --quickstart
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:1 npm run develop
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:1 npx create-strapi-app my-project
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 de dados, selecione MongoDB , na CLI ele pode dizer mongo. Para o nome do banco de dados de dados, você pode escolher qualquer nome que faça sentido para você, I'll Go with stringi . Você ainda não precisa ter um banco de dados 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 banco de banco de dados MongoDB no Atlas, o host será exclusivo do seu cluster. Para encontrá-lo, vá para o painel do MongoDB Atlas , navegue até a guia Clusters e pressione o botão Conectar. Escolha qualquer uma das opções e sua string deconexão será exibida. Essa será a parte destacada na imagem abaixo.
Adicione sua string de conexão 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
srv conexão. 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 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:
1 Creating a new Strapi application at C:\Users\kukic\desktop\strapi\my-project. 2 3 ? Choose your installation type Custom (manual settings) 4 ? Choose your default database client mongo 5 ? Database name: strapi 6 ? Host: {YOUR-MONGODB-ATLAS-HOST} 7 ? +srv connection: true 8 ? Port (It will be ignored if you enable +srv): 27017 9 ? Username: ado 10 ? Password: ****** 11 ? Authentication database (Maybe "admin" or blank): 12 ? Enable SSL connection: (y/N) Y
Depois de passar o argumentoY para a pergunta final, o npx tratará do resto e criará seu aplicativo Stringi, desta vez usando o MongoDB para seu armazenamento de dados. Para garantir que tudo funcione corretamente, assim que a instalação for concluída, navegue até o diretório do projeto e execute:
1 npm run develop
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 Stringi para usar o MongoDB como nosso banco de dados de dados, vamos entrar no painel do Charti em
localhost:1337/admin e aprender a usar alguns dos recursos que este CMS headless oferece. Começaremos criando um novo tipo de conteúdo. Navegue até a seção Construtor de tipos de conteúdo do painel e clique no botãoCriar novo tipo de coleção.Um tipo de collection é, como o nome indica, um tipo de conteúdo para seu aplicação. Pode ser uma publicação no blog, uma promoção, uma dica rápida ou qualquer tipo de conteúdo que você precise para seu aplicação. Criaremos uma publicação no blog. A primeira coisa que precisaremos fazer é dar um nome a ela. Darei à coleção de postagens do blog o nome muito Criativo de Postagens.
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.
A postagem do meu blog terá um Título do tipo Texto, um elemento de conteúdo para o conteúdo da postagem do tipo Texto antigo e um Valor publicado do tipo Data para quando a postagem deve entrar no ar. Sinta-se à vontade para copiar meu layout ou criar o seu. Quando estiver satisfeito, pressione o botão Salvar e o servidor Stringi será reiniciado e você verá seu novo tipo de coleção na navegação principal.
Vamos em frente e criar algumas postagens para nosso blog. Agora que criamos algumas publicações, podemos visualizar o conteúdo no dashboard do Stringi, bem como na visualização das collections do MongoDB Atlas . Observe no MongoDB Atlas que uma nova coleção chamada postagens foi criada e que agora ela contém as postagens de 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 Tags e forneça a ele apenas um campo chamado name.
- Abra seu tipo de coleção de publicações existente e clique no botãoAdicionar outro campo .
- A partir daqui, selecione o tipo de campo de Relation.
- No lado esquerdo, você verá Postagens e, no lado direito, clique na seta suspensa, encontre sua nova coleção de tags e selecione-a.
- Por fim, selecione o último visual para que ele diz Post has many Tags e clique em Concluir .
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.Para fazer isso, vá para a seção Roles e permissões do dashboard do Stringi, selecione a funçãoPublic e você verá uma lista de permissões por recurso e tipode conteúdo. Por padrão, todos estão desativados. Para nossa demonstração, habilitaremos as permissõescount ,find efindOne para as collections dePostagens e Marcações.
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 plugin GraphQL. Navegue até a abaMarketplace no dashboard do Stringi e baixe o plugin GraphQL. O download e a instalação do plugin-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!