Construa com coragem. Publique com segurança.

Saber o que o Studio possui

O Portal Studio possui a shell voltada para o cliente: páginas, colocação de componentes, fichas de marca, comportamento responsivo, navegação, rodapé, apresentação de identidade, viagens e lançamentos de tickets. A Central de Ajuda possui idiomas, categorias, seções e conteúdo de artigos. O Studio consome esse conteúdo através de uma ponte protegida; nunca cria uma segunda loja de artigos .

Aproxime-se completamente antes de construir profundamente

1. Abrir Portal Studio → Início → Pronto.
2. Confirme o endereço canônico do Portal e abra-o em uma aba separada.
3. Defina o logotipo, ícone do navegador, ícone de toque, imagem social e cor do tema.
4. Confirme idiomas da Central de Ajuda; altere a autoridade do idioma na Central de ajuda, não no Studio.
5. Configurar navegação e o rodapé global da empresa.
6. Escolha uma viagem de ticket e configure pelo menos um formulário de solicitação.
7. Mantenha pelo menos um método de entrada seguro ativo e revise a descoberta da identidade.
8. Executar Qualidade e estabelecer o aperto de mão pré-visualização assinado.
9. Crie a primeira versão governada após cada item de bloqueio ser claro.

A percentagem de prontidão é calculada a partir dos dados salvos do espaço de trabalho e do estado de antevisão. Selecionando um item rotas diretamente para o seu próprio painel.

Compila páginas e seções reutilizáveis

1. Abrir Compilar → Páginas e selecione uma página protegida do sistema ou crie uma página personalizada.
2. Define a rota, o título, o modo de acesso e o comportamento local. As rotas do sistema protegidas não podem ser apagadas.
3. Abrir Componentes, filtrar por trabalho ou maturidade, e colocar um componente em uma slot compatível.
4. Use o inspetor para conteúdo, aparência, vinculação, visibilidade e acessibilidade.
5. Use padrões reutilizáveis para estruturas repetidas; mantenha diferenças de organização ou marca em variantes.
6. Salve o rascunho e exercício de carregamento, vazio, erro, convidado e estados assinados na pré-visualização.

Projete uma navegação e rodapé para cada rota

1. Abrir Construir → Navegação e rodapé.
2. Criar links de desktop ordenados e grupos aninhados ou mega-menu; confirmar o comportamento do teclado e móvel.
3. Configurar o rodapé empresarial: marca, links agrupados, contato, social, confiança, newsletter, links legais, locale e status.
4. Use as condições de audiência e localização apenas quando necessário; URLs, rotas e IDs nunca são traduzidos.
5. Visualize as personas públicas, clientes e organizações em larguras móveis, tablets e desktop.

Visualizar viagens reais, nenhuma tela feliz

1. Escolha suporte a hóspedes, ingresso assinado, atendimento de cobrança, organização ou transferência de conhecimento.
2. Mude personas, organização, papel e linguagem da Central de Ajuda.
3. Inspecione pontos de interrupção móveis, grandes, tablet, laptop, desktop, amplos e ultrawide.
4. Verificar os valores herdados, anulados e repor; evite duplicações desnecessárias de pontos de paragem.
5. Executar o teclado, RTL, redução de movimento, carregamento, vazio, não disponível e estados de permissão.
6. Use o Test Lab para acessibilidade, carga útil, rota, vinculação e resultados do renderizador antes de revisão.

Operar uma Central de Ajuda do Zendesk-level sem conteúdo duplicado

1. Criar categorias, seções, artigos, traduções, anexos e modelos em Centro de Ajuda.
2. Habilite idiomas lá; less localizados, pesquisa, feeds, SEO e cromo de artigo seguem a mesma autoridade.
3. No Studio, coloque busca de conhecimento, grades categoria/recurso, feeds, acordeão tópico, artigo, índice, feedback, componentes relacionados e anteriores/próximos.
4. Configurar feeds em destaque, populares e recentes; use sugestões contextuais nos fluxos de ticket.
5. Visualize sem resultados, artigos longos, anexos, feedback, relógio/assinatura e transferência de ticket.
6. Verifique rotas locais limpas, canônicas/hreflang, dados estruturados e invalidação de cache após a publicação.

Configurar o login com segurança

