NativeScript - Guia rápido

Geralmente, desenvolver um aplicativo móvel é uma tarefa complexa e desafiadora. Existem muitas estruturas disponíveis para desenvolver um aplicativo móvel. O Android fornece uma estrutura nativa baseada na linguagem Java e o iOS fornece uma estrutura nativa baseada na linguagem Objective-C / Shift. No entanto, para desenvolver um aplicativo que suporte os dois sistemas operacionais, precisamos codificar em duas linguagens diferentes usando duas estruturas diferentes.

Para superar essa complexidade, as estruturas móveis oferecem suporte a esse recurso. A principal razão para usar plataforma cruzada ou estrutura híbrida é mais fácil manter uma única base de código. Algumas das estruturas populares são NativeScript, Apache Cordova, Xamarin, etc.

Visão geral de estruturas JavaScript

JavaScript é uma linguagem multiparadigma. Suporta programação funcional, programação orientada a objetos e baseada em protótipos. JavaScript foi inicialmente usado para o lado do cliente. Hoje em dia, o JavaScript também é usado como linguagem de programação do lado do servidor. Frameworks JavaScript são um tipo de ferramenta que torna o trabalho com JavaScript mais fácil e suave.

Usando essa estrutura, os programadores podem facilmente codificar o aplicativo como um dispositivo responsivo. A capacidade de resposta é uma das razões por que essa estrutura está se tornando muito popular.

Vamos dar uma olhada em algumas das estruturas JS populares -

Angular

Uma das estruturas JavaScript mais poderosas, eficientes e de código aberto é o Angular. Podemos construir aplicativos móveis e de desktop. O Google usa essa estrutura. É usado para desenvolver um aplicativo de página única (SPA).

Vue.js

VueJS é uma estrutura JavaScript progressiva usada para desenvolver interfaces da web interativas. É um dos famosos frameworks usados ​​para simplificar o desenvolvimento web. Ele pode ser facilmente integrado em grandes projetos para desenvolvimento de front-end sem quaisquer problemas. Seu modo de integração dupla é um dos recursos mais atraentes para a criação de SPA de ponta ou Aplicativo de Página Única.

Reagir

ReactJS é uma biblioteca JavaScript usada para construir componentes de IU reutilizáveis. É desenvolvido pelo Facebook. Atualmente, é uma das bibliotecas JavaScript mais populares e tem uma base sólida e uma grande comunidade por trás dela.

Node.js

Node.js é um ambiente de tempo de execução de plataforma cruzada de código aberto para o desenvolvimento de aplicativos do lado do servidor e de rede. É construído no motor JavaScript do Google Chrome (motor V8). Os aplicativos Node.js são escritos em JavaScript e podem ser executados no OS X, Microsoft Windows e Linux. Ele fornece uma rica biblioteca de vários módulos JavaScript que simplifica o desenvolvimento de aplicativos da web.

Visão geral do NativeScript

NativeScript é uma estrutura de código aberto usada para criar aplicativos móveis iOS e Android nativos. É uma estrutura compilada JIT. O código NativeScript é executado na máquina virtual JS. Ele usa o tempo de execução do motor V8 para plataformas Android e iOS. NativeScript usa XML, JS e CSS para desenvolvimento. Possui um WebIDE conhecido como PlayGround. Este PlayGround suporta uma interface de trabalho fácil, projetos fáceis de gerenciar, recarregamento a quente e depuração em dispositivos.

O NativeScript permite que os desenvolvedores criem aplicativos nativos de plataforma cruzada com rapidez e eficiência e economizam nos custos de desenvolvimento, teste e treinamento. Portanto, os aplicativos nativos continuarão a ser ricos e fortes nos próximos anos para torná-los melhores e mais fáceis de usar.

Características

NativeScript tem um suporte vibrante da comunidade. Alguns dos principais recursos do NativeScript listados abaixo -

  • Extensible

  • Substituição de Módulo Quente

  • Fácil de configurar

  • Podemos construir animações, gráficos, tabelas e listas ricas

  • Os desenvolvedores podem usar qualquer visualização como a raiz de um aplicativo

  • Codificação preguiçosa

Benefícios

NativeScript ajuda empresas de pequeno ou grande porte a construir aplicativos móveis de plataforma cruzada. Alguns dos principais benefícios são -

  • Os desenvolvedores podem reutilizar ferramentas e códigos existentes

  • Fácil de modificar, solucionar problemas e atualizar versões mais recentes

  • A experiência em desenvolvimento é boa, então não precisamos perder tempo aprendendo novas ferramentas

  • APIs específicas de plataforma de JavaScript, eliminando a necessidade de aprender plug-ins Cordova

  • Autenticação fácil com diferentes provedores de logon

Esta seção explica como instalar o NativeScript em sua máquina.

Pré-requisitos

Antes de passar para a instalação, precisamos dos seguintes pré-requisitos -

  • Node.js

  • Android

  • iOS

Verificar Node.js

O Node.js é um mecanismo de tempo de execução JavaScript construído sobre o mecanismo JavaScript interno do Google Chrome, v8. NativeScript usa Node.js extensivamente para vários fins, como criar o aplicativo de modelo inicial, compilar o aplicativo, etc., é obrigatório ter Node.js em sua máquina.

Felizmente, você instalou o Node.js em sua máquina. Se não estiver instalado, visite o link,https://nodejs.org/ e baixe o pacote LTS mais recente e instale-o.

Para verificar se o Node.js está instalado corretamente, digite o comando abaixo em seu terminal -

node --version

Você pode ver a versão. A partir de agora, a versão estável “LTS” atual do nó é 12.14.0.

Configuração CLI

NativeScript CLI é um aplicativo baseado em terminal / linha de comando e permite criar e desenvolver aplicativos NativeScript. O gerenciador de pacotes Node.js npm é usado para instalar NativeScript CLI em sua máquina.

Use o comando abaixo para instalar NativeScript CLI -

npm install -g nativescript

Depois de executar este comando, podemos ver a seguinte saída -

setupcli

Instalamos o último NativeScript CLI, tns em nosso sistema. Agora, digite o comando abaixo em seu terminal -

tns

Isso listará o guia de início rápido. Você pode ver a seguinte saída -

cli

Podemos usar tns para criar e desenvolver aplicativos, mesmo sem qualquer configuração adicional. Porém, não foi possível implantar o aplicativo no dispositivo real. Em vez disso, podemos executar o aplicativo usando o aplicativo NativeScript PlayGround iOS / Android. Vamos verificar nos próximos capítulos.

Instalando o aplicativo NativeScript playground

Acesse sua loja de aplicativos iOS ou Google Play Store e pesquise o aplicativo NativeScript Playground. Depois que o aplicativo estiver listado no resultado da pesquisa, clique na opção de instalação. Ele irá instalar o aplicativo NativeScript Playground em nosso dispositivo.

O aplicativo NativeScript Playground será útil para testar seus aplicativos no dispositivo Android ou iOS sem implantar o aplicativo no dispositivo real ou emulador. Isso reduzirá o tempo de desenvolvimento do aplicativo e será uma maneira fácil de iniciar o desenvolvimento de nosso aplicativo móvel.

Configuração de Android e iOS

Neste capítulo, vamos aprender como configurar o sistema para construir e executar aplicativos iOS e Android em um emulador ou em um dispositivo real.

Etapa 1: dependência do Windows

