育將電腦工作室 - 線上書籍

Google表單實戰電商購物車
===============

### 啟動

1. 所有表單：[forms.google.com](http://forms.google.com)
2. [雲端硬碟](https://drive.google.com/)(建議)：
 1. 啟動「雲端硬碟」
 2. 切換目錄
 3. 「新增 / Google表單」
 
### 新增Google表單

1. 命名：Google表單實戰電商購物車
2. 欄位：
 1. <table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed table-sm" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="text-align: center;">**標題**</td> <td style="text-align: center;">**欄名**</td> <td style="text-align: center;">**類型**</td> </tr> <tr> <td>姓名</td> <td>name</td> <td>text</td> </tr> <tr> <td>電話</td> <td>tel</td> <td>text</td> </tr> <tr> <td>送貨地址</td> <td>addr</td> <td>text</td> </tr> <tr> <td>EMAIL</td> <td>email</td> <td>email</td> </tr> <tr> <td>備註</td> <td>ps</td> <td>textarea</td> </tr> <tr> <td>合計金額</td> <td>total</td> <td>hidden</td> </tr> <tr> <td>訂購商品</td> <td>cart</td> <td>hidden</td> </tr> </tbody> </table>
 
 
3. 類型：簡答，其他皆不用設定，我們會自訂UI介面
 
### Google Forms API

1. 右上角：「更多選項/取得預先填入的連結」
2. API 也提供了生成預先填入連結的功能。這些連結可以包含預設的回答,當使用者點擊鏈接時,表單中的某些欄位會自動填入這些預設值。
3. 我們將利用，「取得預先填入的連結」這項功能，來擴充Google表單並設計「電商購物車」
4. 請把標題輸入至「您的回答」 => 取得連結 => 複製連結 
 ```javascript
 https://docs.google.com/forms/d/e/1FAIpQLSeEcuh05Ci28D9UNmSsYGrOiECp7ztQi_hZq6KTy0U0OTJbHw/viewform?usp=pp_url&entry.1603468452=%E6%B5%81%E6%B0%B4%E8%99%9F&entry.1458710961=%E8%A8%82%E5%96%AE%E8%99%9F%E7%A2%BC&entry.1811945349=%E5%A7%93%E5%90%8D&entry.1488976104=%E9%9B%BB%E8%A9%B1&entry.1662233383=%E9%80%81%E8%B2%A8%E5%9C%B0%E5%9D%80&entry.1014393823=email&entry.690913205=%E5%82%99%E8%A8%BB&entry.1204585592=%E5%90%88%E8%A8%88%E9%87%91%E9%A1%8D&entry.990150942=%E8%A8%82%E8%B3%BC%E5%95%86%E5%93%81
 ```
5. 網址中的 viewform 改成 formResponse 
 然後開啟新頁面 貼上 網址 => Enter 
 這時它已經幫我們送出表單
6. 線上 URL Ddecoder：<https://www.urldecoder.org/> 
 請把送出的網址，在此解碼後複製 
 ```javascript
 https://docs.google.com/forms/d/e/1FAIpQLSeEcuh05Ci28D9UNmSsYGrOiECp7ztQi_hZq6KTy0U0OTJbHw/formResponse?usp=pp_url&entry.1603468452=流水號&entry.1458710961=訂單號碼&entry.1811945349=姓名&entry.1488976104=電話&entry.1662233383=送貨地址&entry.1014393823=email&entry.690913205=備註&entry.1204585592=合計金額&entry.990150942=訂購商品
 ```
7. 提交網址(例，請看自己的網址)：https://docs.google.com/forms/d/e/1FAIpQLSeEcuh05Ci28D9UNmSsYGrOiECp7ztQi\_hZq6KTy0U0OTJbHw/formResponse 
 
 姓名：entry.1811945349 
 電話：entry.1488976104 
 送貨地址：entry.1662233383 
 email：entry.1014393823 
 備註：entry.690913205 
 合計金額：entry.1204585592 
 訂購商品：entry.990150942
8. 回Google表單 查看 回覆 
 應該會有一筆記錄

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown