LẬP TRÌNH WEBSITE VỚI REACTJS VÀ MATERIAL UI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH WEBSITE VỚI REACTJS VÀ MATERIAL UI Công ty thực tập: Công ty cổ phần mạng xã hội du lịch Hahalolo Người phụ trách: Lê Đức Tiến, Trần Đức Huy Thực tập sinh: Nguyễn Đặng Phương Nam - 18521125 TP Hồ Chí Minh, tháng 06 năm 2022 LỜI CẢM ƠN Trước tiên, em xin gửi lời cảm ơn đến quý thầy, cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh tạo điều kiện tốt cho sinh viên chúng em tiếp cận môi trường làm việc doanh nghiệp thông qua học phần Thực tập doanh nghiệp, giúp chúng em có chuẩn bị tốt trước thức tìm cơng việc làm sau tốt nghiệp Em xin chân thành cảm ơn quý thầy, cô khoa Công nghệ phần mềm quan tâm hỗ trợ trình tìm vị trí thực tập phù hợp với nguyện vọng mong muốn em Kế đến trân trọng em dành cho Công ty Mạng xã hội du lịch Hahalolo cho em hội thực tập công ty, nỗ lực đào tạo kỹ kiến thức cho em để phù hợp với môi trường làm việc chuyên nghiệp Và lời cảm ơn tới anh chị bạn công ty giúp đỡ hỗ trợ để giúp em đạt kết tốt công việc Cuối cùng, em xin cảm ơn thầy cô trường đại học công nghệ thông tin trực tiếp hỗ trợ giúp đỡ em trình thực tập cung cấp thông tin cần thiết kinh nghiệm quý giá thầy cho em Trân trọng NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Error! Bookmark not defined Nguyên cứu kĩ thuật Error! Bookmark not defined Các công cụ làm việc Error! Bookmark not defined Tìm hiểu cơng nghệ lập trình website đại ReactJs Bài tập lập trình website quản lí sản phẩm 10 Bài tập lập trình newfeeds tái chế dom scroll 10 TỔNG KẾT Bài Tập Lập trình website quản lí sản phẩm 12 Chương 1: Giới thiệu công ty thực tập Ra mắt Việt Nam năm 2019, tính đến nay, Hahalolo có triệu user đăng ký, nhận tin tưởng hàng trăm nghìn đối tác hãng hàng không, công ty lữ hành, khách sạn…, kết nối dịch vụ, tiện ích đến 192 quốc gia vùng lãnh thổ Hahalolo mạng xã hội khép kín với đầy đủ chức (All In One), cho phép người dùng dễ dàng kết bạn, giao lưu trò chuyện trực tuyến với người sở thích, đam mê du lịch Mạng xã hội Hahalolo đồng thời tích hợp Dịch vụ du lịch trực tuyến (OTA – Online Travel Agent) Thương mại Điện tử (TMĐT) Mạng xã hội Hahalolo mắt lần vào tháng 6/2019 Mục tiêu mạng xã hội đạt mục tiêu tỷ người dùng, đồng thời có mặt sàn chứng khoán New York vào năm 2024 Trụ sở Mạng xã hội Du lịch Hahalolo gồm tầng tọa lạc số 400/8B – 400/10 Ung Văn Khiêm, P.25, Q.Bình Thạnh, TP.HCM khai trương kết nỗ lực không ngừng Ban Lãnh đạo toàn thể nhân viên Hahalolo suốt thời gian dài Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Website quản lí sản phẩm” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình Website với công nghệ ReactJs, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển Hahalolo Tìm hiểu cơng ty kỹ công ty Thời gian : tuần Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Tìm hiểu cơng cụ phát triển website HTML/CSS/JAVASCRIPT Framework mà công ty sử dụng Material UI Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian : Tuần Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc Trong thời gian này, live manager hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Các công cụ cần thiết việc phát triển sản phẩm bao gồm: - Visual Studio Code: Text editor sử dụng q trình phát triển sản phẩm - Git, Gitlab, CI/CD: Công cụ quản lý source code, deploy, integration - Sử dụng Figma dể thiết kế website Thực : Học lý thuyết ứng dụng cơng cụ Kết : Có thể sử dụng kết hợp công cụ kể 2.2 Tìm hiểu cơng nghệ lập trình website đại ReactJS Thời gian : tuần Nội dung : Được training cách sử dụng ReactJS việc viết code, cách viết code dễ bảo trì tái sử dụng Phân chia Components ReactJS React ? React thư viện UI phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hoàn tồn React Virtual Dom: cơng nghệ DOM ảo giúp tăng hiệu cho ứng dụng Việc node gốc có trạng thái thay đổi tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree phải thay đổi phần, điều ảnh hưởng đến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM object Javascript, object chứa đầy đủ thông tin cần thiết để tạo DOM, liệu thay đổi tính toán thay đổi object tree thật, điều giúp tối ưu hoá việc re-render DOM tree thật JSX : JSX dạng ngôn ngữ cho phép viết mã HTML Javascript Đặc điểm: Faster: Nhanh JSX thực tối ưu hóa biên dịch sang mã Javacsript Các mã cho thời gian thực nhanh nhiều so với mã tương đương viết trực tiếp Javascript Safer: an toàn Ngược với Javascript, JSX kiểu statically-typed, nghĩa biên dịch trước chạy, giống Java, C++ Vì lỗi phát q trình biên dịch Ngồi ra, cung cấp tính gỡ lỗi biên dịch tốt Easier: Dễ dàng JSX kế thừa dựa Javascript, dễ dàng lập trình viên Javascripts sử dụng (tham khảo https://jsx.github.io/.) Component: 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, render method chủ đạo Props Props viết tắt Properties Một điều mà bạn cần phải nhớ sử dụng props khơng nên thay đổi giá trị nó, hay nói cách khác, liệu immutable Các component nhận props từ component cha Bạn không thay đổi giá trị props component mà phép đọc giá trị thơi Trong React liệu theo chiều, có nghĩa từ component cha => component State State hoạt động khác với Props State liệu nội Component, props liệu truyền cho Component Chính hồn tồn thay đổi state, coi kiểu liệu mutable Vì đặc điểm nên hay sử dụng State để thay đổi liệu view, binding data lại view có thay đổi Nhưng không dùng this.state để gán lại giá trị thay đổi cho nó, mà dùng this.setState Function trigger cho class render lại component component nó, cịn this.state khơng Thực : Sử dụng ReactJs dự án Commit review code live manager thành viên team Kết : Nắm vững cách sử dụng framework React sử dụng dự án Có thể sử dụng ReactJs , phân chia components, chia task thành công việc nhỏ để người làm việc chung dễ quản lí 2.3 Sử dụng framework Material UI Nội dung: Các kiến thức xây đựng giao diện nhanh hơn, dựa vào framework UI ví dụ Material UI, BootStrap Material-UI cấp cho bạn đầy đủ component để tạo trang web cách nhanh chóng hơn, mà khơng phải ngồi css tí Rất tiện lợi, cần cài đặt thư viện sử dụng Theme Material-ui cung cấp base theme với background-color light dark • • • Material-UI sử dụng single JS object để gọi muiTheme Mặc định muiTheme dựa lightBaseTheme muiTheme object chứa khóa: • spacing: sử dụng để thay đổi khoảng cách components • fontFamily: sử dụng để thay đổi font family mặc định • palette: sử dụng để thay đổi màu component isRtl sử dụng phép chuyển từ chế độ từ phải sang trái Thực : Sử dụng Mui Ui dự án Commit review code live manager thành viên team Kết : Nắm vững cách sử dụng framework MUI UI sử dụng dự án - 2.5 Bài Tập Lập trình website quản lí sản phẩm Nội dung: Thơng qua tập giúp tụi Em luyện tập kĩ công nghệ công ty ReactJS, MUI UI để từ có đánh giá Mentor Thực Hiện: - Áp Dụng tốt công nghệ , sử dụng phân chia components hiệu ReactJS để tối ưu hiệu quả, đồng thời kiến code đễ bào trì sử dụng - Áp dụng MUI UI để giúp xây dựng website nhanh - Về đáp ứng yêu cầu mentor đặt ra, phát triển thêm tình Kết qủa: Link Github Sản phẩm: Link sau Deploy: https://gracious-montalcini-0d647d.netlify.app/ 2.6 Bài Tập Lập trình newfeeds tái chế dom scroll Nội dung: Áp dụng thư viện có sẵn để xây dựng newfeeds áp dụng cho cơng ty Thực Hiện: - Ngồi cơng nghệ , trainning Em học thư viện để từ áp dụng vào newfeeds cơng ty Kết quả: Về đáp ứng yêu cầu đặt ra, nhiên issue để áp dụng vào thực tế website công ty Link Github Sản phẩm: https://github.com/PHUONGNAM011000/Infinite-ScrollLink sau Deploy: https://marvelous-salamander-04dee3.netlify.app/ 10 Lịch làm việc Tháng Công việc Bài Tập Lập trình website quản lí sản phẩm MiniMart Code Newfeeds Tính Innifial Scroll Recycle Dom - Start dự án công ty building website Hahalolo Người hướng dẫn Anh Lê Hữu Tiến Anh Trần Đức Huy Mức độ hoàn thành 95% Nhận xét người hướng dẫn 95% 95% 95% 11 TỔNG KẾT Sau tháng thực tập Hahalolo, em may mắn tham gia vào dự án thực tế (1 dự án) không project mẫu Quá trình học hỏi làm việc cơng ty dù có áp lực đem lại cho em nhiều kiến thức, tư duy, kinh nghiệm trình thực dự án lẫn cách làm việc giao tiếp Chân thành cảm ơn giúp đỡ anh Tiến, anh Huy thành viên team FrontEnd, công ty Hahalolo tạo môi trường giúp đỡ cho em suốt trình thực tập Cảm ơn khoa CNPM tạo điều kiện cho em hoàn thành báo cáo Nguyễn Đặng Phương Nam 12 ... Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình Website quản lí sản phẩm” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình Website với cơng nghệ ReactJs, đồng thời... hiểu cơng nghệ lập trình website đại ReactJs Bài tập lập trình website quản lí sản phẩm 10 Bài tập lập trình newfeeds tái chế dom scroll 10 TỔNG KẾT Bài Tập Lập trình website quản lí sản phẩm... từ phải sang trái Thực : Sử dụng Mui Ui dự án Commit review code live manager thành viên team Kết : Nắm vững cách sử dụng framework MUI UI sử dụng dự án - 2.5 Bài Tập Lập trình website quản lí