Báo cáo thực tập lập trình react js
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 (1005.69 KB, 19 trang )
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
LẬP TRÌNH REACT.JS
Cơng ty thực tập : Công Ty TNHH Kootoro Việt Nam
Người phụ trách : Nguyễn Đức Vũ
Thực tập sinh
: Nguyễn Hồng Vũ
TP. Hồ Chí Minh, tháng 12 năm 2022
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
LỜI MỞ ĐẦU
Ngày nay, với sự phát triển nhanh chóng của xã hội, công nghệ thông tin trở thành
một phần không thể thiếu đối với cuộc sống của mỗi con người và lập trình web là một
trong số đó.
Lập trình web là một trong những lựa chọn nghề nghiệp xu hướng, phổ biến với
các bạn học khoa học máy tính hoặc kỹ thuật phần mềm, cơng nghệ thơng tin nói chung.
Lập trình viên web được coi là một vị trí việc làm nhiều triển vọng do nhu cầu tuyển
dụng được dự đoán sẽ tiếp tục tăng lên trong tương lai. Và đây cũng chính là lý do để em
đưa ra quyết định đầu tiên cố gắng học chuyên sâu lập trình web và biến nó thành một
cái nghề của mình.
Trải qua quá trình học tập trên trường, em đã hiểu rõ hơn về quá trình phát triển
phần mềm, tư duy thuật toán và giải quyết vấn đề. Tuy những kiến thức ấy là quý báu,
nhưng để nó thực tế hơn thì bản thân em cần phải trải nghiệm và ứng dụng được chúng.
Chính quyết định ấy, em đã bắt đầu tìm kiếm cơng ty để mình bắt đầu hành trình thực tập
đầu tiên và Công Ty TNHH Kootoro Việt Nam chính là lựa chọn tốt nhất đối với em,
là nơi sẽ giúp em có những trải nghiệm đầy thú vị trong mơi trường làm việc thực tế.
Nguyễn Đức Vũ
Nguyễn Hồng Vũ-18521671
LỜI CẢM ƠN
Đầu tiên, em xin trân trọng gửi lời cảm ơn đến Công ty TNHH Kootoro đã tạo điều kiện
để em được bắt đầu hành trình thực tập của mình tại đây.
Trong q trình trải nghiệm mơi trường làm việc tại công ty, em đã học được nhiều thứ
hay như là cách làm việc, tiếp cận một kiến thức mới, cách mọi người giải quyết vấn đề và đặc
biệt là văn hóa của cơng ty. Trong khoảng thời gian ấy, kiến thức mà em học được trong lần đầu
tiên “thực chiến” này có thể nói là rất quý báu. Những kiến thức ấy đã giúp em hiểu rõ hơn về
việc xây dựng khung của một ứng dụng web hoàn chỉnh, cũng như cách thức để giao tiếp giữa
những lập trình viên Front-end và Back-end.
Đặc biệt, em xin chân thành gửi lời cảm ơn đến anh Nguyễn Đức Vũ đã hướng dẫn cho
em quy trình và cách thức để chúng ta có thể xây dựng nên một ứng dụng web hoàn chỉnh, cũng
như là người truyền cảm hứng để em có thể biết mình đang ở đâu và nên làm gì trên con đường
phía trước. Ngồi ra, em xin gửi lời cảm ơn đến các anh, cũng như các bạn đồng nghiệp đã nhiệt
tình hướng dẫn giải quyết những vấn đề mà em gặp trong q trình hồn thiện dự án.
Em xin trân thành cảm ơn quý thầy cô khoa Công Nghệ Phần Mềm đã tạo điều kiện môn
học để em có thể trải nghiệm thực tế với doanh nghiệp, cũng như đã dành thời gian quý báo của
mình để lắng nghe em báo cáo về quá trình thực tập của mình.
TP. Hồ Chí Minh, ngày 24 tháng 12 năm 2022
Nguyễn Hoàng Vũ
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
NHẬN XÉT CỦA KHOA
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
MỤC LỤC
Chương 1.
GIỚI THIỆU CÔNG TY THỰC TẬP ................................................................... 1
1.1.
Giới thiệu Công ty TNHH Kootoro Việt Nam....................................................... 1
1.2.
Sản phẩm của cơng ty ............................................................................................ 1
Chương 2.
NỘI DUNG THỰC TẬP ....................................................................................... 2
2.1.
Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ......................................... 2
2.2.
Nghiên cứu kỹ thuật ............................................................................................... 3
2.2.1.
Các công cụ làm việc ............................................................................................. 3
2.2.2.
Tìm hiểu Framework React.js ................................................................................ 3
2.2.3.
Tìm hiểu về VueXY Admin Template – React Admin Template ......................... 4
2.3.
Thực hiện project ................................................................................................... 5
2.4.
Lịch làm việc .......................................................................................................... 6
Chương 3.
CHI TIẾT VỀ PROJECT ....................................................................................... 8
3.1.
Giới thiệu về ứng dụng ........................................................................................... 8
3.2.
Thực hiện................................................................................................................ 8
3.2.1.
Giai đoạn xây dựng khung sườn cho ứng dụng web .............................................. 8
3.2.2.
Giai đoạn triển khai ứng dụng web ........................................................................ 8
TÀI LIỆU THAM KHẢO ......................................................................................................... 12
TỔNG KẾT .............................................................................................................................. 13
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
1
Chương 1. GIỚI THIỆU CÔNG TY THỰC TẬP
1.1. Giới thiệu Công ty TNHH Kootoro Việt Nam
Công Ty Kootoro được thành lập vào năm 2013 tại Mỹ và chính thức ra mắt thị trường
Việt Nam vào năm 2015. 2 sản phẩm: ToroG Smart POS và máy bán hàng tự động Toro Chúng
tôi với mong muốn sẽ đem lại một giải pháp mua hàng và thanh tốn nhanh chóng, tiện lợi và
hiện đại cho người tiêu dùng Việt. Chúng tôi luôn sẵn chào đón sự hợp tác, cùng nhau phát triển
từ các đối tác..
1.2. Sản phẩm của công ty
ToroG Smart POS là nền tảng liên kết đa dịch vụ thuộc quyền sở hữu của Công ty TNHH
Kootoro Việt Nam. ToroG Smart POS ra đời đáp ứng xu hướng thị trường và nhu cầu của người
tiêu dùng hiện nay.
ToroG Smart POS giúp cho doanh nghiệp nhỏ và vừa, những chủ cửa hàng quản lý công việc
kinh doanh một cách dễ dàng, tiết kiệm chi phí, tinh gọn bộ máy bán hàng và marketing.
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
2
Chương 2. NỘI DUNG THỰC TẬP
Thực tập với chủ đề “Lập trình React.js nhằm mục đích giúp sinh viên thực tập được đào
tạo tồn diện về lập trình Frontend, đồng thời rèn luyện những kỹ năng mềm như làm việc
nhóm, thuyết trình, giao tiếp. Tại cơng ty, sinh viên có cơ hội được học tập, khám phá và làm
việc trong một mơi trường phát triển chun nghiệ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: 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, q 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 được giới thiệu về cách thức làm việc trong công ty như
thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc, cách
báo cáo tiến độ dự án, cách theo dõi kênh thông tin từ dự án,…
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
3
Kết quả: Giúp sinh viên hiểu thêm về công ty Kootoro, 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à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ật
2.2.1. Các công cụ 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, người phụ trách đã hướng dẫn thực tập sinh tìm hiể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ư Skype –
Phần mềm chat, report cơng việc hàng ngày của công ty, Jira – Ứng dụng theo dõi và
quản lý quy trình phát triển phần mềm, Redmine – Cơng cụ quản lý và theo dõi, kiểm sốt
các vấn đề của dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, Git – Hệ thống
quản lý các phiên bản mã nguồn phân tán, Gitlab – Phần mềm quản lý kho mã nguồn
Git,…
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả: Sử dụng tốt trong q trình phục vụ cho cơng việc.
2.2.2. Tìm hiểu Framework React.js
Thời gian: 10 ngày (2 tuần)
Nội dung: Được training về React.js.
-
Tìm hiểu lại các kiến thức về HTML, CSS và Javascript.
-
Tìm hiểu về các tính năng của Javascript ES6.
-
Tìm hiểu về Nodejs.
-
Tìm hiểu các kiến thức cơ bản của React.js.
-
Tìm hiểu về React Router – Bộ định tuyến React.
-
Tìm hiểu về Redux và Redux Toolkit.
-
Tìm hiểu về Validate – Yup library.
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
4
-
Tìm hiểu về cách cấu hình Axios.
Thực hiện:
-
Tham gia đầy đủ các buổi training của công ty.
-
Nghiên cứu tài liệu, làm các bài thực hành.
Kết quả:
-
Nắm được các kiến thức cơ bản của React.js.
-
Có thể tạo ra một ứng dụng nhỏ bằng React.js.
2.2.3. Tìm hiểu về VueXY Admin Template – React Admin Template
Nội dung: Tìm hiểu về kiến trúc có trong template, cách thức vận hành, định dạng lại các
thành phần có sẵn, cách phân quyền, xác thực dữ liệu trước khi gửi lên, cách tổ chức
source code, redux toolkit, các service, thiết lập ban đầu,…
-
Khái niệm cơ bản về VueXY.
Vuexy là mẫu bảng điều khiển quản trị kết hợp của Vuejs, React, Angular, HTML
& Laravel. Đây là Mẫu bảng điều khiển dành cho quản trị viên thân thiện với nhà
phát triển nhất và có thể tùy chỉnh cao dựa trên Bootstrap 4, Bootstrap Vue &
Reactstrap.
- Khái niệm cơ bản về Redux toolkit.
Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những vấn
đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code redux
nhanh gọn, hoàn chỉnh theo một quy chuẩn thống nhất.
- Khái niệm về ACL.
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
5
Access Control List (ACL) là danh sách tuần tự các câu lệnh dùng để quản lý lưu
lượng truy cập đến hoặc đi, xác định cách chuyển tiếp hoặc ngăn chặn một gói tin
(packet) trên một thiết bị, được áp dụng trên một Interface nào đó, và trên bộ đệm vào
hoặc ra, điều khiển Router thực hiện các hành động tương ứng là cho phép (allow)
hoặc từ chối (deny).
ACL giống như loại Tường lửa Stateless, chỉ hạn chế, chặn hoặc cho phép các gói
tin đang truyền từ nguồn đến đích.
- Khái niệm về Yup.
Yup là một Javascript object schema validator. Cùng lấy một ví dụ đơn giản để
hiểu hơn về yup nhé. Cùng hướng tới một form đăng nhập bao gồm các trường
'username' và 'password'. Trước khi gửi request chúng ta cần kiểm tra xem end-user
đã nhập đầy đủ thông tin và đúng kiểu dữ liệu hay không.
Thực hiện:
- Tham gia đầy đủ các buổi trainning.
- Làm các bài tập thực hành như thiết kế trang quản lý thông tin nhân sự với Fake API.
- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
Kết quả:
-
Hiểu được kiến trúc có trong VueXY Template.
-
Nắm rõ hơn về kiến thức React.js, xây dựng thành công trang quản lý nhân sự với
Fake API.
2.3. Thực hiện project
Sau một tháng đượ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ề ReactJS và các package liên quan thì trong tháng thứ hai, người hướng dẫn
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
6
đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để tham gia thực chiến dự án
mới của công ty.
Chi tiết thực hiện dự án sẽ được nói ở phần sau.
2.4. Lịch làm việc
Tuần
Cơng việc
Người hướng dẫn
Mức độ
Nhận xét của
hồn
người hướng
thành
dẫn
- Tìm hiểu về cơng ty,
cách tổ chức của
công ty.
- Làm quen với các
1
công cụ làm việc Anh Nguyễn Đức Vũ
100%
trong công ty.
- Học cách trao đổi,
làm việc qua email,
Skype.
- Tìm hiểu các kiến
2
thức cơ bản trong
lập trình web và
Anh Nguyễn Đức Vũ
100%
Anh Nguyễn Đức Vũ
100%
Anh Nguyễn Đức Vũ
100%
Framework ReactJs.
- Tìm hiểu các kiến
3
thức cơ bản về các
package như Yup,
React Toolkit.
4
Nguyễn Đức Vũ
- Thiết kế UI ba màn
hình quản lý giao
Nguyễn Hồng Vũ-18521671
7
dịch EDC TPBank
- Xây dựng, thiết lập
5
API, các dịch vụ cho
tính năng quản lý
Anh Nguyễn Đức Vũ
100%
Anh Nguyễn Đức Vũ
100%
giao dịch.
- Xây dựng, thiết lập
6
API, các dịch vụ cho
tính năng nhập, xuất
excel
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
8
Chương 3. CHI TIẾT VỀ PROJECT
3.1. Giới thiệu về ứng dụng
ToroG Smart POS là nền tảng liên kết đa dịch vụ thuộc quyền sở hữu của Công ty TNHH
Kootoro Việt Nam. ToroG Smart POS ra đời đáp ứng xu hướng thị trường và nhu cầu của người
tiêu dùng hiện nay.
ToroG Smart POS giúp cho doanh nghiệp nhỏ và vừa, những chủ cửa hàng quản lý công việc
kinh doanh một cách dễ dàng, tiết kiệm chi phí, tinh gọn bộ máy bán hàng và marketing.
3.2. Thực hiện
3.2.1. Giai đoạn xây dựng khung sườn cho ứng dụng web
-
Nội dung:
• Xây dựng các router cho trang web.
• Xây dựng layout chung cho các tính năng.
• Xây dựng thanh điều hướng cho trang web.
• Cấu hình axios và các end point.
-
Kết quả:
• Xây dựng đầy đủ các router cho một trang web.
• Xây dựng được các khung giao diện chung, màu sắc và thanh điều hướng cho
trang.
3.2.2. Giai đoạn triển khai ứng dụng web
-
Nội dung:
• Theo dõi sự kiện TPBank
Nguyễn Đức Vũ
Nguyễn Hồng Vũ-18521671
9
• Xây dựng tính năng quản lý giao dịch EDC TPBank Void/Reversal
• Xây dựng tính năng quản lý giao dịch EDC TPBank Fail
• Xây dựng tính năng quản lý giao dịch EDC TPBank Master
-
Kết quả:
- Theo dõi sự kiện TPBank
• Xây dựng tính năng quản lý giao dịch EDC TPBank Void/Reversal
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
10
• Xây dựng tính năng quản lý giao dịch EDC TPBank Fail
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
11
• Xây dựng tính năng quản lý giao dịch EDC TPBank Master
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
12
TÀI LIỆU THAM KHẢO
1. Lý thuyết cơ bản về React.js: [Truy cập lần
cuối 01/11/2022].
2. Khóa học React.js miễn phí tại F8: [Truy cập lần cuối
25/10/2022].
3. Tìm hiểu cơ bản về VueXY: [Truy cập lần cuối
01/11/2022)].
Nguyễn Đức Vũ
Nguyễn Hoàng Vũ-18521671
13
TỔNG KẾT
Sau hơn 2 tháng thực tập tại Công ty TNHH Kootoro, em đã trang bị cho mình thêm
nhiều kiến thức mới trong mảng lập trình web để từ đó vững bước hơn trong sự nghiệp sau này.
Ngoài ra, em còn học hỏi thêm được nhiều thứ khác về văn hóa cơng ty, cách thức làm việc,
triển khai dự án,.. và các mối quan hệ khác.
Cuối cùng, em xin chân thành cảm ơn Công ty TNHH Kootoro đã tạo điều kiện cho em
được thực tập tại công ty. Đặc biệt cảm ơn các anh và các bạn đồng nghiệp đã tận tình giúp đỡ
cho em trong thời gian thực tập tại cơng ty.
Nguyễn Đức Vũ
Nguyễn Hồng Vũ-18521671