Execute o comando abaixo no prompt de comando do Windows e execute como administrador -

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex 
((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

Após este comando, os Scripts sendo baixados, instale as dependências e configure-as.

Etapa 2: dependência do macOS

Para instalar no macOS, você deve garantir que o Xcode esteja instalado ou não. Xcode é obrigatório para NativeScript. Se o Xcode não estiver instalado, visite o seguinte linkhttps://developer.apple.com/xcode/e baixar; em seguida, instale-o.

Agora execute o seguinte comando em seu terminal -

sudo ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

Depois de executar o comando acima, o script instalará as dependências para desenvolvimento iOS e Android. Uma vez feito isso, feche e reinicie seu terminal.

Etapa 3: dependência do Android

Felizmente, você configurou os seguintes pré-requisitos -

  • JDK 8 ou superior

  • Android SDK

  • Repositório de suporte Android

  • Repositório Google

  • Android SDK Build-tools 28.0.3 ou superior

  • Android Studio

Se os pré-requisitos acima não estiverem configurados, visite o seguinte link https://developer.android.com/studio/instale e instale. Finalmente, inclua JAVA_HOME e ANDROID_HOME em suas variáveis ​​de ambiente.

Etapa 4: verificar dependências

Agora tudo está feito. Você pode verificar a dependência usando o comando abaixo -

tns doctor

Isso irá verificar toda a dependência e resumir o resultado conforme abaixo -

√ Getting environment information 
No issues were detected. 
√ Your ANDROID_HOME environment variable is set and points to correct directory. 
√ Your adb from the Android SDK is correctly installed. 
√ The Android SDK is installed. 
√ A compatible Android SDK for compilation is found. 
√ Javac is installed and is configured properly. 
√ The Java Development Kit (JDK) is installed and is configured properly. 
√ Local builds for iOS can be executed only on a macOS system. 
   To build for iOS on a different operating system, you can use the
   NativeScript cloud infrastructure. 
√ Getting NativeScript components versions information... 
√ Component nativescript has 6.3.0 version and is up to date. 
√ Component tns-core-modules has 6.3.2 version and is up to date. 
√ Component tns-android has 6.3.1 version and is up to date. 
√ Component tns-ios has 6.3.0 version and is up to date.

Se você encontrar algum problema, corrija-o antes de prosseguir com o desenvolvimento do aplicativo.

NativeScript é uma estrutura avançada para criar aplicativos móveis. Ele oculta a complexidade da criação de aplicativos móveis e expõe uma API bastante simples para criar aplicativos móveis avançados e altamente otimizados. NativeScript permite que até mesmo desenvolvedores de nível básico criem facilmente aplicativos móveis em Android e iOS.

Vamos entender a arquitetura da estrutura NativeScript neste capítulo.

Introdução

O conceito central da estrutura NativeScript é permitir que o desenvolvedor crie um aplicativo móvel de estilo híbrido. O aplicativo híbrido usa a API do navegador específica da plataforma para hospedar um aplicativo da web dentro de um aplicativo móvel normal e fornece acesso do sistema ao aplicativo por meio da API JavaScript.

NativeScript investe pesadamente no JavaScript languagepara fornecer uma estrutura eficiente para desenvolvedores. Desde aJavaScripté o padrão de fato para a programação do lado do cliente (desenvolvimento Web) e todo desenvolvedor está bem ciente da linguagem JavaScript. Isso ajuda os desenvolvedores a entrar facilmente no framework NativeScript. No nível inferior, NativeScript expõe a API nativa por meio de uma coleção de plug-ins JavaScript chamadosNative plugins.

NativeScript se baseia nos plug-ins nativos e fornece muitos módulos JavaScript de alto nível e fáceis de usar . Cada módulo executa uma funcionalidade específica, como acessar uma câmera, projetar uma tela, etc. Todos esses módulos podem ser combinados de várias maneiras para arquitetar um aplicativo móvel complexo.

O diagrama abaixo mostra a visão geral de alto nível da estrutura NativeScript -

NativeScript Application - A estrutura NativeScript permite que o desenvolvedor use o aplicativo de estilo Angular ou o aplicativo de estilo Vue.

JavaScript Modules - A estrutura NativeScript fornece um rico conjunto de módulos JavaScript claramente categorizados como Módulos de IU, Módulos de aplicativo, Módulos principais, etc. Todos os módulos podem ser acessados ​​pelo aplicativo a qualquer momento para escrever qualquer nível de aplicativo complexo.

JavaScript plugins- A estrutura NativeScript fornece uma grande coleção de plug-ins JavaScript para acessar a funcionalidade relacionada à plataforma. Módulos usa os plug-ins JavaScript para fornecer funcionalidade específica da plataforma.

Native plugins- Plug-ins nativos são escritos em linguagem específica de plataforma para empacotar a funcionalidade do sistema que será usada posteriormente pelo plug-in JavaScript.

Platform API - API fornecida por fornecedores de plataforma.

Resumindo, o aplicativo NativeScript é escrito e organizado usando módulos. Os módulos são escritos em JavaScript puro e os módulos acessam a funcionalidade relacionada à plataforma (sempre que necessário) por meio de plug-ins e, finalmente, os plug-ins fazem a ponte entre a API da plataforma e a API do JavaScript.

Fluxo de trabalho de um aplicativo NativeScript

Como aprendemos anteriormente, o aplicativo NativeScript é composto de módulos. Cada módulo habilita um recurso específico. As duas categorias importantes de módulo para inicializar um aplicativo NativeScript são as seguintes -

  • Módulos Raiz

  • Módulos de página

Os módulos raiz e página podem ser categorizados como módulos de aplicativo. O módulo do aplicativo é o ponto de entrada do aplicativo NativeScript. Ele inicializa uma página, permite que o desenvolvedor crie a interface do usuário da página e, finalmente, permite a execução da lógica de negócios da página. Um módulo de aplicação consiste em três itens abaixo -

  • Design da interface do usuário codificado em XML (por exemplo, page.xml / page.component.html)

  • Estilos codificados em CSS (por exemplo, page.css / page.component.css)

  • Lógica de negócios real do módulo em JavaScript (por exemplo, page.js / page.component.ts)

NativeScript fornece muitos componentes de UI (no Módulo de UI) para projetar a página do aplicativo. O componente UI pode ser representado em formato XML ou HTML em aplicativos baseados em Angular. O módulo do aplicativo usa o componente UI para projetar a página e armazenar o design em XML separado, page.xml / page.component.html . O design pode ser estilizado usando CSS padrão.

Os módulos do aplicativo armazenam o estilo do design em CSS separado, page.css / page.component.css. A funcionalidade da página pode ser feita usando JavaScript / TypeScript, que tem acesso total ao design, bem como aos recursos da plataforma. O módulo de aplicativo usa um arquivo separado, page.js / page.component.ts para codificar a funcionalidade real da página.

Módulos Raiz

NativeScript gerencia a interface do usuário e a interação do usuário por meio de contêineres de IU. Cada contêiner de UI deve ter um Módulo Root e por meio do qual o contêiner de UI gerencia a UI. O aplicativo NativeScript tem dois tipos de contêineres de IU -

Application Container- Cada aplicativo NativeScript deve ter um contêiner de aplicativo e será definido usando o método application.run (). Ele inicializa a IU do aplicativo.

Model View Container- NativeScript gerencia os diálogos modais usando o contêiner de visualização do modelo. Um aplicativo NativeScript pode ter qualquer número de contêineres de visualização de modelo.

Cada módulo raiz deve ter apenas um componente de interface do usuário como seu conteúdo. O componente de IU, por sua vez, pode ter outros componentes de IU como seus filhos. NativeScript fornece muitos componentes de IU como TabView, ScrollView, etc., com recurso filho. Podemos usá-los como um componente de UI raiz. Uma exceção é o Quadro , que não tem opção filho, mas pode ser usado como componente raiz. Frame fornece opções para carregar Módulos de Página e opções para navegar para outros módulos de página também.

Módulos de página

Em NativeScript, cada página é basicamente um Módulo de página . O módulo de página é projetado usando o rico conjunto de componentes de IU fornecidos pelo NativeScript. Módulos de página são carregados no aplicativo por meio do componente Frame (usando seu atributo defaultPage ou usando o método navigate ()), que por sua vez são carregados usando Módulos Raiz , que por sua vez são carregados usando application.run () enquanto o aplicativo é iniciado.

O fluxo de trabalho do aplicativo pode ser representado como no diagrama abaixo -

O diagrama acima é explicado em detalhes nas etapas a seguir -

  • O aplicativo NativeScript inicia e chama o método application.run ().

  • application.run () carrega um módulo Root .

  • O Módulo raiz é projetado usando qualquer um dos componentes de IU, conforme especificado abaixo -

    • Frame

    • TabView

    • SideDrawer

    • Qualquer visualização de layout

  • O componente Frame carrega a página especificada (módulo Página) e é renderizado. Outros componentes da IU serão renderizados conforme especificado no Módulo Raiz . Outro componente de IU também tem a opção de carregar Módulos de Página como seu conteúdo principal.

Fluxo de trabalho do aplicativo NativeScript baseado em Angular

Como aprendemos anteriormente, a estrutura NativeScript fornece várias metodologias para atender a diferentes categorias de desenvolvedores. As metodologias suportadas pelo NativeScript são as seguintes -

  • NativeScript Core - Conceito básico ou central do NativeScript Framework

  • Angular + NativeScript - Metodologia de base angular

  • Vuejs + NativeScript - Metodologia baseada em Vue.js

Vamos aprender como a estrutura Angular é incorporada à estrutura NativeScript.

Passo 1

NativeScript fornece um objeto (platformNativeScriptDynamic) para inicializar o aplicativo Angular. platformNativeScriptDynamic tem um método, bootstrapModule, que é usado para iniciar o aplicativo.

A sintaxe para inicializar o aplicativo usando a estrutura Angular é a seguinte -

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

Aqui,

AppModule é o nosso módulo Root.

Passo 2

Uma implementação simples (abaixo do código especificado) do módulo do app.

import { NgModule } 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
      ]
   }
) export class AppModule { }

Aqui,

AppModuleinicia o aplicativo carregando o componente AppComponent. Os componentes angulares são semelhantes às páginas e são usados ​​para a lógica de design e programação.

Uma implementação simples de AppComponent (app.component.ts) e sua lógica de apresentação (app.component.css) é a seguinte -

app.component.ts

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

Aqui,

templateUrl refere-se ao design do componente.

app.component.html

<page-router-outlet></page-router-outlet>

Aqui,

page-router-outlet é o local onde o aplicativo Angular é anexado.

Em resumo, a estrutura Angular é composta de módulos semelhantes à estrutura NativeScript com pequenas diferenças. Cada módulo no Angular terá um componente Angular e um arquivo de configuração do roteador (page-routing.mocdule.ts). O roteador é configurado por módulo e cuida da navegação. Os componentes angulares são análogos às páginas no núcleo NativeSctipt.

Cada componente terá um design de IU (page.component.html), uma folha de estilo (page.component.css) e um arquivo de código JavaScript / TypeScript (page.component.ts).

Vamos criar um aplicativo básico e simples para entender o fluxo de trabalho do aplicativo NativeScript.

Criando o aplicativo

Vamos aprender como criar um aplicativo simples usando NativeScript CLI, tns. tns fornece um comando create a ser usado para criar um novo projeto em NativeScript.

A sintaxe básica para criar um novo aplicativo é a seguinte -

tns create <projectname> --template <template_name>

Onde,

  • Projectname é o nome do projeto.

  • template_nameé o modelo do projeto. NativeScript fornece muitos modelos de inicialização para criar diferentes tipos de aplicativos. Use o modelo baseado em Angular.

Vamos criar um novo diretório chamado NativeScriptSamples para trabalhar em nosso novo aplicativo. Agora, abra um novo terminal, vá para o nosso diretório e digite o comando abaixo -

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

Onde, tns-template-blank-ng refere-se a um aplicativo móvel em branco baseado em AngularJS.

Resultado

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

Agora, nosso primeiro aplicativo móvel, BlankNgApp é criado.

Estrutura do aplicativo

Vamos entender a estrutura do aplicativo NativeScript analisando nosso primeiro aplicativo BlankNgApp neste capítulo. O aplicativo NativeScript é organizado em várias seções e são as seguintes -

  • Seção de configuração

  • Módulos de nó

  • Fontes Android

  • Fontes iOS

  • Código fonte do aplicativo

A estrutura geral do aplicativo é a seguinte -

│ 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

Vamos entender cada seção do aplicativo e como isso nos ajuda a criar nosso aplicativo.

Seção de configuração

Todos os arquivos na raiz do aplicativo são arquivos de configuração. O formato dos arquivos de configuração está no formato JSON, o que ajuda o desenvolvedor a entender facilmente os detalhes da configuração. O aplicativo NativeScript depende desses arquivos para obter todas as informações de configuração disponíveis. Vamos examinar todos os arquivos de configuração nesta seção.

package.json

Os arquivos package.json definem a identidade (id) do aplicativo e todos os módulos dos quais o aplicativo depende para seu funcionamento adequado. Abaixo está nosso 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" 
}

Aqui,

