index.mdx

title	description	meta_tags	namespace	menu_namespace	permalink
Como integrar o Console da Azion e a API da Azion usando o Console Kit	O Console Kit da Azion permite que você crie uma interface Azion personalizada para atender às necessidades do seu negócio. Neste guia, você aprenderá a mostrar mais informações da API da Azion no Console.	edge, console, development, interface, vue, primevue	documentation_devtools_console_kit_api	devtoolsMenu	/documentacao/produtos/guias/integrar-com-api-console-kit/

O Console Kit da Azion permite que você crie uma interface Azion personalizada para atender às necessidades do seu negócio. Neste guia, você aprenderá a mostrar mais informações da API da Azion no Console.

:::caution[atenção] Para seguir este guia, você deve primeiro configurar seu projeto do Console Kit em um repositório bifurcado (forked) na sua conta e inicializar o projeto usando a CLI da Azion para executá-lo localmente. Então, você pode trabalhar na alteração da versão bifurcada do Console da Azion e, uma vez concluído, entregar o projeto no edge usando a CLI. :::

Para integrar APIs externas com a interface do Console da Azion, você pode criar um novo serviço Axios API em src/services/axios, adaptar cada serviço conforme necessário e seguir as etapas abaixo.

---

Obtenha dados da API da Azion e mostre na interface do Console

Neste exemplo, você modificará um serviço no Console para mostrar dois campos adicionais da API da Azion na tabela de configurações de cache da aplicação edge.

O objetivo é mostrar os valores TTL para cache do navegador e cache do edge, informados pelas propriedades browser_cache_settings_maximum_ttl e cdn_cache_settings_maximum_ttl na API de Cache Settings. Para fazer isso:

1. Abra o projeto do Console Kit no seu IDE.
2. Execute azion dev para inicializar um servidor de desenvolvimento local.
3. Na pasta src/services, localize o list-cache-settings-service.js e adicione as novas propriedades ao mapa:

const adapt = (httpResponse) => {
  const parseHttpResponse = httpResponse.body.results.map((cacheSettings) => ({
    id: cacheSettings.id.toString(),
    name: cacheSettings.name,
    browserCache: cacheSettings.browser_cache_settings,
    cdnCache: cacheSettings.cdn_cache_settings,
    // inicializa as seguintes referências baseado nos campos da API
    browserCacheTtl: cacheSettings.browser_cache_settings_maximum_ttl,
    edgeCacheTtl: cacheSettings.cdn_cache_settings_maximum_ttl
  }))

  return {
    body: parseHttpResponse,
    statusCode: httpResponse.statusCode
  }
}

4. Agora localize a list view Cache Settings e modifique-a da seguinte forma:

  const getColumns = computed(() => {
    return [
      {
        field: 'name',
        header: 'Origin Name'
      },
      {
        field: 'browserCache',
        header: 'Browser Cache'
      },
      // cria a coluna browser cache TTL
      {
        field: 'browserCacheTtl',
        header: 'Browser Cache TTL'
      },
      {
        field: 'cdnCache',
        header: 'Edge Cache'
      },
      // cria a coluna edge cache TTL
      {
        field: 'edgeCacheTtl',
        header: 'Edge Cache TTL'
      }
    ]
  })

5. No navegador, acesse o endereço localhost e navegue até a página Edge Applications.
6. Crie uma edge application ou selecione uma existente.
7. Navegue até a aba Cache Settings. Agora você deve ver as novas colunas aparecerem na interface.
8. Depois de terminar, execute azion deploy para lançar as alterações no edge.

Você pode seguir o mesmo processo para mostrar valores adicionais da API, recuperando a propriedade usando o serviço e adicionando-a à tabela.

---

import AuthorList from '~/components/AuthorList.astro'

Contribuidores