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 GIAO DIỆN WEBSITE
VỚI REACTJS

Cơng ty thực tập : Công ty cổ phần Công nghệ Saha
Người phụ trách : Nguyễn Đức Hiếu
Thực tập sinh

: Nguyễn Nam Hùng - 17520544

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


LỜI MỞ ĐẦU
Trong cuộc cách mạng công nghiệp 4.0, công nghệ thơng tin nói chung 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ệu giả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át triển website nào cũng cần phải suy nghĩ đau đầu. Để thử thách bản thân trong
ngành công nghiệp web, em đã lựa chọn Front-end web developer là định hướng cho việc học cũng
như nghề nghiệp trong tương lai.
React là một thư viện UI phát triển tại Facebook, một thư viện Javascript đang nổi lên trong
những năm gần đây để 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 cũng như trên
Instagram được viết hồn tồn trên React.
Có thể nói ReactJS là một công cụ tuyệt vời giúp doanh nghiệp vượt qua đối thủ khi cạnh
tranh về mảng thiết kế các ứng dụng web.
•

•

•

Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX.
Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển
đổi (conversion) trên trang web của mình.
Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các
framework khác. Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và
cải tiến UX tốt hơn.
ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server. Đồng thời
sẽ giúp tối ưu các nút để render phía client-side. Khả năng tùy chỉnh cơng cụ tốt, thậm chí
làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn.

Bên cạnh thời gian học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng
như muốn được tham gia làm việc trong một mơi trường chun nghiệp, em có dự định là sẽ thực
tập trong kì này. Vì vậy, em quyết định chọn công ty SAHA là nơi sẽ giúp em thực hiện được dự
định này.
–
2


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty cổ phần Công nghệ Saha đã 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 gần 3 tháng nhưng được hướng dẫn nhiệt tình giúp em cùng
các bạn thực tập sinh khác có thêm nhiều kiến thức, kinh nghiệm bổ ích mà tụi em chưa có được
trước khi tới cơng ty. Đã giúp em hịa mình vào được với các bậc đàn anh đi trước, cùng nhau
chia sẻ các nhiệm vụ mà công ty giao và hơn hết là lần đầu trải nghiệm làm một lập trình viên thứ
thiệt.
Đặc biệt cảm ơn anh Nguyễn Đức Hiếu đã hướng dẫn, giúp đỡ tận tình cả những khó khăn
trong cơng việc, đến những khó khăn việc làm quen với mơi trường mới, đã chỉ dẫn em về cách
làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu.
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 Nam Hùng
TP. Hồ Chí Minh, tháng 06 năm 2022

3


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

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
–

4


MỤC LỤC
LỜI MỞ ĐẦU ................................................................................................................................. 2
LỜI CẢM ƠN ................................................................................................................................. 3
NHẬN XÉT CỦA KHOA .............................................................................................................. 4
CHƯƠNG 1: GIỚI THIÊU CÔNG TY THỰC TẬP .................................................................. 6
1. Giới thiệu Công ty cổ phần Công nghệ Saha ......................................................................... 6
CHƯƠNG 2: NỘI DUNG THỰC TẬP ...................................................................................... 10
1. Tìm hiểu cơ chế vận hành cơng ty và các chuẩn mực liên quan .......................................... 10
2. Nghiên cứu kỹ thuật ............................................................................................................. 10
3. Lịch làm việc ........................................................................................................................ 15
CHƯƠNG 3: CHI TIẾT VỀ PROJECT .................................................................................... 16
1. Áp dụng kiến thức đã học, kiểm tra thực hành thiết kế trang thương mại điện tử ............... 16
CHƯƠNG 4: TỔNG KẾT ........................................................................................................... 18
TÀI LIỆU THAM KHẢO............................................................................................................ 18
–

5



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

1. Giới thiệu Công ty cổ phần Công nghệ Saha
Công ty cổ phần Công nghệ Saha ( SAHA TECHNOLOGY JSC ) thuộc hệ sinh thái
của SAHA là Công ty phần mền chuyển thiết kế , cung cấp các dịch vụ về WEBSITE APP – POS quản lí và bán hàng đa kênh cho các doanh nghiệp luôn hướng đến giải pháp
kinh doanh O2O ( Online to Ofline ) cho các chủ doanh nghiệp . Đây đợc xem là mơ hình
của tương lai mang đến mục tiêu tận dụng các ưu điểm của cả 2 kênh bán hàng truyền
thống và trực tuyến .

