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: 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 phát triển ngày nhanh kinh tế với tiến đại khoa học, công nghệ Mức sống người dân ngày cải thiện nên nhu cầu mua sắm, giải trí thơng qua thiết bị công nghệ tăng theo Những ngành nghề liên quan tới công nghệ thông tin ngày phát triển mạnh mẽ để bắt kịp với xu hướng Trong đó, lập trình website dần trở nên phổ biến Hòa vào xu chung giới, ngành lập trình ứng dụng web Việt Nam khơng ngừng phát triển, để theo kịp, hịa nhập cạnh tranh với công ty hàng đầu ứng dụng web giới Bên cạnh công ty trẻ tuổi nước, công ty lớn giới gia nhập vào thị trường Việt Nam, góp phần lớn vào phát triển tích cực ngành lập trình website Việt Nam Chính lí trên, sau ba năm học tập nhà trường, với mong muốn học hỏi thêm kinh nghiệm phát triển kỹ thân để xây dựng ứng dụng web nhằm đáp ứng nhu cầu không ngừng đổi nâng cao khách hàng Em định lựa chọn công ty Unicloud làm nơi thực tập Em tin với môi trường đại, chuyên nghiệp đầy động nỗ lực thân, Unicloud bệ phóng để tiếp bước cho hành trình phát triển ứng dụng web thân Sinh viên thực 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ó hội thực tập cơng ty Chỉ sau thời gian ngắn, nhờ dẫn tận tình anh leader, anh mentor học hỏi từ bạn thực tập sinh khác, em tiếp thu nhiều kiến thức mẻ để xây dựng website Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian, công sức để giúp đỡ em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Đặng Quang Trung, training cho em kiến thức React, hướng dẫn, giúp đỡ em nhiệt tình em gặp khó khăn cơng việc, giúp em xóa bỏ trở ngại việc làm quen với môi trường mới; cảm ơn chị Lâm Ngọc Quyên dẫn cho em cách làm báo cáo, lên kế hoạch thuyết trình - kỹ khơng thể thiếu q trình làm việc; cảm ơn anh Đồn Viết Thuận, anh Huỳnh Tuấn Kiệt, training cho em kiến thức quan trọng Bootstrap để tạo sản phẩm hoàn thiện thời gian qua Cũng xin phép cảm ơn thầy cô 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áo cáo 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ông ty 6 CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty kỹ 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 quy trình làm việc cơng ty 2.2.3 Tìm hiểu ReactJS 2.3 Thực dự án 2.4 Lịch làm việc 7 7 8 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 3.1.3 Kết 3.2 Website Sliving 3.2.1 Giới thiệu 3.2.2 Thực 3.2.3 Kết 3.3 Website Unicloud Career 3.3.1 Giới thiệu 3.3.2 Thực 3.3.3 Kết 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 Công ty CP Đầu tư Thương mại Sunshine Tech thuộc Tập đoàn Sunshine (Sunshine Group) thành lập ngày 12/06/2016, Công ty CP Tập đồn Cơng nghệ Unicloud có 300 thành viên trụ sở Hà Nội chi nhánh TP HCM, công ty Unicloud Investment Nanochip Unicloud sở hữu hệ sinh thái Công nghệ toàn diện ứng dụng phủ khắp lĩnh vực trọng yếu kinh tế Tài 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 thực tập chi nhánh HCM Unicloud 1.2 Sản phẩm công ty Unicloud cung cấp giải pháp phần mềm từ Web, Desktop App, Mobile App, AI lập trình nhúng với thiết bị IoT lĩnh vực cốt lõi: Digital Banking Platform (giải pháp cho lĩnh vực tài 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), VR (ứng dụng Thực tế ảo) Một số sản phẩm bật 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, 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 cơng ty với vị trí ứng tuyển thực tập sinh Frontend (ngôn ngữ ReactJS) Trong thời gian thực tập vừa qua, em anh chị tạo điều kiện để tiếp xúc với tồn quy trình để hoàn thiện website thành sản phẩm, đồng thời, phát triển thêm cho thân kỹ mềm cần thiết làm việc nhóm, thuyết trình, phân chia cơng việc giao tiếp Em có hội trải nghiệm, học tập khám phá môi trường phát triển ứng dụng chun nghiệp 2.1 Tìm hiểu cơng ty kỹ công ty Thời gian: ngày 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 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 quả: Hiểu thêm công ty Unicloud, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.2 Nghiên cứu kỹ thuật 2.2.1 Công cụ làm việc Thời gian: ngày 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, anh mentor 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 Một số phần mềm 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 + Visual Studio Code, Visual Studio: IDE hữu ích 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 phần mềm nêu Thực tập doanh nghiệp Kết + Hiểu chế vận hành sử dụng thành thạo, trơn tru công cụ phục vụ cho việc phát triển ứng dụng web nhanh 2.2.2 Tìm hiểu quy trình làm việc cơng ty Thời gian: ngày Nội dung: Tìm hiểu quy trình làm việc theo mơ hình Scrum-Agile + Được anh chị công ty hướng dẫn, dạy thử tham dự vào quy trình làm việc công ty Thực hiện: + Thực hành tham gia vào giai đoạn mơ hình Kết quả: + Có thêm kiến thức thực hành nhuần nhuyễn cơng đoạn 2.2.3 Tìm hiểu ReactJS Thời gian: 10 ngày Nội dung + Tìm hiểu lập trình Frontend với ReactJS Thực + Tìm hiểu lập trình frontend, HTML, CSS, SCSS, Javascript, Bootstrap + Tìm hiểu chung ReactJS + Tìm hiểu Component, Lifecycle, Hook, Sharing Data ReactJS + Tìm hiểu Virtual DOM cách DOM render ReactJS + Tìm hiểu làm việc với API ReactJS Kết quả: + Nắm vững trả lời câu hỏi Mentor, làm quen ngôn ngữ ReactJS 2.3 Thực dự án Trong tháng thực tập đầu tiên, hướng dẫn nhiệt tình anh chị mentor cố gắng, không ngừng học hỏi, em trang bị kiến thức tảng để xây dựng sản phẩm hồn chỉnh Trong tháng thứ hai, em công ty cho phép tham gia vào q trình xây dựng project 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 độ hồn thành Nhận xét + Tìm hiểu 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 + Tìm hiểu kiến thức nâng cao ngôn ngữ anh Đặng Quang Trung 100% Tốt Thực tập doanh nghiệp ReactJS + 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 ReactJS, NodeJS Figma sang code + Tham gia buổi training công nghệ + Tham gia vào 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 giải pháp thuộc hệ sinh thái công ty Unicloud 3.1.2 Thực + Làm việc theo nhóm bạn thực tập sinh khác + Tự tìm hiểu tài liệu nhận trợ giúp, hỏi đáp từ anh chị mentor 3.1.3 Kết + Hoàn thành tiến độ giao 3.2 Website Sliving 3.2.1 Giới thiệu + Dự án giới thiệu giải pháp nhà thơng minh cơng ty + Mục đích ứng dụng 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ế hộ 3.2.2 Thực + Làm việc theo nhóm + Làm việc dựa theo tài liệu cung cấp thực kết mong muốn 3.2.3 Kết + Hoàn thành tiến độ giao 3.3 Website Unicloud Career 3.3.1 Giới thiệu + Dự án giới thiệu việc tuyển nhân công ty + Mục đích giới thiệu cơng ty vị trí thơng tin cần thiết cho cho nhu cầu, mong muốn làm việc cho công ty 3.3.2 Thực + Làm việc theo nhóm + Làm việc dựa theo tài liệu cung cấp thực kết mong muốn 3.3.3 Kết + Hoàn thành tiến độ giao TỔNG KẾT Như vậy, vòng hai tháng, em học hỏi trải nghiệm nhiều kiến thức bổ ích Cơng ty giúp em học hỏi thêm nhiều công nghệ mới, phổ biến ngành ReactJS, Bootstrap, NextJS, Đồng thời, biết cách tổ chức làm việc nhóm, thảo luận giúp đỡ công việc, rèn khả làm việc áp lực tính tự lập cơng việc Ngồi ra, với trải nghiệm 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 làm sau Chân thành cảm ơn giúp đỡ anh chị dự án đặc biệt anh Đặng Quang Trung trainer người hướng dẫn cho em ReactJS anh Huỳnh Tuấn Kiệt – trainer NodeJS, ExpressJS 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 tập Đặc biệt, em vô biết ơn 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 dạy cho em kiến thức tảng để tham gia khóa thực tập cơng ty Một lần 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 ... quả: + Có thêm kiến thức thực hành nhuần nhuyễn cơng đoạn 2.2.3 Tìm hiểu ReactJS Thời gian: 10 ngày Nội dung + Tìm hiểu lập trình Frontend với ReactJS Thực + Tìm hiểu lập trình frontend, HTML, CSS,... NỘI DUNG THỰC TẬP Em thực tập công ty với vị trí ứng tuyển thực tập sinh Frontend (ngôn ngữ ReactJS) Trong thời gian thực tập vừa qua, em anh chị tạo điều kiện để tiếp xúc với tồn quy trình để... bắt kịp với xu hướng Trong đó, lập trình website dần trở nên phổ biến Hòa vào xu chung giới, ngành lập trình ứng dụng web Việt Nam khơng ngừng phát triển, để theo kịp, hịa nhập cạnh tranh với công