báo cáo thực tập fontend developer

Sau những năm tháng trong môi trường đại học, với mong muốn ápdụng những kiến thức đã học và có được trải nghiệm trong môitrường thực tế, em đã quyết định tham gia vào Công ty Xbot – một

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 Fontend - Developer

Xbot

Thực tập sinh: Nguyễn Văn Linh

1

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

LỜI MỞ ĐẦU

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nóichung và ngành Công nghệ phần mềm nói riêng luôn là nhân tốđóng vai trò quan trọng trong quá trình phát triển của xã hội

Công nghệ Web, hay công nghệ sản xuất các trang web đã phục vụhầu hết các nhu cầu của con người từ bán hàng, cung cấp kiến thứcđến thông tin liên lạc, Hiện nay đã có đến hơn 1.5 tỷ trang web,nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệugiảm

Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứngđược yếu tố hình thức và nội dung Làm thế nào để sản phẩm tạo rađạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ pháttriển website nào cũng cần phải suy nghĩ đau đầu Để thử thách bảnthân trong ngành công nghiệp web, em đã lựa chọn Full stack webdeveloper là định hướng cho việc học cũng như nghề nghiệp trongtương lai

Sau những năm tháng trong môi trường đại học, với mong muốn ápdụng những kiến thức đã học và có được trải nghiệm trong môitrường thực tế, em đã quyết định tham gia vào Công ty Xbot – mộtmôi trường lý tưởng và chuyên nghiệp để thực hiện dự định

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn Công ty Xbot đã tạo điều kiện cho

em cơ hội được thực tập tại công ty Dù trong thời gian ngắn nhưngnhờ sự chỉ dẫn nhiệt tình của anh Nguyễn Thái Huy, em đã tiếp thunhững kiến thức quan trọng để có thể tham gia một dự án thực tế Chân thành cảm ơn Mai Phương Nam, Trương Hoài Nhật Thanh,Nguyễn Thái Huy, Ngô Hữu Được và các anh chị trong team dev đã

bỏ ra nhiều thời gian, công sức để hướng dẫn, hướng dẫn, giúp đỡ

em tận tình trong khi làm quen môi trường mới cũng như trong việctiế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ự án thực tế trong thờigian qua

Em 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áo cáo này

TP HCM, ngày 31 tháng 12

năm 2023

Nguyễn Văn Linh

3

NHẬN XÉT CỦA KHOA

MỤC LỤC LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

MỤC LỤC 5

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

1.1 Giới thiệu về công ty Xbot 8

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

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

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

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

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

2.2.1 Tìm hiểu về môi trường làm việc, các công cụ và cài đặt môi trường làm việc 12

2.2.2 Tìm hiểu về ngôn ngữ lập trình javascript 12

2.2.3 Tìm hiểu về React JS 14

2.2.4 Tìm hiểu về Redux 16

5

2.2.5 Tìm hiểu về các thư viện giao diện 16

2.2.6 Tìm hiểu về GraphQL và React Query 17

2.2.7 Tìm hiểu về TypeScript 17

2.3 Tham gia dự án thực tế 17

CHƯƠNG 3: THAM GIA DỰ ÁN THỰC TẾ 18

3.1 Giới thiệu về dự án Elibot 18

3.2 Mô tả chi tiết quá trình thực hiện: 21

3.3 Kết quả 22

3.4 Thuận lợi 22

3.5 Khó khăn 22

CHƯƠNG 4: TỔNG KẾT 23

4.1 Điểm mạnh 23

4.2 Điểm yếu 23

4.3 Chuẩn đạt được 23

TÀI LIỆU THAM KHẢO 25

MỤC LỤC HÌNH ẢN Hình 1 1 Logo công ty 8

Hình 1 2 Phần mềm elibot 9

Hình 1 3 Phần mềm Edubot 9

Hình 1 4 Phần mềm Nutribot 10

Hình 1 5 Phần mềm Hebot 11

Y Hình 2 1 Ngôn ngữ JavaScript 13

Hình 2 2 Logo React JS 14

Hình 2 3 Json Server 15

Hình 2 4 Logo Eslint 16

Hình 3 1 Giao diện danh sách đối tượng điều tra 18

Hình 3 2 Giao diện báo cáo thống kê 19

Hình 3 3 Giao diện ký số 19

Hình 3 4 Giao diện Báo cáo- Biên bản 20

Hình 3 5 Giao diện So dò thống kê 20

MỤC LỤC BẢNG

Bảng 1 Bảng mô tả chi tiết quá trình thực hiện dự án thực tế 21Bảng 2 Chuẩn đạt được 23

7

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP1.1 Giới thiệu về công ty Xbot

Hình 1 1 Logo công ty

