פיתוח המחשה חזותית בהתאמה אישית עבור Looker Marketplace

בדף הזה מוסבר איך ליצור סוג של תרשים מותאם אישית שאפשר להוסיף ל-Looker Marketplace ומשתמשי Looker אחרים יכולים לגשת אליו. אפשר גם ליצור תצוגה חזותית בהתאמה אישית ישירות בפרויקט, בלי להפוך אותה לזמינה ללקוחות אחרים של Looker.

חשוב לדעת: כדי לשלוח תוכן אל Looker Marketplace, אתם צריכים להיות חברים ב-Looker Partner Network או לקוחות של Looker.

‫Looker Marketplace הוא מיקום מרכזי שבו אפשר למצוא, לפרוס ולנהל סוגים רבים של תוכן Looker, כמו Looker Blocks™‎, אפליקציות, תרשימים ותוספים אחרים.

אם התכונה Looker Marketplace מופעלת, לקוחות Looker יכולים להתקין תוספים של Looker Marketplace, שכוללים סוגים של ויזואליזציות שאפשר להוסיף לספריית הוויזואליזציות המקורית של Looker.

כדי לפתח המחשה חזותית בהתאמה אישית ולהפוך אותה לזמינה לכל לקוחות Looker דרך Looker Marketplace, פועלים לפי השלבים הבאים:

  1. פיתוח תצוגה חזותית.
  2. יוצרים פרויקט Looker להמחשה.
  3. דחיפת פרויקט Looker למאגר Git.
  4. בדיקת הפונקציונליות של הוויזואליזציה.
  5. שליחת ההצגה החזותית אל Looker.

פיתוח סוג של תרשים להמחשה

מזהים את סוג הוויזואליזציה שרוצים לפתח. (אשר שהדמיה הזו אינה רשומה כבר ב-Marketplace או כ-דמיה נייטיב של Looker.)

מפתחים את ההמחשה החזותית המותאמת אישית ב-JavaScript באמצעות Looker Visualization API בסביבת JavaScript.

יצירת פרויקט Looker להמחשה

יוצרים פרויקט ב-Looker כדי לייצג את הוויזואליזציה המותאמת אישית. הפרויקט צריך להכיל את הקבצים הבאים:

  • קובץ הרישיון: מפרט את הרישיון או הרישיונות שבהם מופץ אמצעי ההמחשה, באמצעות הטקסט:

    This Looker visualization is distributed with the following license:...

  • קובץ README.md: מכיל תיאור של הוויזואליזציה, הסבר על אופן הפעולה שלה ומידע נוסף.

  • קובץ JavaScript ‏ (.js): מכיל גרסה מרוכזת של קוד JavaScript ששימש ליצירת הוויזואליזציה. ב-Marketplace, קובצי JS נכללים בפרויקט, מה שמאפשר ניהול תקין של גרסאות וחבילות.

  • קובץ מניפסט (manifest.lkml): מציין id (מזהה ייחודי) וlabel (שמוצג בממשק המשתמש של Looker עבור הוויזואליזציה הזו). לדוגמה:

    constant: vis_id {
        value: "default_id"
        export: override_optional
    }
    constant: vis_label {
        value: "default_label"
        export: override_optional
    }
    visualization: {
        id: "@{vis_id}"
        label: "@{vis_label}"
        file: "my_local.js"
        sri_hash: "my_sri_hash"
        dependencies: []
    }
  • קובץ הרישום (marketplace.json): מגדיר את הרישום ב-Marketplace של אמצעי ההמחשה המותאם אישית, וכולל תווית שמציינת איך אמצעי ההמחשה יופיע ב-Marketplace, את המיקום של image_uri, סלוגן שמתאר את תרחיש השימוש של אמצעי ההמחשה, וגם מגדיר את קבועי השדות ב-Marketplace שהמשתמשים מזינים במהלך ההתקנה. לדוגמה:
{
  "label": "Gauge Visualization",
  "category_label": "plug-ins",
  "branding": {
    "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
    "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
  },
   "constants": {
        "vis_label": {
            "label": "Visualization Label",
            "description": "This label will appear in the visualization selector in the Looker Explore UI."
        },
        "vis_id": {
            "label": "Visualization Id",
            "description": "This must be a unique ID across all visualizations.",
            "value_constraint": "visualization"
        }
    }
}

העלאת הפרויקט ל-Git

מאחסנים את קובץ ה-LookML של הוויזואליזציה במאגר GitHub שנגיש לציבור. בהנחה שיצרתם את ההדמיה בפרויקט Looker, בצעו את השלבים הבאים כדי לדחוף אותה למאגר חדש:

  1. יוצרים מאגר ב-GitHub שנגיש לכולם.
  2. מגדירים את כתובת ה-URL של המאגר של פרויקט Looker לכתובת ה-URL של המאגר ב-GitHub.
  3. פועלים לפי ההנחיות של Git ב-Looker כדי לאמת, לבצע קומיט ולפרוס את הקוד בסביבת הייצור.

בדיקת הפונקציונליות של ההצגה החזותית

כדי לבדוק את התרשים החדש, צריך להחיל אותו על Explore או על Look מתאימים במופע Looker:

  1. עוברים לטבלת Look או ל-Explore.
  2. אם אתם נמצאים ב-Look, לוחצים על עריכה כדי לערוך את ה-Look.
  3. לוחצים על סמל האפשרויות הנוספות (3 נקודות) בתפריט סוגי התרשימים כדי לפתוח את הרשימה הנפתחת של התרשימים.
  4. בוחרים את התצוגה החזותית המותאמת אישית.
  5. לוחצים על שמירה כדי לשמור את השינוי במראה. שימו לב ללוחות הבקרה שעשויים להיות מושפעים מהשינוי הזה.

‫Looker דורש את הפונקציות הבאות בהדמיות שזמינות מ-Looker Marketplace:

תפקיד חובה
תמיכה בהתעמקות בנתונים להמחשה כן
אפשרות להשתמש בלוחות הצבעים של Looker כן
רספונסיביות לדפדפן ולגודל המסך כן
משפחת גופנים עקבית: font-family: Helvetica, Arial, sans-serif כן
גודל הגופן כן
האפשרות להפעיל או להשבית את האפשרויות תוויות ערכים ותוויות צירים בחלונית ההגדרות של התצוגה החזותית כן
המחשה חזותית של נתונים שבוצע בהם Pivot כן (כשרלוונטי)
עדכוני ויזואליזציה על סמך אינטראקטיביות של משתמשים באמצעות הפונקציה updateAsync או is update function כן
הודעות שגיאה ברורות (לדוגמה, This visualization requires 1 dimension and 2 measures) כן
כל האפשרויות בחלונית ההגדרות של התצוגה החזותית משנות את התצוגה החזותית באופן ברור כן
שימוש בעיצוב value של השדה כברירת מחדל כן (כשרלוונטי)
שגיאה מופיעה כששאילתה לא מחזירה תוצאות כן

שליחת התרשים לבדיקה

אחרי שהוויזואליזציה מוכנה לשליחה, פועלים לפי ההוראות במאמר שליחת תוכן אל Looker Marketplace כדי ליצור מסמכי תמיכה לוויזואליזציה, לשלוח את הוויזואליזציה לצוות Looker לבדיקה ולפרסם את הוויזואליזציה ב-Looker Marketplace.