CHƯƠNG 2 : PHÂN TÍCH VÀ THIẾT KẾ
2.2. Thiết kế
2.2.3. Đặc tả hệ thống
Các tác nhân: - Người sử dụng - Các trang web. Đặc tả hệ thống:
- Người dùng chọn các chương trình của hệ thống để thực hiện.
- Các chức năng như Học lý thuyết, Xem bài tập, Thi trắc nghiệm khi được chọn sẽ load file text, hình ảnh và các câu hỏi trắc nghiệm có sẵn trong hệ thống để hiển thị.
- Chức năng Xem video sẽ load video youtube, chức năng này cần có mạng để thực hiện. Ngồi ra, chúng ta cịn có thể đăng nhập facebook và gmail.
CHƯƠNG 3
CÀI ĐẶT VÀ THỬ NGHIỆM PHẦN MỀM
3.1. Cài đặt phầm mềm lên thiết bị Android
Sau khi hoàn tất việc xây dựng ứng dụng Android, ta cần tiến hành xuất bản ứng dụng ra một file .apk để có thể cài trên điện thoại. Truy cập đường dẫn https://www.youtube.com/watch?v=q2EqE9CsdTQ để xem hướng dẫn.
Trên điện thoại Android, nhấp vào biểu tượng Settings - Cài đặt trên màn hình thiết bị, sau đó nhấp chọn vào Bảo mật và tick vào ô Nguồn không xác định - Unknown Sources. Điều này có tác dụng giúp hệ thống bỏ qua và cho phép người dùng cài đặt các ứng dụng, file khơng phải từ nguồn chính thống (qua Play Store...).
Hình 3.1. Unknown Sources
Copy file .apk vừa xuất bản sang SD card. Sau đó tải và cài đặt phần mềm Astro File Manager lên điện thoại, mở nó lên và tìm tới thư mục bạn đã copy file apk ở trên, chỉ cần nhấp vào file đó để bắt đầu cài đặt. Máy sẽ hỏi bạn có muốn cài đặt ứng dụng này không? Chọn Hủy bỏ hoặc Cài đặt để xác nhận. Như vậy quá trình cài đặt file apk trên android khơng có CH Play đã thành cơng. Chi tiết xem tại: https://www.youtube.com/watch?v=FbjMCjiee0g
3.2. Danh sách các màn hình
Phần mềm hỗ trợ học lập trình Pascal (Learning Pascal) sử dụng các màn hình hiển thị dùng cho giao diện người dùng gồm có:
Bảng 3.1. Danh sách các màn hình
STT Tên màn hình Ý nghĩa, ghi chú
1 Màn hình chính Gồm các chức năng chính của chương trình
2 Màn hình lý thuyết Gồm 2 chức năng: Xem nội dung lý thuyết và xem ví dụ minh họa 3 Màn hình lựa chọn chương lý thuyết Gồm 3 chương tương ứng
3 chức năng 4 Màn hình lựa chọn nội dung lý
thuyết Danh mục các bài học lý thuyết 5 Màn hình hiển thị nội dung lý thuyết Nội dung các bài học lý thuyết 6 Màn hình hiển thị các cấu trúc lệnh Nội dung các cấu trúc lệnh 7 Màn hình hiển thị danh sách ví dụ Danh mục các ví dụ minh họa 8 Màn hình hiển thị các ví dụ Nội dung các ví dụ minh họa 9 Màn hình lựa chọn loại bài tập Hiển thị 2 loại bài tập mẫu
và bài tập tự giải 10 Màn hình danh sách bài tập Danh mục các bài tập 11 Màn hình nội dung bài tập Nội dung các bài tập 12 Màn hình câu hỏi quan trọng Các câu hỏi và câu trả lời 13 Màn hình thi trắc nghiệm Hiển thị các câu hỏi và đáp án 14 Màn hình điểm thi Điểm thi trắc nghiệm
của người chơi
15 Màn hình video Các chức năng: Video online, video offline, facebook 16 Màn hình WebView Hiển thị các video hoặc facebook 17 Màn hình Thơng tin ứng dụng Thông tin ứng dụng
3.3. Chi tiết các màn hình
Sau khi khảo sát, phân tích và thiết kế hệ thống, em tiến hành xây dựng phần mềm “Xây dựng phần mềm hỗ trợ học lập trình Pascal trên thiết bị di động”. Dưới đây là một số giao diện của phần mềm để mọi người dễ hình dung hơn. Cấu trúc của phần mềm được tính tốn tối ưu, giúp sử dụng thuận tiện, thao tác nhanh chóng. Giao diện đẹp giúp người sử dụng có cảm giác thoải mái.
• Màn hình chính
Gồm các tuỳ chọn cho người dùng để sử dụng các chức năng của chương trình. Màn hình này sẽ xuất hiện đầu tiên khi ta mở phần mềm lên. Giao diện của màn hình chính như sau:
Hình 3.2. Màn hình chính
Màn hình chính gồm có 6 chức năng: Lý thuyết, Bài tập, Trắc nghiệm, Xem video, Câu hỏi và Thơng tin.
Để thiết kế màn hình này, em sử dụng các views như mô tả dưới đây: Bảng 3.2. Mơ tả chi tiết màn hình chính
STT Tên Loại Ý nghĩa
1 btn_lythuyet ImageButton Chuyển đến màn hình lý thuyết 2 btn_baitap ImageButton Chuyển đến màn hình bài tập 3 btn_tracnghiem ImageButton Chuyển đến màn hình trắc
nghiệm
4 btn_video ImageButton Chuyển đến màn hình video 5 btn_thongtin ImageButton Chuyển đến màn hình thơng tin 6 tv_lythuyet TextView Hiển thị chữ Lý thuyết
7 tv_baitap TextView Hiển thị chữ Bài tập 8 tv_tracnghiem TextView Hiển thị chữ Trắc nghiệm 9 tv_video TextView Hiển thị chữ Xem video 10 tv_thongtin TextView Hiển thị chữ Thơng tin
• Màn hình lý thuyết
Khi ta bấm vào nút Lý thuyết ở màn hình chính thì màn hình lý thuyết hiển thị như hình sau:
Màn hình này gồm 1 TextView, 2 Button tương ứng với 2 chức năng xem nội dung lý thuyết và ví dụ minh họa.
Đây là mô tả về màn hình lý thuyết:
Bảng 3.3. Mơ tả chi tiết màn hình lý thuyết
STT Tên Loại Ý nghĩa
1 tv_Lythuyet TextView Hiển thị chữ LÝ THUYẾT
2 Btn_ndLythuyet ImageButton Chuyển sang trang nội dung lý thuyết
3 btn_Vdminhoa TextView Chuyển sang trang ví dụ minh họa
• Màn hình lựa chọn chương lý thuyết
Sau khi ta bấm vào Nội dung lý thuyết ở màn hình lý thuyết thì màn hình lựa chọn chương lý thuyết sẽ hiển thị lên, nó chia nội dung lý thuyết ra 3 chương để người dùng dễ tìm kiếm.
Hình 3.4. Màn hình chức năng chọn chương lý thuyết
Nội dung lý thuyết gồm 3 chương, mỗi chương em dùng một button để thực hiện chức năng chuyển trang.
Dưới đây là mơ tả cho màn hình trên:
Bảng 3.4. Mơ tả chi tiết màn hình chọn chương lý thuyết
STT Tên Loại Ý nghĩa
1 tbr_chuongLT Toolbar Hiển thị tiêu đề của trang 2 btn_chuong1 ImageButton Chuyển đến trang nội dung lý
thuyết chương 1
3 btn_chuong2 Image Button Chuyển đến trang nội dung lý thuyết chương 2
4 btn_chuong3 Image Button Chuyển đến trang nội dung lý thuyết chương 3
• Màn hình lựa chọn nội dung lý thuyết
Từ màn hình lựa chọn chương lý thuyết, ta lựa chọn chương học để đi tới màn hình lựa chọn nội dung lý thuyết. Màn hình này sẽ hiển thị danh sách bài học cho người dùng chọn.
Giao diện màn hình:
Màn hình này có một đối tượng chính là ListView, mỗi dịng trong danh sách tương ứng với một phần lý thuyết cụ thể. Ta có thể bấm vào một dịng bất kỳ để xem nội dung lý thuyết của nó.
Mô tả như sau:
Bảng 3.5. Mô tả chi tiết màn hình lựa chọn nội dung lý thuyết
STT Tên Loại Ý nghĩa
1 tv_tieude TextView Hiển thị tiêu đề
2 lv_Ndlythuyet ListView Chuyển đến trang hiển thị nội dung lý thuyết tương ứng
• Màn hình hiển thị nội dung lý thuyết
Khi ta bấm vào các dòng lý thuyết cụ thể trong ListView của màn hình lựa chọn nội dung lý thuyết, nó sẽ hiển thị lý thuyết ta muốn xem như hình dưới:
Hình 3.6. Màn hình hiển thị nội dung lý thuyết
Màn hình này có 1 TextView dùng để hiển thị nội dung của lý thuyết đã được chọn, ngồi ra nó cịn có thêm 2 nút chuyển trang để xem nội dung lý thuyết trước đó hoặc kế tiếp.
Mơ tả chi tiết màn hình:
Bảng 3.6. Mơ tả chi tiết màn hình hiển thị nội dung lý thuyết
STT Tên Loại Ý nghĩa
1 tv_tenbai TextView Hiển thị tiêu đề
2 tv_noidung TextView Hiển thị nội dung lý thuyết 3 btn_prev Button Hiển thị nội dung bài trước 4 btn_next Button Hiển thị nội dung bài sau
• Màn hình hiển thị các cấu trúc lệnh
Ở màn hình chọn chương lý thuyết, ta chọn chương 2, nó sẽ hiển thị ra một ListView gồm các nội dung lý thuyết cụ thể như đã giới thiệu bên trên. Khi đó ta bấm vào dịng ‘Các cấu trúc lệnh’, nó sẽ hiển thị cú pháp, lưu đồ hoạt động của lệnh và giải thích lưu đồ đó.
Hình 3.7. Màn hình hiển thị các cấu trúc lệnh
Để thiết kế màn hình này, em dùng 2 TextView (Cú pháp, Giải thích lưu đồ) với phầm text cố định sẵn, còn nội dung của cú pháp, nội dung giải thích và lưu đồ sẽ tùy vào câu lệnh ta chọn để hiển thị lên.
Mô tả như sau:
Bảng 3.7. Mơ tả chi tiết màn hình hiển thị các cấu trúc lệnh
STT Tên Loại Ý nghĩa
1 tv_tenlenh TextView Hiển thị tên lệnh 2 tv1 TextView Hiển thị chữ Cú pháp
3 tv2 TextView Hiển thị chữ Giải thích lưu đồ 4 tv_cuphap TextView Hiển thị cú pháp của lệnh 5 tv_giaithich TextView Giải thích lưu đồ
6 img_luudo ImageView Hiển thị lưu đồ cú pháp
• Màn hình hiển thị danh sách ví dụ
Ta bấm vào nút Ví dụ minh họa ở màn hình lý thuyết để chuyển sang trang hiển thị danh sách ví dụ.
Hình 3.8. Màn hình hiển thị danh sách ví dụ
Thiết kế màn hình này em cũng sử dụng đối tượng ListView giống như màn hình lựa chọn nội dung lý thuyết. Mơ tả chi tiết màn hình:
Bảng 3.8. Mơ tả chi tiết màn hình hiển thị danh sách ví dụ
STT Tên Loại Ý nghĩa
1 tv_TieuDe TextView Hiển thị dịng chữ Ví dụ minh họa
• Màn hình hiển thị nội dung ví dụ
Ta bấm vào ví dụ muốn xem ở màn hình hiển thị danh sách ví dụ để chuyển sang trang hiển thị nội dung ví dụ như hình dưới đây:
Hình 3.9. Màn hình hiển thị nội dung ví dụ
Màn hình này gồm nhiều TextView và ImageView khác nhau. Những TextView sẽ hiển thị loại ví dụ và đề bài, Cịn ImageView hiển thị hình ảnh màn hình DosBox. Mơ tả chi tiết màn hình như sau:
Bảng 3.9. Mơ tả chi tiết màn hình hiển thị nội dung ví dụ
STT Tên Loại Ý nghĩa
1 tv_tenvidu TextView Hiển thị tên ví dụ
2 tv_vd1 TextView Hiển thị chủ đề 1 và chữ Đề bài
3 tv_vd2 TextView Hiển thị chủ đề 2 và chữ Đề bài
4 de_bai1 TextView Hiển thị đề bài 1 5 de_bai2 TextView Hiển thị đề bài 2
6 tv_ct1 TextView Hiển thị chữ Chương trình 7 tv_ct2 TextView Hiển thị chữ Chương trình
8 tv_kq1 TextView Hiển thị chữ Kết quả 9 tv_kq2 TextView Hiển thị chữ Kết quả 10 tv_cy1 TextView Hiển thị chú ý của ví dụ 1 11 tv_cy2 TextView Hiển thị chú ý của ví dụ 2 12 img_ct1 ImageView Hiển thị ảnh chương trình
của ví dụ 1
13 img_ct2 ImageView Hiển thị ảnh chương trình của ví dụ 2
14 img_kq1 ImageView Hiển thị ảnh kết quả chạy chương trình ở ví dụ 1 15 img_kq2 ImageView Hiển thị ảnh kết quả chạy
chương trình ở ví dụ 2
• Màn hình lựa chọn loại bài tập
Ta bấm vào nút Bài tập ở màn hình chính để chuyển sang trang này. Em đưa ra 2 loại bài tập là bài tập có lời giải và bài tập tự giải, tuy nhiên bài tập tự giải vẫn có hướng dẫn cách làm.
Em dùng 1 ImageView để hiển thị hình ảnh trang trí, 2 Button tương ứng với 2 loại bài tập, khi bấm vào sẽ chuyển sang trang bài tập đó, chúng được mơ tả chi tiết trong bảng sau:
Bảng 3.10. Mô tả chi tiết màn hình lựa chọn loại bài tập
STT Tên Loại Ý nghĩa
1 tv_Tieude TextView Hiển thị dòng chữ BÀI TẬP 2 Image ImageView Hiển thị hình ảnh
3 btn_Btmau Button Chuyển đến trang bài tập có lời giải
4 btn_Bttugiai Button Chuyển đến trang bài tập khơng có lời giải
• Màn hình danh sách bài tập
Màn hình này hiển thị sau khi ta bấm vào button ở màn hình lựa chọn loại bài tập. Giao diện màn hình như sau:
Hình 3.11. Màn hình danh sách bài tập
Để thiết kế màn hình này em sử dụng đối tượng ListView, nó sẽ hiển thị danh sách bài tập, ta bấm vào các dịng của ListView để xem bài tập (có lời giải và khơng có lời giải).
Mơ tả chi tiết màn hình:
Bảng 3.11. Mơ tả chi tiết màn hình danh sách bài tập
STT Tên Loại Ý nghĩa
1 tv_BaiTap TextView Hiển thị dòng chữ BÀI TẬP 2 lv_baitap ListView Chuyển đến trang nội dung
bài tập
• Màn hình nội dung bài tập
Màn hình nội dung bài tập hiển thị sau khi ta chọn loại bài tập ở ListView trong màn hình danh sách bài tập bên trên. Giao diện như hình sau:
Hình 3.12. Màn hình nội dung bài tập
Màn hình này được thiết kế giống như màn hình hiển thị nội dung lý thuyết. Nó gồm 1 TextView hiển thị nội dung và 2 Button chuyển bài.
Mô tả chi tiết:
Bảng 3.12. Mô tả chi tiết màn hình nội dung bài tập
STT Tên Loại Ý nghĩa
1 tv_Tieude TextView Hiển thị dòng chữ BÀI TẬP 2 tv_loaiBT TextView Hiển thị loại bài tập
3 btn_tiep Button Chuyển đến loại bài tập sau 4 btn_quaylai Button Chuyển đến loại bài tập trước
• Màn hình câu hỏi
Màn hình câu hỏi xuất hiện sau khi ta bấm vào chức năng Câu hỏi ở màn hình chính. Dưới đây là giao diện của màn hình này:
Hình 3.13. Màn hình câu hỏi
Màn hình này có đối tượng Expandable ListView dùng để hiển thị các câu hỏi, các câu trả lời sẽ bị ẩn đi. Khi người dùng chọn câu hỏi thì câu trả lời được sổ ra ngay bên dưới.
Mô tả chi tiết:
Bảng 3.13. Mơ tả chi tiết màn hình câu hỏi
STT Tên Loại Ý nghĩa
1 tieude_ch TextView Hiển thị tiêu đề ‘Những câu hỏi quan trọng’
• Màn hình thi trắc nghiệm
Màm hình thi trắc nghiệm hiển thị sau khi nhấn nút Trắc nghiệm ở màn hình chính. Nó gồm các gói câu hỏi để người dùng lựa chọn.
Hình 3.14. Màn hình thi trắc nghiệm
Màn hình này gồm 1 Spinner để người dùng lựa chọn loại câu hỏi, nhấn Bắt đầu để thi. Mô tả chi tiết như sau:
Bảng 3.14. Mơ tả chi tiết màn hình thi trắc nghiệm
STT Tên Loại Ý nghĩa
1 tieude_tn TextView Hiển thị tiêu đề “Thi trắc
nghiệm” 2 loai_ch Spinner Hiển thị loại câu
hỏi
• Màn hình điểm thi
Sau khi nhấn nút bắt đầu ở màn hình thi trắc nghiệm, màn hình điểm thi sẽ hiển thị lên. Ở đây người dùng bắt đầu thi, nhấn nộp bài để biết điểm thi.
Hình 3.15. Màn hình điểm thi
Màn hình điểm thi hiển thị câu hỏi trắc nghiệm và các đáp án. Sau khi chọn đáp án thì nhấn Trả lời để sang câu tiếp. Thi xong ta nhấn Nộp bài, màn hình sẽ hiển thị điểm thi. Mơ tả chi tiết:
Bảng 3.15. Mô tả chi tiết màn hình điểm thi
STT Tên Loại Ý nghĩa
1 ten_loaiCH TextView Tên loại câu hỏi 2 Cauhoi TextView Nội dung câu hỏi
3 dapanA RadioButton Đáp án A
4 dapanB RadioButton Đáp án B
5 dapanC RadioButton Đáp án C
6 dapanD RadioButton Đáp án D
7 Traloi Button Trả lời
• Màn hình video
Màn hình này hiển thị khi ta nhấn vào nút Video ở màn hình chính. Giao diện màn hình video như hình dưới:
Hình 3.16. Màn hình video
Màn hình này gồm 3 chức năng chính, để sử dụng được thì thiết bị di động của bạn phải có kết nối mạng. Mơ tả chi tiết:
Bảng 3.16. Mô tả chi tiết màn hình video
STT Tên Loại Ý nghĩa
1 dc_web EditText Nhập địa chỉ web 2 Youtube Button Xem video online 3 Website Button Tới địa chỉ trang web
vừa nhập 4 Facebook Button Đăng nhập facebook
• Màn hình webview
Màn hình này sử dụng đối tượng WebView. Dưới đây là màn hình youtube hiển thị khi ta nhấn vào nút Xem video trực tuyến ở màn hình Video. 2 nút Tới trang web và Đăng nhập facebook cũng gọi đến màn hình này, chỉ khác giao diện.
Hình 3.17. Màn hình WebView Mơ tả chi tiết:
Bảng 3.17. Mơ tả chi tiết màn hình WebView
STT Tên Loại Ý nghĩa
1 Webview WebView Hiển thị trang web và video muốn xem
• Màn hình thơng tin ứng dụng
Màn hình thơng tin ứng dụng hiển thị sau khi nhấn vào nút Thơng tin ở màn hình chính. Giao diện màn hình như sau: