手機 App 開發入門：App Inventor 2 實作

你準備好掌握未來世界的溝通語言了嗎？

講到學習程式，你是否也有以下特徵：
➤ 說要學寫程式，然而不知道該從哪裡開始⋯⋯
➤➤  準備開始學程式，可是初學者面對程式語言的難度太高，挫折感很重⋯⋯
➤➤➤  雖然開始接觸寫程式，但是不知道實際可以做出什麼成果，覺得前路迷茫⋯⋯

如果你具備以上任一特徵，何不試試看開發手機 App 呢！

很多人都以為，開發手機 App 要撰寫許多程式碼，是一件非常困難、只有資訊本行的人才足以堪任的專業，再加上 Android 版要開發一套、iOS 版又要開發一套，想想就令人卻步。

App Inventor 2：讓你用「拼塊式」的編程方式寫出自己的 App！

App Inventor 2 與小學生學習的 Scratch 非常相似，使用拼塊式的編程方式，讓使用者就像是玩拼圖一樣，找到對的語法才能完成拼接，學習起來相當容易、不易出錯，比起冷冰冰的程式碼多了許多的親和感，因此非資訊本行的人都容易上手。

即使 App Inventor 2 上手容易，但也能開發出非常複雜的應用，從基礎到進階的元件使用，例如複選盒 CheckBox，到控制樂高機器人，甚至物聯網相關感測器等，都具備了相當大的潛力。

▶︎ 拼塊式編寫程式就像玩拼圖，初學者能容易上手，進階應用也具備極大潛力！

在 2019 年 9 月，App Inventor 2 釋出了 iOS 的測試版，可以將開發的 App 放在 iOS 上運行。相信不久的未來，不僅可以將開發好的 App 編譯好上架「Play 商店」，也可以上架到「App Store」，省卻了開發與維護的時間。

▶︎ 開發一次就能同時在 Android 與 iOS 系統上使用，省下更多開發時間！

本課程希望帶領大家輕鬆進入開發 App 的領域，因此著重在基礎的程式語法打底、基礎拼塊的介紹應用，並且搭配許多案例的製作演練來讓大家能舉一反三。課程中也會抽取部分進階的元件來實作，讓大家淺嘗一下多變的應用喔。

本課程將透過「基礎打底」、「基礎應用」、「案例演練」，讓大家輕鬆學習 App 開發，踏出學習程式語言的第一步！

特色一：原來可以這樣寫程式！像玩拼圖一樣的拼塊式操作

透過 App Inventor 2 的拼塊式操作模式，讓同學先從程式邏輯架構開始，一步步打造起自己程式拼圖，建立對於基礎語法的理解。

特色二：原來 App 可以自己寫！替自己打造專屬的 App

同學所有開發的專案，可以打包成 .apk 檔，安裝在模擬器或 Android 手機上實際運行。

