构建 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 连接

    点击 Looker IDE 右上角的配置 Git 按钮,或使用项目配置页面(如设置和测试 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 的内容粘贴到项目清单文件中:

    点击保存更改以保存项目清单文件。

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

  9. 使用浏览器的重新加载函数重新加载 Looker。

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

  10. 应用部分选择您的扩展程序,即可查看其输出。

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

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

此过程需要 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 版本管理器更改 Node 版本。

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

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

    点击 Save Changes(保存更改)以保存项目清单文件。

  6. 在 LookML IDE 的右上角,依次点击 Validate LookML(验证 LookML)、Commit Changes & Push(提交更改并推送)和 Deploy to Production(部署到生产环境)。

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

    yarn develop
    

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

  8. 使用浏览器的重新加载函数重新加载 Looker。

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

  9. 应用部分选择您的扩展程序,即可查看其输出。

修改附加信息

创建基本扩展程序后,您可以通过修改相应的 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 参数中修改向扩展程序授予的使用权