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