BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG WEB VỚI REACT JS

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 REACT JS

Công ty thực tập: CỒNG TY CỔ PHẦN FADO
Người phụ trách: NGUYỄN MINH TRÍ
Thực tập sinh: NGUYỄN THỊ KHÁNH LY

TP HỒ CHÍ MINH, THÁNG 6 NĂM 2022

Nguyễn Thị Khánh Ly


MỤC LỤC
LỜI MỞ ĐẦU .................................................................................................................3
LỜI CẢM ƠN ..................................................................................................................4
Chương 1: GIỚI THIỆU CÔNG TY THỰC TẬP ..........................................................6
Chương 2: NỘI DUNG THỰC TẬP ...............................................................................9
1. Tìm hiểu cơng ty và các vấn đề buộc phải tuân thủ khi làm việc (2 ngày) .............9
2.Tìm hiểu kỹ thuật......................................................................................................9
a. Các cơng cụ làm việc ...........................................................................................9
b. Tìm hiểu Javascript (thời gian 1 tuần) .................................................................9
c. Tìm hiểu reactjs .................................................................................................10
d. Tìm hiểu về blockchain .....................................................................................11
3. Lịch làm việc: ........................................................................................................12
Chương 3: CHI TIẾT VỀ PROJECT ............................................................................14
1. Giới thiệu về dự án ................................................................................................ 14
Chương 4: TÀI LIỆU THAM KHẢO ...........................................................................16
Chương 5: TỔNG KẾT .................................................................................................17

Nguyễn Thị Khánh Ly


3

LỜI MỞ ĐẦU
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những
thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại
được. React được sử dụng tại Facebook trong production, và www.instagram.com được
viết hoàn toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt động
trên phía client, mà cịn được render trên server và có thể kết nối với nhau. React so sánh
sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay
đổi nhất trên DOM
Sau khi học tập trên trường, trải qua rất nhiều đồ án và bài tập liên quan đến web,
do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được làm việc trong một
môi trường chuyên nghiệp. Vì vậy, em quyết định chọn Fado - là nơi sẽ giúp em thực
hiện được dự định này.

Nguyễn Thị Khánh Ly


4

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty cổ phần Fado Việt Nam đã tạo điều kiện cho
em có cơ hội được thực tập tại cơng ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer
em đã tiếp thu được những kiến thức quan trọng để có thể hồn thành được hai project.

Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian, công sức để
hướng dẫn cem hoàn thành đợt thực tập này.
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ài báo cáo này.

Nguyễn Thị Khánh Ly
TpHCM, ngày 16 tháng 06 năm 2022

Nguyễn Thị Khánh Ly


5
NHẬN XÉT CỦA KHOA

Nguyễn Thị Khánh Ly


6

Chương 1: GIỚI THIỆU CƠNG TY THỰC TẬP

Giới thiệu cơng ty Fado
Fado - Nền tảng thương mại điện tử xuyên biên giới (Cross-Border ECommerce).Từ 2014 Fado tiên phong tạo ra giải pháp thực hiện sứ mệnh giúp từng cá
nhân, doanh nghiệp Việt giao thương trực tiếp với thế giới đơn giản hơn qua thương mại
điện tử. Giúp người Việt bắt kịp xu hướng để cân bằng với sự phát triển của thế giới.
Việc có ngay 1 thiết bị vừa ra mắt để phục vụ cho hoạt động học tập, nghiên cứu, lao
động sản xuất hay đơn giản là giúp đời sống người Việt tiện nghi, hạnh phúc hơn là một
nhu cầu chính đáng trong nền kinh tế hội nhập.
Các sản phẩm của Công ty:
Trang thương mại điện tử: fado.vn

Nguyễn Thị Khánh Ly


7

Trang giao dịch mua bán token: token.fadogo.io/

Build technologies platform và data science cho các doanh nghiệp khác

App mua sắm Fado

Nguyễn Thị Khánh Ly


8

FadoGo: fadogo.vn

Nguyễn Thị Khánh Ly


9

