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.componentl
      │  app.component.ts
      │  app.module.ts
      │
      └───home
         home-routing.module.ts
         home.componentl
         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"
}

ここに、

*_アプリケーションのID（nativescript/id）_* -アプリケーションのIDをorg.nativescript.BlankNgAppとして設定します。 このIDは、アプリをPlayストアまたはiTunesに公開するために使用されます。 このIDは、アプリケーションIDまたはパッケージ名になります。

*_Dependencies（dependencies）_* -すべての依存ノードモジュールを指定します。 デフォルトのNativeScript実装はAngular Frameworkに依存しているため、Angularモジュールが含まれています。

*_開発の依存関係_* -アプリケーションが依存するすべてのツールを指定します。 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フォルダーに配置します。 _Android SDK_を使用してAndroidアプリケーションを作成するために使用されます

iOSソースコード

NativeScriptはiOSソースコードを自動生成し、それをApp_Resources \ iOSフォルダーに配置します。 iOS SDKとXCodeを使用してiOSアプリケーションを作成するために使用されます

アプリケーションのソースコード

実際のアプリケーションコードはsrcフォルダーに配置されます。アプリケーションのsrcフォルダーには以下のファイルがあります。

└───src
   │ app.css
   │ main.ts
   │ package.json
   │
   └───app
   │ app-routing.module.ts
   │ app.componentl
   │ app.component.ts
   │ app.module.ts
   │
   └───home
         home-routing.module.ts
         home.componentl
         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.componentl"
   }
)
export class AppComponent { }

ここに、

AppComponentは、コンポーネントのテンプレートとスタイルシートを設定します。テンプレートは、NativeScript UIコンポーネントを使用してプレーンな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.componentl"
   }
)
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.componentlとhome.componentl-NativeScript UIコンポーネントを使用してアプリケーションのUIを設計するために使用されます。

アプリを実行する

デバイスを使用せずにアプリを実行したい場合は、次のコマンドを入力します-

tns preview

このコマンドを実行すると、デバイスをスキャンして接続するためのQRコードが生成されます。

出力

QRCode

QRコード

これでQRコードが生成され、次のステップでPlayGroundに接続します。

NativeScript PlayGround

iOSまたはAndroidモバイルでNativeScript PlayGroundアプリを開き、_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.componentl] 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が表示されます。以下に示されています-

BlankNgApp

デバイスでアプリを実行する

アプリケーションで接続されたデバイスをテストする場合は、次の構文を使用して確認できます-

'tns device <Platform> --available-devices'

その後、以下のコマンドを使用してアプリを実行できます-

tns run

上記のコマンドは、アプリをローカルでビルドし、AndriodまたはiOSデバイスにインストールするために使用されます。 Androidシミュレータでアプリを実行したい場合は、以下のコマンドを入力してください-

tns run android

iOSデバイスの場合、以下のコマンドに従うことができます-

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 "~@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ホームページ-茶色のテーマです。

茶色のテーマ

Nativescript-angular-application

NativeScript-Angularアプリケーション

アプリケーションの作成

出力

アプリケーションの構造

構成セクション

package.json

ノードモジュール

Androidソースコード

iOSソースコード

アプリケーションのソースコード

ステップ1

ステップ2

ステップ3

ステップ4

ステップ5

ステップ6

ステップ7

ステップ8

ステップ9

アプリを実行する

出力

NativeScript PlayGround

出力

デバイスでアプリを実行する

LiveSync

出力

目次