báo cáo thực tập reactjs developer front end

Với sự xuất hiện của hàng tỷ trang web trên toàn cầu, việc tạo ra một sảnphẩm chất lượng, hài hòa cả về hình thức và nội dung, luôn là một thách thức đốivới các nhà phát triển web.Do đó,

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬPReactjs Developer (Front-end)

TP Hồ Chí Minh, tháng 12 năm 2023

LỜI MỞ ĐẦU

Công nghệ thông tin nói chung và ngành Công nghệ phần mềm nói riêngđóng vai trò không thể thiếu trong sự nghiệp phát triển của xã hội Trong thế giớingày nay, công nghệ web đã trở thành cánh cửa dẫn vào vô số kiến thức, dịch vụ vàcơ hội Sự phát triển này đã thay đổi cách chúng ta giao tiếp, làm việc, mua sắm vàgiải trí Với sự xuất hiện của hàng tỷ trang web trên toàn cầu, việc tạo ra một sảnphẩm chất lượng, hài hòa cả về hình thức và nội dung, luôn là một thách thức đốivới các nhà phát triển web.

Do đó, một trang web muốn được nhiều người sử dụng, cạnh tranh được vớinhững trang web khác phải đáp ứng được yếu tố hình thức và nội dung Để thửthách bản thân trong ngành công nghiệp web, em đã lựa chọn Reactjs là định hướngcho việc học cũng như nghề nghiệp trong tương lai.

Sau một thời gian học ở ghế nhà trường, đã có được một lượng kiến thức nềntảng tương đối, em quyết định tham gia vào R2S – một môi trường lý tưởng vàchuyên nghiệp để có thể áp dụng được những kiến thức đã học và thử sức với môitrường làm việc doanh nghiệp.

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn anh Lê Hồng Kỳ đã tạo điều kiện cho emcơ hội được thực tập tại công ty Dù trong thời gian ngắn nhưng nhờ sự chỉ dẫnnhiệt tình , em đã tiếp thu những kiến thức quan trọng để có thể tham gia một dự ánthực tế.

Chân thành cảm ơn R2S và các anh chị đồng nghiệp trong team đã bỏ ranhiều thời gian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khilàm quen môi trường mới cũng như trong việc tiếp cận kiến thức công nghệ, kỹnăng lập trình và tư duy sản phẩm để có thể thực hiện tốt dự án cá nhân và dự ánthực tế trong thời gian qua

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

TP HCM, ngày 04 tháng 01 năm 2024

Sinh viên thực hiệnNGUYỄN HUỲNH TUẤN KHANG

1.1 Giới thiệu công ty R2S 1

1.2 Sản phẩm công ty 2

1.2.1 JOBS IT 2

1.2.2 RA 2

1.3 Lịch làm việc khi thực tập tại công ty 3

CHƯƠNG 2: NỘI DUNG THỰC TẬP 5

2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 5

2.2 Nghiên cứu kỹ thuật 5

TÀI LIỆU THAM KHẢO 21

MỤC LỤC HÌNH ẢNH

Hình 1.1 Logo R2S 1

Hình 1.2: Hình ảnh icon của Jobs IT 2

Hình 1.3: Icon website RA 3

Hình 2.1: Icon ant design 6

Hình 2.2: Icon ant design 6

Hình 2.3: Màn hình đăng ký nhà tuyển dụng 8

Hình 2.4: Màn hình tìm kiếm ứng viên của HR 9

Hình 2.5: Màn hình tìm kiếm đợt thực tập của HR 10

Hình 2.6: Màn hình chi tiết đợt thực tập 11

Hình 2.7: Màn hình quy trình đăng ký khóa học 11

Hình 2.8: Màn hình nhập quy trình đăng ký khóa học 11

Hình 2.9: Màn hình hiển thị chính sách hoa hồng theo KPI 12

Hình 2.10: Màn hình thêm chính sách hoa hồng KPI 12

