코딩 수준: 중급
소요 시간: 25분
프로젝트 유형: Google Chat 앱
목표
- 솔루션의 작동 방식을 이해합니다.
- 솔루션 내에서 Apps Script 서비스가 하는 작업을 이해합니다.
- 환경을 설정합니다.
- 스크립트를 설정합니다.
- 스크립트를 실행합니다.
이 솔루션 정보
Google Chat의 채팅 메시지 (DM) 또는 스페이스에서 Google Calendar에 회의를 예약합니다. 제목, 시작 시간, 시간 등 회의에 관한 구체적인 세부정보를 설정하거나 즉석 회의 예약에 기본 설정을 사용할 수 있습니다.
작동 방식
Chat 앱 스크립트는 슬래시 명령어 및 대화상자를 사용하여 사용자로부터 회의 세부정보를 가져오고 Calendar 일정을 예약합니다. 스크립트에는 필요에 맞게 맞춤설정할 수 있는 기본 회의 설정이 포함되어 있습니다.
Apps Script 서비스
이 솔루션은 다음 서비스를 사용합니다.
- Calendar 서비스: 제공된 회의 정보에서 캘린더 일정을 만듭니다.
- 기본 서비스:
Session
클래스를 사용하여 스크립트의 시간대를 가져옵니다. Calendar는 이벤트를 예약할 때 이 시간대를 사용합니다.
- 유틸리티 서비스: 캘린더 일정의 날짜 형식을 지정하고 이벤트 URL을 가져오는 데 도움이 되도록 이벤트 ID를 인코딩합니다.
기본 요건
환경 설정
Google Cloud 콘솔에서 Cloud 프로젝트 열기
아직 열려 있지 않으면 이 샘플에 사용할 Cloud 프로젝트를 엽니다.
- Google Cloud 콘솔에서 프로젝트 선택 페이지로 이동합니다.
Cloud 프로젝트 선택
- 사용할 Google Cloud 프로젝트를 선택합니다. 또는 프로젝트 만들기를 클릭하고 화면에 표시된 안내를 따릅니다. Google Cloud 프로젝트를 만드는 경우 프로젝트에 결제를 사용 설정해야 할 수 있습니다.
API 사용 설정
Google API를 사용하려면 먼저 Google Cloud 프로젝트에서 사용 설정해야 합니다.
단일 Google Cloud 프로젝트에서 하나 이상의 API를 사용 설정할 수 있습니다.
모든 Chat 앱에는 동의 화면 구성이 필요합니다. 앱의 OAuth 동의 화면을 구성하면 Google에서 사용자에게 표시할 내용이 정의되고 나중에 게시할 수 있도록 앱이 등록됩니다.
-
Google Cloud 콘솔에서 메뉴 menu
> API 및 서비스
> OAuth 동의 화면으로 이동합니다.
OAuth 동의 화면으로 이동
- 사용자 유형에서 내부를 선택한 다음 만들기를 클릭합니다.
- 앱 등록 양식을 작성한 후 저장 및 계속을 클릭합니다.
지금은 범위 추가를 건너뛰고 저장하고 계속을 클릭해도 됩니다.
향후 Google Workspace 조직 외부에서 사용할 앱을 만들 때는 사용자 유형을 외부로 변경한 후 앱에 필요한 승인 범위를 추가해야 합니다.
- 앱 등록 요약을 검토합니다. 변경하려면 수정을 클릭합니다. 앱 등록이 올바른 것으로 보이면 대시보드로 돌아가기를 클릭합니다.
스크립트 설정
Apps Script 프로젝트 만들기
- 다음 버튼을 클릭하여 Google Chat에서 회의 예약 Apps Script 프로젝트를 엽니다.
프로젝트 열기
- 개요 info_outline를 클릭합니다.
- 개요 페이지에서 '사본 만들기' 를 클릭합니다.
Cloud 프로젝트 번호 복사
-
Google Cloud 콘솔에서 메뉴 menu
> IAM 및 관리자
> 설정으로 이동합니다.
IAM & 관리자 설정으로 이동
- 프로젝트 번호 필드에서 값을 복사합니다.
Apps Script 프로젝트의 Cloud 프로젝트 설정
- 복사한 Apps Script 프로젝트에서 프로젝트 설정 을 클릭합니다.
- Google Cloud Platform(GCP) 프로젝트에서 프로젝트 변경을 클릭합니다.
- GCP 프로젝트 번호에 Google Cloud 프로젝트 번호를 붙여넣습니다.
- 프로젝트 설정을 클릭합니다.
테스트 배포 만들기
- 복사한 Apps Script 프로젝트에서 배포
> 테스트 배포를 클릭합니다.
- 이후 단계에서 사용할 헤드 배포 ID를 복사하고 완료를 클릭합니다.
- Google Cloud 콘솔에서 Chat API 페이지로 이동합니다.
Chat API로 이동
- 구성을 클릭합니다.
- 다음 정보로 Chat API를 구성합니다.
- 이름:
Meeting Scheduler
- 아바타 URL: 최소 크기가 256x256픽셀인 이미지를 가리키는 URL을 추가합니다.
- 설명:
Quickly create meetings.
- 기능: 사용자가 앱에 직접 메시지를 보내고 스페이스에 추가할 수 있도록 하려면 두 체크박스를 모두 선택합니다.
- 연결 설정: Apps Script를 클릭하고 헤드 배포 ID를 입력합니다.
- 슬래시 명령어: 다음 단계에 따라
/help
및 /schedule_Meeting
의 슬래시 명령어를 추가합니다.
- 슬래시 명령어 추가를 클릭하고 다음 정보로 구성합니다.
- 이름:
/help
- 명령어 ID:
1
- 설명:
Learn what this app does.
- 슬래시 명령어 추가를 다시 클릭하고 다음 정보로 구성합니다.
- 이름:
/schedule_Meeting
- 명령어 ID:
2
- 설명:
Schedule a meeting.
- 대화상자 열기 체크박스를 선택합니다.
- 권한: 내 도메인의 특정 사용자 및 그룹을 선택하고 이메일 주소를 입력합니다.
- 저장을 클릭하고 페이지를 새로고침합니다.
- 구성 페이지의 앱 상태에서 상태를 활성 - 사용자에게 제공됨으로 설정합니다.
- 저장을 클릭합니다.
스크립트 실행
- Google Chat을 엽니다.
- 채팅 시작 add을 클릭합니다.
- 앱 이름
Meeting Scheduler
을 검색합니다.
hello
와 같은 초기 메시지를 보내 승인 메시지를 표시합니다.
앱이 응답하면 구성을 클릭하고 앱을 승인합니다. OAuth 동의 화면에 이 앱은 확인되지 않았습니다라는 경고가 표시되면 고급 >
{Project Name}으로 이동(안전하지 않음)을 선택하여 계속 진행합니다.
앱에 /schedule_Meeting
를 전송합니다.
대화상자에서 초대 대상자 이메일 주소를 하나 이상 추가합니다. 다른 필드를 업데이트하거나 기본 항목을 사용할 수 있습니다.
제출을 클릭합니다.
회의를 보려면 Calendar 일정 열기를 클릭합니다.
코드 검토
이 솔루션의 Apps Script 코드를 검토하려면 아래의 소스 코드 보기를 클릭합니다.
소스 코드 보기
Dialog.gs
/**
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Form input dialog as JSON.
* @return {object} JSON-formatted cards for the dialog.
*/
function getInputFormAsDialog_(options) {
const form = getForm_(options);
return {
'actionResponse': {
'type': 'DIALOG',
'dialogAction': {
'dialog': {
'body': form
}
}
}
};
}
/**
* Form JSON to collect inputs regarding the meeting.
* @return {object} JSON-formatted cards.
*/
function getForm_(options) {
const sections = [];
// If errors present, display additional section with validation messages.
if (options.errors && options.errors.length) {
let errors = options.errors.reduce((str, err) => `${str}• ${err}<br>`, '');
errors = `<b>Errors:</b><br><font color="#ba0000">${errors}</font>`;
const errorSection = {
'widgets': [
{
textParagraph: {
text: errors
}
}
]
}
sections.push(errorSection);
}
let formSection = {
'header': 'Schedule meeting and send email to invited participants',
'widgets': [
{
'textInput': {
'label': 'Event Title',
'type': 'SINGLE_LINE',
'name': 'subject',
'value': options.subject
}
},
{
'textInput': {
'label': 'Invitee Email Address',
'type': 'SINGLE_LINE',
'name': 'email',
'value': options.invitee,
'hintText': 'Add team group email'
}
},
{
'textInput': {
'label': 'Description',
'type': 'MULTIPLE_LINE',
'name': 'body',
'value': options.body
}
},
{
'textInput': {
'label': 'Meeting start date & time',
'type': 'SINGLE_LINE',
'name': 'date',
'value': options.startTime,
'hintText': 'mm/dd/yyyy H:MM'
}
},
{
'selectionInput': {
'type': 'DROPDOWN',
'label': 'Meeting Duration',
'name': 'duration',
'items': [
{
'text': '15 minutes',
'value': '15',
'selected': options.duration === 15
},
{
'text': '30 minutes',
'value': '30',
'selected': options.duration === 30
},
{
'text': '45 minutes',
'value': '45',
'selected': options.duration === 45
},
{
'text': '1 Hour',
'value': '60',
'selected': options.duration === 60
},
{
'text': '1.5 Hours',
'value': '90',
'selected': options.duration === 90
},
{
'text': '2 Hours',
'value': '120',
'selected': options.duration === 120
}
]
}
}
],
'collapsible': false
};
sections.push(formSection);
const card = {
'sections': sections,
'name': 'Google Chat Scheduled Meeting',
'fixedFooter': {
'primaryButton': {
'text': 'Submit',
'onClick': {
'action': {
'function': 'handleFormSubmit'
}
},
'altText': 'Submit'
}
}
};
return card;
}
/**
* Confirmation dialog after a calendar event is created successfully.
* @param {string} url The Google Calendar Event url for link button
* @return {object} JSON-formatted cards for the dialog
*/
function getConfirmationDialog_(url) {
return {
'actionResponse': {
'type': 'DIALOG',
'dialogAction': {
'dialog': {
'body': {
'sections': [
{
'widgets': [
{
'textParagraph': {
'text': 'Meeting created successfully!'
},
'horizontalAlignment': 'CENTER'
},
{
'buttonList': {
'buttons': [
{
'text': 'Open Calendar Event',
'onClick': {
'openLink': {
'url': url
}
}
}
]
},
'horizontalAlignment': 'CENTER'
}
]
}
],
'fixedFooter': {
'primaryButton': {
'text': 'OK',
'onClick': {
'action': {
'function': 'closeDialog'
}
}
}
}
}
}
}
}
}
}
다음 단계