GCP/Apps Script

Apps Script로 Google 서비스 기반의 간단한 예약 시스템 만들기

whistory 2023. 4. 27. 10:28

💡 Apps Script를 이용해 배포한 Webapp에서 입력 받은 데이터를
Google Sheets에 저장하고, Google Calendar 일정 등록하는 간단한 예약 시스템을 만들어본다.

Sequence

webapp 으로 배포한 html 페이지에서 개인정보와 예약일자를 입력 받는다.
입력한 날짜에 일정이 등록되어 있는지 확인한다.
Google Sheets에 이름과 날짜를 이력 관리 용도로 입력한다.
Google Calendar 에 일정을 등록한다.
예약 완료 이메일을 전송한다

1. 코드 작성

1.1 code.gs

function doGet(e) {
  Logger.log(JSON.stringify(e));
  var htmlOutput  = HtmlService.createTemplateFromFile('page.html');
  
  const sheetId  = "google_sheet_id";
  const sheetName = "calender 연동";
  const sheet     = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);

  if ( !e.parameter['username'] || !e.parameter['input_date'] || !e.parameter['phone'] || !e.parameter['email'] ) {
    htmlOutput.message = '입력한 값이 없습니다.';
  } else {
    htmlOutput.message = `${e.parameter['username']} 님 ${e.parameter['input_date']} 일에 예약이 접수되었습니다.`;
    // Google Sheets에 이력 등록
    sheet.getRange(sheet.getLastRow()+1, 1, 1, 4).setValues([[e.parameter['username'], e.parameter['phone'], e.parameter['email'], e.parameter['input_date']]])
                                                 .setBorder(true, true, true, true, true, true);
    // Google Calendar에 일정 등록
    setCalendar(e.parameter['username'], e.parameter['input_date']);
    // 완료메일 전송
    sendEmail(e.parameter['username'], e.parameter['email'], e.parameter['input_date']);
  }

  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

function getUrl() {
  const url = ScriptApp.getService().getUrl();
  return url;
}

/**
 * Google Calendar Event 등록
 * @param {string} name = 이름
 * @param {string} date = 날짜
 */
function setCalendar(name, date) {
  CalendarApp.createAllDayEvent(`${name}님 예약`, new Date(date));
}

/**
 * Send Email.
 * 이메일을 이용한 Notify.
 * @param {string} name       = 받는사람 이름
 * @param {string} recipient  = 받는사람 이메
 * @param {string} date       = 예약일
 */
function sendEmail(name, recipient, date) {
  try {
    const subject = `${name}님 ${date} 예약 완료 메일`;
    
    let html = `<h1>${name} 님.</h1>`;
        html += `<div>${date} 예약이 정상적으로 처리되었습니다.</div>`;
        html += `<div>이용해주셔서 감사합니다.</div>`;

    MailApp.sendEmail({
      to: recipient,
      subject: subject,
      htmlBody: html
    });

    return {"result": "200", "message" : "Success!"};

   } catch (error) {
      Logger.log(error.message);
      return {"result": "999", "message" : error.message};
  }
}

1.2 page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  </head>
  
  <body>
    <form action="<?= url ?>" method="GET">
      <div class="container">
        <div class="row frame">
          <h5 class="mt-4 text-center">Apps Script 웹앱 예약 시스템</h5>
          <h6 class="mb-4 text-center">예약정보 입력 Form</h6>

          <!-- create form element here -->
          <div class="form-group mb-4 box">
            성함 : <input type="text" class="form-control inp mb-3" id="username" name="username" placeholder="성함을 입력해주세요." autocomplete="off">      
          </div>
          <div class="form-group mb-4 box">
            전화번호 : <input type="text" class="form-control inp mb-3" id="phone" name="phone" placeholder="전화번호를 입력해주세요." autocomplete="off">      
          </div>
          <div class="form-group mb-4 box">
            이메일 : <input type="text" class="form-control inp mb-3" id="email" name="email" placeholder="이메일을 입력해주세요." autocomplete="off">      
          </div>
          <div class="form-group mb-4 box">
            예약날짜 : <input type="date" class="form-control inp mb-3" id="input_date" name="input_date" placeholder="입력" autocomplete="off">      
          </div> 
          <!-- create form until element here -->

          <sapn><?= message ?></sapn>

          <div class="form-group mt-4 mb-4 text-center">
            <input type="submit" class="btn btn-info" name="Submit" /><br>
          </div>
        </div>
      </div>
    </form>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
  </body>
</html>

1.3 웹 실행 화면

1.4 Google Sheets 이력 관리용 템플릿

2. 기능 실행

2.1 화면에서 실행

개인정보와 예약날짜를 입력하고 제출을 누른다.

2.2 Google Sheets의 행 추가

Google Sheets에서는 [2.1] 화면에서 입력한 정보들의 행이 추가 된 걸 볼 수 있다.

2.3 Google Calendar의 일정 추가

Google Calendar에서는 [2.1] 화면에서 입력한 일정이 등록된 것을 확인 할 수 있다.

2.4 완료 메일 전송

[2.1] 화면에서 입력한 이메일주소로 알림메일이 간것을 확인 할 수 있다.

3. 중복 처리

