Angular2 + Ionic3を使用したIOSアプリケーションのサンプルチュートリアルを作成する

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

角度1から角度2

よく知られているフロントエンドMVVMアーキテクチャAngular1の後継バージョンであるAngular2は、ある程度、Webのフロントエンド開発技術の新世代の革新を導いています。 ember.jsの最新バージョン、react.js、vue.jsから、これらのテクノロジーはお互いに学び合い、お互いの強みから学び、ついには技術的な方向に向かって進化していることがわかります。

コンポーネント技術の登場

Angular1には別の名前と呼ばれるコンポーネント、つまり命令があります。 Angular1では、命令は、制御ロジック、データ管理コードを含むDOM要素の緊密に結合された部分です。 この指示では、Angular1によるJquery / DOMテクノロジの使用とAngularコンポーネントの手動管理を明確に確認できます。 これらは、一般的なAngularコントローラ/ページテンプレートの開発に関心がないことに注意してください。

Angular2は、このような命令的な開発をページ開発に適用するためにコンポーネントを拡張しています。 これのメリットは何ですか?

新しいファイル参照技術を使用して開発者のページ開発の柔軟性を向上させました.Webpackの革新について詳しく説明しました
cssの別々の管理

他の開発技術を理解していれば、コンポーネント化が徐々にフロントエンド開発分野を支配していることがわかります。 ember.js、vue.jsからReact.jsまで、コンポーネント化手法が広く使用されています。

グラント/ギャルプからウェブパックへの技術革新

タスクランナーは、最も早いグラントからガルプまで、アプリケーションに対応する制御プログラムの一部です。 開発者の開発、ユニット統合テストの実行、製品リリースの手助けなど、多くの機能があります。一般的には、gulpなどのサードパーティプログラムに依存しています。 しかし、npm自体にタスクランナーの機能があります(リスト1を参照)。スクリプトには実行可能なイオンタスクが含まれています。 追加の依存関係なしでタスクを実行するには、npm run cleanを使用します。

リスト1.タスク・ランナー機能を提供するNpm構成


{
//package.json
"name": "iamsaying",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,  
"scripts": {// 可运行的任务
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
}
//更多
}

これには問題があります。なぜnpmタスクランナーがいるのですか?また、この機能を完了するために3ウェイ・ガルプを使用していますか? npmタスクランナーは単純すぎるので、文字通りシェルコマンドです。 しかし、何をすることができますか? リスト2は、gulpを使用して対応するbower_componentsをindex.htmlに挿入するタスクです。 ご覧のように、gulpタスクは複雑で、コードを記述する必要があります。

リスト2. Gulp設定によってindex.html関連のjsファイルが挿入される


//gulpfile.babel.js
gulp.task('bower', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: yeoman.app + '/bower_components'
}))
.pipe(gulp.dest(yeoman.app));
});

Webpackはgrunt / gulpを置き換えます。 なぜそれを言うのですか? Webpackは、プラグインをパッケージ化、スクランブル、開発、デバッグ、およびCSS化する機能を提供するためです。 これとgrunt / gulpの機能が繰り返されます。 実際、gulpを使用してWebpackを実行することもできますが、この設計は冗長であり、gulpの存在はまったく必要ありません。

さらに、Webpackには、コード間の依存関係の表現を変更する重要な機能があります。 上のgulpタスクのwiredepは、リスト3に示すように、プロジェクトのすべてのバワー依存関係をindex.htmlに挿入するために使用されます。 ブラウザのサポートによって、jsはお互いを参照し、互いに依存することがわかります。

リスト3. Wiredpインジェクションで参照されるjsファイル


<!- build:js(.) scripts/vendor.js ->
<!- bower:js ->
<script  src="bower_components/jquery/dist/jquery.js"></script>
<script
src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script  src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!- endbower ->
<!- endbuild ->
<!- build:js(app) scripts/scripts.js ->
<!- 3rd party packages should lay before scripts in projects->
<script src="build-scripts/app.js"></script>
<script src="build-scripts/controllers/main.js"></script>
<script
src="build-scripts/controllers/task/management.js"></script>
<script
src="build-scripts/controllers/label/management.js"></script>
<script
src="build-scripts/controllers/system/management.js"></script>
<!- endbuild ->

