Báo cáo thực tập lập trình ứng dụng web với reactjs và angular

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 REACTJS VÀ ANGULAR

Công ty thực tập:
Công ty TNHH Giải Pháp ECR Việt Nam

Người phụ trách:
Trần Quang Khải

Lớp:
SE501.N11

Thực tập sinh:
ĐINH VIỆT HÀO - 19521475


Page |2

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

Thực tập doanh nghiệp
Đinh Việt Hào


Page |3

LỜI MỞ ĐẦU

Ứng dụng web ngày nay có sức lan tỏa mạnh mẽ trong cuộc sống của con người. Nó đã
trở thành một phần tất yếu của họ. Mọi người sử dụng nó để giải trí, mua sắm, chia sẻ ảnh, v.v.
Ngồi ra, các cơng ty, doanh nghiệp sử dụng nó để quảng cáo thương hiệu, sản phẩm, dịch vụ,
hỗ trợ hoạt động kinh doanh và thúc đẩy bán hàng. Do nhu cầu tương đối cao đối với các ứng
dụng web, nhiều thư viện đã được phát triển để hỗ trợ phát triển web nhanh hơn và dễ dàng hơn,
chẳng hạn như Reactjs, Angular.
Ngày nay, ứng dụng web đóng vai trò tất yếu trong cuộc sống con người. Mọi người có
thể sử dụng web để kết nối với người khác, mua sắm, giải trí. Bên cạnh đó, các doanh nghiệp
cũng dần lựa chọn môi trường web để phát triển phần mềm theo nhu cầu của họ. Và với nhu cầu
ngày một tăng cao, nhiều thư viện đã được ra đời để giúp việc phát triển web nhanh chóng và
hiệu quả hơn, trong đó có một thư viện khá là phổ biến, nhu cầu việc làm cao, đó là Reactjs,
Angular.
 Reactjs là một thư viện javascript giúp xây dựng UI cho website, với các ưu điểm về hỗ
trợ xây dựng giao diện nhanh, cải thiện hiệu năng, hạn chế lỗi trong quá trình code, tái sử dụng
các component, Reactjs đã nhanh chóng trở thành cơng cụ phát triển web hot nhất hiện nay,
được nhiều công ty ưa dùng.
Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng một trang sử dụng
HTML và TypeScript. Angular được viết bằng TypeScript. Nó triển khai chức năng cốt lõi và
chức năng tùy chọn như một tập hợp các thư viện TypeScript mà bạn import vào các ứng dụng
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ư
cố nâng cao kiến thức của mình trong một mơi trường chun nghiệp, em đã quyết định thực tập
trong kì này. Vì vậy, em quyết định chọn ECR -  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.

Thực tập doanh nghiệp
Đinh Việt Hào

Page |4

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Giải Pháp ECR 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ể hịa nhập, cũng như
phát triển những kỉ năng về lập trình. 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 Trần Quang Khải nói riêng và mọi người trong cơng ty nói chung
đã training, hướng dẫn, giúp đỡ cho 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ũ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.
Đinh Việt Hào
TPHCM, ngày 23 tháng 12 năm 2022

Thực tập doanh nghiệp
Đinh Việt Hào


Page |5

NHẬN XÉT CỦA KHOA

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

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

Thực tập doanh nghiệp
Đinh Việt Hào


Page |6

MỤC LỤC
Chương 1: Giới thiêu công ty thực tập....................................................................................................6
1.

Giới thiệu công ty TNHH Giải Pháp ECR Việt Nam:................................................................6

2.

Sản phẩm của cơng ty....................................................................................................................6

Chương 2: Nội dung thực tập..................................................................................................................8
1.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty...............................................................8

2.

Nghiên cứu kỹ thuật.......................................................................................................................8
2.1.

Các cơng cụ làm việc...............................................................................................................8

2.2.

Tìm hiểu ngơn ngữ Javascript, Typescript...........................................................................8

2.3.

Lập trình ReactJS với MobX.................................................................................................9

2.4.

