3. Ionic Native FAQ
3.2 Yêu cầu phi chức năng
Hiệu năng Dung lượng ứng dụng nhỏ, tốc độ xử lí nhanh Bảo trì Thời gian bảo trì hệ thống là 1 lần/tháng
Tương thích Hệ thống được đảm bảo chạy trên Android và IOS
Mở rộng Có khả năng phát triển thêm những tính năng mà user yêu cầu Có thể chia nhỏ dữ liệu để dễ dàng lưu trữ
CHƯƠNG 4: MÔ HÌNH USE-CASE 4.1 Sơ đồ Use-case tổng quát:
STT Tên Mô tả
1 Người dùng Quản lí ứng dụng
4.3 Danh sách các Use-case
STT Tên Use-case Ý nghĩa/Ghi chú
1 Tìm kiếm liên hệ Use-case tìm kiếm liên hệ theo các thông tin liên quan
2 Thêm liên hệ Use-case thêm liên hệ mới vào danh sách liên hệ
3 Xem danh sách tất cả liên hệ
Use-case cho phép xem danh sách tất cả liên hệ
4 Xem danh sách liên hệ ưa thích
Use-case cho phép xem danh sách tất cả liên hệ nằm trong danh sách ưa thích
5 Cập nhật liên hệ Use-case được tạo ra để cập nhật thông tin liên hệ
6 Gọi điện thoại Use-case được tạo ra cho phép người dùng gọi đến số điện thoại liên hệ
7 Tìm địa chỉ liên hệ Use-case hiển thị địa chỉ liên hệ trên google map
8 Xóa liên hệ Use-case được tạo ra để xóa liên hệ 9 Điều hướng đến mạng xã
hội
Use-case cho phép ứng dụng điều hướng đến trang mạng xã hội facebook
10 Thêm ưa thích Use-case lưu thông tin liên hệ vào danh sách ưa thích.
11 Xem chi tiết liên hệ Use-case được tạo ra để xem thông tin chi tiết của một liên hệ
4.4 Đặc tả Use-case
4.4.1 Đặc tả Use-case “Tìm kiếm liên hệ”
Tên chức năng Tìm kiếm liên hệ
Tóm tắt Use-case được tạo ra để người dùng có thể tìm kiếm thông tin liên hệ
Dòng sự kiện chính 1. Hệ thống hiển thị màn hình Danh sách liên hệ. 2. Actor nhập thông tin liên hệ liên quan vào ô search 3. Hệ thống kiểm tra thông tin
4. Hệ thống hiển thị Danh sách liên hệ tìm được
Dòng sự kiện khác Hệ thống không hiển thị liên hệ nào nếu thông tin tìm kiếm không tồn tại
Các yêu cầu đặc biệt Không có Trạng thái hệ thống trước
khi thực thiện use case
Actor: Người dùng Điều kiện: không có Trạng thái hệ thống sau
khi thực hiện use case
Cho phép người dùng thực hiện các chức năng
Điểm mở rộng Không có
4.4.2 Đặc tả Use-case “Thêm liên hệ”
Tên chức năng Thêm liên hệ
Tóm tắt Use-case được tạo ra để thêm một liên hệ mới vào danh sách liên hệ
Dòng sự kiện chính 1. Hệ thống hiển thị màn Thêm liên hệ. 2. Actor nhập đầy đủ thông tin ( nếu có ) 3. Hệ thống kiểm tra thông tin đăng ký 4. Hệ thống hiển thị thông báo thành công.
Dòng sự kiện khác Hệ thống hiển thị thông báo không hợp lệ. Yêu cầu người dùng nhập lại thông tin.
Các yêu cầu đặc biệt Không có Trạng thái hệ thống trước
khi thực thiện use case
Actor: Người dùng Điều kiện: không có Trạng thái hệ thống sau
khi thực hiện use case
Hệ thống hiển thị màn hình Danh sách liên hệ
Điểm mở rộng Không có
4.4.3 Đặc tả Use-case “Xóa liên hệ”
Tên chức năng Xóa liên hệ
Tóm tắt Use-case được tạo ra để Actor có thể xóa liên hệ ra khỏi danh sách liên hệ
Dòng sự kiện chính 1. Vào Màn hình Danh sách liên hệ 2. Tìm kiếm và chọn liên hệ cần xóa 3. Xóa liên hệ
4. Hệ thống thông báo thành công. Dòng sự kiện khác Không 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 hiển thị danh sách liên hệ mới sau khi xóa
Điểm mở rộng Không có
4.4.4 Đặc tả Use-case “Cập nhật liên hệ”
Tên chức năng Cập nhật liên hệ
Tóm tắt Use-case được tạo ra cho phép người dùng thay đổi thông tin liên hệ.
Dòng sự kiện chính 1. Actor chọn liên hệ cần cập nhật 2. Chọn cập nhật liên hệ
3. Hệ thống hiển thị màn hình chỉnh sửa 4. Actor xác nhận cập nhật
5. Hệ thông kiểm tra tính hợp lý của thông tin 6. Thông báo cập nhật thành công
Dòng sự kiện khác Hệ thống thông báo lỗi với thông tin nhập vào không hợp lệ.
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
Quay trở lại màn hình chi tiết thông tin liên hệ sau khi chỉnh sửa
Điểm mở rộng Không có
4.4.5 Đặc tả Use-case “Gọi điện thoại”
Tên chức năng Gọi điện thoại đến chủ liên hệ
Tóm tắt Use-case được tạo ra cho phép người dùng gọi điện thoại đến số điện thoại của chủ thuê bao trong thông tin chi tiết
Dòng sự kiện chính 1. Chọn liên hệ cần kết nối đàm thoại
2. Hệ thống hiển thị màn hình chi tiết liên hệ 3. Actor chọn thông tin số điện thoại.
4. Hệ thống chuyển đến cuộc gọi với chủ thuê bao Dòng sự kiện khác Không 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 hiển thị cuộc gọi đến số điện thoại
Điểm mở rộng Không có
4.4.6 Đặc tả Use-case “Thêm ưa thích”
Tóm tắt Use-case được tạo ra người dùng thêm những liên hệ quan trọng, thân thiết vào mục ưa thích để dễ tìm kiếm.
Dòng sự kiện chính 1. Actor chọn liên hệ
2. Check nút favorite trên trang chi tiết
Dòng sự kiện khác Hủy check nếu liên hệ đã được thêm vào ưa thích trướ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 lưu thông tin liên hệ vào mục ưa thích. Hiển thị màn hình ưa thích sau khi thêm.
Điểm mở rộng Không có
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/