Báo cáo thực tập lập trình react js

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 REACT.JS Cơng ty thực tập : Công Ty TNHH Kootoro Việt Nam Người phụ trách : Nguyễn Đức Vũ Thực tập sinh : Nguyễn Hồng Vũ TP Hồ Chí Minh, tháng 12 năm 2022 Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 LỜI MỞ ĐẦU Ngày nay, với phát triển nhanh chóng xã hội, công nghệ thông tin trở thành phần thiếu sống người lập trình web số Lập trình web lựa chọn nghề nghiệp xu hướng, phổ biến với bạn học khoa học máy tính kỹ thuật phần mềm, cơng nghệ thơng tin nói chung Lập trình viên web coi vị trí việc làm nhiều triển vọng nhu cầu tuyển dụng dự đoán tiếp tục tăng lên tương lai Và lý để em đưa định cố gắng học chuyên sâu lập trình web biến thành nghề Trải qua q trình học tập trường, em hiểu rõ trình phát triển phần mềm, tư thuật toán giải vấn đề Tuy kiến thức quý báu, để thực tế thân em cần phải trải nghiệm ứng dụng chúng Chính định ấy, em bắt đầu tìm kiếm cơng ty để bắt đầu hành trình thực tập Cơng Ty TNHH Kootoro Việt Nam lựa chọn tốt em, nơi giúp em có trải nghiệm đầy thú vị môi trường làm việc thực tế Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 LỜI CẢM ƠN Đầu tiên, em xin trân trọng gửi lời cảm ơn đến Công ty TNHH Kootoro tạo điều kiện để em bắt đầu hành trình thực tập Trong q trình trải nghiệm mơi trường làm việc công ty, em học nhiều thứ hay cách làm việc, tiếp cận kiến thức mới, cách người giải vấn đề đặc biệt văn hóa cơng ty Trong khoảng thời gian ấy, kiến thức mà em học lần “thực chiến” nói quý báu Những kiến thức giúp em hiểu rõ việc xây dựng khung ứng dụng web hoàn chỉnh, cách thức để giao tiếp lập trình viên Front-end Back-end Đặc biệt, em xin chân thành gửi lời cảm ơn đến anh Nguyễn Đức Vũ hướng dẫn cho em quy trình cách thức để xây dựng nên ứng dụng web hoàn chỉnh, người truyền cảm hứng để em biết đâu nên làm đường phía trước Ngồi ra, em xin gửi lời cảm ơn đến anh, bạn đồng nghiệp nhiệt tình hướng dẫn giải vấn đề mà em gặp q trình hồn thiện dự án Em xin trân thành cảm ơn quý thầy cô khoa Công Nghệ Phần Mềm tạo điều kiện môn học để em trải nghiệm thực tế với doanh nghiệp, dành thời gian quý báo để lắng nghe em báo cáo trình thực tập TP Hồ Chí Minh, ngày 24 tháng 12 năm 2022 Nguyễn Hoàng Vũ Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 NHẬN XÉT CỦA KHOA Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 MỤC LỤC Chương GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu Công ty TNHH Kootoro Việt Nam 1.2 Sản phẩm công ty Chương 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ác công cụ làm việc 2.2.2 Tìm hiểu Framework React.js 2.2.3 Tìm hiểu VueXY Admin Template – React Admin Template 2.3 Thực project 2.4 Lịch làm việc Chương CHI TIẾT VỀ PROJECT 3.1 Giới thiệu ứng dụng 3.2 Thực 3.2.1 Giai đoạn xây dựng khung sườn cho ứng dụng web 3.2.2 Giai đoạn triển khai ứng dụng web TÀI LIỆU THAM KHẢO 12 TỔNG KẾT 13 Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 Nguyễn Đức Vũ Nguyễn Hồng Vũ-18521671 Chương GIỚI THIỆU CƠNG TY THỰC TẬP 1.1 Giới thiệu Công ty TNHH Kootoro Việt Nam Công Ty Kootoro thành lập vào năm 2013 Mỹ thức mắt thị trường Việt Nam vào năm 2015 sản phẩm: ToroG Smart POS máy bán hàng tự động Toro Chúng với mong muốn đem lại giải pháp mua hàng tốn nhanh chóng, tiện lợi đại cho người tiêu dùng Việt Chúng sẵn chào đón hợp tác, phát triển từ đối tác 1.2 Sản phẩm công ty ToroG Smart POS tảng liên kết đa dịch vụ thuộc quyền sở hữu Công ty TNHH Kootoro Việt Nam ToroG Smart POS đời đáp ứng xu hướng thị trường nhu cầu người tiêu dùng ToroG Smart POS giúp cho doanh nghiệp nhỏ vừa, chủ cửa hàng quản lý công việc kinh doanh cách dễ dàng, tiết kiệm chi phí, tinh gọn máy bán hàng marketing Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 Chương NỘI DUNG THỰC TẬP Thực tập với chủ đề “Lập trình React.js nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình Frontend, đồ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 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 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, cách báo cáo tiến độ dự án, cách theo dõi kênh thông tin từ dự án,… Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 Kết quả: Giúp sinh viên hiểu thêm cơng ty Kootoro, 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á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 Trong thời gian này, người phụ trách 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ố Skype – Phần mềm chat, report công việc hàng ngày công ty, Jira – Ứng dụng theo dõi quản lý quy trình phát triển phần mềm, Redmine – Cơng cụ quản lý theo dõi, kiểm soát vấn đề dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, Git – Hệ thống quản lý phiên mã nguồn phân tán, Gitlab – Phần mềm quản lý kho mã nguồn Git,… Thực : Thực hành sử dụng phần mềm nêu Kết quả: Sử dụng tốt q trình phục vụ cho cơng việc 2.2.2 Tìm hiểu Framework React.js Thời gian: 10 ngày (2 tuần) Nội dung: Được training React.js - Tìm hiểu lại kiến thức HTML, CSS Javascript - Tìm hiểu tính Javascript ES6 - Tìm hiểu Nodejs - Tìm hiểu kiến thức React.js - Tìm hiểu React Router – Bộ định tuyến React - Tìm hiểu Redux Redux Toolkit - Tìm hiểu Validate – Yup library Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 - Tìm hiểu cách cấu hình Axios Thực hiện: - Tham gia đầy đủ buổi training công ty - Nghiên cứu tài liệu, làm thực hành Kết quả: - Nắm kiến thức React.js - Có thể tạo ứng dụng nhỏ React.js 2.2.3 Tìm hiểu VueXY Admin Template – React Admin Template Nội dung: Tìm hiểu kiến trúc có template, cách thức vận hành, định dạng lại thành phần có sẵn, cách phân quyền, xác thực liệu trước gửi lên, cách tổ chức source code, redux toolkit, service, thiết lập ban đầu,… - Khái niệm VueXY Vuexy mẫu bảng điều khiển quản trị kết hợp Vuejs, React, Angular, HTML & Laravel Đây Mẫu bảng điều khiển dành cho quản trị viên thân thiện với nhà phát triển tùy chỉnh cao dựa Bootstrap 4, Bootstrap Vue & Reactstrap - Khái niệm Redux toolkit Redux-toolkit package sinh nhằm giải phần lớn vấn đề kể trên, phát triển chủ reduxjs team, giúp viết code redux nhanh gọn, hoàn chỉnh theo quy chuẩn thống - Khái niệm ACL Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 Access Control List (ACL) danh sách câu lệnh dùng để quản lý lưu lượng truy cập đến đi, xác định cách chuyển tiếp ngăn chặn gói tin (packet) thiết bị, áp dụng Interface đó, đệm vào ra, điều khiển Router thực hành động tương ứng cho phép (allow) từ chối (deny) ACL giống loại Tường lửa Stateless, hạn chế, chặn cho phép gói tin truyền từ nguồn đến đích - Khái niệm Yup Yup Javascript object schema validator Cùng lấy ví dụ đơn giản để hiểu yup Cùng hướng tới form đăng nhập bao gồm trường 'username' 'password' Trước gửi request cần kiểm tra xem end-user nhập đầy đủ thông tin kiểu liệu hay không Thực hiện: - Tham gia đầy đủ buổi trainning - Làm tập thực hành thiết kế trang quản lý thông tin nhân với Fake API - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: - Hiểu kiến trúc có VueXY Template - Nắm rõ kiến thức React.js, xây dựng thành công trang quản lý nhân với Fake API 2.3 Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJS package liên quan tháng thứ hai, người hướng dẫn Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 hướng dẫn thực tập sinh áp dụng kiến thức học để tham gia thực chiến dự án công ty Chi tiết thực dự án nói phần sau 2.4 Lịch làm việc Tuần Công việc Người hướng dẫn Mức độ Nhận xét hồn người hướng thành dẫn - Tìm hiểu công ty, cách tổ chức công ty - Làm quen với công cụ làm việc Anh Nguyễn Đức Vũ 100% công ty - Học cách trao đổi, làm việc qua email, Skype - Tìm hiểu kiến thức lập trình web Anh Nguyễn Đức Vũ 100% Anh Nguyễn Đức Vũ 100% Anh Nguyễn Đức Vũ 100% Framework ReactJs - Tìm hiểu kiến thức package Yup, React Toolkit Nguyễn Đức Vũ - Thiết kế UI ba hình quản lý giao Nguyễn Hoàng Vũ-18521671 dịch EDC TPBank - Xây dựng, thiết lập API, dịch vụ cho tính quản lý Anh Nguyễn Đức Vũ 100% Anh Nguyễn Đức Vũ 100% giao dịch - Xây dựng, thiết lập API, dịch vụ cho tính nhập, xuất excel Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 Chương CHI TIẾT VỀ PROJECT 3.1 Giới thiệu ứng dụng ToroG Smart POS tảng liên kết đa dịch vụ thuộc quyền sở hữu Công ty TNHH Kootoro Việt Nam ToroG Smart POS đời đáp ứng xu hướng thị trường nhu cầu người tiêu dùng ToroG Smart POS giúp cho doanh nghiệp nhỏ vừa, chủ cửa hàng quản lý công việc kinh doanh cách dễ dàng, tiết kiệm chi phí, tinh gọn máy bán hàng marketing 3.2 Thực 3.2.1 Giai đoạn xây dựng khung sườn cho ứng dụng web - Nội dung: • Xây dựng router cho trang web • Xây dựng layout chung cho tính • Xây dựng điều hướng cho trang web • Cấu hình axios end point - Kết quả: • Xây dựng đầy đủ router cho trang web • Xây dựng khung giao diện chung, màu sắc điều hướng cho trang 3.2.2 Giai đoạn triển khai ứng dụng web - Nội dung: • Theo dõi kiện TPBank Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 • Xây dựng tính quản lý giao dịch EDC TPBank Void/Reversal • Xây dựng tính quản lý giao dịch EDC TPBank Fail • Xây dựng tính quản lý giao dịch EDC TPBank Master - Kết quả: - Theo dõi kiện TPBank • Xây dựng tính quản lý giao dịch EDC TPBank Void/Reversal Nguyễn Đức Vũ Nguyễn Hồng Vũ-18521671 10 • Xây dựng tính quản lý giao dịch EDC TPBank Fail Nguyễn Đức Vũ Nguyễn Hồng Vũ-18521671 11 • Xây dựng tính quản lý giao dịch EDC TPBank Master Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 12 TÀI LIỆU THAM KHẢO Lý thuyết React.js: https://reactjs.org/docs/getting-started.html [Truy cập lần cuối 01/11/2022] Khóa học React.js miễn phí F8: https://fullstack.edu.vn/ [Truy cập lần cuối 25/10/2022] Tìm hiểu VueXY: https://tinyurl.com/5ckaywy2 [Truy cập lần cuối 01/11/2022)] Nguyễn Đức Vũ Nguyễn Hoàng Vũ-18521671 13 TỔNG KẾT Sau tháng thực tập Công ty TNHH Kootoro, em trang bị cho thêm nhiều kiến thức mảng lập trình web để từ vững bước nghiệp sau Ngồi ra, em cịn học hỏi thêm nhiều thứ khác văn hóa cơng ty, cách thức làm việc, triển khai dự án, mối quan hệ khác Cuối cùng, em xin chân thành cảm ơn Công ty TNHH Kootoro tạo điều kiện cho em thực tập công ty Đặc biệt cảm ơn anh bạn đồng nghiệp tận tình giúp đỡ cho em thời gian thực tập cơng ty Nguyễn Đức Vũ Nguyễn Hồng Vũ-18521671 ... NỘI DUNG THỰC TẬP Thực tập với chủ đề ? ?Lập trình React. js nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình Frontend, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao... Template - Nắm rõ kiến thức React. js, xây dựng thành công trang quản lý nhân với Fake API 2.3 Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJS package liên quan tháng... Git,… Thực : Thực hành sử dụng phần mềm nêu Kết quả: Sử dụng tốt trình phục vụ cho cơng việc 2.2.2 Tìm hiểu Framework React. js Thời gian: 10 ngày (2 tuần) Nội dung: Được training React. js - Tìm