Git, Gitlab:.............................................................................................................................10

2.5.

Lập trình với Angular..........................................................................................................10

3.

Thực hiện project.........................................................................................................................11

4.

Lịch làm việc.................................................................................................................................11

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

2.

Dự án Click-Bluezinc...................................................................................................................14
1.1.

Đặt lịch khám, đặt cuộc hẹn, tạo lịch:.................................................................................14

1.2.

Tạo mới một route, tính năng mới......................................................................................15

Dự án Stock-Ticketing.................................................................................................................16
2.1 Cổng thanh tốn Stripe, Opayo, Wordpay:............................................................................16
2.2 Thực hiện đặt ghế, đặt chỗ ngồi:.............................................................................................18

Chương 4: Tổng kết................................................................................................................................20
1.

Kết quả thu được:........................................................................................................................20

2.

Các điểm yếu của bản thân:........................................................................................................20

3.

Cảm nhận về công ty:..................................................................................................................20

TÀI LIỆU THAM KHẢO......................................................................................................................22

Thực tập doanh nghiệp
Đinh Việt Hào


Page |7

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

1. Giới thiệu công ty TNHH Giải Pháp ECR Việt Nam:
ECR cung cấp hệ thống bán vé và đặt chỗ cho Big Bus Tours, National Express, Hội đồng
thành phố Bournemouth (BCC) và Auckland Explorer. ECR Việt Nam đã đóng vai trị quan
trọng trong việc phát triển TicketPoS.
ECR Việt Nam đã làm việc với một số công ty phà như: Công ty Thuyền Ngọc Mỹ & Phà
Huế. Chúng tôi coi ECR Việt Nam là cơ hội để mở rộng danh mục đầu tư toàn cầu của ECR
với một ngành dọc mới. Việc mua lại sẽ cho phép cả hai bên đóng góp vào việc cung cấp cho
khách hàng phà những khả năng mới và sáng tạo như; ứng dụng tiến bộ và nhật ký cổng
thơng tin thành viên.
Đến nay, nhóm phát triển Việt Nam đã tạo ra một số giải pháp bán vé mới sáng tạo nhất
của ECR. Với nhiều dự án mới đang được triển khai hơn bất kỳ năm nào trước đó, cơng ty
tiếp tục mở rộng dấu ấn của mình tại thị trường bán lẻ và bán vé di động.

2. Sản phẩm của công ty
ECR cung cấp nhiều loại công cụ bao gồm các ứng dụng có thương hiệu, lập kế hoạch
hành trình, thanh tốn di động, phân tích chi tiết, chuyển tuyến theo yêu cầu và được lên lịch
trước. Bao gồm bất kỳ loại dịch vụ vận chuyển nào, trên bất kỳ số lượng nhà khai thác nào,
nền tảng của chúng tơi vượt trội về tính linh hoạt và hiệu suất.
Trong các giải pháp bán vé và quản lý khách truy cập hoàn toàn trên thiết bị di động. ECR
mang đến cho bạn khả năng hiển thị và kiểm sốt tốt nhất chưa từng có trong thời gian thực
với hệ thống mạnh mẽ nhất của chúng tôi cho đến nay. Độ tin cậy, tính linh hoạt và tính mơ
đun trong nhiều ứng dụng đa dạng nhất thông qua bán vé, quản lý khách truy cập, CRM, sự
kiện, bán lẻ và đặt chỗ.
Thực tập doanh nghiệp
Đinh Việt Hào


Page |8

