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
VUEJS
Cơng ty thực tập

: Công ty cổ phần Splus-Software

Người phụ trách

: Trần Hữu Tính

Thực tập sinh

: Nguyễn Thanh Tuấn

MSSV

: 18521604

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


LỜI MỞ ĐẦU
Ngày nay, tầm quan trọng của Internet đối với đời sống con người là điều ta không thể
phủ nhận. Việc truy cập vào Internet nói chung cũng như là truy cập các ứng dụng Web nói
riêng gần như đã trở thành một thói quen, một việc làm hàng ngày của mọi người.
Không phải ngẫu nhiên mà các ứng dụng Web lại trở nên phổ biến như vậy, mà là bởi vì

sự tiện lợi cũng như là dễ dàng truy cập tại bất cứ nơi đâu, chỉ cần có kết nối mạng Internet là ta
đều có thể truy cập các ứng dụng Web một cách dễ dàng. Điều đó đã được chứng minh trong
những năm trở lại đây, đặc biệt là với tình hình dịch bệnh Covid như hiện tại, các ứng dụng
Web luôn là sự lựa chọn ưu tiên của hầu hết mọi người trong rất nhiều các lĩnh vực khác nhau:
từ mua sắm đồ đạc, quần áo, cho đến việc mua đồ ăn, thức uống hàng ngày,…
Sau thời gian tìm hiểu về Lập trình nói chung cũng như là Lập trình ứng dụng Web nói
riêng, cũng đã trải qua những đồ án môn học tại trường, em mong muốn có thêm những trải
nghiệm thực tế về việc làm ra một ứng dụng Web có tính thực tiễn, đồng thời có thể trau dồi
bản thân trong mơi trường làm việc chun nghiệp, đầy tính kỷ luật hơn. Vì vậy, em đã quyết
định lựa chọn Công ty cổ phần Splus-Software sẽ là nơi em có thể trau dồi thêm kiến thức cũng
như là trải nghiệm làm việc của mình trong một mơi trường tập thể, đầy tính trách nhiệm.

BÁO CÁO THỰC TẬP

1


LỜI CẢM ƠN
Lời đầu tiên em xin trân trọng gửi lời cảm ơn đến Công ty cổ phần Splus-Software đã tạo
điều kiện cho em có cơ hội được thực tập tại quý công ty.
Chỉ trong 3 tháng ngắn ngủi, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị mentor
trong Team Amour, em đã tiếp thu được rất nhiều những kiến thức bổ ích trong việc phát triển
một ứng dụng Web và cơng nghệ NuxtJs cũng như quy trình làm việc trong team dự án và áp
dụng những điều đó vào thực hiện các tasks được giao trong dự án Amour. Chân thành cảm ơn
các anh chị mentor đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập
này
Đặc biệt cảm ơn anh Tiến, đã training kiến thức, hướng dẫn, giúp đỡ em tận tình từ
những khó khăn trong việc tiếp cận và tìm hiểu cơng nghệ mới NuxtJs, đến những khó khăn
trong việc làm quen với môi trường làm việc mới, luôn bên cạnh và theo sát công việc thực tập
của em; cảm ơn anh Tính, đã tạo điều kiện để em có thể tham gia cùng team Amour phát triển

dự án hỗ trợ em cũng như là hướng dẫn quy trình làm việc cho em rất nhiệt tình; cảm ơn anh
Khoa, anh Tuấn, chị Chi, chị Ngân đã luôn hỗ trợ và hướng dẫn cho em những lúc em gặp phải
những vấn đề trong công việc và cần sự giúp đỡ của anh chị. Cuối cùng, em xin cảm ơn tất cả
anh chị trong Dự án Amour đã hỗ trợ em để có được những kiến thức cực kỳ bổ ích. Và em
cũng rất vui khi có thể tham gia cùng anh chị và đóng góp chút sức nhỏ nhoi của mình cho Dự
án.
Em cũng xin chân thành 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 hoàn thành bài báo cáo này.
NGUYỄN THANH TUẤN
Tp.HCM, ngày 15 tháng 12 năm 2021

