NativeScript - Kiến trúc

NativeScript là một khuôn khổ nâng cao để tạo ứng dụng di động. Nó che giấu sự phức tạp của việc tạo ứng dụng di động và cho thấy một API khá đơn giản để tạo ứng dụng di động được tối ưu hóa và nâng cao. NativeScript cho phép các nhà phát triển ở cấp độ đầu vào dễ dàng tạo ứng dụng di động trên cả Android và iOS.

Hãy để chúng tôi hiểu kiến trúc của khung NativeScript trong chương này.

Giới thiệu

Khái niệm cốt lõi của khung NativeScript là cho phép nhà phát triển tạo ứng dụng di động kiểu lai. Ứng dụng kết hợp sử dụng API trình duyệt cụ thể của nền tảng để lưu trữ ứng dụng web bên trong ứng dụng di động thông thường và cung cấp quyền truy cập hệ thống vào ứng dụng thông qua API JavaScript.

NativeScript đầu tư rất nhiều vào JavaScript languageđể cung cấp một khuôn khổ hiệu quả cho các nhà phát triển. TừJavaScriptlà tiêu chuẩn thực tế cho lập trình phía máy khách (phát triển Web) và mọi nhà phát triển đều hiểu rõ về ngôn ngữ JavaScript, nó giúp các nhà phát triển dễ dàng tham gia vào khung NativeScript. Ở cấp độ thấp, NativeScript cho thấy API gốc thông qua một bộ sưu tập các plugin JavaScript được gọi làNative plugins.

NativeScript được xây dựng trên nền tảng của các plugin Native và cung cấp nhiều Mô-đun JavaScript cấp cao và dễ sử dụng . Mỗi mô-đun thực hiện một chức năng cụ thể như truy cập máy ảnh, thiết kế màn hình, v.v. Tất cả các mô-đun này có thể được kết hợp theo nhiều cách để tạo ra một ứng dụng di động phức tạp.

Sơ đồ dưới đây cho thấy tổng quan cấp cao của khung NativeScript -

NativeScript Application - NativeScript framework cho phép nhà phát triển sử dụng ứng dụng Angular style hoặc Vue Style.

JavaScript Modules - Khung công tác NativeScript cung cấp một tập hợp các mô-đun JavaScript phong phú được phân loại rõ ràng như Mô-đun giao diện người dùng, Mô-đun ứng dụng, Mô-đun lõi, v.v. Tất cả các mô-đun có thể được ứng dụng truy cập bất kỳ lúc nào để viết bất kỳ mức độ ứng dụng phức tạp nào.

JavaScript plugins- Khung công tác NativeScript cung cấp một bộ sưu tập lớn các plugin JavaScript để truy cập chức năng liên quan đến nền tảng. Mô-đun sử dụng các plugin JavaScript để cung cấp chức năng cụ thể cho nền tảng.

Native plugins- Các plugin gốc được viết bằng ngôn ngữ nền tảng cụ thể để bao bọc chức năng hệ thống sẽ được plugin JavaScript sử dụng thêm.

Platform API - API được cung cấp bởi các nhà cung cấp nền tảng.

Tóm lại, ứng dụng NativeScript được viết và tổ chức bằng cách sử dụng các mô-đun. Các mô-đun được viết bằng JavaScript thuần túy và các mô-đun truy cập chức năng liên quan đến nền tảng (bất cứ khi nào cần) thông qua các plugin và cuối cùng, các plugin là cầu nối giữa API nền tảng và API JavaScript.

Quy trình làm việc của một ứng dụng NativeScript

Như chúng ta đã tìm hiểu trước đó, ứng dụng NativeScript bao gồm các mô-đun. Mỗi và mọi mô-đun cho phép một tính năng cụ thể. Hai loại mô-đun quan trọng để khởi động ứng dụng NativeScript như sau:

Mô-đun gốc
Mô-đun trang

Các mô-đun Gốc và Trang có thể được phân loại là các mô-đun ứng dụng. Mô-đun ứng dụng là điểm đầu vào của ứng dụng NativeScript. Nó khởi động một trang, cho phép nhà phát triển tạo giao diện người dùng của trang và cuối cùng cho phép thực thi logic nghiệp vụ của trang. Một mô-đun ứng dụng bao gồm ba mục dưới đây:

Thiết kế giao diện người dùng được mã hóa bằng XML (ví dụ: page.xml / page.component.html)
Các kiểu được mã hóa trong CSS (ví dụ: page.css / page.component.css)
Logic nghiệp vụ thực tế của mô-đun trong JavaScript (ví dụ: page.js / page.component.ts)

NativeScript cung cấp rất nhiều thành phần giao diện người dùng (trong Mô-đun giao diện người dùng) để thiết kế trang ứng dụng. Thành phần UI có thể được biểu diễn ở định dạng XML hoặc định dạng HTML trong ứng dụng dựa trên Angular. Mô-đun ứng dụng sử dụng Thành phần giao diện người dùng để thiết kế trang và lưu trữ thiết kế trong XML riêng biệt, page.xml / page.component.html . Thiết kế có thể được tạo kiểu bằng cách sử dụng CSS chuẩn.

Các mô-đun ứng dụng lưu trữ kiểu thiết kế trong CSS riêng biệt, page.css / page.component.css. Chức năng của trang có thể được thực hiện bằng JavaScript / TypeScript, có toàn quyền truy cập vào thiết kế cũng như các tính năng của nền tảng. Mô-đun ứng dụng sử dụng một tệp riêng, page.js / page.component.ts để viết mã chức năng thực của trang.

