| 作者/攝影 |
文/林祥瑞文字整理/CAVEDU 宗諭圖/CAVEDU教育團隊 |
| 文章分類 | 教學技術文 |
App Inventor原來是Google實驗室（Google Lab）的一個子計畫，由一群Google工程師，以及勇於挑戰的Google使用者共同參與。App Inventor是一個完全線上開發的Android程式環境，拋棄複雜的程式碼，而使用樂高積木式的堆疊法，來完成使用者的Android程式。Google實驗室後於2012年1月1日，將App Inventor整個計畫移交給麻省理工學院行動學習中心進行維護，並維持免費及開放原始碼的精神繼續運作。
使用App Inventor其實相當直覺、方便，開發一個App Inventor程式，就從使用者的網路瀏覽器展開！使用者首先要設計程式的外觀；接下來是設定程式的行為，這部分就如同玩樂高積木般簡單有趣。最後，只要將手機與電腦連線，剛出爐、熱騰騰的程式就會出現在使用者的手機上了。
正因使用起來簡易、直覺、方便，連小學生也能使用App Inventor撰寫手機應用程式，所以，App Inventor被相當程度應用於教育領域。在台灣，有不少關於App Inventor的課程，以CAVEDU教育團隊為例，一年至少有30至40場的研習。正因持續辦理研習，CAVEDU團隊在教育現場發現了一些使用App Inventor的問題和需要，而這正是本文將教導在QNAP上架設App Inventor私服器的主要原因。
為何要在QNAP上架設App Inventor私服器？
因著推廣App Inventor，CAVEDU教育團隊在研習過程中發現，許多學校的教室能夠讓學生上網，但在使用App Inventor時，因為每位使用者皆需一定的網路頻寬，而教室的網路頻寬並不足以應付這麼多學生，往往導致教室的網路斷線，眾人都連不上網路。
除了在教育現場發現上述問題外，為了想知道App Inventor使用者究竟在做些什麼，例如，在課堂上教導學生製作一個程式，大家普遍會使用什麼樣的元件？然而，因麻省理工學院行動學習中心的App Inventor伺服器上的資料不對外公開，若是自己架設一台App Inventor私服器，便能有效獲得前述問題的答案，掌握使用者行為，進行大數據分析。
至於為什麼要將App Inventor私服器架設在QNAP上，主要原因是學校等教育機構時常在管理資訊技術及大量的教師與學生資料上面臨挑戰，往往需要以有限的預算建置儲存平台，以實現檔案共用與更精簡的管理，而QNAP正提供了很好的解決方式。
基於以上幾點原因，所以，CAVEDU教育團隊不僅在有需要時自己架設App Inventor私服器，也盼望藉由這篇文章的分享，讓更多人可以在QNAP上自行架設App Inventor私服器，不僅避免了網路頻寬不足的問題，更進一步掌握使用者行為，甚至還有更多的應用！
以下，我們將一步步向您示範，如何在QNAP上架設App Inventor私服器。而下文將介紹到QDK 這個開發者工具，若想更多了解QDK，歡迎收看這段影片：
編譯 MIT AppInventor 伺服器
準備工作
專案仰賴兩個重要工具，一是我們藉由git 版本控制工具獲取原始碼；二是我們需要Apache Ant執行自動化組建，我們確認環境已經安裝。
apt-get install ant git # Debian/Ubuntu
pacman -S apache-ant git # Arch Linux
dnf install ant git # RHEL/Fedora
此外，執行伺服器需要 Google App Engine for Java 的工具，請到下載頁取得最近版本，本文截稿前的版號是 1.9.63 。
# 移到家目錄
cd ~/
# 使用指令下載檔案的範例，請自行修改版號
wget ‘https://storage.googleapis.com/appengine-sdks/featured/appengine-java-sdk-x.y.zz.zip’
# 解壓縮檔案
unzip appengine-java-sdk-x.y.zz.zip
組建伺服器
獲取原始碼
MIT AppInventor 專案寄託在GitHub，每位參與者都必須透過 git 提交程式碼，我們自然也是用 git 來下載所有原始碼。
# 獲得原始碼
git clone https://github.com/mit-cml/appinventor-sources.git
# 進入專案目錄
cd appinventor-sources/appinventor
# 下載子模組
git submodule init
git submodule update
上述有 git submodule 相關的指令，在有些專案這不是必要步驟，由於 AppInventor 的原始碼有引用其他專案，我們必須透過這些指令把引用的專案一併下載下來。
GitHub 不僅僅是來放置原始碼的空間而已，同時也作爲對開發者友善的工作環境，開發者可以在討論區回報臭蟲後者討論新功能，此外提供Pull request機制，當你想對專案提報你的修改，只要去他的專案上發送 pull request ，經專案負責人審查通過，你的修改就會被併入原始碼。
執行編譯
執行 ant 指令就行了，就像呼吸一樣簡單。由於專案相當龐大，所有編譯流程至少耗時三分鐘以上，直到 BUILD SUCCESSFUL 字樣出現即編譯成功。
ant
如果你不幸編譯失敗，最後跑出 BUILD FAILED 字樣，建議回前面步驟再三確認有沒有遺漏。在你重新編譯前，先執行 ant clean 清理前一次組建留下來的垃圾再執行 ant 。
執行伺服器
開始前先提醒 AppInventor 並非單一的程式，我們總共會開啓兩個不同的伺服器，除了 App Engine 寫成的網頁伺服器之外，還有一個專門打包 apk 檔案的伺服器，我們在 AppInventor 網頁上寫成的程式必須透過打包伺服器來編譯成 apk 檔案。
啓動網頁伺服器
這時候就是 App Engine 出馬的時機了，如果已經依照前面步驟下載好工具，我們用它的工具啓動本地的伺服器。
~/appengine-java-sdk-x.y.zz/bin/dev_appserver.sh –address=127.0.0.1 –port=8888 appengine/build/war
啓動後開啓瀏覽器進入網址 http://127.0.0.1:8888/ 來檢查是否有登入頁面。
–address=127.0.0.1 伺服器的位置 綁定 在代表本機的特殊 IP 位置 127.0.0.1 ，只能在本機使用，若要允許外部連線，可以考慮改成 –address=0.0.0.0 。
–port=8888 表示伺服器使用 8888 埠口來提供服務，你也可以改成其他的數字。
啓動 apk 打包伺服器
我們再開啓另外一個終端，透過 ant 指令幫啓動打包伺服器。
# 進入專案目錄
cd ~/appinventor-sources/appinventor/
# 啓動打包伺服器
ant RunLocalBuildServer
在 QNAP NAS 執行 MIT AppInventor
準備工作
編譯 AppInventor
進入正題之前，我們得確認已經下載 Google App Engine ，且 AppInventor 已經編譯完成，操作方式請參考文章「編譯 MIT AppInventor 伺服器」。之後的段落我們假定幾個配置好的目錄如下：
-
~/appinventor-sources/ 包含已經編譯好的 AppInventor 程式。
-
~/appengine-java-sdk-x.yy.zz 爲解壓縮的 Google App Engine SDK for Java ，版號請自行填入。
下載 QPKG 打包工具
一般而言，打包 QPKG 過程中必須根據 QNAP 公司提供的 QPKG 開發手冊 撰寫套件設定檔，並使用他們提供的 QDK 開發工具打包套件。這部分我們提供已經寫好的設定環境，請使用 git 下載。
cd ~/
git clone https://github.com/jerry73204/appinventor-qpkg.git
在我們的設定環境下有兩個目錄：
-
package-source/ 檔案結構是根據 QPKG 開發手冊的內容配置，屆時要打包進入 QPKG 套件的檔案都放置於此。
-
qnap-chroot/是引用他人的 chroot 環境，可以幫我們在本機即可完成QPKG打包，而不需要透過QNAP NAS機器。
目錄結構的說明如下，其說明請參考 QPKG 開發手冊。
appinventor-qpkg/
├── package-source/
│ ├── package_routines/
│ ├── qpkg.cfg # 套件設定檔
│ ├── icons/ # App 圖示
│ │ ├── appinventor_80.gif
│ │ ├── appinventor.gif
│ │ └── appinventor_gray.gif
│ └── shared/ # 安裝於各類 NAS 的檔案目錄
│ ├── appinventor.sh # 服務控制腳本，可命令啓動、關閉 AppInventor 服務
│ ├── run_appinventor.py # 啓動 AppInventor 伺服器的腳本
│ └── run_buildserver.py # 啓動 apk 打包伺服器的腳本
└── qnap-chroot/
準備 QPKG 套件
帶入 Google App Engine for Java
考慮到 QNAP NAS 上面沒有預載 Google App Engine ，必須一併打包到套件裏面。
cd ~/appinventor-qpkg/shared/
cp -rv ~/appengine-java-sdk-x.y.zz/ appengine-java-sdk/
帶入編譯好的 AppInventor
編譯完成的 AppInventor 檔案相當龐大，我們只需要其中包含網頁伺服器及打包伺服器的兩個目錄，因此做工會細一點。
# 準備 AppInventor 目錄
cd ~/appinventor-qpkg/shared/
mkdir appinventor-bin/
cd appinventor-bin/
# 複製 AppInventor 網頁伺服器
mkdir -p appengine/build/
cp -rv ~/appinventor-sources/appinventor/
appengine/build/war appengine/build/war/
# 複製 apk 打包伺服器
mkdir -p buildserver/build
cp -rv ~/appinventor-sources/appinventor/
buildserver/build/run buildserver/build/run/
完成準備
這段告一個段落前，我們再三檢查一下套件目錄是不是如下方式配置。
package-source/
├── appengine-java-sdk/
├── appinventor-bin/
│ ├── appengine/build/war/
│ └── buildserver/build/run/
├── appinventor.sh
├── run_appinventor.py
└── run_buildserver.py
編譯 QPKG 套件
起手式
根據 QPKG 開發手冊的做法，我們必須在 NAS 上面安裝 QDK 開發工具，把我們的套件工作目錄 package-source 傳到 NAS 上面之後方能打包。不過，作者常常有手邊沒有 NAS 機器的困擾，本文介紹 chroot 的技巧，可以在你的本機創造一個模擬 QNAP NAS 的環境（這裏聲明 chroot 不是 虛擬機），我們在此環境下打包 QPKG 套件。
這部分感謝 plexinc 這位大大在 GitHub 提供了 qnap-chroot 工具，讓我們省去不少設定 chroot 環境的功夫，我們也引用在 qnap-chroot 目錄下。
準備並進入 chroot 環境
準備工作我們需要完成兩件事，一是掛載 devtmpfs 至下面的 /dev 目錄下，再者是要把做好的 package-source 目錄複製一份到 chroot 環境下。
cd ~/appinventor-qpkg/
# 掛載 devtmpfs
mkdir -p qnap-chroot/dev
sudo mount –bind /dev qnap-chroot/dev
# 複製套件目錄
cp -rv package-source/ qnap-chroot/package-source/
完成準備工作後便可以進入 chroot 環境。
sudo chroot –userspec=$(id -un):$(id -gn) qnap-chroot/
打包 QPKG 套件
這步驟也會花許久時間，請耐心等候。
# 更改 PATH 環境變數
export PATH=/bin:/usr/bin:/sbin
# 打包套件
cd package-source/qbuild
一旦打包成功， qbuild 指令會生成一個 build 目錄放置我們的 qpkg 套件，完成後離開 chroot 環境。
ls build/ # 得到檔名 appinventor_2.0.0.qpkg
exit
清理 chroot 環境
完成工作後，當然得有始有終把之前設定好的 chroot 環境清理乾淨。
# 取出 QPKG 套件
mv qnap-chroot/package-source/build/appinventor_2.0.0.qpkg .
# 清理工作檔
rm -rf qnap-chroot/package-source/
# 卸載 devtmpfs
sudo umount qnap-chroot/dev
在 NAS 上安裝 QPKG 套件
啓動 App Center
首先我們進入 NAS 的管理界面，啓動 App Center 程式。
安裝 JRE 套件
由於我們的套件相依於 Java 程式，我們點選左邊選單的 Developer Tools ，然後點選並安裝 JRE 。
手工安裝 AppInventor 套件
點選在 App Center 右上角有一個手工安裝的圖示。
在跳出的小視窗上點選我們提供的 QPKG 檔案，然後點選安裝，這步驟會花點時間，請耐心等待。
安裝完畢後，在 App Center 選單就會出現 AppInventor 選項，點選選項即可進入 AppInventor 界面。