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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.62 MB, 25 trang )

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

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ẬPFontend - Developer

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

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

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 ln là nhân tốđóng vai trị quan trọng trong q 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 ln 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.

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

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 choem 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 Hồ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 12năm 2023

Nguyễn Văn Linh

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

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

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

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

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

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

MỤC LỤC BẢNG

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

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

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

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

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

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

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

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

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ý

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

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

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.

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

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

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

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

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 DevToolsvà 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 tố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.

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

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

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

React--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 ngồ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

Hình 2. 3 Json Server

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

Nội dung:

Reducers và Middlewares.

Kết quả: Biết cách xây dựng và sử dụng redux trnog dự án2.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ả:

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

- 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 QueryThờ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 queryo Nắm được ưu và nhược điểm khi sử dụng react query cho

2.2.7. Tìm hiểu về TypeScriptThờ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ế.

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

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

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

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

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

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

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ê

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

3.2. Mơ tả chi tiết q 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ầnNgày thực hiệnNộ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

- 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

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

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ữ

4/12 – 8/12/2023 - 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ữ

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

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 – Xố Mù chữ”

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

- Ngồi những gì được training trong q 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.

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

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

Quãng thời gian thực tập tại công ty Xbot đã giúp em cải thiện bảnthân rất nhiều trong quy trình làm việc thực tế, tác phong của ngườikỹ sư phần mềm. Được làm việc tại đây, em đã học thêm được kỹnăng mềm sử dụng mail, quản lý task, làm việc nhóm, giao tiếp vớicấp trên, …

Chỉ trong thời gian hạn chế, em đã hồn thành q 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. Ngồ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

- Hồ đồ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.3. Chuẩn đạt được

Bảng 2 Chuẩn đạt được

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

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

doanh nghiệp

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