系統簡介：利用 Google 雲端硬碟，免費製作能讓校內同學們上傳個人備審資料 PDF 檔的上傳系統，並讓協助模擬面試的教授能從後台閱覽同學們的備審資料；即學生在上傳時，不會看到其他同學的作品，但教授又可以一次看到所有同學的檔案。

上傳系統製作教學-01

關鍵字：上傳系統、免費建置、匿名上傳、雲端檔案管理、Google雲端硬碟、Google Apps Script

※ 感謝 LINE 群組、PTT Google 版，及 巴哈電應版 登上熱門推薦第 1 位、+87 GP、6,384 點閱（截至2017/03/26），及版友熱情推文留言：

20170311_巴哈電應版熱門推薦.jpg

 
傑特：看起來很棒！　03-10 20:04
以恩羊：簡單實用，這作法拿來收作業也超方便!　03-11 00:09
梣：還要自己動手做這個，真是太偉大了　03-11 02:04
出成：簡單方便快速　03-11 12:40
水軒大叔：哇 原來現在這麼方便，還能寫語法~棒棒　03-17 00:48
Ryouji：這個服務簡單卻又實用，感謝分享　03-10 21:47
I still miss：謝謝大大的講解 覺得很強　03-13 21:25

推 qazjack : 感覺超好用的，來試試03/08 22:23
推 pedestrianA : 推03/09 00:35
推 speedbug : 厲害 推一個!03/09 01:05
推 henry8168 : 高手 推推03/09 01:36
推 namcp : 推03/09 10:12
推 name2name2 : 推03/11 00:05
推 heroe : 推好文，謝謝分享03/11 10:39

 

正文開始～

隨著學測成績放榜，不僅是學生們如火如荼地研究各大學校系、準備推甄申請資料，學校方也是為了能夠讓同學們能夠最有效率地完成階段目標而忙碌起來。

今年，為了能更貼近學生在真正申請時，需直接上傳備審資料 PDF 檔的真實情境，更為了環保節省紙張（試想一位同學資料若需印 10 張紙，300 位同學就需用掉 3,000 張紙，還沒把各科別模擬面試的參考題目等印製量計算進去），及落實校園 e 化，於是提供模擬面試用的「備審資料上傳系統」的需求就誕生了。

為了能達成這個需求，在沒有額外的預算的情況下，免費且最有效率的解決方案，就在各種拜 Google 大神的情況下誕生了～

以下，我把我的解決方案分享出來，希望可以提供同樣有此需求（或困擾）的資訊組長、系統管理師參考，若有更多想法，也歡迎留言給我～

BloggerAds

 

首先，展示上傳系統的操作～

小提示：點選各圖片，都可以看放大圖喔～

前台部份～

1. 開啟「備審資料上傳系統」頁面。

上傳系統製作教學-01

 

2. 填寫班級、座號、姓名，選擇檔案，點選【上傳檔案】。

上傳系統製作教學-02

 

3. 等待檔案上傳…

上傳系統製作教學-03

 

4. 上傳完成後，即可關閉視窗。

上傳系統製作教學-04

 

後台部份～

進入 Google 雲端硬碟，開啟檔案上傳的資料夾，即可看到剛剛上傳的檔案。

上傳系統製作教學-05

※ 同學們所填的班級、座號、姓名等資訊，則會在「詳細資料」的「上傳者」中顯示。如下圖，在 Google 雲端硬碟右側的詳細資料中，可看到「上傳者：30101王小明」。

上傳系統製作教學-05-2

 

接著就是「從零開始」的完整製作教學～

1. 進入 Google 雲端硬碟，點選【新增】→ 更多 →【連結更多應用程式】

上傳系統製作教學-06

 

2. 搜尋「Google Apps Script」 （可只打部份關鍵字，像我就只打「script」就找到了），再點選【＋連結】

上傳系統製作教學-07

 

