NativeScript - Aplicación angular

Creemos una aplicación básica básica para comprender el flujo de trabajo de la aplicación NativeScript.

Creando la Aplicación

Aprendamos a crear una aplicación simple usando NativeScript CLI, tns. tns proporciona un comando create to used para crear un nuevo proyecto en NativeScript.

La sintaxis básica para crear una nueva aplicación es la siguiente:

tns create <projectname> --template <template_name>

Dónde,

Projectname es el nombre del proyecto.
template_namees la plantilla de proyecto. NativeScript proporciona muchas plantillas de inicio para crear diferentes tipos de aplicaciones. Utilice una plantilla basada en Angular.

Creemos un nuevo directorio llamado NativeScriptSamples para trabajar en nuestra nueva aplicación. Ahora, abra una nueva terminal, luego muévase a nuestro directorio y escriba el siguiente comando:

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

Dónde, tns-template-blank-ng hace referencia a una aplicación móvil en blanco basada en AngularJS.

Salida

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

Ahora, se crea nuestra primera aplicación móvil, BlankNgApp .

Estructura de la aplicación

Comprendamos la estructura de la aplicación NativeScript analizando nuestra primera aplicación BlankNgApp en este capítulo. La aplicación NativeScript está organizada en varias secciones y son las siguientes:

Sección de configuración
Módulos de nodo
Fuentes de Android
Fuentes de iOS
Código fuente de la aplicación

La estructura general de la aplicación es la siguiente:

│ 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

Entendamos cada sección de la aplicación y cómo nos ayuda a crear nuestra aplicación.

Sección de configuración

Todos los archivos en la raíz de la aplicación son archivos de configuración. El formato de los archivos de configuración está en formato JSON, lo que ayuda al desarrollador a comprender fácilmente los detalles de configuración. La aplicación NativeScript se basa en estos archivos para obtener toda la información de configuración disponible. Repasemos todos los archivos de configuración en esta sección.

package.json

Los archivos package.json establecen la identidad (id) de la aplicación y todos los módulos de los que depende la aplicación para su correcto funcionamiento. A continuación se muestra nuestro 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" 
}

Aquí,

Identity of the application (nativescript/id)- Establece la identificación de la aplicación como org.nativescript.BlankNgApp. Esta identificación se utiliza para publicar nuestra aplicación en Play Store o iTunes. Esta identificación será nuestro identificador de aplicación o nombre de paquete.

Dependencies (dependencies)- Especifica todos nuestros módulos de nodo dependientes. Dado que la implementación predeterminada de NativeScript depende de Angular Framework, se incluyen módulos angulares.

Development dependencies- Especifica todas las herramientas de las que depende la aplicación. Dado que estamos desarrollando nuestra aplicación en TypeScript, incluye mecanografiado como uno de los módulos dependientes.

angular.json - Información de configuración del marco angular.

nsconfig.json - Información de configuración del marco de NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Información de configuración del lenguaje TypeScript

webpack.config.js - Configuración de WebPack escrita en JavaScript.

Módulos de nodo

Como los proyectos NativeScript son proyectos basados en nodos, almacena todas sus dependencias en la carpeta node_modules. Podemos usar npm (npm install) o tns para descargar e instalar toda la dependencia de la aplicación en node_moduels.

Código fuente de Android

NativeScript genera automáticamente el código fuente de Android y lo coloca en la carpeta App_Resources \ Android. Se utilizará para crear una aplicación de Android con el SDK de Android

código fuente de iOS

NativeScript genera automáticamente el código fuente de iOS y lo coloca en la carpeta App_Resources \ iOS. Se usará para crear una aplicación iOS usando iOS SDK y XCode

Código fuente de la aplicación

El código de la aplicación real se coloca en la carpeta src. Nuestra aplicación tiene los siguientes archivos en la carpeta 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

Entendamos el propósito de todos los archivos y cómo están organizados en esta sección:

Paso 1

main.ts: punto de entrada de la aplicación.

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

Aquí, hemos configurado AppModule como el módulo de arranque de la aplicación.

Paso 2

app.css: la hoja de estilo principal de la aplicación se muestra a continuación:

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