ウェブパックはどのように行われますか? リスト4に示すように、このコードはコントローラーに置かれ、ES6構文インポートを使用する宣言の依存関係が示されます。 Webpack参照は、グローバルで相互参照を使用するwiredepの方法と比較して、より明確でオンデマンドです。 その結果、バウアーは、Webdevelopの宣言依存モードで互いに参照するこの方法のように、ワイヤーデプスに似たブラウザ対応のパッケージマネージャーとして機能するため、バウアーマネージャーは存在する必要はありません。ミディアムは適用されません。

リスト4. Angular2でのJS相互参照


import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

では、最終的なアーキテクチャはどのように見えるのですか? npm管理バックエンド、制御プログラム依存関係、bower管理フロントエンドJS依存関係からのアーキテクチャはすべての依存関係を管理するためにnpmに発展し、Webpackはパッケージングを完了し、機能をテストします。 図1に示すように。

図1. Angular1からAngular2への技術進化

ES6が仕様になります

jsフレームワークの開発は100本の花と言えますが、業界で一般的に合意されている技術、つまりES6があります。 新世代のjs構文仕様として、ブラウザ側で広く実装され、Nodeエンジンに適用されます。

ESはJS言語を拡張して標準的なオブジェクト指向言語にしました。 TS(typescript)に基づいて、型定義とその検査機能が追加されています。 たとえば、リスト5のイオン初期化ブロックは、カスタム・データ型のPlatform、StatusBarを使用します。

リスト5. Typescriptは強い型宣言変数を使用します


export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

角膜炎

最後に、Angler-cliプロジェクトについて説明しましょう。すべてのフレームワークプロバイダはフレームワークのための足場を生成するのに役立つember-cli、vue-cliなどのフレームワークの外にCLIツールを提供します。

リスト6. Angular-Cliを使ってプロジェクトを初期化する


> npm install -g @angular/cli
> ng new project
> cd project
> ng serve

要約

今日のWeb開発技術の大部分は、モジュール化されたモジュール構成を使用し、npm / Webpackなどのツールを使用してモジュールの依存関係を管理します。

Ionic3の開発

IonicはAngularをベースにしたモバイル側ハイブリッド開発技術の代表的な技術です。 Web開発技術とIOSおよびAndroidネイティブコードを生成する能力の両方を使用するモバイルハイブリッド開発テクノロジ コードバーを使用すると、カメラやマイクなどのモバイル固有のAPIを呼び出すことができます。 Angular 2にアップグレードすると、ionicはAngular2とTSの構文もサポートします。

イオニッククリ

Angular-cliに似た、Ionicが提供するCLIツール。 これを使ってプロジェクトを初期化します。 リスト7を参照してください。

リスト7. Ionic-Cliを使ってプロジェクトを初期化する


> npm install -g ionic cordova
> ionic start test tabs
> cd test
> ionic serve

グローバルナビゲーション

ここでは、イオン開始を実行して足場を作成するときにテンプレートを指定できることがわかります。 リスト7のタブのように。 ここでは2つのテンプレートがあります。これは、ionicがデフォルトで提供する2つのグローバルナビゲーションメソッド、タブとメニューを表します。

タブのレイアウトは、アプリの下のナビゲーションを提供します。 図2に示されているように、ホームレイアウトのいくつかのオプションは、左にスライドメニューを提供し、ボタンをクリックすると、図3に示すようにスライドオプションが表示されます。

図2.下部のタブのレイアウト

図3.サイドバーのメニューレイアウト

次は、リスト8に示すように、メニュー論理レイアウトを実装するコードです。MenuControllerをコントローラに注入する必要があります。

リスト8.メニュー・レイアウト用のコントローラー・ロジックのサンプル


import { Component } from '@angular/core';
import {MenuController, NavController} from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, menu: MenuController) {
menu.enable(true);
}
}

リスト9.メニュー・レイアウトのサンプル・フロントエンド表示