Công ty Xbot là công ty chuyên cung cấp các phần mềm và giảipháp về thực hiện phổ cập giáo dục các cấp và xoá mù chữ, kiểmđịnh chất lượng giáo dục và các phần mềm hỗ trợ khác như Dạy,thanh tra, kiểm tra, đánh giá trẻ, xây dựng thực đơn cân đối dinhdưỡng vào lên báo cáo thu chi hiệu quả

1.2 Sản phẩm công ty

1.2.1 Phần mềm Elibot

mù chữ, thay thế phần mềm của Bộ

quả hơn như: kế thừa dữ liệu học sinh đang có của dữ liệu quốcgia để tránh việc thu thập lại thông tin học sinh

phổ cập cho các công tác quản lý, thống kê của ban nghành khác

Hình 1 2 Phần mềm elibot

1.2.2 Phần mềm Edubot

trợ: Dạy, thanh tra, kiểm tra, đánh giá trẻ, giảm sức lao động

và không in ấn (Mỗi năm công tác này cần in hơn 3.800 trang giấy)

chỉnh và dạy những nội dung phù hợp cho lớp

giáo viên trong 1 giờ học nào đó

9

Hình 1 3 Phần mềm Edubot

1.2.3 Phần mềm Nutribot

đơn cân đối dinh dưỡng vào lên báo cáo thu chi hiệu quả

phù hợp với nhu cầu thực tế của người dùng

1.2.4 Phần mềm Hebot

tuổi, từ đó tính được tình trạng sinh dinh dưỡng, thừa cân, béo phì, thấp còi…

báo cáo lên cấp Phòng/Sở

nhiễm như: Tay chân miệng, sốt xuất huyến) Phần mềm tự động tổng hợp và báo cáo lên cấp Phòng/Sở và cơ quan y tế có thẩm quyền để kịp xử lý

lý

Hình 1 4 Phần mềm Nutribot

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 18/9/2023 tới15/12/2023, các ngày làm việc trong tuần là thứ 3, 4, 5, 6 Công việchằng ngày bắt đầu từ lúc 8h00 đến 5h30 Thời gian nghỉ trưa khoảng1.5 tiếng Sau mỗi ngày làm việc em sẽ báo cáo tiến độ công việctrong ngày, đặt câu hỏi và nhận chia sẻ, giải đáp từ anh hướng dẫn,đặt mục tiêu cho ngày làm việc tiếp theo Mỗi tuần sẽ họp tiến độtuần 1 lần vào sáng thứ 4, mọi người sẽ cùng họp và bàn bạc về cácvấn đề đã giải quyết, tồn đọng, bài học, giải pháp và mục tiêu chotuần tiếp theo

11

Hình 1 5 Phần mềm Hebot

CHƯƠNG 2: NỘI DUNG THỰC TẬP2.1 Tìm hiểu Công ty và các kỹ năng cơ bản trong Công ty

Thời gian: 1 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ứccủa công ty, các phòng ban về IT, HR, … Ngoài ra, thực tập sinh cònđược giới thiệu về văn hóa làm việc trong công ty như thời gian đilà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ông ty, quá trình thành lập và phát triển.

Có thêm các kỹ năng về việc sử dụng email trong công việc, làmviệc có kế hoạch, có kỷ luật, có trách nhiệm hơn

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

2.2.1 Tìm hiểu về môi trường làm việc, các công cụ và cài đặt môi trường làm việc

Thời gian: 2 ngày

Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình

làm việc

Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìmhiểu về các công cụ sẽ giúp ích cho trong công việc sau này Một sốphần mềm trong số đó như:

Jira – Một công cụ quản lý dự án và theo dõi vấn đề

Bitbucket - Trình duyệt lưu trữ source mã nguồn, dùng để lưutrữ code

VS Code - một trình soạn thảo mã nguồn mã nguồn mở miễnphí được phát triển bởi Microsoft

Kết quả: Biết cách sử dụng các công cụ trên Và dùng trong một dự

án thực tế

2.2.2 Tìm hiểu về ngôn ngữ lập trình javascript

Thời gian: 6 ngày

Nội dung: Được training và tìm hiểu về ngôn ngữ Javascript với các

nội dung sau:

- Javascript cơ bản

Hình 2 1 Ngôn ngữ JavaScript

o Tổ chức thư mục, cài đặt môi trường cho JS

o Nắm được kiểu dữ liệu, cách khai báo biến và các câu lệnh cơ bản: comment, if, for

o Nắm được kiến thức về hàm chức năng: biến toàn cục, cục bộ, vùng dữ liệu, tham số (tham chiếu, tham trị)

o Hiểu được toán tử: Rest Operator

