Visualização local de alterações do tema

Você pode exportar os arquivos de um tema do Guide e trabalhar neles offline em seu editor favorito. Para evitar a compactação e importação dos arquivos para o Guide toda vez que desejar visualizar suas alterações, você pode visualizar cada alteração localmente em um navegador usando as ferramentas de aplicativos do Zendesk (ZAT). Para visualizar uma alteração, basta salvar o arquivo do tema em seu editor da área de trabalho e atualizar a página do navegador. Exemplo:

O ZAT é uma coleção de ferramentas para desenvolvedores que inclui o Sinatra, um servidor da web que é executado localmente em seu computador. Depois de iniciar a pré-visualização, o processo é executado em segundo plano. Veja a interface de linha de comando na parte inferior da imagem.

Os tópicos abordados neste artigo são:

• Configuração da visualização local de temas
• Ativação da visualização local de temas
• Visualização de alterações

Configuração da visualização local de temas

Como configurar a visualização local de temas

1. Caso isso ainda não tenha sido feito, ative o acesso de API em sua conta do Zendesk Support visitando Admin. > Canais > API.
2. Instale as ferramentas de aplicativos do Zendesk (ZAT).

   Consulte Instalação e uso das ferramentas de aplicativos do Zendesk na central de ajuda para desenvolvedores.

3. Se você já instalou o ZAT antes para desenvolver aplicativos do Zendesk, assegure-se de atualizá-lo executando o comando a seguir em sua interface de linha de comando:

   $ gem update zendesk_apps_tools

Para instalar e usar o ZAT, você precisará de uma interface de linha de comando (CLI). No macOS, você pode usar o Terminal na pasta Aplicativos/Utilitários. No Windows, você pode usar o prompt de comando ou o Powershell. Se você for usuário do Windows 10, pode instalar e usar um Bash shell, uma CLI mais orientada para desenvolvedores. Consulte Configuração de um bash shell no Windows 10.

Ativação da visualização local de temas

Você deve ativar a visualização local de temas antes de começar a trabalhar nos arquivos de temas em seu computador.

Como ativar a visualização local de temas

1. Em sua interface de linha de comando, navegue até a pasta que contém os arquivos de temas exportados e descompactados.

   Use o comando cd (para mudar de diretório) para navegar até uma pasta filho. Exemplo:

   $ cd guide_themes/newlook_theme

   Para voltar um diretório, use cd seguindo por um espaço e dois pontos. Exemplo:

   cd ..

2. Execute o comando a seguir:

   $ zat theme preview 

3. Nos prompts, insira seu subdomínio do Zendesk Support e o email e a senha que você usa para entrar no Zendesk Guide.

   

   O subdomínio e o email estão salvos em um arquivo de texto com a extensão .zat na pasta do tema para que você precise inserir sua senha apenas na próxima vez que iniciar a pré-visualização. Se você cometer um erro ao digitar seu nome de usuário ou senha, apague o arquivo .zat e inicie novamente. Observe que os arquivos com pontos precedentes são ocultados no macOS, por padrão. Consulte Show Hidden Files in Mac OS X (mostrar arquivos ocultos no Mac OS X) no site osxdaily.com.

   Se você usa o single sign-on (SSO) para entrar no Guide (usando, por exemplo, as credenciais do Google ou da Microsoft), você pode entrar usando um token da API que pode obter na interface do administrador do Support. Consulte API token (Token da API) nos documentos da REST API. Quando o ZAT solicitar os dados de entrada, insira {seu_email}/token de seu nome de usuário, onde "/token" é a cadeia de caracteres real "/token". Use o token real da API como sua senha. Exemplo:

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

   Depois de entrar no sistema, a pré-visualização é iniciada e executada em segundo plano:

   

4. Copie a URL de "Concluído" na saída e cole-o em um navegador.

   No exemplo, a URL é https://nadosolutions.zendesk.com/hc/admin/local_preview/start.

   Após a entrada, uma página sem formatação é carregada. Os navegadores atuais têm um recurso de segurança que impede o carregamento de determinados arquivos locais (conhecidos como conteúdo misto) em uma página. Você pode desabilitar o recurso no Chrome e no Firefox seguindo a descrição incluída na próxima etapa.

5. No Chrome ou no Firefox, clique no ícone de escudo na barra de endereços e concorde em carregar um script não seguro (Chrome) ou desativar a proteção na página (Firefox). No Firefox, o ícone de escudo está localizado no lado esquerdo da barra de endereços.

   

   Observação: o Safari não dispõe de uma opção para desabilitar a proteção. Você deve usar o Chrome ou o Firefox para a visualização.

   A página com a formatação correta deve carregar automaticamente. Você pode iniciar a edição dos arquivos de temas em seu editor e a visualização das alterações localmente em seu navegador.

Visualização de alterações

Depois de ativar a pré-visualização de temas, você pode trabalhar nos arquivos de tema em seu editor favorito. Trabalhe iterativamente para desenvolver e testar seu tema. Por exemplo, faça algumas alterações em seu JavaScript, salve as alterações e atualize a página do navegador para testar as alterações.

Como visualizar alterações

1. Salve o arquivo editado em seu editor.
2. Atualize a página no navegador.

Ao terminar, você pode interromper a pré-visualização usando um dos seguintes métodos:

• Alterne para o navegador e clique no link "Para sair, clique aqui" na parte superior da página visualizada.
• Alterne para a sua interface de linha de comando e pressione Control+C.