3. Ionic Native FAQ
4.4.7 Đặc tả Use-case “Tìm địa chỉ liên hệ”
Tên chức năng Tìm địa chỉ liên hệ
Tóm tắt Use-case được tạo ra người dùng xem địa chỉ thông tin liên hệ trên google map
Dòng sự kiện chính 1. Actor chọn liên hệ trong danh sách ưa thích hoặc danh sách tất cả liên hệ
2. Hệ thống hiển thị Màn hình thông tin chi tiết liên hệ 3. Actor chọn vào mục Address trong thông tin để chuyển đến tìm kiếm vị trí trên google map
Dòng sự kiện khác Địa chỉ không chính xác => google map hiển thị không chính xác
Các yêu cầu đặc biệt Không có Trạng thái hệ thống trước
khi thực hiện use case
Actor: Người dùng
Trạng thái hệ thống sau khi thực thiện use case
Hệ thống điều hướng sang google map và hiển thị đại chỉ đó trên map.
Điểm mở rộng Không có
CHƯƠNG 5: PHÂN TÍCH 5.1 Sơ đồ lớp
5.1.2 Danh sách các lớp đối tượng và quan hệ
STT Tên lớp/quan hệ Loại Ý nghĩa/ghi chú
1 ContactService Class Kiểm tra tài khoản được filter có quyền hay không
2 PhotoService Class Kiểm tra tài khoản đã đăng nhập chưa
3 MapService Interface Khai báo phương thức lấy roles của một tài khoản
4 CallService Class Khai báo các trường search
parameters khi request khi client gửi request tìm kiếm laptop
5.1.3 Mô tả chi tiết từng lớp đối tượng
5.1.3.1 ContactService
- Danh sách các phương thức:
STT Tên phương thức Loại Ý nghĩa
1 getContacts private Lấy danh sách liên hệ
2 getContactsFavorite public Lấy danh sách liên hệ được ưa thích
3 getArrAlpha private Lấy mảng ký tự đầu trường name trong tất cả danh sách liên hệ 4 createContact private Tạo mới liên hệ
5.1.3.2 MapService
- Danh sách các phương thức:
5.1.3.3 CallService
STT Tên phương thức Loại Ý nghĩa
1 Call private Chuyển hướng đến cuộc gọi đàm thoại
5.1.3.4 PhotoService
STT Tên phương thức Loại Ý nghĩa
1 addNewToGallery private Mở máy ảnh và chụp ảnh 2 savePicture private Lưu file ảnh vào storage 3 deletePicture private Xóa ảnh khỏi stogare
5.2 Sơ đồ sequence 5.2.1 Cập nhật liên hệ 5.2.1 Cập nhật liên hệ
5 updateContact private Cập nhật thông tin liên hệ 6 deleteContact private Xóa liên hệ
STT Tên phương thức Loại Ý nghĩa
1 goToMap() private Điều hướng đến vị trí trên google map
5.2.2 Thêm mới liên hệ
CHƯƠNG 6: THIẾT KẾ DỮ LIỆU
6.1 Sơ đồ logic
6.2 Danh sách các bảng dữ liệu trong sơ đồ
STT Tên bảng dữ liệu Diễn giải
1 CONTACT Danh sách các thông tin liên hệ
6.3 Mô tả chi tiết các kiểu dữ liệu trong sơ đồ logic
6.3.1 Bảng CONTACT
STT Thuộc tính Kiểu dữ liệu Ràng buộc
Ý nghĩa/ghi chú
1 ID string Notnull,
PK
Mã contact
2 NAME string Tên
3 FAX string Số điện thoại
4 MOBILE string Số điện thoại
5 ADDRESS string Địa chỉ
6 FACEBOOK string Link facebook
7 EMAIL string Email
8 AVATAR object File ảnh
9 BACKGROUND object File ảnh
10 ISFAVORITE bool Đánh dấu là ưa thích
hoặc không
11 ORGANIZATION string Làm việc học tập tại
6.3.2 Bảng PHOTO
STT Thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa/ghi chú
1 KEY string Notnull,
PK
Mã ảnh
2 FILEPATH string Tên
3 WEBVIEWPATH string Đường dẫn file
CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 7.1 Kiến trúc hệ thống
Sử dụng Mô hình MVVM
7.2 Mô tả chi tiết từng thành phần trong mô hình
7.2.1 View
Tương tự như trong mô hình MVC, View là phần giao diện của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng. Một điểm khác biệt so với các ứng dụng truyền thống là View trong mô hình này tích cực hơn. Nó có khả năng thực hiện các hành vi và phản hồi lại người dùng thông qua tính năng binding, command.
7.2.2 View Model
Lớp trung gian giữa View và Model. ViewModel có thể được xem là thành phần thay thế cho Controller trong mô hình MVC. Nó chứa các mã lệnh cần thiết để thực hiện data binding, command.
7.2.3 Model
Cũng tương tự như trong mô hình MVC. Model là các đối tượng giúp truy xuất và thao tác trên dữ liệu thực sự.
CHƯƠNG 8: THIẾT KẾ GIAO DIỆN 8.1 Sơ đồ liên kết các màn hình 8.2 Danh sách các màn hình STT Màn hình Loại màn hình Chức năng 1 Màn hình Contacts Màn hình chính
Liệt kê danh sách liên hệ
2
Màn hình Favorite Màn hình chính Liệt kê danh sách liên hệ ưa thích
3 Màn hình Quét mã
QR code Màn hình chính
Quét mã QR để lấy thông tin liên hệ
4 Màn hình Thêm liên
hệ Nhập liệu Thêm mới một liên hệ
5 Màn hình Cập nhật
liên hệ Nhập liệu Thay đổi thông tin liên hệ 6
Màn hình Sinh QR
code Thông tin
Tạo mã QR chia sẻ thông tin liên hệ
7
Màn hình Chi tiết liên
hệ Thông tin
Hiển thị thông tin chi tiết của liên hệ
8.3 Mô tả chi tiết các màn hình
8.3.1. Màn hình Contacts và Favorite
CHƯƠNG 9: NHẬN XÉT VÀ KẾT LUẬN
9.1 Môi trường phát triển và Môi trường triển khai 9.1.1 Môi trường phát triển ứng dụng 9.1.1 Môi trường phát triển ứng dụng
- Sử dụng Ionic Framework xây dựng giao diện người dùng, xử lí dữ liệu và tương tác người dùng thông qua dạng ngôn ngữ TypeScript.
- Sử dụng Visual Studio Code làm trình soạn thảo thay cho các IDE.
- Sử dụng các phương thức dựng sẵn từ Storage API để lấy dữ liệu lưu trong Local Storage - Sử dụng một số chức năng do Cordova cung cấp như Camera, Call Number.
9.1.2 Môi trường triển khai ứng dụng
- Ứng dụng chạy đa nền tảng trên môi trường windowsphone, android, ios. - Client side được triển khai trên nền tảng Ionic framework.
- Sử dụng Local Storage để lưu dữ liệu
9.2 Kết quả đạt được
Sau thời gian thực hiện đề tài, chương trình đã hoàn thành và đạt được một số kết quả sau : - Tìm hiểu cơ bản về Ionic framework
- Hiểu và nắm được hybrid app, cách xây dựng và triển khai đa nền tảng - Xây dựng thành công Ứng dụng lưu trữ thông tin cá nhân đơn giản - Giao diện chương trình thân thiện, dễ sử dụng.
- Hiểu và nắm được các kiến thức về MV pattern.
9.3 Nhận xét
9.3.1 Ưu điểm
Độ tin cậy: Hệ thống có thể kiểm tra dữ liệu nhập vào và cho phép tự động thực hiện một số kiểm tra tự động đối chiếu và tìm những bản ghi có sự chênh lệch về dữ liệu, thông báo nhập sai để khắc phục.
Tính bảo mật: Hệ thống ứng dụng tương tự ứng dụng Danh bạ, là hệ thống ofline cho nên dữ liệu không cần tính bảo mật cao, mức độ bảo mật phụ thuộc vào cá nhân sử dụng ứng dụng
Dễ sử dụng: Chương trình được thiết kế trên giao diện thân thiện, hộp thoại và hướng dẫn sử dụng hợp lý.
9.3.2 Khuyết điểm
Chỉ mới triển khai test ứng dụng được trên hệ điều hành Android. Sản phẩm chỉ mới chạy trên local.
Phần mềm chưa có khả năng backup dữ liệu
9.4 Hướng phát triển
Do hạn chế về thời gian nghiên cứu và kinh nghiệm, nhóm chỉ phát triển ở mức độ hoàn thành các yêu cầu đặt ra của đề tài, tốc độ xử lý chưa hoàn thiện. Nhóm sẽ cố gắng tìm hiểu sâu có phương pháp quản lý hệ thống cũng như xử lý khối dữ liệu lớn với hiệu quả cao, mở rộng phạm vi của dự án này. Dưới đây là các hướng phát triển để cải thiện chất lượng phần mềm.
Phát triển cho phần mềm có khả năng cài đặt tự backup, restore dữ liệu. Thực hiện ghi lại nhật kí hoạt động của người dùng.
Phát triển phần mềm có khả năng đồng bộ với dữ liệu đám mây Thêm chức năng lấy ảnh từ thiết bị
BẢNG PHÂN CHIA CÔNG VIỆC
STT MSSV Công việc được giao Mức độ hoàn thành
(%)
1 17521236
- Tìm hiểu ionic, angular
- Xác định các yêu cầu phần mềm - Thiết kế API
- Hiện thực API - Thiết kế giao diện - Kiểm thử phần mềm
100%
2 17521062
- Tìm hiểu ionic, angular - Thiết kế API
- Vẽ sơ đồ lớp, sơ đồ logic - Kiểm thử phần mềm - Viết báo cáo
TÀI LIỆU THAM KHẢO
[1] Ionic document: https://ionicframework.com/docs [2] Angular document: https://angular.io/
[3] TypeScript language document:
https://www.typescriptlang.org/docs/home.html
[4] Capacitor document: https://capacitorjs.com/docs/android [5] Fix bug: https://stackoverflow.com
[6] Các bài học online trên youtube. [7] https://www.npmjs.com/