1. Abrir Identidade & organizações → Identidade e manter pelo menos um caminho de entrada ativado.
2. Escolha o método padrão, política de registro, duração da sessão, SSO-completo e comportamento de descoberta.
3. Adicionar provedores com campos de roteamento visual: tipo, domínios, prioridade, apresentação, estado habilitado e verificado. Segredos permanecem no subsistema identidade.
4. Para SCIM, habilitar o provisionamento, copiar o ponto final exato do espaço de trabalho e rodar o token. Guarde o toke único no IP.
5. Mapa reivindicações e organização de associação, em seguida, teste criar, atualizar, membro do grupo e desativação com um inquilino teste.
6. Visualize o convidado, cliente, organização delegada e estados bloqueados antes da publicação.

Compor a jornada completa de suporte

1. Selecione formulário direto, assistente, primeiro pesquisa, hub ou serviço-desk entrada.
2. Crie um formulário de solicitação com nome, versão com seções e etiquetas de campo acessíveis.
3. Construir condições visuais, roteamento,SLAe etapas de aprovação; avançadoJSONé apenas para alterações de desenvolvedor revisadas.
4. Configurar lista, detalhe, thread, linha do tempo, anexo, aprovação, SLA e superfícies de resposta.
5. Teste o olhar de hóspedes, solicitações de inscrição, visibilidade da organização, falha no upload, notificação por e-mail e deflexão do conhecimento.
6. Salve um rascunho; publique somente após o adaptador de rota e a rota de notificação passarem antes do voo.

Mover através de uma versão governada

1. Executar validação e Test Lab. Corrigir os resultados de bloqueio; reconhecer avisos permitidos com contexto.
2. Adicione notas de versão e request review. Reviewers comentar em stable page/node routes.
3. Aprova inspecione o diff, as viagens de visualização, as alterações de permissão e as evidências.
4. Publique ou agenda através do trabalhador de fundo. Deixar o Studio não cancela um trabalho durável.
5. Assista progresso, saúde e identificação de correlação. Pare/retirar apenas dos controles de trabalho.
6. Verifique rotas críticas, identidade, tickets e conhecimento. Volte para uma versão prévia imutável quando necessário.

Migrar com provas e um caminho de volta

1. Selecione o projeto do provedor e crie uma execução em seco.
2. Reveja as configurações descobertas, valores não mapeados, contagens de conteúdo e capturas de paridade visual.
3. Completar mapeamentos seguros e executar novamente o diff estruturado.
4. Aplicar a um rascunho, conciliar conta e visualizar cada viagem protegida.
5. Gravar aceitação autorizada; nunca sobrescrever a versão atual publicada durante a importação.
6. Publicar através da governança e manter o relatório de migração, liberar ID e ponto de retorno juntos.

Expandir contratos, não modelos

Uma extensão segura registra um tipo de componente estável e esquema, declara permissões e necessidades de dados, renderiza através do compilador canônico, e fornece dispositivos/testes determinísticos. Não consulte tabelas arbitrárias, injete editor JavaScript no Portal público, crie outro repositório de artigos ou ignore a porta de lançamento.

Definir um pacote de componentes

Use um ID com espaço de nomes minúsculo e versão semântica. Forneça ambos os nomes de propriedades de compatibilidade mostrados porque a inspeção de pacotes e validação de segurança realizam verificações independentes.

{
  "schema_version": 1,
  "id": "acme.support_health",
  "slug": "acme-support-health",
  "name": "Support health",
  "version": "1.0.0",
  "entry": "renderer.php",
  "renderer": "server",
  "server_renderer": "renderer.php",
  "public_renderer": "public.js",
  "schema": {
    "type": "object",
    "properties": {
      "heading": {"type": "string", "maxLength": 120},
      "showSla": {"type": "boolean", "default": true}
    },
    "additionalProperties": false
  },
  "permissions": ["tickets.read"],
  "data_scopes": ["tickets.mine"],
  "accessibility": {
    "landmark": "section",
    "nameFrom": "heading",
    "emptyState": true,
    "errorState": true
  },
  "performance": {"max_js_bytes": 12000, "max_css_bytes": 8000},
  "performance_budget": {"js": 12000, "css": 8000, "requests": 0}
}

Forma do nó