여러 사람이 동일한 일정에 예약을 하면 예약이 중복될 것이다.

이를 방지하기 위해 해당 날짜에 등록된 일정의 수를 확인한다.

function checkSchedule() {
  var checkDate = new Date("2023-04-26");
  var cnt = CalendarApp.getDefaultCalendar().getEventsForDay(checkDate);
  console.log(`${checkDate}일 의 일정 갯수는 ${cnt.length}`);

  checkDate = new Date("2023-04-28");
  cnt = CalendarApp.getDefaultCalendar().getEventsForDay(checkDate);
  console.log(`${checkDate}일 의 일정 갯수는 ${cnt.length}`);
}

이제 일정이 존재하면 return 하는 분기 처리를 추가한다.

function doGet(e) {
  Logger.log(JSON.stringify(e));
  var htmlOutput  = HtmlService.createTemplateFromFile('page.html');
  
  const sheetId  = "google_sheet_id";
  const sheetName = "calender 연동";
  const sheet     = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);

  if ( !e.parameter['username'] || !e.parameter['input_date'] || !e.parameter['phone'] || !e.parameter['email'] ) {
    htmlOutput.message = '입력한 값이 없습니다.';
  } else {
    const existCnt = CalendarApp.getDefaultCalendar().getEventsForDay(new Date(e.parameter['input_date']));
    // 해당날짜의 중복일정 여부 확인
    if ( existCnt < 1 ) {
      htmlOutput.message = `${e.parameter['username']} 님 ${e.parameter['input_date']} 일에 예약이 접수되었습니다.`;
      // Google Sheets에 이력 등록
      sheet.getRange(sheet.getLastRow()+1, 1, 1, 4).setValues([[e.parameter['username'], e.parameter['phone'], e.parameter['email'], e.parameter['input_date']]])
                                                   .setBorder(true, true, true, true, true, true);
      // Google Calendar에 일정 등록
      setCalendar(e.parameter['username'], e.parameter['input_date']);
      // 완료메일 전송
      sendEmail(e.parameter['username'], e.parameter['email'], e.parameter['input_date']);
    } else {
      htmlOutput.message = `${e.parameter['input_date']} 일은 이미 예약되어 있는 일정입니다.`;
    }
  }

  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

4. 일정 등록 방법

일정 등록 방법은 크게 두 가지다.

종일 일정 등록과,

시간대 일정을 등록.

/**
 * Google Calendar Event 등록
 * @param {string} name = 이름
 * @param {string} date = 날짜
 */
function setCalendar(name, date) {
  const event = CalendarApp.createEvent(`${name}님 예약`, new Date(`${date} 10:00:00`), new Date(`${date} 18:00:00`));
  console.log(event.getId());
  const eventAllDay = CalendarApp.createAllDayEvent(`${name}님 예약`, new Date(date));
  console.log(eventAllDay.getId());
}

'GCP > Apps Script' 카테고리의 다른 글

Apps Script로 Google Sheets의 특정 데이터들을 가진 시트들만 모아 분류하기 (0)	2023.05.22
Apps Script로 Google Sheets 기반의 상품 관리 시스템 만들기 (0)	2023.05.17
Apps Script로 Google Sheets의 Banding을 이용해 표 꾸미기 (0)	2023.04.25
Apps Script로 Google Sheets의 선택된 항목을 sidebar에서 수정하도록 구현 (셀 클릭 이벤트 대체) (0)	2023.04.21
Apps Script로 Google Sheets의 데이터를 선택 해 명세서나 세금계산서, invoice 등과 같은 양식을 pdf 파일로 생성해 이메일로 전송하기 (0)	2023.04.19

현재글Apps Script로 Google 서비스 기반의 간단한 예약 시스템 만들기

gws, S3, AppsScript, Glue, openapi, FormRecognizer, spreadsheet, AWS, Python, GoogleForms, CognitiveService, GAS, Google, googleappsscript, AZURE, KAKAO, kosis, bigquery, GCP, GoogleSheets,

Today :
Yesterday :

whistory

Apps Script로 Google 서비스 기반의 간단한 예약 시스템 만들기

Sequence

1. 코드 작성

1.1 code.gs

1.2 page.html

1.3 웹 실행 화면

1.4 Google Sheets 이력 관리용 템플릿

2. 기능 실행

2.1 화면에서 실행

2.2 Google Sheets의 행 추가

2.3 Google Calendar의 일정 추가

2.4 완료 메일 전송

3. 중복 처리

4. 일정 등록 방법

'GCP > Apps Script' 카테고리의 다른 글

'GCP/Apps Script'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Apps Script로 Google 서비스 기반의 간단한 예약 시스템 만들기

Sequence

1. 코드 작성

1.1 code.gs

1.2 page.html

1.3 웹 실행 화면

1.4 Google Sheets 이력 관리용 템플릿

2. 기능 실행

2.1 화면에서 실행

2.2 Google Sheets의 행 추가

2.3 Google Calendar의 일정 추가

2.4 완료 메일 전송

3. 중복 처리

4. 일정 등록 방법

'GCP > Apps Script' 카테고리의 다른 글

'GCP/Apps Script'의 다른글

관련글

티스토리툴바