Lokale Vorschau auf Designänderungen

Sie können die zum Design gehörenden Dateien aus Guide exportieren und in jedem beliebigen Editor offline bearbeiten. Damit Sie nicht jedes Mal, wenn Sie eine Vorschau der Änderungen sehen möchten, die Dateien komprimieren und in Guide importieren müssen, können Sie mit den Zendesk Apps Tools (ZAT) eine lokale Vorschau in einem Webbrowser anzeigen. Hierzu brauchen Sie nur die Designdatei in Ihrem Desktop-Editor zu speichern und die Seite im Browser zu aktualisieren. Beispiel:

ZAT besteht aus einer Reihe von Entwicklertools, darunter auch Sinatra, ein Webserver, der auf einem lokalen Computer läuft. Nachdem Sie den Vorschaumodus gestartet haben, läuft der Prozess im Hintergrund. Die Befehlszeilenschnittstelle ist unten im Screenshot zu sehen.

Im vorliegenden Beitrag behandelte Themen:

• Einrichten der lokalen Designvorschau
• Starten der lokalen Designvorschau
• Anzeigen der Änderungen

Einrichten der lokalen Designvorschau

So richten Sie die lokale Designvorschau ein

1. Falls noch nicht geschehen, aktivieren Sie den API-Zugriff in Ihrem Zendesk Support-Konto unter Admin > Kanäle > API.
2. Installieren Sie die Zendesk Apps Tools (ZAT).

   Weitere Informationen finden Sie unter Installing and using the Zendesk apps tools (Englisch) im Help Center für Entwickler.

3. Wenn Sie ZAT bereits installiert haben, um Zendesk-Apps zu erstellen, sollten Sie den folgenden Befehl in der Befehlszeilenschnittstelle ausführen, um sicherzustellen, dass Sie die aktuellste Version verwenden:

   $ gem update zendesk_apps_tools

Zur Installation und Verwendung von ZAT brauchen Sie eine Befehlszeilenschnittstelle (im Englischen „Command-Line Interface bzw. „CLI“ genannt). Beim macOS können Sie „Terminal“ im Ordner „Programme/Dienstprogramme“ verwenden. Bei Windows können Sie die Eingabeaufforderung oder die Powershell verwenden. Bei Windows 10 können Sie eine Bash-Shell installieren, eine entwicklerfreundlichere Befehlszeilenschnittstelle. Weitere Informationen finden Sie unter Einrichten einer Bash-Shell unter Windows 10.

Starten der lokalen Designvorschau

Sie sollten die lokale Designvorschau starten, bevor Sie mit der Bearbeitung von Themendateien auf Ihrem Computer beginnen.

So starten Sie die lokale Designvorschau

1. Navigieren Sie in der Befehlszeilenschnittstelle zum Ordner mit den exportierten und dekomprimierten Designdateien.

   Verwenden Sie den Befehl cd, um in einen untergeordneten Ordner zu wechseln. Beispiel:

   $ cd guide_themes/newlook_theme

   Verwenden Sie cd gefolgt von einem Leerzeichen und zwei Punkten, um in den nächsthöheren Ordner zu gelangen. Beispiel:

   cd ..

2. Führen Sie den folgenden Befehl aus:

   $ zat theme preview 

3. Geben Sie in den Eingabeaufforderungen Ihre Zendesk Support-Domänen sowie die E-Mail-Adresse und das Kennwort ein, das Sie zur Anmeldung bei Zendesk Guide verwenden.

   

   Die Subdomäne und E-Mail-Adresse werden in einer Textdatei mit der Erweiterung .zat im Ordner des Designs gespeichert, sodass Sie das nächste Mal, wenn Sie den Vorschaumodus starten, nur Ihr Kennwort eingeben müssen. Wenn Ihnen bei der Eingabe des Benutzernamens oder Kennworts ein Fehler unterläuft, löschen Sie die .zat-Datei und beginnen Sie von vorne. Bei macOS werden Dateien, deren Name mit einem Punkt beginnt, automatisch ausgeblendet. Weitere Informationen finden Sie unter Show Hidden Files in Mac OS X (Englisch) auf der Website osxdaily.com.

   Wenn Sie zur Anmeldung bei Guide Single-Sign-On (SSO) verwenden (z. B. anhand Ihrer Credentials für Google oder Microsoft), können Sie sich mittels eines API-Tokens anmelden, den Sie in der Admin-Oberfläche von Zendesk Support erhalten. Weitere Informationen finden Sie unter API token (Englisch) in der Dokumentation zur REST-API. Wenn Sie von ZAT zur Anmeldung aufgefordert werden, geben Sie als Benutzernamen {Ihre_E-Mail-Adresse}/token ein. „/token“ ist dabei die tatsächliche Zeichenfolge „/token“. Geben Sie als Kennwort dann das eigentliche API-Token ein. Beispiel:

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

   Nach erfolgreicher Anmeldung wird der Vorschaumodus gestartet. Er läuft dann im Hintergrund weiter.

   

4. Kopieren Sie die URL, die in der Ausgabe nach „Ready“ erscheint, und fügen Sie sie in einem Browser sein.

   In diesem Beispiel lautet die URL https://nadosolutions.zendesk.com/hc/admin/local_preview/start.

   Nach der Anmeldung wird eine unformatierte Seite geladen. Moderne Browser verfügen über eine Sicherheitsfunktion, die das Laden bestimmter lokaler Dateien (so genannter gemischter Inhalte) einer Seite blockiert. Sie können diese Funktion in Chrome und Firefox wie nachfolgend beschrieben deaktivieren:

5. Klicken Sie in Chrome oder Firefox auf das Schildsymbol in der Adressleiste des Browsers und stimmen Sie dann zu, ein unsicheres Skript zu laden (Chrome) bzw. den Schutz der Seite zu deaktivieren (Firefox). In Firefox erscheint das Schildsymbol links in der Adressleiste.

   

   Hinweis: In Safari kann diese Sicherheitsfunktion nicht deaktiviert werden. Zur Vorschau müssen Sie deshalb Chrome oder Firefox verwenden.

   Die richtig formatierte Seite wird automatisch geladen. Sie können jetzt die gewünschten Änderungen im Editor vornehmen und dann lokal im Browser überprüfen.

Anzeigen der Änderungen

Nachdem Sie den Designvorschaumodus gestartet haben, können Sie die Designdateien in dem von Ihnen bevorzugten Editor bearbeiten. Gehen Sie beim Entwickeln und Testen Ihres Designs iterativ vor. Beispiel: Nehmen Sie JavaScript-Änderungen vor, speichern Sie sie und aktualisieren Sie dann die Browserseite, um die Auswirkungen zu sehen.

So zeigen Sie eine Vorschau der Änderungen an

1. Speichern Sie die bearbeitete Datei im Editor.
2. Aktualisieren Sie die Seite im Browser.

Nach Abschluss Ihrer Arbeit können Sie den Vorschaumodus wie folgt beenden:

• Gehen Sie zum Browser und klicken Sie oben in der Vorschauseite auf den Link „Um diesen Modus zu verlassen, klicken Sie hier“.
• Gehen Sie zur Befehlszeilenschnittstelle und drücken Sie Strg+C.