Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

Tạo Ứng dụng NativeScript Đầu tiên Của Bạn

by
Read Time:20 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài trước, tôi đã giới thiệu cho bạn về NativeScript. Ở đó bạn đã học được những khái niệm cơ bản về NativeScript và nó khác với các framework phát triển ứng dụng di động khác như thế nào. Lần này bạn sẽ bắt đầu tạo ứng dụng NativeScript đầu tiên của bạn. Tôi sẽ hướng dẫn bạn toàn bộ quá trình xây dựng ứng dụng bằng NativeScript, từ thiết lập môi trường phát triển cho đến chạy ứng dụng trên thiết bị của bạn. Dưới đây là một tóm tắt về những gì mà tôi sẽ thảo luận:

  1. Thiết lập NativeScript
  2. Xây dựng ứng dụng
  3. Chạy ứng dụng
  4. Gỡ lỗi ứng dụng

Cụ thể, chúng ta sẽ chạy ứng dụng trên nền tảng Android. Nhưng bạn vẫn có thể bắt chước nếu muốn triển khai trên iOS vì code sẽ khá tương đồng. Sự khác biệt nằm trong quá trình thiết lập NativeScript và các lệnh mà bạn thực thi khi chạy ứng dụng.

Mã nguồn hoàn chỉnh cho ứng dụng này sẵn có trên repo GitHub của hướng dẫn.

1. Thiết lập NativeScript

Để thiết lập NativeScript, trước tiên bạn phải cài đặt Node.js. Một khi Node.js đã được cài đặt, bạn có thể cài đặt công cụ dòng lệnh NativeScript bằng cách chạy lệnh npm install -g nativescript trên terminal của bạn.

Bước cuối cùng là cài đặt công cụ phát triển cho mỗi nền tảng mà bạn muốn triển khai. Đối với Android, đó là Android SDK. Đối với iOS, đó là XCode. Bạn có thể thực hiện theo hướng dẫn cài đặt trên trang web của NativeScript để biết rõ các bước thiết lập phần mềm cần thiết cho môi trường phát triển của bạn.

Một khi bạn đã thiết lập xong môi trường phát triển, hãy chạy lệnh tns doctor để đảm bảo rằng môi trường phát triển của bạn đã sẵn sàng cho việc phát triển NativeScript. Nếu bạn đang ở trên Linux hoặc Windows, bạn sẽ thấy một cái gì đó đại loại thế này nếu môi trường phát triển của bạn đã sẵn sàng:

Có một lưu ý đó là bạn chỉ có thể phát triển cho iOS chỉ trên hệ thống Mac OS X. Điều này có nghĩa là nếu bạn đang sử dụng PC, bạn sẽ chỉ có thể triển khai sang các thiết bị Android. Tuy nhiên, nếu bạn đang ở trên máy Mac, bạn sẽ có thể triển khai trên cả nền tảng iOS và Android.

Nếu bạn gặp phải bất kỳ vấn đề nào trong quá trình thiết lập, bạn có thể tham gia Cộng đồng NativeScript trên Slack và một khi bạn đã tham gia, hãy chuyển đến kênh getting started và đặt câu hỏi của bạn ở đó.

2. Tạo Ứng dụng

Ứng dụng mà chúng ta sẽ xây dựng là một ứng dụng ghi chú. Nó sẽ cho phép người dùng tạo các ghi chú, mỗi ghi chú có một tuỳ chọn tập tin hình ảnh đính kèm sẽ được chụp bằng camera trên thiết bị. Các ghi chú được lưu giữ bằng các cài đặt ứng dụng NativeScript và có thể xoá từng cái.

Ứng dụng sẽ trông giống như sau:

NativeScript appNativeScript appNativeScript app

Bắt đầu bằng cách thực thi lệnh sau để tạo một dự án NativeScript mới:

noter là tên của dự án, và com.yourname.noter là ID duy nhất của ứng dụng. Thông tin này sẽ được sử dụng sau này để nhận diện ứng dụng của bạn một khi bạn gửi nó lên Play Store hoặc App Store. Mặc định, lệnh tns create sẽ tạo các thư mục và tập tin sau đây cho bạn:

  • app
  • node_modules
  • platforms
  • package.json

Thông thường bạn chỉ phải thao tác trên các tập tin bên trong thư mục app. Nhưng cũng có trường hợp bạn có thể cần phải chỉnh sửa các tập tin bên trong thư mục platforms/android. Một trường hợp như vậy là khi một plugin mà bạn đang cố gắng sử dụng không tự động liên kết các phụ thuộc và tài nguyên mà nó cần.

