Um exemplo simples de como os componentes UI podem melhorar um aplicativo incorporado é usá-los para criar a navegação por guias para painéis:
O exemplo a seguir adiciona painéis com guias a uma extensão básica do TypeScript que foi criada usando o framework de extensão do Looker.
Para seguir este exemplo, verifique se a configuração atende aos requisitos e siga estas etapas:
- Crie uma extensão básica do TypeScript.
- Crie o arquivo
src/Dashboards.tsx
para conectar e armazenar painéis. - Crie o arquivo
src/Tabs.tsx
para armazenar o componenteTabs
. - Substitua a referência HelloWorld em
src/App.tsx
. - Atualize o arquivo
manifest.lkml
com o direito de incorporação. - Publique a extensão na sua instância do Looker.
Requisitos
Você precisará de alguns elementos antes de começar:
- Você precisa ter acesso a uma instância do Looker com o Extension Framework ativado.
- Você precisa ter a permissão
develop
. - É necessário ter vários painéis definidos pelo usuário no Looker para colocar nas guias da UI.
- Se você estiver criando no framework de extensão ou no seu próprio aplicativo React independente, é importante fazer a autenticação com a API do Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensões para mais informações.
- Este exemplo usa o SDK do Looker Embed. Para permitir que o SDK incorporado seja executado na sua instância, inclua
http://localhost:8080
na lista de permissões de domínios incorporados na página Incorporar do painel Administrador. - Verifique se o pacote NPM dos componentes do Looker está instalado. As informações sobre como instalar e usar o pacote de componentes podem ser encontradas no documento README, disponível no GitHub e no NPM (links em inglês).
Etapa 1: criar uma extensão básica do TypeScript
Siga as instruções na página da documentação Introdução à criação de uma extensão do Looker para criar uma extensão. Para tornar a extensão uma extensão do TypeScript, use as seguintes modificações:
- Se você usa a ferramenta
create-looker-extension
para criar o modelo de extensão, escolha TypeScript como a linguagem que você quer usar na segunda etapa. - Se você clonar o repositório do Git para criar o modelo de extensão, navegue até o diretório
extension-examples/react/TypeScript/helloworld-ts
na segunda etapa.
Etapa 2: criar o arquivo src/Dashboards.tsx
para conectar e armazenar painéis
Dentro do diretório src
da nova extensão, crie um arquivo Dashboards.tsx
. Esse arquivo conecta e armazena os painéis que você criou no Looker.
Dentro do arquivo, cole o seguinte código. Esse código cria três objetos de painel e os especifica por ID. É possível criar mais ou menos objetos de painel, dependendo das suas necessidades.
Existem três locais no código de um URL de instância, https://mycompany.looker.com
. Mude para o URL da instância do Looker.
import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";
export const EmbeddedDashboard1 = (props: { id: number | string }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbeddedDashboard2 = (props: { id: number }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbeddedDashboard3 = (props: { id: number }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbedContainer = styled.div`
width: 100%;
height: 95vh;
& > iframe {
width: 100%;
height: 100%;
}
`;
No exemplo de código anterior, o seguinte está acontecendo:
As instruções de importação estão trazendo as dependências necessárias.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";
O próximo bloco de código cria um objeto
EmbeddedDashboard1
, que é um objetoEmbedContainer
que contém um iframe de painel. O iframe é gerado pelo SDK do Looker Embed usando o ID do painel transmitido a ele. Atualizehttps://mycompany.looker.com/
para o URL da instância do Looker.export const EmbeddedDashboard1 = (props: { id: number | string }) => { const [dashboard, setDashboard] = React.useState(); const setupDashboard = (dashboard: any) => { setDashboard(dashboard); }; const embedCtrRef = useCallback((el) => { const hostUrl = "https://mycompany.looker.com/"; if (el && hostUrl) { el.innerHTML = ""; LookerEmbedSDK.init(hostUrl); LookerEmbedSDK.createDashboardWithId(props.id) .withNext() .appendTo(el) .build() .connect() .then(setupDashboard) .catch((error) => { console.error("Connection error", error); }); } }, []); return <EmbedContainer ref={embedCtrRef}></EmbedContainer>; };
Os próximos dois blocos de código repetem esse processo para
EmbeddedDashboard2
eEmbeddedDashboard3
. Mais uma vez, atualizehttps://mycompany.looker.com/
para o URL da instância do Looker.O bloco final define o estilo do EmbedContainer.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Etapa 3: criar o arquivo src/Tabs.tsx
para armazenar o componente Tabs
Dentro do diretório src
da nova extensão, crie um arquivo Tabs.tsx
. Esse arquivo armazena o componente Tabs
e faz referência ao ID do painel do Looker para cada painel.
Dentro desse arquivo, cole o seguinte código (a seção após esta explica o que o código está fazendo):
import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboards";
export const Tabs = () => (
<ComponentsProvider>
<Tabs2>
<Tab2 id="5" label="Order Analysis Dashboard">
Order data from the last 12 months
<EmbeddedDashboard1 id={5} />
</Tab2>
<Tab2 id="2" label="Inventory Dashboard">
Current global inventory
<EmbeddedDashboard2 id={2} />
</Tab2>
<Tab2 id="7" label="Customer Dashboard">
Anonymized customer data
<EmbeddedDashboard3 id={7} />
</Tab2>
</Tabs2>
</ComponentsProvider>
)
No exemplo de código anterior, o seguinte está acontecendo:
As instruções de importação trazem as dependências e os componentes necessários, assim como os objetos
EmbeddedDashboard
que foram criados no arquivoDashboards.tsx
.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";
A instrução de exportação disponibiliza o objeto
Tabs
para importação em outros componentes.export const Tabs = () => (
O
ComponentsProvider
envolve componentes individuais para ajudar na aplicação de temas.<ComponentsProvider> </ComponentsProvider>
O componente
Tabs2
e o respectivo componente filho,Tab2
, criam três guias e as vinculam aos painéis do Looker.<Tabs2> <Tab2 id="5" label="Order Analysis Dashboard"> Order data from the last 12 months <EmbeddedDashboard1 id={5} /> </Tab2> <Tab2 id="2" label="Inventory Dashboard"> Current global inventory <EmbeddedDashboard2 id={2} /> </Tab2> <Tab2 id="7" label="Customer Dashboard"> Anonymized customer data <EmbeddedDashboard3 id={7} /> </Tab2> </Tabs2>
- A propriedade
id
deTab2
aceita um ID de guia exclusivo. Atualize o ID conforme necessário para seu ambiente. - A propriedade
label
aceita o rótulo que vai aparecer em cada guia. Atualize o ID conforme apropriado para o painel que você está usando. - Uma string colocada dentro das tags Tab2 aparecerá na parte superior da área de conteúdo dessa guia. Atualize ou remova a string conforme necessário.
- Os objetos
EmbeddedDashboard1
,EmbeddedDashboard1
eEmbeddedDashboard1
são colocados na guia. As propriedadesid
aceitam o ID do painel a ser incorporado a essa guia. Ao criar seu próprio painel com guias, substitua esse valor pelo ID do painel que você quer usar. O ID numérico do painel pode ser encontrado no URL apósdashboards/
. Por exemplo, se o URL forhttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US
, o ID do painel será61
.
- A propriedade
Etapa 4: substituir a referência HelloWorld em src/App.tsx
Navegue até o arquivo App.tsx
no diretório src
. Remova a instrução de importação HelloWorld:
import { HelloWorld } from './HelloWorld'
e substitua por:
import { Tabs } from './Tabs'
Também é possível excluir o arquivo HelloWorld.tsx
desse diretório, porque ele não será mais usado.
Etapa 5: atualizar o arquivo manifest.lkml
com o direito de incorporação
Adicione o seguinte direito à seção de direitos do arquivo manifest.lkml
no projeto do LookML:
use_embeds: yes
O arquivo manifest.lkml
ficará assim:
application: name {
label: "label"
url: "http://localhost:8080/bundle.js"
# file: "bundle.js
entitlements: {
core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
use_embeds: yes
}
}
Agora você pode acessar sua extensão, que aparece na pasta Aplicativos no painel de navegação à esquerda. Se você iniciou seu servidor de desenvolvimento local com yarn develop
, pode ver os painéis incorporados com guias.
Etapa 6: publicar a extensão na sua instância do Looker
Para mostrar a extensão a outros usuários do Looker, publique-a na sua instância do Looker seguindo estas etapas:
- Com o servidor de desenvolvimento em execução, navegue até
localhost:8080/bundle.js
. - Salve o conteúdo da janela do navegador localmente no seu computador como um arquivo
.js
. - Verifique se você está no modo de desenvolvimento e, em seguida, arraste e solte o arquivo
.js
no projeto de extensão. Salve as alterações. - No arquivo
manifest.lkml
, comente a linhaurl: "http://localhost:8080/bundle.js"
. - No arquivo
manifest.lkml
, remova a marca de comentário da linha# file: "bundle.js"
e verifique se o nome do arquivo corresponde ao nome do arquivo.js
que você enviou para seu projeto. Salve as alterações. - Confirme e implante as mudanças.
Depois de implantada, não será mais necessário iniciar o servidor de desenvolvimento local para ver a extensão. Além disso, os usuários na sua instância do Looker poderão vê-la se navegarem até ela dentro da pasta Aplicativos no painel de navegação à esquerda.