Lịch sử doanh nghiệp
-

-

Từ đầu 2020 khi đại dịch Covid 19 xảy ra và nhận thấy thời cơ của chuyển đổi số tại Việt
Nam, Saha với đội ngũ cựu du học sinh và kỹ sư phần mềm tại Nhật Bản đã bắt đầu xây
dựng và cho ra mắt nền tảng quản lý và bán hàng đa kênh phù hợp với tất cả các nhà bán
hàng. Sau một thời gian đưa nền tảng đồng bộ giữa App – Web – Pos với 3 tiêu chí cụ thể
DỄ DÀNG – NHANH CHĨNG - TIẾT KIỆM đến tay người bán hàng .Với bộ giải pháp
bán hàng này giúp đối tác của SAHA dễ dàng tiếp cận tới khách hàng của họ và tăng
doanh thu nâng tầm doanh nghiệp
Hiện đã có hơn 500 doanh nghiệp đã và đang sử dụng các giải pháp của Saha
6


-

Quy mơ hoạt động: Với tiêu chí đưa doanh nghiệp tới gần hơn với người khách hàng
SAHA đã đưa ra thị trường công nghệ các sản phẩm thương mại điện tử theo các lĩnh vực

sau :

-

IKI POS: Phần mền quản lí và bán hàng offline dễ dàng sử dụng nhất giúp quản lí bán
hàng, doanh thu , lãi lỗ ,tính tiền , in hóa đơn , chấm cơng và quản lí nhân viên cho khách
hàng nhanh chóng .

-

IKI WEB: Thiết kế Website quản lí và bán hàng offline chuẩn SEO, chuyên nghiệp.

-

IKI TECH: Phần mềm quản lí bán hàng tích hợp Online và Offline, giúp người bán hàng
trên các nề tảng đa kênh : Lazada , Shopee,...quản lí được nhiều kênh và bán hàng , nhưng
những vậy Saha cịn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối
tượng kinh doanh hơn . Đặc biệt đối tác của SAHAcó thể được mở thêm APP bán hàng
riêng cho khách hàng của họ.

7


-

-

WEBSITE IKI TECH: đây là website bán hàng Online và Offline, giúp người bán hàng
trên các nề tảng đa kênh : Lazada , Shopee,...quản lí được nhiều kênh và bán hàng , nhưng
những vậy Saha cịn có chương trình Affiliate giúp cho doanh nghiệp tiếp cận tới nhiều đối

tượng kinh doanh hơn
IKI STORE: Ngồi ra, SAHA cịn mở rộng thiết kế app bán hàng dành riêng cho khách
hàng của doanh nghiệp. Giúp cho doanh nghiệp tăng mức độ nhận diện thương hiệu với
khách hàng của họ.

8


Ngồi các sản phẩm về cơng nghệ cho các doanh nghiệp bán hàng, Saha – IKI Tech còn
cung cấp cho doanh nghiệp các dịch vụ Digital Marketing chuyên nghiệp, hướng đến giải
pháp chuyển đổi số hoàn thiện

–

9


CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình, xây dựng front-end website với ReactJS” nhằm mục đích giúp
sinh viên thực tập được đào tạo về lập trình ReactJS và Redux trong xây dựng giao diện web,
đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp. Tại SAHA, 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 phần mềm chun
nghiệp.
1. Tìm hiểu cơ chế vận hành công ty và các chuẩn mực liên quan
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, khối phát triển phần mềm, team,
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.

- Đượ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, điểm danh, check in/checkout…
Kết quả: Hiểu thêm về cách tổ chức của một công ty là như thế nào. Có thêm các kĩ năng
làm việc như gửi mail, cách hỏi và đặt vấn đề, giúp cho em tự tin hơn trong những thời
gian làm viêc sau này.
2. Nghiên cứu kỹ thuật
2.1.1. Cài đặt, làm quen các công cụ làm việc
Thời gian : 3 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, mentor đã 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ư Trello, VSCode– IDE
chính để lập trình giao diện, Terminal để sử dụng git, SourceTree để sử dụng git với GUI
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 dung các IDE.
.

2.1.3 Tìm hiểu HTML, CSS, SCSS, JavaScript
Vì muốn được hiểu sâu về front-end nên em được công ty củng cố kiến thức và đào tạo lại từ
đầu.
Thời gian : 14 ngày
10


Nội dung : Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những kiến thức
quan trọng cho việc tạo các layout responsive cho trang web.
- Html : cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn
văn, heading, links,…
- Css : Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng
cách, reponsive,…