Identity of the application (nativescript/id)- Define o id do aplicativo como org.nativescript.BlankNgApp. Este id é usado para publicar nosso aplicativo na Play Store ou iTunes. Este id será nosso identificador de aplicativo ou nome de pacote.

Dependencies (dependencies)- Especifica todos os nossos módulos de nós dependentes. Como a implementação padrão do NativeScript depende do Angular Framework, os módulos Angular estão incluídos.

Development dependencies- Especifica todas as ferramentas das quais o aplicativo depende. Uma vez que estamos desenvolvendo nosso aplicativo em TypeScript, ele inclui o typescript como um dos módulos dependentes.

angular.json - Informações de configuração da estrutura angular.

nsconfig.json - Informações de configuração da estrutura NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Informações de configuração da linguagem TypeScript

webpack.config.js - Configuração de WebPack escrita em JavaScript.

Módulos de nó

Como os projetos NativeScript são baseados em nós, ele armazena todas as suas dependências na pasta node_modules. Podemos usar npm (npm install) ou tns para baixar e instalar todas as dependências do aplicativo nos node_moduels.

Código fonte Android

NativeScript gera automaticamente o código-fonte do Android e o coloca na pasta App_Resources \ Android. Ele será usado para criar um aplicativo Android usando o Android SDK

código-fonte iOS

NativeScript gera automaticamente o código-fonte do iOS e o coloca na pasta App_Resources \ iOS. Ele será usado para criar um aplicativo iOS usando iOS SDK e XCode

Código fonte do aplicativo

O código do aplicativo real é colocado na pasta src. Nosso aplicativo contém os arquivos abaixo na pasta 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

Vamos entender a finalidade de todos os arquivos e como eles são organizados nesta seção -

Passo 1

main.ts - Ponto de entrada do aplicativo.

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

Aqui, definimos o AppModule como o módulo de inicialização do aplicativo.

Passo 2

app.css - a folha de estilo principal do aplicativo é mostrada abaixo -

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

Aqui,

app.css importa a folha de estilo principal e a folha de estilo de temas de cor marrom da estrutura NativeScript.

etapa 3

app \ app.module.ts - Módulo raiz do aplicativo.

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

Aqui,

AppModule é criado com base no NgModule e define os componentes e módulos do aplicativo. Ele importa dois módulos NativeScriptModule e AppRoutingModule e um componente, AppComponent. Ele também define o AppComponent como o componente raiz do aplicativo.

Passo 4

app.component.ts - Componente raiz do aplicativo.

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

Aqui,

AppComponent define o modelo e a folha de estilo do componente. O modelo é projetado em HMTL simples usando componentes de UI NativeScript.

Etapa 5

app-routing.module.ts - Módulo de roteamento para o 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 { }

Aqui,

AppRoutingModule usa NativeScriptRouterModule e define as rotas do AppModule. Basicamente, ele redireciona o caminho vazio para / home e aponta o / home para o HomeModule.

Etapa 6

app \ home \ home.module.ts - Define um novo 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 { }

Aqui,

HomeModule importa dois módulos, HomeRoutingModule e NativeScriptCommonModule e um componente HomeComponent

Etapa 7

app \ home \ home.component.ts - define o componente Home e é usado como página inicial do aplicativo.

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

Aqui,

HomeComponent define o modelo e o seletor do componente inicial.

Etapa 8

app \ home \ home-routing.module.ts - Módulo de roteamento para HomeModule e usado para definir o roteamento para o módulo 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 { }

Aqui,

HomeRoutingModule define o caminho vazio para HomeComponent.

Etapa 9

app.component.html e home.component.html - Eles são usados ​​para projetar a IU do aplicativo usando componentes de IU NativeScript.

Execute seu aplicativo

Se você deseja executar seu aplicativo sem usar nenhum dispositivo, digite o comando abaixo -

tns preview

Depois de executar este comando, isso irá gerar um código QR para escanear e se conectar ao seu dispositivo.

Resultado

QRCode

Agora o código QR é gerado e se conecta ao PlayGround na próxima etapa.

NativeScript PlayGround

Abra o aplicativo NativeScript PlayGround em seu celular iOS ou Android e escolha a opção Ler código QR . Isso abrirá a câmera. Foque o código QR exibido no console. Isso fará a varredura do código QR. A leitura do código QR irá acionar a compilação do aplicativo e, em seguida, sincronizar o aplicativo com o dispositivo conforme fornecido abaixo -

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.

Resultado

Após a digitalização, você deve ver o BlankNgApp no ​​seu dispositivo. É mostrado abaixo -

Execute seu aplicativo no dispositivo

Se você quiser testar o dispositivo conectado em seu aplicativo, pode verificá-lo usando a sintaxe abaixo -

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

Depois disso, você pode executar seu aplicativo usando o comando abaixo -

tns run

O comando acima é usado para construir seus aplicativos localmente e instalar em dispositivos Andriod ou iOS. Se você deseja executar seu aplicativo em um simulador Android, digite o comando abaixo -

tns run android

Para dispositivos iOS, você pode seguir o comando abaixo -

tns run ios

Isso inicializará o aplicativo em um dispositivo Android / iOS. Discutiremos isso com mais detalhes nos próximos capítulos.

LiveSync

NativeScript fornece sincronização em tempo real de alterações no aplicativo para o aplicativo de visualização. Vamos abrir o projeto usando qualquer um dos seus editores favoritos (o Visual Studio Code seria a escolha ideal para uma melhor visualização). Vamos adicionar algumas mudanças em nosso código e ver como isso será detectado no LiveSync.

Agora abra o arquivo app.css e ele terá o conteúdo abaixo -

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

Aqui, a declaração de importação informa o esquema de cores do nosso aplicativo. Vamos mudar o esquema de cor azul para obrown esquema de cores conforme especificado abaixo -

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

O aplicativo em nosso dispositivo é atualizado e você deve ver uma ActionBar de cor marrom conforme mostrado abaixo -

Resultado

Abaixo está a página inicial do BlankNgApp - Tema marrom.

NativeScript fornece muitos modelos prontos para criar aplicativos simples em branco, mas totalmente funcionais, para aplicativos complexos baseados em Tab.

Usando modelo

Conforme aprendido anteriormente, um novo aplicativo pode ser criado usando create subcomando do comando tns.

tns create <app-name> --template <tns-template-name>

Aqui,

tns-template-name é o nome do modelo.

Se você deseja criar um modelo com uma página e sem estilos personalizados usando JavaScript, use o comando abaixo -

tns create <app-name> --template tns-template-blank

O mesmo modelo acima pode ser criado usando TypeScript da seguinte maneira -

tns create <app-name> --template tns-template-blank-ts

Modelo de Navegação

O modelo de navegação é usado para criar aplicativos moderados a complexos. Vem com pré-configuradoSideDrawer componente com várias páginas. SideDrawercomponente contém uma visão oculta para a IU de navegação ou configurações comuns. Use o comando abaixo para criar um aplicativo baseado em navegação -

tns create <app-name> --template tns-template-drawer-navigation

Modelo de navegação de guia

O modelo de navegação por guia é usado para criar aplicativos baseados em guias. Vem com pré-configuradoTabViewcomponente com várias páginas. Use o comando abaixo para criar um aplicativo baseado em guia -

tns create <app-name> --template tns-template-tab-navigation

Modelo de Detalhe Mestre

O modelo Master-Detail é usado para criar um aplicativo baseado em lista junto com a página de detalhes para cada item na lista.

tns create <app-name> --template tns-template-master-detail

Modelo Personalizado

Para criar um modelo personalizado simples, precisamos clonar modelos em branco. Como você já sabe, NativeScript oferece suporte a modelos JavaScript, TypeScript, Angular e Vue.js para que você possa escolher qualquer linguagem e criar uma linguagem personalizada.

Por exemplo, clone o modelo simples e personalizado do repositório git usando o comando abaixo -

git clone https://github.com/NativeScript/template-blank-ts.git

Agora, ele criará uma estrutura de aplicativo móvel para que você possa fazer qualquer alteração e executar seu dispositivo Android / iOS. Esta estrutura é baseada em lista de diretrizes. Vamos ver as diretrizes resumidamente.

Estrutura

Seu modelo personalizado deve atender aos seguintes requisitos -

  • Não coloque o código dentro da pasta raiz do aplicativo.

  • Crie uma pasta separada e adicione uma área de recurso dentro dela.

  • Página, modelos de visualização e serviço devem ser colocados na área de recurso. Isso ajuda a criar um código limpo e organizado.

  • Criar pasta página e coloque dentro Ts, .xml .scss / css, etc. , arquivos.

package.json

Coloque o arquivo package.json na pasta raiz do seu modelo de aplicativo. Forneça um valor para a propriedade de nome usando o formato -

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

Atribua um valor para a propriedade da versão. É definido abaixo -

"version": "3.2.1",

Atribua um valor para a propriedade principal especificando o ponto de entrada principal para seu aplicativo. É definido abaixo -

"main": "app.js",

Atribua um valor para a propriedade android. É definido abaixo -

"android": { 
   "v8Flags": "--expose_gc" 
},

A propriedade do repositório deve ser especificada dentro do seu código da seguinte maneira -

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

Estilo

Importe estilos e temas em seu modelo de aplicativo usando a sintaxe abaixo -

@import '~nativescript-theme-core/scss/light';

Também podemos atribuir cor de fundo personalizada usando o código abaixo -

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);

NativeScript fornece um grande conjunto de componentes de interface do usuário e são chamados de 'widgets'. Cada widget executa uma tarefa especial e vem com um conjunto de métodos. Vamos entender os widgets NativeScript em detalhes nesta seção.

Botão

O botão é um componente para executar a ação do evento de toque. Quando um usuário toca no botão, ele executa as ações correspondentes. É definido abaixo -

<Button text="Click here!" tap="onTap"></Button>

Vamos adicionar o botão em nosso BlankNgApp como abaixo -

Passo 1

Abra o src\app\home\home.component.html. Esta é a página de design da IU do nosso componente inicial.

Passo 2

Adicione um botão dentro do GirdLayoutcomponente. O código completo é o seguinte -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>

Resultado

Abaixo está a saída do botão -

etapa 3

Podemos estilizar o botão usando CSS conforme especificado abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>

Aqui, -primary classe é usada para representar o botão principal.

Resultado

