👩🏾 🏴‍☠️ 🕴🏿 Ionic Frameworkを使用したクロスプラットフォームアプリケーション開発 🌄 🐓 👩🏻‍🎓

みなさんこんにちは！少し前まで、コメントの 1つで、 Ionic Framework （以下IF）の機能をすぐに理解するための入門記事を書くことを約束しました。私は約束を守ろうとします。まず、IFを使用して開発するときによく使用するリンクのリストをレイアウトします。

何を書きますか？モスクワのopenweathermap.orgから気象データを取得して表示する小さなアプリケーション。開発は、ターゲットAndroidプラットフォーム向けのLinux Mint OSで発表されます。 iOSでコンパイルするには、 AppleラップトップまたはPCが必要です。読者はJavaScriptとAngularJSの基本に精通していることを前提としています（よく、またはすぐにすべてを理解します）。

はじめに

IFは、HTML5、CSS3、およびJavaScriptのすべての能力を使用してハイブリッドモバイルアプリケーションを開発するためのオープンソースSDKであり、 CordovaとAngularJSの共生の素晴らしい例です。これで作成されたアプリケーションは、 showcase.ionicframework.comで表示できます。エントリーのしきい値は低いですが、本格的なアプリケーションを作成するには、 AngularJSの高度な知識とターゲットプラットフォームのCordovaの機能が必要です。すぐにインストールしましょう！

設置

NodeJSを既にお持ちの場合、この手順は簡単です。これを行うには、コンソールに入力します。

sudo npm i -g cordova ionic

Android SDKがインストールおよび構成されていますか？そうでない場合は、この指示が役立ちます。 Windows開発者向けの導入インストールビデオがあります。すべてのソフトウェアが事前にインストールされたVagrantアセンブリもあります。問題がなかったと仮定します（もし問題があれば、フォーラムには主にAndroid SDKのインストールとセットアップに関する同様の問題の解決策の説明がありますが 、プラグインにも問題があります。SOについても多くの情報があります。トピック）。構築する時です。

プロジェクト作成

ここでも、すべてが非常に簡単です。 IFは、アプリケーション用に3つのテンプレート（空白（空）、タブ（ タブに基づく）、サイドメニュー（サイドメニュー付き））の選択肢を提供します。直観的ですね。必要なのは、コンソールに入力するだけです：

 ionic start MSKWeather tabs

したがって、IFにMSKWeatherという名前のプロジェクトとタブテンプレートを作成するように指示します。プロジェクトフォルダーに移動し、そこでこのコマンドを実行することを忘れないでください。作成後、ワークピースのあるフォルダーに移動できます。

 cd MSKWeather

私は自分の時間を節約し、フレームワークの機能を示すために、意図的に空でないプロジェクトを使用します。なぜなら、ゼロからプログラムするよりも、不要な変更を自分で捨てる方がはるかに簡単で迅速だからですクイックスタートのために、このアプローチは機能します。それでも、記事の終わりまでに、フレームワークのアーキテクチャを理解し、空のテンプレートから簡単に始めて、その怠lazに感謝していただければ幸いです。そこで、IFプロジェクトの構造を分析します。

プロジェクト構造

プロジェクトのルートにあるconfig.xmlファイルは、アプリケーションの基本設定を担当します。少し後で（他のファイルにも）戻りますが、今のところはwwwフォルダーに移動します（ちなみに、私はSublimeを使用してプロジェクトフォルダーを既に開いています）。アプリケーションのドラフトが表示されます。 index.htmlの存在は印象的です-これは、将来のアプリケーションのすべてのコンポーネントへのリンクです（突然です！）。すぐに使用できるフレームワークが提供するものを検討してください。

 <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

クールなエンコードとユーザーアプリケーションのスケーリングの禁止。すでに接続されているスタイルとスクリプト、およびbodyタグのAngularJSバインディング。ただし、最も重要なことは次のとおりです。

 <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>

[戻る]ボタンのあるタブパネルには空白があり、テンプレートがレンダリング（描画）されるビューがあります。次に、 テンプレートフォルダを見てみましょう。アプリケーション内で開くためのタブのリストがあるtabs.htmlファイルに興味があります。 2つの不要なタブを削除しましょう。

 <!-- Chats Tab --> <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab> <!-- Account Tab --> <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab>

残りの部分では、アイコンを置き換えます。その結果、ファイルの内容は次のようになります。

 <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <ion-tab title="Status" icon-off="ion-cloud" icon-on="ion-cloud" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> </ion-tabs>

