1

Ngày càng có nhiều nhà phát triển Java tiếp xúc với phát triển front-end trong những năm gần đây. Đối với nhóm các nhà phát triển này, việc chuyển sang phát triển ứng dụng di động với NativeScript chỉ là một bước nhỏ. Trong bài đăng này, chúng tôi cố gắng làm rõ các khả năng phát triển ứng dụng gốc và lai bằng NativeScript.

NativeScript {N} là gì?

{N} là một khung công tác nguồn mở (theo giấy phép Apache 2) để xây dựng các ứng dụng iOS và Android gốc, sử dụng TypeScript và Angular. {N} là một công nghệ khác với các khung lai, chẳng hạn như Ionic và Phonegap. {N} là thời gian chạy, không phải là công nghệ web. Ứng dụng của bạn sẽ không chạy như một trang web nhỏ trong WebView và do đó hiệu quả hơn. Với {N}, bạn có quyền truy cập trực tiếp vào tất cả các API gốc của thiết bị.

TypeScript

Đối với các lập trình viên Java, thật thú vị khi nhận ra rằng TypeScript (TS) có nhiều điểm tương đồng với Java. TS là cách tốt nhất để viết ứng dụng {N}, cho dù kết hợp với Angular hay không. Và hơn nữa, việc viết mã riêng trong TS cho Android khá đơn giản, bởi vì bạn có thể đảm nhận rất nhiều từ một đến một trong mã Java gốc (ví dụ:  new io.java.File() hợp lệ trong cả Java và JS / TS. Đó chỉ là phức tạp hơn một chút trong Objective-C). Thật sự rất thú vị khi xem cách NativeScript quản lý để thực hiện tất cả các cấu trúc gốc bằng JavaScript thuần. Từ mảng chuỗi đến giao diện và triển khai các lớp trừu tượng.

Tại sao lại là NativeScript?

Một trong những đối số để sử dụng NativeScript {N} là việc sử dụng lại 'Kỹ năng'. Nghĩa là, ai đó có kiến ​​thức về JavaScript / TypeScript có thể bắt đầu ngay với {N}. {N} được viết bằng JavaScript hoặc TypeScript.

Tái sử dụng mã. Viết ứng dụng Native Mobile cho iOS và Android với một cơ sở mã duy nhất và giao diện chung. Đây không phải là trường hợp của Xamarin, ví dụ, nơi bạn phải xây dựng hai giao diện cho iOS và Android với một lớp chung. Không có gì đáng ngạc nhiên khi khẩu hiệu của {N} là: 'Viết một lần, chạy khắp nơi.'

Nó cũng dễ dàng mở rộng với sự trợ giúp của các mô-đun {N} (xem các ví dụ trong bài viết này) và các mô-đun npm. Trên thực tế, các plugin từ Cordova / Phonegap.

Cuối cùng, không có WebView nào được sử dụng, không giống như nhiều khung công tác lai. Với JavaScript, bạn có quyền truy cập trực tiếp vào API gốc và làm cho NativeScript hiệu quả hơn.

Những gì cần thiết cho NativeScript?

Trong các tài liệu NativeScript , có một mô tả rõ ràng về cách {N} nên được cài đặt. Bởi vì cài đặt này không phải lúc nào cũng hoạt động hoàn hảo, nên cài đặt 'NativeScript Sidekick' là điều khôn ngoan.

Với Sidekick, có thể xây dựng các ứng dụng trên đám mây.

Nếu bạn chọn xây dựng ứng dụng của mình trên đám mây, bạn có thể phát triển ứng dụng của mình một cách độc lập với hệ điều hành. Tất nhiên, bạn thậm chí có thể xây dựng các ứng dụng iOS trên máy Windows. Bạn cũng có thể làm việc cục bộ với Sidekick, nhưng bạn phải thiết lập môi trường của riêng mình với iOS Xcode và SDK Android. Sidekick vẫn còn nhiều vấn đề đã biết nhưng đã hoạt động tốt.

Một điều thú vị khác về {N} là Live Sync. Vì vậy, nếu bạn sửa đổi một quy tắc trong mã, nó sẽ được đẩy trực tiếp trên điện thoại với bản dựng đám mây và kết quả của sự thay đổi sẽ hiển thị ngay lập tức.

NativeScript hoạt động như thế nào với JavaScript?

