NativeScript - Application angulaire

Créons une application simple pour comprendre le flux de travail de l'application NativeScript.

Création de l'application

Apprenons à créer une application simple à l'aide de NativeScript CLI, tns. tns fournit une commande create à utilisé pour créer un nouveau projet en NativeScript.

La syntaxe de base pour créer une nouvelle application est la suivante -

tns create <projectname> --template <template_name>

Où,

Projectname est le nom du projet.
template_nameest un modèle de projet. NativeScript fournit de nombreux modèles de démarrage pour créer différents types d'application. Utilisez un modèle basé sur Angular.

Créons un nouveau répertoire nommé NativeScriptSamples pour travailler sur notre nouvelle application. Maintenant, ouvrez un nouveau terminal puis accédez à notre répertoire et tapez la commande ci-dessous -

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

Où, tns-template-blank-ng fait référence à une application mobile vierge basée sur AngularJS.

Production

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

Maintenant, notre première application mobile, BlankNgApp est créée.

Structure de l'application

Comprenons la structure de l'application NativeScript en analysant notre première application BlankNgApp dans ce chapitre. L'application NativeScript est organisée en plusieurs sections et elles sont les suivantes -

Section de configuration
Modules de nœud
Sources Android
Sources iOS
Code source de l'application

La structure générale de l'application est la suivante -

│ 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

Comprenons chaque section de l'application et comment elle nous aide à créer notre application.

Section de configuration

Tous les fichiers à la racine de l'application sont des fichiers de configuration. Le format des fichiers de configuration est au format JSON, ce qui aide le développeur à comprendre facilement les détails de la configuration. L'application NativeScript s'appuie sur ces fichiers pour obtenir toutes les informations de configuration disponibles. Passons en revue tous les fichiers de configuration de cette section.

package.json

Les fichiers package.json définissent l'identité (id) de l'application et tous les modules dont l'application dépend pour son bon fonctionnement. Voici notre 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" 
}

Ici,

Identity of the application (nativescript/id)- Définit l'ID de l'application comme org.nativescript.BlankNgApp. Cet identifiant est utilisé pour publier notre application sur le Play Store ou iTunes. Cet identifiant sera notre identifiant d'application ou le nom du package.

Dependencies (dependencies)- Spécifie tous nos modules de nœuds dépendants. Étant donné que l'implémentation NativeScript par défaut dépend de Angular Framework, les modules Angular sont inclus.

Development dependencies- Spécifie tous les outils dont dépend l'application. Depuis, nous développons notre application en TypeScript, elle inclut le typographie comme l'un des modules dépendants.

angular.json - Informations de configuration du cadre angulaire.

nsconfig.json - Informations de configuration du framework NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Informations de configuration du langage TypeScript

webpack.config.js - Configuration WebPack écrite en JavaScript.

Modules de nœud

Comme les projets NativeScript sont des projets basés sur des nœuds, il stocke toutes ses dépendances dans le dossier node_modules. Nous pouvons utiliser npm (npm install) ou tns pour télécharger et installer toutes les dépendances d'application dans le node_moduels.

Code source Android

NativeScript génère automatiquement le code source Android et placez-le dans le dossier App_Resources \ Android. Il sera utilisé pour créer une application Android à l' aide du SDK Android

code source iOS

NativeScript génère automatiquement le code source iOS et placez-le dans le dossier App_Resources \ iOS. Il sera utilisé pour créer une application iOS à l'aide du SDK iOS et XCode

Code source de l'application

Le code d'application réel est placé dans le dossier src. Notre application contient les fichiers ci-dessous dans le dossier 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

Laissez-nous comprendre le but de tous les fichiers et comment ils sont organisés dans cette section -

Étape 1

main.ts - Point d'entrée de l'application.

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

Ici, nous avons défini l'AppModule comme module d'amorçage de l'application.

Étape 2

app.css - La feuille de style principale de l'application est comme indiqué ci-dessous -

@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. */

Ici,

app.css importe la feuille de style principale et la feuille de style des thèmes de couleur marron du framework NativeScript.

Étape 3

app \ app.module.ts - Module racine de l'application.

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

Ici,

AppModule est créé à partir de NgModule et définit les composants et les modules de l'application. Il importe deux modules NativeScriptModule et AppRoutingModule et un composant, AppComponent. Il définit également AppComponent comme composant racine de l'application.

