构建 Looker 扩展程序

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

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

配置包含模型文件和项目清单文件并关联到 Git 的 LookML 项目
生成扩展程序模板文件

以下步骤展示了如何构建上述元素。

为扩展程序配置 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 后，您就可以生成扩展程序模板文件了。

生成扩展程序模板文件

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

使用 create-looker-extension 实用程序
克隆扩展程序模板 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 的内容粘贴到项目清单文件中：

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

注意：生成的 manifest.lkml 文件的内容包含 project_name LookML 参数。project_name 参数要求启用本地项目导入实验室功能。否则，LookML 验证工具会在此过程的下一步中返回警告。
在 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 Version Manager 来更改 Node 版本。
在您的扩展程序目录中，文件为 manifest.lkml。复制此文件的内容。
在 LookML 项目中，将 manifest.lkml 的内容粘贴到项目清单文件中：

点击保存更改以保存项目清单文件。
在 LookML IDE 的右上角，点击验证 LookML，然后点击提交更改和推送，然后点击部署到生产环境。
在终端中，启动开发服务器：
```
yarn develop
```
现在，该扩展程序正在清单文件 http://localhost:8080/bundle.js 的 url 参数中指定的本地开发服务器上运行并提供 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 参数中修改向扩展程序授予的使用权。