Với sự phát triển của công nghệ di động, việc học lập trình thông qua ứng dụng di động đã trở thành một xu hướng mới, mang lại sự tiện lợi và linh hoạt cho người học.. OpenLearning không
Trang 1HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
_
Báo Cáo Cuối Kì Môn Lập Trình Ứng Dụng Di Động
HÀ NỘI, THÁNG 11 NĂM 2023
Sinh viên: Lê Văn Tùng – B20DCPT184
Phạm Hữu Tuân – B20DCPT180 Phạm Thanh Tùng – B20DCPT188
Trang 2MỤC LỤC
I Giới thiệu 3
1 Lý do chọn đề tài 3
2 Mục tiêu 3
3 Công nghệ sử dụng 3
3.1 Front-End 3
3.2 Back-End 4
II Phân tích thiết kế hệ thống 5
1 Mục đích, phạm vi hệ thống 5
2 Các chức năng cơ bản của hệ thống 5
3 Các Use case 6
4 Biểu đồ các Use case chi tiết 7
III Thiết kế 9
1 Thiết kế wireframe cho giao diện ứng dụng 9
2 Giao diện ứng dụng 11
IV Đánh giá và kết luận 14
1 Đánh giá 14
2 Kết luận 15
Trang 3I Giới thiệu
1 Lý do chọn đề tài
Trong thế giới ngày nay, việc tiếp cận với kiến thức lập trình đã trở nên quan trọng hơn bao giờ hết Lập trình không chỉ là một kỹ năng cần thiết cho những người làm việc trong ngành công nghệ thông tin, mà còn là một công cụ mạnh mẽ giúp chúng ta giải quyết các vấn đề phức tạp trong cuộc sống hàng ngày Với sự phát triển của công nghệ di động, việc học lập trình thông qua ứng dụng di động đã trở thành một xu hướng mới, mang lại sự tiện lợi và linh hoạt cho người học
Chính vì lý do này, nhóm em đã chọn xây dựng ứng dụng di động OpenLearning, nhằm cung cấp các khóa học lập trình chất lượng cao như HTML, CSS, Javascript, và nhiều ngôn ngữ khác OpenLearning không chỉ giúp người dùng học lập trình mọi lúc, mọi nơi, mà còn tạo ra một môi trường học tập tương tác, thúc đẩy sự hợp tác và chia
sẻ kiến thức giữa các học viên
Bằng cách chọn đề tài này, nhóm em mong muốn đóng góp vào sự phát triển của cộng đồng lập trình, đồng thời cung cấp một giải pháp học tập hiệu quả cho những người đang tìm kiếm kiến thức lập trình Nhóm em tin rằng, với OpenLearning, việc học lập trình sẽ trở nên dễ dàng và thú vị hơn bao giờ hết
2 Mục tiêu
Tiện lợi và linh hoạt: Mục tiêu chính của OpenLearning là tạo ra một nền tảng học tập di động, giúp người học có thể tiếp cận với kiến thức lập trình mọi lúc, mọi nơi
Chất lượng giáo dục: Cung cấp các khóa học lập trình chất lượng cao, giúp người học nắm bắt được kiến thức cơ bản và nâng cao về HTML, CSS, Javascript và nhiều ngôn ngữ khác
Tương tác và hợp tác: OpenLearning nhằm tạo ra một môi trường học tập tương tác, thúc đẩy sự hợp tác và chia sẻ kiến thức giữa các học viên
Đóng góp vào cộng đồng: Chúng tôi mong muốn OpenLearning sẽ trở thành một phần quan trọng của cộng đồng lập trình, giúp nâng cao chất lượng giáo dục lập trình và tạo ra nhiều lập trình viên giỏi
Phát triển kỹ năng lập trình: Mục tiêu cuối cùng của OpenLearning là giúp người học phát triển kỹ năng lập trình của mình, từ đó mở ra nhiều cơ hội nghề nghiệp và đóng góp vào sự phát triển của ngành công nghệ thông tin
3 Công nghệ sử dụng
3.1 Front-End
Trang 4React Native: React Native là một framework mã nguồn mở được sáng tạo bởi Facebook Nó được sử dụng để phát triển ứng dụng di động Android, iOS, Web và UWP bằng cách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc React Native sử dụng ngôn ngữ lập trình JavaScript để tạo các ứng dụng di động trên các hệ điều hành iOS và Android với một cơ sở mã duy nhất Tính năng này giúp các lập trình viên tiết kiệm rất nhiều thời gian, công sức khi phát triển ứng dụng
di động Theo khảo sát của Stack Overflow năm 2021, có đến 58,08% các nhà phát triển yêu thích làm việc trên React Native trong năm qua và họ sẽ tiếp tục lựa chọn React Native trong tương lai
Framework: Taildwind CSS là một framework CSS hiện đại và tiện ích, giúp bạn xây dựng giao diện người dùng nhanh chóng và hiệu quả1 Với những class built-in đã được tối ưu, bạn có thể tùy chỉnh giao diện dễ dàng và linh hoạt1 Tailwind CSS không chỉ giúp tiết kiệm thời gian mà còn mang lại sự linh hoạt và sáng tạo cho việc phát triển web của bạn
Navigation: Sử dụng thư viện React Navigation để quản lý việc điều hướng giữa các màn hình và đảm bảo trải nghiệm người dùng mượt mà
3.2 Back-End
Sử Dụng Server Backend với MongoDB và Node.js: khả năng linh hoạt và mở rộng tốt Dữ liệu từ các đơn hàng, thông tin người dùng và các thông tin khác được lưu trữ
và quản lý trong cơ sở dữ liệu MongoDB Điều này giúp nhanh chóng truy xuất và cập nhật dữ liệu mà không làm suy giảm hiệu suất
Trang 5API sử dụng Node.js: triển khai server backend bằng Node.js để xử lý logic kinh doanh của ứng dụng Các endpoint API được thiết kế một cách logic để đáp ứng nhanh chóng các yêu cầu từ phía frontend Thông qua các API có thể quản lý người dùng, đơn hàng, và các thực đơn từ nhà hàng
II Phân tích thiết kế hệ thống
1 Mục đích, phạm vi hệ thống
Nhằm bắt kịp xu hướng phát triển của thời đại ứng dụng bán khóa học OpenLearning được xây dựng để giúp cho hoạt động kinh doanh của các trung tâm đào tạo, giáo viên cá nhân trở nên dễ dàng và hiệu quả hơn Hệ thống sẽ giúp người sử dụng dễ dàng tìm và mua được khóa học theo ý muốn Các hoạt động, hành vi như tìm kiếm khóa học theo chủ đề, ngôn ngữ lập trình, mức độ khóa học, xem thông tin chi tiết về khóa học và mua khóa học trực tiếp trên ứng dụng sẽ được xử lý nhanh hơn và
ít sai sót hơn Ngoài ra, người quản trị các trung tâm đào tạo, giáo viên cá nhân cũng
dễ dàng hơn trong việc kiểm soát việc bán khóa học, quản lý được số lượng học viên
đã mua, doanh thu và tỷ lệ mua khóa học
Kiểu phần mềm: Ứng dụng trên thiết bị di động
Phạm vi: Chạy trên hệ điều hành Android
Các chủ thể tương tác với ứng dụng:
o Khách hàng
o Admin
2 Các chức năng cơ bản của hệ thống
Trang 6Đăng nhập tài khoản: Cho phép người dùng đăng nhập vào ứng dụng bằng các tài khoản đã đăng ký
Xem thông tin chi tiết khóa học: cho phép người dùng xem thông tin chi tiết của 1 khóa học trên ứng dụng
Quản lý tài khoản: cho phép người dùng chỉnh sửa thông tin tài khoản khi cần thiết
Giỏ hàng: cho phép người dùng thêm, xóa các khóa học
3 Các Use case
● Mô tả các Use case
o Use case “Đăng nhập” cho phép khách hàng đăng nhập vào ứng dụng
Trang 7o Use case “Quản lý tài khoản” cho phép khách hàng xem, chỉnh sửa thông tin của tài khoản
o Use case “Tìm kiếm khóa học” cho phép khách hàng tìm kiếm các khóa học trong ứng dụng theo các từ khóa
o Use case “xem chi tiết khóa học” cho phép khách hàng xem các thông tin cơ bản về khóa học
o Use case “quản lý giỏ hàng” cho phép khách hàng thực hiện thêm, sửa, xóa thông tin của giỏ hàng
4 Biểu đồ các Use case chi tiết
Use case đăng nhập
Use case quản lý tài khoản
Trang 8Use case quản lý giỏ hàng
Trang 9III Thiết kế
1 Thiết kế wireframe cho giao diện ứng dụng
- Giao diện Login, Trang chủ, Profile
Trang 10- Giao diện giỏ hàng, tìm kiếm
- Giao diện Thông tin khóa học, Xem khóa học
Trang 12- Giao diện Liên hệ, About Us
2 Giao diện ứng dụng
Trang 16IV Đánh giá và kết luận
1 Đánh giá
- Giao diện của ứng dụng được thiết kế một cách thân thiện và dễ sử dụng, tạo điều kiện thuận lợi cho việc tìm kiếm khóa học và tương tác với nội dung học tập Giao diện của ứng dụng được thiết kế theo phong cách hiện đại, tối giản, giúp người dùng dễ dàng theo dõi tiến trình và hoạt động mới
Trang 17Về bố cục, giao diện của ứng dụng được chia thành các phần rõ ràng, giúp người dùng dễ dàng tìm kiếm thông tin Các biểu tượng và nút chức năng được thiết kế lớn, rõ ràng, dễ nhìn
Về màu sắc, giao diện của ứng dụng được sử dụng màu sắc hài hòa, tạo cảm giác dễ chịu cho người dùng
- Ứng dụng OpenLearning đã xây dựng các chức năng Đăng nhập/Đăng ký, Tìm kiếm khóa học, Chỉnh sửa thông tin tài khoản… một cách hoàn thiện
2 Kết luận
OpenLearning là một ứng dụng hữu ích cho việc học trực tuyến Nó cung cấp một loạt các khóa học chất lượng và cung cấp các công cụ để tạo ra một môi trường học tập tương tác