DirrochaCMS é um Sistema de Gerenciamento de Conteúdo (CMS) leve e eficiente, projetado para simplificar a criação de endpoints de API e o gerenciamento de dados para sites e diversas aplicações. Construído pensando em desenvolvedores e equipes, o DirrochaCMS oferece uma solução rápida, personalizável e amigável para gerenciar o conteúdo de seus projetos web. Nosso objetivo é fornecer uma ferramenta intuitiva que torne o gerenciamento de conteúdo direto e descomplicado, economizando seu tempo e recursos.
Antes de mergulhar nas funcionalidades do DirrochaCMS, siga estas instruções para configurar o projeto localmente:
-
Clone o projeto com
degit
:npx degit marco0antonio0/DirrochaCMS meu-projeto cd meu-projeto
- Este comando copia o projeto para uma nova pasta chamada
meu-projeto
. Você pode substituirmeu-projeto
pelo nome que preferir. - Certifique-se de ter o Node.js instalado na sua maquina.
- Este comando copia o projeto para uma nova pasta chamada
-
Instale as dependências:
npm install # ou yarn install
- Este comando instala todas as bibliotecas e pacotes necessários para o funcionamento do DirrochaCMS.
-
Configure as Variáveis de Ambiente:
-
Crie o arquivo
.env
: Copie o arquivo.env.example
para.env
.cp .env.example .env
-
Acesse o Firebase: No Console do Firebase, crie um novo projeto ou acesse um projeto existente.
-
Credenciais: Obtenha as credenciais do seu projeto Firebase (chave de API, ID do projeto, domínio de autenticação, etc.) em:
- Vá para as configurações do projeto e na aba Geral você encontra as credenciais e na aba Contas de serviço você pode gerar uma nova chave.
-
Preencha o arquivo
.env
: Substitua os valores de exemplo pelas suas credenciais do Firebase no arquivo.env
:NEXT_PUBLIC_FIREBASE_API_KEY=SUA_CHAVE_DE_API_DO_FIREBASE NEXT_PUBLIC_FIREBASE_APP_ID=SEU_ID_DE_APP_DO_FIREBASE NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=SEU_DOMÍNIO_DE_AUTENTICAÇÃO_DO_FIREBASE NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=SEU_ID_DE_REMETENTE_DE_MENSAGENS_DO_FIREBASE NEXT_PUBLIC_FIREBASE_PROJECT_ID=SEU_ID_DE_PROJETO_DO_FIREBASE NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=SEU_BUCKET_DE_STORAGE_DO_FIREBASE NEXT_PUBLIC_ENV=SEU_AMBIENTE (ex: development) SECRET_KEY=SUA_CHAVE_SECRETA
-
-
Pronto! Agora você pode iniciar o projeto.
npm run dev
- Execute o comando para startar o ambiente de desenvolvimento do projeto
O DirrochaCMS oferece uma variedade de funcionalidades poderosas:
- Criação de Endpoints Personalizados: Defina e crie seus próprios endpoints de API para acessar e gerenciar seus dados.
- Gerenciamento Intuitivo de Dados: Use uma interface limpa e intuitiva para executar operações de Criar, Ler, Atualizar e Excluir (CRUD) em seus dados.
- Estruturas de Dados Flexíveis: Projete esquemas de dados personalizados com vários tipos de campos, como texto, números, booleanos e muito mais, para atender às necessidades do seu projeto.
- Leve e de Alto Desempenho: Construído com tecnologias de ponta para garantir alto desempenho e eficiência.
- Integração Descomplicada: Integre facilmente o DirrochaCMS com suas ferramentas e serviços existentes.
- Gerenciamento de Usuários: Crie e gerencie contas de usuário, controle o acesso e configure as definições diretamente dentro do CMS.
- Autenticação: Proteja seus endpoints com recursos de autenticação integrados, permitindo que você gerencie logins de usuário e proteja dados sensíveis.
- Configurações de Usuário: Defina se deseja usar usuários no sistema, permitindo que os usuários se registrem e façam login.
- Pesquisa: Pesquise por nome ou e-mail de forma rápida e simples.
- Endpoints Dinâmicos: Crie endpoints dinamicamente com os campos desejados, facilitando a personalização para suas necessidades.
- Interface Amigável: Interface fácil de usar e entender.
Exemplo Prático: Imagine construir um blog. Com o DirrochaCMS, você pode facilmente criar endpoints para posts, categorias, autores e comentários, gerenciando todo esse conteúdo por meio de uma interface amigável. Você também pode implementar recursos de gerenciamento de usuários e autenticação para uma experiência de blog mais robusta.
Utilizamos uma poderosa combinação de tecnologias:
- ✅ Firebase API: Serve como backend para persistência de dados e autenticação. Garante escalabilidade e facilidade de integração.
- ✅ Rotas de API Next.js: Permite a criação de endpoints de API, oferecendo alto desempenho e uma ótima experiência para o desenvolvedor.
- ✅ Next.js: O framework para construir a interface de usuário do aplicativo. Ele oferece renderização do lado do servidor e desempenho excepcional.
- ✅ Docker: Possibilita a conteinerização, garantindo portabilidade e consistência entre diferentes ambientes.
- ✅ Docker Compose: Simplifica a orquestração de múltiplos contêineres, agilizando o desenvolvimento e a implantação.
- ✅ React: Usado para construir a interface do usuário.
- ✅ Heroui: Uma biblioteca de UI para React, facilita o desenvolvimento.
- ✅ Lodash.debounce: Função para evitar execuções excessivas.
- ✅ React-hot-toast: Sistema de notificações.
Antes de começar, certifique-se de ter o seguinte instalado:
-
Node.js (v16+): O ambiente de execução JavaScript.
-
npm ou yarn: O gerenciador de pacotes para instalar as dependências do projeto.
-
Docker e Docker Compose: Para conteinerização e gerenciamento de serviços.
-
Clone o Repositório (Se já tiver feito usando npx degit, pule esse passo):
git clone https://github.com/marco0antonio0/DirrochaCMS cd DirrochaCMS
-
Instale as Dependências:
npm install # ou yarn install
-
Construa a Aplicação:
npm run build # ou yarn build
-
Inicie o ambiente de desenvolvimento:
npm run dev # ou yarn dev
-
Execute com Docker:
docker build -t dirrocha-cms . docker run -p 3000:3000 dirrocha-cms .
A aplicação estará acessível em
http://localhost:3000
.
-
Configure as Variáveis de Ambiente do Firebase:
- Crie um projeto no Console do Firebase.
- Obtenha as credenciais do seu projeto (chave de API, ID do projeto, etc.).
- Verifique se o arquivo
.env
foi criado e se ele contem todas as credenciais.
-
Implante:
- Simplesmente envie os arquivos do seu projeto para um repositório e conecte-o ao Netlify ou Vercel. Eles cuidarão do processo de implantação.
- Acesse a Aplicação: Abra seu navegador e vá para
http://0.0.0.0:3000
. - Navegação: Você será direcionado à página inicial, onde poderá visualizar os endpoints existentes ou gerenciar usuários.
- Abas: Na página inicial, você pode ver as abas "Endpoints" e "Usuários".
- Pesquisa: Na página inicial, você tem uma opção de pesquisa para encontrar seus endpoints ou usuários.
- Visualizar Endpoints: A página inicial lista todos os endpoints criados.
- Acessar Dados do Endpoint: Clique em um endpoint para visualizar e gerenciar seus dados.
- Criar Novos Endpoints: Clique em "Configurações" para ir à página de criação.
- Logout: Clique no ícone de logout para sair.
- Documentação: Clique no link azul para ir para documentação.
- Visualizar Usuários: A página inicial possui uma aba "Usuários" onde você pode ver todos os usuários registrados.
- Excluir Usuários: Na aba "Usuários", você pode excluir usuários.
- Acessar a Página: Clique em "Configurações" na página inicial para acessar a página de Criação de Endpoint.
- Criar Endpoints:
- Nome do Endpoint: Insira o nome desejado para seu novo endpoint.
- Selecionar Campos: Escolha os campos (tipos de dados) que deseja incluir no endpoint.
- Salvar: Clique em "Criar endpoint" para criar o novo endpoint.
- Configurações de Usuário:
- Acessar Configurações de Usuário: Clique na aba "Users" na página de Criação de Endpoint.
- Habilitar/Desabilitar Login: Alterne "Login de usuários" para habilitar ou desabilitar o login de usuários.
- Habilitar/Desabilitar Registro: Alterne "Registro de usuários" para habilitar ou desabilitar o registro de usuários.
- Habilitar/Desabilitar logout: Alterne "Logout de usuários" para habilitar ou desabilitar o logout de usuários.
- Salvar: Clique em "Salvar configuração" para salvar suas configurações de usuário.
- Validação: A página possui um sistema de validação para verificar se você preencheu todos os campos corretamente.
- Endpoint: Na aba "Endpoint" você pode criar o seu endpoint customizado.
- Acessar um Endpoint: Vá para a página inicial e clique em um endpoint existente.
- Adicionar Novos Dados: Clique no botão "Adicionar" para adicionar uma nova entrada de dados.
- Editar Dados: Clique em uma entrada de dados existente para editá-la.
- Excluir Dados: Ao editar uma entrada de dados, você encontrará uma opção para excluí-la.
Exemplos de Requisições de API:
Aqui estão alguns exemplos de como interagir com seus endpoints de API personalizados:
-
GET Todos os Posts:
curl -X GET http://0.0.0.0:3000/api/posts
Resposta Esperada:
[ { "id": "123", "title": "Primeiro Post", "content": "Conteúdo do primeiro post", "author": "John Doe" }, { "id": "456", "title": "Segundo Post", "content": "Conteúdo do segundo post", "author": "Jane Smith" } ]
-
POST Um Novo Post:
curl -X POST \ -H "Content-Type: application/json" \ -d '{ "title": "Novo Post do Blog", "content": "Este é o conteúdo do novo post do blog.", "author": "Seu Nome" }' \ http://0.0.0.0:3000/api/posts
Resposta Esperada:
{ "id": "789", "title": "Novo Post do Blog", "content": "Este é o conteúdo do novo post do blog.", "author": "Seu Nome" }
-
PUT (Atualizar) um Post Existente:
curl -X PUT \ -H "Content-Type: application/json" \ -d '{ "title": "Título Atualizado do Post do Blog", "content": "Este é o conteúdo atualizado." }' \ http://0.0.0.0:3000/api/posts/789
-
DELETE um Post:
curl -X DELETE http://0.0.0.0:3000/api/posts/789
Exemplos de Requisições de Autenticação
-
Login de Usuário:
curl -X POST \ -H "Content-Type: application/json" \ -d '{ "email":"teste@teste.com" , "password":"senha123" }' \ http://0.0.0.0:3000/api/user/login
Resposta Esperada:
{ "token": "..." }
-
Registrar Usuário:
curl -X POST \ -H "Content-Type: application/json" \ -d '{ "name":"teste", "email":"teste@teste.com" , "password":"senha123" }' \ http://0.0.0.0:3000/api/user/register
Resposta Esperada:
{ "token": "..." }
-
Logout de Usuário:
curl -X POST \ -H "Content-Type: application/json" \ -H "Authorization: Bearer eyJhbGciO..."\ http://0.0.0.0:3000/api/user/logout
Resposta Esperada:
{ "message": "Token invalidado com sucesso." }