使用 React Native 開發 App 教學

1. App設計與開發專題研習課程
課程：003(2017/3/25)
業師：陳信宏(阿信)
eosinchen@gmail.com

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