Mô-đun gốc

NativeScript quản lý giao diện người dùng và tương tác của người dùng thông qua các vùng chứa giao diện người dùng. Mỗi vùng chứa giao diện người dùng phải có Mô-đun gốc và qua đó vùng chứa giao diện người dùng quản lý giao diện người dùng. Ứng dụng NativeScript có hai loại vùng chứa giao diện người dùng -

Application Container- Mỗi ứng dụng NativeScript nên có một vùng chứa ứng dụng và nó sẽ được thiết lập bằng phương thức application.run (). Nó khởi tạo giao diện người dùng của ứng dụng.

Model View Container- NativeScript quản lý các hộp thoại Phương thức bằng cách sử dụng vùng chứa chế độ xem mô hình. Một ứng dụng NativeScript có thể có bất kỳ số lượng vùng chứa chế độ xem mô hình nào.

Mỗi mô-đun gốc chỉ nên có một Thành phần giao diện người dùng làm nội dung của nó. Thành phần giao diện người dùng có thể có các thành phần giao diện người dùng khác làm con của nó. NativeScript cung cấp rất nhiều thành phần giao diện người dùng như TabView, ScrollView, v.v., với tính năng con. Chúng tôi có thể sử dụng chúng làm thành phần giao diện người dùng gốc. Một ngoại lệ là Frame , không có tùy chọn con nhưng có thể được sử dụng làm thành phần gốc. Frame cung cấp các tùy chọn để tải Mô-đun Trang và các tùy chọn để điều hướng đến các mô-đun trang khác .

Mô-đun trang

Trong NativeScript, mỗi và mọi trang về cơ bản là một Mô-đun Trang . Mô-đun trang được thiết kế bằng cách sử dụng tập hợp các thành phần giao diện người dùng phong phú do NativeScript cung cấp. Mô-đun trang được tải vào ứng dụng thông qua thành phần Frame (sử dụng thuộc tính defaultPage của nó hoặc sử dụng phương thức điều hướng ()), lần lượt được tải bằng cách sử dụng Mô-đun gốc , lần lượt được tải bằng cách sử dụng application.run () trong khi ứng dụng được khởi động.

Luồng công việc của ứng dụng có thể được biểu diễn như trong sơ đồ dưới đây:

Sơ đồ trên được giải thích chi tiết theo các bước sau:

Ứng dụng NativeScript khởi động và gọi phương thức application.run ().
application.run () tải một mô-đun gốc .
Mô-đun gốc được thiết kế bằng cách sử dụng bất kỳ thành phần giao diện người dùng nào như được chỉ định bên dưới -
- Frame
- TabView
- SideDrawer
- Bất kỳ dạng xem bố cục nào
Thành phần khung tải trang được chỉ định (Mô-đun trang) và được kết xuất. Các thành phần giao diện người dùng khác sẽ được hiển thị như được chỉ định trong Mô-đun gốc . Thành phần giao diện người dùng khác cũng có tùy chọn tải Mô-đun Trang làm nội dung chính của nó.

Quy trình làm việc của Ứng dụng NativeScript dựa trên Angular

Như chúng ta đã tìm hiểu trước đó, khung công tác NativeScript cung cấp nhiều phương pháp luận để phục vụ cho các nhóm nhà phát triển khác nhau. Các phương pháp được NativeScript hỗ trợ như sau:

NativeScript Core - Khái niệm cơ bản hoặc cốt lõi của NativeScript Framework
Angular + NativeScript - Phương pháp luận dựa trên góc cạnh
Vuejs + NativeScript - Phương pháp dựa trên Vue.js

Hãy để chúng tôi tìm hiểu cách Angular framework được kết hợp vào NativeScript framework.

Bước 1

NativeScript cung cấp một đối tượng (platformNativeScriptDynamic) để khởi động ứng dụng Angular. platformNativeScriptDynamic có một phương thức, bootstrapModule, được sử dụng để khởi động ứng dụng.

Cú pháp để khởi động ứng dụng bằng Angular framework như sau:

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

Đây,

AppModule là mô-đun gốc của chúng tôi.

Bước 2

Cách triển khai đơn giản (mã được chỉ định bên dưới) của mô-đun ứng dụng.

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 { }

Đây,

AppModulekhởi động ứng dụng bằng cách tải thành phần AppComponent. Các thành phần góc tương tự như các trang và được sử dụng cho cả logic thiết kế và lập trình.

Cách triển khai đơn giản của AppComponent (app.component.ts) và logic trình bày của nó (app.component.css) như sau:

app.component.ts

import { Component } from "@angular/core"; 
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.component.html"
   }
)
export class AppComponent { }

Đây,

templateUrl đề cập đến thiết kế của thành phần.

app.component.html

<page-router-outlet></page-router-outlet>

Đây,

page-router-outlet là nơi mà ứng dụng Angular được đính kèm.

Tóm lại, Angular framework bao gồm các mô-đun tương tự như NativeScript framework với những khác biệt nhỏ. Mỗi mô-đun trong Angular sẽ có một thành phần Angular và một tệp thiết lập bộ định tuyến (page-routing.mocdule.ts). Bộ định tuyến được đặt trên mỗi mô-đun và nó đảm nhiệm việc điều hướng. Các thành phần góc tương tự với các trang trong lõi NativeSctipt.

Mỗi thành phần sẽ có thiết kế giao diện người dùng (trang.component.html), biểu định kiểu (page.component.css) và tệp mã JavaScript / TypeScript (page.component.ts).