- Scss : Là tiền xử lý css, giúp viết css theo cách một ngơn ngữ lập trình, có cấu trúc rõ
ràng , rành mạch, dễ phát triển và bảo trì code hơn.
- Tìm hiểu về JS/Jquery:
- Tìm hiểu JS DOM
- Tìm hiểu về object, function, class, Async
- Tìm hiểu JQuery.
- Tìm hiểu JS web API.
- Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux.
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ắm được kiến thức html/css/scss cơ bản
- Nắm được BEM name.
- Có thể dàn được layout trang web, style theo design và responsive.
2.1.4 Nghiên cứu tài liệu và những kỹ thuật về ReactJS
Thời gian: 7 ngày
Nội dung: Được giao và tìm hiểu về những tài liệu và kỹ thuật liên quan đến
dự án. Các tài liệu bao gồm:
2.1.4.1JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript.
Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch
sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so
với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn.
Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên –

11


dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện
ngay trong quá trình biên dịch. Ngồi ra, nó cũng cung cấp tính năng gỡ lỗi

khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript,
vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng.
2.1.4.2 React được xây dựng xung quanh các component, chứ không dùng template
như các framework khác. Trong React, chúng ta xây dựng trang web sử
dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một
component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau,
trong một component lại có thể chứa thành phần khác. Mỗi component
trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện
cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React
đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án
lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều
methods khả dụng khác, nhưng render là method chủ đạo.
2.1.4.3 Props: giúp các component tương tác với nhau, component nhận input gọi là
props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI.
Thực hiện:
2.1.4.3Tham gia đầy đủ các buổi training của công ty.
2.1.4.4Làm các bài thực hành, kiểm tra về kiến thức đã học.
Kết quả:
2.1.4.5Nâng cao kỹ năng lập trình Front-end
2.1.4.6Tạo được những giao diện demo đơn giản về kỹ thuật đã nghiên cứu.
2.1.4.7Có được những kiến thức quan trọng cho việc lập trình sau này.
2.1.4.8Ngồ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.1.5 Nghiên cứu bản design của SAHA
Thời gian: 3 ngày
Nội dung: Nghiên cứu design và chức năng các page của SAHA, tìm hiểu cách
các kĩ thuật được áp dụng trong dự án, cách áp dụng các quy chuẩn code, clean
code vào project, cách tổ chức project…

12


Kết quả: Hiểu trực quan các xử lý trong project, cách tổ chức project, các quy
chuẩn code, …
2.1.6 Thực hành trên Visual Studio Code
Thời gian: 14 ngày
Nội dung: Áp dụng các kiến thức đã tìm hiểu, thực hành mơ phỏng lại website .
2.1.6.1Đọc hiểu thiết kế web
2.1.6.2Nắm luồng xử lý
2.1.6.3Thiết kế các giao diện, màn hình của trang chủ. Tạo các hiệu ứng cho
website.
2.1.6.4Thiết kế các xử lý logic cơ bản, chuyển màn hình trong website.
Kết quả:
2.1.6.5Mơ phỏng lại được website theo code của bản thân
2.1.6.6Nâng cao khả năng lập trình front-end, javascript và các kỹ năng liên quan,
bổ trợ cho quá trình sau này.
Giai đoạn 2: Xây dựng tìm hiểu Redux
2.1.7 Tìm hiểu và cài đặt Redux
Thời gian: 3 ngày
Nội dung: Do khối lượng công việc giảm, thêm vào đó team sắp nhận thêm dự
án về Redux nên team leader đã phân cơng cơng việc tìm hiểu thực hành trước
về Redux để có thể hỗ trợ cho dự án sau này. Các công việc được giao là:
2.1.7.1Cài đặt NodeJS
2.1.7.2Học cách sử dụng và vận hành của Redux
2.1.7.3Thực hành demo các chức năng đơn giản của website có áp dụng Redux.
2.1.8 Nghiên cứu tài liệu và các kỹ thuật
Thời gian: 7 ngày
Nội dung:
2.1.8.1Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng

thái của ứng dụng. Được dựa trên nền tảng tư tưởng của kiến trúc Flux do
Facebook giới thiệu, do vậy Redux thường là bộ đơi kết hợp hồn hảo với
React (React Js và React Native).
2.1.8.2 Với việc không sử dụng Redux, các component sẽ giao tiếp với nhau bằng
props. Nếu chúng ta cần lấy state của một component cách nhau 3 tầng,
13


