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

Viết một Ứng dụng NativeScript theo Thời gian thực: SQLite

This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Geolocation and Google Maps
Code a Real-Time NativeScript App: Social Login and Firebase

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

NativeScript là một framework dùng để xây dựng các ứng dụng di động đa nền tảng bằng XML, CSS và JavaScript. Trong loạt bài này, chúng ta đang thử một số tính năng thú vị mà bạn có thể làm với một ứng dụng NativeScript: định vị và tích hợp Google Maps, cơ sở dữ liệu SQLite, tích hợp Firebase và thông báo đẩy. Song song đó, chúng ta đang xây dựng một ứng dụng theo dõi hoạt động thể thao với các khả năng theo thời gian thực sẽ sử dụng từng tính năng này.

Trong bài hướng dẫn này, bạn sẽ học cách tích hợp cơ sở dữ liệu SQLite vào ứng dụng để lưu dữ liệu cục bộ. Cụ thể, chúng ta sẽ lưu trữ dữ liệu về các lần đi bộ mà chúng ta tập hợp được trong bài hướng dẫn trước đó.

Những gì chúng ta sẽ thực hiện

Tiếp hướng dẫn trước, bạn sẽ thêm một tab view để hiển thị các phần khác nhau của ứng dụng. Trước đó, ứng dụng của chúng ta chỉ có trang Tracking, vì vậy chúng ta không cần tab. Trong bài viết này, chúng ta sẽ thêm trang Walks. Trang này sẽ hiển thị những lần đi bộ của người dùng. Một điểm dữ liệu mới sẽ được thêm vào đây mỗi khi người dùng theo dõi buổi đi bộ của họ. Cũng sẽ có một hàm để xóa dữ liệu.

Kết quả sau cùng sẽ như sau:

SQL Lite Final Output

Thiết lập Dự án

Nếu bạn đã theo dõi hướng dẫn trước về định vị, bạn chỉ cần sử dụng dự án đó và xây dựng các tính năng mà chúng ta sẽ thêm vào trong hướng dẫn này. Nếu không, bạn có thể tạo một dự án mới và sao chép các tập tin khởi đầu vào thư mục app của dự án.

Sau đó, bạn cũng cần phải cài đặt các plugin Geolocation và Google Maps:

Một khi đã cài đặt xong, bạn cần cấu hình plugin Google Maps. Bạn có thể đọc hướng dẫn đầy đủ về cách thực hiện việc này bằng cách đọc phần Cài đặt Plugin Google Maps trong hướng dẫn trước.

Một khi tất cả những việc đó đã được thực hiện xong, bạn có thể tiếp tục theo dõi hướng dẫn này.

Chạy Dự án

Bạn có thể chạy dự án bằng cách thực thi lệnh tns run android. Nhưng vì ứng dụng này sẽ xây dựng dựa trên các chức năng định vị, tôi khuyên bạn nên sử dụng một GPS emulator để nhanh chóng thiết lập và thay đổi vị trí của bạn. Bạn có thể đọc về cách thực hiện việc này trong phần Chạy Ứng dụng trong hướng dẫn trước.

Cài đặt Plugin SQLite

Điều đầu tiên bạn cần làm để bắt đầu làm việc với SQLite là cài đặt plugin:

Việc này cho phép bạn thực hiện những công việc như kết nối đến một cơ sở dữ liệu và thực hiện các thao tác CRUD (tạo, đọc, cập nhật, xóa) trên đó.

Kết nối đến Cơ sở dữ liệu

Mở tập tin main-page.js và import plugin SQLite:

Giờ đây bạn có thể kết nối đến cơ sở dữ liệu:

Tập tin walks.db được tạo ra từ terminal bằng lệnh touch, vì vậy, nó chỉ là một tập tin rỗng. Hãy sao chép nó vào trong thư mục app.