o Biết được cách debug bằng browser với Chrome DevTools

và Firefox DevTools

- Tìm hiểu Object

o Hiểu được cách khai báo, chức năng, công dụng củaObject

o Nắm được kiến thức về con trỏ This

o Nắm được cú pháp của biểu thức Object Destructuring,cách dùng Object.keys()

o Hiểu được toán tử: Spread Operator

- Tìm hiểu về Number, String và Array

o Nắm được phương pháp xử lý với kiểu dữ liệu Number

o Làm chủ các tính năng bổ trợ của String và Array

o Nắm được cú pháp của biểu thức DestructuringAssignment

- Tìm hiểu về CallBack, Promise và Async/Await

o Tìm hiểu và nắm được cách sử dụng Callback

13

o Làm chủ được promise trong xử lý tác vụ bất đồng bộ,làm quen với cú pháp async/await trong promise.

o Hiểu về Event Loop trong JS

- Tìm hiểu về Session, Cookie và LocalStorage

o Tìm hiểu và nắm được khái niệm, cách sử dụng và ứngdụng của session, cookie va local storage

Kết quả:

javascript trong phát triển website

dụng một số thư viện như Eslint, Prettier để hỗ trợ cho việc viếtcode gọn gang và dễ nhìn hơn

2.2.3 Tìm hiểu về React JS

Hình 2 2 Logo React JS

Thời gian: 6 ngày

Nội dung:

- Khởi tạo dự án React JS

o Biết các xây dựng môi trường và thiết lập một dự án

React JS

o Xây dựng project bằng Create React App,

React-boilerplate

- Tìm hiểu về dữ liệu và cách truyền dữ liệu

o Hiểu và vận dụng State và Props trong ReactJS

o Cách truyền dữ liệu giữa các Components

- Tích hợp với các thư viện bổ trợ xây dựng Server API giả lập

o Xây dựng được một Server api giả lập với Json Server

o Kết hợp gọi api bằng thư viện hỗ trợ

o Biết cách dùng cách component từ thư viện ngoài

- Tìm hiểu về Routing trong ReactJS

o Biết cách xây dựng ứng dụng nhiều trang Page và chuyểnđổi giữa các Page bằng routing

o Ứng dụng HOC trong bằng xây dựng component:PrivateRoute

- Tìm hiểu về Hook trong ReactJS:

o Nắm được cách hook cơ bản: useState(), useEffect(),useMemo(), useCallBack()

o Quy định cần biết khi dùng Hooks

o Tự xây dựng một customHook()

- Sử dụng Eslint và Prettier để format code

15

Hình 2 3 Json Server

Hình 2 4 Logo Eslint

o Tìm hiểu và biết được cách thức hoạt động

o Cấu hình vào trong 1 dự án React JS

Kết quả:

- Biết được cách khởi tạo dự án React JS

- Biết xây dựng các routing

- Sử dụng được các hook cơ bản trong React JS

- Cấu hình code formatter cho dự án

2.2.4 Tìm hiểu về Redux

Thời gian: 2 ngày

Nội dung:

Reducers và Middlewares

Middlewares

Kết quả: Biết cách xây dựng và sử dụng redux trnog dự án

2.2.5 Tìm hiểu về các thư viện giao diện

Thời gian: 3 ngày (1 tuần)

Nội dung: Tìm hiểu về cách cài đặt và hoạt động của các thư viện

Ant Design, Sematic UI, Material UI

Kết quả:

- Biết các sữ dụng các thư viện hổ trợ để xây dựng một website

2.2.6 Tìm hiểu về GraphQL và React Query

Thời gian: 3 ngày

Nội dung:

- Tìm hiểu về React Query

o Hiểu được các khái niệm và lý do sử dụng

o Biết được cách thức cấu hình dự án sữ dụng react query

o Nắm được ưu và nhược điểm khi sử dụng react query cho từng dự án

- Tìm hiêu về GraphQL

o Tìm hiểu được các khái niệm

o Nắm được cách thức gọi API

o Nắm được ưu điểm và hạn chế khi sử dụng GraphQL

Kết quả:

2.2.7 Tìm hiểu về TypeScript

Thời gian: 1 ngày

Nội dung:

dự án

Kết quả:

2.3 Tham gia dự án thực tế

Sau một tháng rưỡi được training và thực hành, thực tập sinh đãnắm được những kiến thức cơ bản về Javascript và ReactJS Trongmột tháng rưỡi còn lại, mentor đã hướng dẫn thực tập sinh áp dụngnhững kiến thức đã học để tham gia vào dự án thực tế

17

CHƯƠNG 3: THAM GIA DỰ ÁN THỰC TẾ

3.1 Giới thiệu về dự án Elibot

