Báo cáo thực tập lập trình và xây dựng giao diện WEBSITE bằng REACTJS

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 VÀ XÂY DỰNG GIAO
DIỆN WEBSITE BẰNG REACTJS

Công ty thực tập :
Người phụ trách : Trần Phi Phúc
Thực tập sinh

: Nguyễn Kỷ Nguyên - 17520825

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

1


LỜI MỞ ĐẦU
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng
Single Page Application. Trong khi những framework khác cố gắng hướng đến một mơ hình MVC
hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript
khác. Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html
thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code
html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích
hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn
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à instagram được viết hoà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.

Sau 3 năm 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 chuyên 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 S.E.N 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 TNHH Công nghệ Giáo Dục Thông Minh S.E.N đã 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 trong 3 tháng nhưng nhóm trainer đã 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 Trần Phi Phúc và chị Trần Thị Huỳnh Ngân đã 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 Kỷ Nguyên
Tp. Hồ Chí Minh, tháng 01 năm 2021

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 TNHH Công nghệ Giáo dục Thông minh S.E.N ................................... 6
CHƯƠNG 2: NỘI DUNG THỰC TẬP ..................................................................................... 7
1. Tìm hiểu cơ chế vận hành công ty và các chuẩn mực liên quan........................................... 7
2. Nghiên cứu kỹ thuật ........................................................................................................... 7
3. Lịch làm việc .................................................................................................................... 12
CHƯƠNG 3: CHI TIẾT VỀ PROJECT ................................................................................. 13
1. Giới thiệu về L.M.S .......................................................................................................... 13
CHƯƠNG 4: TỔNG KẾT ....................................................................................................... 14
TÀI LIỆU THAM KHẢO ........................................................................................................ 15
1. ReactJS............................................................................................................................. 15
2. Redux ............................................................................................................................... 15

5


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

1. Giới thiệu Công ty TNHH Công nghệ Giáo dục Thông minh S.E.N
-

-

-

S.E.N là công ty phần mềm Việt Nam thành lập từ năm 2010. S.E.N là cơng ty có các kĩ
sư giàu kinh nghiệm, có tay nghề cao và đam mê trong các sản phẩm công nghệ và dịch
vụ nội dung số trực tuyến.
Công ty S.E.N cung cấp các dịch vụ số hố quản lý học tập xun cấp trong tồn bộ các
cơ sở, các nền tảng giảng dạy trực tuyến cho các trường học ở Mỹ và Việt Nam.
Cuối cùng, công ty S.E.N cung cấp dịch vụ bảo trì các sản phẩm và cơ sở hạ tầng kỹ thuật
số trực tuyến với hiệu suất cao và trung tâm dữ liệu an tồn trên quy mơ tồn cầu.

6


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 S.E.N, 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 : 3 ngày
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty
- Được chị Trần Thị Huỳnh Ngân 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. Giai đoạn 1: Xây dựng giao diện với ReactJS
2.1.1. Cài đặt, làm quen các công cụ làm việc
Thời gian : 7 ngày
Nội dung : Được hướng dẫn cài đặt và sử dụng các công cụ mà công ty dùng để
làm việc nhóm, chia sẻ Source Code nội bộ, Đọc hiểu Design và lấy các thông
số liên quan.
- Kênh thông tin làm việc nhóm: Bitbucket.
-

Chia sẻ Source Code : TortoiseSVN.

-

Phần mềm code: Visual Studio Code

-

Cài đặt NodeJS, thư viện của ReactJS.

-

Đọc thêm các tài liệu liên quan đến quy chuẩn code, quy tắc đặt tên biến
của công ty
7

Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả: Hiểu thêm về những phần mềm liên quan tới công việc của công ty.
Biết thêm những quy tắc lập trình, cách chia sẻ code của mình với team, cách
đọc một bản design và ứng dụng nó như thế nào.
2.1.2. Nghiên cứu bản thiết kế, chỉ thị
Thời gian: 3 ngày
Nội dung: Nghiên cứu bản thiết kế chi tiết của website S.E.N, luồng xử lý, thiết
kế các màn hình, các hiệu ứng, animation…
Kết quả: Hiểu được chi tiết trang web, cách thiết kế, xử lý các hiệu ứng trong
web…
2.1.3. Nghiên cứu tài liệu và những kỹ thuật.
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:
- JSX 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
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 q 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.
-

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.
8


