Báo cáo thực tập lập trình web với reactjs

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 WEB VỚI REACTJS Công ty thực tập : TMA Solutions Người phụ trách : Võ Chí Tuấn Thực tập sinh : Nguyễn Hoàng Nam Báo cáo thực tập Nguyễn Hoàng Nam TP Hồ Chí Minh, tháng 05 năm 2023 Báo cáo thực tập Nguyễn Hoàng Nam LỜI MỞ ĐẦU Ngày nay, với bùng nổ internet phát triển nhanh chóng xã hội, ứng dụng web trở thành phần thiếu sống người Các ứng dụng web đáp ứng nhu cầu ngày đọc báo tin tức, giải trí, mạng xã hội, xem phim, trò chuyện đáp ứng nhu cầu công việc bán hàng, hỗ trợ quản lý thơng tin Vì thế, lập trình web xu hướng nghề nghiệp có nhu cầu tuyển dụng cao Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia phát triển mơi trường chun nghiệp, em có dự định thực tập Vì vậy, em định chọn cơng ty TMA Solutions – Công ty TNHH Giải pháp Phần mềm Tường Minh, môi trường lý tưởng, đại, chuyên nghiệp nơi giúp em thực dự định Báo cáo thực tập Nguyễn Hoàng Nam LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TMA Solutions – Công ty TNHH Giải pháp Phần mềm Tường Minh tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, em tiếp thu kiến thức quan trọng, kỹ làm việc chuyên nghiệp, cách giải vấn đề Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Võ Chí Tuấn hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với mơi trường Cảm ơn anh Ơn Đình Khang training ReactJS, hỗ trợ em nhiều vấn đề quy trình cách xây dựng ứng dụng web hồn chỉnh thời gian qua Cảm ơn anh Nguyễn Nhật Hùng anh Lưu Công Dương quan tâm, giúp đỡ em gặp khó khăn, cung cấp cho em kiến thức công nghệ nhắc nhở thiếu sót em Em xin chân thành 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 cho em thực báo cáo Nguyễn Hoàng Nam TP Hồ Chí Minh, ngày 05 tháng 05 năm 2023 Báo cáo thực tập Nguyễn Hoàng Nam NHẬN XÉT CỦA KHOA Báo cáo thực tập Nguyễn Hoàng Nam MỤC LỤ LỜI MỞ ĐẦU LỜI CẢM ƠN 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 1.1 Giới thiệu công ty TMA Solutions 1.2 Sản phẩm công ty .7 CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty kỹ công ty .8 2.2 Nghiên cứu kỹ thuật 2.2.1 Các công cụ làm việc 2.2.2 Tham gia buổi training 2.2.3 Tìm hiểu ReactJS framework Bootstrap .9 2.2.4 Thực dự án .10 2.2.5 Lịch làm việc 11 CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN .14 3.1 Dự án tham gia .14 3.2 Kế hoạch triển khai 15 3.2.1 Xây dựng UI cho hệ thống tra cứu keyword 15 3.2.2 Research ChatGPT 15 3.2.3 Xây dựng UI cho hệ thống quản lý test 16 3.3 Kết đạt 16 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC .18 TÀI LIỆU THAM KHẢO 19 TỔNG KẾT 20 Báo cáo thực tập Nguyễn Hồng Nam CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP Hình 1 Logo cơng ty 1.1 Giới thiệu công ty TMA Solutions TMA Solutions thành lập năm 1997 Việt Nam, công ty hàng đầu Việt Nam phát triển gia công phần mềm Với phát triển vững mạnh suốt 25 năm qua, TMA Solutions 16 năm qua liên tiếp lọt top 10 công ty FinTech, AI IoT Được nhiều tờ báo nước thường xuyên đưa tin TMA Solutions có chi nhánh Việt Nam (6 thành phố Hồ Chí Minh thành phố Quy Nhơn) với văn phịng nước ngồi (Mỹ, Canada, Pháp, Nhật, Úc, Singapore) với đội ngũ 4000 kỹ sư tài năng, nhiệt huyết Với 10 năm đầu tư mạnh mẽ vào phát triển công nghệ mới, TMA cung cấp cho khách hàng nhiều nước sản phẩm giải pháp tối ưu ứng dụng công nghệ như: Khoa học liệu, Trí tuệ nhân tạo, Dữ liệu lớn, IoT… giúp khách hàng ứng dụng công nghệ cách hiệu chi phí thấp Báo cáo thực tập Nguyễn Hồng Nam 1.2 Sản phẩm cơng ty TMA Solutions chuyên cung cấp dịch vụ giải pháp liên quan nhiều lĩnh vực đời sống tài – ngân hàng, thương mại điện tử, bất động sản, bảo hiểm, viễn thông, giáo dục, … TMA Solutions đối tác tin cậy có nhiều năm kinh nghiệm thực dự án lớn phức tạp với công nghệ với 100 khách hàng đến từ 30 quốc gia giới thị trường Bắc Mỹ, Châu Âu, Nhật Bản, Hàn Quốc, Ấn Độ, … Có thể kể đến số khách hàng truyền thống từ nhiều năm qua TMA Solutions Avaya, Nokia, Mitel, … Ngoài đối tác gia cơng cho cơng ty nước ngồi, TMA cịn tự phát triển nhiều sản phẩm thơng qua cơng ty thành viên TMA Innovation ứng dụng rộng rãi thu phản hồi tích cực đem lại lợi nhuận cao Báo cáo thực tập Nguyễn Hoàng Nam CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Lập trình web với ReactJS” nhằm mục đích giúp sinh viên thực tập học hỏi, nghiên cứu thêm ReactJS công nghệ Đồ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 chuyên 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, giá trị cốt lõi, quy trình làm việc xử lý công việc, cải thiện kỹ mềm - Được nghe trainer giới thiệu cơng ty, q trình thành lập phát triển, quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty Cách thức xử lý vấn đề phát sinh lúc làm việc từ vấn đề nhân sự, pháp lý đến máy móc … - 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ỹ mềm Kết quả: Hiểu thêm cơng ty, q trình thành lập phát triển, giá trị cốt lõi Có thêm kỹ mềm giúp ích 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ác 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 q trình làm việc Báo cáo thực tập Nguyễn Hồng Nam o Tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số GIT – hệ thống quản lý phiên phân tán; Visual Studio Code – phần mềm hữu ích phổ biến với lập trình viên với đặc điểm đơn giản, gọn nhẹ, dễ dàng cài đặt; Skype – ứng dụng hỗ trợ cho việc giao tiếp, chia sẻ tài liệu - Thực hiện: Thực hành sử dụng phần mềm nêu - Kết quả: Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với 2.2.2 Tham gia buổi training - Thời gian: buổi Thời lượng khoảng 1h 30 phút buổi - Nội dung: Các buổi training chia sẻ cho thực tập sinh chủ đề như: o Các quy định bảo mật o Cách thức giao tiếp hình thức viết email o Cách làm việc nhóm o Quy trình phát triển - Thực hiện: Tham gia đầy đủ buổi training - Kết quả: o Nắm quy định công ty o Học thêm kiến thức kỹ mềm 2.2.3 Tìm hiểu ReactJS framework Bootstrap - Thời gian: ngày - Nội dung: Các kiến thức ReactJS để tạo phía giao diện ứng dụng web Đồng thời sử dụng framework Bootstrap để tinh chỉnh giao diện o Ôn tập kiến thức ReactJS  Nắm kiến thức ReactJS (component, state, props, react router, ) Tìm hiểu thêm React Hooks, State Management (Redux), Formik Yup (Quản lý Form) Báo cáo thực tập Nguyễn Hồng Nam  Tìm hiểu kiến thức TypeScript o Tìm hiểu Bootstrap  Bootstrap framework front-end miễn phí giúp người dùng phát triển web nhanh dễ dàng Bao gồm mẫu thiết kế dựa HTML CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, hình ảnh  Bootstrap giúp dễ dàng tạo thiết kế website responsive  Tiến hành cài đặt, sử dụng thành phần đơn giản component, form, button, table… - Thực o Tìm hiểu theo hướng dẫn mentor nội dung nêu o Xây dựng giao diện sử dụng ReactJS áp dụng Bootstrap để tinh chỉnh o Tìm kiếm tài liệu mạng để tìm hiểu thêm - Kết o Hiểu khái niệm lập trình giao diện với ReactJS o Hiểu cách áp dụng Bootstrap với ReactJS o Xây dựng thành công giao diện cho ứng dụng web đơn giản có áp dụng kiến thức tìm hiểu 2.2.4 Thực dự án - Được tham gia vào số dự án như: o Xây dựng UI cho hệ thống tra cứu keyword o Research ChatGPT o Xây dựng UI cho hệ thống quản lý test - Chi tiết dự án nói phần sau Báo cáo thực tập Nguyễn Hoàng Nam 2.2.5 Lịch làm việc Mức độ Tuầ Công việc n hoàn thành - Người hướng dẫn - người hướng dẫn Tìm hiểu cơng ty, cách tổ chức cơng ty - Anh Võ Chí Tuấn Làm quen với cơng cụ - Anh Ơn Đình Khang làm việc công ty - Anh Nguyễn Nhật Huy - Anh Võ Chí Tuấn - Anh Ơn Đình Khang - Anh Nguyễn Nhật Huy - Ôn tập ReactJS - Tiếp tục ơn tập ReactJS - Tìm hiểu TypeScript - Tìm hiểu dự án “Xây - Anh Võ Chí Tuấn dựng UI cho hệ thống tra - Anh Ơn Đình Khang cứu keyword” - Anh Nguyễn Nhật Huy - Nhận xét Tạo kết nối với database local - Xây dựng layout cho Báo cáo thực tập Nguyễn Hồng Nam History Page - Tạo thơng báo cho kiện load, bắt lỗi cho việc load liệu - Anh Võ Chí Tuấn Xây dựng chức Delete, - Anh Ơn Đình Khang link - Anh Nguyễn Nhật Huy Tìm hiểu khái niệm - Anh Võ Chí Tuấn ChatGPT - Anh Lưu Cơng Dương Tiếp tục tìm hiểu cách ứng - Anh Võ Chí Tuấn dụng - Anh Lưu Công Dương hướng dẫn - Anh Võ Chí Tuấn - Tìm hiểu bảo mật - Anh Lưu Công Dương - Thuyết - Anh Võ Chí Tuấn - Anh Lưu Cơng Dương - to Repository API, Show History Detail - Gọi API, load liệu - Tìm hiểu dự án “Research ChatGPT” - Tìm hiểu cách ứng dụng - Tham gia buổi training - Thuyết trình với người hướng dẫn - Tìm hiểu hạn chế - Thuyết trình trình hướng dẫn Báo cáo thực tập với với người người Nguyễn Hoàng Nam - Chỉnh sửa theo đánh giá góp ý người hướng dẫn - - Tìm hiểu dự án “Xây dựng UI cho hệ thống quản - Anh Võ Chí Tuấn lý test” - Anh Ơn Đình Khang Xây dựng structure - Anh Nguyễn Nhật Huy - Anh Võ Chí Tuấn - Anh Ơn Đình Khang - Anh Nguyễn Nhật Huy - Anh Võ Chí Tuấn - Anh Võ Chí Tuấn layout cho dự án - Xây dựng đường dẫn - Xây dựng chức đăng nhập 10 - Xây dựng global component - Tham gia buổi training - Viết báo cáo cho 11 tập - Chỉnh sửa hoàn thành báo cáo 12 - Kết thúc tập Báo cáo thực tập Nguyễn Hoàng Nam CHƯƠNG 3: CHI TIẾT VỀ DỰ ÁN 3.1 Dự án tham gia - Xây dựng UI cho hệ thống tra cứu keyword o Tổng quan  Cho phép người dùng đăng nhập, đăng xuất  Hiện kết tra cứu theo keyword người dùng nhập  Hiển thị lịch sử tra cứu người dùng o Nhiệm vụ giao:  Tìm hiểu source code  Xây dựng History Page cho dự án - Research ChatGPT o Tổng quan  Tra cứu ChatGPT o Nhiệm vụ giao:  ChatGPT gì?  Cách áp dụng  Giới hạn  Bảo mật - Xây dựng UI cho hệ thống quản lý test o Tổng quan  Cho phép người dùng đăng nhập  Load liệu  Cho phép thêm, xóa, sửa liệu o Nhiệm vụ giao  Xây dựng structure layout cho dự án  Xây dựng đường dẫn  Xây dựng chức đăng nhập Báo cáo thực tập Nguyễn Hoàng Nam  Xây dựng global component 3.2 Kế hoạch triển khai 3.2.1 Xây dựng UI cho hệ thống tra cứu keyword - Giai đoạn 1: Tiếp cận dự án Xác nhận tính cần phải xây dựng o Nghe giới thiệu công dụng tính có dự án o Tìm hiểu source code o Xây dựng History Page cho dự án - Giai đoạn 2: Xây dựng tính o Xây dựng History Page  Dựa vào thiết kế cung cấp, xây dựng UI cho History Page  Xử lý kiện load liệu, bắt hiển thị lỗi  Xây dựng chức delete, detail of history, link to Repository API  Gọi API, load liệu - Giai đoạn 3: Báo cáo, chỉnh sửa o Tiến hành báo cáo với người hướng dẫn o Chỉnh sửa kết thúc dự án 3.2.2 Research ChatGPT - Giai đoạn 1: Tìm hiểu, nghiên cứu công nghệ Xác nhận nội dung cần phải trình bày: o Chat GPT gì? o Cách áp dụng o Giới hạn o Bảo mật - Giai đoạn 2: Báo cáo, chỉnh sửa o Hoàn thành báo cáo tổng hợp kiến thức tìm hiểu Báo cáo thực tập Nguyễn Hồng Nam o Thuyết trình với người hướng dẫn o Nghe nhận xét sửa báo cáo 3.2.3 Xây dựng UI cho hệ thống quản lý test - Giai đoạn 1: o Được giới thiệu dự án o Xác nhận nhiệm vụ cần thực - Giai đoạn 2: o Xây dựng structure layout  Xây dựng structure cho dự án  Tạo layout cho trang o Xây dựng layout xử lý logic cho trang đăng nhập  Xây dựng UI  Xây dựng đường dẫn cho trang  Xử lý kiện đăng nhập, bắt hiển thị lỗi o Tạo global component  Sử dụng “mui core” tạo table component - Giai đoạn 3: Báo cáo, chỉnh sửa o Tiến hành báo cáo với người hướng dẫn o Chỉnh sửa kết thúc dự án 3.3 Kết đạt - Xây dựng UI cho hệ thống tra cứu keyword o Hoàn tất UI o Load liệu lịch sử tìm kiếm người dùng, hiển thị chi tiết kết o Hoàn thành chức delete, link to Repository API o Xử lý kiện load, bắt trường hợp lỗi - Research ChatGPT Báo cáo thực tập Nguyễn Hoàng Nam o Đảm bảo đầy đủ mục yêu cầu Tuy nhiên nội dung chưa đầy đủ o Phần thuyết trình chưa tốt o Slide trình bày tạm ổn - Xây dựng UI cho hệ thống quản lý test o Hoàn tất việc xây dựng structure layout cho dự án o Thực logic layout trang đăng nhập:  Xây dựng layout  Xây dựng đường dẫn cho trang  Xử lý kiện đăng nhập, bắt lỗi o Tạo global component cho table Báo cáo thực tập Nguyễn Hoàng Nam CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC - Thao tác lập trình, tư duy, ý tưởng xử lý luồng liệu hiệu - Củng cố kiến thức, nâng cao kỹ lập trình Web Front-end sử dụng ReactJS - Nâng cao khả research, thuyết trình, trình bày slide - Biết nhìn nhận đánh giá thân thơng qua buổi họp Nhìn nhận rút kinh nghiệm để cải thiện công việc, rút ngắn thời gian làm việc - Cải thiện kỹ làm việc nhóm - Học kỹ khác như: kỹ giao tiếp, kỹ viết email, Báo cáo thực tập Nguyễn Hoàng Nam TÀI LIỆU THAM KHẢO [1] R Router, "React Router," [Online] Available: https://reactrouter.com/en/main [2] F O Source, "Getting Started - React," [Online] Available: https://legacy.reactjs.org/docs/getting-started.html [3] w3schools, "TypeScript Tutorial," [Online] Available: https://www.w3schools.com/typescript/ [4] OpenAI, "Introduction," [Online] Available: https://platform.openai.com/docs/introduction [5] Bootstrap, "Introduction," [Online] Available: https://getbootstrap.com/docs/5.0/getting-started/introduction/ [6] S Overflow, "Stack Overflow," [Online] Available: https://stackoverflow.com/ Báo cáo thực tập Nguyễn Hoàng Nam