3. 再回到雲端硬碟，點選【新增】，就可以看到「更多」出現「Google Apps Script」了！

上傳系統製作教學-08

 

4. 點選【Google Apps Script】後，出現「程式碼.gs」的編輯畫面，複製以下的原始碼，整個覆蓋掉原本「程式碼.gs」的內容。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {  
  try {
    var dropbox = "備審資料上傳資料夾"; 
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("上傳者： " + form.myClass + form.myNo + form.myName);
    
    return "<div class='container' id='output'><form id='contact'><h3>備審資料上傳系統</h3><h4>臺北市立○○高中【模擬面試】備審資料上傳系統</h4><input type='submit' value='上傳完成，可關閉視窗' onclick='window.close();'>    <p class='copyright'>Script by <a href='https://pcrookie.com/?p=1813' target='_blank' title='PCrookie'>PCrookie</a>  /  Designed by <a href='http://codepen.io/colorlib/pen/KVoZyv' target='_blank' title='Colorlib'>Colorlib</a>  /  Integrated by <a href='http://chibaby1231.pixnet.net/' target='_blank' title='Yang Chi'>Yang Chi</a></p></form></div>";
  } catch (error) {    
    return error.toString();
  }
}

 

※ 在程式碼中，「備審資料上傳資料夾」這個字串，可以任意改為其他名字，這是用在 Google 雲端硬碟中，供收納上傳檔案的資料夾名稱。「○○高中」則是可以更改為學校的名字。

上傳系統製作教學-09

 

5. 完成後，再點選【檔案】→ 新增 →【HTML檔案】

上傳系統製作教學-10

 

6. 輸入「form」，點選【確定】。（小提示：若想用其他檔名，記得 .gs 中第 2 行的原始碼要一併更改喔）

上傳系統製作教學-11

 

7. 複製以下的原始碼，整個覆蓋掉原本「form.html」的內容。

以下內容很長，是因為 Google Apps Script 內無法新增 CSS 檔，且 Google Apps Script 內的 HTML 檔外連 CSS 檔時又都會失效，所以最後把 CSS 都直接寫在 HTML 內的緣故。

<html>
  <head>
    <meta charset="UTF-8">
	<title>○○高中備審資料上傳系統</title>
	<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #3F51B5;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact input[type="submit"] {
  font: 400 12px/16px "微軟正黑體", "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  margin: 50px 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 15px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #FFC107;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact input[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #2196F3;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact input[type="submit"]:hover {
  background: #3F51B5;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact input[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
  font-size: 10px;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}
	</style>
  </head>
<body>

<div class="container" id="myForm">  
  <form id="contact" action="" method="post">
    <h3>備審資料上傳系統</h3>
    <h4>臺北市立○○高中【模擬面試】備審資料上傳系統</h4>
      <input placeholder="請輸入你的班級（如：301）" name="myClass" type="text" tabindex="1" required autofocus>
      <input placeholder="請輸入你的座號（如：01）" name="myNo" type="text" tabindex="2" required>
      <input placeholder="請輸入你的姓名（如：王小明）" name="myName" type="text" tabindex="3" required>
	  <input type="file" name="myFile">
      <input type="submit" value="上傳檔案" 
           onclick="this.value='檔案上傳中……';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">					
    <p class="copyright">Script by <a href="https://pcrookie.com/?p=1813" target="_blank" title="PCrookie">PCrookie</a>  /  Designed by <a href="http://codepen.io/colorlib/pen/KVoZyv" target="_blank" title="Colorlib">Colorlib</a>  /  Integrated by <a href="http://chibaby1231.pixnet.net/" target="_blank" title="Yang Chi">Yang Chi</a></p>
  </form>
</div>

<div id="output"></div>
<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>
<style>
 input { display:block; margin: 20px; }
</style>

</body>
</html>

 

※ 完成貼上的 form.html 如下圖。

上傳系統製作教學-12

 

