NativeScript - แอปพลิเคชันเชิงมุม
ให้เราสร้างแอปพลิเคชันกระดูกเปลือยง่ายๆเพื่อทำความเข้าใจขั้นตอนการทำงานของแอปพลิเคชัน NativeScript
การสร้างแอปพลิเคชัน
ให้เราเรียนรู้วิธีสร้างแอปพลิเคชันง่ายๆโดยใช้ NativeScript CLI, tns tns จัดเตรียมคำสั่ง create เพื่อใช้ในการสร้างโปรเจ็กต์ใหม่ใน NativeScript
ไวยากรณ์พื้นฐานในการสร้างแอปพลิเคชันใหม่มีดังต่อไปนี้ -
tns create <projectname> --template <template_name>
ที่ไหน
Projectname คือชื่อของโครงการ
template_nameคือเทมเพลตโครงการ NativeScript มีเทมเพลตเริ่มต้นจำนวนมากเพื่อสร้างแอปพลิเคชันประเภทต่างๆ ใช้เทมเพลตเชิงมุม
ให้เราสร้างไดเร็กทอรีใหม่ชื่อ NativeScriptSamples เพื่อทำงานกับแอปพลิเคชันใหม่ของเรา ตอนนี้เปิดเทอร์มินัลใหม่จากนั้นย้ายไปที่ไดเร็กทอรีของเราและพิมพ์คำสั่งด้านล่าง -
tns create BlankNgApp --template tns-template-blank-ng
ที่ไหน tns-template-blank-ng หมายถึงแอปพลิเคชันมือถือเปล่าที่ใช้ AngularJS
เอาต์พุต
.....
.....
.....
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
ตอนนี้แอปพลิเคชันมือถือแรกของเราBlankNgAppถูกสร้างขึ้น
โครงสร้างของแอปพลิเคชัน
ให้เราเข้าใจโครงสร้างของแอปพลิเคชัน NativeScript โดยการวิเคราะห์ BlankNgApp แอปพลิเคชันแรกของเราในบทนี้ แอปพลิเคชัน NativeScript ถูกจัดระเบียบเป็นหลายส่วนและมีดังนี้ -
ส่วนการกำหนดค่า
โมดูลโหนด
แหล่งที่มาของ Android
แหล่งที่มาของ iOS
ซอร์สโค้ดของแอปพลิเคชัน
โครงสร้างทั่วไปของแอปพลิเคชันมีดังนี้ -
│ 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
ให้เราเข้าใจแต่ละส่วนของแอปพลิเคชันและวิธีที่ช่วยในการสร้างแอปพลิเคชันของเรา
ส่วนการกำหนดค่า
ไฟล์ทั้งหมดในรูทของแอ็พพลิเคชันคือไฟล์คอนฟิกูเรชัน รูปแบบของไฟล์คอนฟิกูเรชันอยู่ในรูปแบบ JSON ซึ่งช่วยให้นักพัฒนาเข้าใจรายละเอียดการกำหนดค่าได้ง่าย แอปพลิเคชัน NativeScript อาศัยไฟล์เหล่านี้เพื่อรับข้อมูลการกำหนดค่าที่มีอยู่ทั้งหมด ให้เราดูไฟล์การกำหนดค่าทั้งหมดในส่วนนี้
package.json
ไฟล์ package.json ตั้งค่าเอกลักษณ์ (id) ของแอปพลิเคชันและโมดูลทั้งหมดที่แอปพลิเคชันขึ้นอยู่กับการทำงานที่เหมาะสม ด้านล่างนี้คือ 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"
}
ที่นี่
Identity of the application (nativescript/id)- ตั้งค่า id ของแอปพลิเคชันเป็น org.nativescript.BlankNgApp รหัสนี้ใช้เพื่อเผยแพร่แอปของเราไปยัง Play Store หรือ iTunes รหัสนี้จะเป็นตัวระบุแอปพลิเคชันหรือชื่อแพ็กเกจ
Dependencies (dependencies)- ระบุโมดูลโหนดที่เกี่ยวข้องทั้งหมดของเรา เนื่องจากการใช้งาน NativeScript เริ่มต้นขึ้นอยู่กับ Angular Framework จึงรวมโมดูล Angular ไว้ด้วย
Development dependencies- ระบุเครื่องมือทั้งหมดที่แอปพลิเคชันขึ้นอยู่ เนื่องจากเรากำลังพัฒนาแอปพลิเคชันของเราใน TypeScript จึงมี typescript เป็นหนึ่งในโมดูลที่ต้องพึ่งพา
angular.json - ข้อมูลการกำหนดค่ากรอบเชิงมุม
nsconfig.json - ข้อมูลการกำหนดค่ากรอบงาน NativeScript
tsconfig.json, tsfmt.json & tsconfig.tns.json - ข้อมูลการกำหนดค่าภาษา TypeScript
webpack.config.js - การกำหนดค่า WebPack ที่เขียนด้วย JavaScript
โมดูลโหนด
เนื่องจากโครงการ NativeScript เป็นโครงการที่ใช้โหนดจึงเก็บการอ้างอิงทั้งหมดไว้ในโฟลเดอร์ node_modules เราสามารถใช้ npm (npm install) หรือ tns เพื่อดาวน์โหลดและติดตั้งการพึ่งพาแอปพลิเคชันทั้งหมดใน node_moduels
ซอร์สโค้ด Android
NativeScript จะสร้างซอร์สโค้ด android โดยอัตโนมัติและวางไว้ในโฟลเดอร์ App_Resources \ Android จะใช้ในการสร้างแอปพลิเคชันAndroidโดยใช้Android SDK
ซอร์สโค้ด iOS
NativeScript จะสร้างซอร์สโค้ด iOS โดยอัตโนมัติและวางไว้ในโฟลเดอร์ App_Resources \ iOS จะใช้เพื่อสร้างแอปพลิเคชัน iOS โดยใช้ iOS SDK และ XCode
ซอร์สโค้ดของแอปพลิเคชัน
รหัสแอปพลิเคชันจริงจะอยู่ในโฟลเดอร์ src แอปพลิเคชันของเรามีไฟล์ด้านล่างในโฟลเดอร์ 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
ให้เราเข้าใจจุดประสงค์ของไฟล์ทั้งหมดและวิธีจัดระเบียบในส่วนนี้ -
ขั้นตอนที่ 1
main.ts - จุดเริ่มต้นของแอปพลิเคชัน
// 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);
ที่นี่เราได้ตั้ง AppModule เป็นโมดูล bootstrapping ของแอปพลิเคชัน
ขั้นตอนที่ 2
app.css - สไตล์ชีตหลักของแอปพลิเคชันดังแสดงด้านล่าง -
@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. */
ที่นี่
app.css นำเข้าสไตล์ชีตหลักและสไตล์ชีตธีมสีน้ำตาลของกรอบงาน NativeScript
ขั้นตอนที่ 3
app \ app.module.ts - โมดูลรูทของแอปพลิเคชัน
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 { }
ที่นี่
AppModule ถูกสร้างขึ้นโดยใช้ NgModule และตั้งค่าส่วนประกอบและโมดูลของแอปพลิเคชัน มันนำเข้าสองโมดูล NativeScriptModule และ AppRoutingModule และส่วนประกอบ AppComponent นอกจากนี้ยังตั้งค่า AppComponent เป็นส่วนประกอบหลักของแอปพลิเคชัน
ขั้นตอนที่ 4
app.component.ts - ส่วนประกอบรูทของแอปพลิเคชัน
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }
ที่นี่
AppComponent ตั้งค่าเทมเพลตและสไตล์ชีตของคอมโพเนนต์ เทมเพลตได้รับการออกแบบใน HMTL ธรรมดาโดยใช้ส่วนประกอบ NativeScript UI
ขั้นตอนที่ 5
app-Routing.module.ts - โมดูลการกำหนดเส้นทางสำหรับ 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 { }
ที่นี่
AppRoutingModule ใช้ NativeScriptRouterModule และกำหนดเส้นทางของ AppModule โดยทั่วไปจะเปลี่ยนเส้นทางที่ว่างเปล่าไปยัง / home และจุด / home ไปยัง HomeModule
ขั้นตอนที่ 6
app \ home \ home.module.ts - กำหนดโมดูลใหม่ 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 { }
ที่นี่
HomeModule นำเข้าสองโมดูล HomeRoutingModule และ NativeScriptCommonModule และส่วนประกอบ HomeComponent หนึ่งส่วนประกอบ
ขั้นตอนที่ 7
app \ home \ home.component.ts - กำหนดส่วนประกอบ Home และใช้เป็นโฮมเพจของแอปพลิเคชัน
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.
}
}
ที่นี่
HomeComponent ตั้งค่าแม่แบบและตัวเลือกของส่วนประกอบภายในบ้าน
ขั้นตอนที่ 8
app \ home \ home-routeing.module.ts - โมดูลการกำหนดเส้นทางสำหรับ HomeModule และใช้เพื่อกำหนดการกำหนดเส้นทางสำหรับโมดูลภายในบ้าน
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 { }
ที่นี่
HomeRoutingModule ตั้งค่าพา ธ ว่างไปยัง HomeComponent
ขั้นตอนที่ 9
app.component.html และ home.component.html - ใช้เพื่อออกแบบ UI ของแอปพลิเคชันโดยใช้คอมโพเนนต์ NativeScript UI
เรียกใช้แอปของคุณ
หากคุณต้องการเรียกใช้แอปของคุณโดยไม่ต้องใช้อุปกรณ์ใด ๆ ให้พิมพ์คำสั่งด้านล่าง -
tns preview
หลังจากดำเนินการคำสั่งนี้สิ่งนี้จะสร้างรหัส QR เพื่อสแกนและเชื่อมต่อกับอุปกรณ์ของคุณ
เอาต์พุต
QRCode
ตอนนี้สร้างรหัส QR และเชื่อมต่อกับ PlayGround ในขั้นตอนต่อไป
NativeScript PlayGround
แอปเปิด NativeScript สนามเด็กเล่น iOS หรือ Android มือถือของคุณแล้วเลือกสแกนรหัส QRตัวเลือก มันจะเปิดกล้อง เน้นรหัส QR ที่แสดงบนคอนโซล เพื่อสแกน QR Code การสแกน QR Code จะทริกเกอร์การสร้างแอปพลิเคชันจากนั้นซิงค์แอปพลิเคชันกับอุปกรณ์ตามที่ระบุด้านล่าง -
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.
เอาต์พุต
หลังจากการสแกนคุณจะเห็น BlankNgApp บนอุปกรณ์ของคุณ ดังแสดงด้านล่าง -
เรียกใช้แอปของคุณบนอุปกรณ์
หากคุณต้องการทดสอบอุปกรณ์ที่เชื่อมต่อในแอปพลิเคชันของคุณคุณสามารถตรวจสอบได้โดยใช้ไวยากรณ์ด้านล่าง -
'tns device <Platform> --available-devices'
หลังจากนั้นคุณสามารถเรียกใช้แอพของคุณโดยใช้คำสั่งด้านล่าง -
tns run
คำสั่งดังกล่าวใช้เพื่อสร้างแอปของคุณในเครื่องและติดตั้งบนอุปกรณ์ Andriod หรือ iOS หากคุณต้องการเรียกใช้แอปของคุณบนโปรแกรมจำลอง Android ให้พิมพ์คำสั่งด้านล่าง -
tns run android
สำหรับอุปกรณ์ iOS คุณสามารถทำตามคำสั่งด้านล่าง -
tns run ios
การดำเนินการนี้จะเริ่มต้นแอปในอุปกรณ์ Android / iOS เราจะพูดถึงเรื่องนี้โดยละเอียดในบทต่อ ๆ ไป
LiveSync
NativeScript ให้การซิงค์แบบเรียลไทม์ของการเปลี่ยนแปลงในแอปพลิเคชันกับแอปพลิเคชันการแสดงตัวอย่าง ให้เราเปิดโครงการโดยใช้โปรแกรมแก้ไขที่คุณชื่นชอบ (Visual Studio Code จะเป็นตัวเลือกที่เหมาะสำหรับการแสดงภาพที่ดีขึ้น) ให้เราเพิ่มการเปลี่ยนแปลงบางอย่างในโค้ดของเราและดูว่าจะตรวจพบใน LiveSync ได้อย่างไร
ตอนนี้เปิดไฟล์ app.css และจะมีเนื้อหาด้านล่าง -
@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. */
ที่นี่คำสั่งนำเข้าจะบอกโทนสีของแอพของเรา มาเปลี่ยนโทนสีฟ้าเป็นbrown โทนสีตามที่ระบุด้านล่าง -
@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. */
แอปพลิเคชันในอุปกรณ์ของเราจะรีเฟรชและคุณจะเห็น ActionBar สีน้ำตาลดังที่แสดงด้านล่าง -
เอาต์พุต
ด้านล่างนี้คือหน้าแรกของ BlankNgApp - ธีมสีน้ำตาล