Nếu nó kết nối thành công, hàm phân giải của promise sẽ được thực thi. Bên trong đó, chúng ta chạy lệnh SQL để tạo bảng walks. Để cho mọi thứ đơn giản, tất cả những gì chúng ta cần phải lưu là tổng khoảng cách đi được (tính bằng mét) và tổng số bước, cũng như thời điểm bắt đầu và kết thúc.

Một khi truy vấn thực thi thành công, chúng ta truyền đối tượng cơ sở dữ liệu (db) vào trong ngữ cảnh của trang. Điều này sẽ cho phép chúng ta sử dụng nó từ tập tin main-view-model.js sau này.

Truy xuất Dữ liệu

Bây giờ chúng ta đã sẵn sàng làm việc với dữ liệu. Nhưng vì chúng ta sẽ làm việc với ngày tháng, trước tiên chúng ta cần phải cài đặt một thư viện được gọi là fecha. Thư viện này cho phép chúng ta dễ dàng phân tích và định dạng ngày tháng:

Một khi nó đã được cài đặt, hãy mở tập tin main-view-model.js và bao gồm thư viện đó:

Tiếp theo là code dùng để kiểm tra xem định vị đã được kích hoạt hay chưa. Đầu tiên, tạo một biến (walk_id) để lưu trữ ID của một bản ghi dữ liệu đi bộ. Chúng ta cần điều này bởi vì ứng dụng sẽ ngay lập tức chèn vào một bản ghi dữ liệu đi bộ mới vào bảng walks khi người dùng bắt đầu theo dõi vị trí. walk_id sẽ lưu trữ ID được tự động tạo ra bởi SQLite, do đó chúng ta sẽ có thể cập nhật bản ghi một khi người dùng ngừng việc theo dõi.

Tiếp theo, truy vấn ngày tháng và năm hiện tại. Chúng ta sẽ sử dụng nó để truy vấn bảng dữ liệu sao cho nó chỉ trả về các bản ghi trong cùng tháng và năm. Điều này cho phép chúng ta giới hạn số lượng bản ghi xuất hiện trên UI.

Chúng ta cũng cần một biến để lưu mốc thời gian bắt đầu. Chúng ta sẽ sử dụng nó sau này để cập nhật UI. Điều này là bởi vì chúng ta chỉ truy vấn bảng dữ liệu một lần khi ứng dụng được nạp, vì vậy chúng ta cần phải cập nhật UI một cách thủ công khi có bất kỳ dữ liệu mới nào. Và vì mốc thời gian bắt đầu sẽ chỉ có một giá trị khi người dùng bắt đầu theo dõi, nên chúng ta cần phải khởi tạo nó bên ngoài phạm vi để chúng ta có thể cập nhật hoặc truy cập giá trị của nó sau này.

Khởi tạo dữ liệu đi bộ dùng để hiển thị trên UI:

Lấy dữ liệu từ bảng walks bằng phương thức all(). Ở đây, chúng ta sẽ cung cấp tháng và năm như là các tham số truy vấn. Hàm strftime() được sử dụng để trích xuất phần tháng và năm của start_datetime.

Khi một phản hồi thành công được trả về, chúng ta lặp qua bộ kết quả để chúng ta có thể định dạng dữ liệu một cách chính xác. Lưu ý rằng các chỉ mục trong đó chúng ta truy cập các giá trị riêng lẻ phụ thuộc vào cấu trúc của bảng dữ liệu đã được mô tả trước đó trong tập tin main-page.js. Cột đầu tiên là ID, cột thứ hai là tổng khoảng cách và vân vân.

Dữ liệu đã được định dạng sau đó được đẩy vào mảng walks và được sử dụng để cập nhật UI. has_walks được sử dụng như là một công tắc cho UI để chúng ta có thể hiển thị hoặc ẩn các thứ dựa trên giá trị của nó.

Điều này sẽ cung cấp dữ liệu cho ListView trong tập tin main-page.xml:

Lưu Dữ liệu

