NativeScript - Applicazione angolare

Creiamo una semplice applicazione bare bone per comprendere il flusso di lavoro dell'applicazione NativeScript.

Creazione dell'applicazione

Impariamo come creare una semplice applicazione usando NativeScript CLI, tns. tns fornisce un comando create da utilizzare per creare un nuovo progetto in NativeScript.

La sintassi di base per creare una nuova applicazione è la seguente:

tns create <projectname> --template <template_name>

Dove,

Projectname è il nome del progetto.
template_nameè il modello di progetto. NativeScript fornisce molti modelli di avvio per creare diversi tipi di applicazione. Usa un modello basato su Angular.

Creiamo una nuova directory denominata NativeScriptSamples per lavorare sulla nostra nuova applicazione. Ora apri un nuovo terminale, quindi spostati nella nostra directory e digita il comando seguente:

tns create BlankNgApp --template tns-template-blank-ng

Dove, tns-template-blank-ng fa riferimento a un'applicazione mobile vuota basata su AngularJS.

Produzione

..... 
..... 
..... 
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

Ora viene creata la nostra prima applicazione mobile, BlankNgApp .

Struttura dell'applicazione

Cerchiamo di comprendere la struttura dell'applicazione NativeScript analizzando la nostra prima applicazione BlankNgApp in questo capitolo. L'applicazione NativeScript è organizzata in più sezioni e sono le seguenti:

Sezione di configurazione
Moduli del nodo
Fonti Android
Fonti iOS
Codice sorgente dell'applicazione

La struttura generale dell'applicazione è la seguente:

│ 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

Facci capire ogni sezione dell'applicazione e come ci aiuta a creare la nostra applicazione.

Sezione di configurazione

Tutti i file nella radice dell'applicazione sono file di configurazione. Il formato dei file di configurazione è in formato JSON, che aiuta lo sviluppatore a comprendere facilmente i dettagli di configurazione. L'applicazione NativeScript si basa su questi file per ottenere tutte le informazioni di configurazione disponibili. Esaminiamo tutti i file di configurazione in questa sezione.

package.json

Il file package.json imposta l'identità (id) dell'applicazione e tutti i moduli da cui l'applicazione dipende per il suo corretto funzionamento. Di seguito è riportato il nostro 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" 
}

Qui,

Identity of the application (nativescript/id)- Imposta l'ID dell'applicazione come org.nativescript.BlankNgApp. Questo ID viene utilizzato per pubblicare la nostra app su Play Store o iTunes. Questo ID sarà il nostro identificatore dell'applicazione o il nome del pacchetto.

Dependencies (dependencies)- Specifica tutti i nostri moduli del nodo dipendente. Poiché l'implementazione predefinita di NativeScript dipende da Angular Framework, sono inclusi i moduli Angular.

Development dependencies- Specifica tutti gli strumenti da cui dipende l'applicazione. Poiché stiamo sviluppando la nostra applicazione in TypeScript, include il dattiloscritto come uno dei moduli dipendenti.

angular.json - Informazioni sulla configurazione del framework angolare.

nsconfig.json - Informazioni sulla configurazione del framework NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Informazioni sulla configurazione del linguaggio TypeScript

webpack.config.js - Configurazione WebPack scritta in JavaScript.

Moduli del nodo

Poiché i progetti NativeScript sono progetti basati su nodi, memorizza tutte le sue dipendenze nella cartella node_modules. Possiamo usare npm (npm install) o tns per scaricare e installare tutte le dipendenze dell'applicazione in node_moduels.

Codice sorgente Android

NativeScript genera automaticamente il codice sorgente Android e lo inserisce nella cartella App_Resources \ Android. Verrà utilizzato per creare applicazioni Android utilizzando Android SDK

Codice sorgente iOS

NativeScript genera automaticamente il codice sorgente iOS e lo inserisce nella cartella App_Resources \ iOS. Verrà utilizzato per creare applicazioni iOS utilizzando iOS SDK e XCode

Codice sorgente dell'applicazione

Il codice dell'applicazione effettivo viene inserito nella cartella src. La nostra applicazione ha i file seguenti nella cartella 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

Cerchiamo di capire lo scopo di tutti i file e come sono organizzati in questa sezione -

Passo 1

main.ts - Punto di ingresso dell'applicazione.

// 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);

Qui, abbiamo impostato AppModule come modulo di avvio dell'applicazione.

Passo 2

app.css - Il foglio di stile principale dell'applicazione è come mostrato di seguito -

@import "[email protected]/theme/css/core.css"; 
@import "[email protected]/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. */

Qui,

app.css importa il foglio di stile principale e il foglio di stile dei temi colore marrone del framework NativeScript.

Passaggio 3

app \ app.module.ts - Modulo radice dell'applicazione.

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 { }

Qui,

