Construire avec audace. Publier en toute sécurité.

Savoir ce que Studio possède

Portal Studio possède l ' interface client : pages, emplacement des composants, jetons de marque, comportement réactif, navigation, pied de page, présentation d &apos. identité, parcours et versions des tickets. Le Centre d " aide possède les langues, catégories, sections et contenu des articles. Studio consomme ce contenu via un pont protégé ; il ne crée jamais une deuxième boutique d & #160;articles.

Préparation complète avant de construire en profondeur

1. Ouvert Portal Studio → Démarrer → Prêt.
2. Confirmez l ' adresse canonique du portail et ouvrez-la dans un onglet séparé.
3. Définissez le logo, l ' icône du navigateur, l ’ icône tactile, l’ image sociale et la couleur de thème.
4. Confirmer les langues du Centre d'aide ; modifier l'autorité de la langue dans le Centre d’aide, pas Studio.
5. Configurer la navigation et le pied de page global d ' entreprise.
6. Choisissez un trajet de billet et configurez au moins un formulaire de demande.
7. Gardez au moins une méthode de connexion sécurisée active et vérifiez la découverte d ' identité.
8. Exécutez Quality et établissez la poignée de main signée d ' aperçu.
9. Créer la première version gouvernée après que chaque élément de blocage est effacé.

Le pourcentage de préparation est calculé à partir des données d ' espace de travail enregistrées et de l &apos. Sélectionner un élément permet de le diriger directement vers son panneau propriétaire.

Créer des pages et des sections réutilisables

1. Ouvert Créer → Pages et sélectionnez une page système protégée ou créez une page personnalisée.
2. Définir l ' itinéraire, le titre, le mode d &apos. accès et la localisation. Les itinéraires système protégés ne peuvent pas être supprimés.
3. Ouvert Composants, filtrer par tâche ou maturité et placer un composant dans une fente compatible.
4. Utilisez l ' inspecteur pour le contenu, l " &quot. apparence, la liaison, la visibilité et l & ; accessibilité.
5. Utiliser des modèles réutilisables pour les structures répétées; garder les différences d ' organisation ou de marque dans les variantes.
6. Enregistrer le brouillon et l ' exercice en chargement, vide, erreur, invité et connecté dans un aperçu.

Concevoir une navigation et un pied de page pour chaque itinéraire

1. Ouvert Construire → Navigation & pied de page.
2. Créer des liens de bureau ordonnés et des groupes imbriqués ou méga-menu; confirmer le clavier et le comportement mobile.
3. Configurez le pied de page d ' entreprise : marque, liens groupés, contact, réseaux sociaux, confiance, bulletin d " &quot. information, lien juridique, paramètres régionaux et statut.
4. Utilisez les conditions d ' audience et de locale uniquement si nécessaire : URLs, routes et ID ne sont jamais traduits.
5. Prévisualisez les profils public, client et organisationnel sur mobile, tablette et ordinateur.

Aperçu de véritables voyages, pas un seul écran heureux

1. Choisissez l ' assistance aux clients, les tickets signés, la facturation, l " &quot.
2. Changer les personnages, l ' organisation, le rôle et la langue du Centre d &apos.
3. Inspecter les points d ' interruption mobiles, grands mobiles, tablettes, ordinateurs portables, bureaux, larges et ultralarges.
4. Vérifiez les valeurs héritées, remplacées et réinitialisées ; évitez la duplication inutile des points d ' arrêt.
5. Exécuter le clavier, RTL, mouvement réduit, chargement, vide, indisponible et les états de permission.
6. Utilisez Test Lab pour l ' accessibilité, la charge utile, le parcours, les liaisons et les résultats du rendu avant révision.

Opérer un centre d ' aide de niveau Zendesk sans contenu en double

1. Créer des catégories, sections, articles, traductions, pièces jointes et modèles dans Centre d ' aide.
2. Activer les langues là-bas; les limaces localisées, la recherche, les flux, SEO et l'article chrome suivent la même autorité.
3. Dans Studio, placez la recherche de connaissances, les grilles de catégorie/ressource, les flux, l ' accordéon des sujets, l' article, la table des matières, le feedback, les composants liés et précédents/suivi.
4. Configurez les flux en vedette, populaires et récents ; utilisez des suggestions contextuelles dans les flux de tickets.
5. Prévisualiser les articles sans résultat, longs articles, pièces jointes, commentaires, surveillance/abonnement et remise de tickets.
6. Vérifiez les itinéraires propres de localisation, canonical/hreflang, données structurées et l ' invalidation du cache après publication.

Configurer une connexion sécurisée

1. Ouvert Identité et organisations → Identité et gardez au moins un chemin de connexion activé.
2. Choisissez la méthode par défaut, la politique d ' enregistrement, la durée de session, l &apos. SSO-domain enforcement and discovery behavior.
3. Ajouter des fournisseurs avec des champs de routage visuel : type, domaines, priorité, présentation, statut activé et vérifié. Les secrets restent dans le sous-système d ' identité.
4. Pour SCIM, activez le provisioning, copiez l ' espace de travail exact et faites pivoter le jeton. Stockez le jetons unique dans l " &quot.
5. Mapper les revendications et l ' appartenance à une organisation, puis tester la création, la mise à jour, l " &quot.
6. Prévisualiser les états invité, client, organisation déléguée et bloqué avant publication.

Composez le parcours complet de support

