Lokale Vorschau der Designänderungen

Sie können die zum Design gehörenden Dateien aus Guide exportieren und in Ihrem Texteditor 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. Speichern Sie zu diesem Zweck die Designdatei in Ihrem Desktop-Editor und aktualisieren Sie die Seite im Browser. 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.

Hinweis: Die Zendesk-Befehlszeilenschnittstelle ZCLI ersetzt ZAT für die App-Entwicklung, unterstützt aber noch keine Vorschau für Zendesk Guide-Designs.

Im vorliegenden Beitrag behandelte Themen:

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

Einrichten der lokalen Designvorschau

Für die Installation und Verwendung von ZAT müssen Sie den API-Zugang aktivieren und eine lokale Entwicklungsumgebung einrichten.

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 ZAT. Weitere Informationen finden Sie unter Installing and using ZAT (Englisch) in der Dokumentation für Zendesk-Entwickler. Kehren Sie anschließend hierher zurück.
3. Führen Sie den folgenden Befehl am Terminal Ihres Computers aus, um ZAT zu aktualisieren:

   gem update zendesk_apps_tools

Starten der lokalen Designvorschau

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

So starten Sie die lokale Designvorschau

1. Navigieren Sie am Terminal Ihres Computers zum Ordner mit den exportierten und entpackten Designdateien. Beispiel:

   cd guide_themes/newlook_theme

2. Führen Sie den folgenden Befehl aus:

   zat theme preview 

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

   

   Wenn Sie zur Anmeldung bei Guide Single-Sign-On (SSO) verwenden, können Sie sich mittels eines API-Tokens anmelden. 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 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 Webbrowser wie Chrome oder Firefox ein. Der Browser muss gemischte HTTP- und HTTPS-Inhalte zulassen. Safari bietet keine Unterstützung für gemischte Inhalte und lässt keine lokale Vorschau von Designs zu.

   In diesem Beispiel lautet die „Ready“-URL https://z3n-example.zendesk.com/hc/admin/local_preview/start.

   Die URL sollte die Designvorschau laden.

Anzeigen der Änderungen

Nachdem Sie den Designvorschaumodus gestartet haben, können Sie die Designdateien lokal in Ihrem Texteditor 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 Änderungen an

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

Wenn Sie fertig sind, können Sie den Vorschaumodus wie folgt beenden:

• Drücken Sie in der ZAT-Terminalsitzung die Tastenkombinationen Strg+C.
• Klicken Sie im Browser oben auf der Designvorschauseite auf den Link Vorschau schließen.