Aperçu des modifications des thèmes en local

Vous pouvez exporter les fichiers d’un thème de Guide et travailler dessus hors ligne dans l’éditeur de votre choix. Pour éviter d’avoir à compresser et importer les fichiers dans Guide chaque fois que vous voulez voir un aperçu de vos modifications, vous pouvez consulter un aperçu de chaque modification dans votre navigateur Web en utilisant ZAT. Pour consulter l’aperçu d’une modification, il vous suffit d’enregistrer le fichier du thème dans votre éditeur de bureau et d’actualiser la page dans votre navigateur. Exemple :

ZAT est un groupe d’outils de développement qui inclut Sinatra, un serveur Web qui s’exécute en local sur votre ordinateur. Une fois le mode d’aperçu lancé, le processus s’exécute en arrière-plan. Consultez l’interface de ligne de commande en bas de l’image.

Sujets abordés dans cet article :

• Configuration de l’aperçu du thème en local
• Lancement de l’aperçu du thème en local
• Aperçu des modifications

Configuration de l’aperçu du thème en local

Pour configurer l’aperçu du thème en local

1. Si ce n’est pas déjà fait, activez l’accès API dans votre compte Zendesk Support en allant à Admin > Canaux > API.
2. Installez ZAT.

   Consultez Installation et utilisation de ZAT dans le centre d’aide destiné aux développeurs.

3. Si vous avez déjà installé ZAT pour créer des applications Zendesk, mettez-le à jour en exécutant la commande suivante dans votre interface de ligne de commande :

   $ gem update zendesk_apps_tools

Pour installer et utiliser ZAT, vous avez besoin d’une interface de ligne de commande. Sous macOS, vous pouvez utiliser Terminal dans le dossier Applications/Utilitaires. Sous Windows, vous pouvez utiliser l’invite de commande ou Powershell. Si vous utilisez Windows 10, vous pouvez utiliser le shell Bash, une interface de ligne de commande plus conviviale pour les développeurs. Consultez Configuration du shell Bash dans Windows 10.

Lancement de l’aperçu du thème en local

Lancez l’aperçu du thème en local avant de commencer à travailler sur les fichiers du thème sur votre ordinateur.

Pour lancer l’aperçu du thème en local

1. Dans l’interface de ligne de commande, naviguez jusqu’au dossier contenant les fichiers du thème exportés et compressés.

   Utilisez la commande cd (changement de répertoire) pour naviguer jusqu’à un dossier enfant. Exemple :

   $ cd guide_themes/newlook_theme

   Pour sauvegarder un répertoire, utilisez la commande cd suivie d’un espace et de deux points. Exemple :

   cd ..

2. Exécutez la commande suivante :

   $ zat theme preview 

3. À l’invite, saisissez votre sous-domaine Zendesk Support, ainsi que l’adresse e-mail et le mot de passe que vous utilisez pour vous connecter à Zendesk Guide.

   

   Le sous-domaine et l’adresse e-mail sont enregistrés dans un fichier texte intitulé .zat dans le dossier du thème. Ainsi, la prochaine fois que vous lancerez le mode d’aperçu, vous n’aurez plus qu’à saisir votre mot de passe. Si vous avez fait une erreur en saisissant votre nom d’utilisateur ou votre mot de passe, supprimez le fichier .zat et recommencez. Notez que les fichiers commençant par des points sont masqués par défaut sous macOS. Consultez Show Hidden Files in Mac OS X sur le site Web osxdaily.com.

   Si vous utilisez la connexion unique pour vous connecter à Guide (par ex. vos identifiants Google ou Microsoft), vous pouvez vous connecter à l’aide d’un token API que vous pouvez obtenir dans l’interface d’administrateur de Support. Consultez Token API dans la documentation de l’API REST. Quand ZAT vous invite à vous connecter, saisissez {votre_email}/token comme nom d’utilisateur (« /token » étant la chaîne « /token » telle quelle). Utilisez le token API comme mot de passe. Exemple :

   Enter your username: [e-mail]/token
   Enter your password: e8Pvy0pvGzE8meUQxWgjIYkjr

   Une fois que vous êtes connecté, le mode d’aperçu est lancé et s’exécute en arrière-plan :

   

4. Copiez l’URL « Ready » dans la sortie et collez-la dans votre navigateur.

   Dans l’exemple, l’URL est https://nadosolutions.zendesk.com/hc/admin/local_preview/start.

   Une page non formatée se charge après votre connexion. Les navigateurs modernes sont dotés d’une fonction de sécurité qui bloque le chargement de certains fichiers locaux (contenu mixte) dans une page. Vous pouvez désactiver cette fonction dans Chrome et Firefox comme expliqué ci-dessous.

5. Dans Chrome ou Firefox, cliquez sur l’icône de bouclier de la barre d’adresse du navigateur et acceptez de charger un script non sûr (Chrome) ou de désactiver la protection sur la page (Firefox). Dans Firefox, l’icône de bouclier se trouve sur la gauche de la barre d’adresse.

   

   Remarque – Il n’y a pas d’option permettant de désactiver la protection dans Safari. Vous devez donc utiliser Chrome ou Firefox pour le mode d’aperçu.

   La page correctement formatée devrait se charger automatiquement. Vous pouvez modifier les fichiers du thème dans votre éditeur et consulter l’aperçu des modifications en local dans votre navigateur.

Aperçu des modifications

Une fois le mode d’aperçu du thème lancé, vous pouvez travailler sur les fichiers du thème dans l’éditeur de votre choix. Travaillez de façon itérative pour développer et tester votre thème. Par exemple, apportez des modifications à votre code JavaScript, enregistrez-les et actualisez la page de navigateur pour tester ces modifications.

Pour consulter l’aperçu des modifications

1. Enregistrez le fichier modifié dans votre éditeur.
2. Actualisez la page dans le navigateur.

Quand vous avez terminé, vous pouvez arrêter le mode d’aperçu en utilisant l’une des méthodes suivantes :

• Passez à votre navigateur et cliquez sur le lien permettant de quitter en haut de l’aperçu de la page.
• Passez à l’interface de ligne de commande et appuyez sur Ctrl-C.