BÁO CÁO THỰC TẬP

2


NHẬN XÉT CỦA KHOA

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

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

BÁO CÁO THỰC TẬP

3


MỤC LỤC
LỜI MỞ ĐẦU ....................................................................................................................................... 1
LỜI CẢM ƠN ....................................................................................................................................... 2
NHẬN XÉT CỦA KHOA ..................................................................................................................... 3
MỤC LỤC ............................................................................................................................................ 4
Chương 1: Giới thiệu công ty thực tập ................................................................................................... 5
1. Giới thiệu công ty Splus-Software ................................................................................................. 5
2. Mơ hình tổ chức............................................................................................................................. 5
3. Lĩnh vực hoạt động ........................................................................................................................ 5
4. Chuyên môn của công ty................................................................................................................ 6
Chương 2: Nội dung thực tập................................................................................................................. 7
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty ................................................................... 7
2. Nghiên cứu kỹ thuật....................................................................................................................... 7
2.1. Các công cụ làm việc .............................................................................................................. 7
2.2. Tìm hiểu Framework VueJs .................................................................................................... 7
3. Thực hiện project ........................................................................................................................... 8
4. Lịch làm việc ................................................................................................................................. 9
Chương 3: Chi tiết về project ............................................................................................................... 12

1. Giới thiệu về Dự án Amour.......................................................................................................... 12
2. Thực hiện .................................................................................................................................... 12
3. Kết quả ........................................................................................................................................ 12
3.1. Màn hình và chức năng chỉnh sửa Manufacturer.................................................................... 12
3.2. Màn hình Danh sách Manufacturers ...................................................................................... 13
3.3. Màn hình Chỉnh sửa Maker ................................................................................................... 14
3.4. Tổng kết............................................................................................................................... 15
TÀI LIỆU THAM KHẢO ................................................................................................................... 16
TỔNG KẾT ......................................................................................................................................... 17
BÁO CÁO THỰC TẬP

4


Chương 1: Giới thiệu công ty thực tập
1. Giới thiệu công ty Splus-Software
Splus-Software được thành lập từ năm 2015, là công ty chuyên tư vấn và gia công xuất
khẩu phần mềm. Hiện tại cơng ty đã có 2 trụ sở tại Việt Nam và Nhật Bản, Splus đã và đang
thực hiện nhiều dự án lớn cùng với những khách hàng uy tín quốc tế tại chủ yếu các thị trường
như Nhật Bản, Đức, Mỹ và Singapore.

2. Mơ hình tổ chức

3. Lĩnh vực hoạt động
Splus-Software hoạt động trong đa dạng các lĩnh vực bao gồm:
• Dịch vụ - Ứng dụng Web (Web application)
• Dịch vụ - Ứng dụng di động (Mobile application)
• Dịch vụ - Trí tuệ nhân tạo (AI)
• Dịch vụ - Internet kết nối vạn vật (IoT)
• Dịch vụ - Điện toán đám mây (Cloud)

BÁO CÁO THỰC TẬP

5


4. Chuyên môn của công ty
Những công nghệ mà công ty sử dụng:
• Programming: PHP, Java, C#, Javascript, Golang, Ruby, Objective-C,…
• Framework: Lavarel, Spring, VueJs, .NET, Rails, Flutter, Outsystem,…
• Database: MySQL, MSSQL, Oracle, DB2, SQL Lite, No SQL,…
• Platform: Google Cloud Platform, Amazon Cloud, SalesForce,…
• CI/CD: Jenkins, CircleCI, AWS CodeBuild, Azure DevOps,…

BÁO CÁO THỰC TẬP

6


Chương 2: Nội dung thực tậ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 : 2 ngày
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty, và huấn luyện về an ninh
thông tin
Được nghe người phụ trách giới thiệu về cơng ty, q 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 làm việc, các quy định cần phải tuân thủ, bảo mật thông tin dự án, giới
thiệu những công cụ làm việc công ty đang sử dụng,…
Huấn luyện về an ninh thông tin theo tiêu chuẩn ISO 27001:2013 và làm bài kiểm
tra về An ninh thông tin.

