Zoom 앱 시작하기 시리즈 3부에 오신 것을 환영합니다! 시리즈의 1부에서는 Zoom 앱의 개요를 다루었고 2부에서는 하나를 만들기까지 했습니다. 이 섹션에서는 샘플 Hello World Zoom 앱을 설정하고 실행하는 방법을 살펴봅니다.

따라가는 경우 Zoom 앱의 클라이언트 ID 및 클라이언트 암호와 실행 중인 Ngrok 터널의 OAuth 리디렉션 URL이 있어야 합니다.

전제 조건

Node.JS(NPM)

Zoom 마켓플레이스의 Zoom 앱

클라이언트 ID 및 클라이언트 암호

리디렉션 URL

앱 정보

오늘 실행할 샘플 Zoom 앱 코드는 바닐라 JavaScript 및 Express를 사용하여 여전히 모범 사례를 따르는 동시에 시작 및 실행하는 데 필요한 최소한의 코드를 보여줍니다.

참고로 이 앱은 실제로 많은 작업을 수행하지 않습니다. 다른 샘플 애플리케이션을 위한 템플릿이며 확장 가능하도록 설계되었습니다.

설정 및 설치

이제 앱과 모든 종속성을 실행하는 데 필요한 코드를 설정하겠습니다. 먼저 여기에 있는 git 저장소를 복제합니다.

https://github.com/zoom/zoomapps-sample-js

NPM을 사용하여 종속성을 설치합니다.

$ npm install

자격 증명 추가

종속성을 설치하면 안전한 환경에서 개발하는 동안 애플리케이션 비밀을 보유하는 .env 파일이 생성됩니다.

.env 파일을 열고 지침에 따라 필드를 채웁니다. SESSION_SECRET 필드에는 이미 개발을 위해 생성된 임의의 값이 있습니다.

# Client ID for your Zoom App
ZM_CLIENT_ID=

# Client Secret for your Zoom app
ZM_CLIENT_SECRET=

# Redirect URI set for your app in the Zoom Marketplace
ZM_REDIRECT_URL=

# Sign Session Cookies
SESSION_SECRET=3e571b471f611f7cae69cadcaa786e82a93609ffdcfe9bab93bf52f356a4d9ae

앱 시작

개발 모드에서 앱을 실행하여 .env 파일의 자격 증명을 사용하고 파일 변경 사항을 확인합니다.

$ npm run dev

이렇게 하면 기본적으로 포트 3000에서 앱이 시작되지만 PORT 환경 변수를 설정하여 변경할 수 있습니다.

앱 사용

브라우저에서 Ngrok URL로 이동하여 Zoom 앱 홈 페이지를 표시합니다.

Zoom 앱은 브라우저에서 실행 중임을 알고 앱을 설치할 수 있는 옵션을 제공합니다.

설치 링크를 클릭하고 프롬프트에 따라 앱을 승인합니다. 앱을 생성할 때 권한을 부여한 경우 Zoom 클라이언트에서 앱이 열립니다.

이제 Zoom 앱이 Zoom에서 직접 실행되는 것을 볼 수 있습니다!

잘 했어! Zoom 앱을 생성, 설치 및 실행했습니다. 자유롭게 코드를 살펴보고 Zoom 앱 개발자로서 여정을 계속할 수 있는 방법에 대한 정보는 다음 섹션을 참조하십시오.

계속 학습

Zoom 앱을 소개하는 3부작 시리즈를 읽어주셔서 감사합니다! 이 시리즈가 도움이 되었기를 바라며 Zoom 앱이 제공하는 모든 도구를 사용하여 멋진 것을 만들 수 있는 영감을 얻었기를 바랍니다.

Zoom에 대해 배울 수 있는 설명서 및 추가 리소스에 대한 링크를 포함했습니다. 행복한 코딩!