Đầu tiên, tôi xin chân thành cảm ơn thầy cô trong khoa Công Nghệ Thông Tin, trường Đại Học Bách Khoa Đà Nẵng đã truyền đạt nhưng kiến thức quý báu cho tôi trong những năm học vừa qua và nhất là đã tạo điều kiện thuận lợi cho tôi được học tập và thực hiện đề tài tốt nghiệp này. Đặc biệt, tôi xin gửi lời cảm ơn sâu sắc tới Cô: Ts. Lê Thị Mỹ Hạnh đã trực tiếp, tận tình giúp đỡ và hướng dẫn tôi trong suốt thời gian thực hiện đề tài. Và để có được kết quả như ngày hôm nay, tôi rất biết ơn gia đình Ông Bà, Cha Mẹ và những người thân trong gia đình đã động viên, khích lệ và tạo mọi điều kiện thuận lợi nhất về cả vật chất và tinh thần trong suốt quá trình học tập và thực hiện đề tài tốt nghiệp này. Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi nhưng sai sót. Tôi rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô. Một lần nữ xin chân thành cảm ơn Đà Nẵng, ngày 04 tháng 05 năm 2016 Sinh viên thực hiện Nguyễn Thành Sự LỜI CAM ĐOAN Tôi xin cam đoan: 1. Nội dung trong đồ án này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của cô Ts. Lê Thị Mỹ Hạnh. 2. Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố. 3. Nếu có những sao chép không hợp lệ, vi phạm, tôi xin chịu hoàn toàn trách nhiệm.
Trang 1KHOA CÔNG NGHỆ THÔNG TIN
Tel (84-511) 3736949, Fax (84-511) 3842771Website: itf.dut.udn.vn, E-mail: cntt@dut.udn.vn
ĐỒ ÁN TỐT NGHIỆP KỸ SƯ NGÀNH CÔNG NGHỆ THÔNG TIN
MÃ NGÀNH: D480201
ĐỀ TÀI :
XÂY DỰNG ỨNG DỤNG HỌC TỪ VỰNG TIẾNG ANH ĐA NỀN TẢNG
SỬ DỤNG IONIC VÀ CORDOVA FRAMEWORK
MÃ SINH VIÊN : 102110286
Đà Nẵng, 05/2016
Trang 2Đầu tiên, tôi xin chân thành cảm ơn thầy cô trong khoa Công Nghệ Thông Tin, trường Đại Học Bách Khoa Đà Nẵng đã truyền đạt nhưng kiến thức quý báu cho tôi trong những năm học vừa qua và nhất là đã tạo điều kiện thuận lợi cho tôi được học tập và thực hiện đề tài tốt nghiệp này.
Đặc biệt, tôi xin gửi lời cảm ơn sâu sắc tới Cô: Ts Lê Thị Mỹ Hạnh
đã trực tiếp, tận tình giúp đỡ và hướng dẫn tôi trong suốt thời gian thực hiện đề tài.
Và để có được kết quả như ngày hôm nay, tôi rất biết ơn gia đình Ông Bà, Cha Mẹ và những người thân trong gia đình đã động viên, khích
lệ và tạo mọi điều kiện thuận lợi nhất về cả vật chất và tinh thần trong suốt quá trình học tập và thực hiện đề tài tốt nghiệp này.
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi nhưng sai sót Tôi rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô.
Một lần nữ xin chân thành cảm ơn!
Đà Nẵng, ngày 04 tháng 05 năm 2016
Sinh viên thực hiện
Nguyễn Thành Sự
Trang 3Tôi xin cam đoan:
1 Nội dung trong đồ án này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của cô Ts Lê Thị Mỹ Hạnh.
2 Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố.
3 Nếu có những sao chép không hợp lệ, vi phạm, tôi xin chịu hoàn toàn trách nhiệm.
Sinh viên thực hiện
Nguyễn Thành Sự
Trang 4
Trang 5
Trang 6
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 14
1.1 GIỚI THIỆU VỀ LẬP TRÌNH ĐA NỀN TẢNG 14
1.1.1 Giới thiệu 14
1.1.2 Lập trình đa nền tảng 15
1.2 GIỚI THIỆU VỀ ANGULARJS 18
1.2.1 AngularJS là gì? 18
1.2.2 Các tính năng chung 19
1.2.3 Các tính năng cốt lõi 19
1.2.4 Các thành phần chính 20
1.2.5 Ưu điểm 20
1.2.6 Nhược điểm 21
1.3 TÌM HIỂU VỀ IONIC FRAMEWORK 21
1.3.1 Giới thiệu Ionic framework 21
1.3.2 Tính năng 22
1.3.3 Ưu điểm 23
1.3.4 Nhược điểm 23
1.4 TÌM HIỂU VỀ CORDOVA FRAMEWORK 24
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 27
2.1 ĐẶC TẢ YÊU CẦU 27
2.1.1 Mô tả dự án 27
2.1.2 Nghiên cứu khả thi 27
2.1.3 Đặc tả chức năng 27
2.2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 29
2.2.1 Tác nhân sử dụng hệ thống 29
2.2.2 Biểu đồ ca sử dụng 29
2.2.3 Biểu đồ hoạt động 33
2.2.4 Biểu đồ lớp 36
2.3 THIẾT KẾ DỮ LIỆU 37
2.3.1 Bảng âm lẻ 37
2.3.2 Bảng từ vựng 38
2.3.3 Bảng chủ đề 38
2.3.4 Bảng chủ đề con 38
2.3.5 Bảng chủ đề của từ 39
2.3.6 Bảng từ loại 39
2.3.7 Bảng từ loại của từ vựng 40
2.3.8 Bảng từ vựng hằng ngày 40
2.3.9 Bảng lịch sử kiểm tra 41
2.3.10 Bảng thông tin cá nhân 41
2.3.11 Bảng cấp độ 41
CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM VÀ ĐÁNH GIÁ KẾT QUẢ 42
Trang 73.1.2 Tiến hành cài đặt môi trường 42
3.2 KẾT QUẢ THỰC HIỆN CÁC CHỨC NĂNG 44
3.2.1 Giao diện chính – giao diện chức năng Học tập 44
3.2.2 Giao diện chức năng học âm lẻ 45
3.2.3 Giao diện chức năng học từ vựng 48
3.2.4 Giao diện thẻ card 51
3.2.5 Chức năng tra từ điển 53
3.2.6 Chức năng quản lý thông tin cá nhân 54
3.3 NHẬN XÉT VÀ ĐÁNH GIÁ KẾT QUẢ 55
Trang 8Hình 1.1 Đa nền tảng 14
Hình 1.2 Lập trình đa nền tảng với Xamarin 16
Hình 1.3 So sánh Hybird Application và Native 17
Hình 1.4 Các tính năng của AngularJS 19
Hình 1.4 Ionic framework 22
Hình 1.5 Cách hoạt động của Cordova 25
Hình 3.1 Mẫu dự án Ionic 43
Hình 3.2 Giao diện chính – Chức năng học tập 44
Hình 3.3 Giao diện chức năng học âm lẻ 45
Hình 3.4 Giao diện chức năng học nguyên âm 46
Hình 3.5 Giao diện chức năng học phụ âm 47
Hình 3.6 Giao diện chức năng học từ vựng 48
Hình 3.7 Giao diện chức năng học từ vựng hằng ngày 49
Hình 3.8 Giao diện chức năng chủ đề 50
Hình 3.9 Giao diện mặt trước của flashcard 51
Hình 3.10 Giao diện mặt sau của flashcard 52
Hình 3.11 Giao diện chức năng tra từ điển 53
Hình 3.12 Giao diện chức năng quản lý thông tin cá nhân 54
Trang 9Hình 2.1 Biểu đồ ca sử dụng tổng quát 29
Hình 2.2 Biểu đồ ca sử dụng mức 0 30
Hình 2.3 Ca sử dụng mức 1 – chức năng học tập 30
Hình 2.4 Ca sử dụng mức 1 – chức năng tra từ điển 31
Hình 2.5 Ca sử dụng mức 1 – chức năng quản lý thông tin cá nhân 31
Hình 2.6 Ca sử dụng mức 2 – học âm lẻ 31
Hình 2.7 Ca sử dụng mức 2 – học từ vựng 32
Hình 2.8 Biểu đồ hoạt động tổng quát 33
Hình 2.9 Biểu đồ hoạt động – chức năng học tập 34
Hình 2.10 Biểu đồ hoạt động – chức tăng tra từ điển 35
Hình 2.11 Biểu đồ hoạt động – chức năng quản lý thông tin cá nhân 35
Hình 2.12 Biểu đồ lớp 36
Hình 2.13 Biểu đồ thiết kế dữ liệu 37
Trang 10Bảng 1 Bảng âm lẻ 37
Bảng 2 Bảng từ vựng 38
Bảng 3 Bảng chủ đề 38
Bảng 4 Bảng chủ đề con 38
Bảng 5 Bảng chủ đề của từ 39
Bảng 6 Bảng từ loại 39
Bảng 7 Bảng từ loại của từ vựng 40
Bảng 8 Bảng từ vựng hằng ngày 40
Bảng 9 Bảng lịch sử kiểm tra 41
Bảng 10 Bảng thông tin cá nhân 41
Bảng 11 Bảng cấp độ 41
Trang 11Từ viết tắt Diễn giải
HTML HyperText Markup Language
CSS Cascading Style Sheets
API Application Programming Interface
Trang 121 Tổng quan về đề tài
Tiếng Anh đã là ngôn ngữ được sử dụng rộng rãi và phổ biến trên toàn thếgiới Gần như các quốc gia, lãnh thổ khác nhau trên thế giới đều phải sử dụng tiếngAnh để có thể giao tiếp được với nhau Do đó, ở Việt Nam cũng không ngoại lệ,tiếng Anh ngày càng quan trọng với mỗi người Việt chúng ta, không gì dễ dàng hơncho việc hội nhập, giao lưu, học tập với các nước, các nền văn hóa khác bằng việcđầu tiên chúng ta phải biết, phải thuần thục tiếng Anh
Muốn có thể học tốt tiếng Anh, đầu tiên phải có vốn từ vựng dồi dào Mặckhác phải có kho từ vựng dễ học, dễ thuộc, dễ nhớ, và tạo điều kiện thuận lợi vànhanh nhất có thể cho mọi người có thể học được từ vựng tiếng Anh
Do đó, cần thiết phải có một ứng dụng để giúp mọi người việc này Với thờiđại công nghệ thông tin hiện nay, điện thoại thông minh hay được gọi là SmartPhone đã phổ biến, sẽ dễ dàng nhất nếu ứng dụng học từ vựng Tiếng anh này đượcphát triển trên một thiết bị mà ai cũng có thể sử dụng Như vậy sẽ đem lại hiệu quảcao nhất
2 Mục đích và ý nghĩa của đề tài
Trang 132.2 Ý nghĩa
Giúp đỡ những người học từ vựng tiếng Anh một cách dễ dàng và hiệu quảnhất có thể
Tổng hợp và lưu trữ từ vựng giúp mọi người có thể tìm kiếm dễ dàng
Chỉ xây dựng và phát triển một lần, sau đó triển khai ra nhiều nền tảng di độngnhằm tiết kiệm thời gian và tiền bạc
Học hỏi, tích lũy kinh nghiệm về mảng lập trình đa nền tảng Nắm bắt cơ hộiphát triển bản thân trong tương lai
3 Phương pháp thực hiện
Phân tích thu thấp yêu cầu người dùng
Tìm hiểu học hỏi từ các ứng dụng tương tự
4 Bố cục của đồ án
Đồ án bao gồm các nội dung sau:
Mở đầu
Chương 1: Cơ sở lý thuyết
Chương 2: Phân tích và thiết kế
Trang 14 Môi trường triển khai
Kết luận và hướng phát triển
Trang 15CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Chương này giới thiệu về lập trình đang nền tảng, giới thiệu tổng quan về AngularJS, và hai framework để phát triển ứng dụng Hybrid là Ionic và Cordova.
1.1 GIỚI THIỆU VỀ LẬP TRÌNH ĐA NỀN TẢNG
1.1.1 Giới thiệu
Đa nền tảng (tiếng Anh: cross-platform hay multi-platform) là một thuật ngữ
chỉ các phần mềm máy tính, các ứng dụng điện thoại hay các phương thức điện toánđược thực thi đẩy đủ và vận hành cùng nhau trên nhiều nền tảng máy tính và điệnthoại và được gắn liền với công nghệ điện toán
Hình 1.1 Đa nền tảng
Phần mềm đa nền tảng có thể được chia thành hai loại:
nó hỗ trợ
bị thêm đặc biệt nào – chẳng hạn như phần mềm được viết bằng một ngôn
ngữ thông dịch hay được biên dịch trước sang mã bytecode có khả năng
Trang 16di động bằng một trình thông dịch hay gói run-time thường dùng hoặc
thành phần tiêu chuẩn trên mọi nền tảng
Lấy ví dụ: một ứng dụng máy tính đa nền tảng có thể chạy ngay trên cả
Microsoft Window với kiến trúc x86 hay Linux với kiến trúc x86 và Mac OS X với
cả kiến trúc PowerPC hay x86 trên các hệ thống Macintosh.
1.1.2 Lập trình đa nền tảng
1) Giới thiệu sơ lượt về lập trình đa nền tảng
Là khái niệm dùng để chỉ việc xây dựng và phát triển các ứng dụng có thểchạy đa nền tảng Nhằm mục đích để người dùng ở những nền tảng khác nhau cóthể sử dụng ứng dụng như nhau và nhà phát triển sẽ tiết kiệm thời gian cũng nhưtiền bạc để đầu tư vào việc phát triển chúng
Hiện nay, có rất nhiều nền tảng có thể kể đến như:
Symbian OS,…
Với việc thiết bị cầm tay đang ngày càng phổ biến đặc biệt là điện thoại diđộng, vì nó có thể sử dụng ở bất kỳ đâu, bất kỳ lúc nào và dễ dàng thuận tiện choviệc mang theo Do đó, sẽ có rất rất nhiều người sử dụng và liên tục phát triển Cácnhà phát triển nền tảng cũng như ứng dụng đang tập trung khai thác vào mảng này
2) Đa nền tảng trên thiết bị di động
Từ trước tới nay mỗi nền tảng cho thiết bị di động đều có các ngôn ngữ lậptrình cũng như trình biên dịch riêng hay được gọi với cái tên Native App như:
Android-Platform: sử dụng công cụ Android Studio hoặc Eclipse, ngôn
ngữ Java.
iOS-Platform: sử dụng công cụ Xcode, ngôn ngữ Objective-C hoặc Swift.
Window Phone: sử dụng công cụ Visual Studio, ngôn ngữ C# và mã
XAML.
Trang 17Với mỗi nền tảng trên chúng đều có công cụ và ngôn ngữ lập trình gốc(Native) mà chúng chỉ phục vụ cho việc biên soạn, phát triển, biên dịch và triểnkhai ứng dụng cho chính nó.
Nhận thấy, việc phát triển một ứng dụng dành cho tất các nền tảng được nêu
ra ở trên thì chúng ta phải học ít nhất là ba loại ngôn ngữ khác nhau, sử dụng cũng
ít nhất là ba loại công cụ khác nhau
Vậy, lập trình đa nền tảng đặc biệt cho các thiết bị di động ra đời Để với mộtloại công cụ, một ngôn ngữ vẫn có thể làm mọi thứ với chỉ một lần biên soạn sẽbiên dịch và triển khai được cả nhiều nền tảng khác nhau
Hiện nay, có rất nhiều loại công nghệ hỗ trợ việc lập trình đa nền tảng như :Xamarin, Titaninum, NativeScript, Rem Object, Ionic,… Đặc biệt Xamarin vàTitaninum được sử dụng khá phổ biến
Trong đó, Xamarin gần như khác biệt với những cái còn lại, thay vì sử dụng
mã HTML, CSS và JS, nó sử dụng C# và mã XAML để phát triển
Hình 1.2 Lập trình đa nền tảng với Xamarin
Ngoài ra, các công nghệ phát triển ứng dụng đa nền tảng được chia làm hai
loại chính là Mobile Web Application và Hybrid Application.
Trang 183) Phân biệt Mobile Web Application và Hybrid Application
Mobile Web Application hay Responsive Web là ứng dụng được lập trình ra
sẽ chạy trên nền tảng web, đượ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 Điểm mạnh của nó là có thể tạo app rấtnhanh, phù hợp với những ứng dụng có tính marketing cao, không phụ thuộc hệđiều hành, rất tiết kiệm chi phí (không phải thuê nhân lực cho lập trình từng nềntảng) Tuy nó nó chỉ chạy trên nền tảng web nhưng nó vẫn giải quyết được vẫn đanền tảng vì mọi nền tảng di động đều sử dụng ứng dụng web được 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, với phần cứng của máy,hiệu năng thấp và cho trải nghiệm người dùng không cao và đặc biệt chỉ hoạt độngkhi có internet Do vậy nó không phù hợp với ứng dụng có tính phức tạp cao, yêucầu nghiệp vụ và trải nghiệm người dùng lớn
Hình 1.3 So sánh Hybird Application và Native
Hybrid Application: hay nó là một đứa con lai của Native app với Mobile
Web Application Bản chất nó sử dụng giao diện được viết bằng mã HTML, CSS,
JS nhưng lại 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, blutooth, camera, sensor,…) Vì vậy, Hybrid Application vừa tận dụngđiểm mạnh của Mobile Web Application vừa khai thác hết khả năng thao tác trên hệ
Trang 19thống của Native App Trong tương lai Hybrid hứa hẹn sẽ là sự thay thế hoàn hảocho các ứng dụng mobile hiện nay
Đại diện cho công nghệ Hybrid có thể kể đến PhoneGap, Ionic, Trigger.IO,…
1.2 GIỚI THIỆU VỀ ANGULARJS
1.2.1 AngularJS là gì?
Đầu tiên, AngularJS là một framework có cấu trúc cho các web động, mãnguồn mở phát triển dựa trên Javascript Được phát triển lần đầu năm 2009 bởiMisko Hevery và Adam Abrons, hiện tại được duy trì và phát triển bởi Google.Tính đến tháng 5/2016, AngularJS đã có phiên bản thứ 2, tuy bản release vẫn chưađược hoàn thành, song thứ vẫn hoạt động tốt với AngularJS phiên bản 1.5.5
Căn bản AngularJS cho phép chúng ta sử dụng HTML như là ngôn ngữ mẫucho phép mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng mộtcách rõ ràng và súc tích, thường được sử dụng để xây dựng project Single PageApplication (SPA – là một trang web hay một ứng dụng web, mà tất cả những thaotác xử lý của trang web đều diễn ra trên một trang duy nhất)
Hình 1.4 Các tính năng của AngularJS
Trang 201.2.2 Các tính năng chung
tạo các ứng dụng RICH Internet Application (RIA)
dụng client-side trong mô hình MVC (Model View Controller) một cách
rõ ràng
trình duyệt web AngularJS tự động xử lý mã JavaScript để phù hợp vớimỗi trình duyệt
ngàn lập trình viên trên thế giới Nó hoạt động dưới giấy phép ApacheLicense version 2.0
Nhìn chung, AngularJS là một framework để tạo các ứng dụng lớn, các hiệunăng cao trong khi giữ cho chúng có thể dễ dàng duy trì
1.2.3 Các tính năng cốt lõi
Data-binding:Nó tự động đồng bộ hóa dữ liệu giữa thành phần modelvà
view.
Scope:Là những đối tượng hướng đếnmodel, nó hoạt động như là cầu nối
Controller:Đây là những tính năng của AngularJS mà được giới hạn tớimộtscope cụ thể.
Service:AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví
dụ$httpđể tạoXMLHttpRequests Nó là cácsingleton objectmà đượckhởi tạo duy nhất một lần trong ứng dụng
Filter:Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng vàtrả về các mảng mới
Directive: là cácmarkertrong các phần tử DOM (như các phần tử, thuộctính, CSS và nhiều hơn thế) Nó có thể dùng để tạo các thẻ HTML riêngphục vụ những mục đích riêng AngularJS có những directive có sẵn nhưngBind, ngModel…
Trang 21 Template: Là cácrendered viewvới các thông tin từcontrollervàmodel.
Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc
nhiều view với một trang sử dụng "partials".
Routing:Là khái niệm của sự chuyển dịch qua lại cácview.
Model View Whatever:MVC là một mô hình thiết kế để phân chia cácứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller),một phần sử dụng với một nhiệm vụ nhất định AngularJS không triển
Model-View-ViewModel Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này
làModel View Whatever.
Deep Linking:Cho phép mã hóa trạng thái các ứng dụng trên địa chỉ
từ các địa chỉ URL với cùng một trạng thái
Dependency Injection:AngularJS có sẵn một hệ thống condependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ
hiểu và kiểm tra
1.2.4 Các thành phần chính
AngularJS framework có thể được chia thành ba phần chính sau:
ng-app:directivenày định nghĩa và liên kết một ứng dụng AngularJS tớiHTML
ng-model:directivenày gắn kết giá trị của dữ liệu ứng dụng AngularJSđến các điều khiển đầu vào HTML
ng-bind:directivenày gắn kết dữ liệu ứng dụng AngularJS đến các thẻHTML
1.2.5 Ưu điểm
rất rõ ràng và dễ dàng để duy trì
dùng cảm giác linh hoạt, thân thiện
Trang 22 AngularJS sử dụngdependency injection.
hơn
khicontroller được viết bởi JavaScript với quá trình xử lý nghiệp vụ.
Và trên tất cả, ứng dụng AngularJS có thể chạy trên hết các trình duyệt web,trên các nền tảng Android và iOS
được trang cơ bản, không thấy gì thêm
1.3 TÌM HIỂU VỀ IONIC FRAMEWORK
1.3.1 Giới thiệu Ionic framework
Ionic là một Hybrid 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 HTML (sự kết hợp giữa Angular vàCordova), được tạo bởi Max Lynch, Ben Sperry, và Adam Bradley vào năm 2013.Đây là một framework rất mạnh để viết các ứng dụng hybrid
Trang 23Hình 1.4 Ionic framework
Có thể coi Ionic như là một bộ khung front-end giúp kiểm soát hình ảnh vàtrải nghiệm trên ứng dụng Giống như “Bootstrap for Native”, nhưng với sự hỗ trợcủa một lượng lớn các thành phần di động, hiệu ứng chuyển động mượt mà và thiết
Ionic cung cấp một tập các Angular directives (nghĩa là các phần tử HTMLtùy biến) để làm các thành phần của nó, tạo ra sự dễ dàng để sử dụng các tiện íchgọn để viết mã HTML Ngoài các directives, Ionic còn sử dụng và thêm vào các
Trang 24thành phần khác như: Angular touch recognizers, view animation logic, HTMLsanitation, và asynchronous communication.
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ờivẫ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ànhphần trong Ionic như danh sách, slide, chính là các directive (các thuộc tính củathẻ 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
Mặc dù, Ionic có thành phần giao diện sử dụng Angular, nhưng developersvẫn có thể sử dụng và hỗ trợ các framework khác như Knockout hay EmberJS
với Javasript hay thư viện Jquery
framework cho ứng dụng hybrid khác
Pull-to-Refresh, Infinite-loader, tabs,
1.3.4 Nhược điểm
Trang 251.4 TÌM HIỂU VỀ CORDOVA FRAMEWORK
Apache Cordova là một bộ khung để xây dựng ứng dụng di động sử dụngHTML, CSS và Javascript Apache Cordova bao gồm một tập hợp các API thiết bịcho phép người lập trình di động truy cập, sử dụng các chức năng native của thiết bịnhư là camera hay cảm biến gia tốc bằng Javascript Kết hợp với một bộ khung pháttriển giao diện như jQuery Mobile or Dojo Mobile hoặc Ionic, cho phép ứng dụng
di động có thể được phát triển chỉ dựa trên HTML, CSS và Javascript
Khi sử dụng Cordova API, một ứng dụng có thể được xây dựng mà khôngphả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 không cần thông quamộ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ảngnà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
Trang 26Hình 1.5 Cách hoạt động của Cordova
Kể từ phiên bản 3.0, có thể chọn một trong hai quy trình để phát triển một ứngdụng di động
trên càng nhiều nền tảng càng tốt, mà ít cần quan tâm đến đặc trưng củanền tảng Trung tâm của quy trình này là CLI (Command-Line Interface),được giới thiệu từ phiên bản Cordova 3.0 CLI là một công cụ ở mức caocho phép xây dựng dự án trên nhiều nền tảng một lần duy nhất, trừu tượnghóa đi nhiều chức năng ở mức thấp CLI cũng cung cấp một giao diệnchung để sử dụng các plug-in vào ứng dụng
ứng dụng trên một nền tảng cụ thể và muốn can thiệp sâu vào mức thấp ví
dụ như khi muốn kết hợp một thành phần native đã được tùy biến vào mộtthành phần web của Cordova Quy trình này phụ thuộc vào một tập cácđoạn mã ở mức thấp được thiết kế riêng cho mỗi nền tảng được hỗ trợ Vì
Trang 27vậy khi sử dụng cách phát triển này sẽ có thể gặp nhiều khó khăn hơn bởi
vì sự thiếu hụt của những công cụ ở mức cao nhưng sẽ có được sự tự dohơn trong việc phát triển ứng dụng
Trang 28CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Chương này trình bày việc đặc tả yêu cầu, các bước phân tích và thiết kế hệ thống cũng như thiết kế dữ liệu của ứng dụng.
2.1 ĐẶC TẢ YÊU CẦU VÀ CHỨC NĂNG
2.1.1 Mô tả dự án
Loại người dùng:
Mục đích:
mọi nơi
2.1.2 Nghiên cứu khả thi
Vẫn chưa thực sự có ứng dụng nào giúp người dùng có thể học tốt từ vựngtiếng Anh trên thực tế
Điện thoại thông mình ngày càng phổ biến với mọi người, việc phát triển trênnền tảng di động sẽ mạng lại hiệu quả cao
Việc học tiếng Anh là vô cũng cần thiết
2.1.3 Đặc tả chức năng
Với bài toán đặt ra, ứng dụng được phân ra làm 3 chức năng chính:
Trang 291) Chức năng Học tập
Đây là chức năng cho phép người dùng có thể học từ vựng theo các chủ đềhoặc ngẫu nhiên 5 từ mà hệ thống gợi ý mỗi ngày, hoặc có thể học các âm lẻ Cuốicùng tham gia các bài kiểm tra
Với yêu cầu như thế sẽ có ba chức năng đó là:
Chức năng học từ vựng: bao gồm hai chức năng nhỏ hơn là học theo chủ
đề và học theo một số từ ngẫu nhiên được hệ thống chọn ra mỗi ngày, sốlượng từ sẽ do người dùng quyết định Ở mỗi chức năng nhỏ này, ngườidùng đều có thể xem trước các từ được hiển thị dưới dạng là một thẻ card(Flashcard) Sau khi xem xong, sẽ có bài để ôn tập việc học từ cho ngườidùng ở mỗi chức năng
Chức năng học âm lẻ: là chức năng cho phép người dùng có thể học âm
lẻ thông qua thẻ card
Chức năng kiểm tra : là chức năng giúp người dùng kiểm tra lại những
từ đã thuộc ở việc học qua chủ đề hoặc theo ngày
2) Chức năng Tra từ điển
Là chức năng cho phép người dùng tra từ tiếng Anh và hiển thị dưới dạng thẻcard Giống như lúc người dùng học từ
3) Chức năng Quản lý thông tin cá nhân
Là chức năng cho phép người dùng cập nhật Họ tên, Ảnh đại diện và cài đặt
số lượng từ vựng sẽ học mỗi ngày Bên cạnh đó có thể biết thêm các thông tin như
số lượng từ đã học, cấp độ cũng như điểm kinh nghiệm hiện tại
Trang 302.2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2.2.1 Tác nhân sử dụng hệ thống
Hệ thống có một tác nhân duy nhất là : Người dùng
Tác nhân Người dùng sẽ sử dụng được tất cả các chức năng của hệ thống
2.2.2 Biểu đồ ca sử dụng
1) Biểu đồ tổng quát
Hình 2.1 Biểu đồ ca sử dụng tổng quát