báo cáo tiểu luận hết học phần thiết kế và lập trình ứng dụng học lập trình online

Tiến hành đánh giá nhu cầu - Giải quyết nhu cầu : App học tập có các video học online với các chủ đề : C/C++, Java , JavaScript ,Lập trình web ,python ,thuật toán … - Đối tượng : Sinh vi

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA ĐIỆN TỬ - VIỄN THÔNG

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự do - Hạnh phúc

BÁO CÁO TIỂU LUẬN HẾT HỌC PHẦN

Môn: Phát triển ứng dụng trên thiết bị di dộng

Tên đề tài: Thiết kế và lập trình ứng dụng học lập trình online

Hà Nội 2023

MỤC LỤC

I Xác định dự án thiết kế 6

1 Tiến hành đánh giá nhu cầu 6

2 Xác định các bên liên quan 6

2.1 Các bên liên quan chính 6

2.2 Các bên liên quan thứ cấp 6

2.3 Các bên then chốt 7

3 Hiểu bối cảnh xã hội của đối tác cộng đồng 7

4 Xác định yêu cầu cơ bản của bên liên quan 8

5 Xác định giới hạn thời gian của dự án 8

II Phát triên đặc tả kĩ thuật 8

1 Hiểu và mô tả ngữ cảnh 8

2 Tạo hồ sơ các biên liên quan 9

3 Tình huống người dùng 9

4 Tạo mô hình và nguyên mẫu cho ứng dụng học lập trình 10

5 So sánh với các sản phẩm tiêu chuẩn 10

6 Xác định nhu cầu của khách hàng 10

7 Thiết lập tiêu chí đánh giá 11

8 Phát triển đặc tả kĩ thuật của khách hàng 11

III GIAI ĐOẠN THIẾT KẾ Ý TƯỞNG 12

1 Phân rã chức năng 12

2 Nghiên cứu sản phẩm đã có 12

4 Đánh giá tính khả thi của giải pháp tiềm năng 13

5 Ma trận quyết định 13

6 Chọn giải pháp tốt nhất 13

IV Thực hiện thiết kế chi tiết 14

1 Tiến hành lên bố cục app học tập 14

2 Thiết kế giao diện, xây dựng cơ sở dữ liệu, nội dung app chi tiết 14

2.1 Giao diện người dùng 14

2.2 HomeFragment: 15

2.3 Search Fragment: 22

2.4 Learn Fragment 23

2.5 Profile Fragment 26

3 Lập trình tính năng app 20

4 Test và fix lỗi app 20

5 Kiểm tra khả năng sử dụng và phản hồi người dùng 21

V Công việc cá nhận……….28

I Xác định dự án thiết kế

1 Tiến hành đánh giá nhu cầu

- Giải quyết nhu cầu : App học tập có các video học online với các chủ đề : C/C++, Java ,JavaScript ,Lập trình web ,python ,thuật toán …

- Đối tượng : Sinh viên

- Hiện tại trên Cửa hàng ứng dụng CHplay của google cung một số sản phẩm như app học tậpnhư LearnCoding , Sololearn ,…

- Các vấn đề mà nhóm tôi muốn thúc đẩy dự án :

+ Giúp cho Sinh viên , người muốn học lập trình được tiếp cận với tài liệu theo đúng chủ đềmuốn học

+ Sinh viên ,người học lập trình dễ dàng truy cập vào các video bài học theo từng khóa học

từ cơ bản đến nâng cao với từng chủ đề một

+ Sau mỗi khóa học sinh viên ,người muốn học lập trình sẽ được tự đánh giá kiến thức củamình qua các bài test trắc nghiệm

2 Xác định các bên liên quan

2.1 Các bên liên quan chính

Sinh viên

2.2 Các bên liên quan thứ cấp

Nhóm quản lý nội dung khóa học

2.3 Các bên then chốt

Sinh viên , nhóm phát triển app

- Mối quan tâm của sinh viên với app học lập trình

+ Truy cập dễ dàng vào các bài học theo dạng chủ đề

+ Dễ dàng thao tác , tránh được những thao tác rườm rà

