接下來會主要以Windows作業系統指令與Expo 49版本(2023.06.29官方最新版本)
做為後續開發講解
※在Expo版本升級後，指令會有些微誤差，但不影響後續專案開發

接述上篇環境安裝完成後
打開Visual Code(下稱VS Code)，如下圖

接著進行以下操作步驟

1. 按下「Ctrl+Shift+`」或是上方「終端機->新增終端機」，下方會顯示終端機給開發者使用
2. 先找好APP專案要放在哪裡(資料夾名稱建議使用英文)
3. 決定好之後，使用CMD的cd指令導向要開專案的資料夾

D:
cd D:\2023IronManAPP

※ Windows在切換磁碟區時，要先把磁碟區的名稱打出來

新增Expo專案

接著依照Expo官網的指令新增專案

1. 終端機輸入 npx create-expo-app TestExpoAPP
2. 指令跑完後，在VS Code上點選「開啟資料夾」選擇剛剛建立完成的資料夾(TestExpoAPP)
   就能看到左邊檔案總管已經有基本React Native Expo專案了

※ TestExpoAPP就會是這個APP的專案名稱，可自行修改

專案架構簡介

建立專案完後會有以下檔案內容

• .vscode：設定啟動VSCode Debugging使用
• assets：預設放置APP的Icon
• node_modules：Node.js 中用於存放 JavaScript 模組的標準位置
  沒有安裝模組，Expo專案是無法執行的
• .gitignore：Git版本控制Commit時忽略項目
• App.js：APP的預設入口點程式，在package.json的main標籤可以調整入口點
• app.json：APP專案名稱、圖示、Loading畫面、版本設定皆在此檔案裡
• babel.config.js：babel負責將你編寫的 JavaScript Code
  轉換為可以在 React Native 環境中運行的Code
• package-lock.json：Node中用於管理專案依賴的檔案
• package.json：套件安裝管理，可以查看Node安裝了多少套件

APP Server端 啟動

介紹完之後，總是要測試一下第一支APP能不能使用
終端機輸入 npx expo start 會看到專案啟動的畫面

※啟動前請確認一下建置類型是Using Expo Go，若不是的話，鍵盤按s切換
Development build 需安裝expo-dev-client才能使用，且過程繁瑣
個人推薦使用 Expo Go 開發模式😅

Expo CLI常用指令

• Press s | 切換Expo開發模式類型(目前Using Expo Go最為穩定)
• Press a | 打開Android模擬器/手機有插USB到電腦也能使用
• Press w | 開啟網頁版APP，個人不建議使用React Native進行Web開發
• Press j | 打開偵錯工具，跟網頁按F12功能相同
• Press r | 重新啟動APP，非常實用的一項功能
• Press m | 打開Expo專屬偵錯選單，可使用元件選取、效能工具、熱更新
• Press o | 打開程式碼編輯器(但已經開啟VS Code了...)
• Press ? | 展開Expo全部指令

其餘指令及啟動設定請參考 EXPO CLI

再來分成Android模擬器及實體Iphone手機
進行雙平台Client端啟動

Android模擬器

打開Genymotion
按下「+」新增一台Android手機
接著啟動一台Android模擬器
※ 打開時稍微確認自身電腦RAM是否足夠，否則手機模擬器會無法啟動

最後，在VS Code終端按下a，就能看到APP的內容了

※ MAC使用者使用Xcode上方的 Open Developer Tool->Simulator
在VS Code按下i，同樣能啟動APP

實體Iphone手機/Android手機

1. 需安裝Expo Go APP(應用程式商店免費下載)

2. 確認電腦與手機Wifi環境一致
   若無Wifi環境，啟動指令要改成npx expo start --tunnel
--tunnel指的是公開連結，外部使用者皆能存取，因此除錯完記得關閉APP

3. 公開網路模式啟動時，Expo會要求安裝另一項套件
   安裝指令：npx expo install @expo/ngrok@^4.1.0

4. 回到VS Code會產生新的QR Code
   手機對著QR Code掃描，Expo GO會協助開啟專案
   終端機寫著 iOS Bundling complete XXXXXms
   實體機就會像上方模擬器啟動的結果一樣了

如何關閉Expo專案

實體手機直接滑掉APP/模擬器按XX = 關閉Client端
VS Code 終端機「Ctrl+C」 = 關閉Server端

結語：
在一行程式都還沒Coding前
到這邊你已經能獨自啟動一隻APP了👏
整體開發而言，只要下啟動指令
剩下的開發設定都由 Expo 預先設定好了
下一篇，會開始逐一介紹 React Native Components的使用方法了。