Étape 4

app.component.ts - Composant racine de l'application.

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

Ici,

AppComponent définit le modèle et la feuille de style du composant. Le modèle est conçu en HMTL simple à l'aide de composants d'interface utilisateur NativeScript.

Étape 5

app-routing.module.ts - Module de routage pour l'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 { }

Ici,

AppRoutingModule utilise le NativeScriptRouterModule et définit les routes de l'AppModule. Il redirige essentiellement le chemin vide vers / home et pointe le / home vers HomeModule.

Étape 6

app \ home \ home.module.ts - Définit un nouveau module, 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 { }

Ici,

HomeModule importe deux modules, HomeRoutingModule et NativeScriptCommonModule et un composant HomeComponent

Étape 7

app \ home \ home.component.ts - Définit le composant Home et utilisé comme page d'accueil de l'application.

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

Ici,

HomeComponent définit le modèle et le sélecteur du composant d'origine.

Étape 8

app \ home \ home-routing.module.ts - Module de routage pour HomeModule et utilisé pour définir le routage pour le module d'accueil.

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

Ici,

HomeRoutingModule a défini le chemin vide vers HomeComponent.

Étape 9

app.component.html et home.component.html - Ils sont utilisés pour concevoir l'interface utilisateur de l'application à l'aide des composants de l'interface utilisateur NativeScript.

Exécutez votre application

Si vous souhaitez exécuter votre application sans utiliser d'appareil, tapez la commande ci-dessous -

tns preview

Après avoir exécuté cette commande, cela générera un code QR pour scanner et se connecter à votre appareil.

Production

QRCode

Le code QR est maintenant généré et connectez-vous à PlayGround à l'étape suivante.

NativeScript PlayGround

Ouvrez l'application NativeScript PlayGround sur votre mobile iOS ou Android, puis choisissez l' option Scanner le code QR . Cela ouvrira la caméra. Focalisez le code QR affiché sur la console. Cela scannera le code QR. La numérisation du code QR déclenchera la construction de l'application, puis synchronisera l'application avec l'appareil comme indiqué ci-dessous -

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.

Production

Après la numérisation, vous devriez voir votre BlankNgApp sur votre appareil. Il est montré ci-dessous -

Exécutez votre application sur l'appareil

Si vous souhaitez tester l'appareil connecté dans votre application, vous pouvez le vérifier à l'aide de la syntaxe ci-dessous -

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

Après cela, vous pouvez exécuter votre application en utilisant la commande ci-dessous -

tns run

La commande ci-dessus est utilisée pour créer vos applications localement et les installer sur des appareils Andriod ou iOS. Si vous souhaitez exécuter votre application sur un simulateur Android, tapez la commande ci-dessous -

tns run android

Pour un appareil iOS, vous pouvez suivre la commande ci-dessous -

tns run ios

Cela initialisera l'application sur un appareil Android / iOS. Nous en discuterons plus en détail dans les prochains chapitres.

LiveSync

NativeScript fournit une synchronisation en temps réel des modifications de l'application avec l'application de prévisualisation. Laissez-nous ouvrir le projet en utilisant l'un de vos éditeurs préférés (Visual Studio Code serait le choix idéal pour une meilleure visualisation). Ajoutons quelques changements dans notre code et voyons comment cela sera détecté dans LiveSync.

Maintenant, ouvrez le fichier app.css et il aura le contenu ci-dessous -

@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. */

Ici, la déclaration d'importation indique le jeu de couleurs de notre application. Changeons le jeu de couleurs bleu enbrown jeu de couleurs comme spécifié ci-dessous -

@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'application de notre appareil s'actualise et vous devriez voir une ActionBar de couleur marron comme indiqué ci-dessous -

Production

Vous trouverez ci-dessous la page d'accueil de BlankNgApp - Thème marron.

↰ Previous page Next page ↱

NativeScript - Application angulaire

Création de l'application

Production

Structure de l'application

Section de configuration

package.json

Modules de nœud

Code source Android

code source iOS

Code source de l'application

Étape 1

Étape 2

Étape 3

Étape 4

Étape 5

Étape 6

Étape 7

Étape 8

Étape 9

Exécutez votre application

Production

NativeScript PlayGround

Production

Exécutez votre application sur l'appareil

LiveSync

Production

Tutoriel NativeScript