+ Sau các bài test trắc nghiệm đánh giá được lượng kiến thức của mình sau khi học+ Có thể học mọi lúc , mọi nơi

- Việc bảo trì dự án được tuân thủ theo thời gian cố định từ nhóm của tôi đưa ra là 1 năm /1 lần

- Đối với mỗi bên đều có người liên hệ chính :

+ Bên phía người dùng : Bộ phận hỗ trợ khách hàng

+ Nhà phát triển : Tôi

- Khi xây dựng app học lập trình nhóm tôi có các vị trí chịu trách nhiệm :

+ Huyền ,Đức , Đức : Phát triển backend

+ Hân, Sơn : Thiết kế giao diện

- Mối quan tâm mà các bên khi tham gia dự án

+ Nhóm tôi : Thời gian hoàn thành app học lập trình, các video khóa học xem được, dữ liệucác bài test thông suốt

+ Sinh viên : Thao tác dễ dàng, truy cập được các bài học theo đúng các chủ đề muốn học,

tự đánh giá được kiến thức qua các bài test, app không bị lag,…

3 Hiểu bối cảnh xã hội của đối tác cộng đồng

Nhiệm vụ của sinh viên : Cần làm rõ các yêu cầu cụ thể về các kiến thức muốn học, web như

số lượng giáo viên truy cập, số lượng học sinh truy cập ,giáo viên cần có tài khoản riêng quản lýđược các học sinh,…

Bộ phận khảo sát người dùng thu thập các ý kiến từ những học sinh và sinh viên trải nghiệmapp để đóng góp ý kiến và thảo luận với bạn thiết kế giao diện của nhóm

Những sinh viên có thể đóng góp ý kiến để nhóm có thể tối ưu sao cho việc sử dụng app dễdàng , tránh các thủ tục rườm rà như nhập mã capcha , cắt giảm bớt một số bước xác nhận.Thách thức xã hội mà dự án giữa nhóm đang cố gắng giải quyết:

Kiến thức lập trình liên tục được cập nhật theo thời gian, các bài test trắc nghiệm sau khóa họcnên có kiến thức giúp cho việc ôn tập dễ dàng

Sinh viên có thể sử dụng app học lập trình (app Education ) được tiếp thu kiến thức dễ dànghơn so với Coding app vì khi sử dụng Coding app sinh viên phải có kiến thức một chút mới làmđược trắc nghiệm còn app Education của nhóm thêm phần video lý thuyết sinh viên có thể xem video

lý thuyết trước sau đó mới kiểm tra lại kiến thức của mình qua bài test

4 Xác định yêu cầu cơ bản của bên liên quan

Sinh viên: Giao diện trực quan, dễ dàng đăng ký, đăng nhập để truy cập được vào các bài họclập trình, làm được các test trắc nghiệm sau mỗi khóa học

5 Xác định giới hạn thời gian của dự án

- Dự án được triển khai theo thời gian trước kết thúc môn học

+ Thời gian triển khai cụ thể bắt đầu từ 5/2/2023

+ Thời gian ước tính hoàn thiện : 12/4/2023

- Các yếu tố liên quan đến tiến độ dự án :

+ Thời gian kết thúc dự án

+ Các yêu cầu , các ý kiến góp ý từ phía sinh viên

- Các nguồn lực quan trọng ảnh hưởng đến tiến độ dự án :

+ Thời gian hoàn thiện dự án

+ Khó khăn trong việc code sản phẩm

+ Nội dung của các khóa học phù hợp hay không ?

…

II Phát triên đặc tả kĩ thuật

1 Hiểu và mô tả ngữ cảnh

- Học tập trực tuyến: Ứng dụng có thể được sử dụng để cung cấp các khóa học trực tuyến, bài giảng

và tài liệu học tập cho sinh viên

- Dự án sẽ là nơi cung cấp các bài giảng theo video về các chủ đề lập trình các ngôn ngữ như : C/C++, Java, JavaScript, lập trình web, python…

- Và hướng vào đối tượng như:Sinh viên

- Một số hoạt động của học tập trực tuyến sẽ bao gồm các phần:

+ Truy cập vào nội dung giảng dạy