<ion-header>
<ion-navbar>
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
Menus
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block menuToggle>Toggle Menu</button>
</ion-content>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(homePage)">
Home
</button>
<button ion-item (click)="openPage(friendsPage)">
Friends
</button>
<button ion-item (click)="openPage(eventsPage)">
Events
</button>
<button ion-item (click)="closeMenu()">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" #content></ion-nav>

ページレイアウト要素

1ページのレイアウトに戻ると、イオンは2つのヘッダーとコンテンツを提供します。 各ブロックは、複数の要素を含み、グリッドレイアウトをサポートすることができる。 Gridは、ブートストラップのフロントエンドのレイアウトに似ています。ページを12個のセルに分割します。col-xを使用して、要素がページ内で占有する領域をマークできます。 グリッドレイアウト下のList要素のアプリケーションコードを次に示します。 リスト10に示すように、col-6の2つの列を使用してページを2つの列に分割し、結果のパターンを図4に示します。

リスト10.グリッド・レイアウト下のList要素のサンプル・コード


<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-list>
<ion-list-header>
Section I
</ion-list-header>
<ion-item>Terminator I</ion-item>
<ion-item>Blade Runner</ion-item>
<ion-item>
<button ion-button color="danger" outline>Choose</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-6>
<ion-list>
<ion-list-header>
Section II
</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>Blade Runner</ion-item>
<ion-item>
<button ion-button color="secondary"
outline>Choose</button>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>

図4.ページレイアウトをグリッドで分割する

グリッドコントロールエリアでは、図4のリスト要素など、ネストされたページを使用して要素をレイアウトできます。 一般に、ここのページレイアウト要素は2つの大きなカテゴリに分かれています。

リスト/カードなどの複数ページ要素を含む列要素は、ページ全体を占有し、モーダル/セグメント/スライドなどのクリックによるページジャンプとリターンを実現します。

その他の要素

もちろん、ページのいくつかの要素、例えばボタン、入力ボックス、ページの相互作用のための他の要素があります。さらに、プロンプト要素、フットラベル、その他のプロンプト要素があります。 これはウェブ開発と非常によく似ています。

要約

ウェブ開発と比較して、ionicはグリッドの12列レイアウトモードも使用します。 全体的なスタイルに関しては、携帯端末の表示サイズによって制限され、提供されるページ分割要素は比較的簡単である。 ページインタラクションでは、イオンは、リスト、カード、セグメントなどのページ制御スタイルを提供します。これは要件に応じて選択できます。

実機テスト

最後の段落では、実際のマシンテストについて説明します。 Add IOS Platformコマンドを実行して、IOSワークスペースを初期化します。 作業が完了したら、プロジェクトのプラットフォームフォルダの下にiosディレクトリがあります。このディレクトリには、Xcode呼び出しのために生成されたコードがあります。 リスト11を参照してください。

リスト11. IonicとAndroidプラットフォームを初期化するIonic


> ionic cordova platform add ios
> ionic cordova platform add android

plaforms / ios / test.xcworkspaceワークスペースをxcodeで開きます。 デバイスの内部では、iphone6、iphone7などのエミュレータを選択することも、Macに接続することもできます。 IOSの開発は有料であるため、一時的なテスト環境を設定する必要があります。

「Xcode」 – >「環境設定」 – >「アカウント」 – >「証明書の管理」を開き、新しいIOS開発証明書を追加します。
Resourcesディレクトリーの.plistファイルのバンドルIDを変更し、プロジェクトの開発グループに記入します。
最後に、電話機でGeneral – > Device Managementを開き、Trusted Development IOS Programを選択します。

図5に示すように、結果は実際のマシンに表示されます。 最後に、ionic3 / Angular2を使用して独自のモバイルプログラムを開発するために全力を尽くすことを願っています。

図5.実機テスト

リファレンスリソース

より多くのイオンUIコンポーネントについては、 Ionicの公式サイトを参照してください。

Webpackの移行調査を調べて、 Webpackの設定方法を確認してください

要約

上記の内容はすべてこの記事の内容ですが、この記事の内容には皆さんの研究や仕事の参考となる価値があることを願っております。ご不明な点がございましたら、メッセージを残してください。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