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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>BÁO CÁO THỰC TẬPReactjs Developer (Front-end)</b>

<b>TP. Hồ Chí Minh, tháng 12 năm 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU</b>

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, ln 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.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

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

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

TÀI LIỆU THAM KHẢO...21

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>MỤC LỤC HÌNH ẢNH</b>

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

<b>1.1.Giới thiệu cơng ty R2S</b>

<i>Hình 1.1. Logo R2S</i>

- 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: Đ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).

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>1.2.Sản phẩm cơng ty</b>

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

<b>1.2.1. JOBS IT</b>

<i>Hình 1.2: Hình ảnh icon của Jobs IT</i>

- 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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<i>Hình 1.3: Icon website RA</i>

- Ứ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

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

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ừ

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

<b>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 </b>

<b>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ụ</b>

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, … Ngồ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, …

<b>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ử</b>

dụng Microsoft team để quản lý công việc, q 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.

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

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

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<i>Hình 2.1: Icon ant design</i>

- 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.

<i>Hình 2.2: Icon ant design</i>

- 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ã ng̀n khi sử dụng Redux trong việc quản lý trạng thái ứng

6

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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.

<b>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</b>

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.

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

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

<b>a. Jobs IT: </b>

- 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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

- 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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

- 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.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

- 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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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

- 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>b. RA</b>

- 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ự.

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

- 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.

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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

<i>Hình 2.9: Màn hình hiển thị chính sách hoa hờng theo KPI</i>

<i>Hình 2.10: Màn hình thêm chính sách hoa hờng KPI</i>

12

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<i>Hình 2.11: Modal cập nhật chính sách hoa hờng theo KPI</i>

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

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<i>Hình 2.13: Màn hình thêm chính sách hoa hờng theo hình thức 2</i>

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

<b>2.3.2. Quá trình thực hiện:</b>

<b>TuầnCơng việcNgười hướng dẫn_{hồn thành}^{Mức độ}</b>

1 ^{- Làm quen sources code,}_{redux toolkit.}

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

14

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

- 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.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

- 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

<b>2.3.3. Kết quả:</b>

- 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 l̀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.

<b>2.3.4. Thuận lợi:</b>

- 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,…

<b>2.3.5. Khó khăn:</b>

- 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ế.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

- Đượ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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>CHƯƠNG 3: TỔNG KẾT</b>

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.

<b>3.1.Điểm mạnh</b>

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

- Chun mơn: tiếp thu nhanh và hồ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

<b>3.2.Điểm yếu</b>

- 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 tốn đang thực hiện.

<b>3.3.Chuẩn đạt đượcGoa</b>

<b>l^{Mục tiêu môn học}</b>

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 đề.}

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>TÀI LIỆU THAM KHẢO</b>

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

</div>