ĐẠI HỌC QUỐC GIA TP HCM ĐẠI HỌC CÔNG NGHỆ THÔNG TIN -    - BÁO CÁO ĐỒ ÁN 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 tháng năm 2020 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin chúng em trang bị kiến thức bản, kỹ thực tế để hồn thành đồ án mơn học 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 kiến thức kinh nghiệm cho chúng em suốt thời gian học tập môn Đồ án Trong q trình thực nhóm chúng em chăn khơng tránh khỏi sai sót, vậy, chúng em mong nhận góp ý thầy bạn nhằm hồn thiện kiến thức mà nhóm chúng em học tập hành trang để thực tiếp đề tài khác tương lai Nhóm em xin chân thành cảm ơn q Thầy Cơ! TP Hồ Chí Minh, ngày tháng năm 2020 NHẬN XÉT (của giảng viên) MỤC LỤC LỜI CẢM ƠN MỤC LỤC PHẦN 0: MỤC ĐÍCH ĐỀ TÀI PHẦN 1: TÌM HIỂU IONIC ANGULAR CHƯƠNG 1: TỔNG QUAN IONIC Tổng quan 1.1 Khái niệm 1.2 Mục Tiêu 1.3 Ưu điểm 1.4 Nhược điểm 1.5 Giấy phép CHƯƠNG 2: TỔNG QUAN ANGULAR Khái niệm 2.Những đặc điểm bật Ưu điểm Nhược điểm Cài đặt 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 Cài đặt CLI Triển khai Android 3.1 Yêu cầu 3.2 Hướng dẫn thiết lập Android Studio 3.3 Thiết lập dự án 3.4 Chạy ứng dụng với Capacitor Cordova Triển khai iOS 4.1 Yêu cầu 4.2 Thiết lập dự án 4.3 Chạy ứng dụng với Xcode CHƯƠNG 4: LAYOUT 30 Cấu trúc 1.1 Header and Footer Layout 1.2 Tabs Layout 1.3 Menu Layout Responsive Grid Css 3.1 Colors 3.2 Text Modification 3.3 Element Placement 3.4 Element Display 3.5 Content Space 3.6 Flex Properties 3.7 Border Display 3.8 Ionic Breakpoints CHƯƠNG 5: COMPONENTS CHƯƠNG 6: NATIVE Giới thiệu Thiết lập 2.1 Ionic Native Community gì? 2.2 Usage Ionic Native FAQ 3.1 Use the Ionic CLI to add/update/delete plug 3.2 Upgrade plugins by removing, then re-addin 3.3 Install explicit versions 3.4 Restore Cordova in an existing Ionic project 3.5 Troubleshoot Cordova issues with Ionic CLI 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 toán cần giải 1.1.1 Nhu cầu thực tế đề tài 1.1.2 Mục tiêu đề tài 1.2 Mô tả quy trình thực CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 Hiện trạng tổ chức 58 2.1.1Sơ đồ tổ chức hệ thống 2.1.2Chức Người dùng 2.2Hiện trạng tin học 2.3Hiện trạng nghiệp vụ 2.3.1Mô tả nghiệp vụ 2.3.2Sơ đồ trạng nghiệp vụ 2.3.3Bảng mô tả công việc CHƯƠNG 3: XÁC ĐỊNH CÁC YÊU CẦU PHẦN MỀM 3.1Yêu cầu chức 3.2Yêu cầu phi chức CHƯƠNG 4: MƠ HÌNH USE-CASE 4.1Sơ đồ Use-case tổng quát: 4.2Danh sách Actor 4.3Danh sách Use-case 4.4Đặc tả Use-case 4.4.1Đặc tả Use-case “Tìm kiếm liên hệ” 4.4.2Đặc tả Use-case “Thêm liên hệ” 4.4.3Đặc tả Use-case “Xóa liên hệ” 4.4.4Đặc tả Use-case “Cập nhật liên hệ” 4.4.5Đặc tả Use-case “Gọi điện thoại” 4.4.6Đặc tả Use-case “Thêm ưa thích” 4.4.7Đặc tả Use-case “Tìm địa liên hệ” CHƯƠNG 5: PHÂN TÍCH 5.1Sơ đồ lớp 5.1.1Sơ đồ lớp (mức phân tích) 5.1.2Danh sách lớp đối tượng quan hệ 5.1.3Mô tả chi tiết lớp đối tượng 5.2Sơ đồ sequence 5.2.1Cập nhật liên hệ 5.2.2Thêm liên hệ 5.2.3Xóa thơng tin liên hệ CHƯƠNG 6: THIẾT KẾ DỮ LIỆU 6.1 Sơ đồ logic 78 6.2 Danh sách bảng liệu sơ đồ 78 6.3 Mô tả chi tiết kiểu liệu sơ đồ logic 79 6.3.1 Bảng CONTACT 6.3.2 Bảng PHOTO CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 7.1 Kiến trúc hệ thống 7.2 Mô tả chi tiết thành phần mơ hình 7.2.1 View 7.2.2 View Model 7.2.3 Model CHƯƠNG 8: THIẾT KẾ GIAO DIỆN 8.1 Sơ đồ liên kết hình 8.2 Danh sách hình 8.3 Mơ tả chi tiết hình 8.3.1 Màn hình Contacts 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 google map CHƯƠNG 9: NHẬN XÉT VÀ KẾT LUẬN 9.1 Môi trường phát triển Môi trường triển khai 9.1.1 Môi trường phát triển ứng dụng 9.1.2 Môi trường triển khai ứng dụng 9.2 Kết đạt 9.3 Nhận xét 9.3.1 Ưu điểm 9.3.2 Khuyết điểm 9.4 Hướng phát triển BẢNG PHÂN CHIA CÔNG VIỆC TÀI LIỆU THAM KHẢO PHẦN 0: MỤC ĐÍCH ĐỀ TÀI - Tìm hiểu khái niệm, tính bật, ưu nhược điểm Ionic, Angular Cordova Framework - Nắm dòng lệnh command-line quan trọng Ionic, Angular Framework yêu cầu cần thiết để triển khai cho ứng dụng hai tảng iOS Android (bao gồm trình mô 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 kết hợp Angular Ionic với số API 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 Tổng quan 1.1 Khái niệm Ionic Framework cung cấp công cụ giao diện người dùng mã nguồn mở để xây dựng ứng dụng di động máy tính để bàn chất lượng cao sử dụng công nghệ web - HTML, CSS JavaScript Kết hợp với framework javascript phổ biến khác: - Vue - Angular - React 1.2 Mục Tiêu a Đa tảng Xây dựng triển khai ứng dụng hybrid iOS, Android, máy tính để bàn web dạng Progressive Web App - tất có sở mã Viết lần, chạy nơi b Dựa Tiêu chuẩn Web công nghệ web tiêu chuẩn hóa: HTML, CSS JavaScript, sử dụng API Web đại Custom Elements Shadow DOM Bởi điều này, thành phần Ionic có API ổn định, khơng theo ý thích nhà cung cấp tảng c Thiết kế đẹp Ionic Framework thiết kế để hoạt động hiển thị tuyệt đẹp out-of-the- box tất tảng Bắt đầu với thành phần thiết kế sẵn, kiểu chữ, mơ hình tương tác chủ đề sở tuyệt đẹp (nhưng mở rộng) CHƯƠNG 8: THIẾT KẾ GIAO DIỆN 8.1 Sơ đồ liên kết hình 8.2 Danh sách hình STT Màn hình Màn hình Contacts Màn hình Favorite Màn hình Quét mã QR code Màn hình Thêm liên hệ 8.3 Mơ tả chi tiết hình 8.3.1 Màn hình Contacts 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 google map CHƯƠNG 9: NHẬN XÉT VÀ KẾT LUẬN 9.1 Môi trường phát triển 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í liệu 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 IDE - Sử dụng phương thức dựng sẵn từ Storage API để lấy liệu lưu Local Storage - Sử dụng số chức Cordova cung cấp Camera, Call Number 9.1.2 Môi trường triển khai ứng dụng - Ứng dụng chạy đa tảng môi trường windowsphone, android, ios - Client side triển khai tảng Ionic framework - Sử dụng Local Storage để lưu liệu 9.2 Kết đạt Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau : - Tìm hiểu Ionic framework - Hiểu nắm hybrid app, cách xây dựng triển khai đa 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 nắm kiến thức MV pattern 9.3 Nhận xét 9.3.1 Ưu điểm  Độ tin cậy: Hệ thống kiểm tra liệu nhập vào cho phép tự động thực số kiểm tra tự động đối chiếu tìm ghi có chênh lệch 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ạ, hệ thống ofline 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 thiết kế giao diện thân thiện, hộp thoại hướng dẫn sử dụng hợp lý 9.3.2 Khuyết điểm  Chỉ triển khai test ứng dụng hệ điều hành Android  Sản phẩm chạy local  Phần mềm chưa có khả backup liệu 9.4 Hướng phát triển Do hạn chế thời gian nghiên cứu kinh nghiệm, nhóm phát triển mức độ hoàn thành yêu cầu đặt đề tài, tốc độ xử lý chưa hoàn thiện Nhóm cố gắng tìm hiểu sâu có phương pháp quản lý hệ thống xử lý khối liệu lớn với hiệu cao, mở rộng phạm vi dự án Dưới 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ả cài đặt tự backup, restore liệu  Thực ghi lại nhật kí hoạt động người dùng  Phát triển phần mềm có khả đồng với liệu đám mây  Thêm chức lấy ảnh từ thiết bị  Thêm chức chia sẻ thông tin STT MSSV 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 học online youtube [7] https://www.npmjs.com/ [8] Cordova document https://cordova.ap1ache.org/ ... API, ứng dụng xây dựng mà sử dụng đoạn mã native code Thay vào đó, cơng nghệ web sử dụng, chúng tổ chức ứng dụng không cần thông qua server Và API Javascript thống tất tảng thiết bị xây dựng. .. đích Ionic framework khơng xây dựng khung phát triển ứng dụng di động đa tảng mà muốn xây dựng tảng để chia sẻ kiến thức cho nhà phát triển, tạo cách để đưa design pattern tốt để xây dựng ứng dụng. .. chạy sau để mở ứng dụng Xcode: ionic capacitor open ios Đối với Cordova, mở Xcode Sử dụng File » Open định vị ứng dụng Mở thư mục platform / ios ứng dụng 4.3 Chạy ứng dụng với Xcode ionic capacitor