ReservationApp
v1.0.0
麻省理工學院許可證
這是使用Google Apps腳本的用餐預訂系統。
Google Apps腳本是實現自動化過程的強大自動化工具之一。當Google Apps腳本可用於這種情況時，即使用戶遠離計算機，自動化也可以延續，這要歸功於雲計算。此外，Google Apps腳本可以通過Google電子表格服務來管理Google電子表格，並使用HTML快速部署Web應用程序，並使用最少的編碼來管理JavaScript。 Ref1 Ref2使用Google電子表格用作數據庫，並且Web應用程序用作用戶界面時，可以創建各種Web應用程序。在本報告中，為了幫助了解使用Google Apps腳本構建Web應用程序的關鍵方面，我想介紹一個簡單的Web應用程序。在這裡，作為示例，由Google Apps腳本，HTML和JavaScript創建的餐飲預訂系統作為Web應用程序實現。
該網絡應用程序是一個用餐預訂系統。該系統的基本條件如下。
在這裡，我想向您展示此Web應用程序的演示。在此演示中，最大座位數為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時，您可以在根文件夾中的以下2個文件。
ReservationApp 。sample_html.html 。獨立腳本ReservationApp是基本腳本，包括Google Apps腳本和HTML。當您想在Google端使用此應用程序時，只能使用此文件進行。文本文件sample_html.html在Google之外使用。當您想將此Web應用程序放在Google方面時（例如，要將其放在服務器上。），使用sample_html.html 。當時，您需要同時使用ReservationApp和sample_html.html 。
當然，您可以在此存儲庫中直接下載原始腳本。
詳細信息可以在官方文件中看到。
請使用ReservationApp的腳本編輯器進行設置。
https://script.google.com/macros/s/###/exec 。當您修改Web應用程序的Google Apps腳本時，請將部署修改為新版本。這樣，修改後的腳本反映在Web應用程序中。請注意。
您可以在我的報告“重新部署Web應用程序的情況下，而無需更改新IDE的Web應用程序”中的詳細信息。
當您想在Google方面使用此應用程序時，請使用此應用程序。
請與您的瀏覽器訪問https://script.google.com/macros/s/###/exec的Web應用程序URL。這樣，腳本是運行的。
首次運行腳本時，將在根文件夾中創建一個新的Google電子表格ReservationApp_database其中包括3張dashboard ， data和archive 。該電子表格用作儀表板，數據庫和舊數據的存檔。即使您將此電子表格移至特定文件夾時，腳本也可以。
然後，您可以在瀏覽器中看到帶有“預訂頁”標題的日曆。這是由電子表格儀表板表中的初始示例值創建的。您可以在儀表板紙上看到詳細信息。
看到日曆後，您可以通過單擊日曆來保留座位。這也可以在上述演示中看到。
例如，當您想在Google端外使用此應用程序時，例如，當您要在服務器上使用此應用程序時，請使用此應用程序。
在這種情況下，首先，請打開帶有文本編輯器的HTML數據的文本文件。並且，請在JavaScript中將您的Web應用程序URL設置為url 。
設置Web應用程序後，請使用瀏覽器訪問HTML。這樣，腳本是運行的。
首次運行腳本時，將在根文件夾中創建一個新的Google電子表格ReservationApp_database其中包括3張dashboard ， data和archive 。該電子表格用作儀表板，數據庫和舊數據的存檔。即使您將此電子表格移至特定文件夾時，腳本也可以。
然後，您可以在瀏覽器中看到帶有“預訂頁”標題的日曆。這是由電子表格儀表板表中的初始示例值創建的。您可以在儀表板紙上看到詳細信息。
看到日曆後，您可以通過單擊日曆來保留座位。這也可以在上述演示中看到。
該Web應用程序可以通過電子表格ReservationApp_database上的儀表板表進行管理。請打開電子表格ReservationApp_database儀表板板。 Database。您可以看到3列“變量”，“值”和“描述”。您可以在“ C”列的“描述”中看到每個值的詳細信息。列“ B”的初始值是測試的樣本值。因此，請將這些值修改為您的實際情況。
當您看到數據表時，當您已經將其保留為測試時，您可以看到數據。在此應用程序中，當腳本通過訪問Web應用程序運行時，今天之前的舊數據移至存檔表。例如，當您更改數據時，打開HTML時，更新的數據會反映在HTML中。請注意。
此應用程序可以設置臨時假期。在這種情況下，請手動將其放在數據表中。例如，當今天是2024年1月1日，您想將1月2日至2024年12月5日作為暫時假期，請手動輸入2024/01/02 2024/01/05的值，以及臨時的Yolarday，以及temporaryHoliday的列表，分別為“ f” f“ to” h h“ h”（“ start”（“ start”，“”，“”，“”，“”，“”，“”，“”）。此後，當您打開Web應用程序時，您可以在日曆中查看從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 ，以及保留日的時間，以及reservedDayTime到列的列，”此後，當您打開Web應用程序時，您可以在日曆中看到2024/01/06 12:00:00至2024/01/06 17:00:00的日常一天和時間。
關於預訂的取消，當您將“取消”放在“數據”表的“狀態”列中時，顯示日曆時會跳過此行。這樣，您可以在保留數據行時取消預訂。在當前階段，假定可以取消所有者的一方。因此，當用戶想取消預訂時，請告訴用戶發送電子郵件以取消它。可以在“儀表板”工作表的“協議”表中設置此消息。
請在ReservationApp的腳本編輯器中刪除腳本屬性spreadsheetId表格的關鍵和值。這樣，當您再次訪問Web應用程序時，將在根文件夾中創建一個新的電子表格。在這種情況下，舊電子表格未刪除。
此Web應用程序是一個簡單的腳本。因此，您可以自由修改複製腳本的腳本。因此，當您要添加和/或修改腳本時，請使用複制的腳本進行操作。
該Web應用程序使用Google Apps腳本創建的Web應用程序。在當前階段，對Web應用程序的最大訪問次數為30。在您的實際情況下，如果有可能同時訪問30多個用戶，則此應用程序可能不合適。請注意。
在此應用程序中，主要有2個功能doGet和putValues 。
doGet doGet用於從Google Apps腳本和Google外部訪問Web應用程序。 Google內部和外部之間的切換是使用查詢參數完成的。當您使用瀏覽器直接訪問Web應用程序URL時，將返回htmlservice.htmloutput。這樣，您可以在瀏覽器上看到日曆。另一方面，當您使用瀏覽器訪問sample_html.html時，通過在sample_html.html中請求fetch api下載日曆數據。這樣，您可以在瀏覽器上看到日曆。
putValues putValues用於從HTML側存儲數據。該功能通過假設並發訪問在鎖鎖下運行。通過單擊“提交”按鈕在HTML上進行預訂時，預訂數據將以Google Apps腳本為google.script.run for“ inside”和“外部”和“ fetch api”。在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
麻省理工學院
Tanaike
捐
V1.0.0（2024年1月22日）
頂部
