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 WIDGET
TRÊN NỀN TẢNG REACT

Lê Xuân Tùng

Công ty thực tập

: ELCA Việt Nam

Người phụ trách

: Nguyễn Nhật Minh

Thực tập sinh

: Lê Xuân Tùng

Báo cáo thực tập


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

Lê Xuân Tùng

Báo cáo thực tập

LỜI MỞ ĐẦU

Ngày nay, công nghệ Web là một bộ phận không thể thiếu của ngành công nghiệp phần
mềm. Với tốc độ phát triển vô cùng mạnh mẽ, công nghệ Web đang được sử dụng rất nhiều và
được phổ biến rộng rãi.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ. Công nghệ
Web đang là sản phẩm chính của hầu hết các cơng ty. Đặc biệt với sự ra đời của React đã đưa
công nghệ Web phát triển thêm tầm cao mới.
Công nghệ Web hiện nay vẫn đang được phát triển mạnh và đầu tư nhiều trong phần mềm.
Với sự hỗ trợ đa nền tảng, dường như Web đang dần thay thế các phần mềm desktop vì những
lợi ích mà nó đem lại. Vì lý do này, em quyết định chọn lập trình Web làm định hướng cho việc
học tập của mình.
Sau ba 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 web trong một mơi trường chun nghiệp, em có dự định là sẽ thực tập
trong hè. Vì vậy, em quyết định chọn ELCA - một môi trường lý tưởng, hiện đại, chuyên nghiệp
- là nơi sẽ giúp em thực hiện được dự định này.

Lê Xuân Tùng

Báo cáo thực tập


LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty ELCA 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, nhóm
thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được một widget.
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 chúng em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Nguyễn Nhật Minh, đã training React, hướng dẫn, giúp đỡ cho chúng
em 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; cảm ơn anh Nguyễn Việt Dương, đã training Java, hỗ trợ chúng em rất nhiều về các
vấn đề RestAPI, Java trong quá trình làm widget; cảm ơn anh Hồ Văn Thiện Tâm, đã chỉ dẫn
chúng 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ảm ơn các anh
Phạm Thế Vinh đã training cho chúng em những kiến thức quan trọng về JavaScript, CSS3,
HTML5 để có thể làm ra một sản phẩm trong thời gian qua.
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.
Lê Xuân Tùng
TP. HCM, ngày 19 tháng 12 năm 2021

Lê Xuân Tùng

Báo cáo thực tập


NHẬN XÉT CỦA KHOA

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

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

Lê Xuân Tùng

Báo cáo thực tập


1

MỤC LỤC

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

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty ............................................ 3
Nghiên cứu kỹ thuật ................................................................................................. 3

Thực hiện project ...................................................................................................... 5
Lịch làm việc ............................................................................................................ 6

Chương 3: Chi tiết về project .......................................................................................... 8
1. Giới thiệu về Widget ................................................................................................ 8
2. Thực hiện ................................................................................................................ 12
3. Kế hoạch ................................................................................................................. 12
TÀI LIỆU THAM KHẢO ............................................................................................... 13
TỔNG KẾT ...................................................................................................................... 14

Lê Xuân Tùng

Báo cáo thực tập


2

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

1. Giới thiệu công ty ELCA Việt Nam
ELCA là công ty phát triển phần mềm độc lập lớn nhất của Thụy Sĩ. Từ năm 1968,
nhiệm vụ của công ty là thực hiện các giải pháp ban đầu và sáng tạo với giá trị gia
tăng mạnh mẽ. Làm việc cùng với khách hàng và các đối tác của công ty, ELCA đảm
bảo hệ thống độ bền.
Trong hơn 15 năm nhóm của cơng ty đã hoạt động thành công một trung tâm phát
triển ra nước ngoài tại Việt Nam.
Quyết định mở ELCA Việt Nam đã được khởi cơng cho nhóm. Năm 1998 ELCA
là một trong những cơng ty phần mềm 100% vốn nước ngồi đầu tiên mở văn phịng
tại Thành phố Hồ Chí Minh.


2. Sản phẩm của công ty
ELCA là một công ty với nhiều đơn vị, mỗi đơn vị có một sản phẩm riêng. Với vị
trí thực tập sinh được tham gia vào SecuTix – một đơn vị lớn của ELCA với sản phẩm
chính là Hệ thống bán vé nổi tiếng toàn cầu.
Hệ thống bao gồm các web bán vé và phần mềm bán vé cho máy bán vé tự động.
Tất cả được phát triển bởi cơng nghệ Web. Đối tác chính của cơng ty thường là các hệ
thống tham quan, sân vận động hoặc du lịch. Một trong những đối tác lớn phải kể đến
là FIFA EURO với sự thành công trong việc bán vé cho mùa EURO 2021.

Lê Xuân Tùng

Báo cáo thực tập


