BÁO CÁO THỰC TẬP LẬP TRÌNH FRONTEND 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 FRONTEND VỚI REACTJS Công ty thực tập: TGL Solutions Người phụ trách: Phan Ngọc Thịnh Thực tập sinh: Nguyễn Đức khang TP Hồ Chí Minh,15 tháng 06 năm 2022 Nguyễn Đức Khang LỜI MỞ ĐẦU Ngày nay, với phát triển nhanh chóng internet, ứng dụng web ngày nhiều nên việc phát triển ứng dụng web trở nên phổ biến ngành công nghệ thông tin Các ứng dụng web sinh nhu cầu sử dụng internet cao Các ứng dụng web đem lại nhiều thuận tiện cho người dùng cần thiết bị hỗ trợ kết nối mạng sử dụng Vì lý này, 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 ứng dụng web môi trường chuyên nghiệp, em có dự định thực tập học kỳ Vì vậy, em định chọn TGL Solutions - môi trường lý tưởng, đại, chuyên nghiệp, trẻ trung động - nơi giúp em thực dự định Nguyễn Đức Khang LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TGL Solutions 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ờ giúp đỡ nhiệt tình người cơng ty, hỗ trợ nhiệt tình anh team TNF, em tiếp thu kiến thức quan trọng để thành viên team tạo ứng dụng web Chân thành cảm ơn anh team TNF 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 chị Lê Bê Ly, hướng dẫn, giúp đỡ cho em tận tình em gặp khó khăn việc làm quen với mơi trường Cảm ơn anh Phan Ngọc Thịnh – team leader quan tâm, giúp đỡ em khoảng thời gian thực tập Và gửi lời cảm ơn đến tất thành viên team 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 Đức Khang TpHCM, ngày 16 tháng 06 năm 2022 Nguyễn Đức Khang NHẬN XÉT CỦA KHOA Nguyễn Đức Khang Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TGL Solutions Sản phẩm công ty 2.1 MIRAI EC System 2.2 APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE) 10 2.3 APP QUẢN LÝ SERIAL CODE 11 Chương 2: Nội dung thực tập 12 Tìm hiểu công ty kỹ cơng ty 12 Tìm hiểu dự án 12 Nghiên cứu kỹ thuật 12 3.1 Các công cụ làm việc 12 3.2 Tìm hiểu Material, React hook form, Tailwind, redux, custom hook, graphql, rest API, sử dụng TypeScript 13 3.3 Lập trình Wed Frontend với ReactJS thư viện hỗ trợ 14 Thực project 14 Lịch làm việc 14 Chương 3: Chi tiết project 16 Giới thiệu dự án 16 Các hình 16 2.1 Màn hình quản lý công nhân khảo sát 16 Nguyễn Đức Khang 2.2 Màn hình thu hoạch, theo dõi tiến độ nội dung khảo sát, xuất file báo cáo 17 2.3 Màn hình tạo form phức tạp đáp ứng rộng rãi vấn đề mẫu khảo sát 17 2.4 Màn hình quản lý cơng ty 18 2.5 Màn hình hỗ trợ nhân viên quản lý Job 19 Chương 4: Giải thưởng 20 Nguyễn Đức Khang Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TGL Solutions Công ty Cổ phần TGL Solutions (gọi tắt TGL, tiếng Việt: ) công ty Việt Nam lĩnh vực IT hướng đến việc cung cấp giải pháp (solutions) cách thông minh nhanh nhất, qua tối ưu hố lợi nhuận cho khách hàng Cơng ty cổ phần TGL Solutions thành lập vào tháng 07/2019 với hai thành viên Từ thành lập nay, công ty phát triển không ngừng đặt mục tiêu phát triển liên tục vững mạnh thời gian tới Hiện có 50 kỹ sư tài làm việc, xây dựng hình ảnh TGL động chuyên nghiệp đồ công nghệ thông tin Phương châm: Smart & Speed Solutions Giá trị cốt lõi: Xây dựng công ty với giá trị cốt lõi là: NHÂN HOÀ - NHÂN: người Tơn TGL Solutions xây dựng công ty lấy người làm trung tâm Lợi nhuận thu từ việc kinh doanh dùng để đầu tư trang thiết bị để tạo mơi trường làm việc tốt hơn, đầu tư khóa đào tạo để nâng cao kỹ cho người Bên cạnh đó, có kì bonus theo dự án (không định kỳ), kỳ đánh giá tăng lương lần/năm - HỊA: hồ hợp, đồng thuận, đồng lòng.Khi bàn luận vấn đề, thoải mái tranh luận, thoải mái góp ý.Sẽ có lãnh đạo đưa định cuối chịu trách nhiệm định Định hướng cơng ty: Nguyễn Đức Khang Tăng số lượng nhân viên lên 40+ vào tháng 12/2021, 100 nhân viên vào tháng 12/2022 Tiếp tục theo hướng outsourcing vòng năm tới - Một là, theo xu hướng chung giới cloud services Công ty mở rộng service từ AWS GCP Azure Chinh phục SaaS (Salesforce) - Hai là, xông pha vào lĩnh vực hẹp, IT chưa phát triển cịn đối thủ cạnh tranh Hiện công ty hợp tác với kiến trúc sư giỏi người Nhật để phát triển projects liên quan đến xây dựng nhà ở, kiến trúc Sản phẩm công ty Những sản phẩm phần mềm TGL Solutions phát triển nhắm tới tệp khách hàng đa dạng, từ nước ngồi nước, từ phủ doanh nghiệp, tập đồn lớn Là cơng ty chun cung cấp giải pháp, sản phẩm trải rộng nhiều lĩnh vực TGL Solutions chuyên cung cấp sản phẩm phần mềm phục vụ nhiều loại hình dịch vụ khác nhau, đem lại trải nghiệm tốt cho người dùng Một số dự án bật: 2.1 MIRAI EC System TÍNH NĂNG: - Tính đặt hàng, mua bán sản phẩm, tích lũy đổi point - Góc VR Showroom, góc video giới thiệu sản phẩm nhà sản xuất - Tính livestream: Các streamer thực tổ chức livestream, lên lịch livestream.Người dùng xem livestream streamer mua hàng trực tiếp - Tính đấu giá sản phẩm: Các streamer tổ chức đấu giá sản phẩm Người dùng tham gia đấu giá sản phẩm, người đấu giá thành cơng thực order với giá thắng Nguyễn Đức Khang - Trang admin: Trang admin: Quản lý sản phẩm, quản lí đặt hàng, số points, doanh thu ; Xuất excel theo đơn đặt hàng, theo sản phẩm, theo người dùng ; Có thể tạo link quickLogin đăng nhập vào trang Top, Admin; Có hệ thống gửi mail thông báo trạng thái đơn đặt hàng, trạng thái thay đổi points đến người dùng người chịu trách nhiệm đơn hàng CÔNG NGHỆ: Nextjs, Ant Design, Agora, Socket, GraqhQL, webRTC, NestJS, Base Web Nguyễn Đức Khang 2.2 APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE) TÍNH NĂNG: - Quay số online trực tiếp cửa hàng - Quản lý thông tin người quay số, kết xổ số, thiết lập tỉ lệ xổ số mong muốn - Tùy chỉnh thiết kế thích hợp với user dựa mơ hình SaaS CÔNG NGHỆ: ReactJS (Nextjs), Oracle, GraphQL, NestJS Nguyễn Đức Khang 2.3 APP QUẢN LÝ SERIAL CODE TÍNH NĂNG: - Tạo Serial Code để quay số trúng thưởng - Quản lý Serial code tạo - Tự động xuất QR Code tương ứng với Serial Code CÔNG NGHỆ: ReactJS (Nextjs), Oracle, GraphQL, NestJS Nguyễn Đức Khang Chương 2: Nội dung thực tập Đợi thực tập nhằm giúp em rõ kiến thức lập trình web nói chung cơng nghệ ReactJS, thư viện UI, xử lý nghiêp vụ nói riêng.Đồng thời rèn luyện kỹ mềm làm việc nhóm, giao tiếp, trao đổi với thành viên khác công ty 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 ứng dụng web chuyên 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 giám đốc công ty 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 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… Kết : Hiểu thêm cơng ty TGL Solutions, q trình thành lập phát triển Có thêm hiểu biết cách thức làm việc công ty công nghệ thống tin đồng thời thực tập sinh có ý thức việc làm việc có kế hoạch, trao đổi, giải thích với thành viên khác cơng ty Tìm hiểu dự án Thời gian : ngày Nội dung: Giới thiệu, đưa tài liệu để tìm hiểu dự án Thực tập sinh người hướng dẫn giới thiệu tổng quan dự án Ngoài ra, thực tập sinh đưa tài liệu liên quan dự án để tìm hiểu Kết : Hiểu thêm dự án làm, cách làm việc với vai trị lập trình viên cơng ty Nghiên cứu kỹ thuật 3.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 Nguyễn Đức Khang 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ố Microsoft Teams - sử dụng q trình làm việc nhóm, Visual Studio Code - cơng cụ hỗ trợ lập trình, SourceTree – Git GUI clients, gitlab Thực : Làm quen với cách sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí 3.2 Tìm hiểu Material, React hook form, Tailwind, redux, custom hook, graphql, rest API, sử dụng TypeScript Thời gian: 10 ngày Nội dung: Được hướng dẫn thêm kỹ thuật lập trình web nâng cao, kiến thức quan trọng cho việc tối ưu lập trình, quản lý state, validate form Sử dụng thư viện UI Material, Tailwindcss - Nắm dõ kiến thức validate form, register, watch, get/setValue vấn đề liên quan đến React hook form - Quản lý router, phân quyền qua react router dom - Thực css cách hiệu nhanh chóng với Tailwindcss - Sử dụng ổn định component Material UI - Quản lý sử dụng state hiệu với Hook redux - Làm quen sử dụng thành thạo custom hook - Sử dụng graphql, rest API để call API - Học TypeScript Thực hiện: - Tham gia meeting hàng ngày team - Hoàn thành công việc giao - Đọc source tham gia chỉnh sửa tính nhỏ theo yêu cầu leader Kết quả: - Nâng cao kỹ thân - Được tiếp xúc với nhiều công nghệ graphql, tailwind - Sử dụng thành thạo hook có khả custom hook cách hiệu - Tối ưu hoá việc rerender, tăng hiệu xuất ứng dụng Nguyễn Đức Khang - Biết thêm nhiều cách thiết kế UI cho phù hợp với UI/UX - Sử dụng TypeScript để code tường minh, rõ dàng, dễ bảo trì 3.3 Lập trình Wed Frontend với ReactJS thư viện hỗ trợ Nội dung: Do hiểu rõ ôn lại kiến thức Việc lập trình web trở lên dễ dàng Biết nhiều hướng giải giúp cho lựa chọn triển khai dự án cách tốt Thực : - Tham gia buổi meeting hàng ngày - Làm công việc giao - Tham gia chỉnh sửa, phát triển thêm tính cho dự án Kết : - Nắm rõ cách lập trình web nói riêng với thư viện ReactJS/React TypeScrip nói chung - Thực cải thiện UI/UX dự án - Tối ưu cách quản lý tổ chức source code hiệu Thực project Sau thời gian hỗ trợ củng cố kệ thức thực tập sinh giới thiệu, hướng dẫn thực hành, thực tập sinh nắm kiến thức frontend, tham gia dự án thực tế team Lịch làm việc Tuần - Cơng việc 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 công ty Học cách trao đổi, làm việc qua email Tìm hiểu thơng tin dự án - Tìm hiểu React hook form - Material UI Người hướng dẫn Anh Lê Tiến Triển Chị Lê Bê Ly Anh Phan Ngọc Thịnh Anh Lý Hồng Bảo Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Anh Trần Thanh Vũ Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Nguyễn Đức Khang - Tailwind - Sử dụng graphql để call data 7,8 Anh Trần Thanh Vũ TypeScript Anh Trần Thanh Vũ Custom hook Cải thiện UI/UX Học sử dụng TypeScript Thực task chỉnh sửa đơn giản liên Anh Phan Ngọc Thịnh quan đến hệ thống Anh Trần Hoàng Sơn Anh Trần Thanh Vũ - Tham gia bổ sung tính năng, fix bug Anh Phan Ngọc Thịnh tồn đọng Thêm yêu cầu theo nghiệp vụ khách Anh Trần Hoàng Sơn hàng Anh Trần Thanh Vũ - Thực việc cải thiện tiếp tục phát triển Anh Phan Ngọc Thịnh dự án Anh Trần Hoàng Sơn Anh Trần Thanh Vũ - Nguyễn Đức Khang Chương 3: Chi tiết project Giới thiệu dự án Dự án cho phép tạo phiếu khảo sát đa phần nhà cửa, quản lý nhân viên cho nhân viên thực rà soát, phát hiện, bảo trì nâng cấp nhà cửa, xuất file báo cáo Dự án đem triển lãm bên nhật có khách hàng lớn HAT Gần dự án chỉnh sửa áp dụng với khách hàng Thái Lan Dự án có mặt thiết bị di động hỗ trợ nhân viên khảo sát Thông tin chi tiết: https://kensa-cloud.com/ Các hình 2.1 Màn hình quản lý cơng nhân khảo sát Ở cho phép người quản lý quản lý nhân viên mình, thêm xoá sửa nhân viên Hỗ trợ tạo tài khảon cho nhân viên xác nhận gửi qua mail đăng ký Nguyễn Đức Khang 2.2 Màn hình thu hoạch, theo dõi tiến độ nội dung khảo sát, xuất file báo cáo Cho phép thu hoạch theo dõi, điền form phức tạp, xuất file báo cáo excel, pdf Xem tiến độ, trạng thái nhân viên khảo sát 2.3 Màn hình tạo form phức tạp đáp ứng rộng rãi vấn đề mẫu khảo sát Cho phép tạo mẫu phức tạp, lựa chọn có thêm nhiều lựa chọn khác Việc tạo form khảo sát cách linh động nhanh chóng hiệu cao, tiết kiệm thời gian chi phí người quản lý Tạo form dễ dàng với tình khác thực tế Nguyễn Đức Khang 2.4 Màn hình quản lý công ty Hỗ trợ quản lý thông tin công ty hỗ trợ doanh nghiệp khác sử dung Nơi nhận phải hồi cải tiến hỗ trợ công ty sử dụng Nguyễn Đức Khang 2.5 Màn hình hỗ trợ nhân viên quản lý Job Cho phép nhân viên theo dõi tiến độ, trình thực job Nhân viên coi thông tin cá nhân, đổi mật Nhận thêm job Nguyễn Đức Khang Chương 4: Giải thưởng Dự án thông qua trở thành dự án xuất sắc quý đầu năm với tiêu chí: hiệu quả, sáng tạo, ứng dụng cơng nghệ mới, tiên phong đầu Cá nhân em vinh dự trở thành số thành viên tiêu biểu Nguyễn Đức Khang TÀI LIỆU THAM KHẢO Material: Tailwindcss: React-hook-form: React TypeScript: GraphQL: https://mui.com/ https://tailwindcss.com/ https://react-hook-form.com/ https://www.typescriptlang.org https://graphql.org/ Nguyễn Đức Khang TỔNG KẾT Thời gian thực tập vừa qua giúp em có điều kiện va chạm với thực tế, áp dụng kiến thức học trường vào thực tế điều thực quan trọng, cần thiết bổ ích sinh viên bọn em.Ngồi ra, em cịn học thêm kiến thức lập trình web back-end với ASP.Net Core Entity Framework Thêm vào đó, em cịn biết thêm quy trình làm việc mơi trường chun nghiệp, cách làm việc nhóm, giao tiếp thành viên để chuẩn bị tốt cho tương lai Chúng em xin chân thành cảm ơn thầy tồn thể q cơng ty giúp đỡ tạo điều kiện cho chúng em hoàn thành tốt nhiệm vụ yêu cầu đặt thời gian thực tập Tuy nhiên thời gian khả có hạn lại chưa có nhiều kinh nghiệm thực tế nên báo cáo thực tập cịn nhiều thiếu sót em mong muốn nhận đóng góp ý kiến từ thầy để nội dung báo cáo thực tập hoàn thiện Nguyễn Đức Khang ... cho phù hợp với UI/UX - Sử dụng TypeScript để code tường minh, rõ dàng, dễ bảo trì 3.3 Lập trình Wed Frontend với ReactJS thư viện hỗ trợ Nội dung: Do hiểu rõ ôn lại kiến thức Việc lập trình web... ứng với Serial Code CÔNG NGHỆ: ReactJS (Nextjs), Oracle, GraphQL, NestJS Nguyễn Đức Khang Chương 2: Nội dung thực tập Đợi thực tập nhằm giúp em rõ kiến thức lập trình web nói chung cơng nghệ ReactJS, ... việc nhóm, Visual Studio Code - cơng cụ hỗ trợ lập trình, SourceTree – Git GUI clients, gitlab Thực : Làm quen với cách sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí 3.2 Tìm hiểu