Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN ---------- TRẦN QUỐC TRƯỞNG NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA, IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 04 năm 2017 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGỆ THÔNG TIN ---------- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: NGHIÊN CỨU VỀ ANGULAR JS, APACHE CORDOVA, IONIC FRAMEWORK TRONG VIỆC PHÁT TRIỂN ỨNG DỤNG MOBILE ĐA NỀN TẢNG VÀ ỨNG DỤNG XÂY DỰNG PHẦN MỀM BẢO HÀNH THIẾT BỊ TIN HỌC Sinh viên thực hiện HỌ TÊN: TRẦN QUỐC TRƯỞNG MSSV: 2113011035 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2013 – 2017 Cán bộ hướng dẫn ThS. TRẦN THỊ DIỆU HIỀN Quảng Nam, tháng 4 năm 2017 MỤC LỤC Phần 1. PHẦN MỞ ĐẦU ................................................................................... 1 1. Lý do chọn đề tài .......................................................................................... 1 2. Mục tiêu của đề tài ........................................................................................ 1 3. Đối tượng và phạm vi nghiên cứu ................................................................ 1 4. Phương pháp nghiên cứu .............................................................................. 2 5. Ý nghĩa khoa học và thực tiễn của đề tài ...................................................... 2 6. Bố cục của đề tài ........................................................................................... 2 Phần 2. NỘI DUNG NGHIÊN CỨU ................................................................ 3 Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG................................... 3 1.1. Lập trình di động và lịch sử phát triển .................................................... 3 1.2. Các loại hình phát triển và các tính năng. ............................................... 4 Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ CÁC VẤN ĐỀ LIÊN QUAN ..................................................................... 7 2.1. Angular JS ............................................................................................... 7 2.2. Apache Cordova...................................................................................... 9 2.3. Ionic Framework ................................................................................... 10 2.4. Sử dụng Angular JS, Apache Cordova và Ionic Framework trong việc xây dựng ứng dụng. ..................................................................................... 14 2.5. Các vấn đề liên quan ............................................................................. 15 Chương 3: ỨNG DỤNG BẢO HÀNH THIẾT BỊ TIN HỌC ........................ 20 3.1. Giới thiệu phần mềm bảo hành thiết bị tin học..................................... 20 3.2. Phân tích và thiết kế ứng dụng.............................................................. 20 3.3. Chương trình demo phần mềm bảo hành thiết bị tin học ..................... 33 Phần 3 . KẾT LUẬN VÀ KIẾN NGHỊ .......................................................... 40 I. Kết luận........................................................................................................ 40 II. Kiến nghị .................................................................................................... 40 Phân 4. TÀI LIỆU THAM KHẢO ................................................................. 41 DANH MỤC HÌNH ẢNH VÀ BẢNG Danh mục hình ảnh Hình 3.1. Biểu đồ UC tổng quát…………………….………….…………..…………27 Hình 3.2. Biểu đồ tuần tự UC tiếp nhận thiết bị………………..…………..…………28 Hình 3.3. Biểu đồ tuần tự UC sửa chữa thiết bị………………..…………..………....28 Hình 3.4. Biểu đồ tuần tự UC quản lý phiếu bảo hành……….………..……………..29 Hình 3.5. Biểu đồ tuần tự UC quản lý nhân viên………..……….………....….…..…29 Hình 3.6. Biểu đồ tuần tự UC quản lý thiết bị…………….……………..……….......30 Hình 3.7. Biểu đồ tuần tự UC quản lý khách hàng……….………………..……...….30 Hình 3.8. Biểu đồ tuần tự UC quản lý nhà cung cấp……….……………..….……….31 Hình 3.9. Biểu đồ lớp…………………………….………………………..…….........31 Hình 3.10. Biểu đồ trạng thái phiếu sửa chữa………...….………………..……....….32 Hình 3.11. Biểu đồ trạng thái phiếu bảo hành……………………………...….…...…32 Hình 3.12. Giao diện đăng nhập hệ thống………………………………..….……......33 Hình 3.13. Giao diện trang chủ ứng dụng………………………………..….………..34 Hình 3.14. Hệ thống menu nhanh của ứng dụng………………………..…….……....35 Hình 3.15. Giao diện kiểm tra thông tin bảo hành……………………..……….…….36 Hình 3.16. Giao diện tạo phiếu bảo hành………………………………..…….……...37 Hình 3.17. Giao diện quản lý khách hàng……………………………..……….……..38 Hình 3.18. Giao diện nhật ký sửa chữa………………………………..……….……..39 Danh mục bảng Bảng 3.1. Bảng chức năng tiếp nhận thiết bị………………………….………..…..…22 Bảng 3.2. Bảng chức năng sửa chữa thiết bị…………………………………...….….22 Bảng 3.3. Bảng chức năng quản lý…………………………………….………..….…22 Bảng 3.4. Bảng chức năng thống kê………………………………….…………..…...23 Bảng 3.5. Bảng danh sách các UC………………………………………..….……….23 DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt Diễn giải 01 JS JavaScript 02 Html HyperText Markup Langue 03 Css Cascading Style Sheets 04 API Application Programming Interface 05 MVC Model – View - Controller 06 DOM Document Object Model 07 URL Uniform Resource Locator 08 MVVM Model – View – ViewModel 09 UI User Interface 10 HTTP Hypertext Transfer Protocol 11 UC User Case LỜI CẢM ƠN Công nghệ thông tin đang là một ngành công nghệ phát triển hàng đầu trên thế giới hiện nay. Sản phẩm từ ngành này rất đa dạng và phong phú. Ứng dụng di động là một phần trong đó. Hằng năm, có hàng triệu ứng dụng di động ra đời, đáp ứng đầy đủ mọi yêu cầu của con người. Tuy nhiên, để viết một ứng dụng di động không phải là chuyện đơn giản, vì vậy, em xin chọn đề tài “ Nghiên cứu về Angular JS, Apache Cordova, Ionic Framework trong việc phát triển ứng dụng mobile đa nền tảng và ứng dụng xây dựng phần mềm bảo hành thiết bị tin học trên Mobile”. Em hy vọng đề tài này sẽ đem lại nhiều hữu ích cho bản thân em cũng như những ai quan tâm Em xin gửi lời cảm ơn đến giáo viên ThS. Trần Thị Diệu Hiền đã hướng dẫn và chỉ bảo trong quá trình em tìm hiểu và thực hiện đề tài này. Tuy nhiên, do hạn chế về thời gian, cũng như chưa có kinh nghiệm và kiến thức thực tế, đề tài sẽ không tránh được những sai sót, em mong các thầy và các cô đóng góp ý kiến đế đề tài được hoàn thiện hơn. Em xin chân thành cảm ơn Quảng Nam, 05 tháng 05 năm 2017 Tác giả Trần Quốc Trưởng 1 Phần 1. PHẦN MỞ ĐẦU 1. Lý do chọn đề tài Cùng với sự phát triển của thị trường điện thoại di động trên thế giới là sự phát triển mạnh mẽ của ngành lập trình phần mềm ứng dụng cho các thiết bị di động. Phần mềm, ứng dụng hay game trên các thiết bị điện thoại di động là rất đa dạng và phong phú trên các hệ điều hành di động. Tuy nhiên, để xây dựng và phát triển được một phần mềm hay một ứng dụng trên điện thoại không phải là một chuyện đơn giản. Các lập trình viên phải lựa chọn một cách cẩn thận hướng phát triển cho ứng dụng của mình. Hiện nay, việc phát triển một ứng dụng di động được chia làm 3 loại chính: Native app, Mobile web và Hybrid app. Native app và Mobile web đều có những điểm mạnh và điểm yếu riêng. Tuy nhiên, Hybrid app lại là sự kết hợp của Native app và Mobile web. Vì vây, Hybrid app vừa tận dụng được sức mạnh của Mobile web vừa có khả năng thao tác hệ thống của Native app. Trong tương lai công nghệ Hybrid app hứa hẹn sẽ là sự thay thế hoàn hảo cho các ứng dụng mobile hiện nay. Ionic Framework là một Hybrid Framework dựa trên sự kết hợp của Angular và Cordova. Framework mạnh mẽ nhất để viết các ứng dụng Hybrid chính là Ionic Framework. Đó là lý do tôi chọn đề tài này. 2. Mục tiêu của đề tài Tìm hiểu và phân tích được những nội dung lý thuyết của Ionic Framework, Angular JS và Apache Cordova, cách áp dụng chúng vào việc xây dựng ứng dụng mobile đa nền tảng. Đem lại cho chính bản thân khả năng tự xây dựng ứng một ứng dụng mobile đa nền tảng hoàn chỉnh cũng như có một nền tảng kiến thức vững chắc về IonicFramework, Angular JS và Apache Cordova. Xây dựng phần mềm bảo hành thiết bị tin học trên mobile để áp dụng vào các công ty chuyên kinh doanh về các thiết bị tin học. 3. Đối tượng và phạm vi nghiên cứu Nghiên cứu về Ionic Framework, AngularJS, Apache Cordova và các vấn đề liên quan. Xây dựng phần mềm bảo hành thiết bị tin học trên mobile. 2 4. Phương pháp nghiên cứu Nghiên cứu lý thuyết. Áp dụng để xây dựng ứng dụng thực tế. 5. Ý nghĩa khoa học và thực tiễn của đề tài Xây dựng được một tài liệu tương đối hoàn chỉnh về Ionic Framework, Angular JS, Apache Cordova và các vấn đề liên quan để mọi người có thể tham khảo và học tập. Xây dựng ứng dụng bảo hành thiết bị tin học trên mobile ứng dụng thực tiễn. 6. Bố cục của đề tài Đề tài này sẽ gồm 3 chương: - Chương 1: Tổng quan về lập trình di động - Chương 2: Ionic framework, Angular Js, Apache Cordova và các vấn đề liên quan - Chương 3: Ứng dụng bảo hành thiết bị tin học trên mobile 3 Phần 2. NỘI DUNG NGHIÊN CỨU Chương 1: TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG 1.1. Lập trình di động và lịch sử phát triển Lập trình di động có lẻ là một từ không hề xa lạ với tất cả chúng ta. Trong khoảng thời gian gần đây, lập trình di động đang phát triển rất mạnh mẽ, hàng ngàn, hàng triệu ứng dụng của điện thoại thông minh được ra đời mỗi năm. Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao nhất là Android, iOS và Windows Phone, tiếp sau đó là một số hệ điều hành khác như BlackBerry… - Android Android là hệ điều hành mã nguồn mở dựa trên nền tảng Linux dành cho thiết bị di động như điện thoại thông minh và máy tính bảng. Android được phát triển bởi Open Handset Alliance, quản lý bởi Google và một số công ty khác. Android luôn chiếm hơn 70 thị phần của mảng di động. Đa số ứng dụng Android được viết bằng ngôn ngữ Java, do đó các bạn lập trình viên Java có thể dễ dàng chuyển hướng qua mảng này. Giao diện người dùng của Android dựa trên nguyên tắc tác động trực tiếp, sử dụng cảm ứng chạm tương tự như những động tác ngoài đời thực như vuốt, chạm, kéo dãn và thu lại để xử lý các đối tượng trên màn hình. Các thiết bị Android sau khi khởi động sẽ hiển thị màn hình chính, điểm khởi đầu với các thông tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn. Màn hính chính Android thường gồm nhiều biểu tượng (icon) và tiện ích (widget ). Giao diện màn hình chính của Android có thể tùy chỉnh ở mức cao, cho phép người dùng tự do sắp đặt hình dáng cũng như hành vi của thiết bị theo sở thích. - iOS iOS là một hệ điều hành điện thoại di động được phát triển bởi Apple và phân phối độc quyền cho phần cứng của Apple. Ban đầu, iOS được công bố năm 2007 cho IPhone, sau đó được mở rộng để hỗ trợ các thiết bị khác của Apple như iPod Touch (tháng 9 năm 4 2007), iPad (tháng 1 năm 2010), iPad Mini (tháng 11 năm 2012) và thế hệ thứ hai của Apple tivi trở đi (tháng 9 năm 2010). Giao diện người dùng của iOS được dựa trên khái niệm về thao tác trực tiếp bằng tay, sử dụng các cử chỉ đa cảm ứng. Các yếu tố giao diện điều khiển bao gồm các thanh trượt, công tắc và các nút. Tương tác với các hệ điều hành bao gồm các cử chỉ như chạm, trượt, vuốt. Từ ngày ra đời và phát triển hệ điều hành iOS đã trở thành một xu hướng trên toàn cầu với sự phát triển thịnh hành của dòng điện thoại smartphone. - Windows Phone Windows Phone là hệ điều hành dành cho điện thoại thông minh của Microsoft, thay thế cho nền tảng Windows Mobile. Dù vậy hiện tại hai hệ điều hành này vẫn chưa tương thích được với các phiên bản cũ do thời gian phát triển quá nhanh. Windows bắt đầu được ra mắt chính thức vào tháng 22010 ở triển lãm Mobile World Congress diễn ra ở Barcelona, Tây Ban Nha, đến tháng 102010, 10 thiết bị Windows Phone đầu tiên đến từ HTC, Dell, Samsung, LG đã được ra mắt và bán ra rộng rãi trên thế giới một thời gian sau đó. Windows Phone có giao diện người dùng được Microsoft gọi với cái tên "Metro". Màn hình chính, có tên là "Start Screen", được cấu tạo bỏi những "Lát Gạch" (Live Tiles). Những viên Gạch này link đến những ứng dụng, tính năng, chức năng và những thứ khác (như tên danh bạ, bookmarks, tập tin nhạc...). Người dùng có thể thêm, sắp xếp hoặc xóa Gạch, tuy nhiên nó không đồng nghĩa việc gỡ ứng dụng ra khỏi thiết bị. Trên đây là 3 hệ điều hành điện thoại di động phổ biến nhất trên thế giới. Với những hệ điều hành trên, việc xây dựng một ứng dụng di động đều phụ thuộc vào ý định của người lập trình. Với mỗi hệ điều hành, các ứng dụng di động đều rất phong phú và đa dạng. 1.2. Các loại hình phát triển và các tính năng. Hiện nay, phát triển một ứng dụng di động được chia làm ba loại chính: Native App, Mobile Web App và Hybrid App. Mỗi loại sẽ có một đặc điểm riêng của mình. - Native App 5 Đây là phương tiện mạnh mẽ và phổ biến nhất được các lập trình viên sử dụng để phát triển các ứng dụng cho thiết bị di động. Hiểu 1 cách khái quát thì đây là cách thức phát triển dựa vào các công cụ lập trình gốc được các hãng phân phối. Ví dụ như với Android chúng ta có Eclipse + Android SDK hoặc sử dụng Android Studio của chính Google, với iOS chúng ta có xCode đặc trưng của MacOS, với Window Phone thì chúng ta có Visual Studio và một số IDE của hãng thứ 3 khác… Điểm mạnh của native app là lập trình viên có thể sử dụng được hết sức mạnh của hệ điều hành, và ứng dụng chạy mượt mà mà hơn. Không những vậy hiện này đã có một số công ty đã phát triển công nghệ sử dụng một ngôn ngữ chung (C, Javascript…) để viết các ứng dụng native cho nhiều nền tảng (Android, iOS, Window phone). Ví dụ như Xamarin, Titaninum, NativeScript, Rem Object… là các công nghệ đa nền tảng (cross-platform), bạn chỉ cần biết một ngôn ngữ thì có thể viết được các ứng dụng native. Tuy vậy điểm yếu của native app là cần nhiều lập trình viên để tạo ra các ứng dụng cho từng nền tảng, dù hiện này các công nghệ cross-platform mới như Xamarin, Titaninum… đã giúp các lập trình viên giảm bớt khối lượng code phải viết, nhưng vẫn phải cần các lập trình viên chuyên cho từng nền tảng. Vì thế ứng dụng ra thị trường thường chậm hơn và chất lượng giữa các ứng dụng trên từng nền tảng có thể không đồng đều. - Mobile Web App Bản chất ứng dụng chỉ là webview được nhúng file html, css, js vào trong đó, hoặc nó truy cập trực tiếp vào website nhà cung cấp, hoàn toàn được phát triển bởi các lập trình viên web. Điểm mạnh của nó là có thể tạo ứng dụng rất nhanh, phù hợp với những ứng dụng có tính marketing cao, không phụ thuộc vào hệ điều hành, rất tiết kiệm chi phí (không cần phải thuê thêm các lập trình viên di động cho từng nền tảng). Nhưng bù lại nó hầu như không có khả năng tương tác với hệ điều hành, hiệu năng thấp, trải nghiệm người dùng không cao và chỉ hoạt động khi có internet. Mobile webapp hoàn toàn không phù hợp với nhưng ứng dụng có tính phức tạp cao, yêu cầu trải nghiệm người dùng lớn. - Hybrid App 6 Đây là 1 “con lai” của Native và Webmobile. Bản chất của Hybrid là giao diện được viết bằng ngôn ngữ HTML, CSS, Javscript nhưng nó cho phép gọi được các API của hệ thống để thao tác với hệ điều hành (đọc ghi file, bluetooth, camera, sensor). Vì vậy hybrid vừa tận dụng được sức mạnh của Mobile webapp vừa khả năng thao tác hệ thống của Native app. Trong tương lai công nghệ Hybrid hứa hẹn sẽ là sự thay thế hoàn hảo có các ứng dụng mobile hiện nay. Đại diện cho công nghệ Hybrid này có thể kể đến PhoneGap, Ionic, Trigger.IO… 7 Chương 2: IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ CÁC VẤN ĐỀ LIÊN QUAN 2.1. Angular JS 2.1.1. Angular Js là gì? AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một nhân viên của Google. Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và phiên bản 1.0 được cho ra mắt vào năm 2012. Do sự hữu ích của dự án này nên Google quyết định là công ty chính thức đứng đằng sau hỗ trợ sự phát triển của Angular JS. Angular JS là một khung làm việc được viết bằng Javascript (hay còn được gọi là Javascript Framework). Angular JS không chỉ đơn giản là một thư viện mà nó còn là một framework. Khác với các thư viện Javascript như jQuery, Angular JS đưa ra hướng dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript. 2.1.2. Các đặc tính của Angular Js Angular Js bao gồm các đặc tính cơ bản sau: Angular JS là một Framework phát triển dựa trên Javascript để tạo các ứng dụng web phong phú. Angular JS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi dữ liệu, sử dụng mô hình MVC rất mạnh mẽ. Mã nguồn Angular JS tự động thích ứng với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt. Là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới. Chung quy lại có thể hiểu khi làm việc với Angular JS giống như là đang làm việc với Ajax, sử dụng cơ chế Bing Data, hoạt động theo mô hình MVC và sử dụng Service để tương tác với dữ liệu từ server. 2.1.3. Các thành phần chính của Angular Js Angular JS được chia làm ba thành phần chính sau đây: 8 Ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML. Ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular. Ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags. 2.1.4. Các tính năng của Angular Js Sau đây là các tính năng cốt lõi quan trọng trong Angular JS Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view. Scope: (phạm vi) Đây là những đối tượng kết nối giữa Controller và View. Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope. Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB. Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới. Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh. Templates: hiển thị thông tin từ controller, đây là một thành phần của views. Routing: chuyển đổi giữa các action trong controller. MVC: Mô hình chia thành phần riêng biệt thành Model, View… Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm. Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng. 2.1.5. Ưu và nhược điểm của Angular Js Ưu điểm: Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch. Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu. Angular đang ở giai đoạn thử nghiệm. Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh. Nhược điểm: 9 Không oan toàn: Được phát triển từ javascript nên nó không oan toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru. Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì Angular cũng sẽ bị vô hiệu hóa. 2.2. Apache Cordova 2.2.1. Apache Cordava 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ị. 2.2.2. Các tính năng của Cordova Các tính năng chính của Cordova gồm có ba loại sau : Command Line Interface (Cordova CLI): đây là một công cụ dùng để khởi tạo một dự án, xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn. Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng dụng di động cần đến. Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị di động như cảm biến, camera, GPS… 2.2.3. Ưu và nhược điểm của Cordova - Các ưu điểm 10 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. - Các nhược điểm 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.3. Ionic Framework 2.3.1. Ionic Framework là gì? Ionic là một framework được sử dụng để phát triển các ứng dụng di động dựa trên nền tảng công nghệ web HTML5 để tạo ra các ứng dụng lai hóa (hybrid apps) chạy trên các thiết bị di động khác nhau. Ứng dụng lai hóa ở đây được hiểu cơ bản là các ứng dụng chạy trên nền các trình duyệt được nhúng vào trong một ứng dụng được cài đặt và có thể giao tiếp, truy cập, điều khiển sử dụng các thiết bị phần cứng và hệ điều hành mobile. Về phía người dùng thì không thể phân biệt đâu là ứng dụng dạng lai hóa hay ứng dụng thuần (native apps). Và các ứng dụng dạng lai hóa có nhiều lợi ích hơn các ứng dụng bản địa thuần túy, đặc biệt là có sự hỗ trợ của bên thứ 3 về nền tảng hỗ trợ, tốc độ phát triển và các thư viện mã nguồn. Hãy tưởng tượng Ionic như là một khung phát triển giao diện người dùng để xử lý tất cả các tương tác giao diện người dùng làm cho ứng dụng trở nên thuyết phục và dễ dàng 11 sử dụng. Kiểu như “Bootstrap for Native”, tức là như các ứng dụng Native nhưng có sự hỗ trợ bởi một loạt các thành phần giao diện động và thiết kế đẹp. Không giống như Responsive framework, Ionic rất gần với dạng native, nó có các thành phần và bố cục giao diện hoàn toàn giống như khi phát triển với một native SDK trên iOS hoặc Android. Ionic cũng giúp cho việc phát triển một cách dễ dàng nhưng mạnh mẽ để xây dựng các ứng dụng di động mà làm mờ đi sự tồn tại của công nghệ HTML5. Bản chất Ionic là một khung phát triển HTML5, nó cần một vỏ bọc native như Cordova hay PhoneGap để có thể khởi động như một ứng dụng native. Ionic được hỗ trợ mạnh mẽ bởi Cordova. Việc cài đặt và khởi tạo một dự án Ionic rất dễ dàng thông qua giao diện dòng lệnh dựa trên Node.js 2.3.2. Tính năng của Ionic Framework - Cordova - 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 lập trình viên 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 thiết bị 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. - Giao diện người dùng UI 12 Ionic thể hiện được tiềm năng của nó. là 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 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. - 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ú. Ở phiên bản hiện tại v1.2.8, Ionic cung cấp một loạt các thành phần giao diện thiết kế sẵn 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. - Pairing with Angular JS Ionic sử dụng AngularJS để tạo ra một framework tốt nhất cho việc xây dựng các ứng dụng di động đa nền tảng, nó cung cấp một bộ giao diện người dùng (UI) mã nguồn mở miễn phí đi cùng với các tính năng của AngularJS. Việc xây dựng ứng dụng dựa trên AngularJS đòi hỏi mã nguồn phải có khả năng mở rộng cao để bổ sung các tính năng mới. Tuy nhiên với Ionic, người ta có thể tái sử dụng các chức năng trong ứng dụng trên các nền tảng khác nhau đồng thời vẫn có thể tùy chỉnh giao diện người dùng cho mỗi nền tảng riêng biệt. Các thành phần trong Ionic như danh sách, slide... chính là các directive (các thuộc tính của thẻ 13 HTML dùng trong Angular) của AngularJS. Đó là lí do khiến cho Ionic và AngularJS kết hợp rất tốt với nhau. - 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ó. - 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 nat...
PHẦN MỞ ĐẦU
Lý do chọn đề tài
Cùng với sự phát triển của thị trường điện thoại di động trên thế giới là sự phát triển mạnh mẽ của ngành lập trình phần mềm ứng dụng cho các thiết bị di động Phần mềm, ứng dụng hay game trên các thiết bị điện thoại di động là rất đa dạng và phong phú trên các hệ điều hành di động Tuy nhiên, để xây dựng và phát triển được một phần mềm hay một ứng dụng trên điện thoại không phải là một chuyện đơn giản Các lập trình viên phải lựa chọn một cách cẩn thận hướng phát triển cho ứng dụng của mình
Hiện nay, việc phát triển một ứng dụng di động được chia làm 3 loại chính: Native app, Mobile web và Hybrid app Native app và Mobile web đều có những điểm mạnh và điểm yếu riêng Tuy nhiên, Hybrid app lại là sự kết hợp của Native app và Mobile web Vì vây, Hybrid app vừa tận dụng được sức mạnh của Mobile web vừa có khả năng thao tác hệ thống của Native app Trong tương lai công nghệ Hybrid app hứa hẹn sẽ là sự thay thế hoàn hảo cho các ứng dụng mobile hiện nay
Ionic Framework là một Hybrid Framework dựa trên sự kết hợp của Angular và Cordova Framework mạnh mẽ nhất để viết các ứng dụng Hybrid chính là Ionic Framework Đó là lý do tôi chọn đề tài này.
Mục tiêu của đề tài
Tìm hiểu và phân tích được những nội dung lý thuyết của Ionic Framework, Angular JS và Apache Cordova, cách áp dụng chúng vào việc xây dựng ứng dụng mobile đa nền tảng Đem lại cho chính bản thân khả năng tự xây dựng ứng một ứng dụng mobile đa nền tảng hoàn chỉnh cũng như có một nền tảng kiến thức vững chắc về IonicFramework, Angular JS và Apache Cordova
Xây dựng phần mềm bảo hành thiết bị tin học trên mobile để áp dụng vào các công ty chuyên kinh doanh về các thiết bị tin học.
Đối tượng và phạm vi nghiên cứu
Nghiên cứu về Ionic Framework, AngularJS, Apache Cordova và các vấn đề liên quan Xây dựng phần mềm bảo hành thiết bị tin học trên mobile
Phương pháp nghiên cứu
Nghiên cứu lý thuyết Áp dụng để xây dựng ứng dụng thực tế.
Ý nghĩa khoa học và thực tiễn của đề tài
Xây dựng được một tài liệu tương đối hoàn chỉnh về Ionic Framework, Angular JS, Apache Cordova và các vấn đề liên quan để mọi người có thể tham khảo và học tập
Xây dựng ứng dụng bảo hành thiết bị tin học trên mobile ứng dụng thực tiễn.
Bố cục của đề tài
Đề tài này sẽ gồm 3 chương:
- Chương 1: Tổng quan về lập trình di động
- Chương 2: Ionic framework, Angular Js, Apache Cordova và các vấn đề liên quan
- Chương 3: Ứng dụng bảo hành thiết bị tin học trên mobile
NỘI DUNG NGHIÊN CỨU
1.1 Lập trình di động và lịch sử phát triển
Lập trình di động có lẻ là một từ không hề xa lạ với tất cả chúng ta Trong khoảng thời gian gần đây, lập trình di động đang phát triển rất mạnh mẽ, hàng ngàn, hàng triệu ứng dụng của điện thoại thông minh được ra đời mỗi năm
Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao nhất là Android, iOS và Windows Phone, tiếp sau đó là một số hệ điều hành khác như BlackBerry…
Android là hệ điều hành mã nguồn mở dựa trên nền tảng Linux dành cho thiết bị di động như điện thoại thông minh và máy tính bảng Android được phát triển bởi Open Handset Alliance, quản lý bởi Google và một số công ty khác
Android luôn chiếm hơn 70% thị phần của mảng di động Đa số ứng dụng Android được viết bằng ngôn ngữ Java, do đó các bạn lập trình viên Java có thể dễ dàng chuyển hướng qua mảng này
Giao diện người dùng của Android dựa trên nguyên tắc tác động trực tiếp, sử dụng cảm ứng chạm tương tự như những động tác ngoài đời thực như vuốt, chạm, kéo dãn và thu lại để xử lý các đối tượng trên màn hình
Các thiết bị Android sau khi khởi động sẽ hiển thị màn hình chính, điểm khởi đầu với các thông tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn Màn hính chính Android thường gồm nhiều biểu tượng (icon) và tiện ích (widget) Giao diện màn hình chính của Android có thể tùy chỉnh ở mức cao, cho phép người dùng tự do sắp đặt hình dáng cũng như hành vi của thiết bị theo sở thích
- iOS iOS là một hệ điều hành điện thoại di động được phát triển bởi Apple và phân phối độc quyền cho phần cứng của Apple Ban đầu, iOS được công bố năm 2007 cho IPhone, sau đó được mở rộng để hỗ trợ các thiết bị khác của Apple như iPod Touch (tháng 9 năm
TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG
Lập trình di động và lịch sử phát triển
Lập trình di động có lẻ là một từ không hề xa lạ với tất cả chúng ta Trong khoảng thời gian gần đây, lập trình di động đang phát triển rất mạnh mẽ, hàng ngàn, hàng triệu ứng dụng của điện thoại thông minh được ra đời mỗi năm
Trên thị trường ứng dụng di động hiện nay, 3 hệ điều hành chiếm thị phần cao nhất là Android, iOS và Windows Phone, tiếp sau đó là một số hệ điều hành khác như BlackBerry…
Android là hệ điều hành mã nguồn mở dựa trên nền tảng Linux dành cho thiết bị di động như điện thoại thông minh và máy tính bảng Android được phát triển bởi Open Handset Alliance, quản lý bởi Google và một số công ty khác
Android luôn chiếm hơn 70% thị phần của mảng di động Đa số ứng dụng Android được viết bằng ngôn ngữ Java, do đó các bạn lập trình viên Java có thể dễ dàng chuyển hướng qua mảng này
Giao diện người dùng của Android dựa trên nguyên tắc tác động trực tiếp, sử dụng cảm ứng chạm tương tự như những động tác ngoài đời thực như vuốt, chạm, kéo dãn và thu lại để xử lý các đối tượng trên màn hình
Các thiết bị Android sau khi khởi động sẽ hiển thị màn hình chính, điểm khởi đầu với các thông tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn Màn hính chính Android thường gồm nhiều biểu tượng (icon) và tiện ích (widget) Giao diện màn hình chính của Android có thể tùy chỉnh ở mức cao, cho phép người dùng tự do sắp đặt hình dáng cũng như hành vi của thiết bị theo sở thích
- iOS iOS là một hệ điều hành điện thoại di động được phát triển bởi Apple và phân phối độc quyền cho phần cứng của Apple Ban đầu, iOS được công bố năm 2007 cho IPhone, sau đó được mở rộng để hỗ trợ các thiết bị khác của Apple như iPod Touch (tháng 9 năm
2007), iPad (tháng 1 năm 2010), iPad Mini (tháng 11 năm 2012) và thế hệ thứ hai của Apple tivi trở đi (tháng 9 năm 2010)
Giao diện người dùng của iOS được dựa trên khái niệm về thao tác trực tiếp bằng tay, sử dụng các cử chỉ đa cảm ứng Các yếu tố giao diện điều khiển bao gồm các thanh trượt, công tắc và các nút Tương tác với các hệ điều hành bao gồm các cử chỉ như chạm, trượt, vuốt
Từ ngày ra đời và phát triển hệ điều hành iOS đã trở thành một xu hướng trên toàn cầu với sự phát triển thịnh hành của dòng điện thoại smartphone
Windows Phone là hệ điều hành dành cho điện thoại thông minh của Microsoft, thay thế cho nền tảng Windows Mobile Dù vậy hiện tại hai hệ điều hành này vẫn chưa tương thích được với các phiên bản cũ do thời gian phát triển quá nhanh
Windows bắt đầu được ra mắt chính thức vào tháng 2/2010 ở triển lãm Mobile World Congress diễn ra ở Barcelona, Tây Ban Nha, đến tháng 10/2010, 10 thiết bị Windows Phone đầu tiên đến từ HTC, Dell, Samsung, LG đã được ra mắt và bán ra rộng rãi trên thế giới một thời gian sau đó
Windows Phone có giao diện người dùng được Microsoft gọi với cái tên "Metro" Màn hình chính, có tên là "Start Screen", được cấu tạo bỏi những "Lát Gạch" (Live Tiles) Những viên Gạch này link đến những ứng dụng, tính năng, chức năng và những thứ khác (như tên danh bạ, bookmarks, tập tin nhạc ) Người dùng có thể thêm, sắp xếp hoặc xóa Gạch, tuy nhiên nó không đồng nghĩa việc gỡ ứng dụng ra khỏi thiết bị
Trên đây là 3 hệ điều hành điện thoại di động phổ biến nhất trên thế giới Với những hệ điều hành trên, việc xây dựng một ứng dụng di động đều phụ thuộc vào ý định của người lập trình Với mỗi hệ điều hành, các ứng dụng di động đều rất phong phú và đa dạng.
Các loại hình phát triển và các tính năng
Hiện nay, phát triển một ứng dụng di động được chia làm ba loại chính: Native App, Mobile Web App và Hybrid App Mỗi loại sẽ có một đặc điểm riêng của mình
5 Đây là phương tiện mạnh mẽ và phổ biến nhất được các lập trình viên sử dụng để phát triển các ứng dụng cho thiết bị di động Hiểu 1 cách khái quát thì đây là cách thức phát triển dựa vào các công cụ lập trình gốc được các hãng phân phối Ví dụ như với Android chúng ta có Eclipse + Android SDK hoặc sử dụng Android Studio của chính Google, với iOS chúng ta có xCode đặc trưng của MacOS, với Window Phone thì chúng ta có Visual Studio và một số IDE của hãng thứ 3 khác… Điểm mạnh của native app là lập trình viên có thể sử dụng được hết sức mạnh của hệ điều hành, và ứng dụng chạy mượt mà mà hơn
Không những vậy hiện này đã có một số công ty đã phát triển công nghệ sử dụng một ngôn ngữ chung (C#, Javascript…) để viết các ứng dụng native cho nhiều nền tảng (Android, iOS, Window phone) Ví dụ như Xamarin, Titaninum, NativeScript, Rem Object… là các công nghệ đa nền tảng (cross-platform), bạn chỉ cần biết một ngôn ngữ thì có thể viết được các ứng dụng native
Tuy vậy điểm yếu của native app là cần nhiều lập trình viên để tạo ra các ứng dụng cho từng nền tảng, dù hiện này các công nghệ cross-platform mới như Xamarin, Titaninum… đã giúp các lập trình viên giảm bớt khối lượng code phải viết, nhưng vẫn phải cần các lập trình viên chuyên cho từng nền tảng Vì thế ứng dụng ra thị trường thường chậm hơn và chất lượng giữa các ứng dụng trên từng nền tảng có thể không đồng đều
Bản chất ứng dụng chỉ là webview được nhúng file html, css, js vào trong đó, hoặc nó truy cập trực tiếp vào website nhà cung cấp, hoàn toàn được phát triển bởi các lập trình viên web Điểm mạnh của nó là có thể tạo ứng dụng rất nhanh, phù hợp với những ứng dụng có tính marketing cao, không phụ thuộc vào hệ điều hành, rất tiết kiệm chi phí (không cần phải thuê thêm các lập trình viên di động cho từng nền tảng) Nhưng bù lại nó hầu như không có khả năng tương tác với hệ điều hành, hiệu năng thấp, trải nghiệm người dùng không cao và chỉ hoạt động khi có internet Mobile webapp hoàn toàn không phù hợp với nhưng ứng dụng có tính phức tạp cao, yêu cầu trải nghiệm người dùng lớn
6 Đây là 1 “con lai” của Native và Webmobile Bản chất của Hybrid là giao diện được viết bằng ngôn ngữ HTML, CSS, Javscript nhưng nó cho phép gọi được các API của hệ thống để thao tác với hệ điều hành (đọc ghi file, bluetooth, camera, sensor) Vì vậy hybrid vừa tận dụng được sức mạnh của Mobile webapp vừa khả năng thao tác hệ thống của Native app Trong tương lai công nghệ Hybrid hứa hẹn sẽ là sự thay thế hoàn hảo có các ứng dụng mobile hiện nay Đại diện cho công nghệ Hybrid này có thể kể đến PhoneGap, Ionic, Trigger.IO…
IONIC FRAMEWORK, ANGULAR JS, APACHE CORDOVA VÀ CÁC VẤN ĐỀ LIÊN QUAN
Angular JS
AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một nhân viên của Google Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và phiên bản 1.0 được cho ra mắt vào năm 2012 Do sự hữu ích của dự án này nên Google quyết định là công ty chính thức đứng đằng sau hỗ trợ sự phát triển của Angular JS
Angular JS là một khung làm việc được viết bằng Javascript (hay còn được gọi là Javascript Framework) Angular JS không chỉ đơn giản là một thư viện mà nó còn là một framework Khác với các thư viện Javascript như jQuery, Angular JS đưa ra hướng dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript
2.1.2 Các đặc tính của Angular Js
Angular Js bao gồm các đặc tính cơ bản sau:
Angular JS là một Framework phát triển dựa trên Javascript để tạo các ứng dụng web phong phú
Angular JS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi dữ liệu, sử dụng mô hình MVC rất mạnh mẽ
Mã nguồn Angular JS tự động thích ứng với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt
Là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới
Chung quy lại có thể hiểu khi làm việc với Angular JS giống như là đang làm việc với Ajax, sử dụng cơ chế Bing Data, hoạt động theo mô hình MVC và sử dụng Service để tương tác với dữ liệu từ server
2.1.3 Các thành phần chính của Angular Js
Angular JS được chia làm ba thành phần chính sau đây:
Ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML
Ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular
Ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags
2.1.4 Các tính năng của Angular Js
Sau đây là các tính năng cốt lõi quan trọng trong Angular JS
Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view
Scope: (phạm vi) Đây là những đối tượng kết nối giữa Controller và View
Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope
Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB
Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới
Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh
Templates: hiển thị thông tin từ controller, đây là một thành phần của views
Routing: chuyển đổi giữa các action trong controller
MVC: Mô hình chia thành phần riêng biệt thành Model, View…
Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm
Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng
2.1.5 Ưu và nhược điểm của Angular Js Ưu điểm:
Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch
Angular sử dụng data bind giống NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu
Angular đang ở giai đoạn thử nghiệm
Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh
Không oan toàn: Được phát triển từ javascript nên nó không oan toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru
Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì Angular cũng sẽ bị vô hiệu hóa.
Apache Cordova
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ị
2.2.2 Các tính năng của Cordova
Các tính năng chính của Cordova gồm có ba loại sau :
Command Line Interface (Cordova CLI): đây là một công cụ dùng để khởi tạo một dự án, xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn
Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng dụng di động cần đến
Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị di động như cảm biến, camera, GPS…
2.2.3 Ưu và nhược điểm 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
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ị.
Ionic Framework
Ionic là một framework được sử dụng để phát triển các ứng dụng di động dựa trên nền tảng công nghệ web HTML5 để tạo ra các ứng dụng lai hóa (hybrid apps) chạy trên các thiết bị di động khác nhau Ứng dụng lai hóa ở đây được hiểu cơ bản là các ứng dụng chạy trên nền các trình duyệt được nhúng vào trong một ứng dụng được cài đặt và có thể giao tiếp, truy cập, điều khiển sử dụng các thiết bị phần cứng và hệ điều hành mobile
Về phía người dùng thì không thể phân biệt đâu là ứng dụng dạng lai hóa hay ứng dụng thuần (native apps) Và các ứng dụng dạng lai hóa có nhiều lợi ích hơn các ứng dụng bản địa thuần túy, đặc biệt là có sự hỗ trợ của bên thứ 3 về nền tảng hỗ trợ, tốc độ phát triển và các thư viện mã nguồn
Hãy tưởng tượng Ionic như là một khung phát triển giao diện người dùng để xử lý tất cả các tương tác giao diện người dùng làm cho ứng dụng trở nên thuyết phục và dễ dàng
11 sử dụng Kiểu như “Bootstrap for Native”, tức là như các ứng dụng Native nhưng có sự hỗ trợ bởi một loạt các thành phần giao diện động và thiết kế đẹp
Không giống như Responsive framework, Ionic rất gần với dạng native, nó có các thành phần và bố cục giao diện hoàn toàn giống như khi phát triển với một native SDK trên iOS hoặc Android Ionic cũng giúp cho việc phát triển một cách dễ dàng nhưng mạnh mẽ để xây dựng các ứng dụng di động mà làm mờ đi sự tồn tại của công nghệ HTML5
Bản chất Ionic là một khung phát triển HTML5, nó cần một vỏ bọc native như Cordova hay PhoneGap để có thể khởi động như một ứng dụng native Ionic được hỗ trợ mạnh mẽ bởi Cordova Việc cài đặt và khởi tạo một dự án Ionic rất dễ dàng thông qua giao diện dòng lệnh dựa trên Node.js
2.3.2 Tính năng của Ionic Framework
- 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 lập trình viên 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 thiết bị và bảo trì
- 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
- Giao diện người dùng UI
Ionic thể hiện được tiềm năng của nó là 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 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
- 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ú Ở phiên bản hiện tại v1.2.8, Ionic cung cấp một loạt các thành phần giao diện thiết kế sẵn 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
Ionic sử dụng AngularJS để tạo ra một framework tốt nhất cho việc xây dựng các ứng dụng di động đa nền tảng, nó cung cấp một bộ giao diện người dùng (UI) mã nguồn mở miễn phí đi cùng với các tính năng của AngularJS
Việc xây dựng ứng dụng dựa trên AngularJS đòi hỏi mã nguồn phải có khả năng mở rộng cao để bổ sung các tính năng mới Tuy nhiên với Ionic, người ta có thể tái sử dụng các chức năng trong ứng dụng trên các nền tảng khác nhau đồng thời vẫn có thể tùy chỉnh giao diện người dùng cho mỗi nền tảng riêng biệt Các thành phần trong Ionic như danh sách, slide chính là các directive (các thuộc tính của thẻ
HTML dùng trong Angular) của AngularJS Đó là lí do khiến cho Ionic và AngularJS kết hợp rất tốt với nhau
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
Sử dụng Angular JS, Apache Cordova và Ionic Framework trong việc xây dựng ứng dụng
2.4.1 Cài đặt Ionic Để cài đặt Ionic, đầu tiên bạn phải tải nodeJS NodeJS bạn có thể tải tại địa chỉ https://nodejs.org/ Sau khi tải về, bạn tiến hành cài đặt nodeJS
Sau khi cài đặt nodeJS xong, bạn mở cửa sổ command lên và gõ lệnh npm install -g cordova ionic để tiến hành cài đặt Ionic Framework Quá trình cài đặt sẽ mất khoảng
10p Cài xong là bạn có thể tiến hành tạo ứng dụng đầu tiên
2.4.2 Tạo ứng dụng đầu tiên
15 Để tạo ứng dụng, đầu tiên bạn phải tạo một thư mục chứa project của mình Sau đó các bạn dùng cửa sổ cmd để cd đến thư mục vừa tạo và gõ lệnh tạo project Bạn có thể tạo một ứng dụng mặc định, không có gì trong ứng dụng vừa tạo bằng lệnh $ ionic start myApp blank, hoặc tạo ứng dụng với tabs có sẵn bằng lệnh $ ionic start myApp tabs, và bạn cũng có thể tạo một ứng dụng với sidemenu mặt định bằng lệnh $ ionic start myApp sidemenu
Với mỗi yêu cầu ứng dụng khác nhau, bạn có thể chọn một cách tạo project phù hợp
Toàn bộ code của ứng dụng được nằm trong thư mục sampleApp/www Bạn dùng Html, Css và AngularJs để để xây dựng ứng dụng Bạn có thể mở toàn bộ thư mục bằng các công cụ soạn thỏa dùng để lập trình hay bất cứ công cụ soạn thảo văn bản nào để chỉnh sửa ứng dụng
2.4.4 Chạy ứng dụng Để chạy ứng dụng, bạn có thể dùng các cách sau đây:
Chạy ứng dụng trên trình duyệt, đây là cách đơn giản nhất, phù hợp cho việc quan sát và sửa ứng dụng một cách tiện lợi nhất trong quá trình làm việc Bạn mở cửa sổ command lên, cd vào project vừa tạo và gõ lệnh $ ionic serve Sau khi ứng dụng chạy lên, bạn có thể cho thu nhỏ trình duyệt giống như màn hình di động để quan sát
Sử dụng Ionic view Ở cửa sổ command, bạn gõ lệnh $ ionic upload, sau khi thực hiện lệnh xong, bạn tải ứng dụng Ionic view về và tiến hành xem ứng dụng của mình vừa upload lên
Bạn có thể xuất ứng dụng ra file apk để dùng cho android bằng lệnh $ ionic built android hoặc sử dụng Git để đưa lên github, sau đó sử dụng Phonegap Built để xuất ra file apk online
Các vấn đề liên quan
- Giới thiệu về web service
Web service là một hệ thống phần mềm được thiết kế để hỗ trợ khả năng tương tác giữa các ứng dụng trên các máy tính khác nhau thông qua mạng Internet, giao diện chung và sự gắn kết của nó được mô tả bằng XML Web service là tài nguyên phần mềm có thể xác định bằng địa chỉ URL, thực hiện các chức năng và đưa ra các thông tin người dùng yêu cầu Một Web service được tạo nên bằng cách lấy các chức năng và đóng gói chúng sao cho các ứng dụng khác dễ dàng nhìn thấy và có thể truy cập đến những dịch vụ mà nó thực hiện, đồng thời có thể yêu cầu thông tin từ Web service khác Nó bao gồm các mô đun độc lập cho hoạt động của khách hàng và doanh nghiệp và bản thân nó được thực thi trên server
Trước hết, có thể nói rằng ứng dụng cơ bản của Web service là tích hợp các hệ thống và là một trong những hoạt động chính khi phát triển hệ thống Trong hệ thống này, các ứng dụng cần được tích hợp với cơ sở dữ liệu (CSDL) và các ứng dụng khác, người sử dụng sẽ giao tiếp với CSDL để tiến hành phân tích và lấy dữ liệu Trong thời gian gần đây, việc phát triển mạnh mẽ của thương mại điện tử và B2B cũng đòi hỏi các hệ thống phải có khả năng tích hợp với CSDL của các đối tác kinh doanh (nghĩa là tương tác với hệ thống bên ngoài – bên cạnh tương tác với các thành phần bên trong của hệ thống trong doanh nghiệp) Đặc điểm của web service
Web service cho phép client và server tương tác được với nhau ngay cả trong những môi trường khác nhau Ví dụ, đặt Web server cho ứng dụng trên một máy chủ chạy hệ điều hành Linux trong khi người dùng sử dụng máy tính chạy hệ điều hành Windows, ứng dụng vẫn có thể chạy và xử lý bình thường mà không cần thêm yêu cầu đặc biệt để tương thích giữa hai hệ điều hành này Phần lớn kĩ thuật của Web service được xây dựng dựa trên mã nguồn mở và được phát triển từ các chuẩn đã được công nhận, ví dụ như XML
Một Web service bao gồm có nhiều mô-đun và có thể công bố lên mạng Internet
Là sự kết hợp của việc phát triển theo hướng từng thành phần với những lĩnh vực cụ thể và cơ sở hạ tầng Web, đưa ra những lợi ích cho cả doanh nghiệp, khách hàng, những nhà cung cấp khác và cả những cá nhân thông qua mạng Internet
Một ứng dụng khi được triển khai sẽ hoạt động theo mô hình client-server Nó có thể được triển khai bởi một phần mềm ứng dụng phía server ví dụ như PHP, Oracle Application server hay Microsoft.Net…
Ngày nay Web service đang rất phát triển, những lĩnh vực trong cuộc sống có thể áp dụng và tích hợp Web service là khá rộng lớn như dịch vụ chọn lọc và phân loại tin tức (hệ thống thư viện có kết nối đến web portal để tìm kiếm các thông tin cần thiết); ứng dụng cho các dịch vụ du lịch (cung cấp giá vé, thông tin về địa điểm…), các đại lý bán hàng qua mạng, thông tin thương mại như giá cả, tỷ giá hối đoái, đấu giá qua mạng…hay dịch vụ giao dịch trực tuyến (cho cả B2B và B2C) như đặt vé máy bay, thông tin thuê xe…
Các ứng dụng có tích hợp Web service đã không còn là xa lạ, đặc biệt trong điều kiện thương mại điện tử đang bùng nổ và phát triển không ngừng cùng với sự lớn mạnh của Internet Bất kì một lĩnh vực nào trong cuộc sống cũng có thể tích hợp với Web service, đây là cách thức kinh doanh và làm việc có hiệu quả bởi thời đại ngày nay là thời đại của truyền thông và trao đổi thông tin qua mạng Do vậy, việc phát triển và tích hợp các ứng dụng với Web service đang được quan tâm phát triển là điều hoàn toàn dễ hiểu
Web service cung cấp khả năng hoạt động rộng lớn với các ứng dụng phần mềm khác nhau chạy trên những nền tảng khác nhau
Sử dụng các giao thức và chuẩn mở Giao thức và định dạng dữ liệu dựa trên văn bản (text), giúp các lập trình viên dễ dàng hiểu được
Nâng cao khả năng tái sử dụng
Thúc đẩy đầu tư các hệ thống phần mềm đã tồn tại bằng cách cho phép các tiến trình/chức năng nghiệp vụ đóng gói trong giao diện Web service Tạo mối quan hệ tương tác lẫn nhau và mềm dẻo giữa các thành phần trong hệ thống, dễ dàng cho việc phát triển các ứng dụng phân tán
Thúc đẩy hệ thống tích hợp, giảm sự phức tạp của hệ thống, hạ giá thành hoạt động, phát triển hệ thống nhanh và tương tác hiệu quả với hệ thống của các doanh nghiệp khác
Những thiệt hại lớn sẽ xảy ra vào khoảng thời gian chết của Web service, giao diện không thay đổi, có thể lỗi nếu một máy khách không được nâng cấp, thiếu các giao thức cho việc vận hành
Có quá nhiều chuẩn cho Web service khiến người dùng khó nắm bắt
Phải quan tâm nhiều hơn đến vấn đề an toàn và bảo mật
2.5.2 TelerikFiddler Để có thể kiểm tra được các service này thông thường bạn sẽ phải tạo ra các ứng dụng client như console app, desktop app hay mobile app và viết code để kết nối và sử dụng trực tiếp các service này Điều này dẫn đến việc không test được trước các service nếu nó được viết bởi các lập trình viên khác Fiddler chính là giải pháp hữu hiệu cho vấn đề trên Đây là một công cụ của Telerik dùng để ghi lại các dữ liệu vào ra giữa máy tính của bạn và internet Bên cạnh việc xem được các dữ liệu này, bạn còn có thể thay đổi các thông tin vào ra ra giữa máy tính một cách rất dễ dàng Fiddler hỗ trợ rất nhiều loại trình khác nhau từ Internet Explorer, Google Chrome cho đến Safari, Firefox, Opera…
2.5.3 HTTP Request và HTTP Response
Hypertext Transfer Protocol (HTTP) là một giao thức không trạng thái (stateless) nằm ở tầng ứng dụng, đảm nhiệm việc giao tiếp giữa các hệ thống phân tán với nhau, và nó là nền tảng của web
HTTP cho phép giao tiếp giữa rất nhiều loại server/client với nhau, chủ yếu thông qua TCP/IP, tuy nhiên bất kỳ giao thức đáng tin cậy nào khác cũng có thể được dùng Cổng giao tiếp chuẩn là 80, tuy nhiên có thể dùng bất kỳ cổng khác Giao tiếp giữa client và server dựa vào một cặp request/response Client khởi tạo HTTP request và nhận HTTP response từ server gửi về
HTTP request bao gồm hai thành phần quan trọng là URL và Verb (phương thức), được gửi từ client Ở phía ngược lại, server trả về HTTP response trong đó chứa Status code và Message body
ỨNG DỤNG BẢO HÀNH THIẾT BỊ TIN HỌC
Giới thiệu phần mềm bảo hành thiết bị tin học
Hiện nay có rất nhiều công ty chuyên cung cấp, sửa chữa và bảo hành các thiết bị tin học trên cả nước Công việc mua bán và bảo hành các thiết bị tin học là công việc thường xuyên, được thực hiện một cách tốt nhất nhằm đem lại lợi nhuận tối đa cho công ty Trong đó, công việc bảo hành các thiết bị tin học là một phần hết sức quan trọng trong hệ thống Đó là yếu tố quan trọng quyết định đến sự uy tín của công ty, mang lại không ít lợi nhuận cho công ty nhưng cũng đồng thời là yếu tố đòi hỏi nguồn nhân lực và thời gian
Từ thực tế này, hệ thống phải cần có một ứng dụng thông minh và tiện lợi để thực hiện công việc bảo hành thiết bị tin học một cách tối ưa nhất, cả về mặt nhân lực, thời gian và địa điểm Giải pháp tốt nhất là xây dựng một ứng dụng di động thực hiện chức năng quản lý bảo hành thiết bị tin học.
Phân tích và thiết kế ứng dụng
Công việc bảo hành của công ty được thực hiện theo một quy trình đơn giản
Khi một thiết bị được bán ra, hệ thống sẽ lưu lại các thông tin về thiết bị, khách hàng, thời gian bảo hành và các lưa ý về vấn đề bảo hành như điều kiện bảo hành, ưu đãi… Khách hàng muốn bảo hành một thiết bị nào mà mình đã mua, có thể đem thiết bị đó đến trực tiếp công ty hoặc gọi điện yêu cầu bảo hành tận nơi Nhận được yêu cầu từ khách hàng, nhân viên phải kiểm tra thông tin của khách hàng, thông tin thiết bị Nếu đầy đủ điều kiện được bảo hành thì nhân viên tiến hành công việc bảo hành Sau khi hoàn thành công việc, nhân viên có nhiệm vụ lưu lại các thông tin về công việc bảo hành của mình như thiết bị bảo hành, khách hàng, lý do bảo hành…
Những thiết bị nào hết hạn bảo hành thì sẽ được xóa khỏi danh sách các thiết bị được bảo hành
Phần mềm bảo hành thiết bị tin học đảm bảo các yêu cầu sau:
Theo dõi các thiết bị đang bảo hành, thực hiện chức năng bảo hành khi có yêu cầu từ khách hàng
Quản lý thông tin thiết bị như hãng sản xuất, loại thiết bị, tên thiết bị, ngày bán, thời gian bảo hành…
Quản lý việc đổi trả hàng: hỗ trợ đổi trả hàng thông qua phiếu mua hàng
Quản lý thông tin chi tiết khách hàng như mã khách hàng, tên khách hàng, địa chỉ, điện thoại…
Quản lý thông tin chi tiết nhà cung cấp như mã nhà cung cấp, tên nhà cung cấp, điện thoại, địa chỉ…
Quản lý việc nhập thiết bị
Quản lý danh mục sửa chữa gồm mã công việc, tên công việc, phân loại thiết bị, đơn giá bảo hành…
Thống kê báo cáo danh sách khách hàng, thiết bị theo từng tháng Xây dựng nhật ký sửa chữa
3.2.3 Xác định tác nhân của hệ thống
Hệ thống gồm các tác nhân chính sau:
Người quản trị hệ thống: điều hành, quản lý và theo dõi mọi hoạt động của hệ thống như quản lý nhân viên, quản lý thiết bị, quản lý hoạt động bảo hành của công ty…
Nhân viên kinh doanh: là những người tiếp nhận và kiểm tra thiết bị để chuyển cho nhân viên kỹ thuật nếu thiết bị cần được bảo hành và bàn giao thiết bị cho khách hàng đúng thời gian đã hẹn
Nhân viên kỹ thuật: là những người sửa chữa thiết bị và nhập vào kho bảo hành khi sửa chữa xong
Nhân viên kho: là người quản lý kho, tiến hành nhập kho từ nhà cung cấp khi kho hết hàng Cấp thiết bị cho kỹ thuật viên và nhận linh kiện từ kỹ thuật viên Trả hàng cho nhà cung cấp khi hàng lỗi không sửa chữa được Thống kê số
22 lượng, tình trạng bảo hành của thiết bị và số lượng khách hàng, thiết bị trong kho hàng tháng
3.2.4 Các chức năng chính của hệ thống
Qui tắc Chức năng R1.1 Nhân viên kinh doanh tiếp nhận thiết bị
R1.2 Kiểm tra thiết bị còn thời gian bảo hành hay không hoặc tiếp nhận yêu cầu sửa chữa từ khách hàng R1.3 Ghi nhận kết quả kiểm tra
R1.4 Chuyển phiếu tiếp nhận và thiết bị cho bộ phận kỹ thuật
Bảng 3.1 Chức năng tiếp nhận thiết bị
Qui tắc Chức năng R2.1 Nhân viên kỹ thuật nhận thiết bị và kết quả kiểm tra R2.2 Tiến hành sửa chữa
R2.3 Kiểm tra lại thiết bị và trả cho khách hàng R2.4 Nhập kho sửa chữa
Bảng 3.2 Chức năng sửa chữa thiết bị
Qui tắc Chức năng R3.1 Quản lý thông tin thiết bị trong kho R3.2 Quản lý thông tin khách hàng R3.3 Quản lý thông tin nhà cung cấp R3.4 Quản lý thông tin phiếu bảo hành R3.5 Quản lý thông tin nhân viên
Bảng 3.3 Bảng chức năng quản lý
Qui tắc Chức năng R4.1 Thống kê số lượng thiết bị được bảo hành trong tháng R4.2 Thống kê số lượng thiết bị, số lượng khách hàng trong tháng
Bảng 3.4 Bảng chức năng thống kê
Tác nhân Ca sử dụng
Người quản trị hệ thống - Đăng nhập, đăng xuất
- Quản lý nhân viên Nhân viên kinh doanh - Đăng nhập, đăng xuất
- Quản lý nhà cung cấp
- Quản lý danh mục công việc sửa chữa
- Thanh toán (nếu có) tùy vào từng thiết bị Nhân viên kỹ thuật - Thực hiện các công việc tiếp nhận và sửa chữa Nhân viên kho - Nhập kho, xuất kho
- Thống kê tình trạng trong kho
Bảng 3.5 Bảng danh sách các UC
[01] UC_ Đăng nhập hệ thống
Tác nhân: Người quản trị, nhân viên
Mô tả: Sau khi người quản trị cung cấp cho mỗi nhân viên một tài khoản, thì nhân viên có thể truy cập vào hệ thống để quản lý thông tin dữ liệu
Luồng sự kiện chính: o Người dùng mở phần mềm o Form đăng nhập hiển thị
24 o Bắt buộc nhập tên, mật khẩu vào form đăng nhập để truy cập vào hệ thống o Hệ thống kiểm tra tên, mật khẩu của thành viên o Nếu việc đăng nhập thành công thì mở giao diện hệ thống quản lý Nếu người dùng nhập sai tên, mật khẩu thì yêu cầu nhập lại o UC kết thúc
Tác nhân: Người quản trị, nhân viên
Mô tả: Sau khi người dùng đã đăng nhập vào hệ thống, sau khi hoàn thành công việc, tiến hành đăng xuất khỏi hệ thống
Luồng sự kiện chính: o Người dùng chọn menu đăng xuất o Hiện thông báo bạn có chắc chắn muốn đăng xuất không o Nếu đồng ý thì trở về màn hình đăng nhập Ngược lại, trở về trang quản lý hệ thống
[03] UC_Quản lý tiếp nhận thiết bị
Tác nhân: Người quản trị, nhân viên, khách hàng
Mô tả: Khi có yêu cầu sửa chữa từ khách hàng, nhân viên sẽ tiếp nhận thiết bị và kiểm tra xem còn trong thời gian bảo hành hay không sau đó chuyển cho bộ phận kỹ thuật
Luồng sự kiện chính: o Người dùng đăng nhập vào hệ thống o Mở menu Công việc lên để tiến hành kiểm tra thông tin bảo hành bằng cách nhập mã bảo hành và kiểm tra hoặc tìm kiếm theo tên khách hàng, tên thiết bị o Bàn giao cho nhân viên kỹ thuật
[04] UC_Sửa chữa thiết bị
Tác nhân: Người quản lý, nhân viên, khách hàng
Mô tả: Nhân viên kỹ thuật nhận thiết bị từ nhân viên kinh doanh và tiến hành sửa chửa thiết bị và bàn giao cho khách hàng
Luồng sự kiện chính: o Người dùng đăng nhập vào hệ thống o Nhận kết quả kiểm tra thiết bị o Nhấn vào menu Công việc và thực hiện nhập dữ liệu vào kho
[05] UC_Quản lý phiếu bảo hành
Tác nhân: Người quản lý, nhân viên, khách hàng
Mô tả: Sau khi khách hàng mua thiết bị từ công ty, nếu thiết bị đó trong diện được bảo hành thì nhân viên có nhiệm vụ tạo mới phiếu bảo hành để lưu vào trong kho
Luồng sự kiện chính: o Người dùng đăng nhập vào hệ thống o Nhấn vào menu Quản lý phiếu bảo hành và thực hiện tạo mới phiếu bảo hành, cập nhật thông tin phiếu bảo hành
[06] UC_Quản lý nhân viên
Tác nhân: Người quản trị
Mô tả: Người quản trị có quyền quản lý thông tin nhân viên công ty, thêm, cập nhật nếu có thay đổi
Luồng sự kiện chính: o Người quản trị đăng nhập vào hệ thống o Nhấn vào menu quản lý nhân viên để xem và cập nhật thông tin o Nếu có nhân viên mới vào công ty, tiến hành thêm mới một nhân viên, bằng cách nhấn vào nút thêm mới Hiển thị form thêm với các thông tin nhân viên o Hoặc có nhân viên nghỉ thì xóa thông tin nhân viên đó Hiện hộp thông báo Nếu đồng ý thì xóa, ngược lại trở về trang quản lý nhân viên
[07] UC_Quản lý thiết bị
Tác nhân: Người quản trị, nhân viên
Mô tả: Người dùng quản lý thông tin chi tiết của thiết bị, thêm, cập nhật, xóa thông tin thiết bị
Chương trình demo phần mềm bảo hành thiết bị tin học
Hình 3.12 Giao diện đăng nhập hệ thống Để làm việc với ứng dụng, người dùng phải đăng nhập vào hệ thống thông qua giao diện đăng nhập như trên Người dùng nhập tài khoản và mật khẩu của mình vào hai ô textbox sau đó nhấn vào button Login để đăng nhập Nếu tài khoản và mật khẩu hợp lệ thì người dùng sẽ vào và làm việc được với ứng dụng, nếu không thì ứng dùng sẽ hiển thị thông báo lỗi, yêu cầu người dùng nhập lại
3.3.2 Giao diện trang chủ và menu chức năng
Hình 3.13 Giao diện trang chủ ứng dụng Ở trang chủ này người dùng có thể tùy chọn các chức năng chính của ứng dụng Các chức năng chính của ứng dụng được sắp xếp từ trên xuống, người dùng sẽ dùng ngón tay để chọn chức năng mà mình muốn thao tác
Ngoài ra, người dùng còn có thể đi đến các chức năng một cách nhanh hơn bằng hệ thống menu nhanh trên góc phải màn hình Khi chạm vào biểu tượng menu trên góc phải màn hình thì hệ thống menu nhanh sẽ hiển thị ra như bên dưới
Hình 3.14 Hệ thống menu nhanh của ứng dụng
3.3.3 Giao diện kiểm tra sản phẩm
Khi một khách hàng mang thiết bị đến công ty yêu cầu sữa chữa, nhân viên có nhiệm vụ kiểm tra thiết bị đó có còn trong thời gian bảo hành không
Nhân viên sẽ kiểm tra bằng cách nhập mã bảo hành của thiết bị, và thông tin bảo hành về thiết bị đó sẽ hiển thị ra như bên dưới
Hình 3.15 Giao diện kiểm tra thông tin bảo hành
Nếu thiết bị không còn trong thời gian bảo hành hoặc hết hạn bảo hành thì ứng dụng sẽ hiển thị thông báo cho nhân viên biết
3.3.4 Giao diện tạo phiếu bảo hành
Sau khi khách hàng mua thiết bị của công ty, nếu thiết bị đó nằm trong diện được bảo hành thì nhân viên có nhiệm vụ tạo phiếu bảo hành cho khách hàng và lưu lại trong hệ thống
Nhân viên sẽ nhập đầy đủ thông tin vào phiếu như mã khách hàng, số serial thiết bị, ngày lập phiếu Cuối cùng, nhân viên nhấn vào button lưu phiếu thì thông tin về phiếu bảo hành đó sẽ được lưu lại trong hệ thống
Giao diện chức năng đơn giản nên nhân viên sẽ dễ dàng tạo được phiếu bảo hành
3.16 Giao diện tạo phiếu bảo hành
3.3.4 Giao diện quản lý khách hàng Ở chức năng này, nhân viên có thể quản lý tất cả các thông tin từ khách hàng như tên, địa chỉ, số điện thoại, email, giới tính
Nhân viên sẽ thực hiện các thao tác quản lý như thêm, xóa, sửa một cách dễ dàng
Những giao diện quản lý khác như quản lý nhân viên, quản lý thiết bị, quản lý nhà cung cấp cũng có giao diện tương tự
3.3.5 Giao diện nhật ký sửa chữa
Nhân viên có thể kiểm tra thông tin về công việc sửa chữa của công ty theo từng tháng trong năm bằng chức năng này
Khi người nhân viên chọn tháng và năm muốn kiểm tra, hệ thống sẽ cung cấp thông tin chi tiết về việc sửa chữa trong tháng đó Các thông tin bao gồm số lần sửa chữa, trong đó có bao nhiêu lần bảo hành, tổng tiền thu được từ việc sửa chữa và cuối cùng là danh sách chi tiết các lần sửa chữa đó
Giao diện nhật ký sửa chữa tương đối đơn giản, dễ sử dụng nhưng cũng đầy đủ thông tin cần thiết cho một báo cáo
Hình 3.18 Giao diện nhật ký sửa chữa