NATIVESCRIPT LÀ GÌ

Nếu các bạn theo dõi trên autocadtfesvb.com, các bạn sẽ biết lũ mình tất cả khá nhiều bài viết về React Native. Một phương án tuyệt vời từ bỏ Facebook để xây dựng áp dụng cross platform. Trong quá trình khám phá về các framework tạo ứng dụng mobile như React native, Ionic… mình phát hiển thị NativeScript. Vậy Nativescript là gì?

NativeScript cũng tương tự React Native, nó góp bạn nhanh lẹ tạo một vận dụng mobile (cả Android/iOS) với Javascript.

Bạn đang xem: Nativescript là gì

Nếu công ty hay dự án mà nhiều người đang làm cho quý khách hàng lại yêu cầu áp dụng NativeScript thì đó chính là nội dung bài viết dành cho bạn.


Nội dung chủ yếu của bài bác viết

#Layouts và Styling trong NativeScript#Hướng dẫn cài đặt thư viện NativeScript

#NativeScript là gì? ra mắt NativeScript

*

NativeScript là 1 trong framework mã mối cung cấp mở được dùng làm xây dựng các ứng dụng di động cầm tay đa nền tảng bằng Javascript.

Nếu so sánh Nativescript vs React Native thì bí quyết tiếp cận của NativeScript cũng giống như với React Native, Ionic… có nghĩa là chỉ với Javascript, bạn có thể tạo một ứng dụng cho cả Android, iOS, Window phone.

Đặc biệt, NativeScript cũng giống với React Native, rứa vì áp dụng webview để kiết xuất giao diện fan dùng, thì NativeScript áp dụng kết xuất native của OS. Điều này sẽ giúp đỡ cho áp dụng có đề nghị giống với ứng dụng native nhất gồm thể.

NativeScript được cách tân và phát triển bởi Progress Telerik. Nó là sự kết hợp của JIT compiled framework và chạy trên một JS Virtual Machine. NativeScript thực hiện V8 engine mang đến Android, JS Virtual Machine mang đến iOS.

NativeScript sử dụng XML, CSS, với Javascript (hoặc TypeScript) để xuất bản ứng dụng. Cung cấp cả 2 frameworks lừng danh là Nativescript vuejs với Angular . (Bạn bắt buộc đọc: Vuejs tutorial cho tất cả những người mới – Tự xây đắp Todo App)

Về những ưu điểm và yếu điểm của NativeScript, mình sẽ không còn đề cập trong bài viết này. Một khi sẽ thích thì sử dụng thôi, bắt buộc thì cần là tốt nhất, đúng không?

#Cài đặt NativeScript

Để thao tác làm việc với NativeScript, các bạn có 2 cách:

1. Thao tác làm việc trên Local

Cần cài đặt CLI / GUI Tool.Thiết lập môi trường (Android/iOS).Chọn một Code Editor ưu thích. Cá nhân mình khuyên chúng ta dùng Visual Studio Code đến NativeScript, rất tuyệt vời nhất đấy.Code – Debug – kiểm tra trên Live Device/Emulator.

Bạn gồm thể setup NativeScript trải qua NPM bởi lệnh sau:

npm install -g nativescript
Lưu ý: yêu thương cầu để có thể thiết đặt được NativeScript đó là máy tính bạn phải thiết lập sẵn Nodejs, NPM, JDK. Chúng ta cũng có thể tham khảo các bài viết hướng dẫn chi tiết các thiết đặt ở đây:


2. Thực hiện WebIDE

Nếu ngại sở hữu cắm phần mềm, môi trường thiên nhiên lằng nhằng, bạn cũng có thể sử dụng IDE Online. Cùng với sự cung ứng WebIDE này, chúng ta có thể:

Tạo app nhanh chóng từ một template có sẵnThiết kế bối cảnh bằng phương thức kéo thảGenerate code sẵn cho các UI cơ bảnHot Reload cùng debug trên Devices.Quản lý dự án công trình qua cloud.

Tổng thể thì cả hai phương pháp để dễ thực hiện, chỉ là các bạn chưa quen thuộc thôi. Dẫu vậy nếu ở môi trường xung quanh công ty, thì tất cả lẽ bạn sẽ phải áp dụng cách trước tiên vì tại sao bảo mật tin tức dự án.

#Cấu trúc dự án công trình NativeScript

Để sinh sản một dự án công trình từ một template có sẵn, bạn sử dụng command: create kết phù hợp với tham số –template:

tns create SampleProject --template tns-template-blank-ngVí dụ với câu lệnh trên, NativeScript sẽ tạo một dự án công trình với template dựa trên một template trống của Angular.

Có không hề ít lựa chọn khi tạo dự án công trình mới, bạn có thể xem toàn cục các tham số bởi lệnh:

tns help createKhi dự án công trình được tạo, bạn sẽ thấy kết cấu thư mục và tệp như sau:

├── angular.json├── App_Resources├── CODE_OF_CONDUCT.md├── hooks├── LICENSE├── node_modules├── nsconfig.json├── package.json├── package-lock.json├── platforms├── README.md├── src├── tsconfig.json├── tsconfig.tns.json└── webpack.config.jsTrong tệp tin package.json bao gồm một trường là “id”. Rất có thể coi đây chính là package name của ứng dụng. Nếu khách hàng publish ứng dụng này lên Google play thì ID này nên là duy nhất.

"id": "org.nativescript.SampleProject",Với NativeScript 5, chúng ta có thể tách riêng rẽ ID này mang đến từng căn nguyên iOS tuyệt Android.

Xem thêm: #1 Dịch Vụ Chuyển Nhà Trọn Gói Hcm 【07/01/2022】✅ Chuyển Nhà 24H

"id": "ios": "org.nativescript.SampleProjectIOS", "android": "org.nativescript.SampleProjectAndroid" Toàn bộ mã nguồn dự án công trình sẽ bên trong thư mục src:

├── app│ ├── app.component.html│ ├── app.component.ts │ ├── app.module.ts│ ├── app-routing.module.ts│ └── home│ ├── home.component.html │ ├── home.component.ts│ ├── home.module.ts │ └── home-routing.module.ts├── app.css├── main.ts└── package.jsonPhụ thuộc vào dự án công trình lúc tạo bạn chọn TypeScript tuyệt Plain Javascript, bạn sẽ có TypeScript files, JavaScript Files, XML files với CSS/SASS files.

Để build cùng chạy dự án lên thiết bị, bạn sử dụng lệnh:

tns run android

#Layouts và Styling trong NativeScript

Phần này họ thử tìm hiểu các NativeScript Layouts hỗ trợ họ tạo hình ảnh ứng dụng như thế nào.

1. Nativescript Layout

Như mình đã nói làm việc trên, NativeScript sử dụng XML để tạo ra layout. Những UI components/Widget được bố trí trong một Layout container. Mặc định, có 6 một số loại layouts:

StackLayout: Các thành phần được xếp theo chiều dọc hoặc chiều ngang. Loại layout này còn có nét tương đồng với LinerLayout của Android.GridLayout: layout dạng lướiAbsoluteLayout: Như cái tên của nó, các bộ phận sẽ được xác xác định trí dựa vào tọa độ xuất xắc đối.FlexLayout: loại layout này kế thừa từ Flex Layout của CSS.DockLayout: những element sẽ sắp xếp trên cạnh của layout.WrapLayout: tương tự như GridLayout. Mặc dù nhiên, nếu khoảng không thì các elements còn sót lại sẽ được vào hàng/cột tiếp theo, tùy ở trong vào tùy chỉnh orientation.

Các chúng ta có thể xem thêm về các loại layout trên website chính thức.

2. Nativescript Styling

Cũng y hệt như React Native, nativeScript áp dụng CSS để định dạng layout. Mặc dù vậy, các thuộc tính CSS gồm đôi chút số lượng giới hạn hơn đối với CSS trên web.

Các nằm trong tính CSS có thể định nghĩa:

Trong phạm vi toàn ứng dụngTrong từng ElementHoặc trong một tệp tin layout như thế nào đó.

Những điểm sáng này dường như giống cùng với CSS mà các bạn quen với xây cất layout đến website. Đúng không?

#Debug trong NativeScript

Bạn hoàn toàn có thể debug ứng dụng bằng cách sử dụng Chrome Inspect (cho Android), hoặc Safari Inspect (cho iOS). Đơn giản là các bạn gõ lệnh sau (ví dụ mang lại Android):

tns debug androidMột URL được tạo tự động hóa trong cửa sổ terminal. URL này vẫn cung cấp cho mình một console với debugger.

*

#Hướng dẫn thiết đặt thư viện NativeScript

Cũng như thể như chúng ta lập trình Nodejs, vấn đề một framework hay là 1 nền tảng call là mạnh khỏe khi nó có rất nhiều plugin/extension giúp đỡ bạn mở rộng dự án, cung cấp xây dựng hào kiệt cho dự án tốt hơn.

Và NativeScript cũng vậy. Nativescript bao gồm hẳn một marketplace để bạn cũng có thể dễ dàng tìm kiếm và tải về các plugin quan trọng cho dự án của mình.

*

Khi bạn chọn một plugin, họ được đặt theo hướng dẫn cách cài đặt bằng command, tính cân xứng với version của NativeSript…

Câu lệnh cài plugin thường vẫn là:

tns plugin add Hoặc:

npm i --save

#Tạm kết

Bài viết này bản thân đã reviews NativeScript là gì, một ứng viên sáng giá cho framework tạo ứng dụng di động.

Nếu nói đối chiếu NativeScript cùng với React Native thì cũng “kẻ tám lạng, bạn nửa cân“. Tùy sở thích mà các bạn chọn cho mình một phương án phù hợp.

Mình hy vọng qua nội dung bài viết này các bạn sẽ có thêm một sự chọn lọc cho câu hỏi tạo vận dụng cross platform.

Ý kiến của người tiêu dùng về framwork này nắm nào? Để lại bình luận bên dưới cho mình biết nhé!