Hình 2.11: Modal cập nhật chính sách hoa hồng theo KPI 13

Hình 2.12: Màn hình hiển thị chính sách hoa hồng đạt chỉ tiêu 13

Hình 2.13: Màn hình thêm chính sách hoa hồng theo hình thức 2 14

Hình 2.14: Modal cập nhật chính sách hoa hồng loại 2 14

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP

1.1.Giới thiệu công ty R2S

Hình 1.1 Logo R2S

- Tên gọi: Resource Software Solution.

- Lịch sử hình thành: Công ty được thành lập vào ngày 01/08/2019.- Công nghệ chính trong công ty: Mobile.

- Địa chỉ: Văn Phòng : A005 Tầng trệt Chung cư Linh Đông, 1164 Phạm VănĐồng, P.Linh Đông, TP Thủ Đức, TP HCM.

- Website công ty: https://r2s.com.vn/vi/- Điện thoại: 0919 365 363

- Mô tả: R2S ra đời vào ngày một tháng tám năm 2019 với nhiệmvụ đào tạo nhân sự CNTT cho doanh nghiệp, phát triển phầnmềm và tư vấn giải pháp CNTT Resource SoftwareSolution( viết tắt: R2S) được thành lập với sứ mệnh:

1 Đào tạo nhân sự làm được việc ngay cho doanh nghiệp(Resource).

2 Phát triển phần mềm (Software).

3 Tư vấn giải pháp CNTT cho các doanh nghiệp thực hiệnchuyển đổi số (Solution).

1.2.Sản phẩm công ty

- Có 2 sản phẩm chính nổi bật chính của công ty:

1.2.1 JOBS IT

Hình 1.2: Hình ảnh icon của Jobs IT

- Một trang web giúp tìm kiếm công việc trên nền tảng online, với đa dạng cáccông việc và từ nhiều công ty khác nhau xoay quanh lĩnh vực IT

- Các chức năng chính:o Người xin việc

 Tìm kiếm được công việc với đa dạng ngành trong lĩnh vực IT Lưu công việc yêu thích và nộp CV công việc phù hợp

o Về phía nhà tuyển dụng

 Đăng tuyển nhân sự với thông tin chi tiết

 Tổng hợp được thông tin dễ dàng quản lý: số bài đăng tuyển,số lượt đăng ký,

2

Hình 1.3: Icon website RA

- Ứng dụng giúp quản lý khóa học và nhân sự- Các chức năng chính:

o Về quản lý khóa học, lớp học Thông tin khóa học Quy trình đăng ký  Thông tin lớp học Chính sách ưu đãi Hình thức lớp họco Về quản lý nhân sự

 Thông tin nhân viên Chính sách phụ cấp

 Chính sách hoa hồng – KPI Thống kê

 Doanh thu

1.3.Lịch làm việc khi thực tập tại công ty

Em tham gia làm việc tại công ty bắt đầu từ ngày 19/07/2023 tới 29/09/2023,các ngày làm việc trong tuần là từ thứ 2 tới thứ 6 Công việc hằng ngày bắt đầu từlúc 8h30 sáng đến 17h30 Thời gian nghỉ trưa khoảng 1 tiếng 30 phút Sau mỗi taskthực hiện, em sẽ báo cáo tiến độ công việc, đặt câu hỏi và nhận chia sẻ, giải đáp từ

anh hướng dẫn, đưa ra kế hoạch cho các task tiếp theo Mỗi cuối tuần thứ 6 sẽ cóbuổi họp team để tổng hợp nội dung hoàn tất cũng như tồn động, đưa ra hướng giảiquyết và mục tiêu cho tuần tiếp theo.

4

CHƯƠNG 2: NỘI DUNG THỰC TẬP

2.1.Tìm hiểu công ty và các kỹ năng cơ bản trong công tyThời gian: 2 ngày

