├── README.md ├── image ├── FireDBSeting.PNG ├── anonymous.PNG ├── aswebapp.PNG ├── cloneProject.PNG ├── inGS.PNG ├── privatekey.PNG └── roorURL.PNG ├── index.html ├── main.css.html ├── main.js.html ├── order.css.html ├── order.html ├── order.js.html ├── redirect.html └── 程式碼.gs /README.md: -------------------------------------------------------------------------------- 1 | # GroupBuyApp 2 | A web app based on google app script for group buying.   3 | 根據google script建立的團購網站 4 | # Project Demo 5 | [Demo](https://script.google.com/macros/s/AKfycbwSPNakaOxxDFGH8iHw_ZzQ3J7u3QpZY_ougEmyEQqpohJJiz4/exec) 6 | # Requirement 7 | - Google app script 8 | - Google Firebase Realtime Database 9 | # Note 10 | If you are interested the font-end page only. Here is the [codepen link](https://codepen.io/flyseed/pen/gegwLw). 11 |  本專案的css,html皆由sass,pug模板語言生成. 若想查看原始碼請移至[codepen](https://codepen.io/flyseed/pen/gegwLw) 12 | # Setup 13 | - Create a Firebase realtime database [here](https://console.firebase.google.com/) 14 |   建立一個Firebase realtime database [這裡](https://console.firebase.google.com/) 15 | - Click the gear next to the "Project Overview" >> project setting 16 |   點擊"Project Overview"旁的齒輪 >> 專案設定 17 |   ![setting](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/FireDBSeting.PNG?raw=true) 18 | - Click service account >> database private key  >> get the "firebaseID", "firebaseKey" 19 |   點擊服務帳戶 >> 資料庫秘鑰 >> 獲得 "firebaseID", "firebaseKey" 20 |   ![privatekey](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/privatekey.PNG?raw=true) 21 | - Clone the google app script project [here](https://script.google.com/d/1qr1JerP4FMWLoPUDt3aFT0pqpWA0-8Hvn0feltmziT1pQA7kbLEcgkqS/edit?usp=sharing) 22 |   建立本專案副本[這裡](https://script.google.com/d/1qr1JerP4FMWLoPUDt3aFT0pqpWA0-8Hvn0feltmziT1pQA7kbLEcgkqS/edit?usp=sharing) 23 |   ![](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/cloneProject.PNG?raw=true) 24 | - Deploy this project once for the rootUrl. select deploy and deploy as web app. 25 |   必須部署本專案一次來獲得rootUrl. 點擊發佈 >> 部署為網路應用程式 26 |   ![](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/aswebapp.PNG?raw=true) 27 | - Select "anonymous" at applictation access and click "deploy" 28 |   在具有應用程式存取權的使用者中,選取任何人甚至匿名使用者. 並點擊"部署" 29 |   ![](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/anonymous.PNG?raw=true)   30 | - Now, we have the rootUrl. 31 |   獲得rootUrl 32 | ![](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/roorURL.PNG?raw=true) 33 | - Change the following 3 parameters in "程式碼.gs" file : rootUrl, firebaseID, firebaseKey   34 |   修改在"程式碼.gs"檔案中的三個參數: rootUrl, firebaseID, firebaseKey 35 | ![](https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/master/image/inGS.PNG?raw=true) 36 | - Deploy this project again! 37 |   重新部署本專案 38 | 39 | -------------------------------------------------------------------------------- /image/FireDBSeting.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/FireDBSeting.PNG -------------------------------------------------------------------------------- /image/anonymous.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/anonymous.PNG -------------------------------------------------------------------------------- /image/aswebapp.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/aswebapp.PNG -------------------------------------------------------------------------------- /image/cloneProject.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/cloneProject.PNG -------------------------------------------------------------------------------- /image/inGS.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/inGS.PNG -------------------------------------------------------------------------------- /image/privatekey.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/privatekey.PNG -------------------------------------------------------------------------------- /image/roorURL.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yuan-Yu/GroupBuyApp/3944ad86963e2c4ed267a9b8c360d287e4db89df/image/roorURL.PNG -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |
16 |
17 |
M E N U
18 |
19 |
20 |
21 |
22 |
23 |
{{drink.name}}
24 |
25 |
26 |
中:{{drink.small}}
/ 27 |
大:{{drink.large}}
28 |
29 |
30 |
{{drink.description}}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
O R D E R
39 |
40 |
41 |
42 |
43 |
44 |
姓 名 :
45 | 46 |
47 |
48 |
飲 品 :
49 |
{{preview.name}}
50 |
51 |
52 |
大 小 :
53 | 54 | 55 | 56 | 57 |
58 |
59 |
配 料 :
60 | 61 | 62 |
63 |
64 |
價 格 :
{{price}} 65 |
66 |
67 |
備 註 :
68 | 69 |
70 |
71 |
72 |
73 |
冰度
74 |
75 |
76 |
多 冰
77 |
正 常 冰
78 |
少 冰
79 |
微 冰
80 |
去 冰
81 |
完 全 去 冰
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
甜度
96 |
97 |
98 |
多 糖
99 |
正 常 糖
100 |
少 糖
101 |
半 糖
102 |
微 糖
103 |
無 糖
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
{{message}} 118 |
119 |
120 |
121 |
122 | 125 |
查 看 目 前 訂 購
126 |
創 建 新 的 訂 單
127 |
128 |
129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /main.css.html: -------------------------------------------------------------------------------- 1 | 293 | 294 | -------------------------------------------------------------------------------- /main.js.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /order.css.html: -------------------------------------------------------------------------------- 1 | 75 | 76 | -------------------------------------------------------------------------------- /order.html: -------------------------------------------------------------------------------- 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 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
姓 名飲 品大小甜 度冰 量配 料價 格備 註
{{drink.name}}{{drink.drink}}{{drink.size}}{{drink.sugar}}{{drink.ice}}{{drink.add}}{{drink.price}}{{drink.extraInfo}}
合計{{total}}回訂購單
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /order.js.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /redirect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /程式碼.gs: -------------------------------------------------------------------------------- 1 | //********************** Project Config *****************************// 2 | var rootUrl = 'Your project root URL' // Look like: https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXX/exec 3 | var firebaseID = "Your FirebaseID"; 4 | var firebaseKey = "Your Firebase Prive Key"; 5 | //********************** Project Config end *****************************// 6 | 7 | 8 | //****** Routing Table for Get method *******// 9 | var doMap = {'index':index,'init':init, 'getOrder': getOrder}; 10 | //****** Routing Table for Post method *******// 11 | var postMap = {'postOrder':postOrder}; 12 | var firebaseUrl = "https://"+ firebaseID+".firebaseio.com/"; 13 | 14 | //******* Route *****/// 15 | function doGet(e) { 16 | var parameter = e.parameter; 17 | if (typeof(parameter['do']) == 'undefined'){ 18 | parameter['do'] = 'init'; 19 | } 20 | return doMap[parameter['do']](parameter); 21 | } 22 | 23 | function doPost(params) { 24 | return postMap[params['do']](params); 25 | } 26 | 27 | 28 | //********************* Controllers *************************// 29 | function index(parameter){ 30 | var id = parameter['id']; 31 | var htmlTemp =HtmlService.createTemplateFromFile('index'); 32 | htmlTemp.url = rootUrl+'?do=index&id='+id; 33 | htmlTemp.id = id; 34 | htmlTemp.sheeturl = rootUrl +'?do=getOrder&id='+ id; 35 | htmlTemp.root = rootUrl; 36 | return htmlTemp.evaluate(); 37 | } 38 | 39 | function init(params){ 40 | var id = Utilities.getUuid(); 41 | var htmlTemp =HtmlService.createTemplateFromFile('redirect'); 42 | htmlTemp.url = rootUrl+'?do=index&id='+id; 43 | return htmlTemp.evaluate(); 44 | } 45 | 46 | function getOrder(params){ 47 | var id = params['id'] 48 | var htmlTemp = HtmlService.createTemplateFromFile('order.html'); 49 | var drinkList = getOrderFromDB(id); 50 | htmlTemp.drinkList = JSON.stringify(drinkList); 51 | htmlTemp.url = rootUrl+'?do=index&id='+id; 52 | return htmlTemp.evaluate(); 53 | } 54 | function postOrder(params) { 55 | var id = params.id; 56 | var name = params.name; 57 | var drink = params.drink; 58 | var size = params.size; 59 | var sugar = params.sugar; 60 | var ice = params.ice; 61 | var price = params.price; 62 | var add = params.add; 63 | var extraInfo = params.extraInfo; 64 | postOrderToDB(id,name,drink,size,sugar,ice,price,add,extraInfo); 65 | } 66 | 67 | 68 | //********************* Interal functions *************************// 69 | 70 | // for inculd css,js into html 71 | function include(filename) { 72 | return HtmlService.createHtmlOutputFromFile(filename) 73 | .getContent(); 74 | } 75 | 76 | // communicate with Firebase 77 | function getOrderFromDB(orderID){ 78 | var tmp = JSON.parse(UrlFetchApp.fetch(firebaseUrl+'Orders/'+orderID+'.json'+'?auth='+firebaseKey)); 79 | drinkList = []; 80 | for(var k in tmp) drinkList.push(tmp[k]) ; 81 | return tmp; 82 | } 83 | function postOrderToDB(orderID,name,drink,size,sugar,ice,price,add,extraInfo){ 84 | var order = { 85 | 'name':name, 86 | 'drink':drink, 87 | 'size': size, 88 | 'sugar':sugar, 89 | 'ice':ice, 90 | 'price': price, 91 | 'add':add, 92 | 'ispayed': false, 93 | 'extraInfo':extraInfo 94 | } 95 | var options = { 96 | 'method':'post', 97 | 'payload': JSON.stringify(order) 98 | } 99 | UrlFetchApp.fetch(firebaseUrl+'Orders/'+orderID+'.json'+'?auth='+firebaseKey,options) 100 | } 101 | 102 | 103 | --------------------------------------------------------------------------------