官方網站也釋出了 iOS 的測試 beta 版，可以申請於 iOS 平台上安裝測試 App ( MIT AI2 Companion，老師將在課程中講解安裝方法）。專案中包含存取到感測器、相機⋯⋯等相關硬體設備應用，都能直接在手機上實機運行。

特色三：原來還能考證照！收錄 TQC+ 認證解析與解題訣竅

TQC+ 的認證考試，是由電腦技能基金會所設計規劃的專業設計人才認證，考題的規劃是以實務為導向，設計手法皆是業界開發的常用功能，因此證照也受業界的普遍認可。由於設計上相當親和，許多高中及大專院校，也將 App Inventor 2 的開發納入其程式教育中。

在本課程中，也會使用 TQC+ App Inventor 2 的認證考題做為範例練習，對於有考取電腦證照需求的同學，更是不可錯過喔！

TQC+ App Inventor 相關認證說明

1、TQC+ APP Inventor 程式設計核心能力 － 純測驗題 50 題 / 測驗時間共 40 分鐘

2、TQC+ 基礎創意 App 程式設計 － 純操作題 2 題 / 測驗時間共 60 分鐘

3、TQC+ 創意 App 程式設計 － 測驗題 20 題 + 操作題 3 題 /測驗時間共 60 分鐘

課程中，老師將透過各個實例專案，一步步帶著同學建立起自己專屬的應用 App！上完這堂課，你也可以做得到！

☆ 除了以上範例，還有其他範例等著同學加入製作！包含點餐系統、相片藝廊、音樂播放器⋯⋯等等，各式各樣的範例專案製作講解喔！

程式設計的初學者：覺得程式語⾔看起來很困難，但工作上需要具備程式語⾔概念的⼈，例如 PM、⾏銷⼈員等

➤ 課程中將透過易懂的拖拉式操作，並逐一解說邏輯與原理，帶你建立起程式語⾔基礎概念，讓你不再害怕程式語⾔撰寫。

有興趣投入手機 App 開發者：想要接觸程式語⾔，但不確定學習程式與自己關聯的⼈

➤ 這堂課程將從 App 製作為出發點，不僅帶你認識程式語⾔的架構概念，還會帶你做出自己的 App，讓你透過實作，進入程式語⾔的世界。

需要輔導學⽣學習 App Inventor 2 的⼈：例如教育從業者、學⽣家長

➤ 本課程將從最基礎的操作開始，帶你⼀步步了解學習 App Inventor 2 的過程，並搭配基礎專案的製作說明與延伸學習介紹，讓你除了可以輔導學生完整學習外，也能自行尋找進階學習資源。

想考取專業電腦證照的人：無論是職場或學校的證照需求，都可以透過電腦技能基金會認證流程，取得 TQC+ 專業證照喔！

想要了解其他行動裝置應用程式開發環境，建立多元實作能力的人：例如工程師、已有開發或撰寫程式經驗的學習者

➤ 這堂課將帶領同學了解 App Inventor 2 的開發環境，並介紹物件導向程式概念，對於希望認識其他 App 開發環境的進階學習者，也能有所收穫喔！

1、開發環境認識篇

在第一部分的課程中，內容包含介紹 App Inventor 2 的發展，以及開發環境的工具介紹等，讓同學可以順暢地完成環境設定，成功踏出 App 開發的第一步。

章節一：環境操作與模擬

1. App Inventor 2 導覽：開發工具的安裝與開發環境介紹
2. 模擬器介紹與運用：內部模擬器與外部模擬器、手機實機執行的介紹和運用說明

在這堂課程中，會先帶領大家建立 App 的版面顯示，介紹拖拉元件、安排版面呈現方式並逐一設定屬性，且在模擬器、實體手機中查看實際呈現樣貌。

2、基礎打底篇

本單元主要介紹 App Inventor 2 中的基礎語法，並搭配介紹數個常用的基礎元件，輔以案例與 TQC+ 認證題目，奠定同學的程式邏輯基礎。

章節二：程式事件介紹、與 if 判斷式

1. 事件觸發介紹：App Inventor 2 的程式執行原則都是從事件（event）的觸發開始，課程中將說明點擊按鈕、螢幕上滑動、手機移動等產生「事件」的方式

2. if 判斷式：根據各項條件、狀況、執行不同程式的情況進行講解，讓同學理解 if 判斷式的使用方法

3. 數個基礎元件的運用：包括 Label 標籤、Textbox 文字輸入盒、Button 按鈕、Notifier 對話框、Checkbox 複選盒、Spinner 下拉式選單、ListPicker 清單選擇器等的介紹

章節三：迴圈與副程式介紹

1. 迴圈介紹：介紹 for 與 while 迴圈，讓它來幫忙執行重複的指令

2. 副程式介紹：把某些程式碼包在一個範圍內，並給個名稱。當要執行這些程式碼時，只要呼叫這個名稱，就會把這範圍的程式碼執行一次

3、基礎應用篇

本單元會學習新的資料型態 List ( 清單 )，讓變數的儲存與讀取不僅有效率，也變得更加有彈性。同時老師會延伸解說 for 迴圈的其他使用方式，讓可以活用的案例更加多元。也會介紹顏色的控制，包含 Slider 滑桿元件、Canvas 畫布元件、ImageSprite 圖像精靈等功能的使用，增加 App 設計的更多可能性！

章節四： 調色盤、與猜數字遊戲製作

1. 清單 List 功能：介紹如何對 List 進行讀取與儲存，學會運用一個變數名儲存多個值的方法，讓自己的成果更精簡、有效

2. foreach 迴圈介紹：使用 foreach 逐一讀取或儲存 List 內的值，有效的運用所學

3. 顏色設定：運用 List 來儲存紅、綠、藍三原色的值，透過合成顏色設定元件的顏色屬性，並藉由分解顏色值，取出其三原色的值，帶領同學了解調色方法

4. Slider 、Canvas 元件使用介紹

5. 遊戲案例：寓教於樂，使用寫遊戲來熟練 List 與其他基礎語法

章節五： 相片藝廊、與骰子遊戲製作

1. Canvas 元件功能進階應用
2. ImageSprite 元件應用：透過 Canvas 的乘載，ImageSprite 可加入圖示，讓版面更加豐富漂亮

4、進階應用篇

本單元主要介紹 Media 多媒體類別中的 Sound 音效元件、TextToSpeach 文字語音轉換器；Sensors 感測器類別中的 Clock 計時器元件；Maps 地圖類別中的 Map 地圖元件、Marker 標記元件等功能。

章節六：音樂播放器、文字朗讀器製作

1. Media 類別中的 Sound 元件使用
2. Media 類別中的 TextToSpeech 元件使用，並介紹現有的支援語言

章節七：創意時鐘製作

1. 介紹 Sensors 類別中的 Clock 元件
2. 搭配使用 Canvas、ImageSprite 來製作創意的時鐘

章節八：地圖標記與測距製作

1. 介紹 Maps 類別中的 Map 元件，並設定想要呈現的地區、與放大的範圍
2. 介紹 Maps 類別中的 Marker 元件，於地圖中設定標誌

王穎聰老師從事程式開發教學與實體教育訓練已二十多年，在銘傳大學擔任講師時，常為校內教職員做資訊的教育訓練。而在社區大學開設的電腦、手機等相關課程，則培養了如何對長者講課說明的耐心、關懷、以及挑選適當實用的內容題材。

因此，在許多地方授課的經驗之下，王穎聰老師較能體會許多對資訊、程式初接觸的人的擔心心態，並能深入淺出的引導初學者漸漸地對程式寫作建立信心、培養邏輯思維的判斷能力。

過去已在 Hahow 上開設了《Python 入門特訓 - 基礎實作到證照攻略》，是一門獲得 45 則回饋、總計 4.96 星的高評價入門課程（滿分 5 顆星）！

現在，老師想透過 App Inventor 2 ，帶領對程式領域還不熟悉的同學，體驗程式撰寫的有趣之處！

老師經歷

• 2008，通過 Adobe Flash ACA 證照
• 2009，Adobe ACA 證照監試人資格
• 2009，通過日語檢定四級
• 2009，通過華語導遊考試
• 2009，通過 Adobe Dreamweaver ACA 證照
• 2011，「認識星空」課程錄影教材獲得北一區區域教學資源中心徵選錄取，上網供大家自學。
• 2012，通過 TQC+ Android 行動裝置應用程式設計
• 2016，考取 Google 相關證照，並申請通過 Google 認證訓練講師
• 2017，通過 Google 認證教育家第 1 級證照
• 2017，通過 TQC+ App Inventor 2 創意程式設計
• 2017，通過 Google 認證教育家第 2 級證照
• 2018，通過 TQC+ 程式語言 ( Python 3 ) 證照

過往課程評價

【問題回答的頻率】

平均每周最少上線回答兩次

【批改作業的頻率】

平均每周最少上線批改作業一次

【作業說明】

本課程共有 5 份作業，皆以該章節介紹的功能進行設計，並融合變化應用、提示類似指令，引導同學練習自行思考，並學會舉一反三、實際運用。

• 作業一，於章節二後的作業：「BMI 計算」
• 作業二，於章節三後的作業：「樂透彩電腦選號」
• 作業三，於章節四後的作業：「小畫家」
• 作業四，於章節五後的作業：「撲克牌比大小」
• 作業五，於章節七後的作業：「創意數位時鐘製作」

【作業繳交方式】

同學須將作業匯出成 .aia 格式的專案檔，上傳繳交到老師開設的「Google Classroom」，並把「完整程式碼」與「程式執行畫面」截圖上傳到 Hahow 作業區，即可完成作業繳交。

詳細作業繳交教學，老師將在開課後於課程中進行講解。

解鎖福利｜學習輔具

程式設計浪潮襲捲全球，你該如何「證」明自己？

「工欲善其事，必先利其器」，想要有系統地學習程式語言、培養邏輯思考能力，透過 CSF 提供的線上學習平台，讓你取得專業認證更容易，前進職場不再是難事！

CSF 特別提供【認證體驗組】與【認證參考教材】，讓大家都有機會認識認證學習輔具，體驗事半功倍的學習！

募資達 100% ▶ 早鳥限定！前 30 名購課同學，抽獎送【認證體驗組】共 5 名！

【認證體驗組】：

認證參考教材：創意App程式設計特訓教材 App Inventor 2（市值 $550）
本書遵循 CSF 專業考科「TQC+ 創意App程式設計特訓教材 App Inventor 2」技能規範架構撰寫，符合鑑定的命題趨勢內容淺顯易懂，結合理論與實務，達到技術的傳承及表達，符合實務運用需求。

CSF雲端練功坊 – TQC+ 創意APP程式設計認證 App Inventor 2之線上練功包6個月體驗（市值 $450)
CSF 雲端練功坊是財團法人電腦技能基金會針對 TQC、TQC+、ITE、EEC、CWT 等認證考試所發展的學習輔具，可準確評估練習者的實力，提高練習效率。不僅整合 TQC+ App Inventor 認證題庫，更搭配影音教學，帶領學生清楚瞭解軟體應用操作及解題步驟，讓學習更具成效，是最適合的程式學習輔助工具！

