BÁO CÁO THỰC TẬP LẬP TRÌNH FONT END REACTJS WEBSITE THƯƠNG MẠI ĐIỆN TỬ RANUS.VN

1

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 FONT END REACTJS
WEBSITE THƯƠNG MẠI ĐIỆN TỬ
RANUS.VN

Cơng ty thực tập

: Ranus Tech

Người phụ trách

: Hồng Quang Huy

Thực tập sinh

: Hứa Phước Thanh

Hứa Phước Thanh


2

TP. Hồ Chí Minh, tháng 06 năm 2022

Hứa Phước Thanh

3

LỜI MỞ ĐẦU

Trong thời đại 4.0 ngày nay, công nghệ thông tin đã và đang phát triển mạnh, được ứng
dụng rộng vào hầu hết tất cả lĩnh vực. Nắm bắt được điều này công ty Ranus Tech xây dựng
website thương mại điện tử Ranus.vn nhằm đem lại cho khách hàng tiện ích khi mua hàng trực
tuyến tin cậy và tiết kiệm. Qua đó, khách hàng có thể tìm kiếm thơng tin trực tuyến về các sản
phẩm thời trang chất lượng được thiết kế bởi hàng nghìn nhà sáng tạo khác nhau. Mục tiêu
website ranus.vn hướng tới là cầu nối thương mại giữa nhà sáng tạo, khách hàng và các sản
phẩm chất lượng.
Do mong muốn có thêm kinh nghiệm thực tế và cảm thấy hứng thú với dự án của công ty
nên em quyết định chọn Ranus Tech là nơi thực tập trong học kỳ này.

Hứa Phước Thanh


4

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Ranus Tech đã 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, em đã tiếp thu được
những kiến thức và kinh nghiệm quan trọng trong lập trình font-end Reactjs.
Đặc biệt cảm ơn anh Hồng Quang Huy đã hướng dẫn, giúp đỡ em tận tình hồn thành
các cơng việc được giao.
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.
Hứa Phước Thanh
TpHCM, 17/06/2022

Hứa Phước Thanh


5

NHẬN XÉT CỦA KHOA

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

Hứa Phước Thanh


6

MỤC LỤC

MỤC LỤC.......................................................................................................................... 6
Chương 1: Giới thiệu công ty thực tập..........................................................................7
1. Giới thiệu về công ty Ranus....................................................................................7
2. Sản phẩm của cơng ty..............................................................................................7
Chương 2: Nội dung thực tập.........................................................................................8
1.
2.
3.
4.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty...........................................8
Nghiên cứu kỹ thuật................................................................................................8
Thực hiện project....................................................................................................9
Lịch làm việc...........................................................................................................9

Chương 3: Các công việc đã làm..................................................................................10
1. Header bar và slider trang home page.....................................................................10
2. Header layout mobile trang home page...................................................................11
3. Content trang home page cửa hàng..........................................................................11
4. Các công việc khác..................................................................................................12
TÀI LIỆU THAM KHẢO..............................................................................................28
TỔNG KẾT....................................................................................................................28

Hứa Phước Thanh


7

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

1. Giới thiệu công ty Ranus Tech
Ranus tech tiền thân là công ty E-Partner là công ty con của Lazada, nay là công ty
start-up cung cấp dịch vụ và công nghệ liên quan đến lĩnh vực thương mại điện tử.

2. Sản phẩm của công ty
Ranus tech đang phát triển website Ranus.vn cung cấp dịch vụ thương mại điện tử.

Hứa Phước Thanh


8

Chương 2: Nội dung thực tập
Thực hiện các task được giao

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
(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 Ranus Tech, 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à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.

2.2.

Các công cụ làm việc
Thời gian : 1 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, cài đặt các công cụ phục vụ cho công việc như :AI
Photoshop, visual studio code, visual studio, smart 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ả : Làm quen được với các công cụ
Đọc hiểu source code, fix bug được giao
Thời gian : 5 ngày (1 tuần)
Nội dung : Do dự án đã được phát triển trước đó 5-6 tháng nên cần phải đọc source
code và fix các bug nhỏ được giao để hiểu hơn về các tính năng, các component đã
được team phát triển trước đó
Thực hiện :
- Đọc code và tiến hành fix các bug được giao
Kết quả :
-

Hiểu hơn về dự án mà team đang phát triển

3. Thực hiện project

Hứa Phước Thanh


9

Sau 1 tuần đọc hiểu source code và fix các bug nhỏ được giao, đã nắm được sơ bộ dự án
mà team đang phát triển, tiến hành nhận và hoàn thành thành các task theo print của
team.
Chi tiết công việc đã làm sẽ được nói ở phần sau.
4. Lịch làm việc

Tuần

Cơng việc
-

1
-

2

-

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
công cụ làm việc
trong công ty.

Đọc code, fix bug
để hiểu về dự án
của đang phát triển
của công ty
Thực hiện các task
theo Print của team

Người hướng dẫn

Mức
độ
hoàn
thành

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

Anh Hoàng Quang
Huy

Anh Hoàng Quang
Huy

Hứa Phước Thanh


10

Chương 3: Các công việc đã làm

1. Header bar và slider trang home page

Nội dung : Handle Font End theo thiết kế của designer.
Thực hiện :
-

Sử dụng styled component để dựng giao diện.

-

Sử dụng axios để call api.

-

Sử dụng Context để lấy state của giỏ hàng

-

Sử dụng history.push để redirect sang các trang khác

-

Sử dụng React slick cho slider

Kết quả :
-

Hoàn thành task đúng với thiết kế của designer.

Hứa Phước Thanh

11

2. Header layout mobile trang home page

Nội dung : Handle Font End theo thiết kế của designer.
Thực hiện :
-

Sử dụng styled component để dựng giao diện.

-

Sử dụng Context để lấy state của giỏ hàng

-

Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế

-

Sử dụng React slick cho slider.

Kết quả :
-

Hoàn thành task đúng với thiết kế của designer.

Hứa Phước Thanh

12

3. Content trang home page cửa hàng

Hứa Phước Thanh


13

Nội dung : Handle Font End theo thiết kế của designer.

Hứa Phước Thanh


14

Thực hiện :
-

Sử dụng styled component để dựng giao diện.

-

Sử dụng axios để call api.

-

Sử dụng Context để lấy state của giỏ hàng

-

Sử dụng history.push để redirect sang các trang khác

-

Sử dụng window.addEventListener để bắt sự kiện scroll, check điều kiện nếu
scroll qua thanh search thì show một thanh header bar position fixed như trên
ảnh.

Kết quả :
-

Hoàn thành task đúng với thiết kế của designer.

4. Một số công việc khác

Hứa Phước Thanh


15

Hứa Phước Thanh


16

Hứa Phước Thanh

17

Hứa Phước Thanh


18

Hứa Phước Thanh


19

Hứa Phước Thanh


20

Hứa Phước Thanh


21

Hứa Phước Thanh


22

Hứa Phước Thanh

23

Hứa Phước Thanh


24

Hứa Phước Thanh


25

Hứa Phước Thanh