NativeScript - Ứng dụng Angular
Hãy để chúng tôi tạo một ứng dụng đơn giản để hiểu quy trình làm việc của ứng dụng NativeScript.
Tạo ứng dụng
Hãy để chúng tôi tìm hiểu cách tạo ứng dụng đơn giản bằng NativeScript CLI, tns. tns cung cấp một lệnh create được sử dụng để tạo một dự án mới trong NativeScript.
Cú pháp cơ bản để tạo một ứng dụng mới như sau:
tns create <projectname> --template <template_name>
Ở đâu,
Projectname là Tên của dự án.
template_namelà mẫu Dự án. NativeScript cung cấp rất nhiều mẫu khởi động để tạo các loại ứng dụng khác nhau. Sử dụng mẫu dựa trên Angular.
Hãy để chúng tôi tạo một thư mục mới có tên NativeScriptSamples để làm việc trên ứng dụng mới của chúng tôi. Bây giờ, hãy mở một thiết bị đầu cuối mới, sau đó chuyển đến thư mục của chúng ta và gõ lệnh dưới đây:
tns create BlankNgApp --template tns-template-blank-ng
Ở đâu, tns-template-blank-ng đề cập đến một ứng dụng di động trống dựa trên AngularJS.
Đầu ra
.....
.....
.....
Project BlankNgApp was successfully created.
Now you can navigate to your project with $ cd BlankNgApp
After that you can preview it on device by executing $ tns preview
Bây giờ, ứng dụng di động đầu tiên của chúng tôi, BlankNgApp đã được tạo ra.
Cấu trúc của ứng dụng
Hãy để chúng tôi hiểu cấu trúc của ứng dụng NativeScript bằng cách phân tích ứng dụng BlankNgApp đầu tiên của chúng tôi trong chương này. Ứng dụng NativeScript được tổ chức thành nhiều phần và chúng như sau:
Phần cấu hình
Mô-đun nút
Nguồn Android
Nguồn iOS
Mã nguồn ứng dụng
Cấu trúc chung của ứng dụng như sau:
│ angular.json
│ LICENSE
│ nsconfig.json
│ package-lock.json
│ package.json
│ tsconfig.json
│ tsconfig.tns.json
│ tsfmt.json
│ webpack.config.js
│
├───App_Resources
│ ├───Android
│ │
│ └───iOS
│
├───hooks
│
├───node_modules
|
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.ts
Hãy cho chúng tôi hiểu từng phần của ứng dụng và cách nó giúp chúng tôi tạo ứng dụng của mình.
Phần cấu hình
Tất cả các tệp trong thư mục gốc của ứng dụng đều là tệp cấu hình. Định dạng của các tệp cấu hình ở định dạng JSON, giúp nhà phát triển dễ dàng hiểu chi tiết cấu hình. Ứng dụng NativeScript dựa vào các tệp này để lấy tất cả thông tin cấu hình có sẵn. Hãy để chúng tôi xem qua tất cả các tệp cấu hình trong phần này.
package.json
Các tệp package.json đặt danh tính (id) của ứng dụng và tất cả các mô-đun mà ứng dụng phụ thuộc vào để hoạt động bình thường. Dưới đây là package.json của chúng tôi -
{
"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"
}
Đây,
Identity of the application (nativescript/id)- Đặt id của ứng dụng là org.nativescript.BlankNgApp. Id này được sử dụng để xuất bản ứng dụng của chúng tôi lên Cửa hàng Play hoặc iTunes. Id này sẽ là Mã định danh ứng dụng hoặc Tên gói của chúng tôi.
Dependencies (dependencies)- Chỉ định tất cả các mô-đun nút phụ thuộc của chúng tôi. Vì, việc triển khai NativeScript mặc định phụ thuộc vào Angular Framework, các mô-đun Angular được bao gồm.
Development dependencies- Chỉ định tất cả các công cụ mà ứng dụng phụ thuộc vào. Vì, chúng tôi đang phát triển ứng dụng của mình trong TypeScript, nó bao gồm các chữ viết như một trong những mô-đun phụ thuộc.
angular.json - Thông tin cấu hình khung Angular.
nsconfig.json - Thông tin cấu hình khung NativeScript.
tsconfig.json, tsfmt.json & tsconfig.tns.json - Thông tin cấu hình ngôn ngữ TypeScript
webpack.config.js - Cấu hình WebPack viết bằng JavaScript.
Mô-đun nút
Vì dự án NativeScript là dự án dựa trên nút, nên nó lưu trữ tất cả các phụ thuộc của nó trong thư mục node_modules. Chúng ta có thể sử dụng npm (npm install) hoặc tns để tải xuống và cài đặt tất cả các ứng dụng phụ thuộc vào node_moduels.
Mã nguồn Android
NativeScript tự động tạo mã nguồn android và đặt nó vào thư mục App_Resources \ Android. Nó sẽ được sử dụng để tạo ứng dụng Android bằng Android SDK
mã nguồn iOS
NativeScript tự động tạo mã nguồn iOS và đặt nó vào thư mục App_Resources \ iOS. Nó sẽ được sử dụng để tạo ứng dụng iOS bằng iOS SDK và XCode
Mã nguồn ứng dụng
Mã ứng dụng thực tế được đặt trong thư mục src. Ứng dụng của chúng tôi có các tệp bên dưới trong thư mục src.
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.ts
Hãy cho chúng tôi hiểu mục đích của tất cả các tệp và cách chúng được tổ chức trong phần này -
Bước 1
main.ts - Điểm đầu vào của ứng dụng.
// 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);
Ở đây, chúng tôi đã đặt AppModule làm mô-đun khởi động của ứng dụng.
Bước 2
app.css - Biểu định kiểu chính của ứng dụng như hình dưới đây -
@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. */
Đây,
app.css nhập biểu định kiểu cốt lõi và biểu định kiểu chủ đề màu nâu của khung NativeScript.
Bước 3
app \ app.module.ts - Mô-đun gốc của ứng dụng.
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 { }
Đây,
AppModule được tạo dựa trên NgModule và thiết lập các thành phần và mô-đun của ứng dụng. Nó nhập hai mô-đun NativeScriptModule và AppRoutingModule và một thành phần, AppComponent. Nó cũng đặt AppComponent làm thành phần gốc của ứng dụng.
Bước 4
app.component.ts - Thành phần gốc của ứng dụng.
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }
Đây,
AppComponent đặt mẫu và biểu định kiểu của thành phần. Mẫu được thiết kế bằng HMTL đơn giản bằng cách sử dụng các thành phần NativeScript UI.
Bước 5
app-routing.module.ts - Mô-đun định tuyến cho 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 { }
Đây,
AppRoutingModule sử dụng NativeScriptRouterModule và đặt các tuyến của AppModule. Về cơ bản, nó chuyển hướng đường dẫn trống đến / home và trỏ / home đến HomeModule.
Bước 6
app \ home \ home.module.ts - Xác định một mô-đun mới, 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 { }
Đây,
HomeModule nhập hai mô-đun, HomeRoutingModule và NativeScriptCommonModule và một thành phần HomeComponent
Bước 7
app \ home \ home.component.ts - Xác định thành phần Trang chủ và được sử dụng làm trang chủ của ứng dụng.
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.
}
}
Đây,
HomeComponent đặt mẫu và bộ chọn của thành phần chính.
Bước 8
app \ home \ home-routing.module.ts - Mô-đun định tuyến cho HomeModule và được sử dụng để xác định định tuyến cho mô-đun chính.
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 { }
Đây,
HomeRoutingModule đặt đường dẫn trống đến HomeComponent.
Bước 9
app.component.html và home.component.html - Chúng được sử dụng để thiết kế giao diện người dùng của ứng dụng bằng các thành phần giao diện người dùng NativeScript.
Chạy ứng dụng của bạn
Nếu bạn muốn chạy ứng dụng của mình mà không cần sử dụng bất kỳ thiết bị nào, hãy nhập lệnh dưới đây:
tns preview
Sau khi thực hiện lệnh này, thao tác này sẽ tạo mã QR để quét và kết nối với thiết bị của bạn.
Đầu ra
QRCode
Bây giờ mã QR được tạo và kết nối với PlayGround trong bước tiếp theo.
NativeScript PlayGround
Mở ứng dụng NativeScript PlayGround trên thiết bị di động iOS hoặc Android của bạn, sau đó chọn tùy chọn Quét mã QR . Nó sẽ mở máy ảnh. Lấy nét mã QR được hiển thị trên bảng điều khiển. Thao tác này sẽ quét Mã QR. Quét mã QR sẽ kích hoạt xây dựng ứng dụng và sau đó đồng bộ hóa ứng dụng với thiết bị như bên dưới -
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.
Đầu ra
Sau khi quét, bạn sẽ thấy BlankNgApp trên thiết bị của mình. Nó được hiển thị bên dưới -
Chạy ứng dụng của bạn trên thiết bị
Nếu bạn muốn kiểm tra thiết bị được kết nối trong ứng dụng của mình, bạn có thể xác minh thiết bị đó bằng cú pháp bên dưới:
'tns device <Platform> --available-devices'
Sau đó, bạn có thể thực thi ứng dụng của mình bằng lệnh dưới đây:
tns run
Lệnh trên được sử dụng để xây dựng ứng dụng của bạn cục bộ và cài đặt trên thiết bị Andriod hoặc iOS. Nếu bạn muốn chạy ứng dụng của mình trên trình mô phỏng Android, hãy nhập lệnh dưới đây:
tns run android
Đối với thiết bị iOS, bạn có thể làm theo lệnh dưới đây:
tns run ios
Thao tác này sẽ khởi chạy ứng dụng trong thiết bị Android / iOS. Chúng ta sẽ thảo luận chi tiết hơn về vấn đề này trong các chương sắp tới.
LiveSync
NativeScript cung cấp tính năng đồng bộ hóa các thay đổi trong ứng dụng theo thời gian thực với ứng dụng xem trước. Hãy để chúng tôi mở dự án bằng bất kỳ trình soạn thảo yêu thích nào của bạn (Mã Visual Studio sẽ là lựa chọn lý tưởng để hiển thị tốt hơn). Hãy để chúng tôi thêm một số thay đổi trong mã của chúng tôi và xem điều đó sẽ được phát hiện như thế nào trong LiveSync.
Bây giờ hãy mở tệp app.css và nó sẽ có nội dung bên dưới:
@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. */
Tại đây, câu lệnh nhập cho biết bảng màu của ứng dụng của chúng tôi. Hãy thay đổi bảng màu xanh lam thànhbrown bảng màu như được chỉ định bên dưới -
@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. */
Ứng dụng trong thiết bị của chúng tôi được làm mới và bạn sẽ thấy ActionBar màu nâu như hình dưới đây -
Đầu ra
Dưới đây là Trang chủ BlankNgApp - Chủ đề Màu nâu.