+ Đăng ký,đăng nhập và tham gia khóa học

+ Kiểm tra và đánh giá kiến thức

+ Tiến độ các khóa học đã hoàn thành

2 Tạo hồ sơ các biên liên quan

- Các bên liên quan chính cần :

+ Đưa ra những yêu cầu về kiến thức, những trải nghiệm sử dụng ứng dụng, thời gian củacác khoá học

+ Trao đổi cách học, cách kiểm tra (học theo video hay học theo module, kiểm tra theo kiểutrắc nghiệm lý thuyết hay bài tập ứng dụng… )

- Các bên liên quan thứ cấp cần:

+ Trao đổi với bên liên quan chính, từ đó đưa ra được những đóng góp về khoá học, kiếnthức của khoá học

+ Xây dựng hệ thống bài test kiến thức xuyên suốt khoá học

+ Xây dựng giao diện thân thiện, dễ sử dụng, cung cấp những khoá học tương ứng theo nhucầu, đảm bảo chất lượng của khoá học

+ Hỗ trợ người sử dụng khi có sự cố xảy ra

- Sinh viên muốn truy cập các tài liệu học tập: Sinh viên có thể sử dụng tính năng tra cứu đểtìm kiếm các khóa học hoặc tính năng bài viết mới để cập nhật các tài liệu, xu hướng công nghệ

- Sinh viên muốn đăng ký khóa học: Sinh viên có thể sử dụng tính năng đăng ký khóa học trongmodule profile khi sinh viên mới bắt đầu sử dụng để đăng ký Sau đó, họ có thể truy cập khóa học

và bắt đầu học tập

- Sinh viên muốn tự đánh giá kiến thức sau khóa học: Sau khi hoàn thành khóa học, sinh viên

có thể sử dụng tính năng làm test để tự đánh giá kiến thức của bản thân sau khi học khóa học và chia

sẻ trải nghiệm học tập của mình với người khác

- Sinh viên muốn quản lý tài khoản: Sinh viên có thể sử dụng tính năng đăng nhập, đăng xuất

để có thể đăng nhập vào tài khoản của mình khi đăng ký để lưu quá trình học ,còn đăng xuất khikhông muốn sử dụng tài khoản đấy trong việc học

4 Tạo mô hình và nguyên mẫu cho ứng dụng học lập trình

Bản thiết kế mô hình ứng dụng học lập trình gồm các phần:

- Đăng ký và đăng nhập

- Hồ sơ cá nhân (Profile)

- Trang chủ: hiển thị các khóa học

- Chức năng học tập:Lưu trữ trữ tiến trình học của các khoá học ( hoàn thành hay chưa hoànthành)

- Chức năng tìm kiếm các khoá học

- Các khoá học

- Các bài test cho từng khoá học

5 So sánh với các sản phẩm tiêu chuẩn

- Nhu cầu của các bên liên quan khác với những sản phẩm hiện có như app coding trên CHplay

- App coding : Có giao diện bắt mắt , dễ sử dụng tuy nhiên với đối tượng sinh viên phải mấtphí thanh toán 1 khoản để nâng cấp tài khoản

- App coding hiện tại chỉ có các bài test kiến thức theo chủ đề sinh viên muốn học nên vớinhững sinh viên mới bắt đầu học lập trình chưa thể làm được

- Với app Education của nhóm em phát triển:

+ Có giao diện đơn giản , dễ sử dụng

+ Hoàn toàn free đối với sinh viên

+ Cung cấp mọi khóa học bao gồm video học lý thuyết và kiểm tra kiến thức qua các bàitest

6 Xác định nhu cầu của khách hàng

- Khảo sát sinh viên về nhu cầu với ứng dụng học lập trình từ đó đưa ra một những nhu cầu cơbản cần có ví dụ như:

+ Chất lượng nội dung khoá học, bài kiểm tra

+ Giao diện thân thiện, dễ sử dụng, trực quan cho phép người dùng dễ dàng tham gia, sửdụng

+ Bảo mật thông tin người dùng

+ Đa dạng và linh hoạt