1. Sélectionner une entrée de formulaire direct, assistant, recherche en premier, hub ou service-desk.
2. Créer un formulaire de demande nommé et versionné avec des sections et des étiquettes de champ accessibles.
3. Construire des conditions visuelles, le routage, les étapes SLA et d ' approbation; avancé JSON est pour les modifications de développeur examinées uniquement.
4. Configurez les surfaces liste, détail, fil, chronologie, pièce jointe, approbation, SLA et réponse.
5. Test de recherche d ' invité, demandes de connexion, visibilité de l &apos. organisation, échec du téléchargement, notification par courrier électronique et déviation des connaissances.
6. Enregistrer un brouillon; publier seulement après que l ' adaptateur de route et le chemin de notification aient passé la vérification préalable.

Parcourir une version gérée

1. Exécuter la validation et le laboratoire de test. Corriger les résultats de blocage; confirmer les avertissements autorisés avec contexte.
2. Ajouter des notes de version et demander une révision. Les réviseurs commentent les chemins vers la page/nœud stable.
3. Les approbateurs inspectent les différences, prévisualisent les voyages, les changements de permissions et les preuves.
4. Publier ou planifier via le programme d ' arrière-plan. Quitter Studio n &apos, annule pas une tâche durable.
5. Surveiller la progression, l ' état et l " &quot. Arrêter/refaire uniquement à partir des contrôles de tâche.
6. Vérifiez les itinéraires critiques, l ' identité, les tickets et la connaissance. Revenez à une version antérieure immuable si nécessaire.

Émigrer avec des preuves et un chemin de retour

1. Sélectionnez le modèle du fournisseur et créez un essai.
2. Examiner les paramètres découverts, les valeurs non mappées, le nombre de contenu et les captures de parité visuelle.
3. Compléter les mappages sécurisés et relancer le diff structuré.
4. Appliquer à un brouillon, réconcilier les comptes et prévisualiser chaque voyage protégé.
5. Enregistrer l ' acceptation autorisée ; ne jamais écraser la version publiée en cours lors de l " &quot.
6. Publiez via la gouvernance et conservez le rapport de migration, l ' ID de version et le point de récupération ensemble.

Étendre les contrats, pas les modèles

Une extension sécurisée enregistre un type et un schéma de composant stable, déclare les permissions et les besoins en données, effectue le rendu via le compilateur canonique et fournit des fixtures/tests déterministes. Ne pas interroger des tables arbitraires, injecter l ' éditeur JavaScript dans le portail public, créer un autre référentiel d &apos); article ou contourner la porte de sortie.

Définir un paquet de composants

Utilisez un ID en espace de noms minuscule et une version sémantique. Fournissez les deux noms de propriété de compatibilité affichés car l ' inspection des paquets et la validation de sécurité effectuent des vérifications indépendantes.

{
  "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}
}

Forme de nœud

{
  "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"}
}

• Les ID restent stables lors des modifications et migrations.
• Les propriétés rejettent les champs non déclarés et HTML dangereux.
• Chaque vue liée aux données définit le chargement, le vide, les permissions et la sortie d ' erreur réessayable.
• Les composants de conteneur nomment leurs emplacements ; les feuilles ne peuvent pas accepter d ' enfants arbitraires.
• Marquez la maturité honnêtement : les blocs planifiés, les avertissements bêta, l ' AG exige des preuves complètes.

Utiliser des DTO sécurisés par permission

1. Choisissez un ID pointillé existant tel que tickets.mine, knowledge.featured ou customer.profile.
2. Lier uniquement les champs déclarés par son DTO versionné. Les sources inconnues échouent avec data_source.unknown.
3. Passer le contexte du portail déjà autorisé; n ' acceptez jamais l &apos.
4. Les limites de liste sont fixées à.1–100 Normaliser la pagination, les paramètres régionaux et les valeurs de recherche.
5. Si une nouvelle source est inévitable, ajoutez sa définition stable, son mappage sécurisé, ses permissions, son comportement vide et l ' aperçu de la fixation.

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

Restez dans les limites de la confiance.

{
  "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"}
  }
}

Inspecter, installer et mettre à jour atomiquement

1. Mettre component.json à la racine ZIP et garder chaque chemin relatif.
2. Exécutez l'inspection d'abord. L'installateur capte les archives à500entrées et25 MBextrait; la validation de sécurité ajoute des limites indépendantes.
3. Vérifier la signature SHA-256 et le paquet attendus dans le processus de publication.
4. Installer dans un répertoire versionné. Ne jamais modifier une version installée en place.
5. Fournir des migrations de propriétés pour casser les changements de schéma et préserver les champs de compatibilité inconnus.
6. Ouvrez le composant dans un brouillon, exécutez chaque étape/point de vue/personne et publiez via la gouvernance.
7. Rétablir active la version immuable précédente du composant/document; conserver sa preuve de reproductibilité.

Prouver l ' extension sur le même hachage de version

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

Les portes sources sont nécessaires, mais pas suffisantes. Joignez les preuves de base de données/migration, visualisation par navigateur réel, fournisseur d ' identité, isolation des autorisations, accessibilité, performances, file d " &quot); accueil/cron, courrier/pièces jointes, sauvegarde/restauration et déploiement au même hachage de version immuable.

• Unité: schéma, assainissement, forme DTO, conditions, migrations et échecs typés.
• Contrat: chargement/vide/erreur/succès, maturité, emplacements, liaisons et parité à un seul rendu.
• Navigateur: clavier, mise au point, sémantique, RTL, zoom/reflow, mouvement réduit et tous les points d ' interruption.
• Sécurité: sondes cross-workspace, actions forgées, attaques de paquets, spoofing d ' aperçu et fuites secrètes.
• Opérations : progression durable, départ/retour, arrêter/essayer de nouveau/reprendre, pulsation du planificateur et retour en arrière.

Dépannage par état et ID de corrélation