Chúng tôi đã phát triển các giải pháp riêng cho TOC trên khắp Vương quốc Anh và Châu
Âu. RailPoS, chạy trên thiết bị đầu cuối cầm tay Go2 tất cả trong một duy nhất, cung cấp một
giải pháp hợp lý và đã được chứng minh để mang lại hiệu quả tốt nhất trong bán lẻ trên tàu,
kiểm soát hàng tồn kho và hậu cần, quản lý phi hành đoàn và bán vé.
LeisurePoS qua nhiều lần phát triển, giải pháp của chúng tơi có thể bao gồm mọi khía cạnh
trong hoạt động của bạn. Được sử dụng trên khắp châu Âu cho các công ty dẫn đầu thị trường
bao gồm David Lloyd Leisure, Audley Villages và BUPA, LeisurePoS mang đến cho bạn
tính mơ đun, khả năng mở rộng và khả năng kiểm chứng trong tương lai. Chuyển đổi từ các
hệ thống cũ được thực hiện dễ dàng. Thêm chức năng, trang web bổ sung và địa điểm bán
hàng, mở rộng quy mô để phù hợp với nhu cầu phát triển của bạn. Dữ liệu thời gian thực
cung cấp cho bạn khả năng hiển thị và kiểm soát đầy đủ trên nhiều khía cạnh của doanh
nghiệp. Từ đặt chỗ spa đến sân cắm trại, phục vụ ăn uống, cửa hàng bật lên, thuê và đặt địa
điểm, sự kiện cho đến tư cách thành viên. Chúng tôi điều chỉnh hệ thống của chúng tôi theo

nhu cầu của bạn.

Thực tập doanh nghiệp
Đinh Việt Hào


Page |9

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Front-end Web Developer” nhằm mục đích giúp sinh viên thực tập
được đào tạo toàn diện về việc lập trình Web, giao diện, UI/UX, đồ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 chun nghiệp, đa quốc gia.

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 :
Tham gia những buổi sharing chung về giới thiệu cơng ty, q trình phát triển,
những quy tắc, quy định về bảo mật, an tồn thơng tin, văn hóa, sự kiện, cách làm
việc, v.v.
Kết quả : Hiểu thêm về cơng ty ECR, 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ư:
o Gitlab - Cơng cụ quản lý code, nhiệm vụ
o Jira - sử dụng trong làm việc nhóm
o Bitbucket – dùng để quản lý mã nguồn
o RocketChat - phần mềm để giao tiếp nội bộ
o 1Office - sử dụng để chấm công, xem bảng lương, quản lý nhân sự.
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.
Tìm hiểu ngơn ngữ Javascript, Typescript
Thời gian : 5 ngày (1 tuần)
Nội dung :

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 10

-

Được training về các kỹ thuật Javasciprt, Typescript nâng cao cùng với đó là các
cơng cụ hỗ trợ khác như VS Code, ESLint và những kiến thức quan trọng cho việc
học các framework.
- Lập trình đồng bộ, bất đồng bộ: Hiểu rõ về lập trình bất đồng bộ trong javascript.
- VS Code: Hiểu được các cú pháp, ứng dụng các tiện ích mở rộng để tăng hiệu suất
làm việc.

- Typescript: Hiểu được cách khởi tạo vùng dữ liệu cho biến, các loại type,
interface.
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ữ Javascript, Typescript.
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.

Lập trình ReactJS với MobX
Nội dung: Các kiến thức cơ bản về ReactJS cũng như cơng cụ quản lý state Mobx để
có thể tham gia vào dự án công ty.
-

Khái niệm cơ bản về ReactJS:

React là 1 thư viện JavaScript được tạo ra bởi facebook và instagram, nó hỗ trợ
chúng ta trong việc thiết kế giao diện người dùng (UI) giống như là phần View trong
mơ hình MVC vậy nhưng thực tế thì nó còn hơn như vậy nhiều.
-

MobX:

Mobx là 1 thư viện Javascript dùng để quản lý state của ứng dụng. Mobx có thể sử

dụng được với Javascript thuần và với cả các modern framework như Angular, Vue
hay React. Đằng sau Mobx là cả 1 tư tưởng lớn về Reactive Programming.
Flow hoạt động của Mobx sẽ gồm 4 bước chính như sau:
o Các event từ UI sẽ gọi đến những actions trong store của Mobx.

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 11

o Các actions này sẽ thay đổi trực tiếp (mutate) các observable state trong
store.
o Những observable state sau khi thay đổi sẽ được truyền đến các cập nhật
lại những computed value (những giá trị được tính tồn và trả về bởi
method getter).
o Cuối cùng, các side-effect (như render component) sẽ được trigger để
render component với state mới.

Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả :
2.4.

