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 --versionVocê 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 nativescriptDepois 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 -
tnsIsso 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 doctorIsso 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-ngOnde, 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 previewAgora, 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.tsVamos 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.tsVamos 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 previewDepois 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 runO 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 androidPara dispositivos iOS, você pode seguir o comando abaixo -
tns run iosIsso 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-blankO mesmo modelo acima pode ser criado usando TypeScript da seguinte maneira -
tns create <app-name> --template tns-template-blank-tsModelo 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-navigationModelo 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-navigationModelo 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-detailModelo 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.gitAgora, 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="" 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
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 eventA 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-barcodescannerVocê pode ver a seguinte resposta -
+ [email protected]
added 1 package from 1 contributor and audited 11704 packages in 8.76sVocê também pode usar o módulo npm para adicionar o plugin acima -
npm install nativescript-barcodescannerAgora, 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-barcodescannerSe você deseja instalar dependências de desenvolvedor durante o desenvolvimento, use o código abaixo -
npm i tns-platform-declarations --save-devAqui,
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-barcodescannerVocê pode ver a seguinte resposta -
Successfully removed plugin nativescript-barcodescannerConstruindo 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-barcodescannerCriando 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.StringA 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);// trueambiente 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 : NSObjectConsidere 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 : NSObjectAqui,
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;
}
@endConsidere uma classe com um método conforme mostrado abaixo -
@interface MyClass : NSObject
+ (void)baseStaticMethod;
@endEsta 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 trueAqui,
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 initAgora, você obtém a seguinte resposta -
? Select testing framework: (Use arrow keys)
> jasmine
mocha
qunitAgora, 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 androidIsso 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 ManuallyEm 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 --emulatorAgora, 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 appiumAgora, 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.889sAdicionar Plugin
Vamos adicionar nativescript-dev-appium plugin como um devDependency para o seu projeto usando o comando abaixo -
$ npm install -D nativescript-dev-appiumDepois 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 androidO 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.