Sau đây là một ví dụ đơn giản về JavaScript trong {N}, khởi tạo UIAlertView điều khiển iOS dựa trên Objective-C  :

var myAlert = new UIAlertView();

myAlert.message = “NativeScript rocks!”;

myAlert.show();

Vì các nhà phát triển web không muốn tìm hiểu API cụ thể của iOS và Android, {N} cung cấp một bộ mô-đun {N}. Các mô-đun này trừu tượng hóa các chi tiết iOS và Android trong các API JavaScript đơn giản.

Trên đây  UIAlertViewđang dựa trên có thể được viết lại với {N} 'mô-đun Dialog':

var dialogs = require ("ui / dialogs");

dialogs.alert ({message: "NativeScript rocks!"});

Cuộc dialogs.alert() gọi này  cũng cung cấp cho chúng tôi  android.app.AlertDialog ứng dụng dành cho Android của bạn.

Mặc dù ví dụ 'hộp thoại' này đơn giản, nhưng kỹ thuật tương tự có thể được sử dụng để xây dựng các ứng dụng mạnh mẽ. Đối với điều này, bạn có thể sử dụng các thành phần UI gốc iOS và Android đã có và đã trưởng thành.

Angular có thể thêm gì vào NativeScript?

{N} bây giờ cũng có thể được viết bằng Angular.

Nếu bạn có kiến ​​thức về Angular, đây là một bước nhỏ để sử dụng Angular trong {N}.

Sự khác biệt lớn với Angular là các thành phần HTML dựa trên trình duyệt như

không khả dụng trong {N}. Bạn nên sử dụng các thành phần UI {N} thay thế.

Không có DOM hoặc trình duyệt được sử dụng trong {N}. Các UI {N} là các UI gốc và do đó bị ngắt kết nối khỏi DOM. Vì Angular là khung công tác bất khả tri và bị ngắt kết nối với DOM, nên khung này có thể dễ dàng được tích hợp với {N}. Ví dụ dưới đây đề cập đến điều này. AngularJS, không giống như Angular, không phù hợp với {N} vì khung này được liên kết với DOM.

Bằng cách sử dụng Angular trong {N}, bạn có khả năng chia sẻ mã giữa ứng dụng web hiện tại và ứng dụng gốc của bạn. Hãy xem xét một ví dụ.

Sử dụng lại mã giữa các ứng dụng web và di động

Ví dụ: hãy hiển thị 'Danh sách tạp hóa' trong ứng dụng web.

import {Component} from ‘@angular/core';

@Component({
    selector: ‘grocery - list '
    templateUrl: ‘grocerylist.template.html '
})
export class GroceryListComponent {
    groceries: string[];
    constructor() {
        this.groceries = [‘Cheese, ‘Eggs’, 'Tomatoes', 'Tea']
    }
}

Liệt kê 1

Trong Liệt kê 1, một Thành phần góc được định nghĩa, nó sẽ lấp đầy một mảng 'cửa hàng tạp hóa' thông qua hàm tạo.

TypeScript được sử dụng. Đây là một 'siêu ký tự gõ' của JavaScript và là tiêu chuẩn để viết các ứng dụng Angular.

Cmponent này hoạt động như thế nào?

Thông qua bộ chọn được liên kết với Thành phần, bạn có thể yêu cầu Angular khởi tạo và kết xuất thành phần này, nơi nó tìm thấy thẻ trong HTML (xem Liệt kê 2).

….

<grocery-list></grocery-list>     

….

Liệt kê 2

Để hiển thị 'Danh sách tạp hóa', một mẫu phải được xác định với tên: g tạp hóa.template.html (xem Liệt kê 3). Mẫu này cũng được định nghĩa theo  templateUrl Thành phần.

<p>Groceries: </p>
<ul>
	<li *ng-for="“let" grocery="" of="" groceries"="">      
	<span ng-non-bindable="">{{grocery}}</span>
	</li>
</ul>

Liệt kê 3

Danh sách 'cửa hàng tạp hóa' được lặp lại, sử dụng ng-for chỉ thị của Angular .

Câu hỏi bây giờ là: chúng ta còn phải lập trình gì nữa để có được đoạn mã trên hoạt động cho ứng dụng NativeScript iOS và Android của bạn?

Câu trả lời toàn diện là:

Thành phần trong Liệt kê 1 vẫn giữ nguyên. Do đó, mã TypeScript này có thể được sử dụng lại giữa ứng dụng web và ứng dụng di động.

Điều duy nhất bạn cần thay đổi là mẫu cho thành phần này!

Bạn phải sử dụng các thành phần UI {N} thay vì các thành phần HTML trong mẫu của bạn (xem Liệt kê 4 ). Điều nổi bật là bạn vẫn có thể sử dụng ng-for chỉ thị của Angular  để lặp qua danh sách.

Và chuyển đổi một mẫu thành các thành phần UI {N} là một bài tập đơn giản, bởi vì có một thành phần UI gốc cho mọi thành phần HTML. Ví dụ này cũng cho thấy Angular bị ngắt kết nối với DOM và do đó có thể xử lý các thành phần UI {N}.

<stacklayout *ngfor="let grocery of groceries">

<label [text]="“grocery""></label>

</stacklayout>

Liệt kê 4

Mô-đun HTTP

Một ví dụ khác để tái sử dụng mã là như sau.

{N} cung cấp hỗ trợ cho API web, chẳng hạn như  XMLHttpRequest và  fetch().

Bạn có thể sử dụng mô-đun HTTP trong {N}. Mô-đun này cho phép gửi yêu cầu web và nhận phản hồi web.

var http = require(“http”); import HTTP module

http.getJSON(‘https://api.groceries.com’)

.then(function (result)) {
	…
});

Liệt kê 5

Trong sơ đồ bên dưới, bạn thấy bên trái {N} dịch API Web XMLHttpRequests thành mã gốc cho iOS và Android. Cũng được hiển thị, ở phía bên phải của sơ đồ này, là việc triển khai XMLHttpRequest được sử dụng cho ứng dụng web. Đây là một cách thực hiện khác với biến thể NativeScript.

Vấn đề ở đây là chúng ta không thể sử dụng lại các triển khai XMLHttpRequest giữa ứng dụng web và ứng dụng di động. Có một '' liên kết bị thiếu '' ở đây, cụ thể là mô-đun HTTP chung cho ứng dụng web và ứng dụng di động.

Điều này có thể được giải quyết với Angular. Angular thêm một lớp trừu tượng bổ sung để xử lý các yêu cầu / phản hồi HTTP. Điều này là có thể với mô-đun HTTP từ Angular.

Chúng ta có thể sử dụng lại mô-đun này giữa ứng dụng web và ứng dụng di động.

Ví dụ: mã được sử dụng lại sẽ trông như thế này trong Angular:

import {Http} from ‘@angular/http’

export class GroceryListService {
    constructor(private http: Http) {}
    getGroceries() {
        return this.http.get(`https://api.groceries.com`)
            .map((res: Response) => res.json());
    }
}

Liệt kê 6

Thêm công cụ và tính năng

Ngoài các ví dụ đã đề cập ở trên, chúng tôi còn có các tính năng khác, chẳng hạn như việc sử dụng trình cắm, giàn giáo và Sân chơi {N}. Hơn nữa, bây giờ bạn có thể xây dựng ứng dụng {N} với khung Vue.js.

Bổ sung

Điều thú vị về {N} là có rất nhiều plugin có sẵn trên thị trường .

Bạn không phải tự mình xây dựng mọi thứ. Hãy nghĩ về Facebook, xác thực dấu vân tay / khuôn mặt, 'văn bản thành giọng nói', quảng cáo với admob hoặc mua trong ứng dụng. Nếu plugin không có sẵn, bạn luôn có thể xây dựng nó.

Sân chơi NativeScript

{N} Playground là một công cụ giúp bạn dễ dàng xây dựng một ứng dụng bằng giao diện web trong vòng vài phút. Xem https://play.nativecript.org .

Ngoài trang web, hai ứng dụng phải được cài đặt trên thiết bị:

  • Sân chơi NativeScript
  • Xem trước bản gốc

Sau khi quét mã QR của trang web https://play.nativecript.org bằng ứng dụng sân chơi, ứng dụng sẽ được cài đặt trên thiết bị. Với Live Sync, tất cả các thay đổi sẽ được hiển thị ngay lập tức trong ứng dụng. Bạn cũng có thể kéo và thả Thành phần (Nút, Thanh trượt, Biểu đồ) trong mẫu của mình. Siêu mát.