Chương 2: NỘI DUNG THỰC TẬP
1. Tìm hiểu cơng ty và các vấn đề buộc phải tuân thủ khi làm việc (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
(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 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.Tìm hiểu kỹ thuật
a. 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ư Microsoft
Teams -sử dụng trong làm việc nhóm, FreeCommander – trình duyệt file trực quan với
nhiều tiện ích, Visual Studio - một chương trình soạn thảo văn bản rất hữu ích và phổ
biến với lập trình viên, Source Tree- GUI giúp quản lý source code
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
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ụ với
nhau, so với việc dùng các IDE.
b. Tìm hiểu Javascript (thời gian 1 tuần)
Nội dung :
Nguyễn Thị Khánh Ly


10
1. Javascript là gì?
Phân biệt HTML, CSS và Javascript
2. JavaScript để làm gì?
3. JavaScript hoạt động như thế nào?
4. Các khóa học Javascript Online từ cơ bản đến nâng cao:

4.1. Khóa học Javascript cơ bản
JavaScript for Cats:
Codecademy’s Intro to JavaScript Track
Fullstack Academy’s Intro to Coding
4.2. Khóa học Javascript trung cấp:
Fullstack Academy Bootcamp Prep Online
CoderByte
Eloquent JavaScript của tác giả Marijn Haverbeke
4.3. Khóa học Javascript nâng cao:
Scotch.io:
Egghead.io
Douglas Crockford Videos
c. Tìm hiểu reactjs
Nội dung:
1. Giới thiệu Hooks trong React JS
2. Tìm hiểu React Hook useState, useEffect, useContext trong React Hooks
3. Xây dựng Hook trong React JS (React Custom Hook)
4. Redux là gì? Tại sao lại ứng dụng trong ReactJS
Nguyễn Thị Khánh Ly


11
5. React Router cơ bản
6. Tích hợp Redux vào ReactJS
7. Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó
d. Tìm hiểu về blockchain
Nội dung:
- Kiến Thức Về Blockchain
+ Transactions
+ Blocks

- Smart Contract
+ Cách hoạt động của Smart Contract
+ Accounts
+ Transactions
+ Gas
+ Storage, Memory & Stack

Nguyễn Thị Khánh Ly


12

3. Lịch làm việc:
Tuần Cơng Việc

Người hướng dẫn

Mức độ
hồn
thành

Tìm hiểu về công ty,
cách tổ chức của
công ty.
1 Làm quen với các
cơng cụ làm việc
trong cơng ty.

Anh
Nguyễn

Minh Trí

10/10

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

Nắm rõ quy
định của công ty

Học cách trao đổi,
làm việc qua email.

2

Tìm hiểu Javascript
Thực hành
Javascript

Tìm hiểu tổng quan về
3 reactjs
Thực hiện todo list
đơn giản bằng
4 reactjs

Anh
Nguyễn
Cơng Danh

Anh

Nguyễn
Minh Trí

10/10

10/10

5 Tìm hiểu về hooks
Tìm hiểu về redux
6

Tìm hiểu về API và
7 cách gọi API

8 Deploy web

Anh
Đồn Trần
Minh Qn

Anh
Nguyễn
Cơng
Danh
Anh Nguyễn
Minh Trí

10/10

10/10

10/10

Hiểu rõ về
javascript

Tìm hiểu
nhanh cấu trúc đã
có thể tìm hiểu
source code của
dự án

Thực hiện todo
list áp dụng redux
và các hooks

Tìm hiểu
nhanh đã có thể
gọi một số API
hiển thị lên giao
diện
Có thể tự deploy
web todo demo
Nguyễn Thị Khánh Ly


13
9

Học golang

10 Nhận các task đầu tiên

Anh
Nguyễn
Văn Trạch

10/10

Anh
Nguyễn
Minh Trí

10/10

Thực hiện
chuyển đổi
grpc từ golang
sang html để
call API
Thực hiện
xong các task
được giao

Nguyễn Thị Khánh Ly


14

Chương 3: CHI TIẾT VỀ PROJECT

1. Giới thiệu về dự án
Đây là một dự án xây dựng giải pháp công nghệ số và khoa học dữ liệu cho các
doanh nghiệp phía frontend được xây dựng bằng reactjs và ant design pro, backend được
xây dựng bằng rush và golang. Các chức năng chính bao gồm: connect đến social
account, tạo app, developer tool tạo ra các API.
Giao diện một số tính năng:
- Trang chủ

- Connect đến social account

- Tạo app

Nguyễn Thị Khánh Ly


15

- Developer tool

Nguyễn Thị Khánh Ly


16

Chương 4: TÀI LIỆU THAM KHẢO

Javascript:
/>Reactjs:
/>Golang:

/>
Nguyễn Thị Khánh Ly


17

Chương 5: TỔNG KẾT
Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hồn thành việc dựng
giao diện đăng nhập cho ứng dụng mới. Ứng dụng đã có đầy đủ các giao diện và tính
năng (hồn thành 90% dự án)
Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer đã giúp em release
được project đầu tiên, em đã học được rất nhiều từ project này để áp dụng cho các project
tiếp theo.

Nguyễn Thị Khánh Ly