构建 Looker 扩展程序

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

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

以下过程展示了如何构建上述元素。

为扩展程序配置 Looker

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

  1. 为扩展程序创建空白项目

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

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

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

    由于您的扩展程序不需要视图文件,因此请删除 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 在 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 版本管理器来更改 Node 版本。

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

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

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

  6. 在 LookML IDE 的右上角,依次点击验证 LookML提交更改并推送部署到正式版

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

    yarn develop
    

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

  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 参数中修改授予扩展程序的授权