Tiếp theo, hãy chuyển đến thư mục app và xóa tất cả các tập tin ngoại trừ thư mục App_Resources. Sau đó tạo ra các tập tin sau:

  • app.js
  • app.css
  • notes-page.js
  • notes-page.xml

Đây là những tập tin sẽ được sử dụng bởi NativeScript runtime. Cũng giống như khi xây dựng các trang web, tập tin .css được sử dụng cho phong cách, và .js cho tính năng. Nhưng đối với markup của ứng dụng, chúng ta sử dụng XML thay vì HTML. Thông thường, bạn sẽ tạo một thư mục riêng cho mỗi màn hình của ứng dụng (ví dụ như đăng nhập, đăng ký hoặc bảng điều khiển) và có các tập tin XML, CSS và JavaScript bên trong mỗi thư mục. Nhưng vì ứng dụng này chỉ có một màn hình nên chúng ta tạo ra tất cả các tập tin bên trong thư mục gốc.

Nếu bạn muốn tìm hiểu thêm về cấu trúc thư mục của NativeScript, hãy xem Chương 2 của Hướng dẫn Làm quen với NativeScript.

3. Tập tin Khởi đầu

Mở tập tin app.js và thêm code sau đây:

Đây là khởi điểm cho một ứng dụng NativeScript. Nó sử dụng mô-đun application và phương thức start để chỉ định mô-đun được sử dụng cho trang ban đầu của ứng dụng. Trong trường hợp này, chúng ta chỉ định notes-page, có nghĩa là mô-đun là notes-page.js, markup là notes-page.xml và phong cách của trang là notes-page.css. Đây là một quy ước được sử dụng trong NativeScript, rằng tất cả các tập tin cho một trang cụ thể phải có tên giống nhau.

4. Thêm Markup cho UI

Mở tập tin notes-page.xml và thêm code sau đây:

Khi tạo ra các trang của ứng dụng bằng NativeScript, bạn nên bắt đầu bằng thẻ <Page> . Đây là cách NativeScript biết bạn đang cố gắng tạo một trang mới. Thuộc tính xmlns chỉ định URL cho lược đồ được sử dụng cho tập tin XML.

Nếu bạn truy cập vào lược đồ URL được chỉ định, bạn có thể thấy định nghĩa của tất cả các thẻ XML mà bạn có thể sử dụng bên trong NativeScript. Thuộc tính loaded chỉ định hàm sẽ được thực thi khi trang được tải. Chúng ta sẽ xem xét định nghĩa của hàm này sau trong tập tin notes-page.js.

Mặc định, phần header của ứng dụng chỉ chứa tiêu đề của ứng dụng. Nếu bạn muốn thêm các thành phần UI khác, bạn cần phải định nghĩa lại nó bằng cách sử dụng <Page.actionBar>. Sau đó, bên trong bạn định nghĩa những gì bạn muốn thấy trong phần header. Tiêu đề được chỉ định bằng <ActionBar>  và thiết lập thuộc tính title của nó thành tiêu đề của trang mà bạn muốn.

Bên dưới đây chúng ta sử dụng cú pháp mustache để xuất ra giá trị của app_title được định nghĩa trong tập tin notes-page.js. Đây là cách bạn xuất ra các giá trị được ràng buộc với trang.

Để định nghĩa các nút, trước tiên sử dụng <ActionBar.actionItems> như là phần tử cha, và mỗi <ActionItem> sẽ là các nút mà bạn muốn định nghĩa. Thuộc tính tap chỉ định một hàm sẽ được thực thi khi nút được chạm vào, trong khi os.positionandroid.position là các vị trí của nút trong iOS và Android.

Để xác định văn bản của nút, bạn có thể sử dụng thuộc tính text của <ActionItem>. Tuy nhiên, NativeScript hiện không cho phép thay đổi màu văn bản của nút thông qua CSS. Đó là lý do tại sao chúng ta đã sử dụng <ActionItem.actionView>  để định nghĩa nội dung của nút và thiết lập màu văn bản của nó.

Tiếp theo là nội dung thật sự của trang. Bạn có thể sắp xếp các phần tử khác nhau bằng cách sử dụng một hoặc nhiều container cho bố cục. Dưới đây chúng ta sử dụng hai trong số các bố cục hiện có: StackLayoutGridLayout.

