# Integre o Console e a API com 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.

:::caution[atenção]
Para seguir este guia, você deve primeiro [configurar seu projeto do Console Kit](/pt-br/documentacao/devtools/console-kit/#configure-um-projeto/) 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 application.

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](https://api.azion.com/#ea84ca72-db97-44fc-88c5-30fb236f8fa6). 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:

```javascript title="src/services/edge-application-cache-settings-services/list-cache-settings-service.js"
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:

```javascript title="src/views/EdgeApplicationsCacheSettings/ListView.vue"
  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: 'Cache'
      },
      // cria a coluna cache TTL
      {
        field: 'edgeCacheTtl',
        header: 'Cache TTL'
      }
    ]
  })
```

5. No navegador, acesse o endereço localhost e navegue até a página **Applications**.
6. Crie uma 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.