và xoá mù chữ, thay thế phần mềm của Bộ

quả hơn như: kế thừa dữ liệu học sinh đang có của dữ liệu quốcgia để tránh việc thu thập lại thông tin học sinh

phổ cập cho các công tác quản lý, thống kê của ban nghành khác

Các tính năng chính:

Hình 3 1 Giao diện danh sách đối tượng điều tra

Hình 3 2 Giao diện báo cáo thống kê

Hình 3 3 Giao diện ký số

19

Hình 3 4 Giao diện Báo cáo- Biên bản

Hình 3 5 Giao diện So dò thống kê

3.2 Mô tả chi tiết quá trình thực hiện:

Bảng 1 Bảng mô tả chi tiết quá trình thực hiện dự án thực tế

Tuần Ngày thực hiện Nội dung thực hiện

Tuần 7 30/10– 3/11/2023 - Tìm hiểu dự án tham gia

- Tiểu hiểu về source dự án

- Chạy thử ứng dụng để xem giao diện cũng như các chức năng của dự án

- Tìm hiểu về cấu trúc thư mục, các quy luật đặt tên

Tuần 8 6/11– 10/11/2023 - Giải quyết các task bug từ phía khách

hàng

- Tìm hiểu về tính năng mới: Báo cáo thống kê – Thống kê trẻ em 4 tuổi Phổ cập giáo dục mầm non

17/11/2023

- Giải quyết các task bug từ khách hàng

- Làm tính năng mới trong web: Báo cáo thống kê – Thống kê trẻ em 4 tuổi Phổ cập giáo dục mầm non

Tuần

10

20/11 –24/11/2023

- Làm tính năng mới trong web: Báo cáo thống kê – Thống kê trẻ em 4 tuổi Phổ cập giáo dục mầm non

- Trao đổi với QA về các bug có trong task và sửa lỗi

Tuần

11

27/11 –1/12/2023

- Giải quyết các task bug từ khách hang

- Làm tính năng mới trong web: Biên bảnkiểm tra kết quả Phổ Cập Giáo Dục – Xoá Mù chữ

Tuần

12

4/12 – 8/12/2023 - Làm tính năng mới trong web: Biên bản

kiểm tra kết quả Phổ Cập Giáo Dục – Xoá Mù chữ

- Họp trao đổi với BA về yêu cầu bổ sungcủa tính năng

- Trao đổi với QA và giải quyết các bug

có trong taskTuần

13

11/12 –15/12/2023

- Giải quyết các task bug của khách hàng

- Trao đổi với QA về cách giải quyết bug trong tính năng “Biên bản kiểm tra kết quả Phổ Cập Giáo Dục – Xoá Mù chữ”

21

3.3 Kết quả

- Hoàn thành tất cả các nhiệm vụ được giao, đúng tiến độ và ít lỗi

- Thực hiện được các task có mức độ khó cao

- Sau khi hoành thành task công ty giao em đã học hỏi thêm được vềcác quy trình nhận task và xử lý task từ khi có được yêu cầu cho đếnkhi được đưa lên bản production

- Ngoài những gì được training trong quá trình thực tập em còn đượccác anh hướng dẫn cho cách áp dụng CI/CD vào trong dự án thực tếgiúp cho việc tối ưu thời gian ớ các khâu

- Cách thức code tuy đúng nhưng hiệu suất tái sử dụng không cao

- Các giải pháp em đưa ra để thực hiện task chưa được tối ưu hoáhiệu năng

Chỉ trong thời gian hạn chế, em đã hoàn thành quá trình training vớicác tính năng, yêu cầu đặt ra ban đầu và được tham gia trãi nghiệmvào dự án thực 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à đạt chất lượng tốt Ngoài ra em còn học được nhữngkiến thức hữu ích để áp dụng vào dự án của em sau này

4.1 Điểm mạnh

- Khả năng tự học tốt các công nghệ mới

- Vận dụng được các kiến thức đã học áp dụng vào dự án của công ty

- Có nhiều ý tưởng giúp ích cho dự án

- Hoà đồng, thân thiện với các anh chị trong công ty

- Khả năng nghiên cứu, đọc hiểu các tài liệu trên mạng tốt

4.2 Điểm yếu

- Thiếu kinh nghiệm trong dự án thực tế Chưa tối ưu được hiệu suất của trang web

- Thực hiện các task được giao chậm hơn so với ước tính ban đầu

- Cách nêu lên vấn đề và giải quyết vấn để chưa được rõ ràng và tường minh

doanh nghiệp

đồ hệ thống trong dự án

sản phẩm phần mềm tại doanh nghiệp

gia giải quyết vấn đề

trình bày

TÀI LIỆU THAM KHẢO