Abaixo está a saída de ButtonPrimary -

Passo 4

NativeScript fornece opção formatada para fornecer ícones personalizados no botão. O código de amostra é o seguinte -

<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

Aqui,

& # xf099 especifica a localização do ícone na fonte, FontAwesome. Baixe a fonte Font Awesome mais recente e coloque o fontawesome-webfont.ttf na pasta src \ fonts.

Resultado

Abaixo está a saída de ButtonPrimary -

Etapa 5

O botão arredondado pode ser criado usando a sintaxe abaixo -

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

Resultado

Abaixo está a saída de ButtonPrimary -

Rótulo

O componente Label é usado para exibir texto estático. Altere a página inicial conforme abaixo -

<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>

Aqui, textWrap envolve o conteúdo do rótulo, se o rótulo se estender além da largura da tela.

Resultado

Abaixo está o resultado do Label -

Campo de texto

O componente TextField é usado para obter informações do usuário. Vamos mudar nossa página inicial conforme especificado abaixo -

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

Aqui,

  • cor representa a cor do texto

  • backgroundColor representa o fundo da caixa de texto

  • altura representa a altura da caixa de texto

Resultado

Abaixo está a saída do campo de texto -

TextView

O TextView Component é usado para obter conteúdo de texto de várias linhas do usuário. Vamos mudar nossa página inicial conforme especificado abaixo -

<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>

Aqui, maxLength representa o comprimento máximo aceito por TextView .

Resultado

Abaixo está a saída de TextView -

Barra de pesquisa

Este componente é usado para pesquisar qualquer consulta ou enviar qualquer solicitação. É definido abaixo -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>

Podemos aplicar estilos -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>

Abaixo está a saída de SearchBarStyle -

Interruptor

A troca é baseada na alternância para escolher entre as opções. O estado padrão é falso. É definido abaixo -

<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>

A saída para o programa acima é mostrada abaixo -

Slider

Slider é um componente deslizante para escolher um intervalo numérico. É definido abaixo -

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

A saída para o programa acima é fornecida abaixo -

Progresso

O widget de progresso indica o progresso de uma operação. O progresso atual é representado como uma barra. É definido abaixo -

<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

Abaixo está a saída do widget de progresso -

ActivityIndicator

ActivityIndicator mostra uma tarefa em andamento. É definido abaixo -

<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>

Abaixo está a saída para ActivityIndicator -

Imagem

O widget de imagem é usado para exibir uma imagem. Ele pode ser carregado usando o url 'ImageSource'. É definido abaixo -

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>

A saída do widget de imagem é mostrada abaixo -

WebView

WebView mostra páginas da web. As páginas da Web podem ser carregadas usando URL. É definido abaixo -

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

A saída para o código acima é mostrada abaixo -

DatePicker

O componente DatePicker é usado para escolher a data. É definido abaixo -

<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>

A saída do componente DatePicker é mostrada abaixo -

TimePicker

O componente TimePicker é usado para escolher a hora. É definido abaixo -

<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>

Abaixo está a saída do componente TimePicker -

NativeScript fornece coleção de componentes de contêiner com o único propósito de preparar o componente de widget de IU Os contêineres de layout atuam como o componente pai e podem ter um ou mais componentes filho. Todos os componentes filho de um contêiner de layout podem ser organizados com base na técnica fornecida por seu contêiner de layout pai.

NativeScript oferece suporte a seis contêineres de layouts e são os seguintes -

  • Contêiner de layout absoluto

  • Contêiner de layout de doca

  • Contêiner de layout de grade

  • Contêiner de layout de pilha

  • Contêiner de layout embrulhado

  • Contêiner de layout FlexBox

Vamos aprender todos os conceitos de contêiner de layout em detalhes neste capítulo.

Layout Absoluto

AbsoluteLayoutcontainer é o contêiner de layout mais simples em NativeScript. AbsoluteLayout não impõe nenhuma restrição em seus filhos e os colocará dentro dele usando o sistema de coordenadas bidimensional com o canto superior esquerdo como origem.

AbsoluteLayout usa quatro propriedades de seus filhos para posicioná-los e eles são os seguintes -

top - Define a colocação da criança desde a origem movendo-se para baixo na direção y.

left - Define a colocação da criança desde a origem movendo-se lateralmente na direção x.

width - Define a largura da criança.

height - Define a altura da criança.

Vamos adicionar o contêiner AbsoluteLayout na página inicial do nosso aplicativo conforme abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

Resultado

A saída do AbsoluteLayout é a fornecida abaixo -

DockLayout

DocklayoutO componente container permite que seus filhos se encaixem nele. Cada lado do contêiner (superior, inferior, esquerda, direita) pode encaixar um componente filho. O contêiner DockLayout usa a propriedade dock de seus filhos para encaixá-los corretamente.

Os valores possíveis da propriedade dock são os seguintes -

top - O contêiner de layout acopla o componente filho no canto superior.

bottom - O contêiner de layout acopla o componente filho no canto inferior.

left - O contêiner de layout acopla o componente filho no canto esquerdo.

right - O contêiner de layout acopla o componente filho no canto direito.

Por padrão, DockLayouto contêiner acopla seu último componente filho. Ele pode substituir definindo sua propriedade stretchLastChild como zero.

Vamos adicionar DockLayout container na página inicial do nosso aplicativo conforme abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

Resultado

Abaixo está a saída para DockLayout -

GridLayout

O componente de contêiner GridLayout é um dos contêineres de layout complexos e organiza os elementos filho em formato tabular com linhas e colunas. Por padrão, ele possui uma linha e uma coluna. Possui as seguintes propriedades -

columns- Usado para representar a largura padrão de cada coluna separada por,. Os valores possíveis são número, * e palavra-chave automática.

Onde,

  • número indica uma largura de coluna absoluta.

  • indica a largura de uma coluna em relação a outras colunas. Pode ser precedido por um número para indicar quantas vezes a largura da coluna deve ser em relação a outra coluna. Por exemplo, 2 * indica que a largura da coluna deve ser 2 vezes a largura da menor coluna.

  • auto indica a largura da coluna tanto quanto seu filho mais largo.

Por exemplo, *, 2 * significa duas colunas e a segunda terá o dobro do tamanho da primeira coluna.

rows - Usado para representar a altura padrão de cada linha separada por,. A representação do valor é semelhante às colunas.

GridLayout usa as propriedades especificadas abaixo de seus filhos para fazer o layout -

row - número da linha

col - número da coluna

rowSpan - número total de linhas que o conteúdo filho abrange em um layout.

colSpan - número total de colunas que o conteúdo filho abrange em um layout.

Vamos adicionar o contêiner GridLayout na página inicial do nosso aplicativo como abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

Resultado

Abaixo está a saída para GridLayout -

StackLayout

StackLayout organiza seus filhos em uma linha unidimensional horizontal ou verticalmente. Ele pode ser dimensionado com base no espaço no layout usando as opções de layout. Possui propriedade de orientação que pode ser usada para especificar a direção, horizontal ou vertical.

Vamos adicionar o contêiner StackLayout na página inicial do nosso aplicativo como abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

Resultado

A saída para StackLayout é mostrada abaixo -

WrapLayout

WrapLayout é usado para envolver o conteúdo em novas linhas ou colunas.

Ele tem as três propriedades a seguir -

orientation - exibir horizontalmente ou verticalmente.

itemWidth - largura do layout para cada criança.

itemHeight - altura do layout para cada criança.

Vamos adicionar o contêiner WrapLayout na página inicial do nosso aplicativo como abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

Resultado

Layout Flexbox

O componente de contêiner FlexboxLayout é um dos contêineres de layout avançado. Ele oferece a opção de renderizar layouts simples em layouts muito complexos e sofisticados. É baseado no CSS Flexbox.

O componente FlexboxLayout tem muitas propriedades e são as seguintes -

flexDirection

Ele representa a direção na qual os componentes filhos são organizados. Os valores possíveis de flexDirection são os seguintes -

row - Os componentes filhos são dispostos lado a lado.

row-reverse - Os componentes filhos são dispostos lado a lado, mas na direção inversa.

column - Os componentes filhos são organizados um abaixo do outro.

column-reverse - Os componentes filhos são organizados um abaixo do outro, mas na direção inversa.

Vamos adicionar o contêiner FlexLayout na página inicial do nosso aplicativo como abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Resultado

Abaixo está a saída de FlexLayout - Row -

Agora, vamos alterar o valor de flexDirection de linha para linha reversa e verificar como isso afeta o layout.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Resultado

Abaixo está a saída do Flex Layout - Row Reverse -

Vamos mudar o valor de flexDirection de linha reversa para coluna e verificar como isso afeta o layout.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Resultado

A saída para FlexLayout - coluna é fornecida abaixo -

Vamos alterar o valor flexDirection de coluna para coluna reversa e verificar como isso afeta o layout.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Resultado

Abaixo está a saída do FlexLayout - coluna reversa -

flexWrap

Ele representa se os componentes filhos serão renderizados em uma única linha / coluna ou fluirão em várias linhas ajustando na direção definida por flexDirection.

Os valores possíveis são os seguintes -

wrap - Envolve os componentes filhos, se nenhum espaço estiver disponível na direção fornecida (flexDirection).

wrap-reverse - O mesmo que embrulhar, exceto o fluxo do componente na direção oposta.

Vamos adicionar a propriedade flexWrap e definir seu valor como wrap. Além disso, adicione mais três filhos conforme especificado abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Resultado

Abaixo está a saída para flexWrap -

JustifyContent

Ele representa como os componentes filhos são organizados em relação uns aos outros e à estrutura geral. Possui três propriedades, conforme especificado abaixo -

flex-end - Empacota o componente filho em direção à linha final.

space-between - Embala o componente filho distribuindo uniformemente na linha.

space-around - Semelhante ao espaço entre, exceto que empacota o componente filho, distribuindo uniformemente em linha, bem como espaço igual ao redor deles.

Vamos adicionar justifyContent também e verificar como ele se comporta -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Resultado

Abaixo está a saída do Flex Layout - JustifyContent -

O contêiner FlexLayout fornece mais duas propriedades para seus filhos para especificar a ordem e a capacidade de redução. Eles são os seguintes -

order - Determina a ordem em que os filhos do contêiner FlexLayout serão renderizados.

