利用簡單程式做出一位數的加減乘除
2015年5月15日 星期五
2014年4月25日 星期五
appyet
我＠教學現場 Part 3
－「iBuilldAPP」五分鐘製作行動裝置 APP
文/涂益郎 國立台南第二高級中學教師
一、緣由
今年寒假號稱是史上第二長的寒假，我們學校及早開始為學生規劃一系列的寒假營隊，
讓學生在漫長的假期中能有豐富的收穫。在資訊領域方面，我們著手規劃三梯次『小「資」
男孩向前衝』的營隊，由難度淺至深設計一系列的課程內容。其中有一段蠻受學生歡迎的課
程就是「我不奢望你會按讚，但我知道手機 APP 不學不行」，課程名稱的發想來自臉書上被網
友廣泛拿來運用的流行語，說穿了，其實就是學習如何製作應用在行動裝置上的 APP。
目前市面上有許多製作 APP 的書籍，還有號稱免學 Java 就能學習 Android 程式設計的方
法，書目種類五花八門，為了營隊課程的規劃也參考了許多書籍。但市面上的書籍儘管說得
再簡單，要讓學生在短期的營隊中製作出運用在行動裝置上的 APP 仍舊不是一件容易的事。
偶然有天在「T 客邦」網站上看到一則「免學程式．五分鐘製作手機 APP」的文章，當下眼睛
為之一亮，如果真的可以不需任何程式基礎，又能在短時間教會學生製作 APP，確實可做為
課程設計之參考。
仔細研究跟實際操作後發現，只要透過網站線上循序式的引導，按照既定的步驟設定 APP
的內容，就可以於短時間內在「iBuildAPP」網站上完成 APP 的製作，也趁著本次電子報的機
會與大家分享我們在營隊的課程內容及學生的製作成果。
二、課程設計
課程設計上主要規劃三個主題，第一個主題是 APP 的簡介，接著第二個主題讓學生體驗
幾款有趣實用的 APP；最後才透過 iBildAPP 網站，根據每人不同的主題設定「線上」製作 APP。
【主題一】APP 簡介
到底什麼是「APP」？
定義：APP 是「Application」的縮寫，也就是應用程式或稱應用軟體。
因為近年來智慧型手機（Smart Phone）的盛行帶動一波 APP 的熱潮，舉凡教育、娛
樂、工具等各種多元的應用，都可以透過開發者的巧思，讓使用者在行動裝置上運
用自如。
要去哪裡下載 APP？
下圖是 APPS 跨界交流協會分析目前 APP 下載的主要來源，不難發現因為 Android 具
備 Open Source 的特性，許多手機大廠紛紛採用 Android 系統，也讓隸屬該系統的
APP 下載來源越發蓬勃與多元。2
【圖 1：目前 APP 下載主要來源分佈】
【主題二】有趣 APP 不藏私大公開
以下將介紹四種目前廣受大家喜愛的 APP：
Bump：快速傳輸資料。
IntoNow：聽台詞辨識影片名稱。
Shazam：聽聲音辨識歌曲名稱同歌（不同演唱人辨識效果佳）。
SoundHound：聽聲音辨識歌曲名稱（人聲清唱辨識效果佳）。
傳東西用撞的就好了「Bump」：
Bump：將兩手機相碰以共享照片、聯絡人、檔案和應用程式！支援 iOS 和 Android
平台的手機，甚至手機跟電腦也可以一起 Bump，設定上非常容易，簡單的步驟就能
讓和朋友一起分享生活點滴。（最新版開始支援 10MB 以內的檔案傳輸）
【圖 2：Bump 操作畫面】
圖片來源：APPS 跨界交流協會 http://www.xapps.tw/3
聽聲音及台詞即可知道電影片名「IntoNow」：
IntoNow：2011 年上半年提出此服務後，僅僅 12 週就被雅虎以六億台幣併購。此 APP
中內含一個特殊的專利「SoundPrint」，透過這個技術可讓使用者不需輸入或選擇正
在看哪一個節目，只要提供聲音資料後，即可快速與資料庫中儲存的 130 個頻道近
5 年之聲音資料做比對，準確找出使用者正在觀看的節目，但資料庫目前僅存北美
地區觀看的頻道內容。
【圖 3：IntoNow 之操作畫面 (1)APP 開啟畫面 (2)資料接收中 (3)顯示比對結果】
聽聲辨歌的「Shazam」與「SoundHound」：
這兩款 APP 是功能相近，都是用來識別音樂歌名的軟體。當接收到音樂來源後，立
刻自動判別歌曲的曲名。但兩種軟體還是有細微的差異，如下表分析所示：
【表 1：Shazam 與 SoundHound 之差異分析】
【圖 4：Shazam 與 SoundHound 之操作畫面】4
【主題三】利用「iBuildApp」線上建置 App 程式
步驟一：註冊帳號
進入網址「http://ibuildapp.com/」，選擇首頁右上方「Login」，可以選擇以臉書帳號
登入或按下方「Register」註冊新帳號。
註冊時需輸入個人相關資料。5
步驟二：發想，你要做的 APP 是什麼？
雖然 iBuildAPP 號稱五分鐘就可以完成 APP 的製作，但有整體的架構才能在製作
APP 的過程比較有方向。
以下示範將以「台南二中」為主題，製作一個屬於學校的 APP 程式，目的是讓大家
可以更加瞭解學校的相關資訊。
APP 架構圖：
步驟三：建立專屬模版或使用現成模版
點選畫面中「CREATE MY APP」開始製作 APP。
接著選擇將 APP 建置在什麼系統或裝置上進行使用，在此示範選擇第一個「Native
iPhone/Android App」。
根據自己的喜好選擇內建模版進行製作，只要按下「Use it」即可開始。6
建立 APP 專屬名稱：根據使用者的主題規劃輸入 APP 名稱，但目前仍無法支援中
文名稱，僅能以英文輸入。
步驟四：客製化 APP 模版樣式
針對背景樣式、文字內容、Logo 圖片、功能列圖文進行修改。
背景可上傳圖片並裁減適宜大小：7
修改按鈕底圖及顯示文字：按下按鈕旁「Edit button」圖示即可修改按鈕底圖及文
字說明。
修改功能列圖示及文字：點選功能列圖示旁「Edit Tab」即可進入編輯模式，修改
表示圖示及文字說明。8
步驟五：編輯各項目內容
當設定完按鈕及功能列後，畫面會出現許多驚嘆號，要求使用者必須針對內容進行
編輯。
可選擇各種編輯類型：以按鈕「地理位置」為例，可選擇 Google Maps 類型進行
編輯。
編輯類型一覽表：9
步驟六：APP Settings
選擇系統平台類型、時制及 APP 開啟畫面。
步驟七：APP 相關資訊設定
選擇 APP 的屬性分類、描述 APP 主要概念、設定關鍵字及上傳圖示。10
步驟八：設定 APP 版本編號
版本的設定根據系統平台的差異也有截然不同的設定方式，以 Android 為例都以 1
為 APP 版本的預設值
步驟九：下載至手機等裝置。
進入 My Profile 中點選「Apps」觀看 APP 成果，接著按下「Download」即可透
過 QR code 下載。11
步驟十：下載至手機後執行畫面如下圖。
三、學生作品賞析
學生發揮創意製作各式主題的 APP，雖然大部分的內容都是從各處蒐羅而來，並非自己
原創產生。但透過主題的訂定、資料的彙整，到最後成果的展現，學生可以在沒有任何程式
背景下完成 APP 程式的製作，已實屬難得啦！下圖是幾位學生的作品，有學生為自己社團製
作簡介，也有介紹遊戲「英雄聯盟」、或講解「轉筆技巧」跟分享自己喜愛的籃球員等作品。
四、後記
還記得上課前學生問我，怎麼可能在短短三個小時做完一個 APP，當我告訴他們要透過
iBuildAPP 線上製作 APP 時，他們仍舊存疑能夠做出什麼像樣的東西。但事實證明，雖然沒有
任何程式基礎，學生仍可做出相當專業的 APP。尤其該網站還有提供 QR code 的下載，讓學
生可以在製作完畢後立刻下載至手機，甚至有學生製作班級專屬的 APP，還要我下載到手機
中，開學後在資訊課時秀給全班同學欣賞。除了以現有素材做運用外，學生們開始思考到可
以為自己的社團製作專屬 APP，不僅發佈社團訊息，也可透過該 APP 讓大家更瞭解社團運作。
很開心看到學生們學以致用，相信這次的寒假營隊讓他們有豐富的收穫。
訂閱：
文章 (Atom)