이 페이지에서는 기본 Looker 확장 프로그램 템플릿을 생성하고 구성하여 기능을 추가할 수 있는 방법에 대해 설명합니다.
새 Looker 확장 프로그램을 만들려면 다음 작업을 수행해야 합니다.
다음 절차에서는 이전 요소를 빌드하는 방법을 보여줍니다.
확장 프로그램용 Looker 구성
Looker 확장 프로그램에는 각각 실행할 모델 파일과 매니페스트 파일이 포함된 LookML 프로젝트가 필요합니다.
확장 프로그램의 빈 프로젝트를 만듭니다.
새 프로젝트에서 Looker IDE의 파일 브라우저 상단에 있는
+를 사용하여 모델 파일을 만듭니다.새 모델 파일은
connection매개변수 및include매개변수로 생성됩니다.
connection매개변수의connection_name을 인스턴스의 유효한 데이터베이스 연결 이름으로 바꿉니다. Looker 권한 데이터는 LookML 모델을 통해 액세스되므로 확장 프로그램에 유효한 모델 파일이 필요합니다. 확장 프로그램에 대한 액세스를 관리하려면 확장 프로그램을 유효한 LookML 모델과 연결하고 사용자에게 해당 모델에 액세스할 권한을 부여해야 합니다. 모델 파일 수정이 완료되면 변경사항 저장을 클릭합니다.확장 프로그램에는 뷰 파일이 필요하지 않으므로
include: "/views/*.view.lkml"매개변수를 삭제하거나 줄의 시작 부분에#문자를 추가하여 줄을 주석으로 만듭니다.include: "/views/*.view.lkml"매개변수를 그대로 두면 LookML 검사기에서 오류가 발생합니다.Looker IDE의 파일 브라우저 상단에 있는
+를 사용하여 프로젝트 매니페스트 파일을 만듭니다.프로젝트 매니페스트 파일은 처음에 비어 있지만 이 절차의 후반부에서 생성된 콘텐츠를
application매개변수를 포함하는 프로젝트 매니페스트 파일에 복사합니다.application매개변수는 확장 프로그램에 라벨을 지정하고, Looker에 확장 프로그램 자바스크립트를 찾을 위치를 알려주고, 확장 프로그램에 대한 사용 권한 목록을 제공합니다. 사용 권한은 확장 프로그램에서 액세스할 수 있는 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는 https://github.com/looker-open-source/extension-examples에서 여러 확장 프로그램 템플릿으로 Git 저장소를 유지합니다. 예시 중 하나를 사용하려면 해당 예시의 저장소로 이동하여 다음에 표시된 안내를 따르세요.
이 절차를 수행하려면 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노드 버전을 변경하려면 노드 버전을 업데이트하거나 노드 버전 관리자를 사용해야 할 수 있습니다.
확장 프로그램 디렉터리에는
manifest.lkml파일이 있습니다. 이 파일의 콘텐츠를 복사합니다.LookML 프로젝트에서
manifest.lkml의 콘텐츠를 프로젝트 매니페스트 파일에 붙여넣습니다.
변경사항 저장을 클릭하여 프로젝트 매니페스트 파일을 저장합니다.
LookML IDE의 오른쪽 상단에서 LookML 검증을 클릭한 후 변경사항 커밋 및 푸시를 클릭한 다음 프로덕션에 배포를 클릭합니다.
터미널에서 개발 서버를 시작합니다.
yarn develop이제 확장 프로그램이 다음 매니페스트 파일의
url매개변수에 지정된 로컬 개발 서버에서 자바스크립트를 실행하고 제공합니다:http://localhost:8080/bundle.js.브라우저의 새로고침 기능을 사용하여 Looker를 새로고침합니다.
Looker 기본 메뉴의 애플리케이션 섹션에 프로젝트 매니페스트 파일의
label매개변수에 따라 결정되는 새 확장 프로그램의 이름이 표시됩니다.애플리케이션 섹션에서 확장 프로그램을 선택하여 확장 프로그램의 출력을 확인합니다.
확장 프로그램 수정
기본 확장 프로그램을 만든 후 적절한 JavaScript 또는 TypeScript 파일을 수정하여 코드를 수정하거나 추가할 수 있습니다.
확장 프로그램 디렉터리 아래의 src 디렉터리에는 코드를 추가할 수 있는 소스 파일이 포함되어 있습니다. 이전 예시에서 React 및 자바스크립트 '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매개변수에서 확장 프로그램에 부여된 사용 권한을 수정해야 할 수도 있습니다.