Ubuntu 20.04にIonic Frameworkをインストールする方法

Ionicフレームワークは、HTML、CSS、JavaScriptなどのコアWebテクノロジーを使用してモバイルおよびデスクトップアプリケーションを構築するためのオープンソースUIツールキットです。 Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく機能し、表示されるように設計されています。

この記事は、Ubuntu 20.04 LTSシステムにIonicフレームワークコマンドラインユーティリティをインストールするのに役立ちます。

前提条件

sudo特権ユーザーを使用してUbuntuシステムにログインします。次に、システムパッケージを最新に更新します。

sudo apt update && sudo apt upgrade

ステップ1 –ノードのインストール

まず、次のコマンドを使用して、システムにNPMとNode.jsをインストールします。以下のコマンドは、node.jsのPPAをシステムに追加します。

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install nodejs

ステップ2 – Cordovaをインストールする

システムにNode.jsをインストールした後、次のコマンドを実行してCordovaをインストールします。これにより、必要なすべてのノードモジュールがシステムにインストールされます。

sudo npm install -g cordova

ステップ3 – Ubuntu 20.04にIonicをインストールする

次に、システムにIonicノードモジュールをインストールする必要があります。 Ionicは、パッケージの作成、アプリケーションのビルドおよび開始のためのコマンドラインユーティリティを提供しています。以下のNPMコマンドを実行して、システムにIonicフレームワークをインストールします。

sudo npm i -g @ionic/cli

Ionicフレームワークのインストールが完了したら、次のコマンドを使用して、インストールされているバージョンを確認します。

ionic -v

6.10.1

ステップ4 – Ionicアプリケーションを作成する

ここで、次のコマンドを実行して、コンピューターに新しいIonicアプリケーションを作成する必要があります。

ionic start

ウィザードに従ってください:

  1. ReactまたはAngularからフレームワークを選択します。
  2. 次に、新しいアプリケーションの名前を入力します
  3. スターターテンプレートを選択します。各テンプレートの詳細が画面に表示されます。
  4. 次に、新しいアプリをCapacitorと統合して、ネイティブiOSおよびAndroidをターゲットにしますか?

ウィザードを完了すると、「Your Ionic app is ready!」というメッセージが表示されます。画面に次のステップも表示されます。

次に、アプリケーションディレクトリから以下のコマンドを実行します。

cd ionic-app
ionic serve --host 0.0.0.0 --port 8100

次に、システムIPを使用してWebブラウザーでイオンアプリケーションにアクセスします。

Ubuntuでのイオンサンプルアプリの実行

詳細については、 http://ionicframework.com/docs/guide/installation.htmlにアクセスしてください

結論

このチュートリアルでは、UonicシステムにIonicフレームワークCLIをインストールする方法を学びました。また、サンプルのIonicアプリケーションを作成してアクセスします。

Source