StackLayout cho phép bạn xếp chồng tất cả các phần tử bên trong nó. Mặc định, hướng của bố cục này là theo chiều dọc, do đó mỗi thành phần UI đến trước được xếp chồng lên thành phần đến sau. Hãy tưởng tượng nó như trò chơi xếp hình lego.

Mặt khác, GridLayout cho phép bạn sắp xếp các phần tử trong một cấu trúc bảng. Nếu bạn đã từng sử dụng Bootstrap hoặc các framework CSS khác thì điều này có vẻ như tự nhiên đối với bạn. GridLayout cho phép bạn định nghĩa các hàng và cột trong đó mỗi thành phần UI có thể được sắp xếp. Chúng ta sẽ xem xét cách thức nó được cài đặt sau này. Bây giờ, chúng ta hãy chuyển sang code.

Trước tiên, hãy định nghĩa form để tạo một ghi chú mới. Cũng tương tự như trong HTML, bạn có thể định nghĩa các thuộc tính như idcssClass (tương đương với thuộc tính class của HTML). Thuộc tính id được gắn với một phần tử nếu bạn muốn thao tác nó từ code. Trong trường hợp của chúng ta, chúng ta muốn tạo hiệu ứng động cho form sau này. cssClass được sử dụng để chỉ định lớp CSS mà bạn sẽ sử dụng để định phong cách cho phần tử.

Bên trong form là một trường văn bản để nhập tiêu đề của ghi chú, một nút để đính kèm một hình ảnh, hình ảnh đã được chọn, và một nút để lưu ghi chú. Phần tử hình ảnh chỉ hiển thị nếu attachment_img có một giá trị true. Đó sẽ là trường hợp nếu một hình ảnh đã được đính kèm trước đó.

Tiếp theo là danh sách hiển thị các ghi chú đã được thêm vào bởi người dùng. Danh sách được tạo ra bằng thành phần ListView. Thành phần này chấp nhận items như là một thuộc tính bắt buộc. Giá trị có thể là một mảng thuần tuý hoặc mảng observable.

Nếu bạn không cần thực hiện bất kỳ hình thức cập nhật nào (ví dụ xóa hay cập nhật một trường) cho mỗi phần tử trong mảng, một mảng JavaScript thuần tuý là đủ. Nếu không, hãy sử dụng một mảng observable cho phép bạn thực hiện các cập nhật cho mảng và tự động phản ánh trên UI. Chúng ta sẽ tìm hiểu một mảng observable sau này là như thế nào.

Cũng cần lưu ý rằng một ListView có thể có một thuộc tính itemTap, cho phép bạn định nghĩa hàm được thực thi khi một phần tử trong ListView được chạm vào. Nhưng trong trường hợp này chúng ta vẫn chưa thật sự thêm nó vì chúng ta không cần phải thực hiện bất kỳ hành động nào khi một phần tử được chạm vào.

Các phần tử trong ListView có thể được định nghĩa bằng <ListView.itemTemplate>. Ở đây chúng ta đang sử dụng một <GridLayout> để tạo ra hai hàng và hai cột. Thuộc tính columns được sử dụng để chỉ định bao nhiêu cột bạn muốn trong mỗi hàng.

Trong trường hợp này, *,* có nghĩa là có hai cột, mỗi cột chiếm phân nửa của khoảng trống sẵn có trong hàng hiện tại. Vì vậy nếu toàn bộ một hàng có tổng chiều rộng 300 pixel, thì mỗi cột sẽ rộng 150 pixel. Vì vậy, về cơ bản mỗi dấu * đại diện cho một cột, và bạn sử dụng một dấu phẩy để phân tách mỗi cột.

Thuộc tính rows hoạt động tương tự, nhưng kiểm soát khoảng trống được sử dụng bởi một hàng đơn lẻ. auto có nghĩa là nó sẽ chỉ chiếm lấy khoảng trống cần thiết cho các phần tử con của mỗi hàng.

Sau khi định nghĩa columnsrows trong GridLayout, bạn vẫn phải chỉ định phần tử con nào của nó thuộc về hàng và cột. Dòng đầu tiên chứa tiêu đề của phần tử (cột thứ nhất) và nút xóa (cột thứ hai). Hàng thứ hai chứa hình ảnh được đính kèm với phần tử (cột thứ nhất). Hàng và các cột được định nghĩa bằng cách sử dụng thuộc tính rowcol cho mỗi phần tử.