プロジェクトのルートフォルダーでコマンドを実行して、これまでに行ったことを確認します。

 ionic serve

すべてが成功すると、アドレスhttp：// localhost：8100 /＃/ tab / dashでブラウザに転送され、そこから将来のアプリケーションのライブリロードWebバージョンが開始されます。

わあ！

ご覧のとおり、変更が反映され、クラウドアイコンのあるタブが1つあります。次に、 tab-account.htmlとtab-chats.htmlを削除し （必要なくなったため）、それぞれchat-detail.htmlをcity-detail.htmlに、 tab-dash.htmlをtab-city.htmlにそれぞれ変更する必要があります。 。これらは、それぞれ都市とその詳細を選択するためのテンプレートになります。そして、アクセスのためにビュー名とURLを変更しましょう。 tabs.htmlファイルは次のようになります。

 <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <ion-tab title="Status" icon-off="ion-cloud" icon-on="ion-cloud" href="#/tab/city"> <ion-nav-view name="tab-city"></ion-nav-view> </ion-tab> </ion-tabs>

アプリケーションでルーティングをいじる時間です。

ルートを操作する

テンプレートに加えた変更は、ルートとIF状態の構成で考慮する必要があります。これを行うには、 www / js フォルダーでapp.jsファイルを見つけます。この情報はすべてそこに保存されます。

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

ここでは、メインアプリケーションモジュールの作成と、IFモジュール、コントローラーを備えたモジュール、それにデータ供給モジュールの接続を確認します（おそらく不器用に呼び出したのかもしれません）。私たちは、アプリケーションのconfigセクションに大きな関心を持っています。このセクションは、2つのオブジェクト$ stateProviderおよび$ urlRouterProvider（それぞれ状態マネージャーとパスマネージャー）を受け入れます。余分な部分を削除して、パス設定を変更しましょう。 app.jsファイルをこれに変換する必要があります。

app.js

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleLightContent(); } }); }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tab', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tab.city', { url: '/city', views: { 'tab-city': { templateUrl: 'templates/tab-city.html', controller: 'CityCtrl' } } }) .state('tab.city-detail', { url: '/city/:id', views: { 'tab-city': { templateUrl: 'templates/city-detail.html', controller: 'CityDetailCtrl' } } }) $urlRouterProvider.otherwise('/tab/city'); });

注意深い読者は、変更内容、つまりルート、コントローラー、およびテンプレートに対して$ stateProviderを構成していることに気付くでしょう。状態の設定は簡単です-「状態の名前」、アクセスURLを示す設定オブジェクト、ビューの名前を持つビュー（最後のステップでタブから変更した名前）、テンプレートへのパス、コントローラーの名前。実際には、コントローラー名の代わりにコントローラー機能自体を代用できるという事実まで、状態を調整する多くの方法がありますが、これについては触れません（ところで、 Andrew JoslinによるngEuropeのIonicプレゼンテーションを見ることをお勧めします）。状態tab.cityとtab.city-detailのビュー名は、テンプレートを設定した同じ（単一の）ビューにロードするために同じであることに注意してください。 $ urlRouterProvider.otherwise（ '/ tab / city'）は、パスが提供されない場合にデフォルトのルーティングを提供します（アプリケーションは単にtab / cityにリダイレクトします）。ブラウザで編集がどのように適用されたかを見ると、もちろんアドレスバーを除いて、視覚的に何も変わらないはずです。すべてが正しければ、グッズに移ります。つまり、データを受信し、その後の表示を行います。

データ検索

次に、アプリケーションをさらに構成するために、 controllers.jsファイルを開く必要があります。 ご存知のように、ルーターでは、状態のバインドをCityCtrlおよびCityDetailCtrlコントローラーに指定しているため、このファイルではそれらを宣言する必要があります。

 angular.module('starter.controllers', []) .controller('CityCtrl', function($scope) { }) .controller('CityDetailCtrl', function($scope) { });

services.jsファイルを開き、次のようにします。

services.js

 angular.module('starter.services', []) .factory('Cities', function() { var cities = [{ id: 524901, name: '', desc: '  ', emblem: 'http://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_Arms_of_Moscow.png' }]; return { all: function() { return cities; }, get: function(id) { for (var i = 0; i < cities.length; i++) { if (cities[i].id === parseInt(id)) { return cities[i]; } } return null; } }; });