Nội dung: giới thiệu về công ty, cách tổ chức của công ty, được nghe người phụ

trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty, … Ngoài ra, thực tập sinh còn đượcgiới thiệu về văn hóa làm việc trong công ty như thời gian đi làm, các quy định,cách sử dụng email trong công việc, …

Kết quả: hiểu thêm về cách thức làm việc, những qui định tại R2S và cách thức sử

dụng Microsoft team để quản lý công việc, quá trình thành lập và phát triển Cóthêm các kỹ năng về việc báo cáo hàng tuần, làm việc có kế hoạch, có kỷ luật, cótrách nhiệm hơn.

2.2.Nghiên cứu kỹ thuậtThời gian: 2 tuần

Nội dung: Nghiên cứu về Ant design, Redux toolkit Đọc sources code và thực hiện

lại chức năng forgot password.

Hình 2.1: Icon ant design

- Là tập hợp các components của React được xây dựng theo chuẩn thiết kế củaAnt UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết cáccomponent thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon,DatePicket, v.v…

- Dự án có sử dụng khá nhiều về form và ant Design cũng hỗ trợ rất tốt, dễ dànglấy giá trị, gán giá trị, submit giá trị của form.

- Áp dụng được ant design vào chính dự án thực tế dựa vào các component và gợiý code có sẳn trong trang ant design, không cần phải thực hiện làm lại.

Hình 2.2: Icon ant design

- Redux Toolkit là một bộ công cụ được thiết kế để đơn giản hóa quy trình làmviệc và cấu trúc mã nguồn khi sử dụng Redux trong việc quản lý trạng thái ứng

6

dụng JavaScript Nó cung cấp một số API tiện lợi để cấu hình store, xử lý trạngthái, và viết logic Redux một cách rõ ràng và dễ hiểu hơn

- Redux Toolkit giúp giảm bớt lượng mã boilerplate thường cần thiết khi sử dụngRedux thông thường, làm cho việc quản lý trạng thái trở nên hiệu quả và trựcquan hơn.

- Ứng dụng được redux toolkit và dự án thực tế để tạo ra những biến toàn cục,giúp ta sử dụng dễ dàng hơn đối với những biến dùng nhiều trên nhiều trang.Hiểu rõ được cách tạo các sử dụng, có thể call api và đưa thẳng dữ liệu trả vềvào biến toàn cục này.

Kết quả: Giúp biết thêm được công nghệ có thể áp dụng được vào dự án, không

những tìm hiểu sơ lược mà còn phải hiểu để có thể vận dụng vào dự án thực tế Thưviện hỗ trợ nhiều tính năng có sẳn từ đó giúp cho việc code trở nên dễ dàng hơn.

2.3.Tham gia dự án thực tế2.3.1 Tổng quan dự án.

- Công nghệ sử dụng: Reactjs, redux toolkit, ant design

a Jobs IT:

- Một trang web giúp tìm kiếm công việc trên nền tảng online, với đa dạng cáccông việc và từ nhiều công ty khác nhau xung quanh lĩnh vực IT

Hình 2.3: Màn hình đăng ký nhà tuyển dụng

- Nhà tuyển dụng có thể đăng ký vào trang web để đăng bài tuyển nhân sự Cầnđăng ký với các trường thông tin yêu cầu Ở những trang có nhiều trường thếnày thường có validate rất phức tạp để kiểm tra tính đúng đắn của dữ liệu trướckhi được đưa xuống database.

8

Hình 2.4: Màn hình tìm kiếm ứng viên của HR

- Người HR có thể tìm kiếm trong danh sách các ứng viên đang gửi CV lên web,xem trực tiếp CV và lưu thông tin người đó vào danh sách ứng viên của mình.

Hình 2.5: Màn hình tìm kiếm đợt thực tập của HR

- Người HR có thể tìm kiếm đợt thực tập từ nhiều trường khác nhau, tại đó có thểsẽ tìm được nhân lực mới cho vị trí đang tuyển dụng

