Apache Cordovaチュートリアル：Cordovaを使用したモバイルアプリケーションの開発

公開: 2022-03-11

注：これは元々書かれていたので、cordova @ 8.0.0、cordova-android @ 7.0.0、[email protected]で動作するようにこの記事を更新しました。

モバイルアプリケーションは、スマートフォンやタブレットからスマートウォッチに至るまで、あらゆる場所で忍び寄り、まもなく他のウェアラブルにも登場します。ただし、リソースが限られている場合や、モバイルアプリ開発会社ではなく単一の開発者である場合は特に、個別のモバイルプラットフォームごとに開発することは徹底的な作業になる可能性があります。

ここで、HTML5、CSS3、JavaScriptなどの標準的なWebテクノロジを使用してモバイルアプリケーションを開発する方法を提供することで、ApacheCordovaに精通した開発者になることができます。

2009年、Nitobiというスタートアップは、開発者が標準のWebテクノロジーを使用してモバイルアプリケーションを作成できるようにすることを目的として、ネイティブモバイルリソースにアクセスするためのオープンソースAPIであるPhoneGapを作成しました。 Nitobiのビジョンでは、ほとんどのモバイルアプリケーションは間もなくPhoneGapを使用して開発されますが、パフォーマンスの問題や特定のハードウェアにアクセスする方法がないため、開発者は必要に応じてネイティブコードを記述できます。

コルドバPhoneGap？

本当にそんなことはありません。何が起こったのかというと、アドビは2011年にNitobiを買収し、オープンソースコアをApacheSoftwareFoundationに寄付しました。ApacheSoftwareFoundationはそれをApacheCordovaにリブランドしました。よくある例えとして、CordovaはPhoneGapを使用し、WebKitはChromeまたはSafariを使用します。

明らかに、CordovaとPhoneGapの違いは最初は最小限でした。時が経つにつれて、Adobe PhoneGapは独自の機能セットを開発しましたが、Cordovaはオープンソースコミュニティによってサポートされていました。このApacheCordovaのレビューとチュートリアルでは、Cordovaアプリの開発について詳しく説明します。その一部は、PhoneGapに適用される場合がありますが、それ自体はPhoneGapチュートリアルとは見なされません。

ApacheCordovaの機能

本質的に、Cordovaには、ネイティブに開発されたアプリケーションに関して制限はありません。 Cordovaで得られるのは、ネイティブコードのラッパーとして機能し、デバイス間で一貫性のあるJavaScriptAPIです。 Cordovaは、デバイスの画面全体をカバーするWebビューを備えたアプリケーションコンテナーと見なすことができます。 Cordovaで使用されるWebビューは、ネイティブオペレーティングシステムで使用されるWebビューと同じです。 iOSでは、これはデフォルトのObjective- UIWebViewまたはカスタムWKWebViewクラスです。 Androidの場合、これはandroid.webkit.WebViewです。

Apache Cordovaには、デバイスのカメラ、GPS、ファイルシステムなどへのアクセスを提供する、事前に開発されたプラグインのセットが付属しています。モバイルデバイスが進化するにつれて、追加のハードウェアのサポートを追加するだけで、新しいプラグインを開発できます。

最後に、Cordovaアプリケーションはネイティブアプリケーションと同じようにインストールされます。つまり、iOS用にコードをビルドするとIPAファイルが生成され、Android用にAPKファイルが生成され、WindowsPhone用にビルドするとXAPファイルが生成されます。開発プロセスに十分な努力を払うと、ユーザーはネイティブアプリケーションを使用していないことに気付かない可能性があります。

ApacheCordova開発ワークフロー

コルドバで開発するときに従うことができる2つの基本的なパスがあります：

