báo cáo thực tập lập trình ứng dụng WEB với REACTJS

0

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 ỨNG DỤNG WEB VỚI
REACTJS

Cơng ty thực tập

: TNHH Công Nghệ SumViet

Người phụ trách

: Nguyễn Vĩnh Khiêm

Thực tập sinh

: Võ Phi Nhật Duy

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


1

TP. Hồ Chí Minh, tháng 01 năm 2021

Nguyễn Vĩnh Khiêm

Võ Phi Nhật Duy


2

LỜI MỞ ĐẦU

Hàng triệu doanh nghiệp sử dụng Internet như một kênh truyền thơng giúp tiết kiệm chi
phí. Nó cho phép doanh nghiệp trao đổi thông tin với thị trường mục tiêu của mình và thực hiện
các giao dịch một cách nhanh chóng, an tồn. Tuy nhiên, các hoạt động này chỉ trở nên hiệu quả
khi doanh nghiệp có thể nắm bắt và lưu trữ tất cả các dữ liệu cần thiết và có phương tiện xử lý
tồn bộ các thơng tin này, sau đó tiến hành trình bày kết quả cho người dùng. Từ đó xuất hiện
Web app là những ứng dụng chạy trên web. Thông qua web app, người dùng có thể thực hiện
một số cơng việc: tính tốn, chia sẻ hình ảnh, mua sắm … Tính tương tác của web app cao
hơn website rất nhiều. Bên cạnh đó, các tập đồn lớn như Google, Facebook ra mắt những
framework hỗ trợ lập trình viên xây dựng các ứng dụng web như ReactJS, Angular với nhiều
phiên bản khác nhau
Cùng với xu thế đó, Cơng ty Cổ phần Codosa Holing , cụ thể hơn là mảng Codosa Tech
chọn tập trung nghiên cứu và xây dựng các ứng dụng theo Framework ReactJS. Và thực tập
sinh được trực tiếp tham gia vào q trình dưới sự hướng dẫn, định hướng của cơng ty.
Sau ba năm học tập trên trường, với mong muốn có thêm kinh nghiệm thực tế, cũng như
được tham gia phát triển ứng dụng di động trong một môi trường chuyên nghiệp, nên em đã
quyết định chọn Codosa nơi giúp em thực hiện những dự định này.

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


3

LỜI CẢM ƠN

Em xin gửi lời cảm ơn đến Trường đại học Công Nghệ Thông Tin, quý thầy cô trong
trường đã tận tình chỉ dạy để bổ sung kiến thức cho em suốt thời gian theo học tại trường.
Và em xin gửi lời cảm ơn đến anh Nguyễn Vĩnh Khiêm, anh Dương Vọng, anh Trần
Quốc Khánh đã tạo điều kiện cho em có cơ hội được thực tập tại cơng ty, cùng tất cả các anh đã
giúp đỡ, chỉ bảo trong q trình thực tập.
Q trình thực tập tại cơng ty đã giúp em học hỏi được rất nhiều, từ tác phong, thái độ
làm việc đến các vấn đề kỹ thuật, từng bước hoàn thiện sản phẩm… Xin cảm ơn tất cả mọi
người đã động viên, giúp đỡ và chia sẻ những kinh nghiệm quý báu, giúp em có những trải
nghiệm tuyệt vời trong thời gian tại công ty.
Võ Phi Nhật Duy
TP HCM, ngày 14 tháng 01 năm 2021

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


4

NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


5

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

Giới thiệu công ty CodosaHolding...........................................................................................6

2.

Sản phẩm của cơng ty...............................................................................................................7

Chương 2: Nội dung thực tập...........................................................................................................................8
1.

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

2.

Nghiên cứu kỹ thuật...................................................................................................................8

3.

Thực hiện project.....................................................................................................................11

4.

Lịch làm việc.............................................................................................................................11

Chương 3: Chi tiết về quá trình thực tập.......................................................................................................14
1.

Giới thiệu PawnVn...................................................................................................................14

2.

Thực hiện..................................................................................................................................19

TÀI LIỆU THAM KHẢO............................................................................................................................20
TỔNG KẾT................................................................................................................................................21

Nguyễn Vĩnh Khiêm

Võ Phi Nhật Duy


6

Chương 1: Giới thiêu công ty thực tập