10

Hình 2.6: Màn hình chi tiết đợt thực tập

- HR click vào xem chi tiết mô tả của trường, thông tin liên quan và danh sách cácsinh viên hiện tại trong đợt thực tập

b RA

- Là một dự án giúp quản lý về việc bán khóa học và quản lý nhân sự.

Hình 2.7: Màn hình quy trình đăng ký khóa học

- Học viên sẽ dựa vào quy trình đăng ký khóa học để có thể đăng ký học các khóahọc từ nhà cung cấp Có các bước quy trình cụ thể, rõ ràng.

Hình 2.8: Màn hình nhập quy trình đăng ký khóa học

- Có 2 loại chính sách là theo KPI và theo hoa hồng

Hình 2.9: Màn hình hiển thị chính sách hoa hồng theo KPI

Hình 2.10: Màn hình thêm chính sách hoa hồng KPI

12

Hình 2.11: Modal cập nhật chính sách hoa hồng theo KPI

Hình 2.12: Màn hình hiển thị chính sách hoa hồng đạt chỉ tiêu

Hình 2.13: Màn hình thêm chính sách hoa hồng theo hình thức 2

Hình 2.14: Modal cập nhật chính sách hoa hồng loại 2

2.3.2 Quá trình thực hiện:

TuầnCông việcNgười hướng dẫnhoàn thànhMức độ

1 - Làm quen sources code,redux toolkit.

Anh Nguyễn Tất Kỳ(Leader Front-end),Lê Hồng Kỳ (CEO)

14

- Thực hiện dự án: Jobs IT- Thực hiện lại chức năng

Anh Nguyễn Tất Kỳ(Leader Front-end),Lê Hồng Kỳ (CEO)

Anh Nguyễn Tất Kỳ(Leader Front-end),Lê Hồng Kỳ (CEO)

- Filter theo tên.

Anh Nguyễn Tất Kỳ,Lê Hồng Kỳ (CEO)(Leader Front-end),Lê Hồng Kỳ (CEO)

8 Fix bug:

- Validate create, update quytrình đăng ký khóa học- Fix bug: nhập _ vẫn hiển thị- RA - 37: [Bug] Chính sách

hoa hồng-theo kpi học viên(thêm chính sách)

- RA-66: [Bug] Kiểm thửthêm mới quy trình với diễngiải trùng.

- RA-67: Kiểm thử thay đổiquy trình với diễn giải trùng.- RA-62: [Bug] Xác minhngười dùng thêm 1 chínhsách hoa hồng theo KPI.- RA-52 [Bug] Kiểm thử thêm

mới quy trình với 1 thôngtin sai và những thông tincòn lại đúng.

- RA-53: [Bug] Kiểm thử thayđổi quy trình với 1 thông tinsai và những thông tin cònlại đúng.

- RA-43 [Bug] Kiểm thử thêmmới quy trình với các thôngtin đúng

- RA-44 [Bug] Kiểm thử thêmmới quy trình với các thôngtin rỗng

- RA-46: [Bug] Kiểm thử xóaquy trình thành công

- RA-38: [Bug] Xác minhclick chọn áp dụng chínhsách hoa hồng theo KPI họcviên

Anh Nguyễn Tất Kỳ, Lê Hồng Kỳ (CEO)(Leader Front-end),Lê Hồng Kỳ (CEO)

16

- RA-45 [Bug] Kiểm thử thayđổi quy trình với thông tinđúng.

- RA- 41: [Bug] Xác minhngười dùng click chọn chỉnhsửa 1 chính sách hoa hồngtheo kpi bất kì

- Tự thêm 1 cái chính sáchtrước khi làm

2.3.3 Kết quả:

- Trong vòng gần 3 tháng, bản thân em đã thấy sự tiến bộ rõ rệt trong cách code,sau khi nhận task xong thì tự phân tích luồng đi dữ liệu, cách giải quyết Biếtđược quy trình khi nhận một task sẽ thế nào, nhận thời gian deadline thế nào đểphân bổ thời gian phù hợp

- Code sau khi hoàn thành sẽ được đánh giá lại để đưa ra lỗi khắc phục, cải thiệnhơn trong những lần tiếp theo.

- Được tham gia vào 1 quá trình phát triển phần mềm một cách có tổ chức, đượcchỉ dẫn để cải thiện kĩ năng lập trình rất nhiều và quy trình làm việc không chỉvới team của mình là Front-end mà phải giao tiếp với mọi người trong từng quytrình cụ thể: BA, Back-end, Tester.

2.3.4 Thuận lợi:

- Cải thiện được kĩ năng lập trình.

- Biết cách thức làm việc của 1 công ty là như thế nào.- Được tham gia vào 1 qui trình phát triển phần mềm thực tế.

- Học được nhiều kiến thức mới: ngôn ngữ, thư viện mới, đọc tài liệu, fix bug,…

2.3.5 Khó khăn:

- Mất thời gian khi áp dụng kiến thức trainning ở giai đoạn đầu khi mới vào dự ánthực tế.

- Được traning xong là một việc, thế nhưng để áp dụng được vào thực tế dự án lạilà một việc khó khăn hơn, phải hiểu rõ cách hoạt động cũng như nhiều lỗi, bugmới chưa từng gặp.

- Khi được traning sẽ là những bài tập cơ bản, thế nhưng khi áp dụng vào dự án,kích thước của dự án rất lớn và code được tổ chức với nhiều cách, nhiều foldercần thời gian để làm quen

18

CHƯƠNG 3: TỔNG KẾT

Quãng thời gian thực tập tại R2S đã giúp em cải thiện bản thân rất nhiều trong quytrình làm việc thực tế, tác phong của người kỹ sư phần mềm Được làm việc tại đâycho em cảm nhận rõ về công việc của một kỹ sư phần mềm, cách để làm quen hòanhập với một cộng đồng hay một nhóm mới để làm việc hiệu quả sau này Quantrọng hơn hết là khả năng code của bản thân đã được cải thiện rõ rệt.

Khi tham gia vào dự án thực tế, em cũng hoàn thành tốt các tác vụ đúng hạn và đạtchất lượng tốt.

3.1.Điểm mạnh

- Kỷ luật: tuân thủ giờ giấc làm việc, chuyên cần

- Chuyên môn: tiếp thu nhanh và hoàn thành công việc ở mức khá

- Giao tiếp: hòa đồng với các đồng nghiệp, tích cực trao đổi tham gia các hoạtđộng của nhóm

3.2.Điểm yếu

- Cần nâng cao khả năng giải quyết các vấn đề liên quan đến logic và thuật toán,phân tích về bài toán đang thực hiện.

3.3.Chuẩn đạt đượcGoa

lMục tiêu môn học

G1 Nắm bắt được xu hướng, nhu cầu xã hội và tính đặc thù của doanh nghiệp.G2 Hiểu và giải thích được các khái niệm cơ bản, thuật ngữ và sơ đồ hệ thống trong dự án.G3 Nắm được quy trình, phương pháp và công nghệ phát triển sản phẩm phần mềm tại doanh nghiệp.G4 Có khả năng tìm hiểu vấn đề, mô hình hóa vấn đề và tham gia giải quyết vấn đề.

G5 Phát triển kỹ năng tư duy, kỹ năng làm việc nhóm và kỹ năng trình bày.G6 Đọc, hiểu các tài liệu bằng tiếng Anh.

20

TÀI LIỆU THAM KHẢO

1 Tài liệu ant design [Truy cập ngày: 04/01/2024]Link: Introduction - Ant Design

2 Tài liệu Reactjs [Truy cập ngày: 04/01/2024]Link: Quick Start – React