Especificação para o Painel de Gerenciamento de Postagens do Instagram Visão Geral do Projeto Este documento delineia as especificações para um painel web-based para gerenciar postagens do Instagram. O painel permite que os usuários listem postagens obtidas da API Graph do Instagram (já armazenadas em um banco de dados PostgreSQL) e realizem atualizações via uma interface de modal. Ele funciona como uma ferramenta básica de CRUD (Create, Read, Update, Delete) focada em listar e atualizar campos específicos para postagens selecionadas.O painel será construído usando PHP para a lógica de backend (interações com o banco de dados, roteamento) e JavaScript para interatividade no frontend (ex.: manipulação de modais, entradas de formulário dinâmicas). A UI será limpa e moderna, com suporte para temas claro e escuro alternados via preferência do usuário (armazenada no localStorage ou cookies).Objetivos principais: Filtrar postagens por accountid passado como parâmetro de URL (ex.: /dashboard?accountid=123). Exibir postagens em uma grade ou lista responsiva. Permitir a seleção de uma postagem para abrir um modal para edição de campos como palavras-chave, mensagens e status. Garantir o manuseio seguro das conexões com o banco de dados e não expor dados sensíveis diretamente. Usuários-alvo: Gerentes de projetos ou administradores monitorando contas do Instagram para engajamento (ex.: respostas baseadas em palavras-chave em comentários).Requisitos Técnicos Linguagens e Frameworks Backend: PHP 8+ (para endpoints de API, consultas ao banco de dados e gerenciamento de sessões). Use PDO para interações com PostgreSQL para prevenir injeção de SQL. Frontend: JavaScript vanilla (ES6+) para funcionalidade principal. Opcionalmente, integre uma biblioteca leve como Alpine.js para elementos UI reativos se necessário para modais e formulários. Sem frameworks pesados como React para manter simples e rápido. Estilização: CSS3 com variáveis CSS para temas. Use uma fonte sans-serif moderna (ex.: Inter ou system-ui). Implemente design responsivo com media queries para mobile/desktop. Temas: Tema claro (padrão): Fundos brancos, texto escuro. Tema escuro: Fundos escuros (ex.: #1a1a1a), texto claro. Botão de alternância no cabeçalho; persista via localStorage. Dependências: Mínimas. Use Fetch API para chamadas AJAX. Sem bibliotecas JS externas a menos que especificado (ex.: para seletores de data se timestamps precisarem de edição). Banco de Dados Tipo: PostgreSQL. Detalhes de Conexão (para desenvolvimento; use variáveis de ambiente em produção): Host: pgvector Banco: directus Usuário: postgres Senha: 123456 Porta: Padrão (5432); especifique se diferente. Nota de Segurança: Em produção, armazene credenciais em um arquivo .env (ex.: via biblioteca Dotenv) e nunca as codifique diretamente. Use prepared statements para todas as consultas. Premissas de Implantação Hospedado em um servidor compatível com PHP (ex.: Apache/Nginx com PHP-FPM). Sensação de aplicação de página única via roteamento PHP e atualizações dinâmicas com JS. Sem autenticação além do parâmetro de URL por enquanto; adicione JWT ou sessões se expandir. Esquema do Banco de Dados O painel interage com duas tabelas: instagram (para mapeamento de contas) e Posts_Instagram (para dados de postagens).Tabela: instagram Armazena mapeamentos de contas-usuários e tokens. Nome da Coluna Tipo de Dado Descrição id integer Chave primária. account_id integer Chave estrangeira para filtro. user_id character varying ID do usuário do Instagram. token text Token de acesso (não editável no painel). Tabela: Posts_Instagram Armazena postagens obtidas do Instagram com campos editáveis para automação (ex.: respostas baseadas em palavras-chave). Nome da Coluna Tipo de Dado Descrição instauserid integer Chave estrangeira para instagram.user_id. palavra_Chave json Array de palavras-chave (ex.: ["eu quero", "Quero"]). Editável como lista dinâmica. created_at timestamp with time zone Timestamp de criação da postagem (gerenciado automaticamente). lastseenat timestamp with time zone Timestamp da última atividade (gerenciado automaticamente). deleted_at timestamp with time zone Timestamp de exclusão suave (não implementado ainda). data_post timestamp without time zone Data original da postagem. Ativo boolean Status ativo (true/false). Editável. id integer Chave primária. id_post character varying ID da postagem do Instagram. caption text Legenda da postagem (apenas para exibição). media_type character varying Tipo (ex.: "VIDEO", "IMAGE"). permanent_link character varying Link completo do Instagram. media_url text URL da mídia (para exibição/miniatura). msg_comment character varying Mensagem de resposta para comentário. Editável. msg_dm character varying Mensagem de resposta para DM. Editável. msg_btn character varying Resposta de botão (ex.: "Sim"). Editável. thumbnail_url text URL da miniatura (para tipos VIDEO). Dados de Exemplo (do exemplo fornecido):[ { "id": 60, "media_type": "VIDEO", "permanent_link": "https://www.instagram.com/reel/DXZRaUmN5Yt/", "palavra_Chave": null, "msg_comment": null, "msg_dm": null, "msg_btn": null, "created_at": null, "last_seen_at": "2026-05-02T22:22:00.482Z", "deleted_at": null, "data_post": "2026-04-21T13:10:55.000Z", "Ativo": null, "id_post": "17900987442422502", "caption": "Você também já deixou de fazer alguma coisa por conta das varizes?", "media_url": "https://scontent-lga3-2.cdninstagram.com/... (URL completa truncada por brevidade)", "thumbnail_url": "https://scontent-lga3-1.cdninstagram.com/... (URL completa truncada)", "insta_user_id": 1 } ] Campos Atualizados de Exemplo (via modal):{ "palavra_Chave": ["eu quero", "Eu Quero", "Quero", "pernas lindas"], "msg_comment": "Obrigado pelo seu comentario, veja na sua DM em caixa de entrada ou Solicitações!", "msg_dm": "Olá esta disponivel Agora?", "msg_btn": "Sim", "Ativo": true } Especificações Funcionais Acesso e Filtro Estrutura de URL: https://seudominio.com/dashboard.php?accountid={inteiro} (ex.: ?accountid=1). Fluxo: Ao carregar, o script PHP lê $_GET['accountid']. Consulta na tabela instagram: SELECT user_id FROM instagram WHERE account_id = ? (prepared statement). Se nenhum user_id for encontrado, exiba erro: "Conta não encontrada." Consulta na Posts_Instagram: SELECT * FROM Posts_Instagram WHERE insta_user_id = ? ORDER BY data_post DESC (limite de 50-100 para performance; adicione paginação se necessário). Saída em JSON ou renderize lista HTML de postagens. Listagem de Postagens Visualização: Grade de cards responsiva (2-4 colunas no desktop, 1 no mobile). Elementos do Card (por postagem): Miniatura: Miniatura da postagem (proporção 1:1, lazy-load). Legenda: Truncada para 100 caracteres + "…" (completa no modal). Tipo de Mídia: Badge (ex.: "VIDEO" em pílula azul). Data da Postagem: Formatada (ex.: "21 Abr 2026"). Status: Badge de alternância para Ativo (verde se true, vermelho se false). Link: permanent_link clicável para abrir em nova aba. Seleção: Checkbox ou clique para selecionar e acionar o modal. Ações: Busca/Filtro: Input para palavras-chave na legenda (filtro via JS no client-side). Seleção em Massa: Para edição múltipla futura. Estado Vazio: Se não houver postagens, exiba "Nenhuma postagem encontrada para esta conta. Busque mais via API?" Modal para Edição Acionador: Clique em um card de postagem → Abra modal centralizado (overlay com backdrop). Campos do Formulário: palavra_Chave: Input dinâmico. Input de texto: Digite palavra-chave → Pressione Enter para adicionar como tag (ex.: pílulas arredondadas azuis). Tags: Clique para remover. Armazene como array JSON no envio. Validação: Sem duplicatas; remova espaços em branco. msg_comment: Textarea (multi-linha, limite de 200 caracteres). msg_dm: Input de texto (limite de 100 caracteres). msg_btn: Input de texto (limite de 50 caracteres, ex.: texto de botão). Ativo: Checkbox (padrão para o valor atual). Botões: Salvar: POST para endpoint PHP (ex.: /update.php) com id da postagem e dados do formulário. Atualize JSON para palavra_Chave. Consulta: UPDATE Posts_Instagram SET palavra_Chave = ?, msg_comment = ?, msg_dm = ?, msg_btn = ?, Ativo = ? WHERE id = ?. Resposta: JSON de sucesso/erro; atualize a lista ou o card. Cancelar: Feche o modal. Validação: Client-side (JS): Campos obrigatórios marcados; server-side: Sanitize entradas. Acessibilidade: Labels ARIA, navegação por teclado (Esc para fechar). Escopo do CRUD Leitura: Liste todas as postagens filtradas. Atualização: Apenas os campos especificados via modal. Sem criação/exclusão na v1 (adicione se necessário). Manuseio de Erros: Mensagens flash (ex.: "Atualização falhou: Erro no banco de dados") na UI. Diretrizes de Design UI/UX Layout Geral: Cabeçalho: Logo, alternância de tema (ícone sol/lua), exibição do ID da conta, logout se adicionado. Principal: Sidebar opcional (filtros); corpo com grade de postagens. Rodapé: Mínimo (versão, copyright). Estética Limpa e Moderna: Cores: Claro (bg: #ffffff, texto: #333); Escuro (bg: #1a1a1a, texto: #e0e0e0). Acentos: #007bff (azul para botões/links). Espaçamento: Padding generoso (16-24px), cantos arredondados (8px). Tipografia: Títulos em negrito, corpo 14-16px. Animações: Sutis (fade-in para modal, escala no hover dos cards). Responsivo: Mobile-first; use flexbox/grid. Fluxo do Usuário: Carregue → Lista filtrada. Selecione postagem → Modal abre com dados pré-preenchidos. Edite → Salve → Lista atualiza (UI otimista: mostre mudanças imediatamente). Casos de Borda: Sem media_url: Mostre ícone placeholder. Campos JSON: Trate null como array/objeto vazio. Offline: Degradação graciosa (mostre lista em cache se usando Service Worker depois). Esta especificação fornece uma base sólida para o desenvolvimento.