AppModule viene creato sulla base di NgModule e imposta i componenti ei moduli dell'applicazione. Importa due moduli NativeScriptModule e AppRoutingModule e un componente, AppComponent. Inoltre imposta l'AppComponent come componente principale dell'applicazione.

Passaggio 4

app.component.ts - Componente principale dell'applicazione.

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

Qui,

AppComponent imposta il modello e il foglio di stile del componente. Il modello è progettato in HMTL semplice utilizzando i componenti dell'interfaccia utente di NativeScript.

Passaggio 5

app-routing.module.ts - Modulo di instradamento per 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 { }

Qui,

AppRoutingModule usa NativeScriptRouterModule e imposta i percorsi di AppModule. Fondamentalmente reindirizza il percorso vuoto a / home e punta la / home a HomeModule.

Passaggio 6

app \ home \ home.module.ts - Definisce un nuovo modulo, 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 { }

Qui,

HomeModule importa due moduli, HomeRoutingModule e NativeScriptCommonModule e un componente HomeComponent

Passaggio 7

app \ home \ home.component.ts: definisce il componente Home e viene utilizzato come home page dell'applicazione.

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. 
   } 
}

Qui,

HomeComponent imposta il modello e il selettore del componente Home.

Passaggio 8

app \ home \ home-routing.module.ts - Modulo di routing per HomeModule e utilizzato per definire il routing per il modulo home.

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 { }

Qui,

HomeRoutingModule imposta il percorso vuoto su HomeComponent.

Passaggio 9

app.component.html e home.component.html: vengono utilizzati per progettare l'interfaccia utente dell'applicazione utilizzando i componenti dell'interfaccia utente NativeScript.

Esegui la tua app

Se desideri eseguire la tua app senza utilizzare alcun dispositivo, digita il comando seguente:

tns preview

Dopo aver eseguito questo comando, questo genererà il codice QR per scansionare e connettersi con il tuo dispositivo.

Produzione

QRCode

Ora il codice QR viene generato e connettiti a PlayGround nel passaggio successivo.

NativeScript PlayGround

Apri l'app NativeScript PlayGround sul tuo dispositivo mobile iOS o Android, quindi scegli l' opzione Scansiona codice QR . Aprirà la fotocamera. Metti a fuoco il codice QR visualizzato sulla console. Questo eseguirà la scansione del codice QR. La scansione del codice QR attiverà la build dell'applicazione e quindi sincronizzerà l'applicazione sul dispositivo come indicato di seguito:

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.

Produzione

Dopo la scansione, dovresti vedere la tua BlankNgApp sul tuo dispositivo. È mostrato di seguito -

Esegui la tua app sul dispositivo

Se desideri testare il dispositivo connesso nella tua applicazione, puoi verificarlo utilizzando la sintassi seguente:

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

Successivamente, puoi eseguire la tua app utilizzando il comando seguente:

tns run

Il comando precedente viene utilizzato per creare le tue app localmente e installarle su dispositivi Andriod o iOS. Se desideri eseguire la tua app su un simulatore Android, digita il comando seguente:

tns run android

Per il dispositivo iOS, puoi seguire il comando seguente:

tns run ios

Questo inizializzerà l'app in un dispositivo Android / iOS. Ne discuteremo più in dettaglio nei prossimi capitoli.

LiveSync

NativeScript fornisce la sincronizzazione in tempo reale delle modifiche nell'applicazione all'applicazione di anteprima. Apriamo il progetto utilizzando uno dei tuoi editor preferiti (Visual Studio Code sarebbe la scelta ideale per una migliore visualizzazione). Aggiungiamo alcune modifiche al nostro codice e vediamo come verranno rilevate in LiveSync.

Ora apri il file app.css e avrà il contenuto di seguito -

@import "[email protected]/theme/css/core.css"; 
@import "[email protected]/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. */

Qui, l'istruzione import indica lo schema dei colori della nostra app. Cambiamo la combinazione di colori blu inbrown combinazione di colori come specificato di seguito -

@import "[email protected]/theme/css/core.css"; 
@import "[email protected]/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. */

L'applicazione nel nostro dispositivo si aggiorna e dovresti vedere una ActionBar di colore marrone come mostrato di seguito -

Produzione

Di seguito è riportata la home page di BlankNgApp - Tema marrone.

↰ Previous page Next page ↱

NativeScript - Applicazione angolare

Creazione dell'applicazione

Produzione

Struttura dell'applicazione

Sezione di configurazione

package.json

Moduli del nodo

Codice sorgente Android

Codice sorgente iOS

Codice sorgente dell'applicazione

Passo 1

Passo 2

Passaggio 3

Passaggio 4

Passaggio 5

Passaggio 6

Passaggio 7

Passaggio 8

Passaggio 9

Esegui la tua app

Produzione

NativeScript PlayGround

Produzione

Esegui la tua app sul dispositivo

LiveSync

Produzione

Tutorial di NativeScript