1. Giới thiệu công ty CodosaHolding
Tên công ty: Codosa Holding
Địa chỉ: 74/43/8 Đường số 20, Khu phố 1, Phường Long Thạnh Mỹ, Quận 9, TP Hồ
Chí Minh.
Email:
Điện thoại: 0931 78 00 31 - 0936 04 72 39
Codosa Holding là một công ty cổ phần kinh doanh trên các lĩnh vực:
Codosa Tech - Cung cấp các giải pháp công nghệ 4.0 phục vụ cộng đồng :
Blockchain, Smart Contract, Web ( Sàn thương mại điện tử, thanh toán điện tử,
Fintech, … ), Ứng dụng di động, Sàn giao dịch Forex & Crypto, … Codosa Tech là
nền tảng chủ đạo để phát triển hệ sinh thái Codosa Holding.
Codosa Land - Hoạt động kinh doanh bất động sản tại TP Hồ Chí Minh và các
tỉnh miền Đông Nam Bộ.
Codosa Auto - Dự án cổng thông tin giao dịch các loại ô tô trên thị trường Việt
Nam, bao gồm mua bán ô tô, xe máy mới cũ, cho thuê xe ô tô trên nền tảng công
nghệ 4.0. Đội ngũ công nghệ đang phát triển sản phẩm ứng dụng để khai thác thị
trường rất lớn và tiềm năng.

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


7

Codosa Mart - Dự án xây dựng chuỗi liên kết giữa nhà nông và cung cấp trực tiếp
đến tay người tiêu dùng theo quy trình khép kín.
SUMVIET là một cơng ty startup trực thuộc công ty CODOSA HOLDING được
thành lâp từ năm 2017, là một công ty phát triển các sản phẩm công nghệ:
Blockchain, Smart Contract, sàn thương mại điện tử, ví điện tử, … trên các nền tảng
Web, Android, IOS.

2. Sản phẩm của công ty
Codosa Tech hiện tại đã và đang cung cấp các sản phẩm công nghệ từ website
(Thương mại điện tử, Fintech, … ), ứng dụng di động (Ví điện tử, … ) đến game, sàn
trade dựa trên các nền tảng như Binary Option, MT4 & MT6 Platform, trade Forex,
Crypto, …

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


8

