构建 Looker 扩展程序

本页介绍了如何生成和配置基本的 Looker 扩展程序模板,然后您可以向该模板添加功能。

如要创建新的 Looker 扩展程序,您需要执行以下任务:

以下步骤展示了如何构建之前的元素。

为扩展程序配置 Looker

每个 Looker 扩展程序都需要一个 LookML 项目,该项目包含一个模型文件和清单文件才能运行。

  1. 为您的扩展程序创建一个空白项目

  2. 在新项目中,使用 Looker IDE 中文件浏览器顶部的 + 创建模型文件

  3. 系统会生成包含 connection 参数和 include 参数的新模型文件:

    connection 参数中的 connection_name 替换为实例上有效数据库连接的名称。该扩展程序需要有效的模型文件,因为 Looker 权限数据是通过 LookML 模型访问的。如需管理对扩展程序的访问权限,您必须将扩展程序与有效的 LookML 模型相关联,并向用户授予访问该模型的权限。修改完模型文件后,点击 Save Changes

    由于您的扩展程序不需要视图文件,请删除 include: "/views/*.view.lkml" 参数或在行开头添加 # 字符,使该行变为注释。将 include: "/views/*.view.lkml" 参数保留原样会导致 LookML 验证工具生成错误。

  4. 使用 Looker IDE 中文件浏览器顶部的 + 创建项目清单文件

    项目清单文件最初为空,但您稍后需要将生成的内容复制到包含 application 参数的项目清单文件中。application 参数会为扩展程序添加标签,告知 Looker 在哪里可以找到扩展程序 JavaScript,并提供扩展程序的使用权列表。使用权定义扩展程序可以访问的 Looker 资源。除非 Looker 资源在权限中列出,否则此扩展程序将无法访问该资源。

    不过,您可以暂时将清单文件保留原样,因为稍后在此过程中,您会将文件其余的内容复制到其中。

  5. 为新项目配置 Git 连接

    您可以通过以下方法访问配置 Git 页面:点击 Looker IDE 右上角的配置 Git 按钮,或者按照设置和测试 Git 连接文档页面中所述使用项目配置页面。

为扩展程序设置项目并将其连接到 Git 后,您就可以生成扩展程序模板文件了。

生成扩展程序模板文件

您可以通过以下两种方式生成扩展程序模板代码文件:

这两个进程都需要 Yarn,因此请确保您已安装 Yarn。

使用 create-looker-extension 创建附加信息模板

create-looker-extension 实用程序会创建一个基本的 Looker 扩展程序,其中包含所有必要的扩展程序文件和依赖项。然后,您可以以此为基础,添加其他代码和功能以完成扩展程序。

若要生成扩展程序模板,请执行以下操作:

  1. 运行 create-looker-extension 实用程序,将 <extension_name> 替换为您的扩展程序的名称:

    yarn create looker-extension <extension_name>
    
  2. 确认扩展程序名称或提供其他名称,然后选择要用于构建扩展程序的语言和框架:

    然后,create-looker-extension 实用程序将使用您指定的框架来填充基本模板,并将所有生成的文件放入使用扩展名名称的新目录中:

  3. 转到为扩展程序创建的目录:

    cd <extension_name>
    
  4. 安装扩展程序依赖项:

    yarn install
    
  5. 启动开发服务器:

    yarn develop
    

    该扩展程序现在正在 http://localhost:8080/bundle.js 本地运行并提供 JavaScript。

  6. 在您的扩展程序目录中,有文件 manifest.lkml。复制此文件的内容。

  7. 在 LookML 项目中,将 manifest.lkml 的内容粘贴到项目清单文件中:

    点击 Save Changes 以保存项目清单文件。

  8. 在 LookML IDE 中,点击验证 LookML,然后点击提交更改和推送,再点击部署到生产环境

  9. 使用浏览器的重新加载功能重新加载 Looker。

    在 Looker 主菜单的应用部分中,您会看到新扩展程序的名称。

  10. Applications 部分选择您的扩展程序,以查看扩展程序的输出。

克隆 Git 代码库以创建扩展程序模板

Looker 在 https://github.com/looker-open-source/extension-examples 维护着包含多个扩展程序模板的 Git 代码库。如果您想使用其中的某个示例,请前往该示例的代码库,然后按照接下来显示的说明操作。

此过程需要使用 Yarn,因此请确保您已安装 Yarn。

  1. 在本地命令行中,使用以下命令克隆 Git 代码库:

    git clone git@github.com:looker-open-source/extension-examples.git
    
  2. 导航到包含您要在系统上安装的模板的目录。在此示例中,我们将使用 React 和 JavaScript“Hello World”扩展程序:

    cd extension-examples/react/javascript/helloworld-js
    
  3. 安装扩展程序依赖项:

    yarn install
    

    您可能需要更新 Node 版本,或使用节点版本管理器更改 Node 版本。

  4. 在您的扩展程序目录中,有文件 manifest.lkml。复制此文件的内容。

  5. 在 LookML 项目中,将 manifest.lkml 的内容粘贴到项目清单文件中:

    点击 Save Changes 以保存项目清单文件。

  6. 在 LookML IDE 的右上角,点击验证 LookML,然后点击提交更改和推送,再点击部署到生产环境

  7. 在您的终端中,启动开发服务器:

    yarn develop
    

    该扩展程序现在正在清单文件的 url 参数中指定的本地开发服务器上运行并提供 JavaScript:http://localhost:8080/bundle.js

  8. 使用浏览器的重新加载功能重新加载 Looker。

    在 Looker 主菜单的应用部分中,您会看到新扩展程序的名称,该名称由项目清单文件中的 label 参数确定。

  9. Applications 部分选择您的扩展程序,以查看扩展程序的输出。

修改扩展程序

创建基本扩展程序后,您可以通过修改相应的 JavaScript 或 TypeScript 文件来修改扩展程序或向其添加代码。

扩展程序目录下的 src 目录包含用于添加代码的源文件。在前面的示例中,对于 React 和 JavaScript“Hello World”模板,文件名为 HelloWorld.js。修改或向该文件添加代码会修改或向扩展程序函数添加代码。

以下是 React 和 JavaScript HelloWorld.js 文件的输出:


import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const HelloWorld = () => {
  const { core40SDK } = useContext(ExtensionContext)
  const [message, setMessage] = useState()

  useEffect(() => {
    const initialize = async () => {
      try {
        const value = await core40SDK.ok(core40SDK.me())
        setMessage(`Hello, ${value.display_name}`)
      } catch (error) {
        setMessage('Error occured getting information about me!')
        console.error(error)
      }
    }
    initialize()
  }, [])

  return (
    <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          </Text>
        </Space>
      </ComponentsProvider>
    </>
  )
}

在前面的示例中,您可以通过更改此行中的文本来更改该扩展程序的文本输出:

setMessage(`Hello, ${value.display_name}`).

请注意,在添加功能时,您可能需要在项目清单文件的 application 参数中修改向扩展程序授予的使用权