NativeScript-Angularアプリケーション
NativeScriptアプリケーションのワークフローを理解するために、簡単なベアボーンアプリケーションを作成しましょう。
アプリケーションの作成
NativeScript CLI、tnsを使用して簡単なアプリケーションを作成する方法を学びましょう。tnsは、NativeScriptで新しいプロジェクトを作成するために使用するコマンドcreateを提供します。
新しいアプリケーションを作成するための基本的な構文は次のとおりです。
tns create <projectname> --template <template_name>どこ、
Projectname プロジェクトの名前です。
template_nameプロジェクトテンプレートです。NativeScriptは、さまざまなタイプのアプリケーションを作成するための多くのスタートアップテンプレートを提供します。Angularベースのテンプレートを使用します。
新しいアプリケーションで動作するように、NativeScriptSamplesという名前の新しいディレクトリを作成しましょう。ここで、新しいターミナルを開き、ディレクトリに移動して、次のコマンドを入力します-
tns create BlankNgApp --template tns-template-blank-ngどこ、 tns-template-blank-ng AngularJSに基づく空のモバイルアプリケーションを指します。
出力
.....
.....
.....
Project BlankNgApp was successfully created.
Now you can navigate to your project with $ cd BlankNgApp
After that you can preview it on device by executing $ tns previewこれで、最初のモバイルアプリケーションであるBlankNgAppが作成されました。
アプリケーションの構造
この章の最初のアプリケーションBlankNgAppを分析して、NativeScriptアプリケーションの構造を理解しましょう。NativeScriptアプリケーションは複数のセクションに編成されており、次のとおりです。
構成セクション
ノードモジュール
Androidソース
iOSソース
アプリケーションのソースコード
アプリケーションの一般的な構造は次のとおりです-
│ angular.json
│ LICENSE
│ nsconfig.json
│ package-lock.json
│ package.json
│ tsconfig.json
│ tsconfig.tns.json
│ tsfmt.json
│ webpack.config.js
│
├───App_Resources
│ ├───Android
│ │
│ └───iOS
│
├───hooks
│
├───node_modules
|
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.tsアプリケーションの各セクションと、それがアプリケーションの作成にどのように役立つかを理解しましょう。
構成セクション
アプリケーションのルートにあるすべてのファイルは構成ファイルです。構成ファイルの形式はJSON形式であるため、開発者は構成の詳細を簡単に理解できます。NativeScriptアプリケーションは、これらのファイルに依存して、使用可能なすべての構成情報を取得します。このセクションのすべての構成ファイルを見ていきましょう。
package.json
package.jsonファイルは、アプリケーションのID（id）と、アプリケーションが適切に機能するために依存するすべてのモジュールを設定します。以下は私たちのpackage.jsonです-
{
"nativescript": {
"id": "org.nativescript.BlankNgApp",
"tns-android": {
"version": "6.3.1"
}, "tns-ios": {
"version": "6.3.0"
}
}, "description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nativescript/theme": "~2.2.1",
"nativescript-angular": "~8.20.3",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.0",
"@ngtools/webpack": "~8.2.0",
"nativescript-dev-webpack": "~1.4.0",
"typescript": "~3.5.3"
},
"gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14",
"readme": "NativeScript Application"
}ここに、
Identity of the application (nativescript/id)−アプリケーションのIDをorg.nativescript.BlankNgAppとして設定します。このIDは、アプリをPlayストアまたはiTunesに公開するために使用されます。このIDは、アプリケーション識別子またはパッケージ名になります。
Dependencies (dependencies)−すべての依存ノードモジュールを指定します。デフォルトのNativeScript実装はAngularFrameworkに依存しているため、Angularモジュールが含まれています。
Development dependencies−アプリケーションが依存するすべてのツールを指定します。TypeScriptでアプリケーションを開発しているため、依存モジュールの1つとしてtypescriptが含まれています。
angular.json −Angularフレームワーク構成情報。
nsconfig.json −NativeScriptフレームワーク構成情報。
tsconfig.json, tsfmt.json & tsconfig.tns.json −TypeScript言語構成情報
webpack.config.js −JavaScriptで記述されたWebPack構成。
ノードモジュール
NativeScriptプロジェクトはノードベースのプロジェクトであるため、すべての依存関係をnode_modulesフォルダーに格納します。npm（npm install）またはtnsを使用して、すべてのアプリケーション依存関係をダウンロードしてnode_moduelsにインストールできます。
Androidのソースコード
NativeScriptは、Androidソースコードを自動生成し、App_Resources \ Androidフォルダーに配置します。AndroidSDKを使用してAndroidアプリケーションを作成するために使用されます
iOSソースコード
NativeScriptはiOSソースコードを自動生成し、App_Resources \ iOSフォルダーに配置します。iOSSDKとXCodeを使用してiOSアプリケーションを作成するために使用されます
アプリケーションのソースコード
実際のアプリケーションコードはsrcフォルダーに配置されます。このアプリケーションでは、srcフォルダーに以下のファイルがあります。
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.tsこのセクションでは、すべてのファイルの目的とそれらがどのように編成されているかを理解しましょう。
ステップ1
main.ts-アプリケーションのエントリポイント。
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);ここでは、AppModuleをアプリケーションのブートストラップモジュールとして設定しました。
ステップ2
app.css-アプリケーションのメインスタイルシートは次のとおりです-
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */ここに、
app.cssは、NativeScriptフレームワークのコアスタイルシートと茶色のテーマスタイルシートをインポートします。
ステップ3
app \ app.module.ts-アプリケーションのルートモジュール。
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
{
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent
], schemas: [
NO_ERRORS_SCHEMA
]
}
)
export class AppModule { }ここに、
AppModuleはNgModuleに基づいて作成され、アプリケーションのコンポーネントとモジュールを設定します。2つのモジュールNativeScriptModuleとAppRoutingModule、およびコンポーネントAppComponentをインポートします。また、AppComponentをアプリケーションのルートコンポーネントとして設定します。
ステップ4
app.component.ts-アプリケーションのルートコンポーネント。
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }ここに、
AppComponentは、コンポーネントのテンプレートとスタイルシートを設定します。テンプレートは、NativeScriptUIコンポーネントを使用してプレーンなHMTLで設計されています。
ステップ5
app-routing.module.ts-AppModuleのルーティングモジュール
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: () =>
import("~/app/home/home.module").then((m) => m.HomeModule) }
];
@NgModule(
{
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
}
)
export class AppRoutingModule { }ここに、
AppRoutingModuleは、NativeScriptRouterModuleを使用して、AppModuleのルートを設定します。基本的に、空のパスを/ homeにリダイレクトし、/ homeをHomeModuleにポイントします。
ステップ6
app \ home \ home.module.ts-新しいモジュールHomeModuleを定義します。
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
{
imports: [
NativeScriptCommonModule,
HomeRoutingModule
],
declarations: [
HomeComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}
)
export class HomeModule { }ここに、
HomeModuleは、HomeRoutingModuleとNativeScriptCommonModuleの2つのモジュールと、1つのコンポーネントHomeComponentをインポートします。
ステップ7
app \ home \ home.component.ts-ホームコンポーネントを定義し、アプリケーションのホームページとして使用されます。
import { Component, OnInit } from "@angular/core";
@Component(
{
selector: "Home", templateUrl: "./home.component.html"
}
)
export class HomeComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
}ここに、
HomeComponentは、ホームコンポーネントのテンプレートとセレクターを設定します。
ステップ8
app \ home \ home-routing.module.ts-HomeModuleのルーティングモジュールであり、ホームモジュールのルーティングを定義するために使用されます。
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
const routes: Routes = [
{ path: "", component: HomeComponent }
];
@NgModule(
{
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
}
)
export class HomeRoutingModule { }ここに、
HomeRoutingModuleは、HomeComponentへの空のパスを設定します。
ステップ9
app.component.htmlおよびhome.component.html-これらは、NativeScriptUIコンポーネントを使用してアプリケーションのUIを設計するために使用されます。
アプリを実行する
デバイスを使用せずにアプリを実行する場合は、次のコマンドを入力します-
tns previewこのコマンドを実行すると、スキャンしてデバイスに接続するためのQRコードが生成されます。
出力
QRCode
これでQRコードが生成され、次のステップでPlayGroundに接続します。
NativeScript PlayGround
iOSまたはAndroidモバイルでNativeScriptPlayGroundアプリを開き、[ QRコードのスキャン]オプションを選択します。カメラが開きます。コンソールに表示されているQRコードにフォーカスします。QRコードをスキャンします。QRコードをスキャンすると、アプリケーションのビルドがトリガーされ、次に示すようにアプリケーションがデバイスに同期されます-
Copying template files...
Platform android successfully added. v6.3.1
Preparing project...
File change detected. Starting incremental webpack compilation...
webpack is watching the files…
Hash: 1f38aaf6fcda4e082b88
Version: webpack 4.27.1
Time: 9333ms
Built at: 01/04/2020 4:22:31 PM
Asset Size Chunks Chunk Names
0.js 8.32 KiB 0 [emitted]
bundle.js 22.9 KiB bundle [emitted] bundle
package.json 112 bytes [emitted]
runtime.js 73 KiB runtime [emitted] runtime
tns-java-classes.js 0 bytes [emitted]
vendor.js 345 KiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built]
[./app/app.component.html] 62 bytes {bundle} [built]
[./app/app.component.ts] 354 bytes {bundle} [built]
[./app/app.module.ts] 3.22 KiB {bundle} [built]
[./app/home/home.module.ts] 710 bytes {0} [built]
[./main.ts] 1.84 KiB {bundle} [built]
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built]
[nativescript-angular/platform] external "nativescript-angular/platform" 42
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built]
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42
bytes {bundle} [built]
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built]
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built]
+ 15 hidden modules Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f).
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f).
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal.
LOG from device Bala Honor Holly: Angular is running in the development mode.
Call enableProdMode() to enable the production mode.出力
スキャン後、デバイスにBlankNgAppが表示されます。以下に示します-
デバイスでアプリを実行する
アプリケーションで接続されたデバイスをテストする場合は、次の構文を使用して検証できます-
'tns device <Platform> --available-devices'その後、以下のコマンドを使用してアプリを実行できます-
tns run上記のコマンドは、アプリをローカルでビルドし、AndriodまたはiOSデバイスにインストールするために使用されます。Androidシミュレーターでアプリを実行する場合は、次のコマンドを入力します-
tns run androidiOSデバイスの場合、以下のコマンドに従うことができます-
tns run iosこれにより、Android / iOSデバイスでアプリが初期化されます。これについては、次の章で詳しく説明します。
LiveSync
NativeScriptは、アプリケーションの変更をプレビューアプリケーションにリアルタイムで同期します。お気に入りのエディターを使用してプロジェクトを開きましょう（より良い視覚化にはVisual Studio Codeが理想的です）。コードにいくつかの変更を加えて、LiveSyncでどのように検出されるかを見てみましょう。
ここでファイルapp.cssを開くと、以下のコンテンツが含まれます-
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/blue.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */ここで、importステートメントはアプリの配色を示しています。青い配色をに変更しましょうbrown 以下に指定する配色-
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */デバイスのアプリケーションが更新され、以下に示すように茶色のActionBarが表示されます。
出力
以下はBlankNgAppホームページ-茶色のテーマです。
