Membangun dasbor bertab dengan komponen Looker

Salah satu contoh sederhana tentang bagaimana komponen UI dapat meningkatkan kualitas aplikasi tersemat adalah dengan menggunakannya untuk membuat navigasi tab untuk dasbor:

Contoh berikut menambahkan dasbor bertab ke ekstensi TypeScript dasar yang dibuat menggunakan framework ekstensi Looker.

Untuk mempelajari contoh ini, pastikan penyiapan Anda memenuhi persyaratan, lalu gunakan langkah-langkah berikut:

1. Buat ekstensi TypeScript dasar.
2. Buat file src/Dashboards.tsx untuk menghubungkan dan menyimpan dasbor.
3. Buat file src/Tabs.tsx untuk menyimpan komponen Tabs.
4. Mengganti referensi HelloWorld di src/App.tsx.
5. Perbarui file manifest.lkml dengan hak sematan.
6. Publikasikan ekstensi ke instance Looker.

Persyaratan

Anda akan memerlukan beberapa elemen sebelum memulai:

• Anda harus memiliki akses ke instance Looker dengan Framework Ekstensi yang diaktifkan.
• Anda harus memiliki izin develop.
• Anda harus memiliki beberapa dasbor yang ditentukan pengguna dalam Looker untuk ditempatkan di dalam tab UI.
• Baik Anda sedang mem-build dalam framework ekstensi maupun di aplikasi React mandiri, Anda harus melakukan autentikasi dengan Looker API dan memiliki akses ke objek Looker SDK. Baca autentikasi Looker API atau framework ekstensi kami untuk mengetahui informasi selengkapnya.
• Contoh ini menggunakan Looker Embed SDK. Agar Embed SDK dijalankan pada instance Anda, http://localhost:8080 harus disertakan dalam Daftar Domain yang Diizinkan yang Disematkan di dalam halaman Penyematan pada panel Admin.
• Pastikan Anda telah menginstal paket NPM Komponen Looker. Informasi tentang cara menginstal dan menggunakan paket komponen dapat ditemukan di dokumen README, yang tersedia di GitHub dan NPM.

Langkah 1: Build ekstensi TypeScript dasar

Ikuti petunjuk di halaman dokumentasi Pengantar pembuatan ekstensi Looker untuk membuat 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 digunakan pada langkah kedua.
• Jika Anda meng-clone repositori Git untuk membuat template ekstensi, buka direktori extension-examples/react/TypeScript/helloworld-ts pada 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 bangun 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.

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 menghadirkan 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 objek EmbedContainer yang berisi iframe dasbor. iframe dibuat dari Looker Embed SDK menggunakan ID dasbor yang diteruskan ke iframe. Pastikan untuk memperbarui https://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 dan EmbeddedDashboard3. Sekali lagi, pastikan untuk memperbarui https://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, tempel kode berikut (bagian setelah kode ini menjelaskan fungsi kode):

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 menyertakan dependensi dan komponen yang diperlukan, serta objek EmbeddedDashboard yang dibuat dalam file Dashboards.tsx.

  import React from "react";
  import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
  import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
  } from "./Dashboard";
  

• Pernyataan ekspor membuat objek Tabs dapat diimpor ke komponen lain.

  export const Tabs = () => (
  

• ComponentsProvider menggabungkan komponen individual untuk membantu penerapan 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 dari Tab2 menerima ID tab unik. Perbarui ID sesuai kebutuhan untuk lingkungan Anda.
  • Properti label menerima label yang akan muncul di setiap tab. Perbarui ID sebagaimana diperlukan untuk 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, dan EmbeddedDashboard1 ditempatkan dalam tab. Properti id mereka menerima ID dasbor dasbor untuk disematkan di dalam tab tersebut. Saat Anda membangun dasbor dengan tab sendiri, ganti nilai ini dengan ID dasbor yang ingin Anda gunakan. Anda dapat menemukan ID dasbor numerik di URL setelah dashboards/. Misalnya, jika URL-nya adalah https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, maka ID dasbornya adalah 61.

Langkah 4: Ganti referensi HelloWorld di src/App.tsx

Buka file App.tsx Anda di direktori src. Hapus pernyataan impor HelloWorld:

import { HelloWorld } from './HelloWorld'

dan menggantinya dengan:

import { Tabs } from './Tabs'

Jika ingin, Anda juga dapat menghapus file HelloWorld.tsx dari direktori ini karena Anda tidak akan menggunakannya lagi.

Langkah 5: Perbarui file manifest.lkml dengan hak sematan

Tambahkan hak berikut ke bagian hak dari file manifest.lkml di 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 Anda memulai server pengembangan lokal dengan yarn develop, Anda dapat melihat dasbor bertab yang disematkan.

Langkah 6: Memublikasikan ekstensi ke instance Looker

Untuk menampilkan ekstensi kepada pengguna Looker lainnya, publikasikan ekstensi ke instance Looker Anda menggunakan langkah-langkah berikut:

1. Saat server pengembangan Anda berjalan, buka localhost:8080/bundle.js.
2. Simpan konten jendela browser secara lokal di komputer Anda sebagai file .js.
3. Pastikan Anda berada dalam mode pengembangan, lalu tarik lalu lepas file .js ke dalam project ekstensi Anda. Simpan perubahan Anda.
4. Di file manifest.lkml, berikan komentar pada baris url: "http://localhost:8080/bundle.js".
5. Di 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.
6. Commit dan deploy perubahan Anda.

Setelah di-deploy, Anda tidak perlu lagi memulai server pengembangan lokal untuk melihat ekstensi, dan pengguna di instance Looker Anda akan dapat melihat ekstensi tersebut jika mereka membuka ekstensi dalam folder Applications di panel navigasi sebelah kiri.