Chương 2: Nội dung thực tập
Trong kỳ thực tập này, em phối hợp cùng 3 bạn khác ( 2 bạn back-end, và một bạn cùng em
làm phát triển ứng dụng web ) phát triển giai đoạn 1 cho dự án ứng dụng web siêu thị cầm đồ hỗ trợ các doanh nghiệp nhỏ và siêu nhỏ có bước phát triển đột phá trong lĩnh vực cầm đồ ứng
dụng công nghệ tìm khách hàng mục tiêu để nhanh chóng đạt hiệu quả kinh doanh. Nhóm bắt
đầu dự án với các bản giới thiệu và mơ tả sản phẩm từ phía cơng ty, cùng với sự chỉ dẫn giúp đỡ
của các anh chị hướng dẫn, đến thời điểm em viết báo cáo này, nhóm đã hồn thành cơ bản
module chức năng giai đoạn 1 và đang xúc tiến giai đoạn 2 đồng thời tiếp tục hoàn thiện giai
đoạn 1 ( Chi tiết dự án sẽ được mô tả ở phần sau và giới hạn theo quy định của cơng ty )

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, q trình thành lập và phát triên
(như đã nhắc đến ở trê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…
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àm việc có kế hoạch, có kỷ luật, có trách nhiệm
hơn.

2. Nghiên cứu kỹ thuật
2.1.

Các cơng cụ làm việc
Thời gian : 4 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ì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ư Gitlab
- sử dụng trong làm việc nhóm, VScode - một editor để xây dựng ứng dụng
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


9

Kết quả : Lập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các cơng cụ

2.2.

với nhau, so với việc dung các IDE.
Tìm hiểu ngơn ngữ Typescript
Thời gian : 3 ngày (1 tuần)
Nội dung : Ôn tập về các kiến thức javascript căn bản, javascript ES6 ( arrow
functions, async, await, promise, … ) và training về các kỹ thuật js nâng cao. Sự khác
nhau của typescript và javascript, sử dụng typescript với framework Express để xây
dựng và phát triển server.
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Làm các bài thực hành, kiểm tra về kiến thức đã học.
Kết quả :
-

Nâng cao kỹ năng lập trình với ngơn ngữ javascript
Có được những kiến thức quan trọng cho việc lập trình game mobile sau này.
Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho đúng
chuẩn, dễ đọc, dễ hiểu.

2.3.

Tìm hiểu RESTful API và Framework ReactJs
Thời gian: 6 ngày (2 tuần)
Nội dung: Các kiến thức cơ bản về RESTfulAPI và React JS
-

Cơ bản về RESTful API
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng
dụng web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú

trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu
động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải

-

qua HTTP.
Framework React JS
React JS là một framework Javascript do công ty công nghệ nổi tiếng
Facebook phát triển nhằm mục đích xây dựng giao diện người dùng có tính tương

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


10

tác cao, có trạng thái và có thể tái sử dụng được. Thư viện này khơng chỉ hoạt
động ở phía client mà cịn được render trên server và có thể kết nối với nhau.
Thực tập sinh lập trình di động được training cơ bản về framework, các khái niệm
component lifecycle, props, state, react redux, redux-thunk, redux-saga, axios, …
Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Tự đọc thêm tài liệu, nghiên cứu thêm về các library, luyện tập thêm về cách cài
đặt, sử dụng các library.

Kết quả :

2.4.

- Làm quen, hiểu được kiến trúc cơ bản của các thành phần trong React JS.
- Thành thạo việc cài đặt, config và sử dụng các thư viện cần dùng cho project.
Tìm hiểu về Redux, redux-saga
Thời gian: 3 ngày (1 tuần)
Nội dung: Các kiến thức cơ bản về Redux và Redux-saga
-

Cơ bản về Redux
Redux là một thư viện quản lý state cho các ứng dụng Javascript. Redux ra
đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và Flux của Facebook. Lý do để
tìm hiểu redux là vì: các ứng Javascript ngày càng trở nên phức tạp thì việc quản
lý các state trở nên khó khăn hơn nên việc áp dụng Redux thì các state sẽ nằm
trong một “store” và chúng ta có lấy ra dễ dàng bất cứ state nào chúng ta muốn

-

Redux-saga
Redux-saga là một thư viện được sử dụng để xử lý các side effects
trong redux. Khi bạn gọi một action mà làm thay đổi state của ứng dựng và bạn có
thể muốn làm điều gì đó với sự thay đổi của state.

Thực hiện :

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


11

-

Tham gia đầy đủ các buổi trainning.
Tự đọc thêm tài liệu, nghiên cứu thêm về các library, luyện tập thêm về cách cài
đặt, sử dụng các library.

Kết quả :
-

Đã cấu hình được project với ReactJS, Redux, Redux-saga, Antdesign

3. Thực hiện project
Sau 1 tháng được training, thực hành và tự nghiên cứu tìm hiểu thêm về React JS thực
tập sinh được trang bị kiến thức cơ bản về lập trình web, sử dụng các công cụ hỗ trợ
debug, các quy tắc code dễ đọc, dễ hiểu và bảo trì, cách tổ chức cấu trúc cây thư mục, tận
dụng và tái sử dụng code. Thực tập sinh được sắp xếp tham gia vào 01 team để xây dựng
một ứng dụng của công ty đang bắt đầu phát triển áp dụng những kiến thức đã học để
thực hiện.
Chi tiết đồ án sẽ được nói ở phần sau.

4. Lịch làm việc

Tuần
1

Cơng việc
-Tìm hiểu về cơng ty,
cách tổ chức của cơng
ty.

Mức
độ
Người hướng dẫn
hồn
thành
Anh Nguyễn Vĩnh 100%
Khiêm

Nhận xét của người
hướng dẫn

-Tìm hiểu nội quy của
cơng ty, quy chế đối với

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


12

thực tập sinh.
-Làm quen với các công
cụ làm việc trong công
ty.

2

3

4

-Học cách trao đổi làm
việc qua Email và Zalo
và Slack
-Học tập ôn lại các kiến Anh Nguyễn Vĩnh 100%
thức cũ, nắm chắc
Khiêm
những gì cơ bản đã học.
-Tìm hiểu, ơn tập về
Javascript
-Tìm hiểu về RESTful
Anh Trần
API
Khánh

Quốc 100%

-Cơ bản thiết kế và sử
dụng
-Tìm hiểu về React JS
Anh Nguyễn Vĩnh 100%
Khiêm
-Tìm hiểu nắm bắt
thông tin dự án
-Cài đặt, nghiên cứu sử
dụng framework và các
library khác như reactredux,
redux-thunk,
redux-saga, ant-design,
react-native-vector-icon,

Tiến hành dự án
Anh Nguyễn Vĩnh
PawnVn, giai đoạn 1
Khiêm

100%

-Lên kế hoạch
5

6&7

-Lên ý tưởng thiết kế
giao diện các màn hình
đăng ký, đăng nhập, xác
thực người dùng qua
sms.
- Thiết kế giao diện
Anh Trần
Khánh
-Xây dựng giao diện

Quốc 100%

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


13

-Xử lý sự kiện từ các
control

8

9 & 10

-Gắn API vào chức năng
-Fix bug, cải thiện
performance
-Tìm hiểu CI/CD,
docker giúp triển khai
ứng dụng liên tục

Anh Trần Quốc 100%
Khánh
Anh Nguyễn Vĩnh 100%
Khiêm

- Xây dựng giao diện
thông tin của người
dùng
- Xây dựng giao diện
theo cho các chức năng
trong mô tả

Anh Nguyễn Vĩnh 100%
Khiêm

- Găn API vào các chức

năng
11 – trở
đi

- Phân công công việc
cho các thành viên trong
nhóm
- Tham gia vào các hoạt
động nghiên cứu, cuộc
thi và team building của
công ty

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


14

Chương 3: Chi tiết về quá trình thực tập
Theo quy chế đối với thực tập sinh, trích dẫn:
Điều 5: Bảo mật thông tin
Phần a.Thông tin của khách hàng: … Bảo mật thông tin khách hàng ( họ tên, địa chỉ,
điện thoại, sản phẩm, doanh thu, dữ liệu, …)
Phần b.Thông tin của cơng ty: … Đảm bảo an tồn thơng tin về sản phẩm, dự án đang
trong giai đoạn kế hoạch, phát triển sản phẩm hoặc chưa được phép công bố
Nên phần này sẽ mơ tả giới hạn về q trình thực tập.

1. Giới thiệu PawnVn
1.1.

Giới thiệu
Ứng dụng PawnVn được giới thiệu là ứng dụng theo mơ hình P2P được xem là
nơi trung gian của các khách hàng có nhu cầu cầm đồ, cho vay và muốn thanh lý
sản phẩm, ý tưởng này dựa trên các sàn thương mại điện tử hiện có. Định hướng
hỗ trợ các doanh nghiệp đồng thời đem lại lợi ích khơng nhỏ cho người sử dụng.

1.2.

Chi tiết ứng dụng
Ứng dụng được xây dựng bằng React JS, với mục đích tiết kiệm chi phí khi phát
triển ứng dụng.
Các thư viện sử dụng để phát triển ứng dụng:
•
Redux: Thư viện giải quyết vấn đề liên quan đến quản lý các state trong
React
•
Redux-saga: Thư viện được sử dụng để xử lý các side effects trong redux
•
React Native Vector Icon: Thư viện với hàng chục ngàn vector icons dùng
cho giao diện, dễ dàng sử dụng và tùy chỉnh, đặc biệt hỗ trợ tạo các custom icon
từ các file svg, png.
•
Ant Design: Thư viện UI với nhiều components thiết yếu như Header,
Button, Avatar, Image, …
•
React-leaflet: Cung cấp các Component API làm việc với bản đồ
Ngồi những thư viện chính trên, trong q trình phát triển cịn sử dụng gần 30
thử viện khác để thực hiện nhiều công việc khác nhau
Tới thời điểm viết báo cáo này, ứng dụng bao gồm các tính năng

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


15

1.3.

Giao diện
Một số giao diện
Tính năng đăng nhập

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


16

Tính năng đăng ký

Tính năng xác thực OTP

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


17

Tính năng quản lý loại phí

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


18

Tính năng quản lý quyền

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


19

2. Thực hiện
4 thành viên của team fresher PawnVn:
-

Trương Viết Huy Phong

-

Võ Phi Nhật Duy

-

Chung Nguyễn Trường Duy

-

Trần Quốc An

Và sự giúp đỡ tận tình của team trainer Codosa Holding.

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


20

TÀI LIỆU THAM KHẢO
Ant Design
ign/components/overview/

Typescript
/> />a/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB

Redux
/> />
Redux-saga
a/p/gioi-thieu-ve-saga-trong-redux-p1-GrLZDXA2Zk0
/> />
Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy


21

TỔNG KẾT
Sau 7 tháng thực tập tại công ty, em đã học được rất nhiều đều, không chỉ kiến thức riêng

về lập trình mà cịn về quy chuẩn làm việc tại công ty, để biết được rằng hiện tại những doanh
nghiệp đang làm việc như thế nào, phối hợp nhân lực ra sao.
Hơn nữa, em còn được tiếp thu những kinh nghiệp quý báu từ các anh chị và đồng
nghiệp, góp phần giúp em hồn thiện kiến thức, kỹ năng của mình và đạt được một số thành
cơng nhất định trong q trình thực tập tại cơng ty.
Về tư tưởng của bản thân, em biết được làm sao để trở thành một lập trình viên, các
những lập trình viên khác giải quyết vấn đề, về nghề nghiệp sẽ làm trong tương lai, định hướng
nghề nghiệp.

Nguyễn Vĩnh Khiêm
Võ Phi Nhật Duy