flexShrink - Determina a capacidade das crianças de encolherem para o nível 0.

A navegação permite aos usuários deslizar rapidamente para a tela desejada, navegar por um aplicativo ou executar uma ação específica. O componente de navegação ajuda a implementar a navegação usando simples cliques de botão para padrões mais complexos.

A navegação difere substancialmente entre a versão principal e angular do NativeScript. Embora a navegação da estrutura principal seja a base do processo de navegação, o modelo Angular do NativeScript adota o conceito de navegação principal e o estende para torná-lo compatível com a estrutura Angular.

Vejamos o conceito de navegação central e a adoção angular da navegação neste capítulo.

Conceitos Básicos

Vamos entender como a navegação funciona no núcleo do NativeScript neste capítulo.

No NativeScript, a navegação é dividida em quatro categorias diferentes com base na direção em que se aplica, conforme especificado abaixo -

  • Navegação para frente

  • Navegação para trás

  • Navegação lateral

  • Navegação inferior

Navegação para frente

A navegação direta se refere à navegação dos usuários para a tela no próximo nível de hierarquia. É baseado em dois componentes NativeScript,Frame e Page.

Frame

Frame é o componente de nível raiz para navegação. Não é um contêiner visível, mas atua como um contêiner para as transições entre as páginas.

Um exemplo simples é o seguinte -

<Frame id="featured" defaultPage="featured-page" />

Aqui,

Frame navega (ou carrega) o componente da página em destaque e o renderiza.

Page

A página está próxima ao componente Frame e atua como um contêiner para o componente UI. Um exemplo simples é definido abaixo -

<Page loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <AbsoluteLayout> 
      <Label text="Label"/< 
      <Button text="navigate('another-page')" tap="onTap"/> 
   </AbsoluteLayout> 
</Page>

Aqui,

  • Inicialmente, Page carrega todos os componentes de IU da tela e os renderiza.

  • Quando o usuário clica no botão, ele o leva para another-page página.

Navegação para trás

O método de navegação para trás permite o movimento para trás nas telas de um aplicativo ou em diferentes aplicativos. É a direção oposta da navegação para a frente. O método goBack () simples é usado para navegar de volta à página anterior.

É definido abaixo -

<Page class="page" loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Back" tap="goBack"/> 
   </StackLayout> 
</Page>

Aqui,

goBack() método será acionado quando o usuário tocar no botão. goBack() leva os usuários à página anterior, se houver uma disponível.

Navegação Lateral

A navegação lateral se refere à navegação entre telas nos mesmos níveis de hierarquia. É baseado no padrão do hub. É ativado por meio de componentes de navegação específicos, como BottomNavigation, Tabs, TabView, SideDrawer e Modal View.

Um exemplo simples é definido como abaixo -

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd"> 
   <ActionBar title="Hub" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" /> 
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
   </StackLayout> 
</Page>

Aqui,

  • navigateToFeatured A função usa o método navigate () para navegar o usuário até a página em destaque.

  • Similarmente, navigateToSearch função irá navegar o usuário para a página de pesquisa.

A página do hub também pode ser acessada usando o método de navegação disponível na tela da página e pode-se sair da página do hub usando o método goBack ().

Um exemplo simples é o seguinte -

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

Navegação na parte inferior e na guia

O estilo mais comum de navegação em aplicativos móveis é a navegação baseada em guias. A navegação por guias é organizada na parte inferior da tela ou na parte superior, abaixo do cabeçalho. É conseguida usando TabView e BottomNavigation componente.

Navegação baseada em ângulo

NativeScript estende seu conceito de navegação para acomodar o conceito de roteamento angular. NativeScript fornece um novo módulo, NativeScriptRouterModule, estendendo o Angular RouterModule.

O conceito de navegação angular NativeScript pode ser categorizado nas seções abaixo -

  • tag page-router-outlet

  • nsRouterLink atraente

  • Classe RouterExtension

  • RouterReuseStrategy personalizado

Vamos aprender toda a navegação angular acima nesta seção.

Saída do roteador de página

Conforme aprendido anteriormente, a saída do roteador de página é a substituição da saída do roteador do Angular. page-router-outlet envolve a estratégia Frame e Page da estrutura de navegação central do Nativescript. Cada saída do roteador de página cria um novo componente Frame e cada componente configurado na saída será empacotado usando o componente Página. Em seguida, o método de navegação nativo é usado para navegar para outra página / rota.

Link do roteador (nsRouterLink)

nsRouterLink é a substituição do RouterLink da Angular. Ele permite que o componente de IU se vincule a outra página usando a rota. nsRouterLink também fornece duas opções abaixo -

pageTransition- É usado para definir a animação de transição de página. true ativa a transição padrão. false desativa a transição. Valores específicos como slide, fadein, etc., definem a transição particular.

clearHistory - true limpa o histórico de navegação de nsRouterLink.

Um exemplo de código simples é o seguinte -

<Button text="Go to Home" [nsRouterLink]="['/home']" 
   pageTransition="slide" clearHistory="true"></Button>

Extensão do roteador

NativeScript fornece a classe RouterExtensions e expõe a função de navegação do NativeScript principal.

Os métodos expostos por RouterExtensions são os seguintes -

  • navigate

  • navigateByUrl

  • back

  • canGoBack

  • backToPreviousPage

  • canGoBackToPreviousPage

Um exemplo de código simples usando RouterExtensions é o seguinte -

import { RouterExtensions } from "nativescript-angular/router"; 
@Component({ 
   // ... 
}) 
export class HomeComponent { 
   constructor(private routerExtensions: RouterExtensions) { } 
}

Estratégia de reutilização de rota personalizada

NativeScript usa uma estratégia de reutilização de rota personalizada (RouterReuseStrategy) para acomodar a arquitetura de um aplicativo móvel. Um aplicativo móvel difere em certos aspectos em comparação a um aplicativo da web.

Por exemplo, a página pode ser destruída em um aplicativo da web quando o usuário sai da página e a recria quando o usuário navega para a página. Mas, no aplicativo móvel, a página será preservada e reutilizada. Esses conceitos são levados em consideração ao projetar o conceito de roteamento.

Rotas

Um módulo de roteamento simples no aplicativo NativeScript Angular será o seguinte -

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
import { SearchComponent } from "./search.component"; 
const routes: Routes = [ 
   { path: "", redirectTo: "/home", pathMatch: "full" }, 
   { path: "home", component: HomeComponent }, 
   { path: "search", component: SearchComponent }, 
];
@NgModule({ 
   imports: [NativeScriptRouterModule.forRoot(routes)], 
   exports: [NativeScriptRouterModule] 
}) 
export class AppRoutingModule { }

Aqui,

O módulo de roteamento é muito semelhante à versão Angular, exceto algumas exceções. Na realidade, NativeScript usa sua estratégia de navegação central, expondo-a de maneira semelhante à estrutura Angular.

Em todos os aplicativos GUI, os eventos desempenham um papel muito importante para permitir a interação do usuário. Sempre que o usuário interagir com o aplicativo, um evento é disparado e uma ação correspondente será executada.

Por exemplo, quando o usuário clica no botão Login na página de login de um aplicativo, ele aciona o processo de login.

Os eventos envolvem dois atores -

  • Event sender - objeto, que gera o evento real.

  • Event listener - função, que escuta um determinado evento e, em seguida, é executada quando um evento é disparado.

Classe Observável

É uma classe pré-definida para lidar com eventos. É definido abaixo -

const Observable = require("tns-core-modules/data/observable").Observable;

Em NativeScript, quase todo objeto deriva da classe Observable e, portanto, todo objeto oferece suporte a eventos.

Listener de eventos

Vamos entender como criar um objeto e adicionar um ouvinte de evento ao objeto neste capítulo.

Passo 1

Crie um botão que é usado para gerar um evento conforme especificado abaixo -

const Button = require("tns-core-modules/ui/button").Button; 
const testButton = new Button();

Passo 2

Em seguida, adicione texto ao botão conforme especificado abaixo -

testButton.text = "Click";

etapa 3

Crie uma função, onTap conforme especificado abaixo -

let onTap = function(args) {
   console.log("you clicked!"); 
};

Passo 4

Agora anexe o evento tap à função onTap conforme especificado abaixo -

testButton.on("tap", onTap, this);

Uma maneira alternativa de adicionar um ouvinte de evento é a seguinte -

testButton.addEventListener("tap", onTap, this);

Etapa 5

Uma forma alternativa de anexar eventos é por meio da própria IU, conforme especificado abaixo -

<Button text="click" (tap)="onTap($event)"></Button>

Aqui,

$ event é do tipo EventData. EventData contém duas propriedades e são as seguintes -

Object- Instância observável que é usada para gerar um evento. Nesse cenário, é o objeto Botão.

EventName- É o nome do evento. Neste cenário, é um evento tap.

Etapa 6

Finalmente, um ouvinte de evento pode ser desanexado / removido a qualquer momento, conforme especificado abaixo -

testButton.off(Button.onTap);

Você também pode usar outro formato, conforme mostrado abaixo -

testButton.removeEventListener(Button.onTap);

Modificando BlankNgApp

Vamos modificar o aplicativo BlankNgApp para entender melhor os eventos em NativeScript.

Passo 1

Abra a IU do componente inicial, src/app/home/home.component.html e adicione o código abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

Aqui,

  • tap é o evento e Button é o gerador de eventos.

  • onButtonTap é o ouvinte de eventos.

Passo 2

Abra o código do componente inicial, ‘src/app/home/home.component.ts’ e atualize o código abaixo -

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@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. 
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

Aqui,

  • Adicionado novo ouvinte de evento, onButtonTap.

  • Imprima o nome do evento, toque e texto do botão, Dispare um evento no console.

etapa 3

Execute o aplicativo e toque no botão. Ele imprime a linha abaixo no console.

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event

A vinculação de dados é um dos conceitos avançados suportados pelo NativeScript. NativeScript segue o conceito de vinculação de dados Angular o mais próximo possível. A vinculação de dados permite que o componente UI mostre / atualize o valor atual do modelo de dados do aplicativo sem nenhum esforço de programação.

NativeScript oferece suporte a dois tipos de vinculação de dados. Eles são os seguintes -

One-Way data binding - Atualize a IU sempre que o modelo for alterado.

