React Native App 設計與開發專題研習課程 003
1 like253 views
本課程涵蓋應用程式設計與開發的多個面向，著重於創新思考和設計思考的概念，幫助學生了解如何尋求創新的解決方案。透過腦力激盪法，學生能夠有效地定義問題並討論設計構思。課程中還介紹了 React Native 開發環境的安裝及基本操作，並鼓勵學生親自實踐以增強實際開發能力。
![來做 [文藝生活App] 腦力激盪吧(一)
• 請先準備好便利貼(最好有兩種以上的顏色)
• 從以下八種傳統藝術中，選出四種，並寫下在這四種中，常作的實際
行為，比如”文學 – 到書局看雜誌”
• 繪畫, 雕塑, 建築, 音樂, 文學, 舞蹈, 戲劇, 電影
• 在另外一種顏色的便利貼上，寫下常用的手機/平板四種基本功能，
如”打電話”,”拍照”,”定位(GPS)” ,”錄音” ,”文字記錄”…
• 先自行任意組合以上的 4 x 4 組合，並思考可能產生的結合功能，如”
繪畫 – 到展覽館參觀作品” x “定位” => “不管走到哪，都可以告
訴我附近的藝廊”](https://image.slidesharecdn.com/app00320170325-171110095519/85/React-Native-App-003-11-320.jpg)
![來做 [文藝生活App] 腦力激盪吧(二)
• 接下來，請大家把第一類(文化與活動)與第二類(功能)的便利貼，
貼到白板上，相似或是相同的集合在一起
• 第一類中找出前兩名，第二類也找出前兩名，進行 2 x 2 的組
合與討論，看看可以做出怎樣的主題
• 最後每人選定一個題目，作為本學期的App主題](https://image.slidesharecdn.com/app00320170325-171110095519/85/React-Native-App-003-12-320.jpg)
React Native App 設計與開發專題研習課程 003
- 2. 創新思考的小活動 • 狹小道路的會車問題 • 在一條小路上，兩方向的車，相遇了 • 他們都想到另外一邊，期望的結果如下
- 3. • 由於道路狹小，所以車子只能這樣走 • 前方若有空格，可以前進一格 • 前方若有空格，可以會車，不限同方向或反方向的車 • 不可倒車 • 一次只能有一台車行動作(回合，非即時) 創新思考的小活動
- 4. • 在紙上，畫出解法了嗎？需要移動幾次呢？ • 接下來，請同學到前面來，依照人數的量，排成如車子的方式 • 依照剛剛的解答，自主前進看看(可互相討論) • 若走不出來，可以加入一個指揮人員，在旁協助 創新思考的小活動
- 5. 問題/討論 ➢ 這樣的活動，目的為何？ ➢ 行動排程或策略規劃？ ➢ 為何還要讓同學起來活動一下？ ➢ 本活動對於本課程有何幫助？ ➢ 同學在本活動中，學到了什麼？
- 6. 設計思考(Design Thinking)的描述 • 設計思考是什麼？ • 設計思考（Design Thinking）是一個創意與設計的方法論，為各種議題尋 求創新解決方案，並創造更多的可能性。 • 設計思考，不同於分析式思考(analytical thinking)，是一種「發想」、 「構思」、「執行」的過程，發想本質「生活化」，構思過程「專業化」， 執行成果「普遍化」。 • 設計思考（design thinking）不只是「產品」、「服務」的設計，而且還 是流程、經營模式、組織運作、工作環境、小區營造、教育…等等的設計。 • 因此，「設計思考」是：一種結構完整的思維模式。任何行業，任何公司的 任何領域都可採用、而且可以產生許多有意義與建設性產品或服務的創新設 計模式。 資料來源：http://zh.wikipedia.org/wiki/設計思考
- 7. 在走入創意與設計之前 • 讓我們先看一段影片 • David Kelley: How to build your creative confidence • http://www.ted.com/talks/david_kelley_how_to_build_your_creative_confide nce.html • 我們讀管理和工程科系，所以我們不是創意型的人？ • 創意和設計離我們太遠，只有少數人才能勝任？
- 8. App 設計 Design Thinking – 腦力激盪法
- 9. 腦力激盪法(Brainstorming) • 腦力激盪是多數設計專案的第一步，許多的思考設計工具也是 由此法衍生而來。 • 腦力激盪的意思，是指從不同的方向，對問題發動攻擊，以一 連串的小問題，對主要問題進行轟炸，來找出可行的解決方案。 • 本法用來在專案初期，幫助團隊來定義問題，並同時思考出概 念和雛形。
- 10. 腦力激盪進行事項 • 指定一名主持人 • 作為過程的領導者，記錄相關事項 • 陳述題目 • 越明確的題目，越能實際思考實際的行動與遇到的問題 • 把所有提到的一切都寫下來 • 用紙筆、白板、或是便利貼來做記錄 • 限定時間 • 或是限定構想的總數量 • 採取後續行動 • 記錄、整理、發送
- 11. 來做 [文藝生活App] 腦力激盪吧(一) • 請先準備好便利貼(最好有兩種以上的顏色) • 從以下八種傳統藝術中，選出四種，並寫下在這四種中，常作的實際 行為，比如”文學 – 到書局看雜誌” • 繪畫, 雕塑, 建築, 音樂, 文學, 舞蹈, 戲劇, 電影 • 在另外一種顏色的便利貼上，寫下常用的手機/平板四種基本功能， 如”打電話”,”拍照”,”定位(GPS)” ,”錄音” ,”文字記錄”… • 先自行任意組合以上的 4 x 4 組合，並思考可能產生的結合功能，如” 繪畫 – 到展覽館參觀作品” x “定位” => “不管走到哪，都可以告 訴我附近的藝廊”
- 12. 來做 [文藝生活App] 腦力激盪吧(二) • 接下來，請大家把第一類(文化與活動)與第二類(功能)的便利貼， 貼到白板上，相似或是相同的集合在一起 • 第一類中找出前兩名，第二類也找出前兩名，進行 2 x 2 的組 合與討論，看看可以做出怎樣的主題 • 最後每人選定一個題目，作為本學期的App主題
- 13. 開發環境安裝
- 14. 本次課程的 App 開發架構 React Native JavaScript(ES2016) 寫作工具 VS Code Android App 專案檔 iOS App 專案檔 Android SDK iOS SDK 各自的原生碼 程式
- 15. PC 上的安裝(只能開發 Android App) 1. JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk 8-downloads-2133151.html 2. Android Studio https://developer.android.com/studio/index.html Android SDK 版本 – 安裝 Android 6 相關套件 3. 有一個環境變數：ANDROID_HOME 4. GenyMotion(安著手機模擬器)(加快執行速度) https://www.genymotion.com/download/
- 16. Mac 上的安裝(Android/iOS App 皆可安裝) 1. JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk 8-downloads-2133151.html 2. Android Studio https://developer.android.com/studio/index.html Android SDK 版本 – 安裝 Android 6 相關套件 3. 有一個環境變數：ANDROID_HOME 4. Xcode (於 App Store 上安裝) 5. GenyMotion(安著手機模擬器)(加快執行速度) https://www.genymotion.com/download/
- 17. React Native 環境(Windows & Mac 皆可安裝) • 依照官網的流程來安裝 • https://facebook.github.io/react-native/releases/next/docs/getting-started.html • Windows 下，用 Administrator 來開啟命令列視窗 • 左下角開始紐上，按右鍵，選”命令提示字元(系統管理員)” • 安裝 Chocolatey (套件管理員) • 貼上以下命令： @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new- object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin • 重開命令列視窗 依序安裝： (1) Node, Python2 (2) The React Native CLI • AVD 部分，用 Genymotion 來代替
- 18. 開發工具(Windows/Mac 視工具內容而定) • Visual Studio Code • https://code.visualstudio.com • Win/Mac 皆可安裝與執行 • 包含 React Native 外掛套件(React Native Tools)，IntelliSense，與 Git 支援 • Deco IDE • https://www.decosoftware.com • 提供所見及所得之 UI 設計功能 • 只能安裝於 Mac 上 • Atom + Nuclide • https://atom.io ，https://nuclide.io • 皆由相關公司/社團開發，Atom(GitHub)，Nuclide(Facebook)
- 19. 建立第一個 React Native 專案 • 先啟動模擬器 • 於 D 槽新增一個 RN_WS 資料夾 • 在命令列模式中，cd 到 D:RN_WS 中 • 輸入以下命令 react-native init AwesomeProject cd AwesomeProject react-native start react-native run-android
- 20. 使用 Visual Studio Code 開始編輯 • 打開 VS Code • 檔案->開啟資料夾 => 選 AwesomeProject • 打開 index.android.js • 修改內容，於模擬器中，連續按下 R 兩次，即時查看修改後的結果
- 21. 思考與練習 • 查看 Visual Studio Code 的基本操作方式 • 自行建立一個 React Native 專案，並在模擬器中執行 • 使用 Visual Studio Code 來開啟 React Native 專案，稍微修改內容， 並執行 • 網路資源 • React Native 中文網： https://reactnative.cn • 個人部落格： http://huli.logdown.com/posts/314393-teaching-react-native- for-android-1