- Vì đã có kiến thức nền tảng từ trước nên việc học khá nhanh.
Git, Gitlab:

Nội dung : Các kỹ thuật cơ bản về việc sử dụng git. Cũng như làm quen giao diện,
luồng đi trong gitlab.
-

Học các lệnh git cơ bản:
Được các trainer hướng dẫn dùng các lệnh cơ bản cho việc làm nhóm như
commit, pull, push, status, clone.
- Học các lệnh git nâng cao, fix conflict:
Được các trainner hướng dẫn dùng các lệnh nâng cao như reset, cherry-pick,
stash, stash pop tùy vào từng trường hợp cụ thể, hướng dẫn fix conflict đúng cách.
Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tìm hiểu thêm tài liệu ở trang chủ của git, gitlab.

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 12

Kết quả:
- Đã có thể sử dụng git hiệu quả theo chuẩn của team, cũng như đã quen với luồng
làm việc trên gitlab.
2.5.

Lập trình với Angular
Nội dung : Các kỹ thuật cơ bản về lập trình với Angular..
-

Khái niệm về Angular:
Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng một trang sử
dụng HTML và TypeScript. Angular được viết bằng TypeScript. Nó triển khai chức
năng cốt lõi và chức năng tùy chọn như một tập hợp các thư viện TypeScript mà bạn
import vào các ứng dụng của mình.
Angular là một javascript framework do google phát triển để xây dựng các Single
Page Application (SPA) bằng JavaScript , HTML và TypeScript . Angular cung cấp
các tính năng tích hợp cho animation , http service và có các tính năng như autocomplete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên
dịch thành JavaScript và hiển thị tương tự trong trình duyệt.
Thực hiện :
-

Tham gia đầy đủ các buổi training.
Tìm hiểu thêm tài liệu ở trang chủ của git, gitlab.

Kết quả :
- Đã có thể sử dụng git hiệu quả theo chuẩn của team, cũng như đã quen với luồng
làm việc trên gitlab.

3. Thực hiện project
Sau hai 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ề techstack của công ty bao gồm ReactJS, Angular, Jira, Bitbucket, Gitlab. Kể từ
tháng thứ ba, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để làm
task trên hệ thống của công ty.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Thực tập doanh nghiệp
Đinh Việt Hào

P a g e | 13

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 qua email.
Tìm hiểu ngơn ngữ
lập trình Javascript
nâng cao
Thực hành với
Javascript,
Typescript.

Chị Nguyễn Ngọc
Phương Trâm

Tìm
hiểu

về
ReactJs, cơng cụ
quản
lý
state
MobX.
- Tìm hiểu về Git,
Gitlab,
Jira,
Bitbucket
- Tìm
hiệu
về
Angular, các bài tập
cơ bản để hiểu thêm
về framework.
- Tiến hành vào dự
án, làm các task cư
bản để làm quen.
- Đọc codebase của
hệ thống

Anh Phan Tuấn
Tú

-

2,3

-

-

4,5

6

7,8

9,10

11,12,13,14
15,16

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 Phan Tuấn
Tú

Anh Lê Anh Đông
Anh Trần Quang

Khải
Anh Phan Tuấn
Tú

Làm các task liên Anh Phan Tuấn
quan đến call api, Tú
kiếm tra lỗi nhập
vào, loading, tạo
mới một route …
Fixbug thanh toán Anh Phan Tuấn

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 14

-

17,18

-

-

19,20
-

21,22,23,24
-

card, sai logic từ
khách
hàng,
scrolldown đến dữ
liệu cần nhập khi
chuyển giữa các
trang…
Dự án 1 chuyển qua
maintain, sang dự
án mới về Angular.
Làm các task cơ
bản để làm quen dự
án,
tiến
hành
cherry-pick commit
giữa các client.
Làm task liên quan
đến 2 hệ thống
chính là bán vé, đồ
ăn…
Kiểm tra mặt hàng
có bị OutOfStock,
có offer bên trong
sản phẩm để hiện
popup câu hỏi, …
Field data vào lịch,
những ngày có thể
đặt lịch, đặt vé.

