Download as PDF, PPTX
Uploaded byRoy Wang
App inventor 1
本文介绍了 app inventor 的基本概念和操作，包括移动应用程序的定义、主要平台及其开发工具。文中详细说明了 app inventor 的设计界面、功能模块以及如何创建第一个应用程序的步骤与示例代码。总体而言，文档强调了使用拼块编辑器的简易性，使大众能够轻松开发 Android 应用。
App inventor 1
- 1.
- 2. App是什麼? • 行動應用程式(英語:mobile application，簡稱app)，或手機應用程 式、手機App等，是指設計給智慧型手機、平板電腦或其他行動 裝置上運行的應用程式。 • 主流的行動裝置平台有: • Android • iOS • BlackBerry • Windows Phone
- 3. 市佔率最大的兩個平台 Android iOS 開發公司 GoogleApple 系統核心 Linux Mac OS 系統開發 開放式系統且開發限制較少 封閉式系統且開發限制較多 App 品質 不錯 非常好 支援設備 htc、ASUS、Samsung、小 米...等相關手機平板系列商 品。 IPhone、Ipad相關系列設備。 App 副檔名 *.apk *.ipa 原廠開發工具 Google Android SDK(Java) App Inventor Xcode(Object C)
- 4. Android 開發工具 • AppInventor • Android開發(Eclipse) • Android開發(Android Studio) • React Native
- 5. App Inventor介紹(1) • AppInventor是一個完全線上開發的Android程式環境，只要用一般 的瀏覽器，如IE、FireFox、Chrome連上網際網路就可進行開發。 • 所有設計的專案都是透過Google Accoun儲存在Server上。 • App Inventor完全拋棄複雜的程式碼而使用拼圖式的堆疊法來完成 Android程式。
- 6. App Inventor介紹(2) • AppInventor也支援樂高NXT機器人，使想 要用手機控制機器人的使用者而言，能夠 使用基本元件，例如按鈕、文字輸入輸出 等即可。
- 7. App Inventor主要分為三大作業模組 • AppInventor Designer 設計師 • 設計手機畫面的地方，含Palette、Viewer、Components元件、Properties 屬性。 • App Inventor Blocks Edit 圖塊編輯器 • 決定程式行為的地方，會以另一個視窗來顯示的程式。 • Ai2 Starter (App Inventor2) • 透過Ai2 Starter 可以讓App Inventor2將寫好的程式連接到模擬器或是載具 (手機或平板)執行。
- 8. Android 開發(Eelipse) • 需要安裝的項目 •JAVA 開發工具(Java Development kit - JDK) • Eclipse的JAVA開發環境(Eclipse IDE for Java Developers) • Android 開發工具(Android SDK)
- 9. Android 開發(Android Studio) •安裝Android Studio就好
- 10. Android 開發工具比較 Android StudioEclipse 推出公司 Google Eclipse 版控整合 有 無 速度 快 慢 內置終端 有 無 介面 好操作並好看 太舊且陽春 智能編輯器 預覽語法等 無 自動存檔 有 無 擴充工具或lib Gradle 匯入麻煩
- 11.
- 12. React Native • ReactNative是Facebook推出的一個用JavaScript語言就能同時編寫 iOS、Android和後端的一項技術。 • React Native 提供的是學好一套技能，用此技能可以建構多種平 台的App。 • 已使用React Native的App
- 13. 軟體工程師分工的名稱介紹 • 網路產品包含行動端和網頁兩種主要型態 • 行動端開發(iOS、Android)，Android開發用Java，iOS用ObjectC • 網頁前端開發使用html、css、javascript • 網頁後端開發使用C#、JSP、PHP...等
- 14.
- 15. 申請Gmail • Gmil帳號為每一個App Inventor開發者必備帳號，藉此來登入App Inventor官網。 • 在搜尋引擎輸入Gmail關鍵字搜尋
- 16.
- 17.
- 18.
- 19. App Inventor2 starter安裝(1) • 一種Android 模擬器，能讓沒有Android裝置，仍然可以在裝置上 測試。 • 安裝步驟 • http://appinv.us/aisetup_windows • 找到你下載目錄中的MIT_App_Inventor_Tools_2.3.0_win_setup.exe檔案 • 開啟這個檔案 • 依照畫面指示進行安裝 • 如果你遇到如右畫面，請按是 • 安裝完成後，請重開機
- 20. App Inventor2 starter安裝(2) • 模擬器需要使用名為ai Starter的程式，這個程式允許瀏覽器可以 和模擬器連接。 • 安裝App Inventor軟體時，aiStarter也一起被安裝進來。 • 啟動aiStarter，看到如右的畫面。
- 21. App Inventor2 starter安裝(3) • 連接模擬器 • 啟動aiStarter後，然後從App Inventor功能表上， 按Connect Menu -> Emulator 選項，就可連接模擬器。
- 22.
- 23. 開發環境簡介 • Project(專案選單) • Connect(連結選單) •Build(打包選單) • Help(輔助選單)
- 24. 開發環境簡介-Project(專案選單)(1/2) • My Project(我的專案)-點選開啟自己的所有專案 •Start New Project(開啟新專案)-開啟新的專案 • Import Project from my computer (從我的電腦匯入專案) • Delete Project(刪除專案) • Save Project(儲存專案) • Save Project as(另存專案) • Check Point(設立檢查點)
- 25. 開發環境簡介-Project(專案選單)(2/2) • Export allProject to my computer (匯出選取的專案到我的電腦) • Export all projects(匯出所有專案) • Import keystore(匯入 keystore) • Export keystore(匯出 keystore) • Delete keystore(刪除 keystore)
- 26. 開發環境簡介-Connect(連結選單) • AI Companion(將程式經由Wifi無線同步到手機) •Emulator(連接到模擬器) • Usb(透過usb連接到載具如手機或平板) • Reset Connection(重設連線) • Hard Reset(強制重設)
- 27. 開發環境簡介-Build(打包選單) • App(provide QRcode for .apk)-顯示一個QR Code，可以透過QR Code將此apk檔下載到裝置裡安裝 • App(save .apk to my computer)-將apk檔下載存到電腦裡
- 28. 開發環境簡介-Help(輔助選單) • About(關於) • Library(文庫) •Get Started(快速入門) • Tutorials(教學課程) • TroubleShooting(疑難排解) • Forums(論壇) • Report Issue(回報問題)
- 29. App Inventor Designer(設計師作業) •此作業最主要的目的為佈置相關元件與設定元件屬性。
- 30. App Inventor Designer- Palette(開發元件庫) •可以從Palette的清單選擇需要的元件，預設只會顯 示Basic基本元件的項目。 • 點選各分類的標籤(如:Media、Social等)，就能看到 其他分類底下的項目。
- 31. App Inventor Designer- Viewer(開發設計區) •擺放相關應用元件的地方，可以編 輯應用程式大致的外觀。 • 若想看到程式實際的畫面，需要將 App下載到Android行動裝置，或是 透過Android Emulator模擬器檢視。
- 32. App Inventor Designer- Components(應用元件區) •此區列出專案中使用到的元件，可以在此修改元件 名稱，或是刪除元件。 • 新的專案應該只有一個Screen1元件，實際上Screen1 元件就是行動裝置的螢幕。
- 33. App Inventor Designer-Media(媒體清單區) •顯示專案中使用的媒體檔案，新的專案沒有任何的媒體檔案，所 以目前是空的。 • 上傳的圖片、聲音檔案都將會顯示在這個媒體清單。
- 34. App Inventor Designer- Properties(元件屬性設定區) •針對所選擇的元件顯示此元件的屬性。 • 點選檢視器中的元件時，可以在這裡檢視或修改元 件的屬性，例如設定螢幕元件的背景顏色、按鈕元 件的大小等。
- 35. App Inventor Designer-Screen(手機畫面選 擇區) •一個專案可以有多個畫面，可以在此選擇畫面、新增畫面及刪除 畫面。
- 36. App Inventor Designer-Blocks(開啟拼塊編 輯器) •按下此鍵將會開啟拼塊編輯器。
- 37. Blocks Editor(拼塊編輯器作業) • Blocks(邏輯控件庫區) •在設計師作業佈置好的元件在這裡設定要做什麼動作或是邏輯上的設定。 • Media(媒體清單區) • 顯示專案中使用的媒體檔案。 • Viewer(控件設計區) • 佈置與設計邏輯控件的地方。 • 若想刪除編輯器的拼塊，使 用滑鼠將拼塊拖到右下方的 垃圾桶即可刪除。
- 38.
- 39. 建立新專案 • 進入App Inventor2官方網站->MyProjects頁面->點選New Project， 建立一個HelloWorld的專案。
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. 設計拼塊(2/4) • 選擇when btnClick.Click do 事件，拖拉到空白處，代表當 btnClick被按下時，執行所包含的動作。
- 48. 設計拼塊(3/4) • 從左側Screen1中，選IbHello。選擇set IbHello.Text to 指令，拖拉 出來，代表要設定IbHello的文字，然後拖拉到btnClick事件中。
- 49.
- 50.
- 51. 執行程式(裝置) • 案上方的Build->App(provide QRcode for .apk)。