原則として、もう必要ないので、保存して閉じることができます。将来的には、すべての魔法はcontrollers.js内にあります。
上記のコードを使用して、アプリケーションで使用するデータファクトリを作成しました。このファクトリは非常に簡単に接続します。そのメソッドを使用するには、コントローラの依存関係に「Cities」という名前を登録するだけで十分です。書く：

 .controller('CityCtrl', function($scope, Cities) { $scope.cities = Cities.all(); })

そのため、都市の配列を取得し、コントローラーのスコープに保存します。 CityDetailCtrlの依存関係、つまり$ http（AJAXを使用してデータを受信するため）、$ stateParams（アドレスの時間枠からパラメーターを取得するため）、および$ ionicPopup（エラーを報告するため）の中で使用します。また、選択した都市の天気のリクエストを作成します。その結果、このような素晴らしいコントローラーを取得する必要があります。

CityDetailCtrl

 .controller('CityDetailCtrl', function($scope, $http, $stateParams, $ionicPopup) { $scope.data = {}; $scope.id = $stateParams.id; $scope.showAlert = function(title, text) { $ionicPopup.alert({ title: title, template: text }); }; $scope.refresh = function() { $http.get('http://api.openweathermap.org/data/2.5/forecast/daily?id='+$scope.id) .success(function(data, status, headers, config){ $scope.data = data; $scope.$broadcast('scroll.refreshComplete'); }) .error(function(data, status, headers, config){ $scope.showAlert(status, data); $scope.$broadcast('scroll.refreshComplete'); }); }; $scope.refresh(); })

まあ、実際にはすべてが準備ができています！テンプレートを編集し、完成したアプリケーションを取得します=）

テンプレートを編集する

まずはtab-city.htmlを開いてみましょう 。コントローラーでは、コントローラースコープ内の工場からすべての都市のリストを受け取ったことを覚えています。アバターのリストでそれらを実装しましょう。これを行うには、ファイルに次の構造を記述します。

 <ion-view view-title=""> <ion-content class="padding"> <ion-list> <a class="item item-avatar" ng-repeat="city in cities" href="#/tab/city/{{city.id}}"> <img ng-src="{{city.emblem}}"> <h2>{{city.name}}</h2> <p>{{city.desc}}</p> </a> </ion-list> </ion-content> </ion-view>

ファイルを保存して、ブラウザで確認します。

ロシアは私たちの神聖な力です！

いいね！では、 city-detail.htmlに進みましょう。データは週ごとにリクエストされるため、ここにはリストも必要です。表示内容を正確に理解するには、 api.openweathermap.org / data / 2.5 / forecast / daily？id = 524901にアクセスして、サーバーの応答の構造を確認します（表示と書式設定でjsoneditoronline.orgサービスが気に入っています）。

サーバー応答

 { "cod": "200", "message": 0.0165, "city": { "id": 524901, "name": "Moscow", "coord": { "lon": 37.615555, "lat": 55.75222 }, "country": "RU", "population": 1000000 }, "cnt": 7, "list": [ { "dt": 1428915600, "temp": { "day": 283.84, "min": 278.31, "max": 284.09, "night": 278.31, "eve": 283.05, "morn": 281.75 }, "pressure": 1010.15, "humidity": 74, "weather": [ { "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03d" } ], "speed": 5.02, "deg": 243, "clouds": 32 }, { "dt": 1429002000, "temp": { "day": 279.6, "min": 275.65, "max": 280.3, "night": 275.65, "eve": 279.3, "morn": 278.04 }, "pressure": 994.7, "humidity": 89, "weather": [ { "id": 500, "main": "Rain", "description": "light rain", "icon": "10d" } ], "speed": 5.01, "deg": 200, "clouds": 64, "rain": 1.86 }, { "dt": 1429088400, "temp": { "day": 277.79, "min": 273.76, "max": 278.35, "night": 277.3, "eve": 278.35, "morn": 273.76 }, "pressure": 998.51, "humidity": 73, "weather": [ { "id": 500, "main": "Rain", "description": "light rain", "icon": "10d" } ], "speed": 6.53, "deg": 221, "clouds": 76, "rain": 0.53 }, { "dt": 1429174800, "temp": { "day": 282.85, "min": 276.5, "max": 282.85, "night": 276.5, "eve": 278.69, "morn": 279.93 }, "pressure": 991.07, "humidity": 0, "weather": [ { "id": 501, "main": "Rain", "description": "moderate rain", "icon": "10d" } ], "speed": 5.36, "deg": 287, "clouds": 47, "rain": 4.22 }, { "dt": 1429261200, "temp": { "day": 280.71, "min": 274.5, "max": 280.71, "night": 274.5, "eve": 277.19, "morn": 280.17 }, "pressure": 995.12, "humidity": 0, "weather": [ { "id": 501, "main": "Rain", "description": "moderate rain", "icon": "10d" } ], "speed": 5.32, "deg": 285, "clouds": 65, "rain": 3.23 }, { "dt": 1429347600, "temp": { "day": 281.27, "min": 276.59, "max": 281.27, "night": 276.59, "eve": 278.67, "morn": 279.17 }, "pressure": 1002.53, "humidity": 0, "weather": [ { "id": 500, "main": "Rain", "description": "light rain", "icon": "10d" } ], "speed": 9.51, "deg": 359, "clouds": 67, "rain": 0.62 }, { "dt": 1429434000, "temp": { "day": 282.04, "min": 278.38, "max": 282.04, "night": 279.1, "eve": 280.23, "morn": 278.38 }, "pressure": 1006.22, "humidity": 0, "weather": [ { "id": 500, "main": "Rain", "description": "light rain", "icon": "10d" } ], "speed": 5.5, "deg": 311, "clouds": 88, "rain": 0.97 } ] }

