NativeScript - Angular Application
Lassen Sie uns eine einfache Bare-Bone-Anwendung erstellen, um den Arbeitsablauf der NativeScript-Anwendung zu verstehen.
Anwendung erstellen
Lassen Sie uns lernen, wie Sie mit NativeScript CLI, tns, eine einfache Anwendung erstellen. tns bietet einen Befehl zum Erstellen eines neuen Projekts in NativeScript.
Die grundlegende Syntax zum Erstellen einer neuen Anwendung lautet wie folgt:
tns create <projectname> --template <template_name>Wo,
Projectname ist der Name des Projekts.
template_nameist Projektvorlage. NativeScript bietet viele Startvorlagen zum Erstellen verschiedener Anwendungstypen. Verwenden Sie eine winkelbasierte Vorlage.
Erstellen wir ein neues Verzeichnis mit dem Namen NativeScriptSamples, um an unserer neuen Anwendung zu arbeiten. Öffnen Sie nun ein neues Terminal, wechseln Sie in unser Verzeichnis und geben Sie den folgenden Befehl ein:
tns create BlankNgApp --template tns-template-blank-ngWo, tns-template-blank-ng verweist auf eine leere mobile Anwendung, die auf AngularJS basiert.
Ausgabe
.....
.....
.....
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 previewJetzt wird unsere erste mobile Anwendung, BlankNgApp, erstellt.
Struktur der Anwendung
Lassen Sie uns die Struktur der NativeScript-Anwendung verstehen, indem Sie unsere erste Anwendung BlankNgApp in diesem Kapitel analysieren. Die NativeScript-Anwendung ist in mehrere Abschnitte unterteilt und sieht wie folgt aus:
Konfigurationsabschnitt
Knotenmodule
Android-Quellen
iOS-Quellen
Quellcode der Anwendung
Die allgemeine Struktur der Anwendung ist wie folgt:
│ 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.tsLassen Sie uns jeden Abschnitt der Anwendung verstehen und wie er uns beim Erstellen unserer Anwendung hilft.
Konfigurationsabschnitt
Alle Dateien im Stammverzeichnis der Anwendung sind Konfigurationsdateien. Das Format der Konfigurationsdateien liegt im JSON-Format vor, wodurch der Entwickler die Konfigurationsdetails leichter verstehen kann. Die NativeScript-Anwendung verwendet diese Dateien, um alle verfügbaren Konfigurationsinformationen abzurufen. Lassen Sie uns alle Konfigurationsdateien in diesem Abschnitt durchgehen.
package.json
Die Dateien package.json legen die Identität (ID) der Anwendung und aller Module fest, von denen die Anwendung für ihre ordnungsgemäße Funktion abhängt. Unten ist unser 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"
}Hier,
Identity of the application (nativescript/id)- Legt die ID der Anwendung als org.nativescript.BlankNgApp fest. Diese ID wird verwendet, um unsere App im Play Store oder in iTunes zu veröffentlichen. Diese ID ist unsere Anwendungskennung oder unser Paketname.
Dependencies (dependencies)- Gibt alle unsere abhängigen Knotenmodule an. Da die Standard-NativeScript-Implementierung von Angular Framework abhängt, sind Angular-Module enthalten.
Development dependencies- Gibt alle Tools an, von denen die Anwendung abhängt. Da wir unsere Anwendung in TypeScript entwickeln, enthält sie Typoskript als eines der abhängigen Module.
angular.json - Informationen zur Konfiguration des Angular Frameworks.
nsconfig.json - Informationen zur NativeScript-Framework-Konfiguration.
tsconfig.json, tsfmt.json & tsconfig.tns.json - Informationen zur TypeScript-Sprachkonfiguration
webpack.config.js - In JavaScript geschriebene WebPack-Konfiguration.
Knotenmodule
Da NativeScript-Projekte knotenbasierte Projekte sind, werden alle Abhängigkeiten im Ordner node_modules gespeichert. Wir können npm (npm install) oder tns verwenden, um alle Anwendungsabhängigkeiten herunterzuladen und in die node_moduels zu installieren.
Android-Quellcode
NativeScript generiert den Android-Quellcode automatisch und legt ihn im Ordner App_Resources \ Android ab. Es wird verwendet, um eine Android-Anwendung mit dem Android SDK zu erstellen
iOS-Quellcode
NativeScript generiert den iOS-Quellcode automatisch und legt ihn im Ordner App_Resources \ iOS ab. Es wird verwendet, um eine iOS-Anwendung mit iOS SDK und XCode zu erstellen
Quellcode der Anwendung
Der eigentliche Anwendungscode wird im Ordner src abgelegt. Unsere Anwendung hat unten Dateien im Ordner 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.tsLassen Sie uns den Zweck aller Dateien und ihre Organisation in diesem Abschnitt verstehen -
Schritt 1
main.ts - Einstiegspunkt der Anwendung.
// 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);Hier haben wir das AppModule als Bootstrapping-Modul der Anwendung festgelegt.
Schritt 2
app.css - Das Haupt-Stylesheet der Anwendung ist wie folgt:
@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. */Hier,
app.css importiert das Kern-Stylesheet und das Stylesheet für braune Farbthemen des NativeScript-Frameworks.
Schritt 3
app \ app.module.ts - Root-Modul der Anwendung.
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 { }Hier,
AppModule wird basierend auf NgModule erstellt und legt die Komponenten und Module der Anwendung fest. Es importiert zwei Module NativeScriptModule und AppRoutingModule sowie eine Komponente, AppComponent. Außerdem wird die AppComponent als Stammkomponente der Anwendung festgelegt.
Schritt 4
app.component.ts - Stammkomponente der Anwendung.
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }Hier,
AppComponent legt die Vorlage und das Stylesheet der Komponente fest. Die Vorlage wird in einfacher HMTL unter Verwendung von NativeScript-UI-Komponenten erstellt.
Schritt 5
app-routing.module.ts - Routing-Modul für das 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 { }Hier,
AppRoutingModule verwendet das NativeScriptRouterModule und legt die Routen des AppModule fest. Grundsätzlich wird der leere Pfad zu / home und die Punkte / home zu HomeModule umgeleitet.
Schritt 6
app \ home \ home.module.ts - Definiert ein neues Modul, 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 { }Hier,
HomeModule importiert zwei Module, HomeRoutingModule und NativeScriptCommonModule sowie eine Komponente HomeComponent
Schritt 7
app \ home \ home.component.ts - Definiert die Home-Komponente und wird als Homepage der Anwendung verwendet.
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.
}
}Hier,
HomeComponent legt die Vorlage und den Selektor der Home-Komponente fest.
Schritt 8
app \ home \ home-routing.module.ts - Routing-Modul für HomeModule, mit dem das Routing für das Home-Modul definiert wird.
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 { }Hier,
HomeRoutingModule setzt den leeren Pfad auf HomeComponent.
Schritt 9
app.component.html und home.component.html - Sie werden verwendet, um die Benutzeroberfläche der Anwendung mithilfe von NativeScript-Benutzeroberflächenkomponenten zu entwerfen.
Führen Sie Ihre App aus
Wenn Sie Ihre App ohne Verwendung eines Geräts ausführen möchten, geben Sie den folgenden Befehl ein:
tns previewNach Ausführung dieses Befehls wird ein QR-Code zum Scannen und Verbinden mit Ihrem Gerät generiert.
Ausgabe
QRCode
Jetzt wird QR-Code generiert und im nächsten Schritt eine Verbindung zu PlayGround hergestellt.
NativeScript PlayGround
Öffnen Sie die NativeScript PlayGround-App auf Ihrem iOS- oder Android-Handy und wählen Sie die Option QR-Code scannen . Es öffnet die Kamera. Fokussieren Sie den auf der Konsole angezeigten QR-Code. Dadurch wird der QR-Code gescannt. Das Scannen des QR-Codes löst den Anwendungsaufbau aus und synchronisiert die Anwendung dann wie unten angegeben mit dem Gerät.
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.Ausgabe
Nach dem Scannen sollte Ihre BlankNgApp auf Ihrem Gerät angezeigt werden. Es ist unten gezeigt -
Führen Sie Ihre App auf dem Gerät aus
Wenn Sie das angeschlossene Gerät in Ihrer Anwendung testen möchten, können Sie es mithilfe der folgenden Syntax überprüfen:
'tns device <Platform> --available-devices'Danach können Sie Ihre App mit dem folgenden Befehl ausführen:
tns runMit dem obigen Befehl können Sie Ihre Apps lokal erstellen und auf Andriod- oder iOS-Geräten installieren. Wenn Sie Ihre App auf einem Android-Simulator ausführen möchten, geben Sie den folgenden Befehl ein:
tns run androidFür iOS-Geräte können Sie den folgenden Befehl befolgen:
tns run iosDadurch wird die App auf einem Android / iOS-Gerät initialisiert. Wir werden dies in den kommenden Kapiteln ausführlicher besprechen.
LiveSync
NativeScript bietet eine Echtzeitsynchronisierung von Änderungen in der Anwendung mit der Vorschau-Anwendung. Lassen Sie uns das Projekt mit einem Ihrer bevorzugten Editoren öffnen (Visual Studio Code ist die ideale Wahl für eine bessere Visualisierung). Lassen Sie uns einige Änderungen in unseren Code einfügen und sehen, wie dies in LiveSync erkannt wird.
Öffnen Sie nun die Datei app.css und sie enthält den folgenden Inhalt -
@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. */Hier gibt die import-Anweisung das Farbschema unserer App an. Ändern wir das blaue Farbschema inbrown Farbschema wie unten angegeben -
@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. */Die Anwendung in unserem Gerät wird aktualisiert und Sie sollten eine braune ActionBar sehen, wie unten gezeigt -
Ausgabe
Unten finden Sie die BlankNgApp-Startseite - Brown Theme.