Two-Way data binding- Sincronize a IU e o modelo. Sempre que o modelo é atualizado, a IU é atualizada automaticamente e também sempre que a IU obtém dados do usuário (a IU é atualizada), o modelo será atualizado.

Vamos aprender os dois conceitos desta seção.

Vinculação de dados unilateral

NativeScript fornece uma opção simples para habilitar a vinculação de dados unilateral em um componente de IU. Para habilitar a vinculação de dados unilateral, basta adicionar colchetes na propriedade da IU de destino e, em seguida, atribuir a propriedade do modelo necessária.

Por exemplo, para atualizar o conteúdo de texto de um componente Label, basta alterar o código da IU conforme abaixo -

<Label [text]='this.model.prop' />

Aqui,

this.model.prop refere-se à propriedade do modelo, this.model.

Vamos mudar nosso BlankNgApp para entender a vinculação de dados unilateral.

Passo 1

Adicione um novo modelo, User (src / model / user.ts) da seguinte forma -

export class User { 
   name: string 
}

Passo 2

Abra a IU do nosso componente, src/app/home/home.component.html e atualize o código conforme abaixo -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto"> 
   <Button text="Click here to greet" class="-primary" color='gray' 
      (tap)='onButtonTap($event)' row='1' column='0'>
   </Button> 
   <Label [text]='this.user.name' row='2' column='0' 
      height="50px" textAlignment='center' style='font-size: 16px; 
      font-weight: bold; margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Aqui,

  • O texto do rótulo é definido como o nome da propriedade do modelo do usuário.

  • O evento de toque de botão é anexado ao método onButtonTap.

etapa 3

Código aberto do componente doméstico, src/app/home/home.component.ts e atualize o código conforme abaixo -

import { Component, OnInit } from "@angular/core"; 
import { User } from "../../model/user" 
@Component({
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   public user: User; 
   constructor() {
      // Use the component constructor to inject providers. 
      this.user = new User(); 
      this.user.name = "User1"; 
   }
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData) { 
      this.user.name = 'User2'; 
   } 
}

Aqui,

  • modelo de usuário é importado

  • O objeto do usuário é criado no construtor do componente

  • O evento onButtonTap é implementado. A implementação de onButtonTap atualiza o objeto Usuário e define o nome da propriedade como Usuário2

Passo 4

Compile e execute o aplicativo e clique no botão para alterar o modelo e ele irá alterar automaticamente o Label texto.

O estado inicial e final do aplicativo é o seguinte -

Estado inicial

O estado inicial de vinculação de dados unilateral é mostrado abaixo -

Estado Final

O estado final da vinculação de dados unilateral é mostrado abaixo -

Vinculação de dados bidirecional

NativeScript também fornece vinculação de dados bidirecional para funcionalidade avançada. Ele vincula os dados do modelo à IU e também vincula os dados atualizados na IU ao modelo.

Para fazer a vinculação de dados bidirecional, use a propriedade ngModel e, em seguida, coloque-a entre [] e () como abaixo -

<TextField [(ngModel)] = 'this.user.name'></TextField>

Vamos mudar o aplicativo BlankNgApp para entender melhor a vinculação de dados bidirecional.

Passo 1

Importe NativeScriptFormsModule para o HomeModule (src/app/home/home.module.ts) conforme especificado abaixo -

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"; 
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({ 
   imports: [ 
      NativeScriptCommonModule, 
      HomeRoutingModule, 
      NativeScriptFormsModule 
   ], 
   declarations: [ 
      HomeComponent 
   ], 
   schemas: [ 
      NO_ERRORS_SCHEMA 
   ]
}) 
export class HomeModule { }

Aqui,

NativeScriptFormsModule permite a vinculação de dados bidirecional. Caso contrário, a vinculação de dados bidirecional não funcionará conforme o esperado.

Passo 2

Altere a IU do componente inicial conforme fornecido abaixo -

<ActionBar> <Label text="Home"></Label></ActionBar> 
<GridLayout columns="*" rows="auto, auto"> 
   <TextField hint="Username" row='0' column='0' color="gray" 
      backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
   </TextField> 
   <Label [text]='this.user.name' row='1' column='0' height="50px" 
      textAlignment='center' style='font-size: 16px; font-weight: bold; 
      margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Aqui,

A propriedade de texto do componente Label é definida com vinculação de dados unilateral. Se o usuário do modelo for atualizado, sua propriedade de texto será atualizada automaticamente.

O componente TextField define o ngModel como this.user.name. Se o usuário do modelo for atualizado, sua propriedade de texto será atualizada automaticamente. Ao mesmo tempo, se o usuário alterar o valor do TextField, o modelo também será atualizado. Se o modelo for atualizado, ele também acionará as alterações nas propriedades de texto do Label. Portanto, se o usuário alterar os dados, eles serão mostrados na propriedade text do Label.

etapa 3

Execute o aplicativo e tente alterar o valor da caixa de texto.

O estado inicial e final do aplicativo será semelhante ao especificado abaixo -

Estado inicial

Ligação de dados bidirecional - o estado inicial é fornecido abaixo -

Estado Final

Ligação de dados bidirecional - o estado final é mostrado abaixo -

Um Módulo NativeScript contém um conjunto de funcionalidades relacionadas empacotadas como uma única biblioteca. Vamos aprender os módulos fornecidos pela estrutura NativeScript.

Ele contém as principais funcionalidades da estrutura NativeScript. Vamos entender os módulos principais deste capítulo.

Inscrição

O aplicativo contém uma implementação específica da plataforma do aplicativo móvel. Módulo de núcleo simples é definido abaixo -

const applicationModule = require("tns-core-modules/application");

Console

O módulo do console é usado para registrar mensagens. Possui os seguintes métodos -

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

configurações do aplicativo

O módulo de configurações do aplicativo contém um método para gerenciar as configurações do aplicativo. Para adicionar este módulo, precisamos adicionar o seguinte código -

const appSettings = require("tns-core-modules/application-settings");

Alguns métodos disponíveis na configuração do aplicativo são os seguintes -

  • setBoolean (key: string, value: boolean) - definir objeto booleano

  • setNumber (chave: string, valor: número) - definir objeto de número

  • setString (chave: string, valor: string) - define o objeto string

  • getAllKeys () - contém todas as chaves armazenadas

  • hasKey (key: string) - verifique se uma chave está presente ou não

  • limpar - limpa os valores armazenados

  • remove - remove qualquer entrada com base na chave.

Um exemplo simples usando a configuração do aplicativo é o seguinte -

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

Este módulo é usado para lidar com httpsolicitação e resposta. Para adicionar este módulo em seu aplicativo, adicione o seguinte código -

const httpModule = require("tns-core-modules/http");

Podemos enviar dados usando os seguintes métodos -

getString- É usado para fazer solicitações e baixar os dados da URL como string. É definido abaixo -

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON- É usado para acessar dados de JSON. É definido abaixo -

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage- baixa o conteúdo do URL especificado e retorna o objeto ImageSource. É definido abaixo -

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile - Possui dois argumentos URL e caminho de arquivo.

  • URL - baixa os dados.

  • File path- salvar dados de URL no arquivo. É definido abaixo -

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request- Possui argumento de opções. É usado para solicitar opções e retornar o objeto HttpResponse. É definido abaixo -

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

Fonte da imagem

O módulo de origem da imagem é usado para salvar a imagem. Podemos adicionar este módulo usando a declaração abaixo -

const imageSourceModule = require("tns-core-modules/image-source");

Se você deseja carregar imagens do recurso, use o código abaixo -

const imgFromResources = imageSourceModule.fromResource("icon");

Para adicionar imagem de arquivo local, use o comando abaixo -

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

Para salvar a imagem no caminho do arquivo, use o comando abaixo -

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

Cronômetro

Este módulo é usado para executar código em intervalos de tempo específicos. Para adicionar isso, precisamos usarrequire -

const timerModule = require("tns-core-modules/timer");

É baseado em dois métodos -

setTimeout- É usado para atrasar a execução. É representado como milissegundos.

setInterval - É usado para aplicar recorrentes em intervalos específicos.

Vestígio

Este módulo é útil para depuração. Ele fornece as informações de registro. Este módulo pode ser representado como -

const traceModule = require("tns-core-modules/trace");

Se você deseja habilitar em seu aplicativo, use o comando abaixo -

traceModule.enable();

ui / image-cache

O módulo de cache de imagem é usado para lidar com solicitações de download de imagem e imagens baixadas em cache. Este módulo pode ser representado conforme mostrado abaixo -

const Cache = require("tns-core-modules/ui/image-cache").Cache;

conectividade

Este módulo é usado para receber as informações de conexão da rede conectada. Pode ser representado como -

const connectivityModule = require("tns-core-modules/connectivity");

Módulos de Funcionalidade

Os módulos de funcionalidade incluem muitos módulos específicos do sistema / plataforma. Alguns dos módulos importantes são os seguintes -

platform- Usado para exibir as informações sobre o seu dispositivo. Pode ser definido conforme abaixo -

const platformModule = require("tns-core-modules/platform");

fps-meter- Usado para capturar quadros por segundo. Pode ser definido conforme abaixo -

const fpsMeter = require("tns-core-modules/fps-meter");

file-system- Usado para trabalhar com o sistema de arquivos do seu dispositivo. É definido abaixo -

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures - Usado para trabalhar com gestos de IU.

Módulo UI

O módulo de UI inclui o componente de UI e sua funcionalidade relacionada. Alguns dos módulos de IU importantes são os seguintes -

  • frame

  • page

  • color

  • text/formatted-string

  • xml

  • styling

  • animation

O pacote npm é usado para adicionar funcionalidade nativa. Usando este pacote, podemos instalar, pesquisar ou excluir quaisquer plug-ins. Esta seção explica os plug-ins em detalhes.

Comandos

add - É usado para instalar o plugin.

update - Atualiza o plugin especificado e modifica suas dependências.

remove - Remove o plugin.

build - É usado para construir plugins para projetos iOS ou Android.

create - Cria um plugin para seu projeto.

Adicionando Plugin

A sintaxe abaixo é usada para adicionar um novo plugin -

tns plugin add <plugin-name>

Por exemplo, se você deseja adicionar nativescript-barcodescanner, pode usar o seguinte código -

tns plugin add nativescript-barcodescanner