募資達 200% ▶ 人人有機會！募資期間購課學生，加碼抽【認證參考教材】、【雲端練功坊練功包】各 10 名

募資達標 200% 後，在募資期間內購買課程的所有學員皆有抽獎資格！（募資結束後才購課的不算在此內喔！）

老師將從所有購課學生中，抽出 20 位學生，分別贈送：

1. 【認證參考教材_ 創意 App 程式設計特訓教材 App Inventor 2】共 10 名
2. 【TQC+ 創意 APP 程式設計認證 App Inventor 2 之線上練功包_6 個月體驗】共 10 名

總計 20 名的獎項！

📍注意：兩項獎品隨機分配，不挑款，實際得獎獎品須以老師公告與信件通知為主

解鎖單元｜進階專案篇

解鎖單元將開始進入資料存儲與資料讀取的領域，帶領同學了解如何在關閉 App 後，資料還能維持原狀的方法，讓你的資料不會消失，等待下次再啟動 App 時依然能夠使用喔！

募資達 600 % ▶ 章節九：英文單字學習簿、與記帳本的製作

1. 介紹 File 檔案元件，將資料以文字檔案形式儲存在手機內部、並可讀取出來

2. 介紹 TinyDB 微型資料庫元件，將資料以 Key: Value 鍵與值的方式儲存，讀取時只要指定 Key，就能取出相對應的 Value 來

