iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Mobile Development

Flutter 30: from start to store系列 第 5

開發環境設置:為iOS APP 開發安裝XCode

要用flutter開發iOS版本的APP,必須使用macOS並安裝Apple官方提供的IDE: XCode。
xcode

今天大致會介紹的內容為:

  • 使用xcode-install 安裝Xcode
  • 安裝Xcode command line tool
  • 在mac上面建立iOS手機模擬器(iOS simulator)
  • 安裝iOS開發的套件管理工具:Cocoapods

好的,那我們就開始吧!


安裝Xcode

  • 透過mac的AppStore安裝XCode非常慢也沒有效率,今天來介紹使用 xcode-install 工具來管理自己安裝的Xcode

xcode-install

  • xode-install是一款管理xcode版本的工具,首先在Terminal 使用gem(ruby的套件管理工具)安裝:

     sudo gem install xcode-install
    ``
    
    
    程中要輸入開機登入時的密碼以啟用sudo權限,結束後,輸入`xcversion --version` 即可查看當前版本。若是有顯示版本號,代表安裝成功!
    
  • 要注意 xcode-install 提供的指令是以 xcversion 開頭,我們首先列出所有可安裝的版本

     xcversion list
    ``
    
    
  • 看過所有可供安裝的版本後,這邊我們先挑選正式版13.4.1

     xcversion install 13.4.1
    ``
    於Xcode檔案很大,通常佔10-20GB,安裝時請耐心等候 XD
    
    過程中會需要你輸入Apple ID 以及密碼,如果沒有Apple ID的話可以參考 [官方教學](https://support.apple.com/en-us/HT204316) 申請一組喔~
    
    
    
    
  • 安裝完畢後,使用

     xcversion installed
    ``
    
    可查看已經透過xcode-install安裝的版本,而
    
    ``shell
     xcversion selected
    ``
    會列出當前正在使用的版本
    
    
  • 若要安裝多個Xcode版本並在開發時任意切換,可以使用指令xcversion select [version]切換到其他已安裝的版本。比如說我安裝了13.4.1和12.5.1兩個版本,我就可以透過

    $ xcversion select 12.5.1
    

    切換到12.5.1版本,依此類推。

  • 到這邊,我們學會了透過xcode-install 管理Xcode版本,Xcode也已經安裝完成。接下來我們來檢查Xcode本身的指令工具安裝狀況。


安裝Xcode command line tool

  • 一般來說,安裝Xcode就會自帶指令工具command line tools,可以使用

     xcrun --version
    ``
    
    查看當前安裝的指令工具版本,若是執行成功,可以直接跳過本階段。
    
  • 但若是安裝Xcode 後仍然無法使用指令工具,有可能:

    1. 已經安裝了但是找不到:

      • 通常Xcode會自帶command line tools的。比如說我們下載Xcode到/Application,command line tools 應該會在 /Application/Xcode.app/Contents/Developer之中

      • 首先下指令,以偵測目前使用的xcode 版本位址

         xcode-select -p
        ``
        
        果我預期要用安裝在`/Application`中的Xcode,剛才的指令卻回傳不在預期之中的路徑,可以使用
        
        ``shell
         xcode-select --switch /Applications/Xcode.app
        ``
        來重新指定要用特定位置的Xcode以及其對應的command line tools
        
        
    2. 沒有正確安裝

      • 確定了Xcode版本位置之後,還是無法使用指令工具,可以在Terminal輸入

         xcode-select --install
        ``
        
        系統會會自動顯示提示視窗引導我們完成安裝流程。
        
        
  • 確認xcrun 相關指令可以正確執行,就代表command line tools安裝成功!


建立iOS Simulator

  • iOS Simulator是電腦上的手機模擬器,可以模擬我們開發的APP在手機上運作的過程以及UI呈現。

xcrun simctl

  • 接著我們要使用剛才安裝好的指令工具來開啟特定的模擬器。首先使用xcode 指令xcrun裡面的 模擬器相關指令 simctl:

     xcrun simctl list
    ``
    列出所有可用的機型
    [xcode simulator device list](https://i.imgur.com/I5JoApa.png)
    
    
  • 這邊我們在列出的資料中找到== Devices ==的部分,可以看到列舉出的機型和後面的UUID。挑選要啟動的模擬器並輸入:

     xcrun simctl boot [device id]
    ``
    如說我要開一台 `iPhone 13 (31F67EC8-93B3-44B1-BC7B-E9EF98C49151)`
    是用指令
    
    ``shell
     xcrun simctl boot 31F67EC8-93B3-44B1-BC7B-E9EF98C49151
    ``
    後靜待模擬器開啟即可
    [https://ithelp.ithome.com.tw/upload/images/20220920/20152234jTp69IQC0M.png](https://ithelp.ithome.com.tw/upload/images/20220920/20152234jTp69IQC0M.png)
    
    
  • 關閉模擬器:

     xcrun simctl shutdown [device id]
    ``
    
  • 清除模擬器上的資料和操作紀錄:

     xcrun simctl erase [device id]
    
  • 可以正常開啟和關閉模擬器之後,我們進入到最後的部分- 安裝Cocoapods


安裝Cocoapods

  • Cocoapods是iOS 原生開發語言(Objective-C 和Swift) 的套件管理工具。所有要在iOS app上使用的library透過Cocoapods的管理,可以很方便地進行安裝、版本管控、套件升級...等等操作。

  • 透過指令安裝

     sudo gem install cocoapods
    ``
    
    你使用Apple Silicon晶片的 Mac,則需要使用以下指令:
    
    ``shell
     sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc
    ``
    
  • 安裝完畢後使用

     pod --version
    ``
    查是否安裝成功
    
    
  • 至此,Flutter在iOS開發方面的準備大致完成囉!


Recap

今天跟大家一起進行iOS開發的前置作業:

  • 使用xcode-install 安裝Xcode
    • xcversion list : 列出所有可安裝Xcode版本
    • xcversion install [Xcode version]: 安裝指定Xcode版本
    • xcversion installed: 列出已安裝Xcode版本
    • xcversion selected:列出目前正在使用的Xcode 版本
    • xcversion select [Xcode version]: 選取要使用的Xcode版本
  • 安裝Xcode command line tool
    • xcode-select --install: 透過指令安裝command line tool
    • xcode-select --switch [Xcode path]指定使用特定路徑來源的Xcode
  • 在mac上面建立iOS手機模擬器(iOS simulator)
    • xcrun simctl boot [device id]:啟動特定的模擬器
    • xcrun simctl shutdown [device id] :關閉特定模擬器
    • xcrun simctl erase [device id]:將模擬器上紀錄的資料和操作行為都清除
  • 安裝iOS開發的套件管理工具:Cocoapods

明天我們一起來看看如何安裝Android的開發環境吧!


上一篇
Dart語法簡介:Class和其他關鍵字
下一篇
開發環境設置:為Android App開發安裝Android Studio
系列文
Flutter 30: from start to store30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言