さて、このデータのために、簡単なテンプレートを作成する必要があります。その例を以下に示します。

city-detail.html

 <ion-view view-title="{{data.city.name}}"> <ion-content class="padding"> <h2> : {{data.city.name}} </h2> <p> : {{data.city.country}} </p> <p> : {{data.city.population}} . </p> <p> : {{data.city.coord.lon}} : {{data.city.coord.lat}} </p> <ion-list> <a class="item item-avatar" ng-repeat="day in data.list" href="#"> <img ng-src="http://openweathermap.org/img/w/{{day.weather[0].icon}}.png"> <h2>: {{(day.temp.day - 273.15).toFixed(2)}} C</h2> <p> : <span ng-bind="day.dt*1000 | date: 'dd.MM.yyyy'"></span></p> </a> </ion-list> </ion-content> </ion-view>

説明する時間はありません-保存、実行、視聴！

天気は良いです）

そして、プロフィール写真を丸くしないようにする方法は？ css / style.cssファイルを開いて書き込みます：

 .item-avatar>img:first-child { border-radius: 5%; }

これにより、標準のボーダー半径が最大50％削除されます（アバターの場合は適切かもしれませんが、紋章の場合はいです）。このファイルでは、あなたが推測したように、コンポーネントの独自のスタイルを書くことができます（また、IF自体のスタイルをあっという間に書き換えることもできます）。

記事にコードを含むアーカイブを確実に添付するので、あらゆる方法でフィールドをいじることができます。ご覧のとおり、開発プロセスはシンプルで明確で楽しいものです（真剣に、このテンプレートの内容を説明する必要はありませんか？）。そして最後に...

データの更新（プルツーリフレッシュ）

私はこのおいしいものが好きです。何が必要ですか？追加するだけ

 <ion-refresher pulling-text="-" on-refresh="refresh()"> </ion-refresher>

ion-contentタグの最初にある前のファイルに。また、処方する

 $scope.$broadcast('scroll.refreshComplete');

$ http.getリクエストの成功およびエラーハンドラへ。これを試して、ページをプルダウンしてください。

アプリケーションのコンパイルと公開

この時点で、デバイスとエミュレーターでアプリケーションをコンパイルおよびデバッグできます。 iOSおよびAndroidでアプリケーションをすぐに表示するには、次を実行します。

 ionic serve --lab

次を参照してください。

生きている！

アプリケーションをコンパイルしてエミュレーターで実行するには、以下を行う必要があります。

 ionic platform add android (  ios) ionic build android (ios) ionic emulate android (ios)

Appleの手法の場合、 ios-symをインストールする必要があります。展開については、ターゲットプラットフォームの手順を参照してください。たとえば、 Androidの場合、キーを生成してアプリケーションに署名する必要があります。これについては、こちらで詳しく説明しています。プラットフォームのアイコンとスプラッシュを生成する方法については、ここで説明します。

プロジェクトでアーカイブする

おわりに

IFの基本概念を伝え、プロジェクトにこのフレームワークを試してみることをお勧めします。コメントと提案はPMで厳密に受け入れられ、記事はあなたのフィードバックに基づいて編集および補足されます（この投稿からベストプラクティスのコレクションを作成する予定です）。ご清聴ありがとうございました！

Ionic Frameworkを使用したクロスプラットフォームアプリケーション開発