Một khi người dùng bắt đầu theo dõi, hãy thiết lập thời gian hiện tại là start_datetime và chèn các giá trị ban đầu vào bảng dữ liệu bằng hàm execSQL(). Cũng giống như hàm all(), hàm này nhận các truy vấn SQL làm đối số đầu tiên và một mảng các tham số làm đối số thứ hai.

Nếu truy vấn thành công, nó sẽ trả về ID tự động được tạo ra cho bản ghi đã chèn. Sau đó chúng ta gán nó thành giá trị cho walk_id để nó có thể được sử dụng sau này để cập nhật bản ghi cụ thể này.

Một khi người dùng ngừng theo dõi, chúng ta một lần nữa lấy mốc thời gian hiện tại và định dạng nó cho phù hợp để lưu trữ:

Vì chúng ta đã sắp thứ tự cho kết quả từ mới nhất đến cũ nhất, nên chúng ta sử dụng unshift() (thay vì push()) để thêm phần tử mới vào mảng walks.

Sau đó, một lần nữa chúng ta sử dụng hàm execSQL() để cập nhật bản ghi mà chúng ta đã chèn vào trước đó:

Đảm bảo di chuyển code cho việc thiết lập lại UI theo dõi (thiết lập lại tổng khoảng cách và số bước) bên trong hàm phân giải của promise để bạn có thể dễ dàng kiểm tra xem truy vấn cập nhật có thực thi thành công hay không.

Xoá Dữ liệu

Xóa dữ liệu được thực hiện bằng cách nhấp vào nút Clear Data bên dưới danh sách dữ liệu đi bộ:

Trong tập tin main-view-model.js, hãy thêm code cho việc xóa tất cả dữ liệu khỏi bảng walks. Nếu bạn đã từng sử dụng MySQL, bạn có thể thắc mắc tại sao chúng ta sử dụng truy vấn DELETE thay vì TRUNCATE để xoá bảng. À, đó là vì SQLite không có hàm TRUNCATE. Đó là lý do tại sao chúng ta phải sử dụng truy vấn DELETE không cung cấp một điều kiện do đó sẽ xóa tất cả các bản ghi hiện tại trong bảng.

Tóm tắt

Trong bài hướng dẫn này, bạn đã học được cách lưu trữ dữ liệu cục bộ trong các ứng dụng NativeScript bằng plugin SQLite. Như bạn thấy đó, SQLite cho phép bạn sử dụng lại các kỹ năng SQL có sẵn của bạn trong việc quản lý cơ sở dữ liệu cục bộ. Điều quan trọng cần chú ý là không phải tất cả các hàm mà bạn sử dụng trong MySQL đều được hỗ trợ trong SQLite. Vì vậy, hãy luôn luôn tham khảo tài liệu hướng dẫn nếu bạn không chắc chắn một hàm nào đó có được hỗ trợ hay không.

Nếu bạn muốn tìm hiểu về các tùy chọn khác cho việc lưu trữ dữ liệu trong các ứng dụng NativeScript, tôi khuyên bạn nên đọc bài viết này về Ứng dụng Offline với NativeScript.

Trong bài viết cuối cùng của loạt bài này, chúng ta sẽ thêm tính năng thông báo đẩy vào ứng dụng của chúng ta.

Trong lúc đó, hãy tham khảo một số bài viết khác của chúng tôi về NativeScript và phát triển ứng dụng di động đa nền tảng.

Để có một cái nhìn đầy đủ về NativeScript, hãy thử khoá học video của chúng tôi về Viết Ứng dụng Di động Với NativeScript. Trong khóa học này, Keyvan Kasaei sẽ hướng dẫn cho bạn từng bước cách xây dựng một ứng dụng đơn giản. Cùng với đó, bạn sẽ học cách cài đặt một quy trình phát triển ứng dụng đơn giản với các yêu cầu mạng, kiến ​​trúc MVVM và một số thành phần UI quan trọng nhất của NativeScript. Cuối khoá, bạn sẽ hiểu được tại sao bạn nên cân nhắc NativeScript cho dự án phát triển ứng dụng di động tiếp theo của bạn.

Advertisement
Advertisement
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.