Xã hội con người ngày càng phát triển và nhu cầu giải trí của con người ngày càng tăng cao. Cách ngày nay khoảng 20 năm, thời kỳ mà internet chưa hoàn toàn phổ biến. Nhu cầu giải trí của con người vô cùng cao và để giải quyết cho vấn đề này thì hàng loạt sách, báo, truyện tranh, ảnh ra đời, phù hợp với mọi độ tuổi. Và đặc biệt trong thời đại ngày nay, công nghệ phát triển, thay vì những hình thức in ấn truyền thống thì truyện tranh thông qua internet đã ngày càng được nhiều người biết đến và đón nhận. Truyện tranh online dần dần có vị thế trên bảng xếp hạng từ khóa tìm kiếm của Google. Rất nhiều nước trên thế giới có nền kinh tế phát triển dựa vào truyện tranh như Nhật Bản, Hàn Quốc. Nắm bắt xu thế chúng em đã quyết định thực hiện đề tài: “Xây dựng ứng dụng đọc truyện tranh trên Android”.
B TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN XÂY DỰNG ỨNG DỤNG ĐỌC TRUYỆN TRANH TRÊN ANDROID KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT Giáo viên hướng dẫn: ThS NGUYỄN HỮU TRUNG ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XHCN VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng ứng dụng đọc truyện tranh Android Họ tên giảng viên hướng dẫn: ThS Nguyễn Hữu Trung NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XHCN VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng ứng dụng đọc truyện tranh Android Họ tên giảng viên phản biện: TS Lê Vĩnh Thịnh NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: LỜI CẢM ƠN Lời đầu tiên, nhóm thực đề tài chúng em xin phép gửi lời cảm ơn chân thành sâu sắc đế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 học tập, phát triển tảng kiến thức để thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Nguyễn Hữu Trung lời cảm ơn sâu sắc thầy ln đồng hành, giúp đỡ chúng em suốt trình phát triển đề tài Những thiếu sót thầy kịp thời góp ý, để thuận tiện việc sửa chữa Tuy nhiên, với vốn kiến thức có khả chun mơn cịn nhiều hạn chế Vậy nên chúng em ln cố gắng để hồn thành cách tốt Tuy vậy, việc xảy thiếu sót trình học tập làm đề tài chúng em điều khó tránh khỏi Nhóm chúng em hi vọng nhận thông cảm nhận góp ý tận tình q báu thầy Thơng qua góp ý chúng em có thể rút kinh nghiệm, tìm thấy thiếu sót, để chúng em có thể hồn thiện nâng cấp sản phẩm tốt nữa, phù hợp với nhu cầu thị trường Cuối cùng, nhóm em xin chúc thầy thật nhiều sức khỏe gặp nhiều may mắn Nhóm em xin chân thành cảm ơn! Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa: Công nghệ thông tin Bộ mơn: Cơng nghệ phần mềm ĐỀ CƯƠNG KHĨA LUẬN TỐT NGHIỆP Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng App đọc truyện tranh Mobile Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung Nội dung thực hiện: Lý thuyết: - Flutter (Android App): BloC Pattern - Web API: + ASP.NET Core + JWT authentication, ASP.NET Identity + SQL Server, Entity Framework + Fluent API, Fluent Validation + Firebase, Caching, Cloudinary, SMTP Send Mail, Twilio - Web Management + ASP.NET Core MVC + Razor Page + Elfinder - Deployment + Config IIS Server + Config DNS + Trỏ Domain + Public IP, Firewall Thực hành: - Áp dụng Entity Framework để giao tiếp với sở liệu - Sử dụng Fluent API để tạo quan hệ Entity Framework - Fluent Validation dùng để validation liệu từ request - Sử dụng Identity Framework - Sử dụng JWT Authentication Authorization - Sử dụng Elfinder để quản lý file server - Sử dụng Flutter để xây dựng giao diện ứng dụng mobile - Xây dụng cấu trúc giao diện theo BloC Pattern - Xây dựng chức sau cho sản phẩm ❖ Administrator Website ▪ Đăng nhập, đăng xuất ▪ Quản lý role (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp) ▪ Assign role cho user (thêm / xóa / khóa / mở khóa / thơng tin chi tiết / resend mail confirmation) ▪ Dashboard cho role: o Role admin: + Card thống kê (revenue, comics, chapters, reader, creator, genres, author, artists, followed, viewed) + Danh sách thống kê top người đọc dùng tiền nạp vào hệ thống để mua truyện [ngày, tháng, năm] + Danh sách thống kê top người đọc nạp tiền nạp vào hệ thống để mua truyện [ngày, tháng, năm] + Biểu đồ thống kê số người dùng tháng [năm] + Biểu đồ phân tích nhóm tuổi dùng ứng dụng đọc truyện tranh + Biểu đồ thống kê số comics tháng [năm] + Biểu đồ phân tích giới tính dùng ứng dụng đọc truyện tranh + Danh sách nhà sáng tạo nội dung có nhiều lượt view + Danh sách nhà sáng tạo nội dung có doanh thu cao o Role team-members: + Card thống kê (comics, chapters , genres, author, artists) + Danh sách thống kê top người đọc dùng tiền nạp vào hệ thống để mua truyện [ngày, tháng, năm] + Danh sách thống kê top người đọc nạp tiền nạp vào hệ thống để mua truyện [ngày, tháng, năm] + Biểu đồ thống kê số người dùng tháng [năm] + Biểu đồ thống kê số comics tháng [năm] + Danh sách nhà sáng tạo nội dung có nhiều lượt view o Role creator: + Card thống kê (comics, chapters , followed, viewed, revenue) + Biểu đồ thống kê doanh thu creator theo [ngày, tháng, năm] + Danh sách truyện creator có nhiều view + Danh sách truyện creator có nhiều follow + Danh sách user mua nhiều chương truyện creator + Biểu đồ thống kê số comics tạo tháng ▪ Cập nhật avatar, đổi thông tin cá nhân, đổi mật ▪ Quản lý comics (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / comments / thông tin chi tiết) ▪ Quản lý chapter (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / thơng tin chi tiết) ▪ Quản lý genres (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / thông tin chi tiết) ▪ Quản lý artists (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / thông tin chi tiết) ▪ Quản lý authors (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / thông tin chi tiết) ▪ Quản lý notifications cấp hệ thống (thêm / sửa / xóa / khơi phục/ tìm kiếm / xếp / thơng tin chi tiết) ▪ Tool crawl comics ▪ Quản lý user (role reader) upgrade role (role creator) (phê duyệt / trao đổi / từ chối / thông tin chi tiết) ▪ Quản lý config service, price (sửa / tìm kiếm / xếp / thông tin chi tiết) ▪ Quản lý account (những user reader creator) (xóa / comment / khóa / mở khóa / xóa / khơi phục / thông tin chi tiết) ▪ Quản lý account (những user team members) (xóa / khóa / khơi phục / thông tin chi tiết) ▪ Quán lý account (những user admin) (thông tin chi tiết) ▪ Quản lý lịch sử tốn (support / thơng tin chi tiết) ▪ Quán lý lịch sử dùng COIN (thông tin chi tiết) ❖ Mobile Application ▪ Đăng nhập, đăng xuất ▪ Thay đổi thông tin cá nhân ▪ Thêm số điện thoại vào tài khoản ▪ Đọc truyện ▪ Xem chi tiết truyện ▪ Theo dõi truyện ▪ Thống kê truyện theo dõi ▪ Xem lịch sử đọc truyện ▪ Đánh giá truyện ▪ Bình luận truyện ▪ Tìm kiếm truyện theo tên ▪ Xem danh sách truyện theo thể loại ▪ Thanh toán PayPal ZaloPay ▪ Xem lịch sử toán lịch sử mua truyện ▪ Nhận xem thông báo MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu ● Đối tượng nghiên cứu ● Phạm vi nghiên cứu Phân tích cơng trình có liên quan Kết dự kiến đạt PHẦN NỘI DUNG Chương Cơ sở lý thuyết Chương Khảo sát, phân tích, thiết kế Chương Mơ hình hóa u cầu Chương Thiết kế phần mềm Chương Thiết kế giao diện xử lý Chương Cài đặt kiểm thử ứng dụng PHẦN KẾT LUẬN Những kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN NHĨM CƠNG VIỆC CƠNG VIỆC NGƯỜI THỜI THỰC HIỆN GIAN Tìm hiểu Flutter (UI Framwork), Tìm hiểu cơng nghệ BloC pattern Tìm hiểu ASP.NET Core (JWT, Entity Framework, Identity, Fluent 01/02/2023 10/02/2023 API), ASP.NET MVC Phân tích Phân tích trạng nhu cầu đọc 11/02/2023 trạng truyện mobile 17/02/2023 Xác định yêu cầu, chức năng, use- 18/02/2023 case… 23/02/2023 Thiết kế Thiết kế database 24/02/2023 01/03/2023 Thiết kế giao diện management 02/03/2023 client 06/03/2023 Xây dựng Xây dựng API cho người dùng 07/03/2023 Web API phần quản lý 14/05/2023 Xây dựng giao diện trang chủ Xây dựng giao diện tìm kiếm truyện Xây dựng giao diện đăng ký, đăng 07/03/2023 12/03/2023 13/03/2023 16/03/2023 17/03/2023 Xây dựn ứng nhập 25/03/2023 dụng android Xây dựng giao diện thông tin người 26/03/2023 dùng 30/03/2023 Xây dựng giao diện xem lịch sử đọc 01/04/2023 truyện 05/04/2023 Xây dựng giao diện chi tiết truyện 06/04/2023 12/04/2023 10 17 Phân trang Button Khi nhấn vào, người dùng phân theo trang (page) để hiển thị Bảng 45 Mô tả hình quản lý admin accounts 140 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 6.1 Cài đặt 6.1.1 Back-end (API) Yêu cầu phần mềm ● Phần mềm Visual Studio 2022 trở lên ● ASP.NET Core (.NET 6.0) Các bước cài đặt API ● Tải giải nén thư mục chứa Project Backend ● Mở Project Visual Studio 2022 Hình 73 Cài đặt backend Tiến hành chạy 141 Cách 1: Bước 1: Click chuột phải vào project “HikiComic.API” -> Chọn Set as Startup Project Hình 74 Cài đặt API Bước 2: Click vào button “Start Without Debugging” nhấn tổ hợp phím Ctrl + F5 Cách 2: Bước 1: Tìm đến thư mục chứa project “HikiComic.API” -> Gõ “cmd” đường dẫn Bước 2: Nhập vào “cmd” câu lệnh “dotnet run” nhấn phím “enter” 142 6.1.2 Mobile ● Cài đặt Flutter từ trang chủ thức (version 3.3.10 stable channel): Hình 75 Màn hình trang tải Flutter cho Windows Website: https://docs.flutter.dev/get-started/install ● Cài đặt biến môi trường để chạy Flutter: 143 Hình 76 Tạo biến môi trường ● Cài đặt trình biên dịch Visual Studio Code: Hình 77 Cài trình biên dịch Visual Studio Code ● Cài đặt extension cho Flutter: 144 Hình 78 Cài extension cho Flutter ● Tải source code đính kèm file báo cáo: cửa sổ terminal VS Code ta chạy câu lệnh flutter pub get: Hình 79 Mở source code • Chạy ứng dụng máy thật: - Chạy backend API trước, - Kết nối điện thoại máy tính, bật chế độ debugged, 145 - Mở cmd, cd đến thư mục “C:\Program Files (x86)\Android\androidsdk\platform-tools” chạy lệnh “adb reverse tcp:7068 tcp:7068” để điện thoại có thể truy cập vào localhost:7068 Hình 80 Chạy lệnh “adb reverse tcp:7068 tcp:7068” - Tiến hành chạy ứng dụng HikiComic thiết lập sẵn: 146 Hình 81 Chạy ứng dụng HikiComic 6.1.3 Web Management Cách chạy tương tự Backend (API) mục 5.1.1 Thay chọn “Set as Startup Project” “HikiComic.API” chọn project “HikiComic.Management” 6.2 Kiểm thử ứng dụng 6.2.1 Các chức quản lý tài khoản STT Testcase Kết mong đợi Kết Chức đăng nhập Đăng nhập thành công, phân quyền Pass Chức đăng ký Đăng ký thành công Pass Đổi mật Đổi thông tin cá nhân Đổi mật thành công người dùng cung cấp mật cũ Thông tin cá nhân người dùng thay đổi thành công Pass Pass 147 Avatar thay đổi theo ý muốn Đổi avatar người dùng Pass Admin khóa tài khoản người dùng, Khóa người dùng người dùng không thể đăng nhập vào Pass ứng dụng Mở khóa người dùng Xóa người dùg Admin tắt khóa người dùng, người dùng có thể đăng nhập vào ứng dụng Admin xóa tài khoản người dùng, người dùng không thể đăng nhập vào ứng dụng Pass Pass Bảng 46 Kiểm thử chức quản lý tài khoản 6.2.2 Các chức quản lý truyện tranh, chương truyện STT Kết mong đợi Testcase Thêm truyện tranh Chỉnh sửa truyện tranh Thêm thành công truyện tranh Danh sách truyện tranh cập nhật Chỉnh sửa thành công truyện tranh Thông tin truyện cập nhật Kết Pass Pass Xóa truyện tranh thành cơng Bộ truyện Xóa truyện tranh tranh bị xóa khơng có hiển thị phía Pass người dùng Khơi phục truyện tranh bị xóa Bộ Khơi phục truyện tranh truyện tranh hiển thị lại phía Pass người dùng Thông tin chi tiết truyện tranh Hiển thị thông tin chi tiết truyện tranh Pass Thêm thành công chương truyện Danh Thêm chương truyện sách chương truyện truyện Pass cập nhật 148 Chỉnh sửa chương Chỉnh sửa nội dung chương truyện truyện cập nhật lên phía người dùng Pass Xóa thành cơng chương truyện Phía Xóa chương truyện người dùng không thấy chương Pass truyện bị xóa 10 Khơi phục chương Khơi phục chương truyện bị xóa Phía truyện Thơng người dùng thấy lại chương truyện tin chi tiết Hiển thị đầy đủ thông tin chương chương truyện truyện Pass Pass Bảng 47 Kiểm thử chức quản lý truyện tranh, chương truyện 6.2.3 Các chức quản lý danh mục, tác giả STT Kết mong đợi Testcase Thêm danh mục Thêm danh mục thành công Danh mục hiển thị ứng dụng Kết Pass Chỉnh sửa thông tin danh mục thành Chỉnh sửa danh mục công Danh mục hiển thị ứng Pass dụng Xóa danh mục Xóa danh mục thành khơng Danh mục không hiển thị ứng dụng Pass Khôi phục danh mục bị xóa thành Khơi phục danh mục công Danh mục hiển thị ứng Pass dụng Xem chi tiết danh mục Thêm tác giả Xem thông tin chi tiết ứng dụng thành công Thêm tác giả thành công Tác giả hiển thị ứng dụng Pass Pass 149 Chỉnh sửa tác giả Xóa tác giả Khơi phục tác giả Chỉnh sửa tác giả thành công Tác giả hiển thị ứng dụng Xóa tác giả thành công Tác giả hiển thị ứng dụng Pass Pass Khơi phục tác giả xóa thành cơng Tác giả hiển thị ứng dụng Bảng 48 Kiểm thử chức quản lý danh mục, tác giả 150 PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 1.1 Về kiến thức Về kiến thức, thành viên nhóm học hỏi trau dồi thêm nhiều cho thân Về chun mơn: ● Hiểu rõ cách viết APIs phát triển server back-end ASP Net Core hệ quản trị sở liệu SQL Server ● Tiếp cận tích hợp dịch vụ khác từ bên thứ ba Firebase, Twilio, Facebook, Google, Cloudinary ● Triển khai phần mềm lên Cloud, Hosting, trỏ Domain, config IIS Server, … ● Phát triển phần mềm Flutter (Dart) để viết native apps tương thích với platform khác trang web ● Học thêm cách để triển khai server, web app, mobile app lên cơng cụ khác để người dùng có thể sử dụng ● Học hỏi debug để tìm lỗi giải lỗi xảy trình phát triển phần mềm ● Học tiếp thu nhiều kiến thức Về kỹ năng: ● Rèn luyện kỹ làm việc nhóm, giải vấn đề chung ● Tư phản biện, kỹ giao tiếp thành viên nhóm ● Kỹ đọc tài liệu tiếng anh, tự học, tự nghiên cứu để giải khó khăn ● Kỹ quản lý thời gian để thực tiến độ mà không bị ảnh hưởng nhiều yếu tố khác ● Kỹ kiểm thử phần mềm để đảm bảo chất lượng ứng dụng 1.2 Về đề tài Sau thực đề tài nhóm có được: ● Ứng dụng đọc truyện tranh HikiComic di động ● Website danh cho admin hệ thống HikiComic ● Server quản lý liệu cho hệ thống HikiComic 151 ● Các tài liệu báo cáo cho hệ thống HikiComic ● Sơ đồ, lược đồ miêu tả hệ thống HikiComic 1.3 Về kinh nghiệm Về mặt kinh nghiệm: ● Kinh nghiệm lập trình ứng dụng di động ● Kinh nghiệm lập trình Server ASP.Net Core ● Kinh nghiệm phát triển, triển khai API Database kiểm thử phần mềm ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 2.1 Ưu điểm ● Hệ thống FE viết source code nhờ có hổ trợ Flutter khiến cho việc cài đặt dễ dàng 2.2 Nhược điểm ● Vì cịn cơng nghệ non trẻ, Flutter cịn có nhiều tính khơng tối ưu, package thư viện nhiều hạn chế chưa phổ biến ● Vẫn cịn chưa đầy đủ tính để tăng trải nghiệm người dùng THUẬN LỢI ● Dễ dàng tiếp cận phát triển phần mềm có kinh nghiệm lập trình ASP NET Core SQL Server KHÓ KHĂN ● Flutter cơng nghệ nên việc tìm kiếm giải pháp lời giải cho toán phát sinh trình phát triền phần mềm gây trở ngại cho nhóm ● Kinh nghiệm kỹ nhóm cịn thiếu sót Cách thức làm việc cịn nhiều hạn chế Việc dẫn đến khơng khó khăn giải vấn đề gặp phải trình thực đề tài HƯỚNG PHÁT TRIỂN Trong trình thực đề tài, mặt thời gian kiến thức kinh nghiệm cịn thiếu, việc khiến cho nhóm gặp nhiều trở ngại việc thực hóa nhiều tính cho hệ thống, nhóm đề hướng phát triển cho hệ thống sau: 152 ● Chỉnh UI/UX để tăng thêm trải nghiệm người dùng, trách trường hợp re render full screen ● Phát triển tính như: o Forum để người sử dụng app có thể giao lưu với o Nhiệm vụ ngày để tích lũy COIN o Tích hợp vài thuật toán phức tạp recommend system Collaborative Filtering để gợi ý truyện tranh cho người dùng ● Tích hợp microservice vào hệ thống o Dùng Redis để cache xác định chiến lược caching cho hệ thống o Dùng Kafka RabbitMQ để triển khai messaging queue systems o Dùng Ocelot để triển khai API Gateway nhằm đáp ứng việc bảo mật, xác thực, kiểm soát, giám sát, caching API o Dùng Identity Server để phục vụ khả mở rộng hệ thống ● Cải thiện hiệu suất, sửa lỗi ứng dụng công nghệ vào đề tài 153 TÀI LIỆU THAM KHẢO [1] Dart programming language | Dart https://dart.dev [2] Flutter - Build apps for any screen https://flutter.dev/ [3] Giới thiệu Flutter - w3seo, Dục Đồn Trình, 29/04/2021 https://websitehcm.com/gioi-thieu-ve-flutter/ [4] Bloc State Management Library https://bloclibrary.dev/ [5] Tutorial: Create a web API with ASP.NET Core, Rick Anderson and Kirk Larkin, 12/07/2022, https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore6.0&tabs=visual-studio 154