Aquí,

app.css importa la hoja de estilo principal y la hoja de estilo de los temas de color marrón del marco de NativeScript.

Paso 3

app \ app.module.ts: módulo raíz de la aplicación.

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

Aquí,

AppModule se crea en base a NgModule y establece los componentes y módulos de la aplicación. Importa dos módulos NativeScriptModule y AppRoutingModule y un componente, AppComponent. También estableció AppComponent como el componente raíz de la aplicación.

Etapa 4

app.component.ts: componente raíz de la aplicación.

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

Aquí,

AppComponent establece la plantilla y la hoja de estilo del componente. La plantilla está diseñada en HMTL simple utilizando componentes de interfaz de usuario de NativeScript.

Paso 5

app-routing.module.ts: módulo de enrutamiento para 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 { }

Aquí,

AppRoutingModule usa NativeScriptRouterModule y establece las rutas de AppModule. Básicamente, redirige la ruta vacía a / home y señala / home a HomeModule.

Paso 6

app \ home \ home.module.ts: define un nuevo módulo, 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 { }

Aquí,

HomeModule importa dos módulos, HomeRoutingModule y NativeScriptCommonModule y un componente HomeComponent

Paso 7

app \ home \ home.component.ts: define el componente Inicio y se utiliza como página de inicio de la aplicación.

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

Aquí,

HomeComponent establece la plantilla y el selector del componente de inicio.

Paso 8

app \ home \ home-routing.module.ts: módulo de enrutamiento para HomeModule y se utiliza para definir el enrutamiento para el módulo de inicio.

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

Aquí,

HomeRoutingModule establece la ruta vacía a HomeComponent.

Paso 9

app.component.html y home.component.html: se utilizan para diseñar la interfaz de usuario de la aplicación utilizando componentes de interfaz de usuario de NativeScript.

Ejecute su aplicación

Si desea ejecutar su aplicación sin usar ningún dispositivo, escriba el siguiente comando:

tns preview

Después de ejecutar este comando, esto generará un código QR para escanear y conectarse con su dispositivo.

Salida

QRCode

Ahora se genera el código QR y se conecta a PlayGround en el siguiente paso.

NativeScript PlayGround

Abra la aplicación NativeScript PlayGround en su dispositivo móvil iOS o Android y luego elija la opción Escanear código QR . Abrirá la cámara. Enfoque el código QR que se muestra en la consola. Esto escaneará el código QR. Escanear el código QR activará la compilación de la aplicación y luego sincronizará la aplicación con el dispositivo como se indica a continuación:

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.

Salida

Después de escanear, debería ver su BlankNgApp en su dispositivo. Se muestra a continuación:

Ejecute su aplicación en el dispositivo

Si desea probar el dispositivo conectado en su aplicación, puede verificarlo usando la siguiente sintaxis:

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

Después de eso, puede ejecutar su aplicación usando el siguiente comando:

tns run

El comando anterior se usa para crear sus aplicaciones localmente e instalarlas en dispositivos Android o iOS. Si desea ejecutar su aplicación en un simulador de Android, escriba el siguiente comando:

tns run android

Para dispositivos iOS, puede seguir el siguiente comando:

tns run ios

Esto inicializará la aplicación en un dispositivo Android / iOS. Discutiremos esto con más detalle en los próximos capítulos.

LiveSync

NativeScript proporciona sincronización en tiempo real de los cambios de la aplicación con la aplicación de vista previa. Permítanos abrir el proyecto usando cualquiera de sus editores favoritos (Visual Studio Code sería la opción ideal para una mejor visualización). Agreguemos algunos cambios en nuestro código y veamos cómo se detectarán en LiveSync.

Ahora abra el archivo app.css y tendrá el contenido a continuación:

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

Aquí, la declaración de importación indica el esquema de color de nuestra aplicación. Cambiemos el esquema de color azul albrown esquema de color como se especifica a continuación -

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

La aplicación en nuestro dispositivo se actualiza y debería ver una ActionBar de color marrón como se muestra a continuación:

Salida

A continuación se muestra la página de inicio de BlankNgApp - Tema marrón.

↰ Previous page Next page ↱