chúng ta phải gọi 3 lần, điều đó sẽ khiến việc code và quản lý state rất phức
tạp, và to dần lên theo thời gian.
2.1.8.3 Với việc sử dụng Redux, chúng ta sẽ lưu state của các component vào 1 store
chung ở bên ngồi. Sau đó nếu muốn dùng ở component nào chúng ta chỉ
cần gọi nó và sử dụng.
Redux được xây dựng dựa trên 3 nguyên lý:
2.1.8.3.1 Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa
trong một object tree nằm trong Store duy nhất
2.1.8.3.2 Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của
ứng dụng là phát một Action (là 1 object mơ tả những gì xảy ra)
2.1.8.3.3 Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được
biến đổi bởi Action chúng ta dùng các pure function gọi
là Reducer
Về cơ bản Redux có 4 thành phần như sau:
2.1.8.4Action: Là nơi mang các thông tin dùng để gửi từ ứng dụng đến Store. Các
thông tin này là 1 object mơ tả những gì đã xảy ra.
2.1.8.5Reducer: Là nơi xác định State thay đổi như thế nào.
2.1.8.6Store: Là nơi quản lý State, cho phép truy cập State qua getState(), update
State qua dispatch(action), đăng kí listener qua subscribe(listener).
2.1.8.7View: Hiển thị dữ liệu được cung cấp bởi Store
Thực hiện :
- 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 Redux
-

Tạo được những ứng dụng demo đơn giản về kỹ thuật đã nghiên cứu.
Có được những kiến thức quan trọng cho việc lập trình sau này.

2.1.9 Thực hành xây dựng website theo yêu cầu
Thời gian:
Nội dung: Thực hành xây dựng giao diện một website theo yêu cầu của người
hướng dẫn
Kết quả: Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra.
–
14


Lịch làm việc

Tuần

Cơng việc
-

1
-

-

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.
Học cách trao đổi, làm việc
nhóm.
Nghiên cứu tài liệu và các kỹ
thuật của dự án SAHA
Nghiên cứu về ReactJS cơ
bản và chuyên sâu

2-3

-

4-8

- Thực hành dự án SAHA bằng
ReactJS

8-9

- Tìm hiểu bản thiết kế của dự án,
thực hành những gì đã học

Người hướng dẫn

Mức độ
hồn
thành

Nhận xét

của người
hướng dẫn

Chị Hiên

Anh Hiếu

Anh Hiếu
Chị Hiên

–

15


CHƯƠNG 3: CHI TIẾT VỀ PROJECT
1. Áp dụng kiến thức đã học, kiểm tra thực hành thiết kế trang thương mại điện tử
Nội dung:
- Thực hành xây dựng giao diện một website theo yêu cầu của người hướng dẫn
- Sau khi đã nắm được kiến thức cơ bản về front-end, em cùng bạn thực tập được phân
công dựng giao diện website qua các giao diện tham khảo.
- Trang web giao diện về thương mại điện tử
Kết quả: Trang web được tối ưu tốt, giao diện thân thiện. Đạt yêu cầu đề ra

16


2. Tham gia cùng đội ngũ cải thiện, bảo trì một số giao diện của IKI WEB
(Do quy định sản phẩm đang được thương mại của công ty chi tiết về dự án khơng được
cung cấp ra bên ngồi)

17


CHƯƠNG 4: TỔNG KẾT
Sau gần 3 tháng thực tập tại SAHA, em đã học được nhiều kinh nghiệm bổ ích về lập trình
giao diện web với ReactJS cũng như ReduxJS, về thiết kế UI/UX hoàn thành các nhiệm vụ được
giao. Nhờ đó, em đã hiểu được quy trình phát triển của một dự án, đồng thời hiểu được trải nghiệm
làm dự án thực tế, tăng kĩ năng giao tiếp, xử lí tình huống.

Chân thành cám ơn q Cơng ty cổ phần Cơng nghệ SAHA đã giúp đỡ tận tình cho em
trong thời gian thực tập tại công ty. Đặc biệt là anh Nguyễn Đức Hiếu cùng các anh chị trong
công ty đã giúp đỡ và hướng dẫn trong quá trình làm việc để em có thể hồn thành nhiệm vụ được
giao.

TÀI LIỆU THAM KHẢO
- HTML CSS
/>- Nodejs
/>- ReactJS
/>- Sass
/> />
18