Kết quả : Hiểu thêm về công ty Splus-Software, q trình thành lập và phát triển. Có
thêm các kỹ năng về làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. Đảm bảo việc
bảo mật thơng tin của Công ty và dự án.

2. Nghiên cứu kỹ thuật
2.1. Các công cụ làm việc
Thời gian : 2 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, bộ phận IT đã hướng dẫn thực tập sinh tìm hiểu và sử dụng 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ư SVN
- sử dụng để quản lý những tài liệu của dự án, Gitlab – sử dụng để quản lý source code
của dự án, Redmine – sử dụng để quản lý các tasks công việc, Zoho-Mail – Email nội bộ
của công ty, Slack – kênh chat mà công ty sử dụng cũng như team dự án trao đổi thông
tin cho nhau.
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Nắm được khái quát cách sử dụng các công cụ cần thiết khi làm việc trong
cơng ty.
2.2. Tìm hiểu Framework VueJs
Thời gian : 4 ngày (1 tuần)
Nội dung : Được anh mentor gợi ý và giới thiệu nguồn tài liệu để tự tìm hiểu về
Framework VueJs. Trong q trình tìm hiểu, có thắc mắc thì có anh mentor ln sẵn
sàng giải đáp thắc mắc của mình.
- Khái niệm cơ bản về VueJs:
BÁO CÁO THỰC TẬP

7


VueJs là một progressive framework dùng để xây dựng một SPA (Single
Page Application). Không giống như những monolithic frameworks, Vue được

thiết kế từ đầu theo hướng phát triển ứng dụng từng bước một. Thư viện cốt lõi
chỉ tập trung vào View layer, và dễ dàng lấy với tích hợp những thư viện khác
như vuex để hỗ trợ quản lý state hoặc là vue-router để hỗ trợ cho việc routing.
- Rendering:
VueJs cho phép render dữ liệu đến DOM bằng cú phép template đơn giản,
cịn lại mọi thứ đã có Vue hỗ trợ cho lập trình viên. VueJs sử dụng Virtual DOM
để tăng trải nghiệm của người dùng, thông qua mỗi event như click, hover,…
Virtual DOM sẽ tìm những thành phần bị thay đổi rồi thông báo cho DOM chỉ
thay đổi những thành phần bị thay đổi mà thôi.
- Một số Directives thường sử dụng:
VueJs đã xây dựng sẵn những Directives làm đơn giản hố các thao tác cho
lập trình viên, chẳng hạn như:
+ v-if: giúp ẩn hiện element nếu thoả điều kiện bên trong
+ v-else: là directive đi kèm với v-if
+ v-for: là directive hỗ trợ vòng lặp
+ v-on: là directive giúp bắt các event listener
+ v-bind: là directive giúp element đó update lại mỗi khi có thay đổi
Thực hiện :
- Chủ động tìm hiểu về những khái niệm cơ bản cũng như syntax của VueJs.
- Làm ví dụ minh hoạ để kiểm tra các kiến thức đã tìm hiểu được.
Kết quả :
- Hiểu được những khái niệm cơ bản trong lập trình front-end với VueJs.
- Hiểu rõ hơn về quy tắc hoạt động của 1 web application

3. Thực hiện project
Sau gần một tháng được hướng dẫn và luyện tập, thực tập sinh đã nắm được những kiến
thực cơ bản về VueJs, HTML, CSS cũng như các công nghệ đi kèm, thực tập sinh đã
được trainer kiểm tra và kiểm tra những kiến thực đã học được trong 1 tuần vừa qua. Sau
khi đã nhận được những góp ý và chỉnh sửa hồn chỉnh thì thực tập sinh đã được anh
Tính (PM) và anh Tiến (TeamLead – mentor chính) chấp nhận cho tham gia vào dự án

hiện tại của team là dự án Amour.
Chi tiết đồ án sẽ được nói ở phần sau.

BÁO CÁO THỰC TẬP

8


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

1

2

3

4

5

