ĐỒ á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: GVHD: ThS ThS Trần Trần Thị Thị Hồng Hồng Yến Yến SVTH1: SVTH1: Nguyễn Nguyễn Hữu Hữu Trí Trí –– 20522051 20522051 SVTH2: SVTH2: Võ Võ Nhật Nhật Nam Nam –– 20520646 20520646 SVTH3: SVTH3: Nguyễn Nguyễn Thành Thành Phát Phát –– 20521737 20521737 Nội dung báo cáo • Giới • Cơ thiệu đề tài sở lý thuyết • Thiết kế Template • Xây dựng Website • Kết luận • Tài liệu tham khảo Giới thiệu đề tài • Thiết kế trang The Movie App dựa ReactJS 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 hoà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 trến server • HTML/CSS nếếu 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: nếếu bạn sử dụng React để xấy dựng app cho iOS 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 q 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 q 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 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 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 tồ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) 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ỳ) 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, tồ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ể 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 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 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 q trình phát triển ứng dụng • Công cụ phát triển web hot 12 REACT.JS ROADMAP 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 - … 14 ... Giới • Cơ thiệu đề tài sở lý thuyết • Thiết kế Template • Xây dựng Website • Kết luận • Tài liệu tham khảo Giới thiệu đề tài • Thiết kế trang The Movie App dựa ReactJS Cơ sở lý thuyết - React... 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... 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 Virtual DOM • Nếu bạn khơng sử dụng ReactJS (và JSX), website bạn sử dụng