3

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình Widget trên nền tảng React” nhằm mục đích giúp sinh
viên thực tập được đào tạo tồn diện về lập trình Web, đồng thời rèn luyện những kỹ năng mềm
như làm việc nhóm, thuyết trình, giao tiếp. Tại cơng ty, 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 game chun nghiệp.

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 ELCA, 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.

2.2.

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ư Source Tree
- sử dụng trong làm việc nhóm, Cygwin – cơng cụ build source code với nhiều tiện ích,
Notepad++ là 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.
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.
Tìm hiểu ngơn ngữ Java và Spring Framework
Thời gian: 5 ngày (1 tuần)
Nội dung: Được training về các kỹ thuật Java nâng cao, những kiến thức quan trọng
cho việc tối ưu trên Spring.
- Lập trình hướng đối tượng

Lê Xuân Tùng

Báo cáo thực tập



4

Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính như
tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình. Ngồi ra, thực tập sinh còn
được hướng dẫn về cách thiết kế lớp cho các đối tượng game.
- Biểu thức lambda và stream API trong Java :
Từ phiên bản Java 8, với sự ra đời của biểu thức lambda đã giúp cho việc lập trình
được tối ưu hơn.
- Spring MVC
Spring Framework là một nền tảng web server được sử dụng phổ biến được xây
dựng bằng ngôn ngữ Java.
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ả:
-

2.3.

Nâng cao kỹ năng lập trình với ngơn ngữ Java.
Có được những kiến thức quan trọng cho việc lập trình web 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.

Tìm hiểu về React và JavaScript
Nội dung: Các kiến thức cơ bản về JavaScript và ReactJS
-

Các lý thuyết cơ bản về JavaScript.

Kiến thức về ngôn ngữ JavaScript
Nắm vững các lý thuyết về const, let, var trong JavaScript.
Bên cạnh đó cịn có các lý thuyết: function, promise, …

-

Kiến thức về React:
Nắm chắc khái niệm Virtual DOM trong React.
Lý thuyết về React Hook
Responsive với React Bootstrap
Bundle size trong widget

Thực hiện:

Lê Xuân Tùng

Báo cáo thực tập


5

-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành javascript cơ bản, React, …
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả:
2.4.


Hiểu được những khái niệm cơ bản trong lập trình ReactJS.
Biết cách tổ chức và xây dựng một web page và widget.

Lập trình widget trên nền tảng React
Nội dung: Các kỹ thuật tạo ra một widget cơ bản bằng React TypeScript
-

Định nghĩa về Widget:
Widget là một bộ phận của trang web, được phát triển tương tự một web page.
Widget được integrate vào các trang web bằng script từ bundle của nó. Bản thân
widget cũng có thể tự call Rest API như một trang web.

-

Tạo một widget:
Dựa trên project đã được setup theo cấu trúc business của công ty, một widget sẽ
được thêm vào folder widget, mỗi widget có một file index.html để integrate vào
lúc lập trình hoặc sử dụng storybook.

-

Lập trình Widget bằng React TypeScript
Để có thể lập trình widget bằng TypeScript, cần sử dụng template là TypeScript của
React. Mỗi widget là một class Component mang đủ đặc tính của một web page
như lúc lập trình website bằng React. Tuy nhiên khi export page đó ra, sẽ khơng thể
chạy bằng cách thơng thường như lập trình web, mà cần tích hợp vào một file html
hoặc storybook để hiển thị được widget.

Thực hiện:
-


Tham gia đầy đủ các buổi training.
Tạo ra những widget cơ bản. Chạy thử widget và kiểm tra bundle size.

Kết quả:
-

Đã có thể tạo ra những widget cơ bản và biết cách tích hợp vào file html.

3. Thực hiện project

Lê Xuân Tùng

Báo cáo thực tập


6

Sau một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ
bản về React, JavaScript, HTML5 và CSS3. Trong tháng thứ hai, trainer đã hướng dẫn
thực tập sinh áp dụng những kiến thức đã học để thực hiện một project widget bằng React
TypeScript.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc

Tuần

Công việc

1


Setup environment
Java
+ Maven
+ Java
+ Exception Handling
+ Design pattern
+ Debugging
+ Exercise
Spring
+ Multilingual, multitier
+ Coding convention
+ Spring framework
Hibernate
+ Application security
+ Surrogate key &
concurrent update
+ SQL
+ Unit test trong Java
+ Hibernate
React
+ CSS
+ JavaScript
+ React framework
+ Coding best practice
Business
+ ELCA
+ SecuTix
Readiness Review
+ WBS

+ Thời gian

2

3

4

5, 6, 7

8
9

Lê Xuân Tùng

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 Nguyễn Việt Dương

Anh Nguyễn Việt Dương


Anh Nguyễn Việt Dương

Anh Nguyễn Nhật Minh

Anh Nguyễn Nhật Minh
Anh Nguyễn Nhật Minh

Báo cáo thực tập


7

10, 11,
12
13
14