プラットフォーム固有の開発をほとんどまたはまったく行わずに、アプリケーションをできるだけ多くのプラットフォームにデプロイすることを目的としている場合は、クロスプラットフォームワークフローを使用する必要があります。このワークフローをサポートする主なツールは、Cordovaコマンドラインインターフェイス（CLI）です。これは、さまざまなプラットフォーム用にアプリケーションを構成および構築するための高レベルの抽象化として機能します。これは、より一般的に使用される開発パスです。
特定のプラットフォームを念頭に置いてアプリケーションを開発する場合は、プラットフォーム中心のワークフローを使用する必要があります。このように、ネイティブコンポーネントとCordovaコンポーネントを混合することで、コードをより低いレベルで微調整および変更できます。このアプローチをクロスプラットフォーム開発に使用できたとしても、プロセスはより長く、より面倒になります。

プラットフォーム中心の開発への切り替えはかなり簡単なので、通常はクロスプラットフォームの開発ワークフローから始めることをお勧めします。ただし、最初にプラットフォーム中心のワークフローを開始した場合、ビルドプロセスを実行すると、CLIによってカスタマイズが上書きされるため、クロスプラットフォーム開発に切り替えることはできません。

前提条件とCordovaのインストール

Cordovaに関連するものをインストールして実行する前に、アプリケーションを構築する予定のプラットフォームごとにSDKをインストールする必要があります。この記事では、Androidプラットフォームに焦点を当てます。ただし、他のプラットフォームを含むプロセスも同様です。

ここにあるAndroidSDKをダウンロードする必要があります。 Windowsの場合、SDKはインストーラーとして提供されますが、LinuxおよびOSXの場合、SDKは簡単に抽出できるアーカイブとして提供されます。パッケージを抽出/インストールした後、 sdk/toolsおよびsdk/platform-toolsディレクトリをPATH変数に追加する必要があります。 PATH変数は、ビルドプロセスに必要なバイナリを探すためにCordovaによって使用されます。 Javaがインストールされていない場合は、先に進んでJDKをAntと一緒にインストールする必要があります。 ANT_HOMEとJAVA_HOMEはJDKとAntのbinフォルダーに設定する必要があり、Android SDKをインストールした後、 ANDROID_HOME変数をAndroid/Sdk Sdkに設定します。 3つの*_HOME変数のすべての場所も、 PATH変数に含まれている必要があります。

SDKをインストールすると、コマンドラインでandroidコマンドが使用できるようになります。それを実行してSDKマネージャーを開き、最新のツールとAndroidAPIをインストールします。 Android SDKツール、Android SDKプラットフォームツール、Android SDKビルドツール、SDKプラットフォーム、Google API Intel x86 Atomシステムイメージ、Android SDKのソース、およびIntel x86 Emulator Accelerator（HAXMインストーラー）が必要になる可能性があります。その後、 android avdを使用してエミュレーターを作成できるようになります。

Cordova CLIはNode.jsとGitクライアントに依存しているため、先に進んで、nodejs.orgからNodeをダウンロードしてインストールし、git-scm.comからGitをインストールします。 npmを使用してCordovaCLI自体をインストールし、追加のプラグインをインストールします。Cordovaは、必要な依存関係をダウンロードするために、舞台裏でgitを使用します。最後に、実行します

npm install -g cordova

… npm install cordovaでは不十分です）。

要約すると、これらはあなたが必要とするパッケージです：

Java
蟻
Android SDK
NodeJS
ギット

そして、これらの環境変数を更新する必要があります。

PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME

アプリケーションのブートストラップ

Cordovaが正常にインストールされていれば、Cordovaコマンドラインユーティリティにアクセスできるはずです。ターミナルまたはコマンドラインを開き、最初のCordovaプロジェクトを作成するディレクトリに移動します。アプリケーションをブートストラップするには、次のコマンドを入力します。

 cordova create toptal toptal.hello HelloToptal

コマンドラインは、コマンドcordovaの名前と、それに続くサブコマンドcreateで構成されます。サブコマンドは、アプリケーションが配置されるフォルダー、アプリケーションの名前空間、およびその表示名の3つの追加パラメーターを使用して呼び出されます。これにより、次の構造のフォルダーにアプリケーションがブートストラップされます。

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