Você pode ver a seguinte resposta -

+ [email protected] 
added 1 package from 1 contributor and audited 11704 packages in 8.76s

Você também pode usar o módulo npm para adicionar o plugin acima -

npm install nativescript-barcodescanner

Agora, NativeScript CLI baixa o plugin do npm e adiciona dentro da pasta node_modules.

Se você deseja adicionar o plugin diretamente ao seu package.json e resolver todos os problemas de dependência, você pode usar o comando abaixo em vez do anterior -

npm i nativescript-barcodescanner

Se você deseja instalar dependências de desenvolvedor durante o desenvolvimento, use o código abaixo -

npm i tns-platform-declarations --save-dev

Aqui,

tns-platform-declarations é uma dependência do desenvolvedor necessária apenas para o intelliSense durante o processo de desenvolvimento.

Importando Plugins

Agora, nós instalamos nativescript-barcodescanner plugin. Deixe-nos adicionar dentro do seu projeto usando o comando abaixo -

const maps = require("nativescript-barcodescanner"); 
maps.requestPermissions();

Atualizando Plugins

Este método é usado para atualizar um plugin especificado para que ele desinstale o anterior e instale uma nova versão e modifique suas dependências. É definido abaixo -

tns plugin update <Plugin name version>

Removendo Plugin

Se você deseja remover o plugin, se não for necessário, você pode usar a sintaxe abaixo -

tns plugin remove <plugin-name>

Por exemplo, se você deseja remover o nativescript-google-maps-sdk instalado acima, use o comando abaixo -

tns plugin remove nativescript-barcodescanner

Você pode ver a seguinte resposta -

Successfully removed plugin nativescript-barcodescanner

Construindo Plugins

Ele é usado para construir os arquivos de projeto específicos do Android do plugin localizados em plataformas / android. Vamos construir o pugin nativescript-barcodescanner usando o comando abaixo -

tns plugin build nativescript-barcodescanner

Criando Plugins

Os plug-ins NativeScript são módulos JavaScript simples. Ele é definido dentro do arquivo src \ package.json do aplicativo. Este módulo é usado para criar um novo projeto para o desenvolvimento do plugin NativeScript. É definido abaixo -

tns plugin create <Plugin Repository Name> [--path <Directory>]

Esta seção explica sobre a visão geral do acesso a APIs nativas usando JavaScript.

Marshalling

O NativeScript Runtime fornece conversão de tipo implícita para plataformas Android e iOS. Esse conceito é conhecido como marshalling. Por exemplo, a paltform NativeScript-iOS pode converter implicitamente os tipos de dados JavaScript e Objective-C de maneira semelhante, Java / Kotlin pode ser facilmente mapeado para tipos e valores de projeto JavaScript. Vamos entender como realizar o marshalling em cada tipo um a um brevemente.

Valores Numéricos

Podemos converter facilmente os tipos de dados numéricos do iOS e do Android em números JavaScript. A conversão numérica simples para iOS em JavaScript é definida abaixo -

console.log(`max(7,9) = ${max(7,9)}`);

Aqui,

A função nativa max () é convertida em número JavaScript.

Ambiente Android

Java suporta diferentes tipos numéricos, como byte, short, int, float, double e long. JavaScript tem apenas tipo de número.

Considere uma classe Java simples mostrada abaixo -

class Demo extends java.lang.Object {
   public int maxMethod(int a,int b) {
      if(a>b) {
         return a;
      } else {
         return b;
      }
   }
}

Aqui,

O código acima contém dois argumentos inteiros. Podemos chamar o objeto de código acima usando JavaScript, conforme mostrado abaixo -

//Create an instance for Demo class 
var obj = new Demo(); 

//implicit integer conversion for calling the above method 
obj.maxMethod(7,9);

Cordas

As strings do Android são definidas em java.lang.string e as strings do iOS são definidas no NSSring. Vamos ver como realizar o marshalling em ambas as plataformas.

Android

Strings são imutáveis, mas os buffers de String suportam strings mutáveis.

O código abaixo é um exemplo de mapeamento simples -

//Create android label widget 
var label = new android.widget.Label(); 

//Create JavaScript string 
var str = "Label1";  

//Convert JavaScript string into java label.setText(str); 
// text is converted to java.lang.String

A classe booleana é definida em java.lang.Boolean. Esta classe envolve um valor booleano em um objeto. Podemos facilmente converter booleano em String e vice-versa. Um exemplo simples é definido conforme abaixo -

//create java string 
let data = new java.lang.String('NativeScript'); 

//map java String to JavaScript string, 
let result = data.startsWith('N'); 

//return result 
console.log(result);// true

ambiente iOS

A classe NSString é imutável, mas sua subclasse NSMutableString é imutável. Esta classe contém uma coleção de métodos para trabalhar com strings. É declarado como abaixo -

class NSString : NSObject

Considere uma declaração object-c simples como mostrado abaixo -

NSString *str = @"nativescript"; 
//convert the string to uppercase
NSString *str1; 
str1 = [str uppercaseString]; 
NSLog(@"Uppercase String : %@\n", str1 );

NSStrings podem ser facilmente mapeados para strings JavaScript.

Array

Esta seção explica como executar o marshalling em matrizes. Vamos primeiro dar um exemplo de ambiente iOS.

Declaração de Array

class NSArray : NSObject

Aqui,

NSArray é usado para gerenciar uma coleção ordenada de objetos chamados arrays. Ele é usado para criar um array estático. Sua subclasseNSMutableArray é usado para criar matrizes dinâmicas.

Considere que os objetos NSArray podem ser criados usando literais de matriz, conforme mostrado abaixo -

let array: NSArray = ["React","Vue","TypeScript"]

Agora, podemos mapear essa matriz em JavaScript, conforme mostrado abaixo -

//create native array 
let nsArr = NSArray.arrayWithArray("React","Vue","TypeScript"]); 

//create simple javascript array 
let jsArr = ["Hello,World","NativeScript"]; 

//Now compare the two arrays, 
let compare = nsArr.isEqual(jsArr); 
console.log(comapre);

Isso retornará a saída como falsa.

Declaração de array Android

Arrays Java são definidos em java.util.Arrays. Esta classe contém vários métodos para manipular matrizes. Um exemplo é mostrado abaixo -

//javascript array 
let data = [12,45,23,56,34,78,50]; 

//create java array 
let result = ns.example.Math.maxElement(data);
console.log(result);

Classes e objetos

Classes e objetos são conceitos básicos da Programação Orientada a Objetos. Classe é um protótipo definido pelo usuário. O objeto é uma instância de classe. Classe representa o conjunto de propriedades ou métodos comuns a todos os objetos de um tipo. Vamos entender as classes e objetos nativos para ambos os ambientes de desenvolvimento móvel.

Ambiente Android

As classes Java e Kotlin têm identificadores exclusivos indicados pelo nome completo do pacote.

Por exemplo,

android.view.View- É uma classe de interface de usuário básica para layout de tela e interação com o usuário. Podemos acessar esta classe em JavaScript conforme mostrado abaixo -

const View = android.view.View;

Primeiro, importamos a classe usando a instrução abaixo -

import android.view.View;

Em seguida, crie uma classe conforme fornecido abaixo -

public class MyClass {
   public static void staticMethod(context) {
      //create view instance
      android.view.View myview = new android.view.View(context);
   }
}

Na mesma classe acima, podemos acessar a função JavaScript usando o código abaixo -

const myview = new android.view.View(context);

Da mesma forma, podemos acessar interfaces, constantes e enumerações nos pacotes java.lang.

Ambiente iOS

As classes Objective-C são definidas em duas seções @interface e @implementation. A definição da classe começa com a palavra-chave@interface seguido pelo interface(class)nome. Em Objective-C, todas as classes são derivadas da classe base chamada NSObject.

É a superclasse de todas as classes Objective-C. A classe Simple Circle é definida conforme mostrado abaixo -

@interface Circle:NSObject {
   //Instance variable
   int radius;
}
@end

Considere uma classe com um método conforme mostrado abaixo -

@interface MyClass : NSObject 
+ (void)baseStaticMethod; 
@end

Esta classe pode ser convertida para javascript usando o código abaixo -

function MyClass() { /* native call */ }; 
Object.setPrototypeOf(MyClass, NSObject); 
BaseClass.baseStaticMethod = function () { /* native call */ };

JavaScript instanceofoperador é usado para verificar se um objeto herda de uma determinada classe. Isso pode ser definido como -

var obj = MyClass.alloc().init(); // object creation 
console.log(obj instanceof NSObject); //return true

Aqui,

Instâncias Objective-C são criadas usando aloc, init ou novos métodos. No exemplo acima, podemos criar facilmente a inicialização do objeto usando o novo método abaixo -

var obj = MyClass.new();

Da mesma forma, você pode acessar métodos e propriedades estáticos.

Criar e publicar seu aplicativo torna seu aplicativo Android disponível para todos os usuários. O Google Play é uma plataforma de publicação robusta. Ele ajuda você a publicar e distribuir seus aplicativos Android para todos os usuários em todo o mundo. Este capítulo explica como publicar seu aplicativo nativo no Google Play.

NativeScript Sidekick

SideKick é um cliente GUI e suporta todos os tipos de SO. Ele simplifica o processo NativeScript CLI e ajuda a criar aplicativos móveis.

Publique seu aplicativo do Sidekick no Google Play Console

Baixar e instalar o sidekick depende do seu sistema operacional. Siga as etapas abaixo para executar seu aplicativo no Sidekick.

Step 1: Launch Sidekick

Vamos lançar o Sidekick. É semelhante à imagem abaixo -

Step 2: Build your device

Agora, abra seu aplicativo em seu dispositivo e selecione a opção de construção na barra de ferramentas e selecione Android. Você receberá uma resposta semelhante à imagem abaixo -

Step 3: Properties

Clique na guia Propriedades e adicione sua configuração de Android. A tela é semelhante à abaixo -

Step 4: Plugins

O Sidekick ajuda a encontrar de quais plugins você depende para seu aplicativo. Clique na guia de plug-ins e ela listará o seguinte -

Step 5: Android Certificates

Clique no ícone da roda dentada no Android e escolha a opção de navegação e, em seguida, selecione um certificado armazenado em seu sistema de arquivos. É mostrado abaixo -

Depois de selecionar isso, feche a caixa de diálogo.