Fix bugs.
Tiến hành làm các
phương thức thanh
toán quốc tế như
Strike,
Opayo,
WorldPay áp dụng
vào website bán sản
phẩm.
Làm ma trận ghế
ngồi, số ghế, chữ
cái.
Fix bugs.

Tú

Anh Trần Quang
Khải

Anh Trần Quang
Khải

Anh Trần Quang
Khải

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 15

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 16

Chương 3: Chi tiết về project
1. Dự án Click-Bluezinc
Là một phần mềm OMS. OMS là viết tắt của Operation Management System là
một phần mềm ứng dụng được thiết kế để hỗ trợ việc quản lý vận hành.
Cung cấp cho bạn các công cụ để quản lý mọi khía cạnh của doanh nghiệp từ một
hệ thống trung tâm, giảm thời gian dành cho quản trị viên để đảm bảo bạn dành nhiều
thời gian nhất có thể cho khách hàng. Ví dụ như quản lý hồ sơ khách hàng, phịng, cuộc
hẹn, lớp học, thơng tin liên lạc, báo cáo kinh doanh, tài chính, biểu mẫu, ghi chú lâm
sàng,...
 Các tính năng chính đã làm:
1.1.
-

Đặt lịch khám, đặt cuộc hẹn, tạo lịch:
Giao diện:

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 17

-

Cơng việc chính:
o Tái cấu trúc giao diện trang đặt cuộc hẹn cho khách hang.
o Kiểm tra, validate lại các giá trị nhập vào trước khi thực hiện “Save”.
o Tạo, sửa, tìm kiếm “Client” và hiển thị ở phía bên phải. Tăng trải nghiệm cho
người dung, thuận tiện hơn trong việc chọn “Client”.

-

Thực hiện: 2 thành viên của team FE Reactjs
o Đinh Việt Hào.
o Phạm Đình Đơng.

1.2.
-

Mentor: Anh Phan Tuấn Tú
Tạo mới một route, tính năng mới
Giao diện:

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 18

-

Cơng việc chính:
o Tạo mới một route, tính năng mới “Case Notes”.

o Thiết kế bảng dữ liệu theo yêu cầu, theo thiết kế mới mẻ, năng động.

-

Thực hiện: Đinh Việt Hào.

-

Mentor: Anh Phan Tuấn Tú.

2. Dự án Stock-Ticketing
Là một phần mềm E-Comerce kết hợp với OMS. OMS là viết tắt của Operation
Management System là một phần mềm ứng dụng được thiết kế để hỗ trợ việc quản lý
vận hành.
Phần mềm này chia làm 2 phần. Phần thứ nhất sẽ là “Stock”, nơi quản lý kho
hàng, sản phẩm, vé bán, vận hành từ phía quản lý. Phần thứ hai sẽ là “Ticketing”, nơi
tương tác của khách hàng tới các tính năng của phần mềm.
 Các tính năng chính đã làm:
2.1 Cổng thanh tốn Stripe, Opayo, Wordpay:

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 19

-

Giao diện:

Thực tập doanh nghiệp
Đinh Việt Hào


P a g e | 20

-

Cơng việc chính:
o Tái cấu trúc lại phần thanh toán để apply 2 cổng thanh toán mới là Opayo và
WorldPay.
o Kết hợp, thảo luận cùng với team BE để truyền lên và nhận dữ liệu về như
mong muốn.

-

Thực hiện: 1 thành viên của team FE và 1 thành viên của team BE
o Đinh Việt Hào (FE).
o Hà Nhật Linh (BE).

-

Mentor: Anh Trần Quang Khải.

2.2 Thực hiện đặt ghế, đặt chỗ ngồi:
-

Giao diện:

Thực tập doanh nghiệp

Đinh Việt Hào