Salah satu contoh sederhana tentang cara komponen UI dapat meningkatkan aplikasi tersemat adalah dengan menggunakannya untuk membuat navigasi tab untuk dasbor:
Contoh berikut menambahkan dasbor dengan tab ke ekstensi TypeScript dasar yang dibuat menggunakan framework ekstensi Looker.
Untuk mengerjakan contoh ini, pastikan penyiapan Anda memenuhi persyaratan, lalu gunakan langkah-langkah berikut:
- Mem-build ekstensi TypeScript dasar.
- Buat file
src/Dashboards.tsx
untuk menghubungkan dan menyimpan dasbor. - Buat file
src/Tabs.tsx
untuk menyimpan komponenTabs
. - Ganti referensi HelloWorld di
src/App.tsx
. - Perbarui file
manifest.lkml
dengan hak penyertaan. - Publikasikan ekstensi ke instance Looker Anda.
Persyaratan
Anda memerlukan beberapa elemen sebelum memulai:
- Anda harus memiliki akses ke instance Looker dengan Extension Framework diaktifkan.
- Anda harus memiliki izin
develop
. - Anda harus memiliki beberapa dasbor yang ditentukan pengguna dalam Looker untuk ditempatkan dalam tab UI.
- Baik Anda mem-build di framework ekstensi atau di aplikasi React mandiri Anda sendiri, Anda harus mengautentikasi dengan API Looker dan memiliki akses ke objek Looker SDK. Baca tentang autentikasi Looker API atau framework ekstensi kami untuk mengetahui informasi selengkapnya.
- Contoh ini menggunakan Looker Embed SDK. Agar Embed SDK dapat berjalan di instance Anda,
http://localhost:8080
harus disertakan dalam Daftar yang Diizinkan untuk Domain yang Disematkan di dalam halaman Sisipkan pada panel Admin. - Pastikan Anda telah menginstal paket NPM Komponen Looker. Informasi tentang cara menginstal dan menggunakan paket komponen dapat ditemukan dalam dokumen README, yang tersedia di GitHub dan NPM.
Langkah 1: Mem-build ekstensi TypeScript dasar
Ikuti petunjuk di halaman dokumentasi Pengantar pembuatan ekstensi Looker untuk mem-build ekstensi. Untuk menjadikan ekstensi sebagai ekstensi TypeScript, gunakan modifikasi berikut:
- Jika Anda menggunakan alat
create-looker-extension
untuk membuat template ekstensi, pilih TypeScript sebagai bahasa yang ingin Anda gunakan di langkah kedua. - Jika Anda meng-clone repositori Git untuk membuat template ekstensi, buka direktori
extension-examples/react/TypeScript/helloworld-ts
di langkah kedua.
Langkah 2: Buat file src/Dashboards.tsx
untuk menghubungkan dan menyimpan dasbor
Di dalam direktori src
ekstensi baru Anda, buat file Dashboards.tsx
. File ini akan menghubungkan dan menyimpan dasbor yang telah Anda buat di dalam Looker.
Di dalam file, tempel kode berikut. Kode ini membuat tiga objek dasbor dan menentukannya berdasarkan ID. Anda dapat membuat lebih banyak atau lebih sedikit objek dasbor, bergantung pada kebutuhan Anda.
Ada tiga lokasi dalam kode URL instance, https://mycompany.looker.com
. Ubah ini menjadi URL instance Looker Anda.
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%;
}
`;
Dalam contoh kode sebelumnya, hal-hal berikut terjadi:
Pernyataan impor memasukkan dependensi yang diperlukan.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";
Blok kode berikutnya membuat objek
EmbeddedDashboard1
, yang merupakan objekEmbedContainer
yang berisi iframe dasbor. Iframe dibuat dari Looker Embed SDK menggunakan ID dasbor yang diteruskan ke SDK tersebut. Pastikan untuk memperbaruihttps://mycompany.looker.com/
ke URL instance Looker Anda.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>; };
Dua blok kode berikutnya mengulangi proses ini untuk
EmbeddedDashboard2
danEmbeddedDashboard3
. Sekali lagi, pastikan untuk memperbaruihttps://mycompany.looker.com/
ke URL instance Looker Anda.Blok terakhir menata gaya EmbedContainer.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Langkah 3: Buat file src/Tabs.tsx
untuk menyimpan komponen Tabs
Di dalam direktori src
ekstensi baru Anda, buat file Tabs.tsx
. File ini menyimpan komponen Tabs
dan mereferensikan ID dasbor Looker untuk setiap dasbor.
Di dalam file tersebut, tempelkan kode berikut (bagian setelah ini menjelaskan apa yang dilakukan kode tersebut):
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>
)
Dalam contoh kode sebelumnya, hal-hal berikut terjadi:
Pernyataan impor memasukkan dependensi dan komponen yang diperlukan, serta objek
EmbeddedDashboard
yang dibuat dalam fileDashboards.tsx
.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";
Pernyataan ekspor membuat objek
Tabs
tersedia untuk diimpor ke komponen lain.export const Tabs = () => (
ComponentsProvider
menggabungkan setiap komponen untuk membantu tema.<ComponentsProvider> </ComponentsProvider>
Komponen
Tabs2
dan komponen turunannya,Tab2
, membuat tiga tab dan menautkannya ke dasbor 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>
- Properti
id
dariTab2
menerima ID tab yang unik. Perbarui ID sesuai kebutuhan untuk lingkungan Anda. - Properti
label
menerima label yang akan muncul di setiap tab. Perbarui ID sesuai dengan dasbor yang Anda gunakan. - String yang ditempatkan di dalam tag Tab2 akan muncul di bagian atas area konten untuk tab tersebut. Perbarui atau hapus string sesuai kebutuhan.
- Objek
EmbeddedDashboard1
,EmbeddedDashboard1
, danEmbeddedDashboard1
ditempatkan dalam tab. Propertiid
-nya menerima ID dasbor yang akan disematkan di dalam tab tersebut. Saat membuat dasbor dengan tab sendiri, ganti nilai ini dengan ID dasbor untuk dasbor yang ingin Anda gunakan. Anda dapat menemukan ID dasbor numerik di URL setelahdashboards/
. Misalnya, jika URL-nya adalahhttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US
, ID dasbor-nya adalah61
.
- Properti
Langkah 4: Ganti referensi HelloWorld di src/App.tsx
Buka file App.tsx
di direktori src
. Hapus pernyataan impor HelloWorld:
import { HelloWorld } from './HelloWorld'
dan ganti dengan:
import { Tabs } from './Tabs'
Selain itu, di file src/App.tsx
, ganti <HelloWorld/>
dengan <Tabs/>
.
Secara opsional, Anda juga dapat menghapus file HelloWorld.tsx
dari direktori ini karena Anda tidak akan menggunakannya lagi.
Langkah 5: Perbarui file manifest.lkml
dengan hak penyertaan
Tambahkan hak berikut ke bagian hak di file manifest.lkml
dalam project LookML Anda:
use_embeds: yes
File manifest.lkml
akan terlihat seperti ini:
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
}
}
Sekarang Anda dapat membuka ekstensi, yang muncul di folder Applications di panel navigasi sebelah kiri. Jika telah memulai server pengembangan lokal dengan yarn develop
, Anda dapat melihat dasbor tab yang disematkan.
Langkah 6: Publikasikan ekstensi ke instance Looker Anda
Untuk menampilkan ekstensi kepada pengguna Looker lainnya, publikasikan ekstensi ke instance Looker Anda menggunakan langkah-langkah berikut:
- Dengan server pengembangan yang berjalan, buka
localhost:8080/bundle.js
. - Simpan konten jendela browser secara lokal di komputer Anda sebagai file
.js
. - Pastikan Anda berada dalam mode pengembangan, lalu tarik lalu lepas file
.js
ke dalam project ekstensi. Simpan perubahan Anda. - Dalam file
manifest.lkml
, komentari barisurl: "http://localhost:8080/bundle.js"
. - Dalam file
manifest.lkml
, hapus tanda komentar pada baris# file: "bundle.js"
dan pastikan nama file cocok dengan nama file.js
yang Anda upload ke project. Simpan perubahan Anda. - Commit dan deploy perubahan Anda.
Setelah di-deploy, Anda tidak perlu lagi memulai server pengembangan lokal untuk melihat ekstensi, dan pengguna di instance Looker akan dapat melihat ekstensi jika mereka membukanya di dalam folder Applications di panel navigasi sebelah kiri.