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ớ
Trang 1
1
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
Trang 3
3
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
<TpHCM, tháng 06 năm 2022>
Trang 4NHẬN XÉT CỦA KHOA
Trang 5
5
MỤC LỤC
Bài Tập Lập trình website quản lí sản phẩm
Trang 6Chươ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
Trang 7
7
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
Trang 82.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 :
trì tái sử dụng Phân chia các Components trong ReactJS
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
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
đ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/.)
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 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
Trang 9
9
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 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 :
viên trong team
Kết quả :
- 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
lightBaseTheme muiTheme object chứa các khóa:
Trang 10Thực hiện :
viên trong team
Kết quả :
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
Kết qủa:
- 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
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-Scroll-
Link sau khi Deploy: https://marvelous-salamander-04dee3.netlify.app/
Trang 11
11
3 Lịch làm việc
Tháng Công việc Người hướng dẫn Mức độ
hoàn thành
Nhận xét của người hướng dẫn
website quản lí sản phẩm MiniMart
Anh Lê Hữu Tiến Anh Trần Đức Huy
95%
3
Code Newfeeds Tính năng Innifial Scroll Recycle Dom
95%
4
- Start dự án công ty building website Hahalolo
95%
Trang 12TỔ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 Front-End, 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