Báo cáo thực tập lớp se501 n11 vị trí front end developer

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH KHOA CÔNG NGHỆ PHẦN MỀM BBÁO CÁO THỰC TẬP – LỚP SE501 N11 Vị trí Front end Developer Công ty thực tập CÔNG TY TNHH Dịch vụ Côn[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH KHOA CƠNG NGHỆ PHẦN MỀM BBÁO CÁO THỰC TẬP – LỚP SE501.N11 Vị trí: Front-end Developer Công ty thực tập Người phụ trách Thực tập sinh CƠNG TY TNHH Dịch vụ Cơng nghệ Bản Việt (Zinisoft) Võ Thiên Hòa Phạm Nguyễn Minh Thắng MSSV: 19522216 Tp Hồ Chí Minh, tháng 12 năm 2022 Lời mở đầu Ngày nay, ngành công nghiệp phần mềm ngành nghề có sức phát triển vô mạnh mẽ, chiếm tỉ trọng lớn kinh tế tồn cầu khơng có dấu hiệu chậm lại Nhu cầu thị trường cho sản phẩm phần mềm cao hết Đứng trước đà phát triển này, với nhu cầu vơ lớn, có nhiều cơng ty đời nhằm đáp ứng thị trường Một cơng ty Zinisoft Đây cơng ty dịch vụ Oursourcing chuyên làm trang web phần mềm mobile nhằm số hóa nghiệp vụ kinh doanh, quản lý khách hàng Là sinh viên thuộc khoa Cơng nghệ phần mềm, em muốn tiếp cận với nhiều khía cạnh cơng nghiệp phần mềm, đồng thời nhận mục tiêu định hướng công ty phù hợp với thân nên em chọn Zinisoft nơi bắt đầu thực tập, để có hội trải nghiệm, học tập kiến thức để làm hành trang cho dự định tới Lời cảm ơn Trân trọng gửi lời cảm ơn đến Công ty Zinisoft tạo điều kiện cho em có hội thực tập cơng ty Em học nhiều từ dẫn nhiệt tình anh cơng ty Khơng kỹ thuật, kiến thức bản, mà hội tham gia xây dựng dự án thực tế Bên cạnh cịn học cách sử dụng thêm thư viện tiên tiến nhằm nâng cao hiệu suất sản phẩm Ngồi em cịn cải thiện thêm kĩ mềm 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 Phạm Nguyễn Minh Thắng Tp Hồ Chí Minh, ngày 23 tháng 12 năm 2022 Nhận xét khoa ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… MỤC LỤC GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty CodeLink Một số dự án công ty NỘI DUNG THỰC TẬP Tổng quan kế hoạch thực tập Nội dung chi tiết: .10 Tuần 1: Làm quen với cơng ty văn hóa công ty, học cách sử dụng công cụ cần thiết mà công ty sử dụng 10 Tuần 2: Tìm hiểu HTML, CSS, Javascript .10 Tuần 3: Tìm hiểu ReactJS .11 Tuần 4: Tìm hiểu Redux Toolkit – AsyncThunk 11 Tuần 5: Tìm hiểu Redux Toolkit Query 12 Tuần 6: Tìm hiểu component sử dụng thư viện component Antd .12 Tuần 7: Học cách xây dựng cấu trúc dự án ReactJS với thư viện Antd Less 12 Tuần 8: Xây dựng ứng dụng mẫu 13 Tuần 9: Xây dựng Module quản lý Category dự án Idrink 13 Tuần 10: Xây dựng Module quản lý Product dự án Idrink 13 GIỚI THIỆU VỀ DỰ ÁN 15 Tổng quan 15 Thực 15 Kết 15 TÀI LIỆU THAM KHẢO 16 GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu cơng ty CodeLink Zinisoft công ty phần mềm chuyên phát triển sản phẩm cho công ty startup Zinisoft sử dụng NodeJS, Nestjs, SailJS, Medusa, ReactJS, ReactNative cho ứng dụng web mobile Khách hàng CodeLink đến từ Pháp, Úc, Singapore Việt Nam Các kỹ sư làm việc trực tiếp với CEO, Yêu cầu công việc cao bạn nhân viên phát triển nhanh từ dự án Zinisoft tạo sản phẩm cho khách hàng đến từ nhiều lĩnh vực khác Các tính sản phẩm Zinisoft CMS, E-commerce Một số dự án công ty Kindie.io Dự án phát triển ứng dụng mobile dành cho ban quản lý trường mẫu giáo phụ huynh (IOS ANDROID) ACBS.com.vn Dự án phát triển website cho ngân hàng ACB dành cho việc quản lý CMS chăm sóc khách hàng Sacombank-SBJ.com Dự án phát triển website dành cho Sacombank-SBJ – Thành viên Sacombank Website dành cho việc quản lý mua bán Trang sức, đồ phong thủy, vàng, … NỘI DUNG THỰC TẬP Trong tháng thực tập em training tham gia vào dự án thức Zinisoft mang tên “IDRINK”, ứng dụng quản lý việc bán rượu cho đối tác Pháp Ngoài việc tốn qua cơng tốn điện tử quốc tế, ứng dụng cịn cho phép tốn qua đồng tiền ảo ứng dụng Tổng quan kế hoạch thực tập Kéo dài 10 tuần từ ngày 19/09/2022 đến ngày 25/11/2022 Tuần Công việc Người hướng dẫn Làm quen với cơng ty văn hóa Anh Hịa cơng ty, học cách sử dụng công cụ cần thiết mà cơng ty sử dụng Tìm hiểu HTML, CSS, Javascript, Anh Hịa Typescript Tìm hiểu ReactJS Anh Hịa Tìm hiểu Redux Toolkit - AsyncThunk Anh Hịa Tìm hiểu Redux Toolkit Query Anh Hịa Tìm hiểu component sử Anh Hòa dụng thư viện component Antd Học cách xây dựng cấu trúc dự án Anh Hòa ReactJS với thư viện Antd Less Xây dựng ứng dụng mẫu Anh Hòa Xây dựng Module quản lý Category Anh Hòa dự án Idrink 10 Xây dựng Module quản lý Product dự án Idrink Anh Hòa Nội dung chi tiết: Tuần 1: Làm quen với cơng ty văn hóa cơng ty, học cách sử dụng công cụ cần thiết mà công ty sử dụng Nội dung chi tiết: - Được nghe anh Huy giới thiệu lịch sử công ty, đối tác mà công ty đã, hợp tác, tính mạnh văn hóa làm việc cơng ty - Thực tập sinh hướng dẫn công cụ cần thiết tới (Gitlab, Opentask, email công ty, …) - Phổ biến nội dung chuẩn bị cho tuần tới Tuần 2: Tìm hiểu HTML, CSS, Javascript Nội dung chi tiết: - Tìm hiểu HTML, thẻ phổ biến Xây dựng hình đơn giản - Tìm hiểu CSS – CSS3, số thư viện phổ biến Sass, Less, … - Áp dụng CSS vào tập HTML - Tìm hiểu ngơn ngữ Javascript, hướng đối tượng Javascript Sử dụng Javascript để tương tác với trang web - Các tập lập trình, thuật toán viết Javascript - Ứng dụng Javascript để viết kiện cho thẻ HTML - Tìm hiểu Promise, Async, Await, ES6 Javascript áp dụng vào tập - Làm quen với Typescript - Sử dụng Typescript thay Javascript để xây dựng dự án 10 Tuần 3: Tìm hiểu ReactJS Nội dung chi tiết: - JSX, TSX React - Rendering phần tử React - Component Props React - State LifeCycle React - Handling event React - Conditional Rendering React - Lists Keys React - Form React - Functional Component React - Hook với Component React Tuần 4: Tìm hiểu Redux Toolkit – AsyncThunk Nội dung chi tiết: - Khái niệm Redux - Dựng cấu trúc cấu hình cần thiết để sử dụng Redux Toolkit với Typescript - Cài đặt học cách sử dụng Redux dev tool - Các thành phần Slice Redux Toolkit - Selector Dispatch Redux Toolkit - Cách quản lý trạng thái sử dụng Redux Toolkit - Quản lý trạng thái bất đồng với AsyncThunk Redux Toolkit - Sử dụng CreateAsyncThunk để tạo hành động bất đồng - Quản lý trạng thái hành động bất đồng với ExtraReducers 11 Tuần 5: Tìm hiểu Redux Toolkit Query Nội dung chi tiết: - Lý sử dụng Redux Toolkit Query thay quản lý hành động bất đồng bên AsyncThunk Redux Toolkit - Mở rộng cấu trúc cấu hình để sử dụng Redux Toolkit Query - Các thành phần ApiSlice Redux Toolkit Query - Get Post (Restful API) Redux Toolkit Query - Update Delete (Restful API) Redux Toolkit Query - Quản lý vòng đời liệu Redux Toolkit Query - Tự động gọi api cập nhật liệu có thay đổi với Redux Toolkit Query - Quản lý lỗi Redux Toolkit Query - Phân trang liệu Redux Toolkit Query Tuần 6: Tìm hiểu component sử dụng thư viện component Antd - Tìm hiểu cách sử dụng component thư viện Antd Ant Design - The world's second most popular React UI framework Tuần 7: Học cách xây dựng cấu trúc dự án ReactJS với thư viện Antd Less Nội dung chi tiết: - Làm quen với React Route Dom - Các điều hướng áp dụng route giao diện - Cấu trúc dự án để dụng chỉnh sử route - Sử dụng route việc phân quyền người dùng giao diện 12 - Áp dụng component Antd để xây dựng layout ứng dụng - Sử dụng thư viện CSS để tùy chỉnh giao diện Tuần 8: Xây dựng ứng dụng mẫu Nội dung chi tiết: - Áp dụng kiến thức học tuần qua để xây dựng ứng dụng đơn giản với trang HOME, ABOUT, LOGIN - Được anh điều chỉnh convention code cho phù hợp tổ chức code ứng dụng Tuần 9: Xây dựng Module quản lý Category dự án Idrink Nội dung chi tiết: - Tạo giao diện Module Category React, áp dụng kiến thức training từ Design Figma - Tích hợp đa ngơn ngữ sử dụng thư viên I18n - Sử dụng Redux Toolkit Query để thực hành động gọi api từ backend - Quản lý trạng thái hình (thành cơng, thất bại, tải, …) - Tạo Form cho việc thêm mới, chỉnh sửa Category - Validate form - Góp ý chỉnh sửa theo hướng dẫn anh Hòa Tuần 10: Xây dựng Module quản lý Product dự án Idrink Nội dung chi tiết: - Tạo giao diện Module Product React, áp dụng kiến thức training từ Design Figma 13 - Tích hợp đa ngơn ngữ sử dụng thư viên I18n - Sử dụng Redux Toolkit Query để thực hành động gọi api từ backend - Quản lý trạng thái hình (thành cơng, thất bại, tải, …) - Tạo Form cho việc thêm mới, chỉnh sửa Product - Validate form - Góp ý chỉnh sửa theo hướng dẫn anh Hòa 14 GIỚI THIỆU VỀ DỰ ÁN Tổng quan Dự án ứng dụng Quản lý việc bán rượu đối tác đến từ Pháp, ứng dụng tạo Event để thúc đẩy việc marketing cho khách hàng, rút ngắn trình mua hàng cho khách hàng nhằm gia tăng trải nghiệm mà giữ yêu cầu bảo mật, toán ứng dụng React Native Mobile Ngồi dự án cịn tạo đồng tiền ảo riêng để sử dụng cho việc toán Near Protocol Hiện dự án giai đoạn phát triển tính khác Mobile Web Thực Trước em tham gia thực tập Team xây dựng cấu trúc dự án gần hoàn chỉnh Bản Mobile hoàn thiện theo yêu cầu khách hàng Bản web trình xây dựng thêm Em may mắn tham gia để thực Module quản lý Category Product dự án web Dưới hỗ trợ nhiệt tình tận tụy từ anh Hịa tính em tương đối ổn Và chấp nhận để tích hợp vào nhánh dự án Vì thời gian thực tập khơng q dài nên em chưa thử sức với blockchain smart contract – cơng nghệ tích hợp thêm cho việc toán tạo đồng tiền ảo cho dự án Kết Hoàn thiện Module Category Product dự án Vì số lý sách cơng ty mà em khơng thể trình bày kết tài liệu báo cáo 15 TÀI LIỆU THAM KHẢO [1] Gettings Start - React [2] Gettings Started - Redux Toolkit [3] RTK - Redux Toolkit Query [4] Ant Design [5] Home v6.6.1 | React Router 16 ... MỤC LỤC GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty CodeLink Một số dự án công ty NỘI DUNG THỰC TẬP Tổng quan kế hoạch thực tập Nội dung chi... bắt đầu thực tập, để có hội trải nghiệm, học tập kiến thức để làm hành trang cho dự định tới Lời cảm ơn Trân trọng gửi lời cảm ơn đến Công ty Zinisoft tạo điều kiện cho em có hội thực tập cơng... Sacombank Website dành cho việc quản lý mua bán Trang sức, đồ phong thủy, vàng, … NỘI DUNG THỰC TẬP Trong tháng thực tập em training tham gia vào dự án thức Zinisoft mang tên “IDRINK”, ứng dụng quản lý