Nativescript là gì
Nếu các bạn theo dõi trên quatangdoingoai.vn, các bạn sẽ biết bầy mình bao gồm khá nhiều bài viết về React Native. Một giải pháp tuyệt vời từ bỏ Facebook để xây dựng áp dụng cross platform. Trong quá trình tò mò về những framework tạo vận 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ó giúp bạn nhanh lẹ tạo một ứng dụng mobile (cả Android/iOS) cùng với Javascript.
Bạn đang xem: Nativescript là gì
Nếu doanh nghiệp hay dự án công trình mà ai đang làm cho khách hàng lại yêu thương cầu thực hiện NativeScript thì đây chính là bài viết dành cho bạn.
Nội dung bao gồm của bài 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 những framework mã nguồn mở được dùng để làm xây dựng các ứng dụng di động đa nền tảng gốc rễ bằng Javascript.
Nếu so sánh Nativescript vs React Native thì biện pháp tiếp cận của NativeScript cũng tương tự với React Native, Ionic… tức là chỉ với Javascript, bạn cũng có thể tạo một ứng dụng cho cả Android, iOS, Window phone.
Đặc biệt, NativeScript cũng tương tự với React Native, ráng vì áp dụng webview để kiết xuất giao diện người dùng, thì NativeScript áp dụng kết xuất native của OS. Điều này sẽ giúp đỡ cho ứng dụng có những hiểu biết giống với vận dụng native nhất tất cả thể.
NativeScript được cải cách và phát triển bởi Progress Telerik. Nó là sự phối kết hợp của JIT compiled framework và chạy trên một JS Virtual Machine. NativeScript áp dụng V8 engine mang đến Android, JS Virtual Machine cho iOS.
NativeScript áp dụng XML, CSS, và Javascript (hoặc TypeScript) để xây đắp ứng dụng. Cung cấp cả 2 frameworks lừng danh là Nativescript vuejs cùng Angular . (Bạn bắt buộc đọc: Vuejs tutorial cho người mới – Tự xây dừng Todo App)
Về những ưu thế và nhược điểm của NativeScript, mình sẽ không đề cập trong bài viết này. Một khi đang thích thì sử dụng thôi, bắt buộc thì nên là tốt nhất, đúng không?
#Cài để NativeScript
Để thao tác làm việc với NativeScript, bạn có 2 cách:
1. Thao tác làm việc trên Local
Cần thiết lập CLI / GUI Tool.Thiết lập môi trường xung quanh (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 – thử nghiệm trên Live Device/Emulator.Bạn gồm thể thiết đặt NativeScript thông qua NPM bằng lệnh sau:
npm install -g nativescript
Lưu ý: yêu thương cầu để sở hữu thể setup được NativeScript đó là máy vi tính bạn phải setup sẵn Nodejs, NPM, JDK. Bạn cũng có thể tham khảo các bài viết hướng dẫn cụ thể các thiết lập ở đây:
2. áp dụng WebIDE
Nếu ngại thiết lập cắm phần mềm, môi trường lằng nhằng, chúng ta cũng có thể sử dụng IDE Online. Với sự cung cấp WebIDE này, các bạn có thể:
Tạo app nhanh lẹ từ một template có sẵnThiết kế bối cảnh bằng phương pháp kéo thảGenerate code sẵn cho những UI cơ bảnHot Reload với debug bên trên Devices.Quản lý dự án qua cloud.Tổng thể thì cả hai cách để dễ thực hiện, chỉ là chúng ta chưa quen thôi. Dẫu vậy nếu ở môi trường công ty, thì có lẽ bạn sẽ phải áp dụng cách trước tiên vì vì sao bảo mật thông tin dự án.
#Cấu trúc dự án công trình NativeScript
Để chế tạo ra một dự án từ một template gồm sẵn, bạn thực hiện 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ó tương đối nhiều lựa chọn khi tạo dự án công trình mới, bạn cũng 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, các bạn sẽ thấy cấu trúc thư mục cùng 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 tất cả một trường là “id”. Có thể coi đây đó là package name của ứng dụng. Nếu như khách hàng publish áp dụng này lên Google play thì ID này phải là duy nhất.
"id": "org.nativescript.SampleProject",Với NativeScript 5, bạn cũng có thể tách riêng ID này mang lại từng căn nguyên iOS tốt Android.
Xem thêm: Bột Ngũ Vị Hương Gồm Những Gì ? Những Cách Dùng Ngũ Vị Hương Trong Ẩm Thực
"id": "ios": "org.nativescript.SampleProjectIOS", "android": "org.nativescript.SampleProjectAndroid" Toàn bộ mã nguồn dự án công trình sẽ phía 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 các bạn chọn TypeScript tuyệt Plain Javascript, các bạn sẽ có TypeScript files, JavaScript Files, XML files và CSS/SASS files.
Để build và chạy dự án lên thiết bị, bạn áp dụng lệnh:
tns run android
#Layouts cùng Styling trong NativeScript
Phần này chúng ta thử mày mò các NativeScript Layouts hỗ trợ chúng ta tạo hình ảnh ứng dụng như vậy nào.1. Nativescript Layout
Như tôi đã nói sống trên, NativeScript sử dụng XML để phát hành layout. Những UI components/Widget được sắp xếp trong một Layout container. Mang định, có 6 loại layouts:
StackLayout: Các bộ phận được xếp theo theo hướng dọc hoặc chiều ngang. Các 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 thương hiệu của nó, các thành phần sẽ được xác định vị trí nhờ vào tọa độ giỏi đối.FlexLayout: các loại layout này kế thừa từ Flex Layout của CSS.DockLayout: các element sẽ bố trí trên cạnh của layout.WrapLayout: tương tự như GridLayout. Tuy nhiên, nếu không gian thì những elements sót lại sẽ được vào hàng/cột tiếp theo, tùy thuộc vào cấu hình thiết lập orientation.Các các bạn có thể bài viết liên quan về những loại layout trên website chính thức.
2. Nativescript Styling
Cũng y như React Native, nativeScript áp dụng CSS để định dạng layout. Tuy nhiên vậy, các thuộc tính CSS bao gồm đôi chút giới hạn hơn đối với CSS bên trên web.
Các thuộc tính CSS rất có thể định nghĩa:
Trong phạm vi toàn ứng dụngTrong từng ElementHoặc trong một file layout làm sao đó.Những điểm lưu ý này dường như giống cùng với CSS mà các bạn quen với xây đắp layout mang lại website. Đúng không?
#Debug trong NativeScript
Bạn có thể debug ứng dụng bằng phương pháp sử dụng Chrome Inspect (cho Android), hoặc Safari Inspect (cho iOS). Đơn giản là bạn gõ lệnh sau (ví dụ đến Android):
tns debug androidMột URL được tạo auto trong hành lang cửa số terminal. URL này đang cung cấp cho mình một console và debugger.
#Hướng dẫn thiết lập thư viện NativeScript
Cũng như là như chúng ta lập trình Nodejs, vấn đề một framework hay như là 1 nền tảng hotline là khỏe mạnh khi nó có rất nhiều plugin/extension khiến cho bạn mở rộng dự án, cung ứng xây dựng bản lĩnh cho dự án xuất sắc 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 tra cứu và cài đặt về những plugin cần thiết cho dự án công trình 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 sẽ là:
tns plugin địa chỉ cửa hàng Hoặc:
npm i --save
#Tạm kết
Bài viết này mình đã trình làng NativeScript là gì, một ứng viên sáng giá cho framework tạo áp 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ở trường mà chúng ta chọn cho mình một chiến thuật phù hợp.
Xem thêm: Nữ Sinh Năm 1982 Mệnh Gì ? Hợp Màu Gì, Tuổi Gì, Hợp Hướng Nào?
Mình mong muốn qua nội dung bài viết này các bạn sẽ có thêm 1 sự sàng lọc cho việc tạo áp dụng cross platform.
Ý kiến của người tiêu dùng về framwork này ráng nào? Để lại bình luận bên dưới cho mình biết nhé!
