(Đồ án tốt nghiệp) xây dựng ứng dụng học tiếng anh online

Chi tiết về hệ thống như sau o Chức năng quản lý học viên: - Quản lý danh sách học viên: ▪ Thông tin danh sách học viên ▪ Các khóa học mà từng học viên đăng ký o Chức năng quản lý trường

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC

SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG ỨNG DỤNG HỌC TIẾNG

ANH ONLINE

GVHD: ThS NGUYỄN MINH ĐẠO

SVTH: HỒ NGỌC TRIẾT MSSV: 16110493

SKL007169

Tp Hồ Chí Minh, năm 2020

ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ

XÂY DỰNG ỨNG DỤNG HỌC TIẾNG ANH ONLINE

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN ThS.

NGUYỄN MINH ĐẠO

KHÓA 2016 – 2020

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN

XÂY DỰNG ỨNG DỤNG HỌC TIẾNG ANH ONLINE

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN ThS.

NGUYỄN MINH ĐẠO

KHÓA 2016 – 2020

ĐH SƯ PHẠM KỸ THUẬT TP HCM

KHOA CNTT

*******

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Hồ Ngọc Triết MSSV 1: 16110493

Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng học tiếng anh

online

Họ và tên Giáo viên hướng dẫn: ThS Nguyễn

Minh Đạo NHẬN XÉT

1. Về nội dung đề tài & khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay không?

5. Đánh giá loại:

6. Điểm:

T p.

H ồ C hí M in h, n g ày th á n g

nă m 20 20