募資達 1000 % ▶ 章節十：美食餐廳查詢系統

1. 介紹 WebViewer 元件來看外部網頁

2. 介紹 Web 元件來讀取外部資料數據

【募資解鎖活動】規則說明

➢ 募資達成率累計至「課程募資 30 天結束的那一刻」！
➢ 各個課程解鎖影片，將於 2020/8/24 （一）提供
➢ 前 30 名購買本課程的學員，於購買時正確填妥「收件資訊」，即符合【認證體驗組】共 5 組的抽獎資格！
➢ 募資達 200 %，並於結束前購買此堂課程，在購買時正確填妥「收件資訊」，即符合【認證參考教材_ 創意 App 程式設計特訓教材 App Inventor 2】、【TQC+ 創意 APP 程式設計認證 App Inventor 2之線上練功包_6 個月體驗】各 10 名的抽獎資格。
（Email 填寫截止日為 2020/05/20 23:59 前）。

如何獲得抽獎資格？

【抽獎規則說明】
購買時間：募資上架日起至 2020/05/20 23:59 募資結束 期間
購買流程：期限內購買本課程，務必於結帳流程正確填妥收件資訊，並完成付款

📍認證體驗組📍
抽獎資格：募資達標 100% 時，已購課的前 30 名學員。（30 名之後才購課的不算在此內喔！）
獎項內容：【認證參考教材：創意 App 程式設計特訓教材 App Inventor 2】+【TQC+ 創意 APP 程式設計認證 App Inventor 2 之線上練功包 6 個月體驗帳號】共 5 名
抽獎辦法：預計於開課後一週內（2020/7/24 以前）抽出得獎名單，以公布欄公布，並在一週內寄出獎項。

📍「認證參考教材」或「TQC+線上練功包_6 個月體驗」📍
抽獎資格：募資達標 200% 時，在募資期間內購買課程的所有學員皆有抽獎資格。（募資結束後才購課的不算在此內喔！）
獎項內容：【認證參考教材：創意 App 程式設計特訓教材 App Inventor 2】10 名，【TQC+ 創意APP程式設計認證 App Inventor 2 之線上練功包 6 個月體驗帳號】 10 名，共 20 名
抽獎辦法：預計於開課後一週內（2020/7/24 以前）抽出得獎名單，以公布欄公布，並在一週內寄出獎項。
📍 注意：本獎品不累贈（僅能獲得教材書或練功包其一），且隨機分配，不提供得主選擇獎項內容。本活動相關規劃與進行方式，老師與 Hahow 保有最終調整權利

⚠️ 注意事項 FAQ
Q 1：請問購買後，要在哪裡填收件資訊呢？
A 1：按下「馬上預購」後，將導向「付款資訊」頁面，最下方即是收件資訊填答欄位，請參考下方附圖一。所有欄位請務必正確填寫，若因資訊錯誤導致寄送不到，恕不補寄。

Q 2：如何確認自己有沒有付款成功呢？
A 2：完成購課流程後，請點選「網頁右上方的大頭貼」進入「訂單記錄」頁面，於「訂單狀況」的欄位顯示「完成付款」的訂單即代表付款成功，請參考下方附圖二。
（備註：選擇以「超商繳費」或「ATM 轉帳」付款的朋友，在下訂單後也要在規定期限內「完成付款」才算符合資格喔！）

若有任何「此活動相關問題」或「贈品寄送問題」，請來信至 csf_hahow@mail.csf.org.tw，將有專人協助為你解答。

⚠️ 重要提醒：
 - 請注意填妥「縣市」、「郵遞區號」，海外寄送務必填妥「國家」！若因地址植入錯誤導致寄送不到，CSF 團隊保有最後寄送權利。
 - 請務必參考下方注意事項欄位，完成付款、填寫 email、寄送地址相關程序。

（附圖一）

（附圖二）