Xây dựng website xem phim trực tuyến

MỤC LỤC DANH MỤC HÌNH ẢNH 11 DANH MỤC BẢNG BIỂU 13 PHẦN MỞ ĐẦU 16 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 16 MỤC TIÊU CỦA ĐỀ TÀI 16 Đối tượng phạm vi nghiên cứu 16 Kết dự kiến đạt 16 Phương pháp nghiên cứu 17 Bố cục báo cáo 17 PHẦN NỘI DUNG 18 CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 18 1.1 KHẢO SÁT MỘT SỐ TRANG WEB 18 1.1.1 Phimmoi (http://www.phimmoi.net ) [1] 18 1.1.2 Bilutv (https://www.bilutv.org/) [2] 19 1.1.3 Zing TV (https://tv.zing.vn/) [3] 20 1.1.4 Netflix (https://www.netflix.com/) [4] 21 1.1.5 Motphim (https://motphim.net/) [5] 22 1.2 KẾT LUẬN VỀ NHỮNG TIÊU CHÍ WEBSITE CẦN ĐẠT ĐƯỢC 23 1.2.1 Những ưu điểm cần học 23 1.2.2 Những nhược điểm cần khắc phục 23 CHƯƠNG 2: TIẾP NHẬN VÀ MƠ HÌNH HĨA YẾU CẦU 24 2.1 USECASE DIAGRAM 24 2.2 CHI TIẾT CÁC ACTOR 25 2.2.1 Guest 25 2.2.2 Member 31 2.2.3 Member Vip 35 2.2.4 Admin 37 2.3 SƠ ĐỒ LUỒNG DỮ LIỆU VÀ CƠ SỞ DỮ LIỆU CÁC NGHIỆP VỤ 45 2.3.1 Các nghiệp vụ Guest 45 2.3.2 Các nghiệp vụ Member 57 2.3.3 Các nghiệp vụ Member Vip 65 2.3.4 Các nghiệp vụ Admin 66 CHƯƠNG 3: THIẾT KẾ CƠ SỞ DỮ LIỆU 89 3.1 3.1.1 CƠ SỞ DỮ LIỆU CUỐI CÙNG 89 CƠ SỞ DỮ LIỆU 89 MÔ TẢ CƠ SỞ DỮ LIỆU 89 3.1.2 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 94 4.1 CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST 94 4.1.1 MÀN HÌNH ĐĂNG NHẬP 94 4.1.2 MÀN HÌNH ĐĂNG KÝ TÀI KHOẢN 96 4.1.3 MÀN HÌNH TRANG CHỦ 98 4.1.4 MÀN HÌNH TÌM KIẾM 100 4.1.5 MÀN HÌNH CHI TIẾT PHIM 102 4.2 CÁC MÀN HÌNH GIAO DIỆN CỦA MEMBER 104 MÀN HÌNH XEM VÀ UPDATE VIP 104 4.2.1 4.3 CÁC MÀN HÌNH GIAO DIỆN CỦA ADMIN 107 4.3.1 MÀN HÌNH GIAO DIỆN ĐĂNG NHẬP ADMIN 107 4.3.2 MÀN HÌNH GIAO DIỆN QUẢN LÝ CHỦ ĐỀ PHIM 109 4.3.3 MÀN HÌNH GIAO DIỆN QUẢN LÝ PHIM 111 4.3.4 MÀN HÌNH GIAO DIỆN CHI TIẾT PHIM 112 4.3.5 MÀN HÌNH GIAO DIỆN QUẢN LÝ NGƯỜI DÙNG 114 4.3.6 MÀN HÌNH GIAO DIỆN QUẢN LÝ DIỄN VIÊN 116 CHƯƠNG 5: LẬP TRÌNH 118 5.1 NGƠN NGỮ LẬP TRÌNH JAVASCRIPT, REACT.JS, REDUX-SAGA VÀ JSON WEB TOKEN (JWT) 118 5.1.1 JavaScript [6] 118 5.1.2 React.js [7] 118 5.1.3 Redux-Saga [8] 120 5.1.4 JSON Web Token [9] 120 5.2 NGƠN NGỮ LẬP TRÌNH JAVA, SPRING FRAMEWORK, RESTFULL API CRUD, SPRING SECURITY VÀ SPRING JPA 121 5.2.1 Java [10] 121 5.2.2 Spring Framework [11] 121 5.2.3 REST API [12] 123 5.2.4 Spring Security [13] 123 5.2.5 Spring JPA [14] 123 5.3 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL [15] 124 5.4 SƠ ĐỒ LỚP [16] 126 5.5 MÔ TẢ CHI TIẾT TỪNG LỚP 127 5.5.1 Class GenreEntity 127 5.5.2 Class UserEntity 127 5.5.3 Class Comment 127 5.5.4 Class Movie 128 5.5.5 Class EpisodeId 128 5.5.6 Class SourceEntity 128 5.5.7 Class CharacterEntity 129 5.5.8 Class ActorEntity 129 5.5.9 Class FavoriteEntity 129 5.5.10 Class EpisodeEntity 129 5.5.11 Class ReviewEntity 130 5.5.12 Class RoleEntity 130 5.5.13 Class ActorService 130 5.5.14 Class CommentService 131 5.5.15 Class GenreService 131 5.5.16 Class MovieService 132 5.5.17 Class FavoriteService 133 5.5.18 Class UserService 133 5.5.19 Class CharacterService 133 5.5.20 Class EpisodeService 134 5.5.21 Class ReviewService 135 5.5.22 Class SourceService 135 TRÍCH DẪN CƠNG NGHỆ HAY 135 5.6 5.6.1 ÁP DỤNG REDUX ĐỂ QUẢN LÝ STATE 135 5.6.2 ÁP DỤNG REDUX-SAGA ĐỂ XỬ LÝ BẤT ĐỒNG BỘ 137 CHƯƠNG 6: KIỂM THỬ PHẦN MỀM 139 6.1 KẾ HOẠCH KIỂM THỬ VÀ QUY TRÌNH KIỂM THỬ 139 6.2 QUY TRÌNH THIẾT KẾ KIỂM THỬ 141 6.3 QUY TRÌNH CHẠY BỘ KIỂM THỬ 142 KẾT LUẬN 143 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 143 ƯU ĐIỂM 143 NHƯỢC ĐIỂM 143 HƯỚNG PHÁT TRIỂN 144 10 DANH MỤC HÌNH ẢNH Hình 1.1: Trang chủ website phimmoi 18 Hình 1.2: Trang chủ website bilutv 19 Hình 1.3: Trang chủ website zing tv 20 Hình 1.4: Trang chủ website netflix 21 Hình 1.5: Trang chủ motphim 22 Hình 2.1: Usecase diagram 246 Hình 2.2: Biểu mẫu HomePage 28 Hình 2.3: Biểu mẫu Search 28 Hình 2.4: Biểu mẫu Register 29 Hình 2.5: Biểu mẫu Login 29 Hình 2.6: Biểu mẫu LsFilmsCatalog 30 Hình 2.7: Biểu mẫu DetailFilm 30 Hình 2.8: Biểu mẫu WatchFilm 31 Hình 2.9: Biểu mẫu Logout 33 Hình 2.10: Biểu mẫu Comment 34 Hình 2.11: Biểu mẫu FavoriteFilms 35 Hình 2.12: Biểu mẫu mẫu Update VIP 35 Hình 2.13: Biểu mẫu đổi chất lượng phim 37 Hình 2.14: Biểu mẫu-QLPhim 41 Hình 2.15: Biểu mẫu QLAds 41 Hình 2.16: Biểu mẫu thống kê 42 Hình 2.17: Biểu mẫu QL thành viên 43 Hình 2.18: Biểu mẫu QL danh mục phim 44 Hình 2.19: Biểu mẫu HomePage Admin 44 Hình 2.20: Biểu mẫu ChangePassword 45 Hình 2.21: Biểu mẫu quản lý bình luận 45 Hình 2.22: Sequence diagram tìm phim 48 Hình 2.23: Sequence diagram xem phim 49 Hình 2.24: Sequence diagram xem phim theo danh mục 50 Hình 2.25: Sequence diagram đăng nhập 54 11 Hình 2.26: Sequence diagram quên mật 56 Hình 2.27: sequence diagram toán 58 Hình 2.28: Sequence diagram thêm phim u thích 62 Hình 2.29: Sequence diagram sửa phim 74 Hình 2.30: Sequence diagram quản lý bình luận 86 Hình 2.31: Sequence diagram xố bình luận 87 Hình 3.1: Cơ sở liệu 89 Hình 4.1: Thiết kế giao diện đăng nhập 94 Hình 4.2: Thiết kế xử lý giao diện đăng nhập 95 Hình 4.3: Thiết kế giao diện đăng ký 96 Hình 4.4: Xử lý giao diện đăng ký 98 Hình 4.5: Giao diện trang chủ 98 Hình 4.6: Xử lý giao diện trang chủ 99 Hình 4.7: Thiết kế giao diện danh tìm 100 Hình 4.8: Thiết kế xử lý tìm kiếm 101 Hình 4.9: Thiết kế giao diện chi tiết phim 102 Hình 4.10: Thiết kế xử lý chi tiết phim 103 Hình 4.11: Giao diện Member 104 Hình 4.12: Xử lý giao diện member 105 Hình 4.13: Giao diện đăng nhập Admin 107 Hình 4.14: Xử lý giao diện đăng nhập 108 Hình 4.15: Giao diện quản lý chủ đề phim 109 Hình 4.16: Xử lý giao diện quản lý chủ đề phim 110 Hình 4.17: Giao diện quản lý phim 111 Hình 4.18: Xử lý giao diện quản lý phim 111 Hình 4.19: Giao diện chi tiết phim 112 Hình 4.20: Xử lý giao diện chi tiết phim 113 Hình 4.21: Giao diện quản lý người dùng 114 Hình 4.22: Xử lý giao diện quản lý người dùng 115 Hình 4.23: Xử lý giao diện quản lý diễn viên 116 Hình 4.24: Xử lý giao diện quản lý diễn viên 116 12 Hình 5.1: Kiến trúc JPA 124 Hình 5.2: Class diagram Entity 126 Hình 5.3: Class diagram Service 126 Hình 5.4 5.5: Store Reducer 136 Hình 5.6: Saga tổng để quản lý saga chức khác 137 Hình 5.7: Ví dụ generator function 138 Hình 5.8 5.9: Áp dụng redux redux-saga vào project 138 Hình 6.1: Mẫu testplan 139 Hình 6.2: Mẫu TestCase Cover 140 Hình 6.3: Mẫu TestCase chi tiết 140 Hình 6.4: Mẫu báo cáo TestCase 141 Hình 6.5: Quy trình kiểm thử 141 Hình 6.6: Quy trình chạy kiểm thử 142 DANH MỤC BẢNG BIỂU Bảng 2.1: Bảng nghiệp vụ guest 25 Bảng 2.2: Bảng quy định guest 26 Bảng 2.3: Bảng nghiệp vụ member 31 Bảng 2.4: Bảng quy định member 32 Bảng 2.5: Bảng nghiệp vụ member vip 36 Bảng 2.6: Bảng quy định member vip 36 Bảng 2.7: Bảng nghiệp vụ admin 37 Bảng 2.8: Bảng quy định admin 38 Bảng 3.1: Bảng mô tả liệu Movie 89 Bảng 3.2: Bảng mô tả liệu Genre 90 Bảng 3.3: Bảng mô tả liệu Genre_movie 90 Bảng 3.4: Bảng mô tả liệu character 90 Bảng 3.5: Bảng mô tả liệu Actor 90 Bảng 3.6: Bảng mô tả liệu Source 91 Bảng 3.7: Bảng mô tả liệu Favorite 91 Bảng 3.8: Bảng mô tả liệu User 91 Bảng 3.9: Bảng mô tả liệu Comment 92 13 Bảng 3.10: Bảng mô tả liệu Review 92 Bảng 3.11: Bảng mô tả liệu Episode 92 Bảng 3.12: Bảng mô tả liệu User_roles 93 Bảng 3.13: Bảng mô tả liệu Roles 93 Bảng 4.1: Bảng mô tả hình đăng nhập 94 Bảng 4.2: Bảng mô tả danh sách xử lý đăng nhập 94 Bảng 4.3: Bảng mơ tả hình đăng ký 96 Bảng 4.4: Bảng mô tả danh sách xử lý đăng ký 98 Bảng 4.5: Bảng mơ tả hình trang chủ 98 Bảng 4.6: Bảng mô tả danh sách xử lý trang chủ 100 Bảng 4.7: Bảng mơ tả hình tìm kiếm 100 Bảng 4.8: Bảng mô danh sách xử lý tìm kiếm 101 Bảng 4.9: Bảng mơ tả hình chi tiết phim 102 Bảng 4.10: Bảng mô tả danh sách xử lý hình chi tiết phim 103 Bảng 4.11: Bảng mô tả hình Member 104 Bảng 4.12: Bảng mô danh sách xử lý hình Member 106 Bảng 4.13: Bảng mơ tả hình đăng nhập Admin 107 Bảng 4.14: Bảng mô tả danh sách xử lý hình đăng nhập 108 Bảng 4.15: Bảng mơ tả hình quản lý chủ đề phim 109 Bảng 4.16: Bảng mô tả danh sách xử lý hình quản lý chủ đề phim 110 Bảng 4.17: Bảng mơ tả hình quản lý phim 111 Bảng 4.18: Bảng mô tả danh sách xử lý hình quản lý phim 112 Hình 4.19: Giao diện chi tiết phim 113 Bảng 4.20: Bảng mô tả danh sách xử lý chi tiết phim 114 Bảng 4.21: Bảng mơ tả hình quản lý người dùng 114 Bảng 4.22: Bảng mô tả danh sách xử lý quản lý người dùng 115 Bảng 4.23: Bảng mơ tả hình quản lý diễn viên 116 Bảng 4.24: Bảng mô tả danh sách xử lý quản lý diễn viên 117 Bảng 5.1: Attribute class GenreEntity 127 Bảng 5.2: Method class GenreEntity 127 Bảng 5.3: Attribute class UserEntity 127 14 Bảng 5.4: Attribute class Comment 127 Bảng 5.5: Attribute Movie 128 Bảng 5.6: Method class Movie 128 Bảng 5.7: Attribute class EpisodeId 128 Bảng 5.8: Attribute class SourceEntity 128 Bảng 5.9: Attribute class CharacterEntity 129 Bảng 5.10: Attribute class ActorEntity 129 Bảng 5.11: Attribute class FavoriteEntity 129 Bảng 5.12: Attribute class EpisodeEntity 130 Bảng 5.13: Attribute class ReviewEntity 130 Bảng 5.14: Attribute class RoleEntity 130 Bảng 5.15: Attribute class ActorService 130 Bảng 5.16: Method class ActorService 130 Bảng 5.17: Attribute class CommentService 131 Bảng 5.18: Method class CommentService 131 Bảng 5.19: Attribute class GenreService 131 Bảng 5.20: Method class GenreService 132 Bảng 5.21: Attribute class MovieService 132 Bảng 5.22: Method class MovieService 132 Bảng 5.23: Attribute class FavoriteService 133 Bảng 5.24: Method class FavoriteService 133 Bảng 5.25: Attribute class UserService 133 Bảng 5.26: Method class UserService 133 Bảng 5.27: Attribute class CharacterService 133 Bảng 5.28: Method class CharacterService 134 Bảng 5.29: Attribute class EpisodeService 134 Bảng 5.30: Method class EpisodeService 134 Bảng 5.31: Attribute class ReviewService 135 Bảng 5.32: Method class ReviewService 135 Bảng 5.33: Attribute class SourceService 135 Bảng 5.34: Method class SourceService 135 15 PHẦN MỞ ĐẦU TÍNH CẤP THIẾT CỦA ĐỀ TÀI Tốc độ phát triển xã hội ngày nhanh Công nghệ ngày phát triển khiến người ta ngày bận rộn Tuy nhiên nhu cầu giải trí người nhu cầu cần thiết xem phim số nhu cầu giải trí người Tạo điều kiện cho người bận rộn thời gian để để rạp xem phim muốn tận dụng thời gian nghỉ ngơi để xem phim giải trí Để nắm bắt xu hướng tiếp cận vấn đề đó, nhóm định chọn đề tài “Xây dựng website xem phim trực tuyến” làm đề tài nghiên cứu đồng thời ứng dụng thực tế MỤC TIÊU CỦA ĐỀ TÀI - Đề tài đời với mục đích giúp sinh viên tổng hợp lại kiến thức tiếp thu trình, đồng thời có nhìn tổng quan ngành lập trình web - Là hội để sinh viên tìm hiểu cơng nghệ ứng dụng chúng vào thưc tiễn - Xây dựng website giải trí cho người hình thức xem phim trực tuyến Cụ thể có chức sau: o Đăng nhập/ đăng kí với email, password Facebook, Google, o Xem phim o Bình luận o Tìm kiếm phim o Quản lý danh mục phim, quản lý phim, quản lý người dùng o Xem hồ sơ cá nhân nâng cấp VIP o Có đám mây để lưu trữ phim Đối tượng phạm vi nghiên cứu Đề tài phù hợp với tất người với độ tuổi, trình độ học vấn, ngành nghề, có nhu cầu cải thiện vốn từ vựng Kết dự kiến đạt 16 - Xây dựng website học tiếng Anh theo dạng flashcard sử dụng công nghệ ReactJS Java Core - Website phải có mục cho người dùng sử dụng admin để quản lý tất liệu người dùng Phương pháp nghiên cứu - Phương pháp thực nghiệm khoa học - Phương pháp phân tích tổng hợp Bố cục báo cáo Báo cáo dự kiến gồm phần chương: - Phần mở đầu - Phần nội dung o Chương 1: Khảo sát trạng o Chương 2: Tiếp nhận mơ hình hóa yêu cầu o Chương 3: Thiết kế sở liệu o Chương 4: Thiết kế giao diện xử lý o Chương 5: Lập trình - o Chương 6: Kiểm thử phần mềm Phần kết luận 17 Bảng 5.12: Attribute class EpisodeEntity Tên episodeId movieEpisode serialVersionUID Kiểu liệu EpisodeId Movie long Ghi readonly 5.5.11 Class ReviewEntity 5.5.11.1 Atrributes Bảng 5.13: Attribute class ReviewEntity Tên id content reviewMovie serialVersionUID reviewUser Create_at Score Kiểu liệu int String Movie long UserEntity LocalDataTime Float Ghi readonly 5.5.12 Class RoleEntity 5.5.12.1 Atrributes Bảng 5.14: Attribute class RoleEntity Tên Id Name User Kiểu liệu Int RoleNameEnum UserEntity Ghi 5.5.13 Class ActorService 5.5.13.1 Atrributes Bảng 5.15: Attribute class ActorService Tên actorRepository characterService imagaUtil modelMapper Kiểu liệu ActorRepository IcharacterService ImageUtil ModelMapper Ghi 5.5.13.2 Methods Bảng 5.16: Method class ActorService Tên phương thức Add deleteList deleteOne Kiểu liệu vào ActorForm List Int Kiểu liệu Ghi Void Void Void 130 findById Update getList Int ActorForm Int,int ActorDTO Void Page 5.5.14 Class CommentService 5.5.14.1 Atrributes Bảng 5.17: Attribute class CommentService Tên commentRepository modelMapper movieRepository userRepository Kiểu liệu CommentRepository ModelMapper MovieRepository UserRepository Ghi 5.5.14.2 Methods Bảng 5.18: Method class CommentService Tên phương thức Kiểu liệu vào deleteOne Int findByMovieId Int , Int, int addComment CommentDTO deleteByMovieId Int findByMovieIdAndUserId Int , Int, int, int findByUserId Int , Int, int deleteList List Kiểu liệu Ghi Void Page Void Void Page Page Void 5.5.15 Class GenreService 5.5.15.1 Atrributes Bảng 5.19: Attribute class GenreService Tên genreRepository modelMapper Kiểu liệu GenreRepository ModelMapper Ghi Readonly Readonly 131 5.5.15.2 Methods Bảng 5.20: Method class GenreService Tên phương thức Create Delete findAll findById findByMovieId findByName Update Kiểu liệu Kiểu liệu Ghi vào GenreDTO Boolean Int Int List Int Optional Int List String List GenreDTO GenreEntity 5.5.16 Class MovieService 5.5.16.1 Atrributes Bảng 5.21: Attribute class MovieService Tên genreRepository movieRepository characterService commentService dateFormat genreService imageUtil episodeService modelMapper reviewService Kiểu liệu GenreRepository MovieRepository ICharacterService ICommentService DateFormatUtil IGenreService ImageUtil IEpisodeService ModelMapper IReviewService Ghi readonly readonly readonly readonly readonly readonly readonly readonly readonly readonly 5.5.16.2 Methods Bảng 5.22: Method class MovieService Tên phương thức entityToDto deleteById findByGenre findByPage findById searchCriteria findByTitle updateStatus Save Update updateGenreRelationship Kiểu liệu vào Movie Int Int , Int , Int Int , Int Int String String Int , boolean MovieForm,boolean Int , MovieDTO Int , List Kiểu liệu Ghi MovieDTO Void Page Page MovieDTO List List Void void Boolean Void 132 5.5.17 Class FavoriteService 5.5.17.1 Atrributes Bảng 5.23: Attribute class FavoriteService Tên movieRepository favoriteRepository Kiểu liệu MovieRepository FavoriteRepository Ghi Readonly Readonly 5.5.17.2 Methods Tên phương thức Add Delete Delete DeleteByMovieId findAllByUserId updateCurrentTime deleteByUserId Kiểu liệu vào FavoriteDTO List Int Int Int FavoriteDTO Int Kiểu liệu Ghi Void Void Void Void List void Void Bảng 5.24: Method class FavoriteService 5.5.18 Class UserService 5.5.18.1 Atrributes Bảng 5.25: Attribute class UserService Tên passwordEncoder roleMapper roleReposity userMapper userReposity Kiểu liệu PasswordEncoder RoleMapper RoleReposity UserMapper UserReposity Ghi Readonly Readonly Readonly Readonly Readonly 5.5.18.2 Methods Bảng 5.26: Method class UserService Tên phương thức create getListUser Kiểu liệu vào SignUpRequest String, Pageable finById Int Update UserDTO updateRoleAndStatus UserDTO Kiểu liệu UserDTO Page Ghi UserDTO Void void 5.5.19 Class CharacterService 5.5.19.1 Atrributes Bảng 6.27: Attribute class CharacterService 133 Tên characterReposity roleMapper Kiểu liệu CharacterReposity RoleMapper Ghi 5.5.19.2 Methods Bảng 5.28: Method class CharacterService Tên phương thức addCharacter Delete deleteAll deleteByActor updateRoleAndStatus findByActorId Kiểu liệu vào CharacterDTO Int List Int UserDTO Int findByMovieId Int Kiểu liệu Ghi void Void Void Void void List< CharacterDTO > List< CharacterDTO > 5.5.20 Class EpisodeService 5.5.20.1 Atrributes Bảng 5.29: Attribute class EpisodeService Tên episodeMapper episodeReposity soucreService movieReposity Kiểu liệu EpisodeMapper EpisodeReposity ISoucreService MovieReposity Ghi Readonly Readonly Readonly Readonly 5.5.20.2 Methods Bảng 5.30: Method class EpisodeService Tên phương thức add getListUser Kiểu liệu vào SignUpRequest String, Pageable finById Int Update UserDTO updateRoleAndStatus UserDTO Kiểu liệu UserDTO Page Ghi UserDTO Void void 134 5.5.21 Class ReviewService 5.5.21.1 Atrributes Bảng 5.31: Attribute class ReviewService Tên userReposity reviewReposity movieReposity Kiểu liệu UserReposity ReviewReposity MovieReposity Ghi 5.5.21.2 Methods Bảng 5.32: Method class ReviewService Tên phương thức addReview deleteByMovieId deleteList deleteOne deleteByMovieId findByMovieIdAndUser Id findByUserId Kiểu liệu vào ReviewDTO Int List Int Int Int , Int, int, int Int , Int, int Kiểu liệu Ghi Void Void Void Void Void Page Page 5.5.22 Class SourceService 5.5.22.1 Atrributes Bảng 5.33: Attribute class SourceService Tên sourceMapper sourceReposity Kiểu liệu SourceMapper SourceReposity Ghi 5.5.22.2 Methods Bảng 5.34: Method class SourceService Tên phương thức findByEpisodeIdAndMovie Id Kiểu liệu Kiểu liệu vào Int , Int, int, int Page Ghi 5.6 TRÍCH DẪN CƠNG NGHỆ HAY 5.6.1 ÁP DỤNG REDUX ĐỂ QUẢN LÝ STATE Do yêu cầu cho ứng dụng single-page sử dụng Javascript ngày trở lên phức tạp code chúng em phải quản lý nhiều state Với Redux, State ứng dụng giữ nơi gọi Store Component truy cập 135 state mà chúng muốn từ Store thông qua lệnh setState Reducer nên việc quản lý State trở nên dễ dàng Hình 5.4 hình 5.5: Store Reducer 136 5.6.2 ÁP DỤNG REDUX-SAGA ĐỂ XỬ LÝ BẤT ĐỒNG BỘ - Vấn đề : tất xử lý REDUCER phải synchronous pure tức xử lý đồng Nhưng ứng dụng thực tế cần nhiều ví dụ asynchronous (thực số việc gọi hàm AJAX để fetch liệu cần đợi kết kết không trả được) impure (thực lưu, đọc liệu bên lưu liệu ổ cứng hay đọc cookie từ trình duyệt… cần đợi kết quả) - Giải pháp : Sử dụng redux-thunk redux-saga để giải vấn đề Nhóm chúng em chọn redux-saga khơng cần phải đối mặt với lượng lớn promise callback có mà đơn giản cần track theo try/catch block để theo dõi dịng code, bên cạnh cịn có hàm để giúp track action cách dễ dàng Hình 5.6: Saga tổng để quản lý saga chức khác 137 - Công dụng : Bằng cách tạo generator function, generator function có yield yield ta trả plain object Object trả gọi Effect object Effect object đơn giản object bình thường chứa thơng tin đặc biệt dùng để dẫn middleware Redux thực thi hoạt động khác ví dụ gọi hàm async khác hay put action tới store Hình 5.7: Ví dụ generator function - Áp dụng : Hình 5.8 hình 5.9: Áp dụng redux redux-saga vào project 138 CHƯƠNG 6: KIỂM THỬ PHẦN MỀM 6.1 KẾ HOẠCH KIỂM THỬ VÀ QUY TRÌNH KIỂM THỬ Trưởng nhóm test thực viết test plan cho toàn hệ thống gồm phần sau:  Định nghĩa phạm vi kiểm thử  Định nghĩa chiến lược kiểm thử  Nhận dạng rủi ro yếu tố bất ngờ  Nhận dạng hoạt động kiểm thử xây dựng lịch kiểm thử  Nhận dạng môi trường kiểm thử  Hiểu chỉnh suốt chu kỳ kiểm thử để phản ánh thay đổi cần thiết Sau thành viên giao đảm nhiệm vài modules dự án tiến hành viết Testcase cho modules, thực việc kiểm thử, sau dựa vào kế hoạch kiểm thử nhóm xác định lỗi bắt nguồn từ đâu cách thức tiến hành khắc phục Tất trình kiểm thử bao gồm: xây dựng testplant, phân tích thiết kế testcase, thi hành kiểm thử, báo cáo kết dựa vào mẫu sau Hình 6.1: Mẫu testplan 139 Hình 6.2: Mẫu TestCase Cover Hình 6.3: Mẫu TestCase chi tiết 140 Hình 6.4: Mẫu báo cáo TestCase Dựa kết kiểm thử thu được, nhóm xác định nguồn gốc phát sinh lỗi phân chia lỗi cấp độ nghiêm trọng định phân chia công việc cho thành viên tiến hành sửa lỗi Các lỗi nghiệm trọng ưu tiên sửa trước Và trình lặp lặp lại chương trình hồn thiện, khơng cịn lỗi 6.2 QUY TRÌNH THIẾT KẾ KIỂM THỬ Hình 6.5: Quy trình kiểm thử Trong quy trình TestManager thực xây dựng kế hoạch ban đầu kiểm thử, thông qua phân tích đánh giá về: phạm vi, chiến lược, rủi ro xảy ra, dạng kiểm thử, môi trường kiểm thử… 141 Dựa sở Test Analysis tiến hành viết testcase cho chức module cách kỹ lưỡng tỉ mỉ với mục tiêu tìm lỗi module lỗi dự án Sau TestCase tiến hành thực thi module cụ thể Tester cụ thể Trong giai đoạn chuẩn bị, Tester dùng mẫu prototype, use case, đặc tả chức để viết test case theo trình tự bước Tester phải liên tục trì tạo báo cáo lỗi q trình thực hiện, sau báo cáo kết kiểm thử cho TestManager TestManager tạo bảng tổng kết đánh giá hoạt động kiểm lỗi, xác định xem đạt tiêu chí thành cơng hồn thành kiểm thử chưa 6.3 QUY TRÌNH CHẠY BỘ KIỂM THỬ Hình 6.6: Quy trình chạy kiểm thử Tester bố trí cơng việc Test Leader để thi hành kiểm thử theo quy trình cụ thể sau:  Thi hành kiểm thử theo testcase cho module cụ thể  Chạy lại case bị failed trước để xác nhận case sửa  So sách kết ghi nhận thực thi với kết mong đợi  Đánh giá kết kiểm thử (Passed/Failed) cho trường hợp kiểm thử Viết báo cáo lỗi cho trường hợp kết ghi nhận kết mong đợi không giống 142 KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC - Xây dựng thành cơng Website lĩnh vực giải trí cụ thể xem phim - Vận dụng thành công loại công nghệ phần mềm, công nghệ Website mới, đại: React, Redux, Spring RESTFULL API CRUD, Spring JPA Spring Security - Tìm hiểu vận dụng sở liệu mới, tiên tiến, hiệu suất cao - Cách hoạt động nhóm hiệu quả, linh hoạt vị trí lĩnh vực công nghệ thông tin - Xây dựng website giải trí cho người hình thức xem phim trực tuyến Cụ thể có chức sau: o Đăng nhập/ đăng kí với email, password Facebook, Google o Xem phim o Bình luận o Tìm kiếm phim o Quản lý danh mục phim, quản lý phim, quản lý người dùng o Xem hồ sơ cá nhân nâng cấp VIP o Có đám mây lưu trữ phim ƯU ĐIỂM - Giao diện đơn giản bắt mắt, thu hút người dùng với nhiều thể loại, nhiều phim khác - Người dùng vừa xem vừa làm việc khác dừng lúc - Tích hợp nhiều viết đánh giá hữu ích - Cho phép xem lưu danh sách phim u thích để người dùng xem lại lúc - Phần mềm Website có cấu trúc hồn thiện, có khả bảo trì nâng cấp - Sử dụng công nghệ Website đại, có chia cấu trúc Frontend – Backend rõ ràng Front-end sử dụng React giúp cải thiện tốc độ duyệt trang Back-end sử dụng Spring Framework tăng tốc độ xử lý dễ dàng quản lý đối tượng - Hệ quản trị sở liệu MySQL kết hợp với công nghệ Spring JPA tiên tiến, hiệu cao NHƯỢC ĐIỂM 143 - Chưa có nhiều phim thích hợp cho lứa tuổi - Đám mây lưu trữ phim hạn chế dung lượng lưu lượng - Chưa có chức thống kê - Chưa đưa website vào thực tế - Ở số trang cịn có tượng nhấp nháy tốc độ xử lý nhanh dẫn đến trang bị render lần thời điểm chưa nhận liệu nhận liệu HƯỚNG PHÁT TRIỂN - Tiếp tục phát triển website với nhiều thể loại, nhiều phim đa dạng - Đưa Website vào thực tế, giám sát trình hoạt động, phát triển phận SEO - Tiếp tục nghiên cứu sâu loại công nghệ đại hiệu hơn, tích hợp vào phần mềm - Tìm kiếm đám mây lưu trữ phim với dung lượng lưu lượng truyền lớn - Khắc phục tình trạng trang bị nhấp nháy cách nghiên cứu giải pháp xử lý bất đồng tốt 144 ... liệu     D1: Mã phim D3: Phim theo mã phim D4: D1 D6: Hiển thị phim cho User, Guest xem phim theo mã phim thơng qua BM_XemPhim c Thuật tốn 48 Hình 2.23: Sequence diagram xem phim - Bước 1: Nhận... tiễn - Xây dựng website giải trí cho người hình thức xem phim trực tuyến Cụ thể có chức sau: o Đăng nhập/ đăng kí với email, password Facebook, Google, o Xem phim o Bình luận o Tìm kiếm phim o... 2.3.1.5 Xem chi tiết phim a Sơ đồ luồng liệu b Mô tả sở dũ liệu ● D1: Mã phim ● D3: Chi tiết phim theo mã phim ● D4: D1 ● D6: Hiển thị nội dung chi tiết phim theo mã phim thơng qua BM_XemChiTietPhim