wwwフォルダーには、アプリケーションコアが含まれています。これは、すべてのプラットフォームに共通のアプリケーションコードを配置する場所です。

Cordovaを使用すると、さまざまなプラットフォーム用のアプリを簡単に開発できますが、カスタマイズを追加する必要がある場合もあります。複数のプラットフォーム向けに開発する場合、さまざまなplatforms/[platform-name][assets]/wwwディレクトリのソースファイルは、トップレベルのwwwファイルで定期的に上書きされるため、変更しないでください。

この時点で、 config.xmlファイルを開いて、作成者や説明など、アプリケーションのメタデータを変更することもできます。

以下を使用して最初のプラットフォームを追加します。

 cordova platform add android

後で気が変わった場合は、ビルドプロセスからプラットフォームを簡単に削除できます。

 cordova platform rm android

プラットフォームディレクトリを調べると、その中にandroidフォルダがあります。追加するプラットフォームごとに、Cordovaはプラットフォームに新しいディレクトリを作成し、その中にwwwフォルダを複製します。たとえば、Android用にアプリケーションをカスタマイズする場合は、 platforms/android/assets/www内のファイルを変更して、プラットフォーム固有のシェルツールに切り替えることができます。

ただし、CLI（クロスプラットフォーム開発に使用）を使用してアプリケーションを再構築する場合、Cordovaは各プラットフォームに加えた変更を上書きするため、バージョン管理下にあることを確認するか、プラットフォーム固有の変更を行ってください。クロスプラットフォーム開発が終了した後の変更。前述したように、クロスプラットフォームからプラットフォーム固有の開発への移行は簡単です。他の方向に移動することはできません。

クロスプラットフォームワークフローを引き続き使用し、プラットフォーム固有のカスタマイズを行う場合は、最上位のマージフォルダーを使用する必要があります。 Cordovaバージョン3.5以降、このフォルダーはデフォルトのアプリケーションテンプレートから削除されましたが、必要に応じて、他の最上位ディレクトリ（ hooks 、 platforms 、 plugins 、およびwww ）と一緒に作成できます。

プラットフォーム固有のカスタマイズは、 merges/[platform-name]に配置され、最上位のwwwフォルダー内のソースファイルの後に適用されます。このようにして、特定のプラットフォーム用の新しいソースファイルを追加するか、トップレベルのソースファイル全体をプラットフォーム固有のソースファイルでオーバーライドすることができます。たとえば、次の構造を考えてみましょう。

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

この場合、Androidの出力ファイルにはapp.jsファイルとandroid.jsファイルの両方が含まれますが、Windows Phone 8の出力ファイルには、merges merges/wp8フォルダーにあるapp.jsファイルのみが含まれます。 merges/[platform]内のファイルはwww内のファイルをオーバーライドします。

pluginsディレクトリには、各プラットフォームのプラグインに関する情報が含まれています。この時点では、次の構造を持つandroid.jsonファイルのみが必要です。

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

アプリケーションをビルドしてAndroidデバイスにデプロイしましょう。必要に応じて、エミュレーターも使用できます。

Cordovaは、アプリをビルドおよび実行するためのいくつかのCLIステップを提供します： cordova prepare 、 cordova compile 、 cordova build （前の2つのショートカット）、 cordova emulate 、 cordova run （ buildを組み込み、エミュレーターも実行できます）。ほとんどの場合、エミュレーターでアプリをビルドして実行したいので、これで混乱することはありません。

 cordova run --emulator

必要に応じて、USBポートを介してデバイスを接続し、USBデバッグモードを有効にして、最初のApacheCordovaアプリケーションを次のコマンドを実行するだけでデバイスに直接デプロイできます。

 cordova run

