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

Việt (Zinisoft)

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 đã và đang là một trong những ngành nghề có sức phát triển vô cùng mạnh mẽ, chiếm tỉ trọng lớn trong nền kinh tế toàn cầu

và không hề có dấu hiệu chậm lại Nhu cầu thị trường cho một sản phẩm phần mềm hiện nay là cao hơn bao giờ hết Đứng trước đà phát triển này, cùng với nhu cầu vô cùng lớn, đã có nhiều công ty ra đời nhằm đáp ứng thị trường

Một trong những công ty đó là Zinisoft Đây là một công ty dịch vụ Oursourcing chuyên làm những trang web và phần mềm mobile nhằm số hóa các nghiệp vụ kinh doanh, quản lý của khách hàng

Là một sinh viên thuộc khoa Công nghệ phần mềm, em muốn mình được tiếp cận với nhiều khía cạnh của công nghiệp phần mềm, đồng thời nhận ra các mục tiêu

và định hướng của công ty rất phù hợp với bản thân nên em đã chọn Zinisoft là nơi bắt đầu thực tập, để có cơ hội trải nghiệm, học tập những kiến thức để làm hành trang cho những dự định sắp 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ó cơ hội được thực tập tại công ty

Em đã học được rất nhiều từ sự chỉ dẫn nhiệt tình của các anh trong công ty Không chỉ những kỹ thuật, kiến thức căn bản, mà còn được cơ hội tham gia xây

dựng trong các dự án thực tế Bên cạnh đó còn được học cách sử dụng thêm các thư viện tiên tiến nhằm nâng cao hiệu suất của sản phẩm Ngoài ra em còn được cải

thiện thêm các kĩ năng mềm

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này

Phạm Nguyễn Minh Thắng

Tp Hồ Chí Minh, ngày 23 tháng 12 năm 2022

Nhận xét của khoa

………

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

GIỚI THIỆU CÔNG TY THỰC TẬP 6

Giới thiệu về công ty CodeLink 6

Một số dự án của công ty 7

NỘI DUNG THỰC TẬP 9

Tổng quan kế hoạch thực tập 9

Nội dung chi tiết: 10

Tuần 1: Làm quen với công ty và văn hóa của công ty, học cách sử dụng các công cụ cần thiết mà công ty sử dụng 10

Tuần 2: Tìm hiểu về HTML, CSS, Javascript 10

Tuần 3: Tìm hiểu về ReactJS 11

Tuần 4: Tìm hiểu về Redux Toolkit – AsyncThunk 11

Tuần 5: Tìm hiểu về Redux Toolkit Query 12

Tuần 6: Tìm hiểu về các component chính sẽ sử dụng của thư viện component Antd 12

Tuần 7: Học cách xây dựng cấu trúc của một dự án ReactJS với thư viện Antd và Less 12

Tuần 8: Xây dựng một ứng dụng mẫu 13

Tuần 9: Xây dựng Module quản lý Category của dự án Idrink 13

Tuần 10: Xây dựng Module quản lý Product của dự án Idrink 13

GIỚI THIỆU VỀ DỰ ÁN 15

Tổng quan 15

Thực hiện 15

Kết quả 15

TÀI LIỆU THAM KHẢO 16

GIỚI THIỆU CÔNG TY THỰC TẬP

Giới thiệu về công ty CodeLink

Zinisoft là công ty phần mềm chuyên về phát triển sản phẩm cho các công ty startup Zinisoft sử dụng NodeJS, Nestjs, SailJS, Medusa, ReactJS, ReactNative cho ứng dụng trên web và mobile

Khách hàng của CodeLink đến từ Pháp, Úc, Singapore và Việt Nam Các kỹ

sư sẽ làm việc trực tiếp với những CEO, Yêu cầu công việc khá cao nhưng các bạn nhân viên sẽ phát triển rất nhanh từ những dự án này