{
  "id": "node-support-health",
  "type": "custom.acme_support_health",
  "props": {"heading": "Support health", "showSla": true},
  "bindings": {"requests": {"source": "tickets.mine", "limit": 5}},
  "responsive": {"mobile": {"padding": "16px"}, "desktop": {"padding": "24px"}},
  "conditions": [{"field": "identity.signed_in", "operator": "equals", "value": true}],
  "a11y": {"label": "Support health"}
}

• IDs permanecem estáveis entre edições e migrações.
• Propriedades rejeitam campos não declarados e inseguros HTML.
• Cada view de dados define carga, vazio, permissão e saída de erro retrívevel.
• Os componentes do recipiente nomeiam os seus slots; as folhas não podem aceitar crianças arbitrárias.
• Marcar maturidade honestamente: blocos planejados, alertas beta, GA requer evidência completa.

Usar DTOs seguros para permissão

1. Escolha um ID pontilhado existente, como tickets.mine, knowledge.featured ou customer.profile.
2. Ligar apenas os campos declarados pelo seu DTO. As fontes desconhecidas falham com data_source.unknown.
3. Passe o contexto já autorizado do Portal; nunca aceite a identidade de espaço de trabalho/cliente de uma propriedade não confiável.
4. Os limites da lista são fixados a1–100. Normalizar os valores de paginação, localização e busca.
5. Se uma nova fonte for inevitável, adicione sua definição estável, mapeamento seguro, permissões, comportamento vazio e visualização de conjunto.

{
  "success": true,
  "source": "tickets.mine",
  "contract_version": 1,
  "items": [
    {"id": 42, "number": "REQ-42", "subject": "Example", "status": "open"}
  ]
}

Fiquem dentro dos limites da confiança.

{
  "success": false,
  "error": {
    "code": "studio.permission_denied",
    "message": "You do not have permission to publish the Portal.",
    "retryable": false,
    "correlation_id": "ps_…",
    "meta": {"capability": "publish"}
  }
}

Inspecionar, instalar e atualizar atomicamente

1. Colocar component.json na raiz ZIP e manter todos os caminhos relativos.
2. Executar a inspeção primeiro. O instalador caps arquivos em 500 entradas e 25 MB extraído; validação de segurança adiciona limites independentes.
3. Verificar o SHA esperado 256 e assinatura do pacote no processo de lançamento.
4. Instale para uma pasta versionada. Nunca mute uma versão instalada no local.
5. Fornecer migrações de propriedades para quebrar mudanças de esquema e preservar campos de compatibilidade desconhecidos.
6. Abra o componente em um rascunho, execute cada estado/viewport/persona e publique através da governança.
7. O retrocesso ativa a liberação de componentes/documentos imutáveis anteriores; mantém sua evidência de reprodutibilidade.

Prove a extensão no mesmo hash de lançamento

php tools/portal_studio_certify.php --source-only --json
php tools/test_portal_studio_contract.php
php tools/test_portal_one_renderer.php
php tools/test_portal_studio_engineer.php
php tools/test_portal_component_contracts.php
php tools/test_portal_one_renderer.php
php tools/test_portal_shell_contract.php
php tools/test_portal_knowledge_contract.php
node node_modules/@playwright/test/cli.js test tests/e2e/portal-studio-shell-visual-contract.spec.js tests/e2e/portal-custom-code-runtime.spec.js

Gates de origem são necessários, não suficientes. Anexar banco de dados/migração, visual navegador real, provedor de identidade, isolamento de autorização, acessibilidade, desempenho, fila/cron, e-mail/attachment, backup/restauração e evidência de implantação para o mesmo hash de liberação imutável. Evidência desconhecida necessária deve falhar a liberação.

• Unidade: esquema, higienização, DTO forma, condições, migrações e falhas digitadas.
• Contrato: carga/vazio/erro/sucesso, maturidade, faixas horárias, ligações e paridade de um renderer.
• Navegador: teclado, foco, semântica, RTL, zoom/refluxo, movimento reduzido e cada ponto de interrupção.
• Segurança: sondas de espaço de trabalho cruzado, ações forjadas, ataques de pacotes, spoofing prévia e vazamento secreto.
• Operações: progresso durável, licença/retorno, paragem/retentação/resumo, batimento cardíaco do programador e retrocesso.

Solução de problemas por estado e identificação de correlação