8. 將「程式碼.gs」、「form.html」都按【Ctrl+S】存檔，再點選【執行】→【doGet】

上傳系統製作教學-13

 

9. 出現「需要授權」訊息，點選【核對權限】

上傳系統製作教學-14

 

10. 出現「要求權限」視窗，點選【允許】

上傳系統製作教學-15

 

11. 最後，要把剛剛完成的上傳系統發佈給所有人都有閱覽的權限，點選【發佈】→【部署為網路應用程式…】

上傳系統製作教學-16

 

12. 特別注意！連 Google 都提醒你，「以下內容不是一般的廢話，請睜大眼睛看仔細！」這個地方若設錯了，會導致做好的上傳系統只有自己看得到（就哭哭了 ）所以真的要睜大眼睛看仔細，在「具有應用程式存取權的使用者」，一定要選【任何人，甚至是匿名使用者】，才有辦法讓學生就算不登入，都能上傳資料喔！

上傳系統製作教學-17

 

13. 點選【部署】後，得到一串網址，上傳系統就大功告成啦～！

上傳系統製作教學-18

把這串網址貼到新分頁，就可以立刻來測試一下辛苦完成的成果囉~

上傳系統製作教學-19

 

同場加映～

1. 縮短網址：要把網址縮短，可以透過 Google 的縮址服務 goo.gl，貼上原本很長的網址，送出後，立刻可以得到一串短短的網址囉～

上傳系統製作教學-20

 

2. QR碼製作：為了讓同學們能更方便快速地上傳備審資料檔，可透過 QR 碼產生器，把上傳系統的縮址做成一個 QR 碼，讓同學們只要用手機掃描，就可把手機裡的備審資料 PDF 檔案上傳進系統裡囉～

上傳系統製作教學-21

 

2017/03/26更新：

資源調查研究

目前以「上傳系統」這個概念來說，實作方法包括：

1. 抓一台機器架 FTP：讓 user 用網頁或 FTP 軟體上傳檔案，後台再利用 FTP 軟體或網頁，把所有上傳的檔案整個抓下來。

缺點：

(1) user 在上傳檔案時，會看到其他人上傳的檔案，不符合需求單位的預期。

(2) 使用帳號/密碼或匿名登入，及使用 FileZilla 等 FTP 軟體，對於非資訊人員來說，這些都是屬於「需要學習」的特殊技能；且檔案最後需在 Android 平版及 iPad 上呈現，目前還未確認 FileZilla 可否支援。

 

2. 用 NAS 架雲端硬碟：讓 user 用網頁上傳檔案，後台同樣利用網頁下載及管理檔案。

缺點：

(1) 同 1.，有資料夾的上傳權限，就有瀏覽權限。

(2) 操作難易度比 1. 簡單，但在後台管理上，尚未確認 NAS 上的檔案是否可直接透過瀏覽器開啟觀看，還是需要把檔案下載後，再用平板或 iPad 的 App 來開啟觀看。

 

3. 架一個 Apache Server：直接用 PHP 寫一個上傳畫面，讓 user 不需登入即可上傳檔案；上傳資料直接丟在 Server 本機的磁碟目錄下，後台在登入 Server 後再直接抓下來。

缺點：

(1) 「登入 Server」對非資訊人員來說，這幾個字看起來就不是自己有生之年能搞懂的事情，等於系統架好後，下載、備份或彙整檔案的工作沒辦法整包交給負責單位，不然就是要花時間再寫一個 view 的頁面，讓負責單位可以上去瀏覽上傳狀態並下載檔案。

(2) 多一台要管理的 Server   同 (1)，就算是架在虛擬機裡還是多了一件麻煩事

 

4. Google 表單：利用 G suite（包含 Google for Education）的表單，開一個「檔案上傳」類型的問題，讓 user 填寫基本資料及上傳檔案。