Lê Xuân Tùng

Widget development
+ RestAPI cho widget
+ Widget UI
Correction bugs
Report

Anh Nguyễn Nhật Minh
Anh Nguyễn Nhật Minh
Anh Nguyễn Nhật Minh

Báo cáo thực tập



8

Chương 3: Chi tiết về project

1. Giới thiệu về widget
Widget mang tên Delivery Mode – là widget được sử dụng trong bước chọn cách gửi mặt
hàng tới người dùng (shipment mode). Widget được xây dựng với mục đích để bộ phận
lập trình web core có thể tích hợp và sử dụng.
1.1.

Nghiệp vụ
Trong các sản phẩm được khách hàng lựa chọn, mỗi sản phẩm sẽ có những phương
thức giao hàng nhất định. Ở đây sẽ có 2 trường hợp:

-

Tất cả những sản phẩm trong giỏ hàng có chung ít nhất 1 phương thức giao hàng
Đới với trường hợp này, widget chỉ cần hiển thị danh sách các phương thức chung
đó và cho người dùng có thể chọn 1 phương thức
Mỗi phương thức sẽ có phí cụ thể (tính theo sản phẩm hoặc theo lần mua)
Nếu theo sản phẩm: Tổng phí = phí * số sản phẩm
Nếu theo lần mua, phí này chính là phí chuyển giao.
Đối với những phương thức cần dùng tới địa chỉ, sẽ phải hiển thị mục chọn địa chỉ
cho người dùng. Nếu người dùng là guest (khách) thì sẽ có button để có thể thêm
địa chỉ. Nếu người dùng đã có tài khoản nhưng lại khơng có địa chỉ nào, cần ẩn
phương thức này, và thông báo cho người dùng các phương thức bị ẩn

-


Không tồn tại một phương thức chung nào cho tất cả các mặt hàng
Đới với trường hợp này, widget sẽ phải hiển thị thông tin mỗi sản phẩm và danh
sách các phương thức của sản phẩm đó
Nếu có nhiều sản phẩm chọn phương thức giống nhau, cần kiểm tra để tính giá tiền
hợp lý. Nếu cần chọn địa chỉ, tất cả phải chọn chung 1 địa chỉ.
Nếu tồn tại một sản phẩm không có phương thức nào, khơng cho phép tiếp tục.

1.2.

Tiến hành xây dựng widget và viết Rest API
Mô tả

Lê Xuân Tùng

Báo cáo thực tập


9

Để có thể viết được API, cần phải có orderId (mã lượt mua) và contactId (mã người
dùng). Từ đó có thể lấy được thông tin sản phẩm người dùng đã chọn và tìm ra
phương thức chung (hoặc khơng có phương thức chung). Đồng thời lấy tất cả địa
chỉ có thể giao hàng của người dùng để trả về.
Đối với widget, cần xác định từ dữ liệu trả về là có chung phương thức hay không
để hiển thị cho phù hợp.
Trường hợp có phương thức chung:

Lê Xuân Tùng


Báo cáo thực tập


10

Trường hợp khơng có phương thức chung

Lê Xn Tùng

Báo cáo thực tập


11

Lê Xuân Tùng

Báo cáo thực tập


12

2. Thực hiện
Thực tập sinh Lê Xuân Tùng
Và sự giúp đỡ tận tình của team trainer SecuTix – ELCA.

3. Kế hoạch
Giai đoạn Alpha:
-

Hoàn thành nghiệp vụ

Widget hoạt động tốt ở cả hai trường hợp

Kết quả:
-

Hầu hết các tính năng trên đã được thực hiện.
Hỗ trợ thêm trường hợp người dùng chọn phương thức không hợp lệ và lọc phương
thức.

Giai đoạn Beta:
-

Hồn thành các nghiệp vụ bổ sung
Sửa lỗi tính tốn phí sai và lọc phương thức theo vùng, mốc thời gian.

Kết quả: Đã hồn thành tồn bộ những tính năng trên.

Lê Xuân Tùng

Báo cáo thực tập


13

TÀI LIỆU THAM KHẢO

For Java & Spring
/>
For React TypeScript & Bootstrap
/> /> />

For Style
/>
Lê Xuân Tùng

Báo cáo thực tập


14

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, một widget quan trọng đã được phát triển
thành công. Widget đã có khá đầy đủ các tính năng đã đề ra ban đầu. Do nghiệp vụ của SecuTix
khá rộng và có nhiều sự thay đổi dẫn đến cịn một số điểm chưa hồn hảo của Widget, tuy nhiên
với tính kế thừa cao, widget sẽ rất dễ dàng để sửa chữa và nâng cấp.
Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer SecuTix – ELCA, sự giúp đỡ
của team Gravity để có thể hồn thành widget này. Cảm ơn anh Nguyễn Nhật Minh đã giúp em
hoàn thành bài báo cáo này.

Lê Xuân Tùng

Báo cáo thực tập