-

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:
- 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 Front-end
- Tạo được những giao diện 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.
- 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.1.4. Nghiên cứu bản design của S.E.N
Thời gian: 3 ngày
Nội dung: Nghiên cứu design và chức năng các page của S.E.N, 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 vào
project, cách tổ chức project…

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.5. Lập trình trên Visual Studio Code
Thời gian: 30 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 .
- Đọc hiểu thiết kế web
- Nắm luồng xử lý
- Thiết kế các giao diện, màn hình của trang chủ. Tạo các hiệu ứng cho
website.
- Thiết kế các xử lý logic cơ bản, chuyển màn hình trong website.
Kết quả:
- Mô phỏng lại được website theo code của bản thân
- Nâ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.

9


2.2. Giai đoạn 2: Xây dựng tìm hiểu Redux
2.2.1. 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à:
- Cài đặt NodeJS
- Học cách sử dụng và vận hành của Redux
- Thực hành demo các chức năng đơn giản của website có áp dụng Redux.
2.2.2. Nghiên cứu tài liệu và các kỹ thuật
Thời gian: 7 ngày
Nội dung:

- Redux 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).
- 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,
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.
- 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ý:
• 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
• 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)
• 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

10


• Về cơ bản Redux có 4 thành phần như sau:
- Action: 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.
- Reducer: Là nơi xác định State thay đổi như thế nào.
- Store: 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).
- View: 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.2.3. Thực hành xây dựng website theo yêu cầu
Thời gian: 30 ngày
Nội dung: Thực hành xây dựng giao diện một website theo yêu cầu của team
leader
Kết quả: Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra.

11


3. Lịch làm việc
Tuần

Cơng việc

1

-

2-3

Người hướng dẫn

Mức độ
hồn
thành

Nhận xét
của người
hướng 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 công cụ làm
Chị Trần Thị Huỳnh
việc trong cơng ty.
Ngân
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 S.E.N

-

4-8

- Thực hành dự án S.E.N bằng
Reactjs

8-9

- Tìm hiểu bản thiết kế của dự án

Anh Trần Phi Phúc

Anh Trần Phi Phúc

Chị Trần Thị
Huỳnh Ngân

12


CHƯƠNG 3: CHI TIẾT VỀ PROJECT
1. Giới thiệu về L.M.S
L.M.S là một website mang tính ứng dụng giáo dục trực tuyến, cho phép giáo viên có thể
dạy học, tương tác với với lớp học và từng thành viên trong lớp học. Đồng thời có thể quản
lý được số lượng cũng như chất lượng của từng học sinh thông qua hệ thống quản lý và hệ
thống thi đánh giá học lực, cho phép giáo viên có thể trình chiếu slide trực tiếp trên nền
tảng
Vì quy định bảo mật của cơng ty nên các thông tin chi tiết về dự án không được
cung cấp ra bên ngoài.

13


CHƯƠNG 4: TỔNG KẾT
Sau hơn 3 tháng thực tập tại S.E.N, em đã học được nhiều kinh nghiệm bổ ích về lập trình
ReactJS cũng như ReduxJS, về thiết kế UI/UX hồ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 quý công ty cổ phần dịch vụ công nghệ S.E.N đã giúp đỡ tận tình cho
em trong suốt 3 tháng thực tập tại công ty. Đặc biệt là anh Trần Phi Phúc và chị Trần Thị Huỳnh
Ngân đã 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.
Website cơng ty: />
14

TÀI LIỆU THAM KHẢO
1. ReactJS
-

HTML CSS
/>Nodejs
/>ReactJS
/>Sass
/>2. Redux
/>
15