Step 6: Build your application

Por fim, clique na opção de compilação local no tipo de compilação e selecione a opção de liberação na configuração. Depois disso, crie seu aplicativo.

Step 7: Application package

Assim que a compilação for concluída, ele irá gerar um caminho e apkArquivo. Salve a localização do pacote do aplicativo. Este arquivo apk é usado para fazer o upload para a Google Play Store.

Step 8: Publish in Google Play

Selecione a opção de publicação na barra de ferramentas e selecione Google Play. Em seguida, adicione a caixa de diálogo Gerenciar certificados do Android para Google Play Store. É mostrado abaixo -

Depois disso, selecione o tipo de compilação e forneça a chave JSON da conta de serviço, em seguida, selecione Alpha, Beta ou faixas de produção e, por fim, clique em upload.

Publique seu aplicativo no Google Play

Para publicar seu aplicativo no console do Google Play, você deve atender aos seguintes pré-requisitos.

Pré-requisitos

  • Você deve estar registrado no Google Play

  • Você tem uma identidade de assinatura de código autoassinada válida do Google Play

Procedimento para publicar seu aplicativo

As etapas abaixo são úteis para entender como lançar seu aplicativo na Google Play Store.

Step 1: Login Google Play console

Abra o console do Google Play e faça login com sua conta.

Step 2: Create an app

Vá para a guia Todos os aplicativos e clique em Criar aplicativo e crie um novo aplicativo. Agora, adicione o idioma padrão, o título do aplicativo finalmente clique em continuar para ir mais longe.

Step 3: Fill required fields

Vá para a guia de listagem da loja e preencha os campos obrigatórios, em seguida, preencha os ativos necessários e salve todas as alterações.

Step 4: Price and distribution

Vá para a guia Preço e distribuição, conclua todas as configurações e salve todas as alterações.

Step 5: Release your app

Escolha a guia Versões de aplicativos e selecione Alfa, Beta. Ele é usado para testar seu aplicativo. E selecione faixas de produção. Ele é usado para publicar seu aplicativo no Google Play. Finalmente, adicione o pacote do aplicativo (apk).

Step 6: Review your app

Esta é sua etapa final. Na revisão, verifique se há algum problema. Se não houver problemas, confirme o lançamento para publicar seu aplicativo.

Este capítulo explica como publicar seu aplicativo nativo na App Store. Siga as etapas abaixo para publicar seu aplicativo.

Pré-requisitos

Para fazer isso, você precisa dos seguintes pré-requisitos -

  • Certificado para distribuição

  • Perfil de provisionamento de distribuição

  • ID de pacote registrado no iOS Dev Center

  • Registro de aplicativo no iTunes Connect

Etapas para publicar seu aplicativo

Abaixo estão as etapas para publicar seu aplicativo -

Etapa 1: Abra NativeScript Sidekick

Inicie o NativeScript Sidekick e abra seu aplicativo no Sidekick.

Etapa 2: Selecione a publicação

Vá para a barra de ferramentas e selecione a opção de publicação na barra de ferramentas. É mostrado abaixo -

Agora, selecione a opção Apple App Store. É semelhante à imagem abaixo -

Etapa 3: gerenciar aprovisionamento e certificados do iOS

Clique no ícone de roda dentada da Apple App Store, escolha a opção de navegação e adicione os detalhes.

Etapa 4: construir seu aplicativo

Em seguida, clique na opção de construção e construa seu aplicativo e espere até que o processo seja concluído.

Etapa 5: fornecer credenciais

Esta é sua etapa final. Especifique o nome de usuário e a senha da Apple em sua conta, clique em upload e verifique a mensagem de confirmação. Se você deseja enviar seu aplicativo para análise, acesse o iTunes Connect e envie-o.

O teste é uma fase muito importante no ciclo de vida de desenvolvimento de um aplicativo. Garante a qualidade da aplicação. Precisa de planejamento e execução cuidadosos. É também a fase mais demorada do desenvolvimento. A estrutura NativeScript fornece um amplo suporte para o teste automatizado de um aplicativo.

Tipos de teste

Geralmente, três tipos de processos de teste estão disponíveis para testar um aplicativo. Eles são os seguintes -

Teste de Unidade

O teste de unidade é o método mais fácil de testar um aplicativo. Baseia-se em garantir a correção de um trecho de código (uma função, em geral) ou de um método de uma classe. Mas, ele não reflete o ambiente real e posteriormente. É a menor opção para encontrar os bugs.

Geralmente, NativeScript usa as estruturas de teste de unidade Jasmine, Mocha com Chai e QUnit.

Para fazer isso, primeiro você precisa configurar em seu projeto usando o comando abaixo -

tns test init

Agora, você obtém a seguinte resposta -

? Select testing framework: (Use arrow keys) 
> jasmine 
   mocha 
   qunit

Agora, selecione jasmine estrutura e sua tela é semelhante a esta -

? Select testing framework: jasmine 
+ [email protected] 
added 90 packages from 432 contributors and audited 11944 packages in 8.753s 

+ [email protected] 
added 2 packages from 1 contributor and audited 11946 packages in 7.299s 

> [email protected] postinstall 
/Users/workspace/NativeScript/NativeApp/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript standard library! 
The project needs your help! Please consider supporting of core-js on Open 
Collective or Patreon:

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) is looking for a 
good job -) 
npm WARN [email protected] requires a peer of webpack@^2.0.0 
|| ^3.0.0 but none is installed. You must install peer dependencies yourself. 

+ [email protected] 
added 19 packages from 52 contributors and audited 12012 packages in 9.368s 

+ [email protected] 
added 2 packages from 35 contributors and audited 12014 packages in 6.925s 

+ [email protected] 
updated 1 package and audited 12014 packages in 7.328s 
+ @types/[email protected] 

> [email protected] postinstall /Users/deiva/workspace/NativeScript/NativeApp/node_modules/nativescript-unit
-test-runner 

> node postinstall.js 
+ [email protected] 

added 1 package from 1 contributor and audited 12032 packages in 7.14s 
Successfully installed plugin nativescript-unit-test-runner. 

Example test file created in src/tests 
Run your tests using the "$ tns test <platform>" command.

Agora, o arquivo de teste é criado dentro de src \ tests \ example.ts.

Crie seus testes

Vamos adicionar um teste simples dentro do arquivo example.ts como mostrado abaixo -

describe("NativeApp test:", function() { 
   it("Check counter.", function() { 
      expect(mainViewModel.createViewModel().counter).toEqual(10); 
   }); 
   it("Check message.", function () { 
      expect(mainViewModel.createViewModel().message).toBe("10 taps left"); 
   }); 
});

Aqui,

Primeiro, verifique se o contador é igual a 10 e verifique se faltam 10 toques para a mensagem.

Deixe-nos executar o teste na próxima etapa.

Execute seus testes

Agora, execute o teste no dispositivo conectado com Android ou iOS usando o comando abaixo -

tns test android

Isso retornará o seguinte status -

? To continue, choose one of the following options: (Use arrow keys) 
> Configure for Cloud Builds 
   Configure for Local Builds 
   Configure for Both Local and Cloud Builds 
   Skip Step and Configure Manually

Em seguida, escolha a opção abaixo -

? To continue, choose one of the following options: Configure for Local Builds 
Running the setup script to try and automatically configure your environment. 
These scripts require sudo permissions 
.....

Para executar seu conjunto de testes no simulador Android, execute o seguinte comando -

tns test android --emulator

Agora, o karma server prepara builds e implanta seu projeto.

Teste de ponta a ponta (E2E)

Os testes de unidade são processos pequenos, simples e rápidos, enquanto na fase de teste E2E, vários componentes estão envolvidos e funcionam juntos, cobrindo os fluxos no aplicativo. Isso não poderia ser alcançado por testes de unidade e integração.

NativeScript Appiumplugin é usado para realizar testes de automação E2E. Bem, Appium é uma estrutura de teste de código aberto para aplicativos móveis. Para adicionar esta estrutura em seu projeto, você deve ter a versão mais recente do XCode ou Android SDK acima de 25.3.0.

Instale Appium

Vamos instalar o Appium globalmente usando o módulo npm -

npm install -g appium

Agora, você pode ver a seguinte resposta -

npm install -g appium 
/Users/.npm-global/bin/authorize-ios -> 
/Users/.npm-global/lib/node_modules/ appium/node_modules/.bin/authorize-ios 

> [email protected] install 
/Users/.npm-global/lib/node_modules/ appium/node_modules/appium-windows-driver

> node install-npm.js 
Not installing WinAppDriver since did not detect a Windows system 

> [email protected] postinstall /Users/.npm-
global/lib/node_modules/appium/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript 
standard library! 
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) 
is looking for a good job -) 

> [email protected] postinstall/Users/.npm-
global/lib/node_modules/appium/node_modules 
/appium-chromedriver 

> node install-npm.js 
............................................ 
............................................. 
+ [email protected] 
added 671 packages from 487 contributors in 28.889s

Adicionar Plugin

Vamos adicionar nativescript-dev-appium plugin como um devDependency para o seu projeto usando o comando abaixo -

$ npm install -D nativescript-dev-appium

Depois de executar isso, escolha mocha estrutura e você obterá uma resposta semelhante a esta -

> node ./postinstall.js 
? What kind of project do you use
? javascript ? Which testing framework do you prefer? mocha 
+ [email protected]

Agora, os arquivos são armazenados dentro da pasta do projeto.

Construa seu dispositivo

Vamos construir um dispositivo Android usando o comando abaixo -

tns build android

O comando acima irá executar os testes e deve especificar os recursos desejados. Se você tem um dispositivo iOS, pode construir usandoiOS dispositivo.

Teste de corrida

Agora, configuramos o dispositivo. Vamos executar nosso teste usando o comando abaixo -

npm run e2e -- --runType <capability-name>

Aqui,

nome-da-capacidade é definido dentro de seu aplicativo e2e/config/appium.capabilities.json.

Resultado

NativeScript - Conclusão

NativeScript é um ótimo aplicativo móvel para desenvolvedores da web testarem seus aplicativos completamente de uma maneira muito fácil, sem colocar esforços extras. Os desenvolvedores podem desenvolver com segurança um aplicativo atraente e bem-sucedido sem nenhum problema em um curto período de tempo.