本页面介绍了如何生成和配置基本的 Looker 扩展程序模板,以便您在其中添加功能。
创建新的 Looker 扩展程序需要您执行以下任务:
以下步骤展示了如何构建上述元素。
为扩展程序配置 Looker
每个 Looker 扩展程序都需要一个包含模型文件和清单文件的 LookML 项目才能运行。
为扩展程序创建一个空白项目。
在新项目中,使用 Looker IDE 中文件浏览器顶部的
+
创建模型文件。系统会使用
connection
参数和include
参数生成新的模型文件:将
connection
参数中的connection_name
替换为实例上有效的数据库连接的名称。该扩展程序需要有效的模型文件,因为 Looker 权限数据是通过 LookML 模型访问的。如需管理对扩展程序的访问权限,您必须将扩展程序与有效的 LookML 模型相关联,并向用户授予访问该模型的权限。修改完模型文件后,点击 Save Changes。由于您的扩展程序不需要视图文件,因此请删除
include: "/views/*.view.lkml"
参数,或在该行的开头添加#
字符,将该行设为注释。保留include: "/views/*.view.lkml"
参数会导致 LookML 验证器生成错误。在 Looker IDE 中使用文件浏览器顶部的
+
创建项目清单文件。项目清单文件最初将是空的,但在此过程的后续部分,您将将生成的内容复制到项目清单文件中,其中将包含
application
参数。application
参数用于为扩展程序添加标签,告诉 Looker 在哪里可以找到扩展程序 JavaScript,并提供扩展程序的使用权列表。使用权定义了该扩展程序可以访问的 Looker 资源。除非相应资源已列在使用权中,否则该扩展程序将无法访问该 Looker 资源。不过,您可以暂时让清单文件保持原样,因为稍后您会将文件的其余内容复制到该文件中。
为新项目配置 Git 连接。
点击 Looker IDE 右上角的配置 Git 按钮,或使用项目配置页面(如设置和测试 Git 连接文档页面中所述),访问配置 Git 页面。
为扩展程序设置项目并将其关联到 Git 后,您就可以生成扩展程序模板文件了。
生成扩展程序模板文件
您可以通过以下两种方式生成扩展程序模板代码文件:
这两个过程都需要 Yarn,因此请确保您已安装 Yarn。
使用 create-looker-extension
创建附加信息模板
create-looker-extension
实用程序会创建一个基本 Looker 扩展程序,其中包含所有必要的扩展程序文件和依赖项。然后,您可以将其用作起点,添加其他代码和功能以完成扩展程序。
要生成附加信息模板,请执行以下操作:
运行
create-looker-extension
实用程序,将<extension_name>
替换为扩展程序的名称:yarn create looker-extension <extension_name>
确认扩展程序名称或提供其他名称,然后选择您要用于构建扩展程序的语言和框架:
然后,
create-looker-extension
实用程序将使用您指定的框架填充基本模板,并将所有生成的文件放入使用扩展程序名称的新目录中:转到为扩展程序创建的目录:
cd <extension_name>
安装扩展程序依赖项:
yarn install
启动开发服务器:
yarn develop
该扩展程序现在会在
http://localhost:8080/bundle.js
本地运行并提供 JavaScript。您的扩展程序目录中有一个
manifest.lkml
文件。复制此文件的内容。在 LookML 项目中,将
manifest.lkml
的内容粘贴到项目清单文件中:点击保存更改以保存项目清单文件。
在 LookML IDE 中,点击验证 LookML,然后点击提交更改并推送,然后点击部署到生产环境。
使用浏览器的重新加载函数重新加载 Looker。
在 Looker 主菜单的应用部分中,您会看到新扩展程序的名称。
从应用部分选择您的扩展程序,即可查看其输出。
克隆 Git 代码库以创建扩展程序模板
Looker 维护着一个包含多个扩展程序模板的 Git 代码库,网址为 https://github.com/looker-open-source/extension-examples。如果您想要使用其中的某个示例,请转到该示例的代码库,然后按照接下来显示的说明操作。
此过程需要 Yarn,因此请确保您已安装 Yarn。
在本地命令行上,使用以下命令克隆 Git 代码库:
git clone git@github.com:looker-open-source/extension-examples.git
前往包含您要安装到系统上的模板的目录。在本示例中,我们将使用 React 和 JavaScript“Hello World”扩展程序:
cd extension-examples/react/javascript/helloworld-js
安装扩展程序依赖项:
yarn install
您可能需要更新 Node 版本,或使用 Node 版本管理器更改 Node 版本。
您的扩展程序目录中有一个
manifest.lkml
文件。复制此文件的内容。在 LookML 项目中,将
manifest.lkml
的内容粘贴到项目清单文件中:点击 Save Changes(保存更改)以保存项目清单文件。
在 LookML IDE 的右上角,依次点击 Validate LookML(验证 LookML)、Commit Changes & Push(提交更改并推送)和 Deploy to Production(部署到生产环境)。
在终端中,启动开发服务器:
yarn develop
该扩展程序现已在清单文件的
url
参数中指定的本地开发服务器 (http://localhost:8080/bundle.js
) 上运行并提供 JavaScript。使用浏览器的重新加载函数重新加载 Looker。
在 Looker 主菜单的应用部分中,您会看到新扩展程序的名称,该名称由项目清单文件中的
label
参数决定。从应用部分选择您的扩展程序,即可查看其输出。
修改附加信息
创建基本扩展程序后,您可以通过修改相应的 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
参数中修改向扩展程序授予的使用权。