BÁO cáo THỰC tập REACTJS lập TRÌNH WEB

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 REACTJS LẬP TRÌNH WEB Công ty thực tập: UNBOXX Người phụ trách: Nguyễn Tấn Diệu Thực tập sinh: Nguyễn Lê Trung Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp LỜI MỞ ĐẦU Hiện nay, việc mua sắm trực tuyến trang thương mại điện tử ngày trở nên phổ biến, từ mặt hàng gia dụng thường ngày đến chăm sóc sức khỏe hay dịch vụ pháp lý, tài Trong tương lai, lĩnh vực dự đốn trở thành cách mạng đại cơng nghệ, thay đổi hồn tồn cách thức mua bán hàng hóa truyền thống Cơng nghệ Web hầu hết công ty sử dụng phát triển, với đời React Facebook giúp thiết kế UI dễ dàng so với Angular.Vì thế, em định chọn lập trình Web làm định hướng cho việc học tập 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 làm Web mơi trường chun nghiệp, định là.Vì vậy, em định chọn Unboxx - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Unboxx 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, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để thiết kế UI cho trang thương mại điện tử 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 chúng em hồn thành đợt thực tập Đặc biệt cảm ơn anh Nguyễn Tấn Diệu, training React, hướng dẫn, giúp đỡ cho chúng 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 training cho chúng em kiến thức quan trọng JavaScript, CSS3,HTML5 để làm sản phẩm thời gian qua Cũng xin 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 em làm báo cáo Nguyễn Lê Trung TP HCM, ngày 24 tháng 12 năm 2021 Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp NHẬN XÉT CỦA KHOA MỤC LỤC Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp CHƯƠNG 1: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP Giới thiệu công ty Unboxx .5 Sản phẩm công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 2.2 Các công cụ làm việc Tìm hiểu ngơn ngữ Reactjs 10 Thực Project 11 Lịch làm việc 11 CHƯƠNG CHI TIẾT PROJECT 13 Giới thiệu LayoutBuilder 13 Hình ảnh giao diện LayoutBuilder 13 2.1 2.2 Tạo Component Basic Banner 13 Lưu hình ảnh banner vào thư viện 14 TÀI LIỆU THAM KHẢO 15 TỔNG KẾT 16 CHƯƠNG 1: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP Giới thiệu công ty Unboxx Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp Unboxx thành lập năm 2019, công ty xây đựng sàn thương mại điện tử tập trung vào ngách thời trang cho giới trẻ (Local Branch), Unboxx nơi tập trunng cách nhà bán hàng thời trang cho giới trẻ Mục tiêu công ty tạo sản phẩm kết nối thương hiệu thời trang thị trường Việt Nam để từ người dùng lựa chọn sản phẩm đa dạng phong phú Sản phẩm công ty - Unboxx tạo sàn thương mại điện tử, tập trung kết nối nhà bán hàng sản phẩm thời trang danh cho giới trẻ, bao gồm ứng dụng Web App - Một số hình ảnh sản phẩm cơng ty Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Xây dựng LayoutBuilder” nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình Frontend Web, đồ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 game chun nghiệp 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, 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 : Hiểu thêm cơng ty Unboxx, 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 Nghiên cứu kỹ thuật 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 trình làm việc Trong thời gian này, supervisor 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ố Gitlab để quản lí source code – Jira sử dụng làm việc nhóm, Source Tree - cơng cụ hỗ trợ quản lí code Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp 2.2 công cụ với nhau, so với việc dung IDE Tìm hiểu ngơn ngữ Reactjs Thời gian : 10 ngày (2 tuần) Nội dung: Các kiến thức JavaScript ReactJS Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp - Các lý thuyết JavaScript Kiến thức ngôn ngữ JavaScript Nắm vững lý thuyết const, let, var JavaScript Bên cạnh cịn có lý thuyết: function, promise, - Kiến thức React: Nắm khái niệm Virtual DOM React Lý thuyết React Hook Responsive với React Bootstrap - Tìm hiểu sử dụng thư viện Antd Tailwind Thực hiện: - Tham gia đầy đủ buổi trainning - Làm tập thực hành javascript bản, React, - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: - Hiểu khái niệm lập trình ReactJS - Biết cách tổ chức xây dựng web page Thực Project Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp Sau tháng training thực hành, thực tập sinh nắm kiến thực React, JavaScript, HTML5,CSS thư viện hỗ trợ Antd, TailWind Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project LayoutBuilder Reactjs Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc Cài đặt môi trường làm việc 2,3,4 React Người hướng dẫn Mức độ hoàn thàn h Nhận xét người hướng dẫn Anh Nguyễn Tấn Diệu + JavaScript + Css (thư viện Tailwind) +React framework + Antd framework Review Anh Nguyễn Tấn Diệu 6,7,8 LayoutBuilder Anh Nguyễn Tấn Diệu + LayoutBuilder Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp + Review LayoutBuilder Viết doc CHƯƠNG CHI TIẾT PROJECT Giới thiệu LayoutBuilder LayoutBuilder nơi để nhà bán hàng lựa chọn tự thiết kế cho gian hàng họ, tạo layout có sẵn để nhà bán hàng thiết kế cách dễ dàng cho gian hàng Nhà bán hàng thiết kế từ banner hình ảnh có sẵn Hình ảnh giao diện LayoutBuilder 2.1 - Tạo Component Basic Banner Tạo form cho người dùng điền url ảnh banner lên Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp - Sau người dùng nhập đầy đủ thông tin alt,url,image,classes nhấn save lưu hình ảnh banner - Người dùng kéo thả tuỳ vào vị trí muốn 2.2 - Lưu hình ảnh banner vào thư viện Hình ảnh banner sau tạo lưu vào thư viện Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp TÀI LIỆU THAM KHẢO Reactjs Bootrap https://getbootstrap.com https://reactjs.org/ Framework Css https://tailwindcss.com/ Framework Antd https://ant.design/ Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp TỔNG KẾT Như vậy, sau tháng thực tập Em tìm hiểu phát triển giao diện Website kết hợp với Framework hỗ trợ kiến thức quan trọng responsive Website, xây dựng giao diện theo yêu cầu đặt Chân thành cảm ơn anh chị công ty Unboxx tạo điều kiện giúp đỡ em học tập hồn thành khố thực tập Cảm ơn anh Nguyễn Tấn Diệu giúp em hoàn thành báo cáo Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp ... Trung Báo cáo Thực Tập Doanh Nghiệp Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Xây dựng LayoutBuilder” nhằm mục đích giúp sinh viên thực tập. .. ReactJS - Biết cách tổ chức xây dựng web page Thực Project Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp Sau tháng training thực hành, thực tập sinh nắm kiến thực React, JavaScript, HTML5,CSS thư... công ty Unboxx tạo điều kiện giúp đỡ em học tập hồn thành khố thực tập Cảm ơn anh Nguyễn Tấn Diệu giúp em hoàn thành báo cáo Nguyễn Lê Trung Báo cáo Thực Tập Doanh Nghiệp