Đồ án Tìm hiểu Angular, Ionic Framework và xây dựng ứng dụng minh

96 trang thiennha21 14/04/2022 10201

Download

Bạn đang xem 20 trang mẫu của tài liệu "Đồ án Tìm hiểu Angular, Ionic Framework và xây dựng ứng dụng minh", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

do_an_tim_hieu_angular_ionic_framework_va_xay_dung_ung_dung.pdf

Nội dung text: Đồ án Tìm hiểu Angular, Ionic Framework và xây dựng ứng dụng minh

ĐẠI HỌC QUỐC GIA TP. HCM ĐẠI HỌC CÔNG NGHỆ THÔNG TIN   BÁO CÁO ĐỒ ÁN 2 Lớp : SE122.L11 ĐỀ TÀI: TÌM HIỂU ANGULAR, IONIC FRAMEWORK VÀ XÂY DỰNG ỨNG DỤNG MINH GIÁO VIÊN HƯỚNG DẪN: ThS. Huỳnh Nguyễn Khắc Huy NHÓM THỰC HIỆN: Nguyễn Mạnh Tùng – 17521236 Trương Văn Thành – 17521062 TPHCM, Ngày 4 tháng 1 năm 2020
LỜI CẢM ƠN Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể hoàn thành đồ án môn học của mình. Chúng em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Nguyễn Khắc huy đã quan tâm, hướng dẫn, truyền đạt những kiến thức và kinh nghiệm cho chúng em trong suốt thời gian học tập môn Đồ án 2. Trong quá trình thực hiện nhóm chúng em chắc chăn không tránh khỏi được những sai sót, chính vì vậy, chúng em rất mong nhận được sự góp ý của thầy cô và các bạn nhằm hoàn thiện những kiến thức mà nhóm chúng em đã học tập và là hành trang để thực hiện tiếp các đề tài khác trong tương lai. Nhóm em xin chân thành cảm ơn quý Thầy Cô! TP. Hồ Chí Minh, ngày 4 tháng 1 năm 2020
NHẬN XÉT (của giảng viên)
MỤC LỤC LỜI CẢM ƠN 2 MỤC LỤC 4 PHẦN 0: MỤC ĐÍCH ĐỀ TÀI 9 PHẦN 1: TÌM HIỂU IONIC ANGULAR 10 CHƯƠNG 1: TỔNG QUAN IONIC 10 1. Tổng quan 10 1.1 Khái niệm 10 1.2 Mục Tiêu 10 1.3 Ưu điểm 11 1.4 Nhược điểm 12 1.5 Giấy phép 12 CHƯƠNG 2: TỔNG QUAN ANGULAR 19 1. Khái niệm 19 2. Những đặc điểm nổi bật 20 3. Ưu điểm 21 4. Nhược điểm 22 5. Cài đặt 22 CHƯƠNG 3: HƯỚNG DẪN CÀI ĐẶT VÀ CHẠY ỨNG DỤNG IONIC 22 1. Cài đặt môi trường 22 2. Cài đặt CLI 23 3. Triển khai trên Android 25 3.1. Yêu cầu 25 3.2. Hướng dẫn thiết lập Android Studio 25 3.3. Thiết lập dự án 26 3.4. Chạy ứng dụng với Capacitor hoặc Cordova 27 4. Triển khai trên iOS 28 4.1. Yêu cầu 28 4.2. Thiết lập dự án 28 4.3. Chạy ứng dụng với Xcode 29 CHƯƠNG 4: LAYOUT 30
1. Cấu trúc 30 1.1. Header and Footer Layout 30 1.2. Tabs Layout 30 1.3. Menu Layout 31 2. Responsive Grid 33 3. Css 33 3.1. Colors 33 3.2. Text Modification 35 3.3. Element Placement 37 3.4. Element Display 38 3.5. Content Space 38 3.6. Flex Properties 40 3.7. Border Display 43 3.8. Ionic Breakpoints 44 CHƯƠNG 5: COMPONENTS 45 CHƯƠNG 6: NATIVE 48 1. Giới thiệu 48 2. Thiết lập 48 2.1. Ionic Native Community là gì? 48 2.2. Usage 48 3. Ionic Native FAQ 55 3.1. Use the Ionic CLI to add/update/delete plugins. 55 3.2. Upgrade plugins by removing, then re-adding them. 56 3.3. Install explicit versions 56 3.4. Restore Cordova in an existing Ionic project 56 3.5. Troubleshoot Cordova issues with Ionic CLI commands 56 PHẦN 2: XÂY DỰNG ỨNG DỤNG MINH HỌA 56 CHƯƠNG 1: PHÁT BIỂU BÀI TOÁN 56 1.1. Giới thiệu bài toán cần giải quyết 57 1.1.1. Nhu cầu thực tế của đề tài 57 1.1.2 Mục tiêu đề tài 57 1.2. Mô tả quy trình thực hiện 57 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 58 2.1 Hiện trạng tổ chức 58
2.1.1 Sơ đồ tổ chức hệ thống 58 2.1.2 Chức năng của Người dùng 58 2.2 Hiện trạng tin học 58 2.3 Hiện trạng nghiệp vụ 58 2.3.1 Mô tả nghiệp vụ 58 2.3.2 Sơ đồ hiện trạng nghiệp vụ 59 2.3.3 Bảng mô tả công việc 59 CHƯƠNG 3: XÁC ĐỊNH CÁC YÊU CẦU PHẦN MỀM 61 3.1 Yêu cầu chức năng 61 3.2 Yêu cầu phi chức năng 61 CHƯƠNG 4: MÔ HÌNH USE-CASE 63 4.1 Sơ đồ Use-case tổng quát: 63 4.2 Danh sách các Actor 63 4.3 Danh sách các Use-case 64 4.4 Đặc tả Use-case 65 4.4.1 Đặc tả Use-case “Tìm kiếm liên hệ” 65 4.4.2 Đặc tả Use-case “Thêm liên hệ” 66 4.4.3 Đặc tả Use-case “Xóa liên hệ” 67 4.4.4 Đặc tả Use-case “Cập nhật liên hệ” 68 4.4.5 Đặc tả Use-case “Gọi điện thoại” 69 4.4.6 Đặc tả Use-case “Thêm ưa thích” 70 4.4.7 Đặc tả Use-case “Tìm địa chỉ liên hệ” 71 CHƯƠNG 5: PHÂN TÍCH 72 5.1 Sơ đồ lớp 72 5.1.1 Sơ đồ lớp (mức phân tích) 72 5.1.2 Danh sách các lớp đối tượng và quan hệ 74 5.1.3 Mô tả chi tiết từng lớp đối tượng 74 5.2 Sơ đồ sequence 75 5.2.1 Cập nhật liên hệ 75 5.2.2 Thêm mới liên hệ 76 5.2.3 Xóa thông tin liên hệ 76 CHƯƠNG 6: THIẾT KẾ DỮ LIỆU 78 6.1 Sơ đồ logic 78 6.2 Danh sách các bảng dữ liệu trong sơ đồ 78 6.3 Mô tả chi tiết các kiểu dữ liệu trong sơ đồ logic 79
6.3.1 Bảng CONTACT 79 6.3.2 Bảng PHOTO 80 CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 81 7.1 Kiến trúc hệ thống 81 7.2 Mô tả chi tiết từng thành phần trong mô hình 81 7.2.1 View 81 7.2.2 View Model 81 7.2.3 Model 81 CHƯƠNG 8: THIẾT KẾ GIAO DIỆN 82 8.1 Sơ đồ liên kết các màn hình 82 8.2 Danh sách các màn hình 82 8.3 Mô tả chi tiết các màn hình 84 8.3.1. Màn hình Contacts và Favorite 84 8.3.2. Màn hình Thêm liên hệ 85 8.3.3. Màn hình Tìm kiếm liên hệ 86 8.3.4. Màn hình Chỉnh sửa liên hệ 87 8.3.5. Màn hình gọi thoại 88 8.3.6. Màn hình quét QR code 89 8.3.7. Màn hình QR code 90 8.3.8. Màn hình Chi tiết liên hệ 91 8.3.9. Màn hình địa chỉ google map 92 CHƯƠNG 9: NHẬN XÉT VÀ KẾT LUẬN 93 9.1 Môi trường phát triển và Môi trường triển khai 93 9.1.1 Môi trường phát triển ứng dụng 93 9.1.2 Môi trường triển khai ứng dụng 93 9.2 Kết quả đạt được 93 9.3 Nhận xét 93 9.3.1 Ưu điểm 93 9.3.2 Khuyết điểm 94 9.4 Hướng phát triển 94 BẢNG PHÂN CHIA CÔNG VIỆC 95 TÀI LIỆU THAM KHẢO 96
PHẦN 0: MỤC ĐÍCH ĐỀ TÀI - Tìm hiểu khái niệm, các tính năng nổi bật, ưu nhược điểm của Ionic, Angular và Cordova Framework - Nắm được các dòng lệnh command-line quan trọng trong Ionic, Angular Framework và các yêu cầu cần thiết để triển khai cho một ứng dụng trên hai nền tảng iOS và Android (bao gồm trình mô phỏng và thiết bị ). - Xây dựng hybrid app minh họa lưu trữ thông tin cá nhân, bạn bè với sự kết hợp giữa Angular và Ionic với một số API do Cordova cung cấp: Camera, Native Storage, Call Number,
PHẦN 1: TÌM HIỂU IONIC ANGULAR CHƯƠNG 1: TỔNG QUAN IONIC 1. Tổng quan 1.1 Khái niệm Ionic là một Framework cung cấp bộ công cụ giao diện người dùng mã nguồn mở để xây dựng các ứng dụng di động và máy tính để bàn chất lượng cao sử dụng công nghệ web - HTML, CSS và JavaScript Kết hợp với các framework javascript phổ biến khác: - Vue - Angular - React 1.2 Mục Tiêu a. Đa nền tảng Xây dựng và triển khai các ứng dụng hybrid trên iOS, Android, máy tính để bàn và web dưới dạng Progressive Web App - tất cả đều có một cơ sở mã. Viết một lần, chạy bất cứ nơi nào. b. Dựa trên Tiêu chuẩn Web công nghệ web tiêu chuẩn hóa: HTML, CSS và JavaScript, sử dụng các API Web hiện đại như Custom Elements và Shadow DOM. Bởi vì điều này, các thành phần Ionic có một API ổn định, và không theo ý thích của một nhà cung cấp nền tảng duy nhất. c. Thiết kế đẹp Ionic Framework được thiết kế để hoạt động và hiển thị tuyệt đẹp out-of-the- box trên tất cả các nền tảng. Bắt đầu với các thành phần được thiết kế sẵn, kiểu chữ, mô hình tương tác và chủ đề cơ sở tuyệt đẹp (nhưng có thể mở rộng).
d. Đơn giản Ionic Framework được xây dựng với sự đơn giản trong tâm trí, để tạo ra các ứng dụng Ionic là thú vị, dễ dàng tìm hiểu, và có thể truy cập chỉ là về bất cứ ai có kỹ năng phát triển web. 1.3 Ưu điểm - Người phát triển có thể sử dụng các kỹ năng từ lập trình web, giúp giảm thiểu thời gian cũng như chi phí đào tạo nói riêng và thời gian cũng như chi phí dành cho dự án nói chung. - Chỉ một bộ mã lệnh có thể sử dụng trên nhiều hệ điều hành khác nhau. - Khả năng truy cập đến các tính năng của thiết bị và hệ điều hành. - Khả năng sử dụng trong chế độ offline. - Việc thiết kế giao diện cho các thiết bị có kích cỡ khác nhau trở nên dễ dàng với thiết kế tùy ứng (responsive design) của web. - Việc sử dụng AngularJS làm core cũng mang lại lợi thế lớn so với các framework cho ứng dụng hybrid khác. - Ionic cung cấp đầy đủ các thành phần trong giao diện người dùng như Pull-to- Refresh, Infinite-loader, tabs, - Một lợi thế khác khi sử dụng Ionic là nó có một cộng đồng người dùng lớn mạnh, giúp cho việc tìm hiểu và hỗ trợ dễ dàng hơn. - Các ứng dụng hybrid có nhiều ưu điểm như có thể hiển thị cho nhiều nền tảng
- Tận dụng các tính năng khác của thiết bị di động như GPS, camera - Thời gian và chi phí dùng để phát triển ứng dung cũng thấp hơn nhiều so với native. 1.4 Nhược điểm - Tốc độ chậm với một số tính năng chuyển trang trên di động. - Các plugin có thể không tương thích với một số thiết bị và nền tảng. - Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị. - Tuy nhiên, nó vẫn đang trong giai đoạn phát triển nên độ ổn định chưa cao 1.5 Giấy phép Ionic Framework là một dự án mã nguồn mở và miễn phí, được phát hành theo giấy phép MIT. Điều này có nghĩa là nó có thể được sử dụng trong các dự án cá nhân hoặc thương mại miễn phí. MIT là giấy phép tương tự được sử dụng bởi các dự án phổ biến như jQuery và Ruby on Rails. 2. Tính năng 2.1. Cordova 2.1.1 Cordova là gì? Apache Cordova (trước kia được gọi là PhoneGap) là một framework phát triển ứng dụng di động nổi tiếng được tạo ra bởi Nitobi. Adobe Systems đã mua Nitobi vào năm 2011, đổi tên nó thành PhoneGap, và sau đó đã phát hành một phiên bản mã nguồn mở được gọi là Apache Cordova. Cordova là một nền tảng để xây dựng những ứng dụng di
động (hybrid mobile applications) sử dụng HTML, CSS và Javascript. Những ứng dụng này có thể chạy trên nhiều nền tảng khác nhau như Android, iOS, Windows Phone dựa trên các API để giao tiếp với thiết bị. Khi sử dụng Cordova API, một ứng dụng có thể được xây dựng mà không phải sử dụng bất kỳ một đoạn mã native code nào. Thay vào đó, công nghệ web sẽ được sử dụng, và chúng sẽ được tổ chức trên chính ứng dụng đấy chứ không cần thông qua một server nào. Và bởi vì những API Javascript này là thống nhất trên tất cả các nền tảng thiết bị và được xây dựng trên chuẩn web nên những ứng dụng được viết trên nền tảng này có thể được sử dụng trên các nền tảng khác mà có thể không cần có bất cứ sự thay đổi nào. Cordova cung cấp một tập hợp các thư viện Javascript đã được chuẩn hóa để có thể sử dụng. Cordova hiện có thể sử dụng cho các nền tảng như iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada và Symbian. Một số APIs được Cordova cung cấp cần thiết cho di động như: Camera, GPS, firebase, SQLite, Call Phone Number, Native Storage, 2.1.2 Các tính năng của Cordova Cordova đưa ra nền tảng để xây dựng các hybrid app, nên chúng ta có thể phát triển các ứng dụng chạy trên nhiều nền tảng khác nhau như IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu và tizien. Sử dụng cordova sẽ nhanh hơn rất nhiều so với phát triển các ứng dụng thuần android, hay iOS. Chỉ cần sử dụng Javascript khi làm việc với Cordova nên ta không cần thiết phải biết từng ngôn ngữ lập trình cho từng loại hệ điều hành
2.1.3 Hạn chế Hiệu suất của hybrid app thì sẽ chậm hơn các native app, nên chúng ta không dùng Cordova để xây dựng các ứng dụng lớn, yêu cầu nhiều dữ liệu và chức năng. Các plugin có thể không tương thích với một số thiết bị và nền tảng. Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị. 2.1.4 Cách cài đặt Bước 1: Cài Nodejs Cordova hoạt động dựa trên nodejs, nó sẽ genarate các file tương ứng từ source code. Bước 2: Cài Cordova Các command-line của Cordovar chạy trên nền Node.js, mở Terminal và gõ: npm install -g cordova Bước 3: Tạo mới project: Tạo mới một project Cordova bằng tool command-line, điều hướng tới folfer mà bạn muốn lưu trữ project và tạo đường dẫn: cordova create Bước 4: Thêm platform Sau khi khởi tạo project Cordova, điều hướng tới folder chứa project, từ folder này, bạn có thể add thêm bất kỳ platform nào bạn muốn để build app. Để add platform, type: cordova platform add cordova build
2.2. Capacitor 2.2.1. Capacitor là gì? Capacitor là một dự án mã nguồn mở chạy các Ứng dụng Web hiện đại trên iOS, Android, Electron và Web (sử dụng công nghệ Progressive Web App) cung cấp giao diện mạnh mẽ và dễ sử dụng để truy cập Native SDKs và Native APIs trên mỗi nền tảng. 2.2.2. Ưu điểm - Thay thế cho Cordova, Capacitor mang lại những lợi ích đa nền tảng tương tự, nhưng với cách tiếp cận hiện đại hơn để phát triển ứng dụng, tận dụng các API web mới nhất và khả năng native platform. - Sử dụng Capacitor, các nhà phát triển có thể xây dựng một ứng dụng và nhắm mục tiêu một tập hợp API bất kể ứng dụng đang chạy trên nền tảng nào, trái ngược với việc quản lý nhiều API cho mỗi nền tảng mục tiêu. - Dễ dàng xây dựng một ứng dụng web chạy tự nhiên trên thiết bị di động, máy tính để bàn và web dưới dạng Progressive Web App
2.2.3. Hạn chế - Hiệu suất của hybrid app thì sẽ chậm hơn các native app - Các plugin có thể không tương thích với một số thiết bị và nền tảng. Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị. 2.2.4. Cách cài đặt và thêm vào ứng dụng - Yêu cầu đã cài đặt Nodejs - Trong thư mục gốc của ứng dụng chạy dòng command-line: npm install @capacitor/core@next @capacitor/cli@next - Sau đó khởi tạo capacitor bằng: npx cap init 2.3. Mô hình phát triển ứng dụng MV Pattern Angular JS được sử dụng trong Ionic là một MVC framework, nhưng theo thời gian thì nó trở nên thân thuộc hơn với khái niệm MVVM trong đó đối tượng $scope hoạt động như một ViewModel, sử dụng và thao tác trong các Controller.
Các developer có thể linh hoạt sử dụng MVC hoặc là MVVM theo ý thích của họ, miễn là đạt được mục tiêu: Việc tách phần trình bày giao diện khỏi tầng nghiệp vụ logic thúc đẩy hiệu suất phát triển sản phẩm và bảo trì. Thao tác với DOM Về khả năng tương tác với các thành phần DOM của webView. Angular nhúng jqLite, là một phần nhỏ gọn của thư viện jQuery cho phép thao tác DOM trong các trình duyệt theo cách tương thích, và không phụ thuộc vào trình duyệt. 2.4. Giao diện người dùng UI Ionic thể hiện sự đơn giản. Giống như phong cách của Google, nó dựa trên sự tồn tại của HTML5 và CSS3 để cung cấp những trải nghiệm nhanh chóng. Chính xác là tốc độ có trong sự đơn giản của nó – không có bóng đổ hay góc tròn, chỉ đơn giản là phẳng – Như vậy, Ionic không hứa hẹn có được giao diện người dùng bóng bẩy, nhưng nó cung cấp giao diện một cách nhanh chóng và nhất quán, thậm chí là chúng ta sử dụng trên các thiết bị với khả năng thông dịch HTML5 chậm trong các ứng dụng Ionic. Sass là một ngôn ngữ mở rộng của CSS – Cascading Style Sheets – cho phép Ionic thêm các biến số và khả năng lồng cú pháp để mở rộng sự xuất hiện của giao diện ứng dụng. Ngoài ra, Ionic còn được đóng gói thêm các thư viện icon nguồn mở, khoảng 440 icons. 2.5. Giao diện dựng sẵn Widgets
Các thành phần của Ionic cực kỳ đơn giản và mạnh mẽ. Chúng là các phần tử HTML phức hợp, được gọi là các directives, Ionic cũng cung cấp các Controller để bổ sung cho cấu hình và tương tác. Ionic cung cấp các khối xây dựng có phần đơn giản mà có thể được kết hợp để cung cấp giao diện người dùng phong phú. Bao gồm: form elements, header and footer bars, buttons, simple list, grid elements và các thành phần phổ biến khác nữa. 2.6. Performance obsessed Ionic rất chú trọng đến hiệu suất, mặc dù nó ra đời chưa lâu. Ionic có một giao diện ổn định và tốc độ tốt, với các hiệu ứng chuyển động được áp dụng kỹ thuật tăng tốc phần cứng (hardware accelerating) và tối giản các thao tác với DOM. Ionic cũng không cần sử dụng đến jQuery, mặc dù người sử dụng có thể thêm vào nếu muốn. Ionic có thể tạo ra các ứng dụng phức tạp chạy trên cả iOS và Android. Một điểm thú vị của Ionic đồng thời giúp tăng hiệu suất hoạt động của nó, đó là Ionic không cố gắng tự mình thực hiện tất cả các công việc. Để đóng gói ứng dụng, Ionic sử dụng Cordova và tận dụng cấu trúc thư mục mặc định của nó. 2.7. Application scripting Ionic không những mang đến cho chúng ta CSS và markup tùy biến cao mà còn những mẫu thiết kế (design pattern) Javascript để giúp chúng ta xây dựng những ứng dụng giống nhất với những ứng dụng native trên Android và iOS. Ionic muốn giải phóng những ứng dụng web ra khỏi thanh địa chỉ và hướng đến những tương tác giao diện mạnh mẽ như mà side menu hay view controllers. 2.8. Open-source
Mục đích của Ionic framework không chỉ là xây dựng một bộ khung phát triển ứng dụng di động đa nền tảng mà còn muốn xây dựng một nền tảng để chia sẻ các kiến thức cho các nhà phát triển, tạo ra một cách để đưa ra những design pattern tốt nhất để xây dựng các ứng dụng di động. Vì vậy, Ionic là một framework mở hoàn toàn cho phép tất cả mọi người có thể chia sẻ những kiến thức, kinh nghiệm để xây dựng những ứng dụng di động tuyệt vời trên nền tảng HTML5. Ionic sẽ đặt nền tảng cho ứng dụng của bạn dựa trên HTML5, CSS và Javascript. Thay vì mỗi lập trình viên phải tự tìm tòi những khuyết điểm của việc phát triển ứng dụng di động trên HTML5 thì Ionic sẽ cho bạn CSS cơ bản và tạo cho bạn 1 kiến trúc tốt để phát triển phía trên nó. CHƯƠNG 2: TỔNG QUAN ANGULAR 1. Khái niệm Angular là một javascript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript , HTML và TypeScript . Angular cung cấp các tính năng tích hợp cho animation , http service và có các tính năng như auto-
complete , navigation , toolbar , menus , Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt. Để tiếp cận được Angular chúng ta cần HTML CSS JavaScript TypeScript Document Object Model (DOM) 2. Những đặc điểm nổi bật a. Cơ chế Two-Way Data Binding Đây là tính năng được developer đánh giá là ấn tượng nhất của Angular. Data binding tự động, tức thời. Bất cứ thay đổi nào trên view, dù là nhỏ nhất, cũng đều được tự động cập nhật thuộc tính “model” vào component class và ngược lại. Thêm vào đó, Angular cũng hỗ trợ property binding. Developer có thể ràng buộc thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên trong view thông qua việc điều khiển DOM. b. Hỗ trợ cơ chế Routing (điều hướng) mạnh mẽ - Angular có cơ chế routing tải trang một cách bất đồng bộ trên cùng một trang cho phép chúng ta tạo SPA. - Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ cung cấp nhiều view khác nhau tương ứng với với các chức năng chính. Ví dụ: các trang liên hệ, giới thiệu chung, nội dung, báo giá, trong một website. Hiển thị đúng view vào đúng thời điểm là mục đích của điều hướng (routing).
- Angular giúp định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng. Developer sẽ kích hoạt route dựa trên tương tác của người dùng (user). c. Mở rộng HTML Nhờ Angular, developer có thể sử dụng cấu trúc lập trình giống như điều kiện IF, vòng lặp FOR, những biến địa phươ ng “local variables”, để render các control. d. Thiết kế module hoá Angular tiếp cận theo hướng thiết kế module hoá. Người dùng phải tạo các Angular Module để tổ chức tốt hơn và quản lý source code. e. Cộng đồng hỗ trợ rộng lớn - Nhiều tài liệu phong phú, đa dạng từ cơ bản đến nâng cao các API của Angular, cũng như có hẳn một Tutorial Basic được xây dựng nên bởi Angular team. - Mã nguồn mở. - Được Google hỗ trợ, liên tục cập nhật 3. Ưu điểm - Ứng dụng được giảm tối đa kích thước và tăng tối đa hiệu suất.
- HTML linh hoạt hơ n. - Dễ dàng hiể n thị các field từ data model của website và theo dõi những thay đổ i, cậ p nhậ t lại từ ngườ i dùng nhờ binding data. - Xây dựng và tái sử dụng nội dung nhờ vào những khố i module độ c lậ p. - Nhanh chóng giải quyết các bài toán logic nhờ back- end service hỗ trợ giao tiếp. - Angular cũng hỗ trợ TypeScript và kiến trúc MVC model. 4. Nhược điểm - Các phiên bản Angular cũ không tương thích với các phiên bản mới hơn sử dụng TypeScript. - JavaScript vẫn là một thách thức với lập trình viên mới. 5. Cài đặt Yêu cầu cài đặt Nodejs Chạy dòng lệnh command line sau để cài đặt phiên bản mới nhất: npm install -g @angular/cli Chúng ta có thể cài đặt phiên bản thấp hơn với cú pháp sau: npm install -g @angular/cli@ ví dụ: npm install -g @angular/cli@8.1.0 CHƯƠNG 3: HƯỚNG DẪN CÀI ĐẶT VÀ CHẠY ỨNG DỤNG IONIC 1. Cài đặt môi trường Yêu cầu - Cài đặt Node & npm
- Tools: Visual Studio Code Terminal - Đối với Windows, Command Prompt và PowerShell được hỗ trợ. WSL được biết là làm việc với Ionic, nhưng có thể không được hỗ trợ. - Đối với macOS, ứng dụng Terminal tích hợp được hỗ trợ. Git Bash (git-scm.com) không hỗ trợ tương tác TTY và không được Ionic hỗ trợ. Node & npm - Tải node - Node được đóng gói với npm, để kiểm tra đã hoàn thành việc cài đặt hay chưa chúng ta chạy command-line: node –version npm version - Lỗi permission thường gặp khi cài đặt gói trên macOS. Nếu gặp lỗi, hãy tham khảo npm EACCES để giải quyết lỗi 2. Cài đặt CLI Các ứng dụng Ionic được tạo ra và phát triển chủ yếu thông qua Ionic command-line Install the Ionic CLI - Cài đặt ionic cli với npm npm install -g @ionic/cli - Để gỡ bỏ một cài đặt trước đó của Ionic CLI npm uninstall -g ionic Start an App
- Tạo ứng dụng Ionic bằng cách sử dụng một trong các mẫu ứng dụng được tạo sẵn hoặc mẫu trống để bắt đầu làm mới. . Tabs . Blank . Side menu - Bắt đầu với dòng lệnh ionic start Run the App - Điểu hướng đến thư mục ứng dụng gốc cd myApp ionic serve - Có thể run ứng dụng theo 2 platform là iOS và Android ngay trên web với dòng lệnh ionic serve -l
3. Triển khai trên Android Để chạy và gỡ lỗi ứng dụng Ionic trên trình giả lập Android và thiết bị sử dụng Capacitor hoặc Cordova. Ứng dụng Android có thể được phát triển trên Windows, macOS và Linux. 3.1. Yêu cầu - Cài đặt JDK8 trở lên - Cài đặt Android Studio : 3.2. Hướng dẫn thiết lập Android Studio Cài đặt Android SDK - Sau khi cài đặt Android Studio. Trong màn hình SDK Components Setup chọn SDK platform và hoàn thành cài đặt. - Để cài đặt hình ảnh hệ thống và các gói nền tảng SDK nhỏ khác Configure » SDK Manager Cài đặt thiết bị Android ảo - Trong màn hình Android Studio welcome Configure » AVD Manager - Trong lúc mở dự án
Tools » AVD Manager 3.3. Thiết lập dự án Trước khi ứng dụng có thể được triển khai cho thiết bị và trình mô phỏng Android, dự án native phải được định cấu hình. a. Generate the native project ionic capacitor add android or ionic cordova prepare android
b. Set the Package ID. Đối với Capacitor, hãy mở tệp và sửa đổi thuộc tính appId trong capacitor.config.json Đối với Cordova, hãy mở tệp và sửa đổi thuộc tính id trong config. Xml c. Mở dự án trong Android Studio Đối với Capacitor, hãy chạy như sau để mở ứng dụng trong Xcode: ionic capacitor open android Đối với Cordova, hãy mở Android Studio. Sử dụng File » Open và định vị ứng dụng. Mở thư mục platform / android của ứng dụng. 3.4. Chạy ứng dụng với Capacitor hoặc Cordova ionic capacitor run android or ionic cordova run android Để chạy được bản cập nhật mới nhất của dự án chúng ta cần build và sync trước khi chạy lên máy ảo hoặc thiết bị với 2 dòng lệnh sau ionic build ion ionic cap sync ionic cordova compile android or
4. Triển khai trên iOS Để chạy và gỡ lỗi ứng dụng Ionic trên trình giả lập Android và thiết bị sử dụng Capacitor hoặc Cordova. Ứng dụng Android có thể được phát triển trên Windows, macOS và Linux. 4.1. Yêu cầu - Hệ điều hành macOS - Cài đặt Xcode - Tạo một iOS Simulator (trình mô phỏng iOS) 4.2. Thiết lập dự án Trước khi ứng dụng có thể được triển khai cho thiết bị và trình mô phỏng Android, dự án native phải được định cấu hình. a. Generate the native project ionic capacitor add ios or ionic cordova prepare ios b. Set the Package ID. Đối với Capacitor, hãy mở tệp và sửa đổi thuộc tính appId trong capacitor.config.json Đối với Cordova, hãy mở tệp và sửa đổi thuộc tính id trong config. Xml c. Mở dự án trong Xcode Đối với Capacitor, hãy chạy như sau để mở ứng dụng trong Xcode: ionic capacitor open ios Đối với Cordova, hãy mở Xcode. Sử dụng File » Open và định vị ứng dụng. Mở thư mục platform / ios của ứng dụng.
4.3. Chạy ứng dụng với Xcode ionic capacitor run ios or ionic cordova run ios Trong Xcode, chọn một trình mô phỏng hoặc thiết bị mục tiêu và nhấp vào nút play. Để chạy được bản cập nhật mới nhất của dự án chúng ta cần build và sync trước khi chạy lên máy ảo hoặc thiết bị với 2 dòng lệnh sau ionic build ionic cap sync or ionic cordova compile ios
CHƯƠNG 4: LAYOUT 1. Cấu trúc Ionic Framework cung cấp một số bố cục khác nhau có thể được sử dụng để cấu trúc một ứng dụng. Từ bố trí trang đơn, đến chia tách dạng xem ngăn và phương thức. 1.1. Header and Footer Layout Cấu trúc đơn giản có 3 phần: Header, Content và Footer Header Main Content Footer 1.2. Tabs Layout
Bố trí ngang, Tab cho phép người dùng nhanh chóng thay đổi giữa các chế độ xem nội dung. Mỗi tab có thể chứa nội dung tĩnh hoặc ngăn xếp bằng cách dùng ion-router- outlet hoặc ion-nav. Home Schedule 1.3. Menu Layout Bố cục tiêu chuẩn giữa các ứng dụng dành cho thiết bị di động bao gồm khả năng chuyển đổi một bên Menu bằng cách nhấp vào một nút hoặc vuốt nó mở từ bên cạnh. Các menu bên thường được sử dụng để điều hướng, có thể chứa nội dung.
Menu Navigate Home
2. Responsive Grid - Là một hệ thống flexbox di động đầu tiên mạnh mẽ để xây dựng bố cục tùy chỉnh. - Nó bao gồm ba đơn vị: . grid . col(s) . row(s) - Chia làm 12 cột - Có thể đặt kích thước cho từng cột hoặc tự động với thuộc tính size 3. Css Ionic Framework cung cấp một tập hợp các lớp tiện ích CSS có thể được sử dụng trên bất kỳ phần tử nào để sửa đổi văn bản, vị trí phần tử hoặc điều chỉnh phần đệm và lề. 3.1. Colors Ionic có chín màu mặc định có thể được sử dụng để thay đổi màu sắc của nhiều thành phần. Mỗi màu thực sự là một bộ sưu tập của nhiều thuộc tính, bao gồm shade và tint, được sử dụng trong suốt Ionic Default Primary Secondary
Tertiary Success Warning Danger Light Medium Dark
3.2. Text Modification 3.2.1. Text Alignment Class Style Rule Description The inline contents are aligned to the left edge of the .ion-text-left text-align: left line box. The inline contents are aligned to the right edge of .ion-text-right text-align: right the line box. .ion-text-start text-align: start The same as if direction is left-to-right and if direction is right-to-left.text-lefttext-right The same as if direction is left-to-right and if .ion-text-end text-align: end direction is right-to-left.text-righttext-left .ion-text-center text-align: center The inline contents are centered within the line box. The inline contents are justified. Text should be .ion-text-justify text-align: justify spaced to line up its left and right edges to the left Sequencesand right edges of whitespace of the line are box, collapsed. except for Newline the last .ion-text-wrap white-space: normal charactersline. in the source are handled as other whitespace. Breaks lines as necessary to fill line .ion-text- white-space: boxes.Collapses whitespace as for , but suppresses line nowrap nowrap breaks (text wrapping) within text.normal 3.2.2. Text Transformation
Class Style Rule Description .ion-text- text-transform: Forces all characters to be converted uppercase uppercase to uppercase. .ion-text- text-transform: Forces all characters to be converted lowercase lowercase to lowercase. .ion-text- text-transform: Forces the first letter of each word to capitalize capitalize be converted to uppercase. 3.2.3. Responsive Text Classes {modifier} left right start end center justify wrap nowrap uppercase lowercase capitalize Class Description .ion-text-{modifier} Applies the modifier to the element on all screen sizes. .ion-text-sm- Applies the modifier to the element when .min-width: 576px {modifier} .ion-text-md- Applies the modifier to the element when .min-width: 768px {modifier} .ion-text-lg- Applies the modifier to the element when .min-width: 992px {modifier}
Class Description .ion-text-xl- Applies the modifier to the element when .min-width: 1200px {modifier} 3.3. Element Placement 3.3.1. Float Elements Thuộc tính float CSS chỉ định rằng một phần tử nên được đặt dọc theo bên trái hoặc bên phải của vùng chứa, nơi các phần tử văn bản và nội tuyến sẽ quấn quanh nó. Class Style Rule Description The element will float on the left side of its .ion-float-left float: left containing block. .ion-float- The element will float on the right side of its float: right right containing block. float: The same as if direction is left-to-right and if .ion-float-start left / float: direction is right-to-left.float-leftfloat-right right float: The same as if direction is left-to-right and if .ion-float-end left / float: direction is right-to-left.float-rightfloat-left right
3.3.2. Responsive Float Classes {modifier} left right start end Class Description .ion-float-{modifier} Applies the modifier to the element on all screen sizes. .ion-float-sm- Applies the modifier to the element when .min-width: 576px {modifier} .ion-float-md- Applies the modifier to the element when .min-width: 768px {modifier} .ion-float-lg- Applies the modifier to the element when .min-width: 992px {modifier} .ion-float-xl- Applies the modifier to the element when .min-width: 1200px {modifier} 3.4. Element Display Class Style Rule Description .ion-hide display: none The element will be hidden. 3.5. Content Space 3.5.1. Element Padding - Là khoảng cách giữa nội dung của phần tử và đường viền của nó.
Class Style Rule Description .ion-padding padding: 16px Applies padding to all sides. .ion-padding-top padding-top: 16px Applies padding to the top. .ion-padding-start padding-start: 16px Applies padding to the start. .ion-padding-end padding-end: 16px Applies padding to the end. padding-bottom: .ion-padding-bottom Applies padding to the bottom. 16px .ion-padding-vertical padding: 16px 0 Applies padding to the top and bottom. .ion-padding- padding: 0 16px Applies padding to the left and right. horizontal .ion-no-padding padding: 0 Applies no padding to all sides. 3.5.2. Element Margin - Thuộc tính margin canh lề cho thành phần. Class Style Rule Description .ion-margin margin: 16px Applies margin to all sides. .ion-margin-top margin-top: 16px Applies margin to the top.
Class Style Rule Description .ion-margin-start margin-start: 16px Applies margin to the left. .ion-margin-end margin-end: 16px Applies margin to the right. margin-bottom: .ion-margin-bottom Applies margin to the bottom. 16px .ion-margin-vertical margin: 16px 0 Applies margin to the top and bottom. .ion-margin- margin: 0 16px Applies margin to the left and right. horizontal .ion-no-margin margin: 0 Applies no margin to all sides. 3.6. Flex Properties
3.6.1. Flex Container Properties Class Style Rule Description .ion-justify- justify-content: Items are packed toward the start on the main content-start flex-start axis. .ion-justify- justify-content: Items are packed toward the end on the main content-end flex-end axis. .ion-justify- justify-content: Items are centered along the main axis. content-center center .ion-justify- justify-content: Items are evenly distributed on the main axis content-around space-around with equal space around them. .ion-justify- justify-content: Items are evenly distributed on the main axis. content-between space-between .ion-justify- justify-content: Items are distributed so that the spacing content-evenly space-evenly between any two items is equal. .ion-align-items- align-items: flex- Items are packed toward the start on the cross start start axis. .ion-align-items- align-items: flex- Items are packed toward the end on the cross end end axis.
Class Style Rule Description .ion-align-items- align-items: Items are centered along the cross axis. center center .ion-align-items- align-items: Items are aligned so that their baselines align. baseline baseline .ion-align-items- align-items: Items are stretched to fill the container. stretch stretch flex-wrap: .ion-nowrap Items will all be on one line. nowrap Items will wrap onto multiple lines, from top .ion-wrap flex-wrap: wrap to bottom. .ion-wrap- flex-wrap: wrap- Items will wrap onto multiple lines, from reverse reverse bottom to top. 3.6.2. Flex Item Properties Class Style Rule Description .ion-align-self- align-self: Item is packed toward the start on the cross axis. start flex-start
Class Style Rule Description .ion-align-self- align-self: Item is packed toward the end on the cross axis. end flex-end .ion-align-self- align-self: Item is centered along the cross axis. center center .ion-align-self- align-self: Item is aligned so that its baseline aligns with other baseline baseline item baselines. .ion-align-self- align-self: Item is stretched to fill the container. stretch stretch .ion-align-self- align-self: Item is positioned according to the auto auto parent's value.align-items 3.7. Border Display Thuộc tính CSS hiển thị đường viền xác định xem đường viền có hiển thị hay không. Tính chất này có thể được áp dụng cho phần header và phần footer. Class Description .ion-no-border The element will have no border.
3.8. Ionic Breakpoints Breakpoint Name Width xs 0 sm 576px md 768px lg 992px xl 1200px
CHƯƠNG 5: COMPONENTS Các ứng dụng ion được tạo thành từ các khối xây dựng cấp cao được gọi là Components, cho phép bạn nhanh chóng xây dựng giao diện người dùng cho ứng dụng của mình. Ionic đi kèm với một số thành phần, bao gồm cards, lists và tabs.
CHƯƠNG 6: NATIVE 1. Giới thiệu Xây dựng trải nghiệm Native app với bộ sưu tập tích hợp mã nguồn mở và các plugins cao cấp giúp dễ dàng thêm chức năng vào bất kỳ ứng dụng Ionic nào có Capacitor hoặc Cordova. 2. Thiết lập 2.1. Ionic Native Community là gì? Là một tập hợp các trình bao bọc TypeScript cho các plugin Cordova và Capacitor mã nguồn mở giúp dễ dàng thêm chức năng vào bất kỳ ứng dụng Ionic nào. Các Plugin này được duy trì bởi cộng đồng Ionic. Mặc dù các thành viên cộng đồng thường nhanh chóng tìm và khắc phục sự cố, một số plugin nhất định có thể hoạt động không bình thường. Bên cạnh đó, Ionic Enterprise hỗ trợ cho các nhóm yêu cầu hỗ trợ native plugin chuyên dụng và SLA, bảo trì và cập nhật bản vá liên tục thì có thể gửi yêu cầu dùng thử miễn phí Ngoài Cordova, Ionic Native cũng làm việc với Capacitor, Ionic's official native runtime 2.2. Usage Tất cả các plugin có hai thành phần - the native code (Cordova) and the TypeScript code (Ionic Native). Các plugin Cordova cũng được gói trong một Promise hoặc Observable để cung cấp một giao diện plugin phổ biến và cách tiếp cận phát triển hiện đại hóa.
Camera Plugin: Cho phép chụp ảnh và quay video Cordova: Capacitor: Angular: Các ứng dụng Angular có thể sử dụng Cordova hoặc Capacitor để xây dựng các ứng dụng native mobile apps. Import plugin Camera vào và thêm nó vào danh sách Providers // app.module.ts import { Camera } from '@ionic-native/camera/ngx'; @NgModule({ providers: [
Camera ] }) export class AppModule { } Sau khi Plugin đã được khai báo, nó thể thể được import và inject như bất cứ dịch vụ khác // camera.service.ts import { Injectable } from '@angular/core'; import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; @Injectable({ providedIn: 'root' }) export class PhotoService { constructor(private camera: Camera) { } takePicture() { const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE } this.camera.getPicture(options).then((imageData) => { // Do something with the new photo
}, (err) => { // Handle error console.log("Camera issue: " + err); }); } } Call Number: Cho phép gọi điện thoại đến số điện thoại khác Cordova: Capacitor: Angular: Các ứng dụng Angular có thể sử dụng Cordova hoặc Capacitor để xây dựng các ứng dụng native mobile apps. Import plugin Camera vào và thêm nó vào danh sách Providers // app.module.ts import { CallNumber } from '@ionic-native/call-number/ngx'; @NgModule({ providers: [
CallNumber ] }) export class AppModule { } Sau khi Plugin đã được khai báo, nó thể thể được import và inject như bất cứ dịch vụ khác import { CallNumber } from '@ionic-native/call-number/ngx'; constructor(private callNumber: CallNumber) { } this.callNumber.callNumber("18001010101", true) .then(res => console.log('Launched dialer!', res)) .catch(err => console.log('Error launching dialer', err)); Officical Plugin: Storage cho phép lưu dữ liệu dưới dạng key-value. Nếu bạn muốn tạo một ứng dụng offline thì nên sử dụng API này để lưu trữ trong máy, dữ liệu sẽ bị mất đi khi gỡ ứng dụng Lưu ý: API này không dành cho các ứng dụng lưu trữ dữ liệu hiệu suất cao. Hãy xem cách sử dụng SQLite hoặc một công cụ dữ liệu riêng biệt nếu ứng dụng của bạn sẽ lưu trữ nhiều mục, có tải đọc / ghi cao hoặc yêu cầu truy vấn phức tạp.
get( ) set( ) remove( ) clear()
keys() Storage chỉ hoạt động trên String. Tuy nhiên, việc lưu trữ các JSON rất dễ dàng, chỉ gọi, sau đó trả về giá trị. JSON.stringify set JSON.parse get Phương thức này cũng có thể được sử dụng để lưu trữ các giá trị không phải là chuỗi, chẳng hạn như số và boolean. import { Plugins } from '@capacitor/core'; const { Storage } = Plugins; // JSON "set" example async setObject() { await Storage.set({ key: 'user', value: JSON.stringify({ id: 1, name: 'Max' }) }); } // JSON "get" example async getObject() { const ret = await Storage.get({ key: 'user' }); const user = JSON.parse(ret.value); } async setItem() { await Storage.set({ key: 'name',
value: 'Max' }); } async getItem() { const { value } = await Storage.get({ key: 'name' }); console.log('Got item: ', value); } async removeItem() { await Storage.remove({ key: 'name' }); } async keys() { const { keys } = await Storage.keys(); console.log('Got keys: ', keys); } async clear() { await Storage.clear(); } Ngoài ví dụ còn rất nhiều Plugin như Sms, SQLite, firebase, Cordova hầu như cung cấp rất đầy đủ, các bạn có thể tham khảo thêm tại và 3. Ionic Native FAQ 3.1. Use the Ionic CLI to add/update/delete plugins. Thay vì sửa trực tiếp config.xml và package.json. Sử dụng ionic trước các lệnh Cordova để có trải nghiệm tốt hơn và chức năng bổ sung (ionic cordova build ios thay vì cordova build ios).
3.2. Upgrade plugins by removing, then re-adding them. 3.3. Install explicit versions. Để đảm bảo rằng cùng một phiên bản plugin luôn được cài đặt thông npm install, hãy chỉ định số phiên bản: 3.4. Restore Cordova in an existing Ionic project Hữu ích khi thêm nhà phát triển mới vào dự án. Ionic cordova prepare: khôi phục các nền tảng và plugin từ package.json và config.xml. Phiên bản sẽ cài đặt được lấy từ package.json hoặc config.xml, nếu được tìm thấy trong các tệp đó. Trong trường hợp xung đột, package.json được ưu tiên hơn config.xml. 3.5. Troubleshoot Cordova issues with Ionic CLI commands Ionic doctor list: Phát hiện các vấn đề thường gặp và gợi ý các bước để khắc phục chúng Ionic repair: Loại bỏ, sau đó Tái tạo tất cả các phụ thuộc PHẦN 2: XÂY DỰNG ỨNG DỤNG MINH HỌA CHƯƠNG 1: PHÁT BIỂU BÀI TOÁN
1.1. Giới thiệu bài toán cần giải quyết 1.1.1. Nhu cầu thực tế của đề tài Trong thời đại công nghệ hiện nay, để tìm được một ứng dụng quản lý thông tin cá nhân tổ chức và hỗ trợ trên nền tảng di động hầu như không phải là chuyện dễ dàng. Đa số người dùng quản lý thông tin bằng phần mềm khác như Excel, Danh bạ, Tuy nhiên, phần mềm danh bạ chỉ lưu một đến hai thông tin cơ bản và không sử dụng để lưu trữ nhiều thông tin. Từ đó, việc phát triển một phần mềm có thể xem là phần mềm danh bạ mở rộng trên nền tảng di dộng giúp lưu trữ thông tin và tính năng đầy đủ hơn. Với phương thức lưu trữ như vậy chúng ta có thể dễ dàng quản lý, thích thú hơn so với cách quản lý truyền thống. 1.1.2 Mục tiêu đề tài Từ những phân tích trên, để tiếp cận nhóm em đã tìm hiểu, xây dựng và cài đặt “Ứng dụng quản lý thông tin“. Mục đích: - Tính tiện lợi khi sử dụng - Lữu trữ đầy đủ thông tin - Thiết kế thân thiện đẹp mắt, dễ sử dụng Tính năng: - Xem danh sách thông tin cá nhân, tổ chức - Thêm thông tin liên hệ - Cho phép gọi điện thoại, tìm kiếm địa điểm - Cho phép chụp ảnh 1.2. Mô tả quy trình thực hiện Nghiên cứu các phương pháp xây dựng phần mềm, lựa chọn phương pháp phù hợp với nhóm.
Tìm hiểu các công cụ hỗ trợ, môi trường lập trình thích hợp, các công cụ xây dựng, kết nối với cơ sở dữ liệu. Lên kế hoạch lập trình theo nhóm, nghiên cứu và sử dụng công cụ Github. Thực hiện các phương pháp kiểm thử phần mềm. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 Hiện trạng tổ chức 2.1.1 Sơ đồ tổ chức hệ thống Người dùng 2.1.2 Chức năng của Người dùng Thực hiện đầy đủ các tính năng Quản lý thông tin, cho phép gọi điện, tìm kiếm địa chỉ. Quản lý, thêm mới, xóa, sửa thông tin liên hệ. Cho phép chụp ảnh, lưu ảnh Cho phép thêm vào danh sách ưu thích 2.2 Hiện trạng tin học - Người dùng yêu cầu cần có điện thoại để sử dụng phầm mềm - Yêu cầu một chiếc smartphone cấu hình tốt, không quá yếu - Không yêu cầu có kỹ thuật khi mới sử dụng phần mềm. 2.3 Hiện trạng nghiệp vụ 2.3.1 Mô tả nghiệp vụ
- Thêm mới thông tin: Khi người dùng cần lưu một thông tin của ai đó phần mềm sẽ cho phép nhập các thông tin cần thiết, hệ thống kiểm tra thông tin trước khi lưu vào danh sách thông tin trong bộ nhớ. - Sửa, xóa thông tin: Người dùng cần chọn một thông tin liên hệ trước khi cập nhật hoặc xóa nó. - Xem danh sách, chi tiết thông tin liên hệ, thêm vào mục ưa thích: Có 2 danh sách được hiển thị: danh sách ưu thích và danh sách tất cả liên hệ, người dùng chọn liên hệ để xem thông tin chi tiết, thong màn hình chi tiết người dùng có thể thêm liên hệ vào mục ưa thích khi ấn chọn icon hình ngôi sao. - Gọi điện, tìm kiếm google map, điều hướng trang: người dùng chọn liên hệ sẽ có phần địa chỉ, số điện thoại, thông tin dòng thời gian mạng xã hội. Từ đó có thể gọi đến chủ thuê bao, tìm địa chỉ chủ thông tin liên hệ trên google map, xem dòng thời gian facebook. 2.3.2 Sơ đồ hiện trạng nghiệp vụ 2.3.3 Bảng mô tả công việc
STT Công Việc Mô tả công việc Vị trí làm Điều kiện Input Output việc khởi động 1 Thêm mới Khi cần lưu một Có liên hệ Thông tin Danh sách liên hệ liên hệ mới, người mới liên hệ liên hệ mới dùng sẽ nhập thông tin liên quan đến liên hệ đó đó 2 Sửa thông Người dùng có thể Khi thông tin Thông tin Liên hệ đã tin liên hệ cập nhật lại thông liên hệ thay mới liên hệ được cập tin liên hệ nếu Người đổi hoặc nhật nhập sai dùng thông tin được nhập sai 3 Xóa liên Nếu liên hệ không Liên hệ Liên hệ cần Danh sách hệ còn tồn tại hoặc đã không còn sử xóa liên hệ sau bị mất, Người dụng thông khi đã xóa dùng có thể tiến tin đó một liên hệ hành xóa liên hệ ra khỏi danh sách liên hệ
CHƯƠNG 3: XÁC ĐỊNH CÁC YÊU CẦU PHẦN MỀM 3.1 Yêu cầu chức năng Gồm có 1 đối tượng chính sử dụng phần mềm là: Người dùng. Chức năng của mỗi đối tượng: Người dùng: Xem danh sách thông tin: Khi người dùng truy cập vào phần mềm thì hệ thống sẽ tự động hiển tất cả danh sách thông tin liên hệ. Khi người dùng chọn tab ưa thích thì sẽ chuyển sang màn hình gồm danh sách các thông tin được ưa thích. Xem chi tiết liên hệ: Sau khi tìm thấy thông tin cần, người dùng có thể chọn vào liên hệ để xem thông tin chi tiết, đầy đủ của liên hệ đó. Tìm kiếm: Khi khách hàng cần tìm một liên hệ nào đó thì có thể nhập bất cứ thông tin gì liên quan đến liên hệ đó vào ô tìm kiếm để thực hiện chức năng tìm kiếm. Nếu thông tin liên hệ có tồn tại thì sẽ hiện lên cho người dùng. Cập nhật và xóa liên hệ: Người dùng có thể tìm kiếm liên hệ cần xóa, tiếp tục chọn liên hệ để chuyển tiếp màn hình chi tiết, ở đây người dùng có thể xóa hoặc cập nhật thông tin liên hệ. Gọi điện thoại, tìm địa chỉ: Khi người dùng muốn gọi cho một liên hệ nào đó thì phần thông tin liên hệ có sẵn cho người dùng số điện thoại cho phép người dùng gọi đến số điện thoại đó. Bên cạnh đó, thông tin chủ liên hệ còn bao gồm cả địa chỉ điều hướng đến google map, người dùng có thể xem. 3.2 Yêu cầu phi chức năng Loại Chức năng dựa vào 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ữ Có thể mở rộng nhiều module mà không thay đổi cấu trúc dữ liệu cũ
CHƯƠNG 4: MÔ HÌNH USE-CASE 4.1 Sơ đồ Use-case tổng quát: 4.2 Danh sách các Actor
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ả Use-case cho phép xem danh sách tất cả liên liên hệ hệ 4 Xem danh sách liên hệ Use-case cho phép xem danh sách tất cả liên ưa thích 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ã Use-case cho phép ứng dụng điều hướng đến hội 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 Actor: Người dùng khi thực thiện use case Điều kiện: không có Trạng thái hệ thống sau Cho phép người dùng thực hiện các chức năng khi thực hiện use case Đ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 Actor: Người dùng khi thực thiện use case Điều kiện: không có Trạng thái hệ thống sau Hệ thống hiển thị màn hình Danh sách liên hệ khi thực hiện use case Đ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 Actor: Người dùng khi thực hiện use case Trạng thái hệ thống sau Hệ thống hiển thị danh sách liên hệ mới sau khi xóa khi thực thiện use case Đ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 Actor: Người dùng khi thực hiện use case Trạng thái hệ thống sau Quay trở lại màn hình chi tiết thông tin liên hệ sau khi khi thực thiện use case 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 Actor: Người dùng khi thực hiện use case Trạng thái hệ thống sau Hệ thống hiển thị cuộc gọi đến số điện thoại khi thực thiện use case Điểm mở rộng Không có 4.4.6 Đặc tả Use-case “Thêm ưa thích” Tên chức năng 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 Actor: Người dùng khi thực hiện use case Trạng thái hệ thống sau Hệ thống lưu thông tin liên hệ vào mục ưa thích. khi thực thiện use case Hiển thị màn hình ưa thích sau khi thêm. Điểm mở rộng Không có 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 Actor: Người dùng khi thực hiện use case Trạng thái hệ thống sau Hệ thống điều hướng sang google map và hiển thị đại chỉ khi thực thiện use case đó 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.1 Sơ đồ lớp (mức phân tích)
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 updateContact private Cập nhật thông tin liên hệ 6 deleteContact private Xóa liên hệ 5.1.3.2 MapService - Danh sách các phương thức: 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.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.2 Thêm mới liên hệ 5.2.3 Xóa thông tin 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ệ 2 PHOTO Danh sách thư viện ảnh
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 Ý nghĩa/ghi chú buộc 1 ID string Notnull, Mã contact PK 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 tổ chức nào
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, Mã ảnh PK 2 FILEPATH string Tên 3 WEBVIEWPATH string Đường dẫn file 4 IDCONTACT string Mã contact
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 Màn hình Contacts Màn hình chính 1 Liệt kê danh sách liên hệ Màn hình Favorite Màn hình chính Liệt kê danh sách liên hệ ưa 2 thích
Màn hình Quét mã Quét mã QR để lấy thông tin 3 Màn hình chính QR code liên hệ Màn hình Thêm liên 4 Nhập liệu Thêm mới một liên hệ hệ Màn hình Cập nhật 5 Nhập liệu Thay đổi thông tin liên hệ liên hệ Màn hình Sinh QR Tạo mã QR chia sẻ thông tin 6 Thông tin code liên hệ Màn hình Chi tiết liên Hiển thị thông tin chi tiết của 7 Thông tin hệ 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
8.3.2. Màn hình Thêm liên hệ
8.3.3. Màn hình Tìm kiếm liên hệ
8.3.4. Màn hình Chỉnh sửa liên hệ
8.3.5. Màn hình gọi thoại
8.3.6. Màn hình quét QR code
8.3.7. Màn hình QR code
8.3.8. Màn hình Chi tiết liên hệ
8.3.9. Màn hình địa chỉ google map
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 - 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ị Thêm chức năng chia sẻ thông tin
BẢNG PHÂN CHIA CÔNG VIỆC Mức độ hoàn thành STT MSSV Công việc được giao (%) - Tìm hiểu ionic, angular - Xác định các yêu cầu phần mềm 1 17521236 - Thiết kế API 100% - Hiện thực API - Thiết kế giao diện - Kiểm thử phần mềm - Tìm hiểu ionic, angular - Thiết kế API 2 17521062 - Vẽ sơ đồ lớp, sơ đồ logic 100% - Kiểm thử phần mềm - Viết báo cáo
TÀI LIỆU THAM KHẢO [1] Ionic document: [2] Angular document: [3] TypeScript language document: [4] Capacitor document: [5] Fix bug: [6] Các bài học online trên youtube. [7] [8] Cordova document