Tài liệu Lập trình website với reactjs (báo cáo thực tập)

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH 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 Đề tài: Lập trình website với ReactJS Giảng viên hướng dẫn: .... Sinh viên thực hiện: 1. Nguyễn Anh Hào TP. HỒ CHÍ MINH, 6/2022 Thực tập doanh nghiệp NHẬN XÉT CỦA KHOA …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Thực tập doanh nghiệp LỜI NÓI ĐẦU Hiện nay, với sự phát triển ngày càng nhanh của nền kinh tế cùng với những tiến bộ hiện đại của khoa học, công nghệ. Mức sống của người dân ngày càng được cải thiện nên nhu cầu mua sắm, giải trí thông qua các thiết bị công nghệ cũng tăng theo. Những ngành nghề liên quan tới công nghệ thông tin ngày càng phát triển mạnh mẽ để bắt kịp với xu hướng trên. Trong đó, lập trình trên website đang dần trở nên phổ biến. Hòa vào xu thế chung của thế giới, ngành lập trình ứng dụng web của Việt Nam đã và đang không ngừng phát triển, để theo kịp, hòa nhập và cạnh tranh với những công ty hàng đầu về ứng dụng web trên thế giới. Bên cạnh những công ty trẻ tuổi trong nước, những công ty lớn trên thế giới cũng gia nhập vào thị trường Việt Nam, góp phần rất lớn vào sự phát triển tích cực của ngành lập trình website tại Việt Nam. Chính vì những lí do trên, sau hơn ba năm học tập tại nhà trường, với mong muốn học hỏi thêm kinh nghiệm và phát triển kỹ năng của bản thân để có thể xây dựng được những ứng dụng web nhằm đáp ứng nhu cầu không ngừng đổi mới và nâng cao của khách hàng. Em đã quyết định lựa chọn công ty Unicloud làm nơi thực tập. Em tin rằng với môi trường hiện đại, chuyên nghiệp và đầy năng động cùng sự nỗ lực của bản thân, Unicloud sẽ là bệ phóng để tiếp bước cho hành trình phát triển ứng dụng web của bản thân mình. Sinh viên thực hiện Nguyễn Anh Hào Thực tập doanh nghiệp LỜI CẢM ƠN Trân trọng gửi lời cảm ơn đến Công ty Unicloud chi nhánh TP.HCM đã tạo điều kiện cho em có cơ hội được thực tập tại công ty. Chỉ sau một thời gian ngắn, nhờ sự chỉ dẫn tận tình của anh leader, anh mentor và học hỏi từ các bạn thực tập sinh khác, em đã tiếp thu được nhiều kiến thức mới mẻ để có thể xây dựng được một website cơ bản. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian, công sức để giúp đỡ em hoàn thành đợt thực tập này. Đặc biệt cảm ơn anh Đặng Quang Trung, đã training cho em kiến thức về React, hướng dẫn, giúp đỡ em nhiệt tình khi em gặp khó khăn trong công việc, giúp em xóa bỏ trở ngại trong việc làm quen với môi trường mới; cảm ơn chị Lâm Ngọc Quyên đã chỉ dẫn cho em về cách làm báo cáo, lên kế hoạch và thuyết trình - những kỹ năng không thể thiếu trong quá trình làm việc; cảm ơn các anh Đoàn Viết Thuận, anh Huỳnh Tuấn Kiệt, đã training cho em những kiến thức quan trọng về Bootstrap để có thể tạo ra sản phẩm hoàn thiện trong thời gian qua. Cũng xin phép cảm ơn các thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện giúp em hoàn thành bài báo cáo này. Tp. Hồ Chí Minh, ngày 16 tháng 06 năm 2022 Nguyễn Anh Hào Thực tập doanh nghiệp CHƯƠNG 1: GIỚI THIỆU CÔNG TY 1.1. Giới thiệu công ty Unicloud 1.2. Sản phẩm của công ty 6 6 6 CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 2.2. Nghiên cứu kỹ thuật 2.2.1. Công cụ làm việc 2.2.2. Tìm hiểu về quy trình làm việc của công ty 2.2.3. Tìm hiểu về ReactJS 2.3. Thực hiện dự án 2.4. Lịch làm việc 7 7 7 7 8 8 8 9 CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN 3.1. Website Unicloud 3.1.1. Giới thiệu 3.1.2. Thực hiện 3.1.3. Kết quả 3.2. Website Sliving 3.2.1. Giới thiệu 3.2.2. Thực hiện 3.2.3. Kết quả 3.3. Website Unicloud Career 3.3.1. Giới thiệu 3.3.2. Thực hiện 3.3.3. Kết quả 11 11 11 11 11 11 11 11 11 11 11 12 12 TỔNG KẾT 12 TÀI LIỆU THAM KHẢO 13 Thực tập doanh nghiệp CHƯƠNG 1: GIỚI THIỆU CÔNG TY 1.1. Giới thiệu công ty Unicloud Unicloud Group tiền thân là Công ty CP Đầu tư Thương mại Sunshine Tech thuộc Tập đoàn Sunshine (Sunshine Group) được thành lập ngày 12/06/2016, Công ty CP Tập đoàn Công nghệ Unicloud hiện có hơn 300 thành viên tại trụ sở Hà Nội và chi nhánh TP HCM, cùng 2 công ty con là Unicloud Investment và Nanochip. Unicloud sở hữu một hệ sinh thái Công nghệ toàn diện ứng dụng phủ khắp các lĩnh vực trọng yếu của nền kinh tế như Tài chính Ngân hàng, Chứng khoán, Bất động sản, Smart & IoT, Kinh tế chia sẻ, Chính phủ điện tử. Hiện tại, em đang thực tập tại chi nhánh HCM của Unicloud. 1.2. Sản phẩm của công ty Unicloud cung cấp giải pháp phần mềm từ Web, Desktop App, Mobile App, AI cho đến lập trình nhúng với các thiết bị IoT trong 4 lĩnh vực cốt lõi: Digital Banking Platform (giải pháp cho lĩnh vực tài chính ngân hàng), Smart City (thành phố thông minh & Chính phủ điện tử), Digital Transformation (Giải pháp chuyển đổi số doanh nghiệp), và VR (ứng dụng Thực tế ảo). Một số sản phẩm nổi bật của công ty như: hệ thống máy giao dịch ngân hàng tự động STM, hệ phần mềm UniCAT, các thiết bị công tắc điều khiển thông minh,... Thực tập doanh nghiệp CHƯƠNG 2: NỘI DUNG THỰC TẬP Em thực tập tại công ty với vị trí ứng tuyển là thực tập sinh Frontend (ngôn ngữ ReactJS). Trong thời gian thực tập vừa qua, em đã được anh chị tạo điều kiện để tiếp xúc với toàn bộ quy trình để hoàn thiện một website thành sản phẩm, đồng thời, phát triển thêm cho bản thân các kỹ năng mềm cần thiết như làm việc nhóm, thuyết trình, phân chia công việc và giao tiếp. Em đã có cơ hội được trải nghiệm, học tập và khám phá trong môi trường phát triển ứng dụng chuyên nghiệp. 2.1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian: 1 ngày 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ả: Hiểu thêm về công ty Unicloud, quá trình thành lập và phát triển. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2.2. Nghiên cứu kỹ thuật 2.2.1. Công cụ làm việc Thời gian: 4 ngày 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, anh mentor đã 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. Một số phần mềm trong số đó như: + JIRA: Sử dụng để quản lý tiến độ công việc. + Git – công cụ quản lý source code trực quan với nhiều tính năng. + Visual Studio Code, Visual Studio: các IDE hữu ích và phổ biến với lập trình viên. + Figma: công cụ thiết kế giao diện web. + Postman: Testing APIs. Thực hiện: + Thực hành sử dụng các phần mềm đã nêu trên. Thực tập doanh nghiệp Kết quả + Hiểu cơ chế vận hành và sử dụng thành thạo, trơn tru các công cụ trên phục vụ cho việc phát triển ứng dụng web nhanh hơn. 2.2.2. Tìm hiểu về quy trình làm việc của công ty Thời gian: 3 ngày Nội dung: Tìm hiểu về các quy trình làm việc theo mô hình Scrum-Agile. + Được các anh chị trong công ty hướng dẫn, chỉ dạy và thử tham dự vào quy trình làm việc của công ty. Thực hiện: + Thực hành tham gia vào các giai đoạn của mô hình. Kết quả: + Có thêm kiến thức và thực hành nhuần nhuyễn các công đoạn. 2.2.3. Tìm hiểu về ReactJS Thời gian: 10 ngày Nội dung + Tìm hiểu về lập trình Frontend với ReactJS. Thực hiện + Tìm hiểu lập trình frontend, HTML, CSS, SCSS, Javascript, Bootstrap. + Tìm hiểu chung về ReactJS cơ bản. + Tìm hiểu về Component, Lifecycle, Hook, Sharing Data trong ReactJS. + Tìm hiểu về Virtual DOM và cách DOM render của ReactJS. + Tìm hiểu về làm việc với API trong ReactJS. Kết quả: + Nắm vững và trả lời được các câu hỏi của Mentor, làm quen được ngôn ngữ ReactJS. 2.3. Thực hiện dự án Trong hơn 1 tháng thực tập đầu tiên, dưới sự hướng dẫn nhiệt tình của anh chị mentor và bằng sự cố gắng, không ngừng học hỏi, em đã trang bị được các kiến thức nền tảng để có thể xây dựng sản phẩm hoàn chỉnh . Trong tháng thứ hai, em được công ty cho phép tham gia vào quá trình xây dựng project của công ty. Thực tập doanh nghiệp 2.4. Lịch làm việc Tuần Công việc Người hướng dẫn Mức độ hoàn thành Nhận xét 1 + Tìm hiểu về chị Lâm Ngọc Quyên, anh100% công ty. Huỳnh Tuấn Kiệt. Tốt + Học cách trao đổi qua email. + Sử dụng công cụ Jira để kiểm tra tiến độ công việc + Học cách làm việc nhóm thông qua Git 2 + Tìm hiểu các kiến thức nâng cao về ngôn ngữ anh Đặng Quang Trung 100% Tốt Thực tập doanh nghiệp ReactJS. 3 + Tiếp tục tìm anh Huỳnh Tuấn Kiệt 100% Tốt + Tìm hiểu cách anh Đặng Quang Trung, 100% Tốt chuyển đổi giao anh Nguyễn Đoàn Trọng diện web từ Nghĩa. 100% Tốt hiểu về ReactJS, NodeJS 4 5 Figma sang code. + Tham gia các buổi training về công nghệ. 6 7 8 + Tham gia vào các anh Đặng Quang Trung, dự án thật. + Kiểm tra kiến thức thực tập. anh Huỳnh Tuấn Kiệt. Thực tập doanh nghiệp CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN 3.1. Website Unicloud 3.1.1. Giới thiệu + Là website giới thiệu về các giải pháp thuộc hệ sinh thái của công ty Unicloud. 3.1.2. Thực hiện + Làm việc theo nhóm cùng các bạn thực tập sinh khác. + Tự tìm hiểu tài liệu và nhận sự trợ giúp, hỏi đáp từ các anh chị mentor. 3.1.3. Kết quả + Hoàn thành đúng tiến độ được giao. 3.2. Website Sliving 3.2.1. Giới thiệu + Dự án giới thiệu về giải pháp nhà thông minh của công ty. + Mục đích ứng dụng các công nghệ, kỹ thuật tiên tiến mà công ty đã nghiên cứu, chế tạo vào lắp đặt thực tế trong các căn hộ. 3.2.2. Thực hiện + Làm việc theo nhóm. + Làm việc dựa theo tài liệu được cung cấp và thực hiện đúng kết quả mong muốn 3.2.3. Kết quả + Hoàn thành đúng tiến độ được giao. 3.3. Website Unicloud Career 3.3.1. Giới thiệu + Dự án giới thiệu về việc tuyển nhân sự của công ty. + Mục đích giới thiệu về công ty cũng như những vị trí và thông tin cần thiết cho những ai đang cho nhu cầu, mong muốn được làm việc cho công ty. 3.3.2. Thực hiện + Làm việc theo nhóm. + Làm việc dựa theo tài liệu được cung cấp và thực hiện đúng kết quả mong muốn 3.3.3. Kết quả + Hoàn thành đúng tiến độ được giao. TỔNG KẾT Như vậy, trong vòng hơn hai tháng, em đã được học hỏi và trải nghiệm được nhiều kiến thức bổ ích. Công ty đã giúp em học hỏi được thêm nhiều công nghệ mới, phổ biến trong ngành hiện nay như ReactJS, Bootstrap, NextJS,... . Đồng thời, biết cách tổ chức làm việc nhóm, thảo luận và giúp đỡ nhau trong công việc, rèn được khả năng làm việc dưới áp lực và tính tự lập trong công việc. Ngoài ra, với những trải nghiệm khi được công ty tạo điều kiện cho tham gia vào dự án thực tế đã giúp em tích lũy thêm nhiều kinh nghiệm quý báu cho việc đi làm sau này. Chân thành cảm ơn sự giúp đỡ của các anh chị trong dự án và đặc biệt là anh Đặng Quang Trung trainer cũng chính là người hướng dẫn cho em ReactJS và anh Huỳnh Tuấn Kiệt – trainer NodeJS, ExpressJS và anh Phạm Minh Tuấn – giám đốc chi nhánh, đã nhiệt tình giúp đỡ, tạo điều kiện thuận lợi cho em hoàn thành kỳ thực tập này. Đặc biệt, em vô cùng biết ơn và gửi lời cảm ơn chân thành đến quý thầy cô khoa Công nghệ Phần mềm đã tận tâm chỉ dạy cho em những kiến thức nền tảng để có thể tham gia khóa thực tập của công ty. Một lần nữa em xin chân thành cảm ơn. Thực tập doanh nghiệp TÀI LIỆU THAM KHẢO [1]. Docs Nodejs: https://nodejs.org/docs/latest-v14.x/api/ [2]. Tutorial ReactJS: https://www.youtube.com/watch?v=Ke90Tje7VS0&t=42s [3]. Web Development with Node and Express - Ethan Brown [4]. Node.js By Example - Krasimir Tsonev 12