LỜI CAM ĐOANNhóm chúng em xin cam đoan đề tài: “Xây dựng Website xem phim trực tuyếnbằng framework React js” là do bản thân nhóm chúng em thực hiện với sự hỗ trợ củagiảng viên hướng dẫn
Tình hình nghiên cứu
React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng Nó được tạo ra bởi Jordan Walke,một kỹ sư phần mềm tại Facebook Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP) React lần đầu tiên được triển khai cho ứng dụng Newsfeed của "Facebook năm 2011, sau đó được triển khai choInstagram.com năm 2012 Nó được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013.
Mục đích nghiên cứu
Vận dụng tổng hợp những kiến thức đã học để tiến hình thiết kế website xem phim trực tuyến nhằm giải quyết nhu cầu giải trí của người dùng mạng internet nói riêng và mọi người nói chugn Website xem phim trực tuyến cơ bản, thân thiện với người dùng, để giới thiệu các bộ phim và xem phim Chia sẽ những bộ phim người dùng yêu thích lên tài khoản mạng xã hội cá nhân.
Mục tiêu đề tài
-Tìm hiểu lý thuyết ReactJS và ứng dụng thêm một số công nghệ mới.
-Tìm hiểu về cấu trúc và các thành phần của ReactJS.
-Ứng dụng kiến thức ReactJs để xây dựng ví dụ minh họa là web xem phim trực tuyến.
Nhiệm vụ nghiên cứu
- Tìm hiểu khái quát về ReactJs, nắm được cái khái niệm và định nghĩa về ReactJs.
- Xây dựng ví dụ minh họa hệ thống xem phim online được xây dựng nhằm phục vụ các nhiệm vụ cơ bản sau:
+ Tự động hiển thị các bộ phim thịnh hành trên trang web và có thể lựa chọn theo thể loại.
+ Cập nhập thông tin của các bộ phim sắp ra mắt và các bộ phim đang thịnh hành vào các danh mục
+ Người dùng có thể tìm kiếm chi tiết thông tin bộ phim hoặc chương trình muốn xem(tên phim, diễn viên, đánh giá có tại trang web).
Phương pháp nghiên cứu
- Web server: create-react-app.
- Trình soạn thảo (IDE): Visual Studio Code.
- Ngôn ngữ lập trình: HTML5, SASS 1.58.3, JavaScript(Axios, Ajax).
- Thư viện: Google Font, Boxicons, Swiper, query-string.
Kết quả của nghiên cứu
Với những nội dung được thực hiện trong bài nghiên cứu này, tụi em đạt được những kết quả như sau:
- Tìm hiểu, thành thạo Framework ReactJS.
- Xây dựng ứng dụng minh họa web xem phim trực tuyến.
- Biết xác định yêu cầu và quản lý tiến trình.
- Biết thiết kế GUI và tương tác RESTful API.
Kết cấu của báo cáo
Báo cáo gồm có 5 chương:
● Chương 1: Giới thiệu React Framework
● Chương 2: Phân tích yêu cầu và đặc tả
● Chương 4: Thiết kế hệ thống
GIỚI THIỆU CÁC CÔNG NGHỆ DÙNG TRONG WEBSITE
Tổng quan về ReactJS
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013 với mục đích để xây dựng giao diện người dùng Nó được sử dụng rộng rãi để xây dựng các trang web SPA (Single Page Application) và các ứng dụng trên nền tảng di động Nó rất dễ sử dụng và cho phép người dùng có thể tạo các component UI có thể tái sử dụng.
React.js đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javascript trong code HTML thông qua các attribute như ng-model, ng- repeat thì với react là một library cho phép nhúng code HTML trong code Javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong Javascript Tích hợp giữa Javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.
ReactJS có các tính năng hết sức nổi bật bao gồm:
+ JSX: viết tắt của JavaScript extension, nó là React extension , giúp cho việc thay đổi cây DOM dễ dàng hơn bằng HTML-style code đơn giản Nó là một trong những tính năng tốt và dễ sử dụng.
+ Components: Một trang web được xây dựng bằng ReactJS là một sự kết hợp nhiều component lại với nhau chứ không phải chung một Template như bình thường Các component cũng như các hàm JavaScript bình thường, giúp tạo ra các code dễ dàng bằng cách tách các logic ra thành các đoạn code độc lập có thể tái sử dụng Chúng ta có thể sử dụng component dưới dạng function hoặc class, ngoài ra các component còn có state và props.
+ Virtual DOM: ReactJS tạo một thứ gọi là Virtual DOM (DOM ảo) Đúng như tên gọi, nó là một copy của DOM thật trên trang web đó ReactJS dùng những DOM ảo đó để tìm đúng những DOM thật cần được cập nhật khi có bất kỳ sự kiện nào làm các thành phần bên trong nó thay đổi.
Hình 1.1 React JS là một framework javascript
Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents. Trình duyệt Web đọc những document này để hiển thị nội dung của website trên máy tính, tablet, điện thoại của bạn Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là Document Object Model (DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào Lập trình viên có thể thêm bất kỳ dynamic content nào vào những dự án của họ bằng cách sử dụng ngôn ngữ JavaScript để thay đổi cây DOM.
JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản Và kể từ lúc
ReactJS browser hỗ trợ toàn bộ những trình duyệt Web hiện đại, bạn có thể tự tin sử dụng JSX trên bất kỳ trình duyệt nào mà bạn đang làm việc.
Nếu bạn không sử dụng ReactJS (và JSX), website của bạn sẽ sử dụng HTML để cập nhật lại cây DOM cho chính bản nó (quá trình thay đổi diễn ra tự nhiên trên trang mà người dùng không cần phải tải lại trang), cách làm này sẽ ổn cho các website nhỏ, đơn giản, static website Nhưng đối với các website lớn, đặc biệt là những website thiên về xử lý các tương tác của người dùng nhiều, điều này sẽ làm ảnh hưởng performance website cực kỳ nghiêm trọng bởi vì toàn bộ cây DOM phải reload lại mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lại trang).
Tuy nhiên, nếu bạn sử dụng JSX thì bạn sẽ giúp cây DOM cập nhật cho chính DOM đó, ReactJS đã khởi tạo một thứ gọi là Virtual DOM (DOM ảo) Virtual DOM (bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cập nhật khi bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi (chẳng hạn như user nhấn vào một nút bất kỳ).
Ví dụ, khi người dùng bình luận vào bất kỳ bài Blog nào và nhấn "Enter", React sẽ giúp bạn scan qua Virtual DOM để xem những gì đã thay đổi và chỉ cập nhật đúng nơi cần thiết, tránh phải cập nhật toàn bộ cây DOM như khi không sử dụng React.
Các component là nền tảng của mọi ứng dụng React và một ứng dụng đơn lẻ thường bao gồm nhiều component Thành phần cơ bản là một phần của giao diện người dùng Nó chia giao diện người dùng thành các phần độc lập, có thể sử dụng lại và có thể được xử lý riêng biệt.
Hình 1.3 Một Component trong reactHình 1.2 Ví dụ về Component
Multiple Components: Nếu muốn lồng nhiều Component vào nhau , ra dẽ làm điều này trong lệnh return của phương thức render
Có hai loại component trong React:
● Functional Components: Loại components này không có state của riêng chúng và chỉ chứa các phương thức render, do đó còn được gọi là stateless components Chúng có thể lấy dữ liệu từ các components khác làm props
Hình 1.5 Function componentsHình 1.4 Lồng nhiều Component vào nhau
● Class Components: Loại components này có thể giữ và quản lý state của riêng chúng và có một phương thức render riêng để trả về JSX trên màn hình Chúng cũng được gọi là stateful components vì chúng có thể có một state.
"Props" là viết tắt của "properties", là một khái niệm trong ReactJS Props về cơ bản là một đối tượng lưu trữ giá trị của các thuộc tính cho một thẻ (Tag).
Giới thiệu về Swiper
Hình 1.13 Swiper slider là một thư viện hỗ trợ tạo slider một cách dễ dàng, nhanh chóng
Swiper là một thư viện Javascript dùng để tạo ra các slideshow, carousel hay gallery hiệu quả và dễ dàng tùy biến Thư viện này cho phép bạn tạo ra các trình trình chiếu ảnh, video, text, với các hiệu ứng chuyển động đa dạng và linh hoạt, giúp tăng tính tương tác của trang web Swiper cũng cung cấp nhiều tính năng đa dạng để tùy chỉnh, như touch control, keyboard control, pagination, navigation, parallax effects, zooming, lazy loading, và nhiều hơn nữa Swiper hoạt động trên nhiều trình duyệt khác nhau và có thể tích hợp vào các framework như React, Angular hay VueJS
1.2.2 Ưu nhược điểm của Swiper
Swiper hỗ trợ nhiều tính năng và tùy chọn tùy chỉnh khác nhau, cho phép người dùng tạo ra các thanh trượt phong phú và đa dạng.
Swiper được thiết kế để tương thích với các thiết bị di động và desktop, do đó, có thể đảm bảo rằng các thanh trượt được hiển thị đầy đủ và đáp ứng trên các thiết bị khác nhau.
Swiper cung cấp tài liệu tốt và hỗ trợ sâu rộng, giúp người dùng giải quyết các vấn đề phát sinh khi sử dụng.
Swiper là một thư viện JavaScript có kích thước khá lớn, có thể gây tốc độ tải trang chậm hơn, đặc biệt là trên các thiết bị di động và kết nối mạng chậm.
Nếu không có kiến thức về JavaScript và CSS, thì việc sử dụng Swiper có thể phức tạp hơn so với các giải pháp khác như plug-in đã được thiết kế sẵn.
Khi tùy chỉnh Swiper, người dùng có thể gặp phải một số vấn đề như tràn đều khiển, lỗi CSS và các lỗi khác có thể làm giảm hiệu suất của trang web hoặc ứng dụng web.
Giới thiệu SASS/SCSS
CSS Preprocessors là ngôn ngữ tiền xử lý CSS Là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn CSS Preprocessor có thể giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS.
SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS.
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết
Sass là chữ viết tắt của Syntactically Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành
CSS Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm thành file CSS.
SASS bản thân có hai kiểu viết khác nhau, một kiểu như là HAML, Pug – Sử dụng indent (cách thụt đầu dòng) để phân tách các khối code , sử dụng xuống dòng để phân biệt rules , có phần mở rộng là sass
SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby) Có phần mở rộng là scss SCSS , ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa
SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS Trong hình phía dưới:
Bên trái: Được viết bằng SCSS
Bên phải: là code CSS được biên dịch từ SCSS
1.3.3 Lợi ích của SASS/SCSS
Có nhiều lợi ích khi sử dụng Sass/SCSS trong phát triển web, sau đây là một số lợi ích chính:
Giảm thiểu mã lặp lại: Sass/SCSS cho phép tái sử dụng mã CSS thông qua mixin và định nghĩa biến Điều này giúp giảm thiểu mã lặp lại và làm cho mã CSS trở nên dễ đọc hơn.
Tính tùy chỉnh cao: Sass/SCSS cung cấp nhiều tính năng và tiện ích như biến, mixin, hàm và nesting, cho phép bạn tùy chỉnh mã CSS của mình theo cách tốt hơn và nhanh hơn.
Tính mô-đun cao: Sass/SCSS cho phép phân chia CSS thành các tệp nhỏ hơn và dễ quản lý hơn Điều này giúp tăng tính mô-đun của mã CSS và làm cho nó dễ bảo trì hơn.
Khả năng kế thừa: Sass/SCSS cho phép kế thừa CSS thông qua tính năng extends Điều này giúp làm giảm lượng mã CSS cần viết và giúp làm cho mã CSS trở nên dễ đọc và dễ bảo trì hơn.
Hỗ trợ cho CSS3: Sass/SCSS hỗ trợ các tính năng CSS3 như biến, animation, gradient, box-shadow, v.v., cho phép bạn sử dụng các tính năng mới trong CSS một cách dễ dàng và hiệu quả hơn.
Tổng hợp lại, Sass/SCSS giúp tăng tính tùy chỉnh, tính mô-đun, tính khả năng kế thừa và tính hiệu quả khi viết CSS, giúp cho việc phát triển web trở nên dễ dàng và tiết kiệm thời gian hơn.
Giới thiệu về Postman
Postman là một loại công cụ cho phép người dùng có thể thao tác với API, mà trong đó phổ biến nhất là REST Với thử nghiệm API thì Postman là một trong những công cụ phổ biến vì được thực nghiệm nhiều nhất Nhờ Postman lập trình viên có thể gọi Rest API mà không cần phải viết bất kỳ dòng code nào
Postman có khả năng hỗ trợ mọi phương thức HTTP bao gồm: POST, PUT, DELETE, PATCH, GET, Ngoài ra, Postman còn cho phép lập trình viên lưu lại lịch sử của các lần request nên vô cùng tiện lợi cho nhu cầu sử dụng lại.
Các chức năng cơ bản:
Cho phép gửi HTTP Request với các method GET, POST, PUT, DELETE.
Cho phép post dữ liệu dưới dạng form (key-value), text, json.
Hiện kết quả trả về dạng text, hình ảnh, XML, JSON.
Cho phép thay đổi header của các request.
New – tạo request, collection hoặc enviroment mới.
Import – import collection hoặc environment Có các tuỳ chọn để import từ file, folder, link hoặc paste từ text thuần.
Hình 1.15 Giao diện của Postman
Runner – Kiểm tra tự động hóa có thể được thực hiện thông qua Runner cả collection.
Open New – Mở một tab mới, cửa sổ Postman hoặc cửa sổ Runner.
My Workspace – Tạo khu vực làm việc riêng hoặc cho một nhóm.
Invite – Cộng tác với nhiều thành viên bằng việc mời các thành viên.
History – Các request đã thực hiện mà bạn đã thực hiện sẽ được hiển thị trong
History Giúp bạn có thể lần theo các hành động bạn đã làm.
Collections – Tổ chức bộ thử nghiệm của bạn bằng cách tạo collection Mỗi collection có thể có các thư mục con và nhiều yêu cầu Request hoặc thư mục cũng có thể được trùng lặp.
Tab Request – Hiển thị tiêu đề của request mà bạn đang làm việc Mặc định
“Untitled Request” sẽ được hiển thị cho các request không có tiêu đề.
HTTP Request – Click vào đây sẽ hiển thị danh sách thả xuống với các request khác nhau như GET, POST, COPY, DELETE, v.v Trong thử nghiệm, các yêu cầu được sử dụng phổ biến nhất là GET và POST.
Request URL – Còn được gọi là điểm cuối (endpoint), đây là nơi bạn sẽ xác định liên kết đến nơi API sẽ giao tiếp.
Save – Nếu có thay đổi đối với request, nhấp vào Save là bắt buộc để những thay đổi mới sẽ không bị mất hoặc bị ghi đè.
Params – Đây là nơi bạn sẽ viết các tham số cần thiết cho một request, ví dụ như các cặp key – value.
Authorization – Để truy cập API, cần được cấp quyền Nó có thể ở dạng tên người dùng và mật khẩu, bearer token, v.v.
Headers – Bạn có thể thiết lập các header như nội dung kiểu JSON tùy theo cách tổ chức của bạn.
Body – Đây là nơi chúng ta có thể tùy chỉnh chi tiết trong request thường được sử dụng trong request POST.
Script tiền yêu cầu là những tập lệnh được thực thi trước khi yêu cầu được gửi đi Mục đích chính của script này là thiết lập môi trường để đảm bảo các kiểm tra được thực hiện trong môi trường phù hợp.
Tests – Đây là các script được thực thi khi request Điều quan trọng là phải có các thử nghiệm như thiết lập các điểm checkpoint để kiểm tra trạng thái là ok, dữ liệu nhận được có như mong đợi không và các thử nghiệm khác.
1.4.3 Các thành phần chính của Postman
Postman có 3 thành phần chính như sau:
Settings (bao gồm các thông tin về cài đặt chung)
Các thông tin về Account có mục đích để login, logout và sync data
Settings tùy chỉnh như: shortcut, format, themes,
Import data từ ngoài vào
Có vai trò lưu trữ thông tin của các API dựa theo folder hoặc theo thời gian.
Hỗ trợ hiển thị các nội dung chi tiết về API cũng như các phần hỗ trợ với mục đích thực hiện test API Đây là một trong những phần mà tester cần phải làm việc rất nhiều
Ngoài ra, trong API content còn có 3 thành phần chính là:
Environments: Thường chứa những thông tin có liên quan đến môi trường Nếu như có các thành phần này thì lập trình viên dễ dàng đổi sang môi trường cần test mà có thể bỏ qua bước đổi URL của từng request
Request: Đây là phần có chứa các thông tin chính của API
Response: Bao gồm những thông tin trả về sau thực hiện Send Request
Sử dụng Collections (Bộ sưu tập) – Postman cho phép người dùng tạo bộ sưu tập cho các lệnh gọi API của họ Mỗi bộ sưu tập có thể tạo các thư mục con và nhiều yêu cầu (request) Điều này giúp việc tổ chức các bộ thử nghiệm.
Collaboration – Collections và environment có thể được import hoặc export giúp chia sẻ tệp dễ dàng.
API Testing – Test trạng thái phản hồi HTTP.
Gỡ rối – Bảng điều khiển Postman giúp kiểm tra dữ liệu nào đã được truy xuất giúp dễ dàng gỡ lỗi kiểm tra.
Giới thiệu về Git
Git là một hệ thống quản lý phiên bản phân tán (Distributed Version ControlSystem – DVCS) ra đời vào năm 2005 và hiện được dùng rất phổ biến So với các hệ thống quản lý phiên bản tập trung khi tất cả mã nguồn và lịch sử thay đổi chỉ được một nơi là máy chủ thì trong hệ thống phân tán, các máy khách không chỉ “check out” phiên bản mới nhất của các tập tin mà là sao chép (mirror) toàn bộ kho mã nguồn(repository) Như vậy, nếu như máy chủ ngừng hoạt động, thì bạn hoàn toàn có thể lấy kho chứa từ bất kỳ máy khách nào để sao chép ngược trở lại máy chủ để khôi phục lại toàn bộ hệ thống Mỗi checkout thực sự là một bản sao đầy đủ của tất cả dữ liệu của kho chứa từ máy chủ.
Dễ dàng sử dụng, thao tác nhanh gọn và an toàn.
Các dự án thường sẽ có nhiều lập trình viên cùng làm việc song song Do đó, một hệ thống quản lý phiên bản mã nguồn như Git là cần thiết để đảm bảo không có xung đột code.
Lịch sử ghi chép Các yêu cầu trong dự án thường xuyên được thay đổi và cập nhật Vì vậy, một hệ thống kiểm soát phiên bản sẽ cho phép các lập trình viên khôi phục (revert) và quay lại phiên bản cũ hơn của code.
Phân nhánh đơn giản hơn, cho phép nhiều dự án liên quan đến cùng một cơ sở code chạy song song Tính năng này giúp quy trình code nhóm trở nên đơn giản hơn đáng kể, vì các chi nhánh có thể dễ dàng được hợp nhất.
Mã nguồn mở và phát triển phi tập trung Chỉ cần clone mã nguồn, một phiên bản thay đổi hoặc một nhánh nào đó từ kho lưu trữ là bạn có thể làm việc ở mọi
Hình 1.16 Cách thức hoạt động của Git lúc mọi nơi.
1.5.3 Quy trình xử lý công việc ( workflow ) trên Git
Workflow của Git được chia thành ba trạng thái (status):
– Thư mục làm việc (Working directory) – Thay đổi các tệp trong thư mục làm việc hiện tại của bạn.
– Khu vực tổ chức (Index) – Sắp xếp các tệp và thêm snapshot (ảnh chụp nhanh) các thay đổi vào index của bạn.
– Thư mục Git – Kho lưu trữ (Repository) – Commit lưu trữ vĩnh viễn các snapshot trong thư mục Git của bạn Bạn có thể thực hiện các thay đổi đối với bất kỳ phiên bản hiện có nào, stage thư mục và commit.
Các ngôn ngữ và công cụ hỗ trợ khác
create-react-app: là một công cụ dùng để tạo ra một ứng dụng React mặc định một cách nhanh chóng và dễ dàng Nó được phát triển bởi Facebook và cung cấp một
Hình 1.17 Quy trình làm việc(Workflow) trên Git bộ khung được thiết lập sẵn cho các ứng dụng React, bao gồm cấu trúc thư mục, các tệp cấu hình và một số thành phần cơ bản Khi sử dụng create-react-app, người dùng không cần phải tìm hiểu và cấu hình tất cả các yếu tố cơ bản của một ứng dụng React, giúp giảm thiểu thời gian và công sức để bắt đầu xây dựng một ứng dụng mới create- react-app cung cấp một cách đơn giản để khởi tạo một ứng dụng React mới với một web server sẵn sàng chạy Sau khi tạo một ứng dụng React bằng create-react-app, bạn có thể chạy lệnh npm start để bắt đầu chạy web server, và truy cập ứng dụng của bạn tại địa chỉ http://localhost:3000.
Lưu ý rằng trong khi web server được cung cấp bởi create-react-app là đủ để phục vụ ứng dụng của bạn trong quá trình phát triển, nó không phải là một giải pháp phù hợp để triển khai ứng dụng React thực tế Trong trường hợp đó, bạn cần phải sử dụng một giải pháp web server thực sự như Apache hoặc Nginx.
HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web.
CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML
Boxicons là một bộ biểu tượng mã nguồn mở được thiết kế cẩn thận với hơn
1000 biểu tượng Nó được chế tạo để làm phong phú trải nghiệm trang web / ứng dụng của bạn.
JavaScript là một ngôn ngữ lập trình Web Nó được sử dụng phổ biến nhất như là một tương tác với người sử dụng và tạo các trang web động Nó là một ngôn ngữ phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script chương trình thông dịch với các khả năng hướng đối tượng.
Axios là một thư viện HTTP dựa trên Promise được sử dụng để tương tác với các API dựa trên HTTP từ trình duyệt hoặc Node.js Axios cung cấp một cách đơn giản để tạo các yêu cầu HTTP, xử lý các phản hồi và xử lý các lỗi.
AJAX (Asynchronous JavaScript and XML) là một nhóm các kỹ thuật thiết kế web cho phép các ứng dụng web chạy bất đồng bộ, xử lý các yêu cầu tới máy chủ ở chế độ nền.
PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU 31 2.1 Sơ đồ phân tích chức năng
Phân tích chức năng
Hệ thống xem phim trực tuyến là một website cho phép xem và thông tin về những bộ phim/tv series của cửa hàng Sau khi khi truy cập trang web, người dùng có thể xem danh sách các bộ phim/tv series hiện có trên trang web dễ dàng ở những danh mục, lựa chọn những bộ phim/tv series trên website để biết thông tin hoặc xem Người dùng cũng có thể chia sẻ những bộ phim/tv series yêu thích lên tài khoản Facebook cá nhân.
2.2.1 Chức năng xem danh sách các bộ phim/tv series theo từng danh mục:
Người dùng có thể xem phim/tv series theo các danh mục Movie, TV Series, Trending Movie/ TV Series.
2.2.2 Chức năng xem chi tiết phim/tv series:
Người dùng xem thông tin chi tiết gồm: Tên phim, thể loại, năm phát hành, thời lượng, rating, overview, diễn viên, video trailer.
2.2.3 Chức năng xem phim/tv series:
Người dùng xem phim/tv series sau khi click Watch now.
Người dùng sẽ tìm kiếm phim/tv series bằng cách nhập keyword theo tên Hệ thống sẽ trả về danh sách phim/tv series theo keyword đã chọn
2.2.5 Chức năng xem theo thể loại:
Người dùng xem danh sách các bộ phim/tv series bằng cách chọn thể loại. 2.2.6 Chức năng chat:
Người dùng có thể chat với Admin trang qua Messenger.
Người dùng có thể chia sẻ những bộ phim/tv series lên tài khoản mạng xã hội Facebook.
Người dùng có thể bình luận phía dưới những bộ phim/tv series bằng tài khoảngFacebook.
THIẾT KẾ HỆ THỐNG 40
Thiết kế cơ sở dữ liệu (MySQL)
Hình 3.19 Cơ sở dữ liệu
- Bảng ‘movieList’: chứa dữ liệu danh sách phim
- Bảng ‘tvList: chứa dữ liệu danh sách tv series.
- Bảng ‘video_movies’: chứa dữ liệu danh sách các video trailer phim.
- Bảng ‘video_tv’: chứa dữ liệu danh sách các video trailer tv series.
- Bảng ‘search_tv: chứa chứa danh sách dữ liệu tv/series khi search theo keyword.
- Bảng ‘search_movie’: chứa danh sách dữ liệu các bộ phim khi search theo keyword.
- Bảng ‘detai_tv’: chứa dữ liệu chi tiết tv/series.
- Bảng ‘detail_movie’: chứa dữ liệu chi tiết phim.
- Bảng ‘credits_tv’: chứa dữ liệu các diễn viên trong tv series.
- Bảng ‘credit_movie: chứa dữ liệu các diễn viên trong bộ phim
- Bảng ‘genres_tv’: chứa dữ liệu danh sách các thể loại tv series.
- Bảng ‘genres_movie’: chứa dữ liệu danh sách các thể loại phim.
- Bảng ‘discover_tv’: chứa danh sách dữ liệu các tv series theo thể loại.
- Bảng ‘discover_movie’: chứa danh sách dữ liệu các bộ phim theo thể loại.
- Bảng ‘similar_tv’: chứa dữ liệu các tv series tương tự.
- Bảng ‘similar_movie’: chứa dữ liệu các bộ phim tương tự.
Giao diện
Gồm các thành phần như:
- Header: chứa Logo và tên của Website, thanh điều hướng.
- Slider: Giới thiệu các bộ phim đang thịnh hành,
- Trending Movies: Danh sách phim đang thịnh hành
- Top Rated Movies: Danh sách phim đánh giá cao
- Trending TV: Danh sách Tv series thịnh hành
- To Rated TV: Danh sách Tv series đánh giá cao
- Footer: Thông tin liên hệ
- Messenger Customer Chat: chăm sóc khách hàng qua fanpage
Hình 3.20 Giao diện Header, Slider
Hình 3.21 Giaod diện Trending Movies
Hình 3.22 Giao diện Top Rated Movies
Hình 3.23 Giao diện Trending TV
Hình 3.24 Giao diện Top Rated TV
Hình 3.25 Giao diện Messenger chăm sóc khách hàng
Hình 3.27 Giao diện trang Trending Movies
Hình 3.28 Giao diện trang Top Rated Movies
Hình 3.29 Giao diện trang Trending TV
Hình 3.30 Giao diện trang Trending TV
Khu vực hiển thị toàn bộ phim/tv series của trang web Người dùng có thể chọn thể loại để xem những bộ phim/tv series phù hợp với nhu cầu tìm kiếm Ta có thể tìm kiếm theo keyword.
Hình 3.31 Giao diện trang Movies
Hình 3.32 Giao diện trang TV Series
Trang chi tiết phim/tv series
Bao gồm: chi tiết phim/tv series, các đánh giá người dùng, chia sẻ về bộ phim/tv series, các video trailer, phim/tv series liên quan.
Hình 3.33 Giao diện xem chi tiết Movies/TV series
Hình 3.36 Bộ phim/tv series liên quan
Hình 3.37 Giao diện xem phim
- Ngôn ngữ lập trình: o JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java là phần mở rộng thường được.js dùng cho tập tin mã nguồn JavaScript.
- Phương pháp lập trình: o Lập trình hướng đối tượng (OOP - viết tắt của Object Oriented
Programming) là một phương pháp lập trình dựa trên khái niệm về lớp và đối tượng OOP tập trung vào các đối tượng thao tác hơn là logic để thao tác chúng, giúp code dễ quản lý, tái sử dụng được và dễ bảo trì.
Bước 1: Tải về và cài đặt môi trường NodeJs trên máy tính tại địa chỉ: https://nodejs.org/en/
Bước 1: Tải về và cài đặt Git trên máy tính tại địa chỉ: https://www.git- scm.com/download/win.
Bước 3: Tạo thư mục chứa dự án, tại thư mục ấn chuột phải và bật Git Bash
Bước 4: Chạy lệnh npx-create-react-app watch-film Sau khi cửa sổ lệnh báo hoàn tất thì hệ thống tự động cài đặt cho chúng ta một project với tên
Bước 5: Chạy lệnh cd watch-film sau đó chạy lệnh npm i Sau khi có thông báo hoàn tất thì chúng ta chạy lệnh npm start.
Như vậy là với cách ở trên thì chúng ta dễ dàng cài đặt và khởi động được một project React JS, chúc các bạn thành công.
KẾT QUẢ ĐẠT ĐƯỢC Kết quả đạt được và hạn chế
Sau quá trình học tập nghiên cứu để thực hiện đề tài thực tập tốt nghiệp lần này em đã đạt được những kết quả như:
Về mặt phát triển giao diện front-end, nhóm nghiên cứu đã tiếp cận và nắm vững lý thuyết về React JS Bên cạnh đó, nhóm còn kết hợp với một số thư viện bổ sung để xây dựng một ứng dụng web phục vụ nhu cầu xem phim trực tuyến.
Được tiếp xúc với mô hình lập trình hiện đại Component Based cùng framework React JS của ngôn ngữ lập trình Java Script một cách tổng quan nhất
Được củng cố lại các kiến thức về lập trình cũng như là cơ sở dữ liệu
Có những kỹ năng nền tảng cơ bản nhất về lập trình front-end.
Củng cố kiến thức về HTML, CSS, javascript.
Bên cạnh đó cũng còn một vài hạn chế như:
Chưa thể tìm kiếm phim cụ thể theo thể loại bằng keyword.
Chưa xây dựng trang quản lý người dùng và và trang quản trị.
Chưa có tính năng đăng ký và đăng nhập.
Nguồn dữ liệu chưa phong phú và đa dạng.
Xây dựng trang quản lý người dùng và trang quản trị.
Xây dựng tính năng đăng ký và đăng nhập.
Đăng nhập bằng Facebook và Google.
Cập nhật tính năng phim yêu thích và đánh giá.
Cải thiện giao diện và trải nghiệm người dùng (UI, UX).
- Các chức năng đã thực hiện được oXem danh sách các bộ phim/tv series theo từng danh mục. oXem chi tiết phim/ tv series. oXem phim/tv series. oTìm kiếm. oChọn xem theo thể loại. oChia sẻ.
- Mong muốn có thể thực hiện và phát triển các chức năng sau o Xây dựng trang quản lý tài khoản người dùng và trang quản trị. o Bổ sung chức năng đăng nhập, đăng kí. o Đăng nhập bằng Facebook và Google. o Bổ sung chức năng thêm vào mục thêm yêu thích và đánh giá cho tài khoản người dùng. o Xác thực 2 yếu tố qua gmail hoặc điện thoại khi đăng ký, quên mật khẩu, mã hóa mật khẩu. o Áp dụng design pattern để hệ thống dễ quản lý code và dễ mở rộng hơn. o Thêm phân loại theo quốc gia và theo năm phát hành.