12/3 書寫

這裡教學如何使用 app inventor 上傳照片到 GoogleDrive，由 Youtuber The  Coding Bus 發佈的影片教學及 ILoveThunkable 提供之(.aix 第 7 樓)集合而來，這 裡會需要用到以下工具：

 1. App inventor

 2. Google Apps Script

 3. 記事本

首先，先設計好 UI 介面如下：

再來回到 Google 雲端畫面，點選左上角新增→更多→Google Apps Script 會來到 以下畫面：

以下程式碼在 The Coding Bus 的教學影片下方資訊欄，直接複製貼上在 Google  Apps Script 的程式碼上即可，

function doPost(e) {

var data = Utilities.base64Decode(e.parameters.data);

var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);  DriveApp.getFolderById('Your Folder ID').createFile(blob);

return ContentService.createTextOutput("Your File Successfully Uploaded"); }

上面紅字粗體是你打算上傳到 GoogleDrive 的資料夾的 Folder ID，ID 碼就是網址 /folders/…. ?usp=sharing ，…. 的部分就是 Folder ID，複製貼上在上述紅字粗體 的部分

另一個則是需要透過發佈產生的網址：

此篇教學主要是使用到 Base64 編碼及解碼的方式上傳照片到 Google Drive，並 且透過 App inventor 撰寫 App 的方式，就必須使用 Base64 擴充套件，先到這裡 下載，並匯入此套件

接下來回到 UI 設計界面，最重要的要將 SimpleBase64(不可視元件)拉入介面 中：

以下是完整程式碼，兩個紅框，紅框 A 的意思上傳後，1~10000 隨機產生亂數 直接命名為照片檔名，這是原先教學影片的做法，但是稍作修改後，紅框 B 可 以做到直接把你輸入的字串為上傳照片的檔名，相關應用也可以是用在標籤 (Lable)、清單選擇器、下拉式選單，本篇以文字輸入盒(Textbox)為主：

12/5 更新內容

你想要最多上傳幾張照片，UI 就得設置幾組一模一樣的，要改也是摸熟了再改

下面兩圖很重要，因為程式是分開作業的，如果程式碼不分開的話，會讓 APP 當機，該拉的 UI 介面模塊不要省，要不然會像我一樣，上傳四張照片的時候， 只會實際上傳其中一次…但是總共會上傳四次有點令人啼笑皆非

下面這張圖也是一樣，必須一組一組的放，省不得，我做的是應該放四組