阿旺師磨書坊: EZoApp 範例 - 設計小吃店訂購單

一、利用 Google製作表單

方法:雲端硬碟 / 新增 /更多 /google 表單

表單說明 : 阿旺小吃店訂單

題目1 : 芋圓

題型:單行文字

題目2 : 鬆餅

題型:單行文字

題目3 : 醉蝦

題型:單行文字

題目4 : 總額

題型:單行文字

題目5 : 訂餐人電話

題型:單行文字

Google表單參考圖:

二、以 EZoApp設計page

第1 個page , id : home

插入Header元件，text : 阿旺小吃店

放2 個 button元件

左邊 button，text : Google 表單 (查看Google 表單回應)，theme:b(反白) , href: sheet (第3個page 的 id)

右邊 button，text : 檢視訂單，theme:b(反白), href: orderpage (第2個page 的 id)

插入 image 元件，src : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3OXFPhJU0eo5JS0HmlaBw3r3nxFY0xt7bohVucrRg1Jtl1xBQLyZQQGXQr4HXCDWTxDzRyNjrrU_esnGHLn1xeZbhyphenhyphenV9-912CGzkj9WgRs-OVGM5GYfS57_ZFbb52x-VnHSzEhon0kA/s400-Ic42/logo.jpg

插入 grid 元件, columns :2 (grid 有二欄)

Grid 第一列

左欄

插入 icon元件，text :芋圓，
background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9n5DJnxGC_hDtrKN3f713qKqHHeXmokRLbxBRcwySBPR2KQL5Oy_yF_ckUBcvPGNcVWzyA6zoXIhhgL7cYyqWeBvwsXU8G4XxTiLBtdSPQvyCDmV4LQvim73sjNGWw-c9G2kZcHT0Fiw/s300-Ic42/taro_ball.jpg

右欄

插入 text-input 元件

Fieldcontain, label : 每份50元
text-input, id : taro_ball, type:number(type 有三種值，text:文字;number:數字，可按↑i增減數字;password:密碼，數字以 . 顯示)

Grid 第二列

左欄

插入 icon元件，text : 鬆餅，
background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQzglny7zw2mwwBzKD-Xyv3K7hH2f71UU-UG2E_xIx9WNJA6sz8Sp5cj4Y6KyxkrKg_C6ZdhLg-M18HyijpU__RKiu6Szlyp0azqLyZ9WtcQsp5OEuADbV0WVP8jgdqM5oS9bg_VNm8M/s300-Ic42/Waffle.jpg

右欄

插入 text-input 元件

Fieldcontain, label : 每份100元

text-input, id : waffle, type:number

Grid 第三列

左欄

插入 icon元件，text : 醉蝦，
background-image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTJgzxszjN-ysow4W0-_W28A-BpWWPjNM1jpzoeb622ckuNPq7qU_ZHt5FZBuA-2bjrU08M3DBb-jhlz5nXpKFQfxKJvV_MPx3hgR7234jBJbjIJA293M5S6Z1ECCBtEiVXw8nmo8fpw/s300-Ic42/shrimp.jpg

右欄

插入 text-input 元件

Fieldcontain, label : 每份150元

text-input, id : shrimp, type:number

插入 grid 元件, columns :1 (grid 有一欄)

插入 text-input 元件

Fieldcontain, label : 訂餐人電話

text-input, id : phone, type:text

第1 個page設計參考圖:

第二個page，id: orderpage

插入 header元件，text: 阿旺小吃店

插入 grid元件, columns :2

左欄

插入 gk-text元件，text: 訂餐人電話, style : font-size:14pt

插入 gk-text元件，text: 芋圓, style : font-size:14pt

插入 gk-text元件，text: 鬆餅, style : font-size:14pt

插入 gk-text元件，text: 醉蝦, style : font-size:14pt

插入 gk-text元件，text: 總計:, style : font-size:14pt

右欄

插入 gk-text元件，id :order_phone, text: text, style : font-size:14pt

插入 gk-text元件，id :order_ taro_ball, text: text, style : font-size:14pt

插入 gk-text元件，id :order_waffle, text: text, style : font-size:14pt

插入 gk-text元件，id :order_shrimp, text: text, style : font-size:14pt

插入 gk-text元件，id :order_total, text: text, style : font-size:14pt

在 html標籤內第23列輸入 :

<a href>送給 Google表單</a>

第2 個page設計參考圖:

第三個page， id: sheet

插入 google-sheets-table元件

Key: 16FyE-ZFs0czL4-A2bb4oiNiYWs6tlZ0WZRLMIJuLLZ4

Gid: 1583175438

Google 表單 /查看回應

網址列:https://docs.google.com/spreadsheets/d/16FyE-ZFs0czL4-A2bb4oiNiYWs6tlZ0WZRLMIJuLLZ4/edit#gid=1583175438

Key是d 後面的紅色字，gid是 gid=後面的紅色字

插入 footer元件，text:留空;插入 icon元件，href:home，icon:back，iconPOS:notext

第3 個page設計參考圖:

在 JS標籤輸入 :

var js_phone, js_taro_ball, js_waffle, js_shrimp, js_total;

var url_0 = 'https://docs.google.com/forms/d/e/1mzNjz_goObN9Nptq-cu9zQZd1bZ8GAeFmP93YvMP7Sg/formResponse?';

var para_phone = 'entry_1435064460=';

var para_taro_ball = '&entry_1538013691=';

var para_waffle = '&entry_171276427=';

var para_shrimp = '&entry_1807832216=';

var para_total = '&entry_811445316=';

var para_6 = '&submit=Submit';

$(document).on('pageinit', function () {

js_phone = $('#phone').val();

js_taro_ball = $('#taro_ball').val();

js_waffle = $('#waffle').val();

js_shrimp = $('#shrimp').val();

js_total = js_taro_ball * 50 + js_waffle * 100 + js_shrimp * 150;

});

$(document).on('pageshow', '#orderpage', function () {

$('#order_phone').text(js_phone);

$('#order_taro_ball').text(js_taro_ball + '份');

$('#order_waffle').text(js_waffle + '份');

$('#order_shrimp').text(js_shrimp + '份');

$('#order_total').text(js_total + '元');

$('a').attr('href', url_0 + para_phone + js_phone + para_taro_ball + js_taro_ball + para_waffle + js_waffle + para_shrimp + js_shrimp + para_total + js_total + para_6);

});

修改部分:

在 var url_0 的紅色部分為 Google即時表單的id

在Google表單中，查看即時表單，在網址列 e後面的紅色字:

https://docs.google.com/a/tchcvs.tw/forms/d/e/1mzNjz_goObN9Nptq-cu9zQZd1bZ8GAeFmP93YvMP7Sg/viewform