ReservationApp
v1.0.0
MIT 라이센스
이것은 Google Apps 스크립트를 사용하는 식당 예약 시스템입니다.
Google Apps 스크립트는 자동화 프로세스를 달성하기위한 강력한 자동화 도구 중 하나입니다. Google Apps 스크립트가 상황에 사용될 수있는 경우 사용자가 컴퓨터에서 떨어져 있더라도 클라우드 컴퓨팅 덕분에 자동화가 계속 될 수 있습니다. 또한 Google Apps 스크립트는 Google 스프레드 시트 서비스를 통해 Google 스프레드 시트를 관리하고 최소한의 코딩으로 HTML 및 JavaScript를 사용하여 웹 앱을 빠르게 배포 할 수 있습니다. ref1 ref2 Google 스프레드 시트를 데이터베이스로 사용하고 웹 앱을 사용자 인터페이스로 사용하면 다양한 웹 응용 프로그램을 만들 수 있습니다. 이 보고서에서 Google Apps 스크립트를 사용하여 웹 응용 프로그램을 구축하는 데있어 주요 측면을 이해하기 위해 간단한 웹 응용 프로그램을 소개하고 싶습니다. 여기서 샘플로서 Google Apps Script, HTML 및 JavaScript에서 만든 식당 예약 시스템은 웹 응용 프로그램으로 구현됩니다.
이 웹 응용 프로그램은 식사 예약 시스템입니다. 이 시스템의 기본 조건은 다음과 같습니다.
여기 에서이 웹 응용 프로그램의 데모를 보여 드리고자합니다. 이 데모에서 최대 좌석 수는 50입니다. 평균 식사 시간은 2 시간입니다. 단계 시간은 30 분입니다. 이 조건 하에서 다음 흐름이 실행됩니다.
이 시연에서 오늘은 2024 년 1 월 22 일입니다. 따라서이 달력의 첫날은 2024 년 1 월 23 일입니다.
이 흐름이 완료되면 Google 스프레드 시트의 "데이터"시트는 다음과 같습니다. 2 개의 예약이 저장되어 있음을 알 수 있습니다.
다음 섹션에서는이 응용 프로그램의 사용법을 소개하고 싶습니다.
이 응용 프로그램을 설치하기 위해 원래 스크립트를 간단히 복사하기위한 스크립트를 만들었습니다. 이 예약 시스템을 구현하기위한 스크립트를 복사하려면 다음 스크립트를 실행하십시오.
Google Apps 스크립트의 스크립트 편집기에 다음 스크립트를 복사하여 붙여 넣으십시오. 물론이 저장소 에서이 스크립트와 HTML을 직접 복사하여 붙여 넣을 수도 있습니다.
function myFunction ( ) {
const fileIds = [
"1NpxFPiuANcbRrnPTRSUgwjNaprB98cqz6KQUBl_IZLYK-Fhq8skZP0XB" ,
"1JrAE1-MqD7OjOWKbSGI5EDwJVXVl4zIK"
] ;
fileIds . forEach ( id => {
const file = DriveApp . getFileById ( id ) ;
file . makeCopy ( file . getName ( ) ) ;
} ) ;
} 이 함수 myFunction 실행되면 루트 폴더에서 다음 두 파일을 사용할 수 있습니다.
ReservationApp 입니다.sample_html.html 입니다. 독립형 스크립트 ReservationApp Google Apps 스크립트 및 HTML을 포함한 기본 스크립트입니다. Google 측 에서이 응용 프로그램을 사용하려면이 파일 만 사용하여 수행 할 수 있습니다. 텍스트 파일 sample_html.html 은 Google 외부에서 사용됩니다. 이 웹 애플리케이션을 Google 측에서 제외시키려면 (예 : 서버에 넣으려고합니다.), sample_html.html 이 사용됩니다. 당시 ReservationApp 및 sample_html.html 모두 사용해야합니다.
물론이 저장소에서 원본 스크립트를 직접 다운로드 할 수 있습니다.
자세한 정보는 공식 문서에서 볼 수 있습니다.
ReservationApp 의 스크립트 편집기를 사용하여 이것을 설정하십시오.
https://script.google.com/macros/s/###/exec 과 같습니다.Web Apps의 Google Apps 스크립트를 수정하면 배포를 새 버전으로 수정하십시오. 이를 통해 수정 된 스크립트는 웹 앱에 반영됩니다. 이것에 대해 조심하십시오.
내 보고서에서 "New IDE를위한 웹 앱의 URL을 변경하지 않고 웹 앱을 재배포하는 것"에서 이것의 세부 사항을 볼 수 있습니다.
이 응용 프로그램을 Google 측에서 사용하려면이 응용 프로그램을 사용하십시오.
브라우저와 함께 https://script.google.com/macros/s/###/exec 의 Web Apps URL에 액세스하십시오. 이로 인해 스크립트가 실행됩니다.
스크립트를 처음으로 실행하면 루트 폴더에서 3 장의 dashboard , data 및 archive 포함한 새로운 Google 스프레드 시트 ReservationApp_database 생성됩니다. 이 스프레드 시트는 대시 보드, 데이터베이스 및 이전 데이터에 대한 아카이브로 사용됩니다. 이 스프레드 시트를 특정 폴더로 이동하더라도 스크립트가 작동합니다.
그런 다음 브라우저에서 "예약 페이지"라는 제목이있는 캘린더를 볼 수 있습니다. 스프레드 시트의 대시 보드 시트의 초기 샘플 값에 의해 생성됩니다. 대시 보드 시트에서 세부 사항을 볼 수 있습니다.
캘린더가 표시되면 캘린더를 클릭하여 좌석을 예약 할 수 있습니다. 이것은 위의 데모에서도 볼 수 있습니다.
예를 들어 서버 에서이 응용 프로그램을 사용하려는 경우 Google 측 밖에서이 응용 프로그램을 사용하려는 경우이를 사용하십시오.
이 경우 먼저 텍스트 편집기와 함께 HTML 데이터를 포함한 텍스트 파일을여십시오. 그리고 JavaScript에서 웹 앱 URL을 url 로 설정하십시오.
웹 앱이 설정된 후 브라우저와 함께 HTML에 액세스하십시오. 이로 인해 스크립트가 실행됩니다.
스크립트를 처음으로 실행하면 루트 폴더에서 3 장의 dashboard , data 및 archive 포함한 새로운 Google 스프레드 시트 ReservationApp_database 생성됩니다. 이 스프레드 시트는 대시 보드, 데이터베이스 및 이전 데이터에 대한 아카이브로 사용됩니다. 이 스프레드 시트를 특정 폴더로 이동하더라도 스크립트가 작동합니다.
그런 다음 브라우저에서 "예약 페이지"라는 제목이있는 캘린더를 볼 수 있습니다. 스프레드 시트의 대시 보드 시트의 초기 샘플 값에 의해 생성됩니다. 대시 보드 시트에서 세부 사항을 볼 수 있습니다.
캘린더가 표시되면 캘린더를 클릭하여 좌석을 예약 할 수 있습니다. 이것은 위의 데모에서도 볼 수 있습니다.
이 웹 애플리케이션은 스프레드 시트 ReservationApp_database 의 대시 보드 시트에서 관리 할 수 있습니다. Spreadsheet ReservationApp_database 에서 대시 보드 시트를 열십시오. "변수", "값"및 "설명"의 3 개의 열을 볼 수 있습니다. "c"열의 "설명"에서 각 값의 세부 사항을 볼 수 있습니다. "B"열의 초기 값은 테스트의 샘플 값입니다. 따라서 해당 값을 실제 상황으로 수정하십시오.
데이터 시트가 표시되면 이미 테스트로 예약 한 경우 데이터를 볼 수 있습니다. 이 응용 프로그램에서는 웹 앱에 액세스하여 스크립트를 실행할 때 오늘 이전의 이전 데이터가 아카이브 시트로 이동됩니다. 예를 들어, 데이터를 변경하면 HTML이 열릴 때 업데이트 된 데이터가 HTML에 반영됩니다. 이것에 대해 조심하십시오.
이 응용 프로그램은 일시적인 휴가를 설정할 수 있습니다. 이 경우 수동으로 데이터 시트에 넣으십시오. 예를 들어, 오늘이 2024 년 1 월 1 일이고 2024 년 1 월 2 일부터 12 월 5 일까지 임시 휴가로 설정하려면 각각 2024/01/02 , 2024/01/05 의 값을 "H"( "시작", " temporaryHoliday ", "상태"열에 수동으로 입력하십시오. 그런 다음 웹 앱을 열면 2024 년 1 월 2 일부터 1 월 5 일까지 일정에서 시간을 볼 수 있습니다.
예약 된 주간과 시간을 설정 해야하는 경우가있을 수 있습니다. 예를 들어, 오늘이 2024 년 1 월 1 일이고 2024 년 1 월 6 일에 12:00에서 17:00으로, 예약 된 주간과 시간으로, 2024/01/06 12:00:00 , 2024/01/06 17:00:00 의 값을 수동으로 입력하고 "h"( " reservedDayTime "( " 그 후, 웹 앱을 열면 캘린더에서 2024/01/06 12:00:00 ~ 2024/01/06 17:00:00 에서 예약 된 주간과 시간을 볼 수 있습니다.
예약 취소에 대해, "데이터"시트의 "상태"열에 "취소"를 넣을 때이 행은 캘린더가 표시되면 건너 뜁니다. 이를 통해 데이터 행을 유지하는 동안 예약을 취소 할 수 있습니다. 현재 단계에서는 소유자의 측면에서 취소를 수행 할 수 있다고 가정합니다. 따라서 사용자가 예약을 취소하려면 사용자에게 이메일을 보내서 취소하도록 알려주십시오. 이 메시지는 "대시 보드"시트의 "계약 보존"으로 설정할 수 있습니다.
ReservationApp 의 스크립트 편집기에서 스크립트 속성의 spreadsheetId 의 키와 값을 모두 삭제하십시오. 이를 통해 웹 앱에 다시 액세스하면 루트 폴더에 새 스프레드 시트가 생성됩니다. 이 경우 이전 스프레드 시트는 삭제되지 않습니다.
이 웹 응용 프로그램은 간단한 스크립트입니다. 따라서 복사 된 스크립트의 스크립트를 자유롭게 수정할 수 있습니다. 따라서 스크립트를 추가 및/또는 수정하려면 복사 된 스크립트를 사용하여 수행하십시오.
이 웹 응용 프로그램은 Google Apps 스크립트에서 만든 웹 앱을 사용합니다. 현재 단계에서 웹 앱에 대한 최대 동시 액세스 수는 30입니다. 실제 상황에서 30 명 이상의 사용자가 동시에 액세스 할 가능성이 있으면이 응용 프로그램이 적합하지 않을 수 있습니다. 이것에 대해 조심하십시오.
이 애플리케이션에는 주로 2 putValues doGet 이 있습니다.
doGet doGet Google Apps 스크립트와 Google 외부의 웹 앱에 액세스하는 데 사용됩니다. Google 내부와 외부 사이의 전환은 쿼리 매개 변수를 사용하여 수행됩니다. 브라우저를 사용하여 웹 앱 URL에 직접 액세스하면 클래스 htmlservice.htmloutput이 반환됩니다. 이를 통해 브라우저에서 캘린더를 볼 수 있습니다. 반면, 브라우저를 사용하여 sample_html.html 에 액세스하면 sample_html.html 에서 Fetch API와 함께 요청하여 캘린더 데이터가 다운로드됩니다. 이를 통해 브라우저에서 캘린더를 볼 수 있습니다.
putValues putValues HTML 측에서 데이터를 저장하는 데 사용됩니다. 이 함수는 동시 액세스를 가정하여 잠금 서비스에서 실행됩니다. 제출 버튼을 클릭하여 HTML에서 예약이 실행되면 예약 데이터는 google.script.run 사용하여 Google Apps Script 측로 전송됩니다. Google Apps 스크립트에서 제출 된 데이터가 복제되지 않으면 데이터가 "데이터"시트에 넣고 다음 이메일이 사용자와 소유자 모두에게 전송됩니다.
--- Reservation information ---
Date: 2024-01-01 10:00 to 2024-01-01 12:00
Reserved seats: 2
Name: sample1
Email: sample1@###
Phone: '123
Comment: sample comment
MIT
TANAIKE
기부
v1.0.0 (2024 년 1 월 22 일)
맨 위
