Ionic 4：IonicDevAppを使用したライブオンデバイステスト

投稿日: 2022-04-20 2022-04-20

ケーブル。誰がそれらを必要としますか？ Ionic DevAppを使用しているので、あなたではありません。これは、iOSストアとAndroidストアで利用できるすばらしいアプリケーションであり、デバイスでIonicアプリケーションをすばやく簡単にテストできます。

さらに良いことに、エディター内から行ったすべての変更は、ほぼ瞬時にアプリケーション内に表示されます。これ以上何が必要ですか？

IonicDevAppを起動して実行する方法を見てみましょう。

IonicDevAppのインストール

ご想像の通り。最初のステップは、それぞれのApp Storeにアクセスして、IonicDevAppアプリケーションをダウンロードすることです。 iOSとAndroidのリンクは次のとおりです。

IonicDevAppの使用

素晴らしい。大変な作業のほとんどはすでに完了しています。アプリケーションを開くと、Ionicアカウントにログインするように求められます。

Ionicアカウントをまだ作成していない場合は、サインアップページにアクセスして作成してください。

次に、携帯電話で実行する新しいIonicプロジェクトを作成する必要があります。これを実証するために、先に進んで新しいIonic/Angularプロジェクトを作成しましょう。

# Ensure you have the Ionic CLI installed
$ npm i ionic -g

# Create a new Ionic project with the name of your choosing
$ ionic start ion-devapp blank

# Open inside of VS Code and Serve the project
$ code . && ionic serve -c

これで、http://localhost:8100でアプリケーションが実行されているはずです。これは、ブラウザーでアクセスできます。 Ionic DevAppに戻ると、アプリケーションがリストに表示されるはずです。

Ionic DevApp application list

ええとああ。私は現在、地元のコスタコーヒーでこれを書いていますが、リストに私のアプリケーションが表示されません。私は何をしますか？

ありがたいことに、サイドメニューを押してEnter address manuallyを選択することで、アドレスを手動で入力できます。

ionic serve -cの実行中に表示されたDeveloper server running!メッセージを覚えていますか？外部アドレスが必要です。

[INFO] Development server running!

    Local: http://localhost:8100
    External: http://10.108.90.28:8100

Enter your address manually

これで、アプリケーションが画面に表示されます。この段階でまだアプリケーションが表示されない場合は、同じWiFiネットワークに接続していることを確認してください。

これで、アプリケーションに変更を加えることができ、画面にすぐに表示されます。現代のウェブ開発の魔法。

制限事項

Ionic DevAppにはわずかなの制限があり、それはすべてのCordovaプラグインをサポートしていないという事実です。したがって、ネイティブ機能を利用するIonicアプリケーションをデバッグする主な方法としてIonicDevAppを使用することはお勧めしません。

サポートされているプラグインの完全なリストはここで確認できます。

getdocs

13036