![使用 App Inventor 傳送 Gmail 信件 使用 App Inventor 傳送 Gmail 信件](https://i0.wp.com/i.imgur.com/mHNzrmj.png?resize=1140%2C855&ssl=1)
使用 App Inventor 傳送 Gmail 信件
今天要來介紹,如何使用 IFTTT 這個服務平台,讓 App Inventor 可以不用啟動 Gmail App,直接將信件傳送出去!
老師~~ 到底什麼是 IFTTT 啊!?
IFTTT 簡單來說就是:
![](https://i0.wp.com/i.imgur.com/vwMOMrB.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/F9FoaeH.png?w=960&ssl=1)
那麼接下來就來介紹它的用法!
1. 首先進入 IFTTT 網站
點我進入
![](https://i0.wp.com/i.imgur.com/pP3vsFr.png?w=960&ssl=1)
2. 點擊網頁右上角的「Log in」按鈕
![](https://i0.wp.com/i.imgur.com/E6I1V9o.png?w=960&ssl=1)
3. 然後點選最下面的「Continue with Apple, Google, or Facebook」
![](https://i0.wp.com/i.imgur.com/d5HGavN.png?w=960&ssl=1)
請選擇「Continue with Google」
![](https://i0.wp.com/i.imgur.com/FiSezlZ.png?w=960&ssl=1)
選擇要登入的 Google 帳號
![](https://i0.wp.com/i.imgur.com/R1bitfg.png?w=960&ssl=1)
登入成功後,請到 My Applets 頁面。
![](https://i0.wp.com/i.imgur.com/DLsyby4.png?w=960&ssl=1)
4. 點擊網頁右上角的「Create」按鈕
![](https://i0.wp.com/i.imgur.com/eNkJR4A.png?w=960&ssl=1)
5. 點擊「If This Add」按鈕
![](https://i0.wp.com/i.imgur.com/r4IXP4D.png?w=960&ssl=1)
於搜尋框輸入「Webhooks」,並點進去。
![](https://i0.wp.com/i.imgur.com/KDFf1VK.png?w=960&ssl=1)
再點擊「Receive a web request」藍框
![](https://i0.wp.com/i.imgur.com/6Ww0vRB.png?w=960&ssl=1)
點「Connect」按鈕
![](https://i0.wp.com/i.imgur.com/6K23CrQ.png?w=960&ssl=1)
Event Name 請輸入「SendGmail」(或是填自己想要的也可以),填完後再按「Create trigger」按鈕。
![](https://i0.wp.com/i.imgur.com/BlGINyv.png?w=960&ssl=1)
6. If 完成後,再來請點選下面的「Then That Add」按鈕。
![](https://i0.wp.com/i.imgur.com/nDvZavZ.png?w=960&ssl=1)
這次請搜尋「Gmail」
![](https://i0.wp.com/i.imgur.com/g5iiGs6.png?w=960&ssl=1)
點進來後請選擇左邊的「Send an email」藍框
![](https://i0.wp.com/i.imgur.com/ghDYExl.png?w=960&ssl=1)
點「Connect」
![](https://i0.wp.com/i.imgur.com/3DGjUwV.png?w=960&ssl=1)
選擇要連接的 Google 帳號 (之後要傳送的郵件,會從妳選擇的帳號寄送。),還要按允許喔!
![](https://i0.wp.com/i.imgur.com/hMPFUnW.png?w=960&ssl=1)
7. 在 To address 這裡,請點選右下角的「Add ingredient」按鈕。
![](https://i0.wp.com/i.imgur.com/3omAujn.png?w=960&ssl=1)
選擇「Value1」
![](https://i0.wp.com/i.imgur.com/FuM0LWS.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/PXDPABO.png?w=960&ssl=1)
CC address 、 BCC address 和 Attachment URL 保持清空
Subject 和 Body 欄位裡的資料請都先刪除,清空後請分別加入「Value2」和「Value3」。
![](https://i0.wp.com/i.imgur.com/PNkV9cZ.png?w=960&ssl=1)
好了之後再點選最底下的「Create action」按鈕
![](https://i0.wp.com/i.imgur.com/FWmTrIQ.png?w=960&ssl=1)
點選「Continue」
![](https://i0.wp.com/i.imgur.com/hHnJosG.png?w=960&ssl=1)
最後再點選「Finish」
![](https://i0.wp.com/i.imgur.com/kXJUhHM.png?w=960&ssl=1)
接著我們要去複製連接時要用的 Key (每個人的都不一樣)
8. 點網頁右上角的人頭框,再點選「My services」。
![](https://i0.wp.com/i.imgur.com/AP6Xhwa.png?w=960&ssl=1)
選擇「Webhooks」
![](https://i0.wp.com/i.imgur.com/Rgv6TZb.png?w=960&ssl=1)
點擊「Documentation」
![](https://i0.wp.com/i.imgur.com/vu1dniq.png?w=960&ssl=1)
可以先把 key 複製到記事本;下面的網址就是,等等要設定給網路元件的網址。(等等操作請用自己的 Key 喔!)
![](https://i0.wp.com/i.imgur.com/eLN9Vmq.png?w=960&ssl=1)
接下來要開始設計 App 了!
9. 新增一個 App Inventor 專案,需要元件如下:
![](https://i0.wp.com/i.imgur.com/bDpVBj7.png?w=960&ssl=1)
要有網路元件喔!
10. 切換到程式設計,拉兩個變數,分別是 key 跟 event。
![](https://i0.wp.com/i.imgur.com/0b3nxT0.png?w=960&ssl=1)
程式初始化時,要設定網路元件的網址,跟設定請求標頭。
![](https://i0.wp.com/i.imgur.com/7ujaOjT.png?w=960&ssl=1)
網址格式是剛剛在拿 key 的頁面下面顯示的
![](https://i0.wp.com/i.imgur.com/zYGqfiH.png?w=960&ssl=1)
11. 當傳送按鈕被點選時,要執行 POST 文字請求。
![](https://i0.wp.com/i.imgur.com/IrO90oy.png?w=960&ssl=1)
格式也是照剛剛 key 的頁面的
收件者欄位是 Value1
主旨是 Value2
內容是 Value3
![](https://i0.wp.com/i.imgur.com/khbxT8B.png?w=960&ssl=1)
最後當網路元件取得文字時,結束進度框,並顯示回應內容!
![](https://i0.wp.com/i.imgur.com/sgDobAD.png?w=960&ssl=1)
App 至此就撰寫完成囉!
趕快去執行看看吧!!
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![在 000WebHost 上執行 App Inventor 2 資料庫專題特訓班 (第一版) Chapter 10 雲端 POS 訂購系統 在 000WebHost 上執行 App Inventor 2 資料庫專題特訓班 (第一版) Chapter 10 雲端 POS 訂購系統](https://i0.wp.com/i.imgur.com/ni3vesO.png?resize=75%2C75&ssl=1)
![TQC+ 創意 App 程式設計認證指南 第二版 挑戰 99 TQC+ 創意 App 程式設計認證指南 第二版 挑戰 99](https://i0.wp.com/i.imgur.com/cuqc5K8.png?resize=75%2C75&ssl=1)