缺點：一定得是「同機構」內的使用者才能填表，也就是一打開表單就得登入，登入後還要是同機構的，才能填寫，不符合使用單位匿名上傳的需求。

※ G suite 表單在檔案上傳部份，包含設定限制檔案大小、檔案類型、檔案數量等，其實功能上非常完備，若是公司內部使用，尤其平常都已經登入，那麼應該就沒什麼影響，而且也能避免其他人亂入，亂丟檔案進來。

 

小結

為了解決「上傳者不能看到其他人的檔案」的問題，勢必得做一個上傳畫面，單純只能做上傳動作；又為了解決「系統做好後就可以整包丟出去」的理想，在多方拜 Google 大神，最後發現【 Google Apps Script + Google 雲端硬碟 】非常完美的解決了這個問題。

在「前台與 Server 部份」，透過 Google Apps Script 控制上傳畫面，（充當 PHP 及 Server 的效用，還不用自己架 & 管理 Server），把上傳的檔案直接丟進 Google 雲端硬碟中（儲存空間在雲端，也不用自己管理，Google 的安全性也算可信任）。

在「後台管理部份」，因為是 Google 雲端硬碟，建好之後，只要把上傳檔案的資料夾「共享」出來，負責單位也能自行操作，另外 Google 雲端硬碟在行動裝置（不論是 Android 平版或 iPad）上開啟檔案也不會有問題（安裝 Google 雲端硬碟 APP 即可）。

 

系統上傳總量限制

基本上「上傳總量限制=你的雲端硬碟空間」，不過雲端硬碟空間是會包括 Google 雲端硬碟上的檔案 + Gmail 等一起計算的，又一般免費使用者的總容量是15GB（參考來源：雲端硬碟儲存空間），所以能讓其他人上傳的總量會在 15GB 以下。

不過若是使用 Google for Education（俗稱教育版或校園版 Google），雲端硬碟容量則是無限，所以以學校單位來說，可以免於考量這個問題。

 

單一檔案大小限制

我還沒有實際做過壓力測試，不過根據：

1. 述文老師學習網 測試，「單一檔案 25MB 以內，都可以正常上傳」
※ 猜測：以一般免費版 Google 服務來說，這個測試可能跟 Gmail 在夾帶檔案時的大小限制有關。

2. 軟體玩家，「實際測試的結果，傳個 200MB 的檔案也不成問題」

3. 以 G suite 中 Google 表單的「上傳檔案」功能來說，單一檔案大小限制連「10GB」都能選

上傳系統製作教學-22

應該是可以推測，在上傳總量許可的情況下，幾乎可以說是沒有限制了吧 

 

上傳次數限制

根據 Google Apps 指令碼資訊主頁 的配額限制資訊，以本篇分享中，單一檔案的上傳系統來說，其實動作並不複雜（沒有像是把 Google 試算表當資料庫在操，工作表跟欄位多、又要讀取又要寫入），完成工作的速度效能（從使用者選好檔案按上傳，到真的傳好，顯示完成訊息），以及上傳檔案的次數問題，推測應該是只要不要太多人「同時」擠著要上傳，能分多個時段或多天，分散開來使用，以一般個人或中小型單位的使用來說，應該都還算足夠。

 

CC

1. Script：讓使用者直接上傳檔案到你的Google雲端硬碟，接收檔案更輕鬆！(新增多檔上傳)

2. Design：Colorlib Contact Form

 

以上，既免費而且也不難的模擬面試用「備審資料上傳系統」製作教學，就到這邊告一段落了，感謝您的耐心閱讀，祝大家都能順利度過這個推甄申請的忙季～

若還有其他問題，也歡迎繼續討論，讓這個主題能更加完整 ヽ(✿ﾟ▽ﾟ)ノ

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 騏騏 (Elfachiy) 的頭像
    騏騏 (Elfachiy)

    Elfachiy Kaur

    騏騏 (Elfachiy) 發表在 痞客邦 留言(10) 人氣()