これにより、すべてのファイルがplatforms/*にコピーされ、必要なすべてのタスクが実行されます。

アプリケーションをビルドするプラットフォームの名前や特定のエミュレーターを指定することで、ビルドプロセスの範囲を制限できます。例：

 cordova run android --emulator

また

cordova run ios --emulator --target="iPhone-8-Plus"

実践的なApacheCordovaチュートリアル

Cordovaとそのプラグインの使用法を示す簡単なチュートリアルアプリケーションを作成しましょう。デモ全体はこのGitHubリポジトリにあり、ダウンロードして、この短いCordovaチュートリアルと一緒にその一部を確認できます。

作成した初期設定を使用して、コードを追加します。新しいプロジェクトを架空のToptalデータベースに追加し、既存のプロジェクトを表示したいとします。 index.htmlを開き、次の方法で2つのタブを設定します。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

BootstrapとjQueryMobileを依存関係として追加したことに注意してください。最新のハイブリッドアプリケーションを構築するために、はるかに優れたソリューションとフレームワークが開発されていることに注意してください。ただし、ほとんどの（すべてではないにしても）Web開発者は、これら2つのライブラリに精通しているため、初心者向けのチュートリアルに使用するのが理にかなっています。必要に応じて、GitHubからスタイルシートをダウンロードするか、独自のスタイルシートを使用できます。

index.jsファイルに移動し、次のように削除します。

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Cordovaアプリケーションの推奨アーキテクチャは、シングルページアプリケーション（SPA）のセットアップであることを忘れないでください。このように、すべてのリソースはアプリの起動時に1回だけ読み込まれ、アプリケーションが実行されている限りWebビューにとどまることができます。さらに、SPAを使用すると、ユーザーは、ネイティブアプリケーションで一般的ではないページの再読み込みを行うことができなくなります。そのことを念頭に置いて、2つのタブを切り替える簡単なコントローラーを設定しましょう。

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

これまでのところ、コントローラーには2つのメソッドがあります。1つは検索ビューをレンダリングするためのもので、もう1つはプロジェクト後ビューをレンダリングするためのものです。最初に上部で宣言し、onDeviceReadyメソッドで作成して、 index.jsファイルで初期化します。

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

最後に、 index.jsへの参照の上にindex.htmlにスクリプト参照を追加します。検索ビューと投稿ビューはGitHubから直接ダウンロードできます。部分ビューはファイルから読み取られるため、Chromeなどの一部のブラウザは、ページをレンダリングしようとしているときに、クロスドメインリクエストについて文句を言います。

ここで考えられる解決策は、たとえばnode-static staticnpmモジュールを使用してローカル静的サーバーを実行することです。また、ここでは、PhoneGapやIonicなどのフレームワークの使用について考え始めることができます。それらはすべて、ブラウザーでのエミュレート、ホットリロード、コード生成（スキャフォールディング）など、さまざまな開発ツールを提供します。

今のところ、次のコマンドを実行して、Androidデバイスに簡単にデプロイしましょう。

 cordova run android

この時点で、アプリケーションには2つのタブがあります。最初のタブでは、プロジェクトを検索できます。

2番目のタブでは、新しいプロジェクトを投稿できます。

現在あるのは、Webビュー内で実行される従来のWebアプリケーションだけです。ネイティブ機能は実際には使用していないので、今すぐ使用してみましょう。よくある質問は、データをデバイスにローカルに保存する方法、より正確には、使用するストレージの種類です。行くにはいくつかの方法があります：

ローカルストレージ
WebSQL
IndexedDB
Webサービスを介してアクセスされるサーバー側ストレージ
他のオプションを提供するサードパーティのプラグイン

LocalStorageは、少量のデータを格納するのに問題ありませんが、使用可能なスペースが3〜10 MBであるため、データ集約型のアプリケーションを構築している場合は十分ではありません。この場合、IndexedDBの方が優れたソリューションになる可能性があります。 WebSQLは非推奨であり、一部のプラットフォームではサポートされていません。最後に、Webサービスを使用してデータをフェッチおよび変更することは、SPAパラダイムにうまく適合しますが、アプリケーションがオフラインになると機能しなくなります。 PWA技術とサービスワーカーが最近、これを支援するためにコルドバの世界に登場しました。

また、Cordovaのコアのギャップを埋めるために追加されたサードパーティのプラグインがたくさんあります。ファイルプラグインは、デバイスのファイルシステムへのアクセスを提供し、ファイルの作成と保存を可能にするため、非常に便利な場合があります。今のところ、ローカルSQLiteデータベースを提供するSQLitePluginを試してみましょう。次のコマンドを実行して、プロジェクトに追加できます。

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePluginは、デバイスのSQLiteデータベースにAPIを提供し、真の永続性メカニズムとして機能します。次の方法で簡単なストレージサービスを作成できます。

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

GitHubからプロジェクトをフェッチおよび追加するためのコードをダウンロードして、それぞれのプレースホルダーに貼り付けることができます。 Controller.jsの上のindex.htmlファイルにSQLiteStorageService.jsを追加し、コントローラーのinit関数を変更してコントローラーで初期化することを忘れないでください。

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

service.addProject（）を垣間見ると、navigator.geolocation.getCurrentPosition（）メソッドが呼び出されていることがわかります。 Cordovaには、電話の現在位置を取得するために使用できるジオロケーションプラグインがあり、navigator.geolocation.watchPosition（）メソッドを使用して、ユーザーの位置が変更されたときに更新を受信することもできます。

最後に、データベースからプロジェクトを追加およびフェッチするためのコントローラーイベントハンドルを追加しましょう。

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

コンソールとダイアログプラグインを追加するには、次のコマンドを実行します。

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

cordova.consoleプラグインは、エミュレーター内でconsole.log()関数を有効にすることにより、デバッグを支援します。

Chromeリモートデバッガーを使用してAndroidアプリケーションを簡単にデバッグできます。デバイスを接続したら、右上隅（[X]ボタンの下）にあるドロップダウンメニューをクリックし、[その他のツール]を展開して、[デバイスの検査]をクリックします。リストにデバイスが表示され、デバッグコンソールを開くことができるはずです。

Safariは、USB接続されたデバイスまたはエミュレーターで実行されるiOSアプリをデバッグするための同じ機能を提供します。 [Safariの設定]>[詳細設定]タブで開発ツールを有効にするだけです。

cordova.dialogsプラグインは、ネイティブ通知を有効にします。一般的な方法は、cordova.dialogsAPIを使用してwindows.alertメソッドを次のように再定義することです。

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

overrideBrowserAlert関数は、 devicereadyイベントハンドラー内で呼び出す必要があります。

これで、データベースから新しいプロジェクトを追加したり、既存のプロジェクトを表示したりできるようになります。 [場所を含める]チェックボックスを選択すると、デバイスはGeolocation APIを呼び出し、現在の場所をプロジェクトに追加します。

アイコンとスプラッシュ画面を設定して、アプリケーションに最後の仕上げを加えましょう。 config.xmlファイルに以下を追加します。

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

最後に、ロゴ画像をwww/imgフォルダーに配置します。

あなた自身のCordovaアプリ

Apache Cordovaアプリ開発の基本的な手順を実行し、独自のJavaScriptアーキテクチャとCSSスタイルシートを使用しました。このCordovaチュートリアルは、使い慣れたテクノロジーを使用してモバイルアプリケーションを開発する手段として、Apache Cordovaの可能性を示し、開発時間と、さまざまなプラットフォーム用に複数のアプリケーションを構築するために必要な労力の両方を削減する試みでした。

ただし、本番環境に移行するアプリケーションを構築する場合は、既存のフレームワークを使用することをお勧めします。事前定義されたアーキテクチャでアプリケーションを構造化することに加えて、これは、アプリケーションをネイティブのルックアンドフィールに近づけるのに役立つ一連のコンポーネントを提供する場合もあります。注目に値するフレームワークには、Ionic、Framework7、Weex、Ratchet、Kendo UI、OnsenUIがあります。頑張ってください！

関連： Cordovaフレームワーク：IonicとFramework7