モバイルアプリをエミュレーター用に準備することは、最初は大変な作業のように思えるかもしれません。 ただし、詳細が決まれば、実際にはかなり苦痛のないプロセスであり、開発者にとってエキサイティングな時間です。 Android StudioはOSに依存しないため、開始するのに最適な出発点であるだけでなく、経験豊富なモバイルアプリ開発者にとっても同様に役立ちます。

この投稿の例では、IonicアプリにReactを使用しますが、これはAngularを使用しても同様に機能します。

IonicとCapacitorの使用を開始する

まず、Ionic CLIがインストールされていることを前提として、サンプルアプリを作成しましょう。

$ ionic start ionic-cra blank --type=react --capacitor

これで、すでにアプリを作成している場合、またはコーディングを開始している場合は、心配する必要はありません。 次のステップであるIonicとCapacitorの初期化に移りましょう。

次のコマンドを入力し、プロジェクトの名前を入力して、プロジェクトタイプとして @ionic /reactを選択します。

$ ionic init

次に、コンデンサをアプリに追加しましょう。

$ npm i --save @capacitor/core @capacitor/cli

これらの次のステップは驚くほど速く、AndroidStudioに直接つながります。

$ npx cap init
  • アプリ名：あなたのアプリ（おそらくあなたのプロジェクト名）、
  • アプリパッケージ：com.yourapp（ドメイン拡張子の後にWebサイトの名前が続く）
  • npmクライアント：どちらでもかまいません（モバイルアプリの場合、安全のためにnpmを使用します）。

次に、capacitor.config.jsonを編集し、webDirの値をwwwからbuildに変更します。 最後に、プロジェクトをビルドしてAndroid対応の環境にコピーしましょう。

$ ionic build
$ npx cap copy
$ npx cap add android

Android Studio

前の手順でプロジェクトのルートディレクトリに作成したandroidフォルダーでAndroidStudioを開きます。

プロジェクトが完全に同期されたら、仮想デバイスのセットアップが必要になる場合があります。 必要に応じて、「Ctrl + Shift + A」を押し、AVDManagerを検索して開始します。

うまくいけば、これまでに完了し、ツールバーのrunドロップダウンを選択してプロジェクトを実行する準備ができており、ご想像のとおり、run 'app'を選択してください。

これで、Ubuntu / Linuxの使用中に次のエラーが発生しても、心配する必要はありません。

現在のユーザーに/dev/kvmへのアクセスを許可する

ターミナルを開き、次のコマンドを入力して、/dev/kvmの権限を編集するだけです。

$ sudo chmod 777 /dev/kvm

問題が解決しました。

そして、あなたはそれを持っています。

App screenshot example

読んでくれてありがとう、またまた会いましょう！ ⏰