Pular para o conteúdo principal

Introdução

Gerencie páginas de websites e telas de aplicativos móveis com conteúdo dinâmico.

🎯 O que este módulo faz?​

O módulo Pages permite que você crie, recupere e gerencie páginas (para websites) ou telas (para aplicativos móveis) com todo o seu conteúdo - texto, imagens, configurações de SEO e atributos personalizados.

Pense nisso como seu sistema de gerenciamento de conteúdo - em vez de codificar páginas, você as gerencia no OneEntry e as busca dinamicamente em seu aplicativo.

📖 Explicação Simples​

Imagine que você está construindo um website com estas páginas:

  • 🏠 Página inicial - página principal de aterrissagem
  • 📄 Sobre Nós - informações da empresa
  • 📞 Contato - página do formulário de contato
  • 📝 Postagens de Blog - várias páginas de artigos
  • ❓ FAQ - centro de ajuda

Em vez de criar cada página manualmente em seu código, você:

  • ✅ Cria páginas no painel de administração do OneEntry (com conteúdo, imagens, SEO)
  • ✅ Busca páginas dinamicamente usando este módulo
  • ✅ Atualiza o conteúdo sem precisar reimplantar seu aplicativo
  • ✅ Gerencia a estrutura da página, URLs e metadados em um só lugar

Exemplo do mundo real:

Sem o Módulo Pages (codificado):
- Editar página inicial → Mudar código → Testar → Implantar → Esperar ❌
- 10 páginas = 10 arquivos de código para gerenciar ❌
- Mudanças de SEO = mudanças de código ❌

Com o Módulo Pages (dinâmico):
- Editar página inicial → Atualizar no painel de administração do OneEntry → Ao vivo instantaneamente ✅
- 100 páginas = buscar dinamicamente da API ✅
- Mudanças de SEO = atualizar no painel de administração ✅

✨ Conceitos Chave​

O que é uma Página?​

Uma página é uma entidade de conteúdo que representa:

  • Web: Uma página no seu website (ex.: /about, /contact)
  • Móvel: Uma tela no seu aplicativo (ex.: Tela de Perfil, Tela de Configurações)

Cada página contém:

  • Conteúdo - Texto, imagens, vídeos
  • URL - Endereço da página (ex.: /about-us)
  • SEO - Título meta, descrição, palavras-chave
  • Atributos personalizados - Quaisquer campos adicionais que você definir
  • Status - Publicado, rascunho, arquivado
  • Localização - Suporte a múltiplas línguas

Tipos de Página​

O OneEntry suporta diferentes tipos de página:

TipoDescriçãoUso de Exemplo
Página NormalPágina estática padrãoSobre, Contato, Termos
Página de ErroPáginas de erro 404, 500Página Não Encontrada
Página do SistemaPáginas especiaisPolítica de Privacidade, Cookies
Página de ModeloEstrutura de página reutilizávelModelo de postagem de blog

Hierarquia de Páginas​

As páginas podem ser organizadas em uma estrutura de árvore:

📁 Empresa
  ├─ Sobre Nós
  ├─ Equipe
  └─ Carreiras

📁 Produtos
  ├─ Categoria de Produto 1
  │   ├─ Produto A
  │   └─ Produto B
  └─ Categoria de Produto 2

Por que isso é importante: Você pode buscar todas as páginas em uma seção ou construir menus de navegação automaticamente.

📋 O que você precisa saber​

Duas maneiras de identificar páginas​

MétodoQuando usarExemplo
Por URLO usuário visita uma página específica/about-us, /contact
Por IDReferências internas123, 456

Melhor prática: Use id no código (eles não mudam), use URLs para roteamento.

Estrutura da Página​

Cada página possui estes campos principais:

{
  "id": 9,                        // ID único
  "parentId": 8,                  // ID do pai
  "moduleFormConfigs": [],        // Configurações do módulo Forms
  "pageUrl": "blog1",             // URL da página
  "depth": 1,                     // profundidade
  "localizeInfos": {              // informações de localização
    "title": "Blog 1",            // título
    "menuTitle": "Blog 1",        // título do menu
    "htmlContent": "",
    "plainContent": "",
  },
  "isVisible": true,              // visibilidade
  "blocks": [],                   // blocos
  "type": "common_page",          // tipo de página
  "templateIdentifier": null,     // identificador do modelo
  "attributeSetIdentifier": null, // identificador do conjunto de atributos
  "attributeValues": {},          // valores dos atributos
  "isSync": false,                // sincronização
}

Localização (Múltiplas línguas)​

As páginas suportam múltiplas línguas

Mesma página, diferentes idiomas!

Atributos Personalizados​

Você pode adicionar quaisquer campos às páginas usando AttributesSets:

Exemplos:

  • Postagens de blog: autor, data de publicação, tags, imagem em destaque
  • Páginas de produtos: preço, SKU, galeria, especificações
  • Páginas de aterrissagem: imagem principal, botões de CTA, depoimentos

Saiba mais: Veja AttributesSets Module

📊 Tabela de Referência Rápida - Métodos Comuns​

MétodoO que fazQuando usar
getPages()Obtém todas as páginas (paginadas)Construir sitemap, listar todas as páginas
getRootPages()Obtém todas as páginas raiz (paginadas)
getChildPagesByParentUrl()Obtém todas as páginas filhas por ParentUrl (paginadas)
getBlocksByPageUrl()Obtém objetos PositionBlock para a página por URL.Blocos são usados para renderizar o conteúdo da página.
getConfigPageByUrl()Obtendo configurações para a página por URL.Páginas de configuração são usadas para armazenar configurações para a página.
getPageById()Obtendo uma única página.Páginas são usadas para renderizar a página.
getPageByUrl()Obtendo uma única página por URL.Páginas são usadas para renderizar a página.
searchPage()Pesquisa rápida por páginas com saída limitada.Pesquisar páginas por título, descrição, tags, etc.

❓ Perguntas Comuns (FAQ)​

Qual é a diferença entre URL e Marker?​

  • URL (pageUrl) - O endereço da web que os usuários veem (ex.: /about-us, /contact)

    • Usado para roteamento
    • Amigável para o usuário

  • Marker - Identificador técnico no código (ex.: homepage, contact_page)

    • Usado em referências de código
    • Técnico, não voltado para o usuário

💡 Notas Importantes​

URLs de Página e Roteamento​

Melhor prática para roteamento:

✅ Bom: Rota dinâmica catch-all Exemplo do Next.js: pages/[...slug].js

Cache para Desempenho​

Reduza chamadas de API com cache.

Visualização de Rascunhos​

Mostre páginas de rascunho apenas para administradores.

🎓 Melhores Práticas​

  • Cache páginas para reduzir chamadas de API
  • Lide com erros 404 de forma elegante
  • Filtre por statusId: 1 e isVisible: true para produção
  • Adicione estados de carregamento na UI
  • Implemente uma estratégia de cache de página

Mais informações sobre a interface do usuário do módulo https://doc.oneentry.cloud/docs/category/pages

Definição do módulo Pages​


const { Pages } = defineOneEntry(
  "sua-url-do-projeto", {
    "token": "seu-token-de-aplicativo"
  }
);

🔗 Documentação Relacionada​