יצירת לוח בקרה עם כרטיסיות באמצעות רכיבי Looker

דוגמה לאופן שבו רכיבי ממשק משתמש יכולים לשפר אפליקציה מוטמעת היא שימוש בהם ליצירת ניווט בכרטיסיות עבור מרכזי בקרה:

לוח בקרה לדוגמה עם ממשק מבוסס-כרטיסיות.

בדוגמה הבאה מוסיפים לוחות בקרה עם כרטיסיות לתוסף TypeScript בסיסי שנבנה באמצעות ה-framework של Looker לתוספים.

כדי לעבוד עם הדוגמה הזו, צריך לוודא שההגדרה עומדת בדרישות ואז לפעול לפי השלבים הבאים:

  1. איך יוצרים תוסף בסיסי ב-TypeScript
  2. יצירת הקובץ src/Dashboards.tsx כדי להתחבר ללוחות בקרה ולאחסן אותם.
  3. יוצרים את הקובץ src/Tabs.tsx כדי לאחסן את הרכיב Tabs.
  4. מחליפים את ההפניה ל-HelloWorld ב-src/App.tsx.
  5. מעדכנים את הקובץ manifest.lkml עם הרשאת הטמעה.
  6. פרסום התוסף במופע Looker

דרישות

לפני שמתחילים, צריך כמה דברים:

שלב 1: בניית תוסף TypeScript בסיסי

כדי ליצור תוסף, פועלים לפי ההוראות בדף התיעוד מבוא ליצירת תוסף Looker. כדי להפוך את התוסף לתוסף TypeScript, משתמשים בשינויים הבאים:

שלב 2: יוצרים את הקובץ src/Dashboards.tsx כדי להתחבר ללוחות בקרה ולאחסן אותם

בתוך הספרייה src של התוסף החדש, יוצרים קובץ Dashboards.tsx. הקובץ הזה יתחבר ללוחות הבקרה שיצרתם ב-Looker ויאחסן אותם.

מדביקים את הקוד הבא בתוך הקובץ. הקוד הזה יוצר רכיב של מרכז בקרה שאפשר להשתמש בו שוב.

יש מיקום אחד בקוד של כתובת URL של מופע, https://mycompany.looker.com. משנים את הערך הזה לכתובת ה-URL של המופע ב-Looker.

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

export const EmbeddedDashboard = (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 EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

בדוגמת הקוד הקודמת, מתרחשים הדברים הבאים:

  • הצהרות הייבוא מביאות את התלויות הנדרשות.

    import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

  • בלוק הקוד הבא יוצר אובייקט EmbeddedDashboard, שהוא אובייקט EmbedContainer שמכיל iframe של לוח בקרה. אפשר להשתמש ברכיב הזה שוב ושוב, בכל לוח בקרה, על ידי העברת נכס id שונה. ה-iframe נוצר מ-Looker Embed SDK באמצעות מזהה לוח הבקרה שמועבר אליו. חשוב לעדכן את https://mycompany.looker.com/ לכתובת ה-URL של המכונה של Looker.

    export const EmbeddedDashboard = (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>;
};

  • הבלוק האחרון מגדיר את הסגנון של EmbedContainer.

      export const EmbedContainer = styled.div`
    width: 100%;
    height: 95vh;
    & > iframe {
      width: 100%;
      height: 100%;
    }
`;

שלב 3: יוצרים את הקובץ src/Tabs.tsx כדי לאחסן את הרכיב Tabs

בתוך הספרייה src של התוסף החדש, יוצרים קובץ Tabs.tsx. בקובץ הזה מאוחסן רכיב Tabs והוא מפנה למזהה של לוח הבקרה ב-Looker לכל לוח בקרה.

בתוך הקובץ, מדביקים את הקוד הבא (בקטע הבא מוסבר מה הקוד עושה):

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } 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>
)