Hãy thử nó. Với Playground, bạn có thể dễ dàng chia sẻ mã {N} và các vấn đề của mình với các nhà phát triển khác. Đó là một phương tiện để nhanh chóng bắt đầu với {N} và trải nghiệm lợi ích của nó. Bạn cũng có thể xây dựng một ứng dụng với NativeScript và Vue.js.

NativeScript và Vue.js

Giống như Angular, Vue.js cũng dựa trên thành phần. Nó tập trung vào lớp xem. Vue.js tích hợp dễ dàng với Angular hoặc các khung công tác mặt trước khác. Và, cuối cùng, rất nhỏ và gọn (21 Kb).

Tôi sẽ chỉ cho bạn một ví dụ đơn giản về cách một thành phần trông trong Vue.js và NativeScript.

Đầu tiên, một ví dụ Vue được tạo với new Vue(). Trường hợp này chứa dữ liệu hoặc mô hình bạn muốn kết xuất. Trong trường hợp này, chúng tôi muốn hiển thị thông báo: 'Xin chào Vue!'

Và bước thứ hai là xác định một mẫu để hiển thị thông báo.

const Vue = require("nativescript-vue");

new Vue({
    data() {
        return {
            message: 'Hello Vue!',
        }
    },
    template: `
<page class="page">
<label :text="message"></label>
</page>
`,
}).$start();

Thành phần này sẽ hiển thị như sau trên thiết bị di động của bạn:

Xin chào Vue!


Phần tử là phần tử giao diện người dùng chính / cấp cao nhất của mọi ứng dụng NativeScript + Vue.js. Tất cả các yếu tố giao diện người dùng khác được lồng trong.

Tất cả các mã trong một tập tin!

Bạn có thể thử nghiệm với Vue.js và NativeScript trong Sân chơi NativeScript.

Xây dựng cả ứng dụng web và thiết bị di động từ một dự án

Tái sử dụng mã là một thách thức rất quan trọng để phát triển nói chung.

Tại thời điểm này, bạn có thể tạo một ứng dụng web với Angular CLI. Và đối với {N}, bạn sử dụng CLI NativeScript. Trước Angular 6.1, đây là một vấn đề vì CLI không cho chúng tôi khả năng tạo một dự án cho ứng dụng web và ứng dụng di động gốc. Tất nhiên, có thể duy trì hai dự án riêng biệt và sao chép-dán các tệp được chia sẻ giữa hai dự án. Điều này cũng có thể được giải quyết bằng cách sử dụng 'dự án hạt giống' sau đây. Ví dụ: https://github.com/TeamMaestro/angular-native-seed .

Nhưng với @ angular / cli 6.1.0 , giờ đây có thể xây dựng cả ứng dụng web và ứng dụng di động từ một dự án duy nhất. Để thực hiện giấc mơ chia sẻ mã, các nhóm Angular và NativeScript đã hợp tác để tạo ra sơ đồ bản địa . Đây là một bộ sưu tập hoặc kho lưu trữ sơ đồ để tạo các thành phần trong các ứng dụng NativeScript + Angular sử dụng Angular CLI. Để tạo một dự án NativeScript + Angular mới, bạn có thể sử dụng ng newvới @ nigencript / scheme được chỉ định làm bộ sưu tập lược đồ.

Lưu ý, trước tiên bạn có thể cần cài đặt @ nariescript / sơ đồ :

npm install --global @nativescript/schematics 

Để bắt đầu một dự án chia sẻ mã web và di động mới:

ng new --collection=@nativescript/schematics my-shared-app --shared 

Phần kết luận

Tóm lại, {N} là một khung mạnh mẽ để xây dựng các ứng dụng di động đa nền tảng gốc với Angular, Vue.js, TypeScript hoặc JavaScript. Bạn có quyền truy cập trực tiếp vào API nền tảng bản địa.

Với NativeScript Playground, bạn có thể xây dựng một ứng dụng trong vòng vài phút. Và với NativeScript SideKick, bạn có thể xây dựng các ứng dụng mạnh mẽ trên đám mây.

{N} hoạt động khác với các khung lai như Phonegap, nhưng nó cực kỳ phù hợp cho các nhà phát triển web. Nó là hiệu suất cao hơn và dễ học.

|