Báo cáo thực tập lập trình react js và xây dựng ứng dụng quản lý chiến dịch doanh nghiệp

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 VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ CHIẾN DỊCH DOANH NGHIỆP Công ty thực tập : Tisoha Software Solutions Người phụ trách : Đỗ Công Bá Thực tập sinh : Lê Hồng Phú TP Hồ Chí Minh, tháng 12 năm 2022 Đỗ Cơng Bá Lê Hồng Phú - 19520216 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 TISOHA SOFTWARE SOLUTIONS 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ế Đỗ Công Bá Lê Hoàng Phú - 19520216 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 Giải pháp Phần mềm TISOHA 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 Đỗ Công Bá hướng dẫn cho em quy trình cách thức để xây dựng nên ứng dụng web hồ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 q trình thực tập TP Hồ Chí Minh, ngày 24 tháng 12 năm 2022 Lê Hoàng Phú Đỗ Cơng Bá Lê Hồng Phú - 19520216 NHẬN XÉT CỦA KHOA Đỗ Cơng Bá Lê Hồng Phú - 19520216 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 Giải pháp Phần mềm TISOHA 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 lên ý tưởng, đề xuất tính so sánh với yêu cầu từ khách hàng 3.2.2 Giai đoạn xây dựng khung sườn cho ứng dụng web 3.2.3 Giai đoạn triển khai ứng dụng web 10 TÀI LIỆU THAM KHẢO 14 Đỗ Công Bá Lê Hoàng Phú - 19520216 TỔNG KẾT 15 Đỗ Cơng Bá Lê Hồng Phú - 19520216 Chương GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu Công ty TNHH Giải pháp Phần mềm TISOHA Công ty TNHH Giải pháp phần mềm TISOHA doanh nghiệp thành lập vào 10/2020 đến hoạt động gần năm Trong thời gian hoạt động, công ty nhận cung cấp dịch vụ cho nhiều khách hàng Mỹ, Malta, Úc Singapore nơi tập trung phát triển ứng dụng web lập trình ứng dụng cho điện thoại thông minh TISOHA đem lại cho khách hàng dịch vụ lập trình, gia cơng phần mềm uy tín chất lượng với độ an toàn cao, khả mở rộng tiết kiệm chi phí cho khách hàng 1.2 Sản phẩm công ty Sản phẩm công ty chủ yếu dự án outsource giáo dục, giải trí, thương mại Cơng ty ln mang đến cho khách hàng dịch vụ phát triển, gia cơng phần mềm hồn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển ứng dụng, phần mềm cách toàn diện Các sản phẩm giải pháp công ty triển khai đảm bảo mức độ an tồn cao, có khả mở rộng, mang lại hài lòng chất lượng thỏa mãn chi phí Đỗ Cơng Bá Lê Hồng Phú - 19520216 Đỗ Cơng Bá Lê Hoàng Phú - 19520216 Chương NỘI DUNG THỰC TẬP Thực tập với chủ đề “Lập trình React.js xây dựng ứng dụng quản lý chiến dịch doanh nghiệp” nhằm giúp sinh viên thực tập tiếp cận với dự án thực tế, đặc biệt trao dồi kỹ lập trình Front-end, ngồi giúp sinh viên rèn luyện kỹ khác kỹ làm việc nhóm, kỹ thuyết trình trước đám đơng kỹ đề xuất kế hoạch phát triển cho dự án Khi làm việc 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 web 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 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 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 cịn 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,… Kết quả: Giúp sinh viên hiểu thêm cơng ty Tisoha Software Solutions, 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ố Slack – 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 sốt Đỗ Cơng Bá Lê Hoàng Phú - 19520216 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 - 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 Đỗ Cơng Bá Lê Hồng Phú - 19520216 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 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 Đỗ Cơng Bá Lê Hồng Phú - 19520216 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 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 Bá Cơng việc Người hướng dẫn - Tìm hiểu cơng ty, Anh Võ Hồng cách tổ chức Đức Khoa, Đỗ Mức độ hoàn thành Nhận xét người hướng dẫn 100% Lê Hoàng Phú - 19520216 công ty Công Bá - Làm quen với công cụ làm việc công ty - Học cách trao đổi, làm việc qua email, Slack, Jira - Tìm hiểu kiến thức lập trình web Framework ReactJs - Tìm hiểu kiến thức package Yup, React Toolkit Anh Võ Hồng Đức Khoa, Đỗ 100% Cơng Bá Anh Võ Hồng Đức Khoa, Đỗ 100% Cơng Bá - Thiết kế UI hai hình đăng nhập, đăng ký, hình đại lý (danh sách, Anh Đỗ Công Bá 100% lưu trữ liệu cho Anh Đỗ Công Bá 100% thêm, xóa, sửa) - Thiết kế UI hình quản lý chiến dịch (danh sách, thêm, xóa, sửa) - Xây dựng store tính năng, thiết Đỗ Cơng Bá Lê Hoàng Phú - 19520216 lập API, dịch vụ cho tính quản lý đại lý - Xây dựng store lưu trữ liệu cho tính năng, thiết Anh Đỗ Cơng Bá 100% Anh Đỗ Công Bá 100% khách hàng, chỉnh Anh Đỗ Công Bá 100% lập API, dịch vụ cho tính quản lý chiến dịch - Kiểm thử sản phẩm - Nhận phản hồi từ sửa cập nhật Đỗ Cơng Bá Lê Hồng Phú - 19520216 Chương CHI TIẾT VỀ PROJECT 3.1 Giới thiệu ứng dụng Trong giai đoạn cuối năm vào tháng 11 12, doanh nghiệp thường tranh triển khai chiến dịch giảm giá, quay thưởng,… Nhằm đáp ứng yêu cầu từ doanh nghiệp, Công ty TNHH Giải pháp Phần mềm Tisoha triển khai dự án “Ứng dụng quản lý chiến dịch doanh nghiệp” 3.2 Thực 3.2.1 Giai đoạn lên ý tưởng, đề xuất tính so sánh với yêu cầu từ khách hàng - Nội dung: • Đề xuất thơng tin cần có tính • Đề xuất thiết kế hình • Trao đổi với Back-end tính từ khách hàng thông qua chấp thuận Leader - Kết quả: • Thống quy trình xử lý nghiệp vụ từ khách hàng • Thống đươc tính giao diện 3.2.2 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ơng Bá Lê Hồng Phú - 19520216 10 • 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.3 Giai đoạn triển khai ứng dụng web - Nội dung: • Xây dựng tính đăng nhập, đăng ký • Xây dựng tính quản lý đại lý • Xây dựng tính quản lý chiến dịch • Xây dựng tính quản lý nhà phân phối - Kết quả: • Tính đăng nhập, đăng ký Đỗ Cơng Bá Lê Hồng Phú - 19520216 11 • Tính quản lý nhà phân phối Đỗ Cơng Bá Lê Hồng Phú - 19520216 12 • Tính quản lý đại lý Đỗ Cơng Bá Lê Hồng Phú - 19520216 13 • Tính quản lý chiến dịch Đỗ Cơng Bá Lê Hồng Phú - 19520216 14 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)] Đỗ Công Bá Lê Hoàng Phú - 19520216 15 TỔNG KẾT Sau tháng thực tập Công ty TNHH Giải pháp Phần mềm TISOHA, 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 Giải pháp Phần mềm TISOHA 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 Đỗ Cơng Bá Lê Hồng Phú - 19520216 ... DUNG THỰC TẬP Thực tập với chủ đề ? ?Lập trình React. js xây dựng ứng dụng quản lý chiến dịch doanh nghiệp? ?? nhằm giúp sinh viên thực tập tiếp cận với dự án thực tế, đặc biệt trao dồi kỹ lập trình. .. 3.2.3 Giai đoạn triển khai ứng dụng web - Nội dung: • Xây dựng tính đăng nhập, đăng ký • Xây dựng tính quản lý đại lý • Xây dựng tính quản lý chiến dịch • Xây dựng tính quản lý nhà phân phối - Kết... doanh nghiệp thường tranh triển khai chiến dịch giảm giá, quay thưởng,… Nhằm đáp ứng yêu cầu từ doanh nghiệp, Công ty TNHH Giải pháp Phần mềm Tisoha triển khai dự án ? ?Ứng dụng quản lý chiến dịch