Cũng cần lưu ý việc sử dụng horizontalAlignmentverticalAlignment. Bạn có thể hình dung về điều này tương tự như thuộc tính text-align của HTML. Nhưng thay vì văn bản, chúng ta canh các thành phần UI. horizontalAlignment có thể có một giá trị right, left, center, hoặc stretch, trong khi verticalAlignment có thể có một giá trị là top, bottom, center hoặc stretch. Hầu hết hầu hết cá thuộc tính này đều dễ hiểu, ngoại trừ stretch, chiếm toàn bộ khoảng trống có sẵn ngang hoặc dọc.

Trong trường hợp này, horizontalAlignmentverticalAlignment được sử dụng để canh giữa hình ảnh cả chiều ngang và chiều dọc bên trong cột của nó. Và horizontalAlignment được sử dụng trên nút xóa để canh nó về bên phải của cột thứ hai.

Chúng ta chưa chỉ định thuộc tính itemTap cho ListView. Thay vào đó, chúng ta muốn đính kèm một hành động xóa sẽ được thực thi bất cứ khi nào một nút xóa bên trong một phần tử danh sách được chạm vào. Mỗi phần tử có một thuộc tính index, chúng ta đang truyền vào như là một thuộc tính tùy biến cho nút xoá. Đây là khóa duy nhất được sử dụng để nhận dạng từng phần tử để chúng ta có thể dễ dàng tham chiếu đến chúng khi cần thiết.

Cần lưu ý thuộc tính loaded. Cũng giống như <Page> có một thuộc tính loaded, các nút cũng có thể có một thuộc tính. Sau này bạn sẽ thấy cách thuộc tính này được sử dụng.

5. Code JavaScript

Bây giờ chúng ta sẵn sàng tìm hiểu về JavaScript dùng để làm cho mọi thứ hoạt động. Trong phần này, chúng ta sẽ viết code cho tập tin notes-page.js.

Khởi tạo

Đầu tiên chúng ta import data/observabledata/observable-array. Đây là các mô-đun được tích hợp trong NativeScript cho phép chúng ta tạo ra các đối tượng và mảng observable. Các Observable này cho phép chúng ta tự động cập nhật UI bất cứ khi nào các đối tượng và mảng này được cập nhật.

Trong ứng dụng của chúng ta, pageArray được sử dụng để lưu trữ các mảng ghi chú, và pageData được sử dụng để trói buộc nó vào trang. pageData cũng đóng vai trò là container chung cho tất cả dữ liệu mà chúng ta muốn hiển thị trên UI.

Tiếp theo, import tất cả các mô-đun khác mà chúng ta sẽ sử dụng trong trang này:

  • camera: để làm việc với camera của thiết bị.
  • view: để tham chiếu đến các phần tử cụ thể trong trang. Hãy hình dung về nó tương đương với document.getElementById trong NativeScript.
  • ui/enums: một từ điển toàn cục chứa các hằng cho bất cứ thứ gì liên quan đến UI.
  • ui/animation: dành cho các phần tử có hiệu ứng động.
  • application-settings: để lưu trữ dữ liệu cục bộ.
  • file-system: để làm việc với hệ thống tập tin.

Tiếp theo, hãy khởi tạo các giá trị cho các biến sẽ được sử dụng trong toàn bộ tập tin. page được sử dụng để lưu trữ một tham chiếu đến trang hiện tại, notesArr là bản sao của mảng các ghi chú hiện nằm trong trang và current_index là giá trị ban đầu của chỉ mục được sử dụng như là ID duy nhất cho mỗi ghi chú.

Hàm pageLoaded()

Các hàm trở nên hiện hữu trong ngữ cảnh của trang bằng cách sử dụng exports. Trước đó trong tập tin notes-page.xml, bạn đã thấy rằng hàm pageLoaded() được thực thi khi trang được tải.

Bên trong hàm pageLoaded(), chúng ta sẽ bắt đầu bằng cách tham chiếu đến trang. Sau đó chúng ta hiển thị form để tạo ghi chú mới, và lấy các giá trị được lưu trữ hiện tại của tiêu đề của ghi chú mới và các ghi chú từ các cài đặt ứng dụng.

Tiếp theo, vẫn ở bên trong hàm pageLoaded(), hãy kiểm tra xem có các ghi chú được lưu trữ cục bộ hay không. Nếu không, chúng ta tạo một mảng các ghi chú. Mảng này sẽ đóng vai trò như là nội dung mặc định cho người dùng mới của ứng dụng. Tuy nhiên, nếu đã có một số ghi chú đã được lưu trữ cục bộ, chúng ta chuyển đổi chúng sang một mảng và sau đó đẩy dữ liệu đó vào mảng observable.