Gi áo vi ên hư ớn g dẫ n (K ý

& ghi

rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT TP HCM

KHOA CNTT

*******

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Hồ Ngọc Triết MSSV 1: 16110493

Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng học tiếng anh

online

Họ và tên Giáo viên phản biện:

NHẬN XÉT

1. Về nội dung đề tài & khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay không?

5. Đánh giá loại:

6. Điểm:

T p.

H ồ C hí M in h, n g ày th á n g

nă m 20 20

Gi áo vi ên ph ản bi ện (K ý

&

gh

i rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này.

Bên cạnh đó nhóm chúng em xin gửi đến thầy Nguyễn Trần Thi Văn lời cảm ơn sâu sắc nhất Trải qua một quá trình dài học tập và thực hiện đề tài trong thời gian qua Thầy đã tận tâm chỉ bảo nhiệt tình nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này.

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nhiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và những chuyến đi thực tế thu thập ý kiến người dùng Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Nguyễn Trần Thi Văn đã tặng cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc chúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộc sống mới.

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Chúng em hi vọng nhận được sự góp ý tận tình của quý thầy(cô) qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt đẹp nhất.

Chúng em xin chân thành cảm ơn!

Nhóm thực hiện

Hồ Ngọc Triết – 16110493

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

Khoa Công nghệ Thông tin

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ và tên Sinh viên 1: Hồ Ngọc Triết MSSV 1: 16110423

Thời gian làm khóa luận: Từ 30/03/2020 đến 30/08/2020 (15 tuần)

Chuyên ngành: Công nghệ phần mềm

Tên tiểu luận: Xây dựng ứng dụng học tiếng anh online

Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo

Nhiệm vụ của khóa luận:

1 Lý thuyết:

Công nghệ: net core, Angular, Docker, RabbitMQ, My SQL

Kiến trúc: Microservice, Domain driven design

2. Thực hành:

 Sử dụng net core xây dựng back end

 Sử dụng Angular xây dựng front end

 Sự dụng docker để chạy RabbitMQ

 Sử dụng My SQL làm hệ quản trị cơ sở dữ liệu

 Triển khiển khai microservice và Domain driven design

 Sử dụng RabbitMQ để giao tiếp giữa các microservice

Đề cương viết tiểu luận

PHẦN MỞ ĐẦU 1

PHẦN NỘI DUNG 3

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 3

1 Asp net Core 3

2 Angular 10 4

3. Docker………4

4 My SQL 5

5 Microservice 5

6 Domain driven design 5

7 Rabibt MQ 6

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 7

1 KHẢO SÁT HIỆN TRẠNG 7

2 XÁC ĐỊNH YÊU CẦU 8

3 MÔ HÌNH HÓA YÊU CẦU 9

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 20

1 THIẾT KẾ HỆ THỐNG 20

2 THIẾT KẾ CƠ SỞ DỮ LIỆU 20

3 THIẾT KẾ GIAO DIỆN 32

CHƯƠNG 4 PHÁT HÀNH THỬ NGHIỆM ỨNG DỤNG 60

1 TRIỂN KHAI BACK END 60

2 TRIỂN KHAI FRONT END 60

PHẦN KẾT LUẬN 61

1 Những kết quả đạt được 61

2 Ưu điểm đề tài 61

3 Hạn chế đề tài 61

4 Hướng phát triển 62

TÀI LIỆU THAM KHẢO 63

KẾ HOẠCH THỰC HIỆN

Tuần

Sản phẩm

30/03 –1+2

Giáo viên hướng dẫn(Ký và ghi rõ họ tên)

MỤC LỤC

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 3

1 Asp net Core 3

2 Angular 10 4

3. Docker………4

4 My SQL 5

5 Microservice 5

6 Domain driven design 5

7 Rabibt MQ 6

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 7

1 KHẢO SÁT HIỆN TRẠNG 7

2 XÁC ĐỊNH YÊU CẦU 8

3 MÔ HÌNH HÓA YÊU CẦU 9

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 20

1 THIẾT KẾ HỆ THỐNG 20

2 THIẾT KẾ CƠ SỞ DỮ LIỆU 20

3 THIẾT KẾ GIAO DIỆN 32

CHƯƠNG 4 PHÁT HÀNH THỬ NGHIỆM ỨNG DỤNG 60

1 TRIỂN KHAI BACK END 60

2 TRIỂN KHAI FRONT END 60

PHẦN KẾT LUẬN 61

1 Những kết quả đạt được 61

2 Ưu điểm đề tài 61

3 Hạn chế đề tài 61

4 Hướng phát triển 62

TÀI LIỆU THAM KHẢO 63

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Thời đại công nghiệp hóa hiện đại hóa đất nước đã mở ra một kỉ nguyên mới,

kỷ nguyên công nghệ số, chính vì điều đó mà số lượng các thiết bị thông minh ngàycàng trở nên phổ biến và gắn liền với đời sống của con người Việc học online trởthành một xu hướng giúp chúng ta dễ dàng tiếp cận được các kiến thức mới

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng của người quản

lý và công tác quản lý và hoạt động rèn luyện Đồng thời kèm theo đó là các côngnghệ áp dụng tạo ra sản phẩm Cụ thể như sau:

- Tập trung nghiêm cứu công nghệ sâu về Asp net core để xây dựng back end

- Nghiên cứu Angular để triển khai front end

- Đảm bảo tính dễ dàng mở rộng nên triển khai kiên trúc microservice

3. PHẠM VI NGHIÊN CỨU

Đề tài này chủ yếu đi tập trung vào việc xử lý tạo bài học, bài kiểm trả Còn đối với học sinh có thể học tập và làm bài tập online

4 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN

Hầu hết các ứng dụng học online ra mắt rất rộng rãi nhưng vẫn một số điểm sau:

- Giao diện chưa thật sự bắt mắt và thu hút người dùng

- Xử lý API vần còn gặp nhiều khó khăn

- Tính năng của một số ứng dụng vẫn còn hạn chế

5. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Xây dựng được giao diện đơn giản, dễ sử dụng

- Xây dựng được các chức năng tạo bài học và bài kiểm tra bắt mặt

6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Đề tài hướng đến khả năng tiếp thu, nâng cao kỹ năng lập trình, nghiên cứu công nghệ mới và trên hết là đáp ứng nhu cầu học tập của học viên

1

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 Asp net core

là một open-source mới và framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile.

Ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên phiên bản đầy đủ của NET Framework Nó được thiết kế để cung cấp và tối ưu development framework cho những dụng cái mà được triển khai trên đám mây (clound) hoặc chạy on-promise.

Nó bao gồm các thành phần theo hướng module nhằm tối thiểu tài nguyên và chi phí phát triển, như vậy bạn giữ lại được sự mềm giẻo trong việc xây dựng giải pháp của bạn Bạn có thể phát triển và chạy những ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux.

Hình 1: Tổng quan về Asp net core [1]

2

[3 – Tài liệu tham khảo số 3]

6 Domain driven design

Domain - driven design là một cách tiếp cận trong việc xây dựng phần mềmphức tạp, sự phức tạp ở đây là những logic của lĩnh vực kinh doanh Thuật ngữ

đã được đưa ra bởi Eric Evans trong một cuốn sách cùng tên

7 RabbitMQ

4

là một phần mềm môi giới tin nhắn nguồn mở, ban đầu đã triển khai Giao thứcxếp hàng tin nhắn nâng cao và từ đó đã được mở rộng với kiến trúc trình cắm

để hỗ trợ Giao thức nhắn tin hướng văn bản truyền phát, truyền tải từ xa MQ vàcác giao thức khác

5

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

1 KHẢO SÁT HIỆN TRẠNG

Đoàn Tình hình phát triển cực mạnh của internet và tình hình dịch bệnh COVID 19nên việc truyền thống đang có xu hướng chuyển dần sang học online

Chi tiết về hệ thống như sau

o Chức năng quản lý học viên:

- Quản lý danh sách học viên:

▪ Thông tin danh sách học viên

▪ Các khóa học mà từng học viên đăng ký

o Chức năng quản lý trường học

o Danh sách trường học

o Chức năng quản lý chuyên ngành

o Chức năng quản lý loại khóa học

o Chức năng quản lý cài đặt hệ thống

o Chức năng quản lý email template

o Chức năng học tập của học viên

o Chức năng quản lý khóa học

o Quản lý unit

o Quản lý topic

▪ Quản lý câu hỏi review

▪ Quản lý câu hỏi practice

6

2 XÁC ĐỊNH YÊU CẦU

2.1 Yêu cầu chức năng

o Lưu trữ thông tin

▪ Thông tin học viên

▪ Thông tin chuyên ngành

▪ Thông tin trường học

▪ Thông tin loại khóa học

▪ Thông tin khóa học

▪ Thông tin chương học

▪ Thông tin bài học

▪ Thông tin các bài tập

▪ Thông tin học tập của học viên

o Tìm kiếm/ Tra cứu

▪ Tra cứu thông tin user

▪ Tra cứu thông tin hoạt động

▪ Tra cứu thông tin khóa học

▪ Tra cứu thông tin học viên

2.2 Yêu cầu phi chức năng

- Tốc độ tìm kiếm nhanh và chính xác

- Tiết kiệm được thời gian, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

- Tốc độ xử lý các thao tác nhanh chóng và chính xác

- Có thể thiết kế thêm các chức năng theo yêu cầu

- Thời gian truyền tải nội dung giữa các thiết bị

7

- Trải nghiệm người dùng

3. MÔ HÌNH HÓA YÊU CẦU

3.1 Lược đồ Usecase

3.1.1 Sơ đồ usecase tổng quan

Hình 5:Sơ đồ usecase tổng quan

8

3.1.2 Sơ đồ usecase chi tiết quản lý học viên

Hình 6: Sơ đồ usecase chi tiết quản lý học viên

3.1.3 Sơ đồ usecase chi tiết quản lý khóa học

Hình 7: Sơ đồ usecase chi tiết quản lý khóa học

9

3.1.4 Sơ đồ usecase chi tiết quản lý cài đặt hệ thống

Hình 8: Sơ đồ usecase chi tiết quản lý cài đặt hệ thống 3.2 Mô hình hóa yêu cầu

Bảng 1: Usercase Quản lý học viên Usecase “Quản lý học viên”

- Xem tất cả thông tin học viên

- Mô tả:

Tác nhân kích hoạtTiền điều kiệnCác bước thực hiện

- Mô tả:

Tác nhân kích hoạtTiền điều kiệnCác bước thực hiện

- Mô tả

Tác nhân kích hoạtTiền điều kiệnCác bước thực hiện

Bảng 5: Usecase Quản lý khóa học Usecase “Quản lý khóa học”

- Thêm, sửa, xóa, tìm kiếm

13

Tiền điều kiện

Các bước thực hiện

- Mô tả:

Tác nhân kích hoạtTiền điều kiệnCác bước thực hiện

- Mô tả:

15

16

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM

1. THIẾT KẾ HỆ THỐNG

2. THIẾT KẾ CƠ SỞ DỮ LIỆU

 Users (_id, username, password, status, createdDate, lastModifiedDate, email)

Bảng 12: Chi tiết dữ liệu bảng User

 student (id, name, email, IdMajority, imageName, Job, Address)

Bảng 13: Chi tiết bảng dữ liệu student

 majority (id, code, name, status)

Bảng 14: Chi tiết bảng dữ liệu majority

 school (id, name, code, status)

Bảng 15: Chi tiết bảng dữ liệu students STT Thuộc tính Kiểu Ý nghĩa Ghi chú

19

 course.question (id, content, constructionText, ImageName, Answer,

AnswerOf Student, AudioName, QuestionType, TopicId)

Bảng 16: Chi tiết bảng dữ liệu course.question

 course.couseType (id, name, status)

Bảng 17: Chi tiết bảng dữ liệu Course.CourseType

ST

T

Thuộc tính

20

Bảng 18: Chi tiết bảng dữ liệu course.course

21

 Course.Unit (Id, Name, Status, Description, OrderIndex, CourseId)

Bảng 20: - Chi tiết bảng dữ liệu Course.Unit

• Course.Answer (Id, Content, ContentTranslate, IsCorrectAnswer,

IsAnswerOfStudent, QuestionId, OrderIndex)

22

Bảng 21: Chi tiết bảng dữ liệu Course.Answer

Bảng 23: Chi tiết bảng dữ liệu Course.QuestionChild

Bảng 25: Chi tiết bảng dữ liệu Course.QuestionReView

STT Thuộc tính Kiểu Ý nghĩa Ghi chú

24

2 Content

3 ExplainAnswer

5 IsAnswerOfSt

udent Boolean Là câu trả lời của học viên

Bảng 26: Chi tiết bảng dữ liệu Course.AnswerReview

• Study.TopicPractice (Id, StudentId,

TotalQuestion,

TotalCorrectlyAnswedQuestion, TopicId, TopicName, DateOfBeginning, DateOfEnd)

Bảng 27: Chi tiết bảng dữ liệu Study.TopicPractice

Bảng 28: Chi tiết bảng dữ liệu Study.Answer

(Id , Co nte nt, Qu est io nI

d, An sw

er, An sw er Of St ud ent , Or de rIn de x)

27

Bảng 30: Chi tiết bảng dữ liệu Study.QuestionChild

 Study.Question (id, content, constructionText, ImageName, Answer, AnswerOf

Student, AudioName, QuestionType, TopicId

28

Bảng 32: Chi tiết bảng dữ liệu Study.Question

Bảng 33: Chi tiết bảng dữ liệu Study.TopicReview

7 DateOfBeginning

Bảng 35: Chi tiết bảng dữ liệu System.EmailTemplate

3 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

3.1 Giao diện website admin

3.1.1 Giao diện trang đăng nhập

Hình 9: Giao diện trang đăng nhập

3.1.2 Giao diện trang Dashboard

Hình 10: Giao diện trang Dashboard Bảng 38: Danh sách xử lý trang Dashboard

học

7 Cấu hình hệ thống Nhấn vào (7) Đă đăng nhập

3.1.3 Giao diện trang Quản lý học viên

Hình 11: Giao diện trang Quản lý Khoa Bảng 39: Danh sách xử lý trang Quản lý Khoa

STT12345

34

- Giao diện trang thêm học viên

35

Hình 12-13: Giao diện trang thêm học viên Bảng 40: Danh sách xử lý trang thêm Khoa

học

36

- Giao diện trang chỉnh sửa thông tin khóa học của học viên

Hình 14: Giao diện chỉnh sửa khóa học học viên Bảng 41: Danh sách xử lý trang chỉnh sửa Khoa

6 Ngày mua khóa học

7 Mã kịch hoạt

8 Lưu thông tin

38

39

3.1.4 Giao diện trang Quản lý trường học

Hình 15: Giao diện trang Quản lý trường học Bảng 43: Danh sách xử lý trang Quản lý trường học

- Giao diện trang thêm, chỉnh sửa trường học

Hình 16: Giao diện trang thêm, chỉnh sửa trường học Bảng 44: Danh sách xử lý trang thêm Học kì

41

3.1.5 Giao diện trang Quản Lý Chuyên Ngành

Hình 17: Giao diện trang Quản Lý Chuyên Ngành Bảng 45: Danh sách xử lý trang Quản lý Chuyên Ngành

- Giao diện trang thêm, chỉnh sửa chuyên ngành

Hình 18: Giao diện trang thêm Lớp Bảng 46: Danh sách xử lý trang thêm, chỉnh sửa chuyên ngành

4 Thay đổi trạng thái Nhấn vào (4) Đã đăng nhập

3.1.5 Giao diện trang Quản lý Loại Khóa Học

Hình 19: Giao diện trang Quản lý Loại Khóa Học

STT1

Hình 20: Giao diện trang Quản lý Khóa

Học

45

Bảng 48: Danh sách xử lý trang Quản lý Khóa Học

Hình 21: Giao diện trang thêm/chỉnh sửa khóa học

- Quản lý danh sách unit

Hình 22: Giao diện trang danh sách unit Bảng 50: Danh sách xử lý trang danh sách unit

- Thêm, chỉnh sửa unit

Hình 23: Giao diện trang thêm/chỉnh sửa unit

6 Thêm mới Nhấn vào (6) Đã đăng nhập

51

- Thêm, chỉnh sửa topic

Hình 25-27: Giao diện trang thêm sửa topic Bảng 53: Danh sách xử lý trang thêm sửa topic

52

2 Nhập thứ tự hiển thị

53

3.1.7 Giao diện trang Quản lý Cài Đặt Hệ Thống

Hình 28: Giao diện trang Quản lý Cài Đặt Hệ Thống Bảng 54: Danh sách xử lý trang Quản lý Cài Đặt Hệ Thống