Cơng việc
- Cấu hình VPN để truy cập tài
nguyên và server test của công
ty.
- Tham gia buổi giới thiệu
của cơng ty và khố huấn luyện
về an ninh thông tin.
- Làm quen với các công cụ
làm việc trong công ty

như SVN, Redmine,...
- Học cách trao đổi, làm
việc qua Slack và truy cập
được vào Zoho Mail công ty
cấp.
- Cài đặt mơi trường phát triển
hỗ trợ framework VueJs
- Tìm hiểu về VueJs
Framework thơng qua trang
chủ của VueJs và hướng dẫn
tìm hiểu của anh mentor.
- Tiến hành kiểm tra các kiến
thức đã tìm hiểu được về VueJs
dưới sự review của anh mentor.
- Dựa trên những review góp ý
từ mentor để bổ sung thêm
những kiến thức cần thiết và
cải thiện kỹ năng coding.
- Tìm hiểu về quy tắc đặt tên
cho class (BEM).
- Setup mơi trường, clone
source code cho dự án Amour.
- Tìm hiểu khái quát nghiệp vụ
hiện tại và source code của dự
án Amour.
- Được hướng dẫn về quy trình
làm việc trong dự án, quy tắc
đặt Q&A cho khách hàng.
- Study nghiệp vụ màn hình
chỉnh sửa Manufacturer dựa

trên tài liệu và design từ phía
khách hàng.

BÁO CÁO THỰC TẬP

Người
hướng dẫn
Anh Nguyễn
Hải Dương
(bộ phận IT
của cơng ty)

Mức độ
Nhận xét của
hồn thành người hướng dẫn
100%
Hồn thành tốt

Anh Tạ Bảo
Tiến

100%

Hoàn thành tốt

Anh Tạ Bảo
Tiến

100%


Hoàn thành tốt

Anh Trần
Hữu Tính

100%

Hồn thành tốt

Anh Tạ Bảo
Tiến

100%

Hồn thành tốt

9


6

7

8

9

10

- Đặt Q&A cho khách hàng về

những nghiệp vụ chưa rõ (dưới
sự review của mentor).
- Tiến hành thực hiện coding
màn hình chỉnh sửa
Manufacturer.
- Lưu ý lại những review góp ý
từ mentor để fix lại màn hình
chỉnh sửa Manufacturer.
- Study nghiệp vụ Component
Top Header.
- Tiến hành thực hiện coding
Component Top Header.
- Lưu ý lại những review góp ý
từ mentor để fix lại Component
Top Header.
- Study nghiệp vụ màn hình
danh sách Manufacturers đã
đăng ký dựa trên tài liệu và
design từ phía khách hàng.
- Đặt Q&A cho khách hàng về
những nghiệp vụ chưa rõ (dưới
sự review của mentor).
- Tiến hành thực hiện coding
màn hình danh sách
Manufacturers.
- Lưu ý lại những review góp ý
từ mentor để fix lại màn hình
danh sách Manufacturer.
- Tham gia testing và fixbug
màn hình “Xác nhận nội dung

quotation”.
- Tham gia testing và fix bug
màn hình “Danh sách
Manufactuers”
- Tham gia integration test
flow màn hình vừa hồn thành
đợt này của dự án trên mơi
trường server test.
- Log bug xảy ra trong q
trình test.
- Tham gia fix bug chung với
team.
- Study nghiệp vụ màn hình

BÁO CÁO THỰC TẬP

Anh Tạ Bảo
Tiến

100%

Hồn thành tốt

Anh Tạ Bảo
Tiến

100%

Hoàn thành tốt


Anh Tạ Bảo
Tiến

100%

Hoàn thành tốt

Chị Tạ Thị
Kim Chi

100%

Hoàn thành tốt

Anh Tạ Bảo

100%

Hoàn thành tốt
10


11

12

Chỉnh sửa Maker dựa trên tài
liệu và design từ phía khách
hàng.
- Đặt Q&A cho khách hàng về