Lưu ý, trước khi đẩy các phần tử vào mảng observable, trước tiên chúng ta kiểm tra xem nó có rỗng hay không. Chúng ta phải làm điều này vì sử dụng mô-đun camera thực thi sự kiện loaded trên trang một lần nữa sau khi một hình ảnh được chọn. Điều này có nghĩa là nếu chúng ta không cẩn thận, chúng ta sẽ vô tình đẩy các bản sao vào trong mảng mỗi khi người dùng sử dụng camera.

Bây giờ chúng ta đã thiết lập dữ liệu ghi chú, chúng ta có thể cập nhật tiêu đề của trang bằng cách thiết lập thuộc tính item_title của nó thành giá trị mà chúng ta nhận được từ các cài đặt ứng dụng trước đó. Sau đó liên kết pageData vào trang để cho UI tự động được cập nhật bất cứ khi nào có sự thay đổi đối với các phần tử mà chúng ta đã thiết lập.

Tạo hiệu ứng động cho form khi tạo các ghi chú mới. Chúng ta thực hiện việc này bằng cách sử dụng hàm getViewById trong view và truyền vào context (trang hiện tại) như là đối số đầu tiên và thuộc tính id gán cho phần tử mà bạn muốn thao tác.

Tiếp theo, gọi hàm animate. Hàm này nhận một đối tượng có chứa các cài đặt hiệu ứng động. Ở đây chúng ta muốn form trượt xuống 160 pixel từ vị trí ban đầu của nó trong một khoảng thời gian 800 mili giây.

Hàm newNote()

Hàm newNote() được thực thi khi người dùng chạm vào phần tử hành động New Item trên phần header. Việc này sẽ ẩn và hiển thị ListView của phần tử mới và trượt form lên hoặc xuống tùy thuộc vào giá trị hiện tại của showForm.

Nếu showFormtrue, có nghĩa là hiện nó đang hiển thị, chúng ta thay đổi opacity (độ mờ) của ListView thành 1 trong suốt 400 mili giây, và sau đó trượt form lên để ẩn nó. Nếu không, chúng ta ẩn ListView và trượt form xuống.

Hàm btnLoaded()

Trong tập tin notes-page.xml, chúng ta có một thuộc tính loaded bên trong nút để xoá một ghi chú. Đây là hàm được thực thi khi sự kiện đó xảy ra.

Mặc định, hàm này được gán vào thuộc tính itemTap trong ListView sẽ không được thực thi khi một nút được định nghĩa bên trong một phần tử ListView. Điều này là do NativeScript giả định rằng các hành động được thực thi cho mỗi phần tử trong danh sách chỉ có thể được kích hoạt từ các nút đó.

Đoạn code bên dưới đây là một giải pháp cho hành vi mặc định đó. Về cơ bản, việc này loại bỏ focus trên nút xóa để bạn vẫn có thể thực thi một hàm khi một người dùng chạm vào một phần tử ListView. Trong trường hợp này, chúng ta không thật sự cần code này vì chúng ta không chỉ định bất kỳ chức năng nào cho việc chạm phần tử, nhưng nó là một công cụ tốt cần có khi làm việc với các danh sách.

Hàm openCamera()

Tiếp theo là hàm openCamera(), được thực thi khi người dùng chạm vào nút Attach Image. Trạng thái hiện tại không được duy trì khi sử dụng mô-đun camera, vì vậy trước tiên chúng ta cần lưu tiêu đề của ghi chú mới vào các cài đặt của ứng dụng.

Sau đó chúng ta có thể khởi chạy ứng dụng camera mặc định trên thiết bị bằng cách gọi phương thức takePicture(). Phương thức này nhận một đối tượng có chứa các cài đặt hình ảnh. Một khi người dùng đã chụp một bức ảnh và nhấn vào nút Save trong Android hoặc nút use image trên iOS, promise phân giải và hàm callback được truyền vào then() được thực thi.

Hình ảnh thật sự được truyền như một đối số vào hàm, và chúng ta sử dụng điều này để lưu tập tin vào đường dẫn của tài liệu. Một khi điều đó được hoàn tất, chúng ta lưu trữ đường dẫn tập tin đầy đủ vào các cài đặt ứng dụng và trạng thái hiện tại của ứng dụng để chúng ta có thể lấy giá trị đó sau này, trước khi lưu ghi chú.