- Sau khi nắm bắt được những yêu cầu của sinh viên đội ngũ phát triển sẽ đưa ra phương ántriển khai phù hợp, hợp lý hơn

7 Thiết lập tiêu chí đánh giá

Để xác định tiêu chí đánh giá cho một trang app học tập, cần phải đảm bảo rằng các yêu cầu

và mong đợi của sinh viên và các bên liên quan đã được đưa ra và xem xét Một số tiêu chí đánh giá

- Tính năng và công nghệ: Đánh giá các tính năng của ứng dụng , bao gồm các công nghệđược sử dụng, tính năng tìm kiếm, tính năng tương tác, tính năng đánh giá, khả năng kết nối với cácthiết bị khác

- Hiệu quả học tập: Tiêu chí này đánh giá khả năng hỗ trợ của ứng dụng trong quá trình họctập của người dùng

8 Phát triển đặc tả kĩ thuật của sinh viên

Tính năng

- Giao diện dễ sử dụng và thân thiện với người dùng

- Có chức năng tìm kiếm nhanh các khóa học

- Hỗ trợ đa ngôn ngữ và các công cụ học tập trực tuyến như bài kiểm tra, video,tin tức…

Hiệu suất

- Tốc độ tải trang nhanh và không bị gián đoạn

- Hệ thống không bị treo hoặc bị lỗi khi đăng ký hoặc đăng nhập

- Hỗ trợ truy cập từ các thiết bị di động

Bảo mật - Đảm bảo bảo mật thông tin người dùng và dữ liệu học tập

- Sử dụng các giao thức bảo mật SSL/TLS để mã hóa thông tin truyền tải giữamáy tính của người dùng và server

- Có chức năng xác thực người dùng, giảm thiểu rủi ro xâm nhập trái phép.

Thiết kế

giao diện

- Thiết kế giao diện đơn giản, dễ nhìn và thân thiện với người dùng

- Sử dụng các hình ảnh, màu sắc tạo cảm giác thoải mái cho người dùng

- Các trang layout được tối ưu hóa để hiển thị tốt trên các thiết bị khác nhau nhưđiện thoại, máy tính bảng

III GIAI ĐOẠN THIẾT KẾ Ý TƯỞNG

1 Phân rã chức năng

Là quá trình phân tích và chia nhỏ các chức năng của sản phẩm thành các phần nhỏ hơn và dễquản lý hơn Việc phân rã chức năng giúp cho quá trình phát triển sản phẩm trở nên dễ dàng hơn vàđảm bảo rằng các chức năng của sản phẩm được phát triển đầy đủ và hiệu quả

Liệt kê chức năng

2 Nghiên cứu sản phẩm đã có

Sản phẩm về học lập trình hiện đã có trên cửa hàng tải app di động CHplay và nhóm đã nghiêncứu qua sản phẩm app mimo

App mimo là một app lập trình được viết bằng ngôn ngữ java và koltin

App sử dụng các bài test trắc nghiệm ngắn trong mỗi bài học

Sơ đồ phân cấp chức năng của app học lập

trình

Giao diện của app mimo được tối giản hóa để người dùng tập trung vào quá trình học tập.Tuy nhiên app có nội dung học hạn chế , không đánh giá được kiến thức người dùng.Không phù hợp với người chưa có kiến thức lập trình …

4 Đánh giá tính khả thi của giải pháp tiềm năng

- Giao diện tối ưu phù hợp cho sinh viên tập trung quá trình học tập;

- Nội dung học phong phú, đa dạng;

- Tiến trình học lưu được quá trình học của sinh viên , sinh viên biết mình đã học được tớiđâu

Tính khả thi của các giải pháp tương đối

5 Ma trận quyết định

Hiệu suất chức năng

- Tốc độ xử lý nhanh

- Khả năng lưu trữ được tiến trình học

- Khả năng kết nối với cơ sở dữ liệuTính thẩm mỹ - Giao diện tối ưu, đơn giản

- Các module chức năng được chia rõ ràng

Tính toàn diện - Đối tượng sinh viên muốn học lập trình

- Có tư duy logic tìm hiểu kiến thức

Khả năng sử dụng - Giao diện rõ ràng

