NativeScript - Aplicativo Angular
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 de 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. Visto 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 projetos 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 aplicativos 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 "[email protected]/theme/css/core.css";
@import "[email protected]/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */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 conectado ao PlayGround na próxima etapa.
NativeScript PlayGround
Abra o aplicativo NativeScript PlayGround no seu celular iOS ou Android e escolha a opção Digitalizar 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 indicado 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 quiser testar o dispositivo conectado em seu aplicativo, você 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 "[email protected]/theme/css/core.css";
@import "[email protected]/theme/css/blue.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */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 "[email protected]/theme/css/core.css";
@import "[email protected]/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */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.