những nghiệp vụ chưa rõ (dưới
sự review của mentor).
- Tiến hành thực hiện coding
màn hình Chỉnh sửa Maker.
- Lưu ý lại những review góp ý
từ mentor để fix lại màn hình
Chỉnh sửa Maker.
- Tham gia testing và fixbug
màn hình “Estimate creation
screen”.
- Tham gia testing và fix bug
màn hình “Chỉnh sửa Maker”.
- Tham gia integration test
flow màn hình vừa hồn thành
đợt này của dự án trên mơi
trường server test.
- Log bug xảy ra trong q
trình test.
- Tham gia fix bug chung với
team.
- Tham gia test excution trên
mơi trường production.
- Hồn thành khố thực tập và
viết báo cáo

BÁO CÁO THỰC TẬP

Tiến

Anh Tạ Bảo

Tiến

100%

Hoàn thành tốt

Chị Tạ Thị
Kim Chi
&
Anh Trần
Hữu Tính
&
Anh Tạ Bảo
Tiến

100%

Hồn thành tốt

11


Chương 3: Chi tiết về project
1. Giới thiệu về Dự án Amour
Amour là 1 trang web hỗ trợ việc lựa chọn và ước tính giá tiền của các sản phẩm nội địa
Nhật Bản. Nhóm khách hàng được đề xuất sử dụng là những kiến trúc sư và nhà thiết kế nội
thất. Chức năng chính của Amour là hỗ trợ cho khách hàng có thể có được bảng giá chính xác
và nhanh nhất đồng thời hỗ trợ đặt hàng từ những brand nội thất mà khách hàng mong muốn.
Một số chức năng nổi bật:
- Hỗ trợ tìm kiếm sản phẩm cho hơn 20,000 sản phẩm đến từ rất nhiều brand nội thất khác nhau

trên toàn nước Nhật.
- Yêu cầu từng quotation (báo giá) chính xác tại thời điểm hiện tại từ mỗi nhà cung cấp khác
nhau.

2. Thực hiện
Thực tập sinh Nguyễn Thanh Tuấn cùng sự hỗ trợ, giúp đỡ tận tình từ những anh chị
mentor trong team Amour. Đặc biệt là anh Tiến (TeamLead) và anh Tính (PM) của dự án.

3. Kết quả
3.1. Màn hình và chức năng chỉnh sửa Manufacturer

BÁO CÁO THỰC TẬP

12


3.2. Màn hình Danh sách Manufacturers

BÁO CÁO THỰC TẬP

13


3.3. Màn hình Chỉnh sửa Maker

BÁO CÁO THỰC TẬP

14



3.4. Tổng kết
Đã hiện thực được màn hình và chức năng
- Chỉnh sửa Manufacturer theo đúng yêu cầu của khách hàng.
- Danh sách Manufacturers theo đúng yêu cầu của khách hàng.
- Chỉnh sửa Maker theo đúng yêu cầu của khách hàng.

BÁO CÁO THỰC TẬP

15


TÀI LIỆU THAM KHẢO

For VueJs, NuxtJs
/> />
For BEM (style classname with BEM)
/>
BÁO CÁO THỰC TẬP

16


TỔNG KẾT

Như vậy, trong vòng 3 tháng thực tập, thực tập sinh đã kịp hồn thành 3 màn hình chức
năng đã thông qua testing từ bộ phận Tester và Release cho khách hàng ổn thoả. Tuy vẫn cịn
nhiều khó khăn trong quá trình làm việc nhưng nhờ sự hướng dẫn tận tình từ các anh chị trong
team Amour nên thực tập sinh đã có thể vượt qua được chính bản thân mình và học hỏi được
nhiều kinh nghiệm trong những dự án thực tế. Trong tương lai hy vọng thực tập sinh sẽ có nhiều
cơ hội hơn nữa để phát triển hồn thiện bản thân mình hơn.

Chân thành cảm ơn sự giúp đỡ của các anh chị trong team Dự án Amour đã giúp em có
những trải nghiệm làm việc thực sự tuyệt vời. Cảm ơn anh Trần Hữu Tính đã giúp em hoàn
thành bài báo cáo này.

BÁO CÁO THỰC TẬP

17