Zinisoft tạo ra những sản phẩm cho khách hàng đến từ nhiều lĩnh vực khác nhau Các tính năng chính của những sản phẩm Zinisoft là CMS, E-commerce

Một số dự án của 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 và phụ huynh (IOS và 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 và 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 của 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 3 tháng thực tập em được training và tham gia vào một dự án chính thức của Zinisoft mang tên “IDRINK”, một ứng dụng quản lý việc bán rượu cho đối tác tại Pháp Ngoài việc thanh toán qua các công thanh toán điện tử quốc tế, ứng dụng còn cho phép thanh toán qua đồng tiền ảo của ứ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

1 Làm quen với công ty và văn hóa của

công ty, học cách sử dụng các công cụ cần thiết mà công ty sử dụng

Anh Hòa

2 Tìm hiểu về HTML, CSS, Javascript,

Typescript

Anh Hòa

4 Tìm hiểu về Redux Toolkit - AsyncThunk Anh Hòa

6 Tìm hiểu về các component chính sẽ sử

dụng của thư viện component Antd

Anh Hòa

7 Học cách xây dựng cấu trúc của một dự án

ReactJS với thư viện Antd và Less

Anh Hòa

9 Xây dựng Module quản lý Category của

dự án Idrink

Anh Hòa

10 Xây dựng Module quản lý Product của dự

án Idrink

Anh Hòa

Nội dung chi tiết:

Tuần 1: Làm quen với công ty và văn hóa của công ty, học cách sử dụng các 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 về lịch sử của công ty, các đối tác mà công ty đã, đang và sẽ hợp tác, các tính năng thế mạnh và văn hóa làm việc của công ty

- Thực tập sinh được hướng dẫn về các công cụ cần thiết sắp 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 về HTML, CSS, Javascript.

Nội dung chi tiết:

- Tìm hiểu căn bản về HTML, các thẻ phổ biến Xây dựng một màn hình đơn giản

- Tìm hiểu về CSS – CSS3, một số thư viện phổ biến như Sass, Less, …

- Áp dụng CSS vào bài tập HTML

- Tìm hiểu về ngôn ngữ Javascript, hướng đối tượng trong Javascript Sử dụng Javascript để tương tác với trang web

Tuần 3: Tìm hiểu về ReactJS.

Nội dung chi tiết:

- JSX, TSX trong React

- Rendering phần tử trong React

- Component và Props trong React

- State và LifeCycle trong React

- Handling event trong React

- Conditional Rendering trong React

- Lists và Keys trong React

- Form trong React

- Functional Component trong React

- Hook với Component trong React

Tuần 4: Tìm hiểu về Redux Toolkit – AsyncThunk.

Nội dung chi tiết:

- Khái niệm về Redux

- Dựng cấu trúc và cấu hình cần thiết để sử dụng Redux Toolkit với Typescript

- Cài đặt và học cách sử dụng Redux dev tool

- Các thành phần của Slice trong Redux Toolkit

- Selector và Dispatch trong 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 bộ với AsyncThunk trong Redux Toolkit

- Sử dụng CreateAsyncThunk để tạo hành động bất đồng bộ

- Quản lý trạng thái của hành động bất đồng bộ với ExtraReducers

Tuần 5: Tìm hiểu về Redux Toolkit Query.

Nội dung chi tiết:

- Lý do sử dụng Redux Toolkit Query thay vì quản lý các hành động bất đồng bộ bên trong AsyncThunk của Redux Toolkit

- Mở rộng cấu trúc và cấu hình để sử dụng Redux Toolkit Query

- Các thành phần của ApiSlice trong Redux Toolkit Query

- Get và Post (Restful API) trong Redux Toolkit Query

- Update và Delete (Restful API) trong Redux Toolkit Query

- Quản lý vòng đời của dữ liệu trong Redux Toolkit Query

- Tự động gọi api cập nhật dữ liệu khi có thay đổi với Redux Toolkit Query

- Quản lý lỗi trong Redux Toolkit Query

- Phân trang dữ liệu trong Redux Toolkit Query

Tuần 6: Tìm hiểu về các component chính sẽ sử dụng của thư viện component Antd.

- Tìm hiểu cách sử dụng các component của thư viện Antd tại 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 của một dự án ReactJS với thư viện Antd và Less.

Nội dung chi tiết:

- Áp dụng các component của Antd để xây dựng các layout chính của ứng dụng

- Sử dụng các thư viện CSS để tùy chỉnh trên giao diện

Tuần 8: Xây dựng một ứng dụng mẫu.

Nội dung chi tiết:

- Áp dụng các kiến thức đã học trong các tuần qua để xây dựng một ứng dụng đơn giản với các trang HOME, ABOUT, LOGIN

- Được các anh điều chỉnh convention code cho phù hợp và các tổ chức code trong ứng dụng

Tuần 9: Xây dựng Module quản lý Category của dự án Idrink.

Nội dung chi tiết:

- Tạo giao diện của Module Category bằng React, áp dụng những kiến thức đã được training từ Design trên Figma

- Tích hợp đa ngôn ngữ sử dụng thư viên I18n

- Sử dụng Redux Toolkit Query để thực hiện những hành động gọi api từ backend

- Quản lý các trạng thái trên màn hình (thành công, thất bại, đang tải, …)

- Tạo Form cho việc thêm mới, chỉnh sửa Category

- Validate form

- Góp ý và chỉnh sửa theo hướng dẫn của anh Hòa

Tuần 10: Xây dựng Module quản lý Product của dự án Idrink.

Nội dung chi tiết:

- Tạo giao diện của Module Product bằng React, áp dụng những kiến thức

- Tích hợp đa ngôn ngữ sử dụng thư viên I18n.

- Sử dụng Redux Toolkit Query để thực hiện những hành động gọi api từ backend

- Quản lý các trạng thái trên màn hình (thành công, thất bại, đang tải, …)

- Tạo Form cho việc thêm mới, chỉnh sửa Product

- Validate form

- Góp ý và chỉnh sửa theo hướng dẫn của anh Hòa

GIỚI THIỆU VỀ DỰ ÁN

Tổng quan

Dự án là một ứng dụng Quản lý việc bán rượu của một đối tác đến từ Pháp, trong

đó ứng dụng có thể tạo các Event để thúc đẩy việc marketing cho khách hàng, cũng như rút ngắn quá trình mua hàng cho khách hàng nhằm gia tăng trải nghiệm mà vẫn giữ được các yêu cầu về bảo mật, thanh toán bằng ứng dụng React Native Mobile Ngoài ra dự án còn tạo đồng tiền ảo riêng để sử dụng cho việc thanh toán bằng Near Protocol Hiện dự án vẫn còn trong giai đoạn phát triển các tính năng khác trên cả Mobile và Web

Thực hiện

Trước khi em tham gia thực tập Team đã xây dựng cấu trúc dự án gần như hoàn chỉnh Bản Mobile đã hoàn thiện theo yêu cầu hiện tại của khách hàng Bản web đang trong quá trình xây dựng thêm Em đã may mắn được tham gia để thực hiện 2 Module quản lý Category và Product của dự án tại bản web Dưới sự hỗ trợ nhiệt tình và tận tụy từ anh Hòa thì 2 tính năng của em cũng đã tương đối ổn Và được chấp nhận để tích hợp vào nhánh chính của dự án Vì thời gian thực tập không quá dài nên em chưa được thử sức với blockchain và smart contract – là 2 công nghệ được tích hợp thêm cho việc thanh toán và tạo đồng tiền ảo mới cho dự án

Kết quả

Hoàn thiện được 2 Module Category và Product của dự án Vì một số lý do về chính sách của công ty mà em không thể trình bày kết quả trong tài liệu báo cáo

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