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 - ธีมสีน้ำตาล