Adaloのカスタムコンポーネント開発時iOSテスト環境を構築する

2022年11月22日

環境

  • Windows 11
  • OSX Monterey version 12.6.1
    • コンテナの立ち上げコマンドは下記
      docker run -it \
      --device /dev/kvm \
      -p 50922:10022 \
      -v /tmp/.X11-unix:/tmp/.X11-unix \
      -e "DISPLAY=${DISPLAY:-:0.0}" \
      -e RAM=6 \
      -e GENERATE_UNIQUE=true \
      -e MASTER_PLIST_URL='https://raw.githubusercontent.com/sickcodes/osx-serial-generator/master/config-custom.plist' \
      sickcodes/docker-osx:monterey
      • Xcodeのインストールのため、OSXのバージョンはMontereyを選択
      • iOSエミュレータ起動のため、RAMを4以上に設定
        （WSL2のRAM量を増やす方法はこちらを参照：WSL2で利用できるRAM量を増やす）

手順

準備

  1. Xcodeをインストール
    • Apple Storeからインストール
  2. Homebrewをインストール
    $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  3. リポジトリをアップデート
    $ brew update
  4. Watchmanをインストール
    $ brew install watchman
  5. Cocoapodsをインストール
    $ brew install cocoapods
  6. Node.jsをインストールしてリンク
    $ brew install node
    $ brew install node@14
    $ brew unlink node
    $ brew link --force node@14
  7. yarnをインストール
    $ brew install yarn
  8. テキスト正規化の設定を更新
    $ export LANG=en_US.UTF-8

mobile-previewerをインストール

  1. mobile-previewerをcloneしてくる
    $ git clone https://github.com/AdaloHQ/mobile-previewer.git
  2. cloneしたディレクトリに移動
    $ cd mobile-previewer
  3. 依存ライブラリをインストール
    $ yarn install
  4. iosディレクトリに移動
    $ cd ios
  5. Xcodeワークスペースの依存ライブラリをインストール
    $ pod install
  6. 2.と同じライブラリに移動
    $ ../
  7. サービスを実行
    $ yarn start
$ node node_modules/react-native/local-cli/cli.js start --reset-cache
                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          
warning: the transform cache was reset.
                 Welcome to React Native!
                Learn once, write anywhere



To reload the app press "r"
To open developer menu press "d"

Xcodeでエミュレータを起動

  1. Xcodeを開き、Command Line Toolsを設定
  2. 前節4. のディレクトリのAdaloApp.xcworkspaceを開く
  3. 左上の実行ボタン「▶」をクリックし、エミュレータが立ち上がることを確認
  4. 前節 7.で実行しているサービスと連携する
    • エミュレータ上で「Reload」を実行する
    • 上記で連携されなければ、前節7. のサービスをで r を入力する

カスタムコンポーネントの作成とimport方法に関してはこちら：Adaloカスタムコンポーネントのシミュレーション環境でカスタムコンポーネントをimportする

手順Adalo,NoCode

Posted by ttnt