ĐỒ án môn học CÔNG NGHỆ WEB và ỨNG DỤNG THIẾT kế WEBSITE THE MOVIE APP

Khoa: Công Nghệ Phần Mềm Lớp: SE347.N12 BÁO CÁO ĐỒ ÁN MÔN HỌC CÔNG NGHỆ WEB VÀ ỨNG DỤNG THIẾT KẾ WEBSITE THE MOVIE APP GVHD: ThS Trần Thị Hồng Yến SVTH1: Nguyễn Hữu Trí – 20522051 SVTH2: Võ Nhật Nam – 20520646 SVTH3: Nguyễn Thành Phát – 20521737 Tieu luan Nội dung báo cáo • Giới thiệu đề tài • Cơ sở lý thuyết • Thiết kế Template • Xây dựng Website • Kết luận • Tài liệu tham khảo Tieu luan Giới thiệu đề tài • Thiết kế trang The Movie App dựa ReactJS Tieu luan Cơ sở lý thuyết - React Js thư viện viết bằng javascript, dùng để xây dựng giao diện người dùng (UI) React sử dụng rộng rãi có hệ sinh thái đa dạng phong phú - UI tất nhiên quan trọng, tất Để phát triển ứng dụng hồn chỉnh, React Js không làm tất cả, bạn cần thêm: • Server side language: để xử lý logic lưu trữ liệu server • HTML/CSS bạn làm ứng dụng web • Flux/Redux?: kiến trúc giúp bạn tổ chức code rõ ràng • Objective C: bạn sử dụng React để xây dựng app cho iOS Tieu luan Cơ sở lý thuyết Trước có ReactJS, lập trình viên thường gặp nhiều khó khăn việc sử dụng “vanilla JavaScript”(JavaScript thuần) JQuery để xây dựng UI Điều đồng nghĩa với việc trình phát triển ứng dụng lâu xuất nhiều bug, rủi ro Vì vào năm 2011, Jordan Walke – nhân viên Facebook khởi tạo ReactJS với mục đích cải thiện trình phát triển UI Hơn nữa, để tăng tốc trình phát triển giảm thiểu rủi ro xảy coding, React cung cấp cho khả Reusable Code (tái sử dụng code) cách đưa khái niệm quan trọng bao gồm: • JSX • Virtual DOM Tieu luan JavaScript extension - JSX • Trọng tâm website HTML documents Trình duyệt Web đọc document để hiển thị nội dung website máy tính, tablet, điện thoại bạn Trong suốt q trình đó, trình duyệt tạo thứ gọi Document Object Model (DOM) – tree đại diện cho cấu trúc website hiển thị Lập trình viên thêm dynamic content vào dự án họ cách sử dụng ngơn ngữ JavaScript để thay đổi DOM • JSX (nói ngắn gọn JavaScript extension) React extension giúp dễ dàng thay đổi DOM HTML-style code đơn giản Và kể từ lúc ReactJS browser hỗ trợ tồn trình duyệt Web đại, bạn tự tin sử dụng JSX trình duyệt mà bạn làm việc Tieu luan Virtual DOM • Nếu bạn khơng sử dụng ReactJS (và JSX), website bạn sử dụng HTML để cập nhật lại DOM cho (q trình thay đổi diễn tự nhiên trang mà người dùng không cần phải tải lại trang), cách làm ổn cho website nhỏ, đơn giản, static website • Nhưng website lớn, đặc biệt website thiên xử lý tương tác người dùng nhiều, điều làm ảnh hưởng performance website nghiêm trọng toàn DOM phải reload lại lần người dùng nhấn vào tính yêu cầu phải tải lại trang) Tieu luan Virtual DOM • Tuy nhiên, bạn sử dụng JSX bạn giúp DOM cập nhật cho DOM đó, ReactJS khởi tạo thứ gọi Virtual DOM (DOM ảo).  • Virtual DOM (bản chất theo tên gọi) copy DOM thật trang đó, ReactJS sử dụng copy để tìm kiếm phần mà DOM thật cần cập nhật kiện khiến thành phần thay đổi (chẳng hạn user nhấn vào nút bất kỳ) Tieu luan Virtual DOM • Ví dụ, người dùng bình luận vào khung comment vào Blog website bạn nhấn “Enter” Dĩ nhiên, người dùng bạn cần phải thấy bình luận thêm vào danh sách bình luận • Giả sử trường hợp khơng sử dụng ReactJS, toàn DOM phải cập nhật để báo hiệu thay đổi Còn bạn sử dụng React, giúp bạn scan qua Virtual DOM để xem thay đổi sau người dùng thực hành động (trong trường hợp này, thêm bình luận) lựa chọn nơi chỗ cần cập nhật thay đổi mà => Làm tăng trải trải nghiệm khách hàng performance cải thiện đáng kể Tieu luan Components • React xây dựng xung quanh component, khơng dùng template framework khác • Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác • Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái • Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn • Một react component đơn giản cần method render Có nhiều methods khả dụng khác, nhưng render là method chủ đạo Tieu luan 10 Props State: • Props: giúp component tương tác với nhau, component nhận input gọi props, trả thuộc tính mơ tả component render Prop bất biến • State: thể trạng thái ứng dụng, state thay đồi component đồng thời render lại để cập nhật UI Tieu luan 11 Ưu điểm • Phù hợp với đa dạng thể loại website • Tái sử dụng Component:Nếu bạn xây dựng Component đủ tốt, đủ flexible để thoả “yêu cầu” nhiều dự án khác nhau, bạn tốn thời gian xây dựng ban đầu sử dụng lại toàn dự án sau • Có thể sử dụng cho Mobile application: • Thân thiện với SEO: SEO phần thiếu để đưa thông tin website bạn lên top đầu tìm kiếm Google • Debug dễ dàng: Facebook phát hành Chrome extension dùng việc debug trình phát triển ứng dụng • Cơng cụ phát triển web hot Tieu luan 12 REACT.JS ROADMAP Tieu luan 13 ReactJS Developer Roadmap • Các kĩ cần tìm hiểu thêm để thành Reactjs developer: - Routing - React Hooks - API - Một số thư viện UI có sẵn VD: MaterialUI - Form - Redux/ReduxToolkit - … Tieu luan 14 ... thiệu đề tài • Cơ sở lý thuyết • Thiết kế Template • Xây dựng Website • Kết luận • Tài liệu tham khảo Tieu luan Giới thiệu đề tài • Thiết kế trang The Movie App dựa ReactJS Tieu luan Cơ sở lý... trang), cách làm ổn cho website nhỏ, đơn giản, static website • Nhưng website lớn, đặc biệt website thiên xử lý tương tác người dùng nhiều, điều làm ảnh hưởng performance website nghiêm trọng tồn... browser hỗ trợ tồn trình duyệt Web đại, bạn tự tin sử dụng JSX trình duyệt mà bạn làm việc Tieu luan Virtual DOM • Nếu bạn khơng sử dụng ReactJS (và JSX), website bạn sử dụng HTML để cập nhật lại