Hàm saveNote()

Hàm saveNote() được thực thi khi người dùng chạm vào nút Save Note. Hàm này sẽ lấy giá trị hiện tại của trường tiêu đề của ghi chú và đường dẫn của hình ảnh, tăng current_index lên, và đẩy phần tử mới vào mảng ghi chú thuần tuý và mảng ghi chú observable. Sau đó, nó lưu các ghi chú hiện tại và current_index vào các cài đặt ứng dụng, xoá bỏ các giá trị cho ghi chú mới khỏi các cài đặt ứng dụng, cập nhật UI để cho form hiển thị trạng thái rỗng của nó, và hiển thị danh sách trong khi ẩn form New Note.

Hàm deleteNote()

Cuối cùng, chúng ta có hàm deleteNote() được thực thi khi một người dùng chạm vào nút xóa bên trong một phần tử trong danh sách. Như bạn đã thấy từ các hàm trước đó, một đối tượng được truyền như là một đối số cho các hàm được đính kèm như một trình xử lý sự kiện cho một thành phần cụ thể. Đối tượng này có thuộc tính object, nó tham chiếu đến chính thành phần đó.

Từ đó, bạn có thể lấy giá trị của một thuộc tính đã được truyền vào nó. Trong trường hợp này, chúng ta đang lấy giá trị của thuộc tính index, và chúng ta sử dụng nó để lấy chỉ mục thật sự của phần tử mà chúng ta muốn xóa.

6. Thêm Phong cách

Mở tập tin app.css và thêm các phong cách toàn cục sau đây:

Nếu bạn muốn áp dụng các phong cách cho trang cụ thể, bạn cũng có thể tạo một tập tin notes-page.css và định nghĩa các phong cách của bạn ở đó.

7. Chạy và Gỡ lỗi Ứng dụng

Bạn có thể chạy ứng dụng trên thiết bị của bạn bằng cách chạy lệnh tns run và sau đó là nền tảng mà bạn muốn triển khai. Ở đây là một ví dụ dành cho Android:

Việc này sẽ tự động cài đặt nền tảng Android cho bạn nếu nó vẫn chưa được cài đặt và sau đó chạy ứng dụng trên thiết bị của bạn một khi đã cài đặt xong. Một khi ứng dụng đang chạy, bạn có thể chạy lệnh tns livesync android --watch để tự động làm mới ứng dụng mỗi khi bạn thay đổi các tập tin mã nguồn.

Gỡ lỗi

Cũng giống như bất kỳ framework ứng dụng nào khác, NativeScript cho phép các nhà phát triển gỡ lỗi ứng dụng của họ. Điều này được thực hiện bằng các công cụ phát triển trên Chrome. Có hai cách để làm điều này:

  1. Nếu đã có một ứng dụng đang chạy, bạn có thể mở một cửa sổ terminal mới và chạy lệnh tns debug android --start để gắn một trình gỡ lỗi vào đối tượng hiện đang chạy của ứng dụng.
  2. Nếu bạn vẫn chưa có ứng dụng nào đang chạy, hãy sử dụng lệnh tns debug android --debug-brk để xây dựng một đối tượng của ứng dụng cùng với một trình gỡ lỗi kèm theo nó.

Cho dù bạn chọn cách nào, việc này sẽ mở ra một tab mới trong trình duyệt Google Chrome cho phép bạn gỡ lỗi ứng dụng giống như một ứng dụng web JavaScript bình thường. Điều này có nghĩa là bạn thật sự có thể sử dụng console.log trong mã nguồn của bạn để phân tích nội dung của các biến mà bạn đang làm việc với chúng.

Tóm tắt và Bước tiếp theo

Trong bài này, bạn đã được học cách xây dựng một ứng dụng bằng NativeScript. Cụ thể, bạn đã học được các khái niệm chẳng hạn như sử dụng các thành phần UI, bố cục, phong cách, hiệu ứng động, sử dụng camera của thiết bị và duy trì trạng thái ứng dụng bằng các cài đặt ứng dụng.

Bây giờ thì bạn đã xây dựng được ứng dụng NativeScript đầu tiên của mình, đây là lúc để bạn nâng cao kỹ năng của mình hơn nữa bằng cách tìm hiểu xem bạn còn có thể làm được gì nữa với NativeScript và xây dựng thêm một số ứng dụng với nó.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.