- Sự rõ ràng của các module chức năng

6 Chọn giải pháp tốt nhất

Phát triển các tiêu chí

Trang chủ

Trang chủ cần có giao diện tối ưu,

đơn giản Các khóa học được bố trí

theo giao diện dễ nhìn thấy

- Sinh viên tập trung trong việc học;-Sinh viên dễ dàng nhìn thầy các khóahọc và đưa ra lựa chọn nhanh để chọnkhóa học

Tìm kiếm Tìm kiếm theo từ khóa Sinh viên dễ dàng tìm kiếm theo từ khóa

tên khóa học mình muốn họcQuá trình học Lưu theo khóa học đã hoàn thành

hay chưa

Sinh viên có thể xem khóa nào mình đãhọc và khóa nào mình chưa học

Tài khoản Đăng nhập, đăng ký cho sinh viên

Sinh viên đăng ký tài khoản để học cánhân Sau khi đăng ký chỉ việc đăngnhập thay vì đăng ký như lúc đầu

IV Thực hiện thiết kế chi tiết

1 Tiến hành lên bố cục app học tập

Trong đó một app cần có yêu cầu cũng như các trang quan trọng như:

- Hiển thị danh sách các khóa học, phân chia theo danh sách các khóa học được xem nhiềunhất, mới nhất, theo chủ đề…;

- Tổ chức Firebase lưu trữ thông tin các khóa học, thông tin bài viết, thông tin người dùng(gồm email, password, các khóa học mà người dùng đã đăng ký)…;

- Đăng nhập, đăng ký tài khoản;

- Tìm kiếm theo tên các khóa học;

- Hiển thị thông tin khóa học gồm các bài giảng, các video, câu hỏi tương ứng

2 Thiết kế giao diện, xây dựng cơ sở dữ liệu, nội dung app chi tiết

Đây là trang giao diện app sẽ có trong app học tập:

2.1 Giao diện người dùng

- Gồm 4 fragment chính: HomeFragment, SearchFragment, LearnFragment,ProfileFragment

- Sử dụng Bottom Navigation + Fragment + View Pager 2 để cài đặt

2.2 HomeFragment:

- Banner: Auto Image Slider: Gồm 3 ảnh banner tự động trượt

- Code banner:

ImageSlider imageSliderBanner = view.findViewById(R.id.image_slider_banner);

ArrayList<SlideModel> slideModelsBanner = new ArrayList<>();

slideModelsBanner.add(new SlideModel(R.drawable.banner_01, ScaleTypes.FIT));

slideModelsBanner.add(new SlideModel(R.drawable.banner_02, ScaleTypes.FIT));

slideModelsBanner.add(new SlideModel(R.drawable.banner_03, ScaleTypes.FIT));

TextView tvSeeMoreAllCourse = (TextView) view.findViewById(R.id.textViewSeeMoreAllCourse);

+ Sử dụng Recycler View, lấy dữ liệu từ Firebase

+ Sự kiện click -> hiển thị danh sách các khóa học theo từng chủ đề Giao diện hiển thị sửdụng Bottom Sheet Dialog, danh sách các khóa học tương tự sử dụng Recycler View

- Danh sách các khóa học:

+ Sử dụng Recycler View

+ Được phân chia theo 3 danh sách: Tất cả khóa học, Khóa học mới nhất (sắp xếp theothời gian cập nhật), Khóa học nổi bật (sắp xếp theo số lượt xem)

setRecyclerViewAllCourse();

TextViewtvSeeMoreAllCourse=(TextView)view.findViewById(R.id.textViewSeeMoreAllCourse);tvSeeMoreAllCourse.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

showDialogSeeMoreCourse(adapterAllCourse.getList(), "Tất cả khóa học"); }

});

+ Click Button xem thêm -> Hiển thị giao diện đầy đủ danh sách các khóa học

Code chính:

Code giao diện cho nội dung của khóa học mới nhất

<TextView

android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true"

android:text="Tất cả khóa học"

android:textColor="@color/text_title_rcv_home" android:textSize="20dp"

android:textStyle="bold"

tools:ignore="NewApi" />