בדוגמת הקוד הקודמת, מתרחשים הדברים הבאים:

  • הצהרות הייבוא מביאות את יחסי התלות והרכיבים הנדרשים, וגם את האובייקטים EmbeddedDashboard שנוצרו בקובץ Dashboards.tsx.

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

  • הצהרת הייצוא מאפשרת לייבא את האובייקט Tabs לרכיבים אחרים.

    export const Tabs = () => (

  • ה-ComponentsProvider עוטף רכיבים נפרדים כדי לעזור בהגדרת ערכות נושא.

    <ComponentsProvider>
</ComponentsProvider>

  • רכיב Tabs2 ורכיב הצאצא שלו, Tab2, יוצרים שלוש כרטיסיות ומקשרים אותן ללוחות הבקרה של Looker.

     <Tabs2>
 <Tab2 id="5" label="Order Analysis Dashboard">
  Order data from the last 12 months
   <EmbeddedDashboard id={5} />
 </Tab2>
 <Tab2 id="2" label="Inventory Dashboard">
   Current global inventory
   <EmbeddedDashboard id={2} />
 </Tab2>
 <Tab2 id="7" label="Customer Dashboard">
   Anonymized customer data
   <EmbeddedDashboard id={7} />
 </Tab2>
</Tabs2>
    • המאפיין id של Tab2 מקבל מזהה ייחודי של כרטיסייה. מעדכנים את המזהה לפי הצורך בסביבה שלכם.
    • במאפיין label מציינים את התווית שתופיע בכל כרטיסייה. מעדכנים את המזהה בהתאם למרכז הבקרה שבו משתמשים.
    • מחרוזת שמוצבת בתוך התגים Tab2 תופיע בחלק העליון של אזור התוכן של הכרטיסייה הזו. מעדכנים או מסירים את המחרוזת לפי הצורך.
    • האובייקטים EmbeddedDashboard ממוקמים בכרטיסייה. במאפיינים של id מזינים את המזהה של לוח הבקרה שרוצים להטמיע בכרטיסייה הזו. כשיוצרים מרכז שליטה עם כרטיסיות, מחליפים את הערך הזה במזהה של מרכז השליטה שרוצים להשתמש בו. המזהה המספרי של לוח הבקרה מופיע בכתובת ה-URL אחרי dashboards/. לדוגמה, אם כתובת ה-URL היא https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, מזהה לוח הבקרה יהיה 61.

שלב 4: מחליפים את ההפניה ל-HelloWorld ב-src/App.tsx

מנווטים לקובץ App.tsx בספרייה src. מסירים את הצהרת הייבוא של HelloWorld:

import { HelloWorld } from './HelloWorld'

ומחליפים אותו ב:

import { Tabs } from './Tabs'

בנוסף, בקובץ src/App.tsx, מחליפים את <HelloWorld/> ב-<Tabs/>.

אפשר גם למחוק את הקובץ HelloWorld.tsx מהספרייה הזו, כי לא תשתמשו בו יותר.

שלב 5: מעדכנים את הקובץ manifest.lkml עם הרשאת ההטמעה

מוסיפים את ההרשאה הבאה לקטע ההרשאות של הקובץ manifest.lkml בפרויקט LookML:

use_embeds: yes

קובץ manifest.lkml אמור להיראות כך:

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
  }
}

עכשיו אפשר לנווט אל התוסף, שמופיע בתיקייה Applications בחלונית הניווט הימנית. אם הפעלתם את שרת הפיתוח המקומי באמצעות yarn develop, תוכלו לראות את לוחות הבקרה המוטמעים עם הכרטיסיות.

שלב 6: פרסום התוסף במופע Looker

כדי להציג את התוסף למשתמשי Looker אחרים, צריך לפרסם את התוסף במופע Looker. לשם כך, פועלים לפי השלבים הבאים:

  1. כשהשרת לפיתוח פועל, עוברים אל localhost:8080/bundle.js.
  2. שומרים את התוכן של חלון הדפדפן באופן מקומי במחשב כקובץ .js.
  3. מוודאים שאתם במצב פיתוח, ואז גוררים את קובץ .js אל פרויקט התוסף. שומרים את השינויים.
  4. בקובץ manifest.lkml, מוסיפים הערה לשורה url: "http://localhost:8080/bundle.js".
  5. בקובץ manifest.lkml, מבטלים את ההערה בשורה # file: "bundle.js" ומוודאים ששם הקובץ זהה לשם הקובץ .js שהעליתם לפרויקט. שומרים את השינויים.
  6. שומרים ומפרסמים את השינויים.

אחרי פריסת השינויים, לא תצטרכו יותר להפעיל את שרת הפיתוח המקומי כדי לראות את התוסף, והמשתמשים במופע Looker יוכלו לראות את התוסף אם הם ינווטו אליו בתיקייה Applications בחלונית הניווט הראשית.