Báo cáo thực tập lập trình WEB với VUE JS

1

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 WEB VỚI VUE.JS

Cơng ty thực tập

:

Công Ty Cổ Phần Công Nghệ MHEALTH

Người phụ trách

:

Ngô Đông Hồng

Thực tập sinh

:

Lê Việt Hồng

TP. Hồ Chí Minh, tháng 7 năm 2020

<Ngơ Đơng Hồng >

<Lê Việt Hồng>


2

LỜI MỞ ĐẦU

Ngày nay, khi tốc độ phát triển của cơng nghệ càng tăng. Các loại hình phát triển dịch vụ
ngày càng đa dạng. Bên cạch đó thì chất lượng cuộc sống và nhu cầu chăm sóc ngày càng tăng
cao.
Để đáp ứng kịp thời các thắc mắc cũng như nhằm giảm các lo sợ vì thiếu hiểu biết về y tế
hoặc các kiến thức liên quan. Dịch vụ Telemedicine đã xuất hiện dưới nhiều hình thức khác
nhau như : Đặt khám online, tư vấn cùng bác sĩ,…
Thơng qua tìm hiểu thì em đã biết Cơng Ty Cổ Phần Cơng Nghệ Mhealth là một trong
những công đang phát triển về lĩnh vực này. Cùng với tinh thần học hỏi và muốn được trải
nghiệm ở một công ty product. Nên em quyết định đây là nơi em sẽ thực tập.

<Ngô Đông Hồng >

<Lê Việt Hoàng>


3

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ệ Mhealth đã 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 anh chị ở cơng ty, em
đã tiếp thu được những kiến thức quan trọng để phát triển bản thân. Chân thành cảm ơn các anh

chị công ty đã bỏ ra nhiều thời gian,công sức để giúp đỡ em hoàn thành đợt thực tập này.
Đặc biệt cảm ơn anh Ngô Đông Hồng, đã training Vue.js và các kiến thức xung quanh,
hướng dẫn, giúp đỡ 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.
<Lê Việt Hồng>
<Tp.HCM, ngày 28 tháng 7 năm 2020>

<Ngơ Đơng Hồng >

<Lê Việt Hoàng>


4

NHẬN XÉT CỦA KHOA

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

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

<Ngơ Đơng Hồng >

<Lê Việt Hồng>


5

MỤC LỤC
Contents
MỤC LỤC............................................................................................................................................. 5
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ệ Mhealth ..................................................................... 6

2.

Sản Phẩm Của Công Ty .............................................................................................................. 6

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

Tìm hiểu cơng ty và lối sống trong công ty .............................................................................. 7

2.2.

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

2.2.1.

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

2.2.2.

Tìm hiểu ngơn ngữ Vue.js ................................................................................................ 7

2.2.3.

Tìm hiểu về Vuetify.js ...................................................................................................... 8

2.2.4.

Tìm hiểu về Nuxt.............................................................................................................. 8

2.3.

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

2.4.

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

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

3.1.

Xây dựng trang thông tin cá nhân .......................................................................................... 10

3.1.1.
3.2.

Cho cá nhân.................................................................................................................... 10

Xây dựng trang web theo mockup ......................................................................................... 10

3.2.1.

Trang Product ................................................................................................................. 10

3.2.2.

Trang Order .................................................................................................................... 11

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

<Ngô Đông Hồng >

<Lê Việt Hoàng>


6

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ệ Mhealth
Công Ty Cổ Phần Công Nghệ Mhealth được thành lập vào năm 2015. Là một trong những công
ty đang phát triển về lĩnh vực Telemedicine ở Việt Nam hiện nay.
Văn phịng của cơng ty được đặt tại LA02.08, Tịa Nhà Lexington, 67 Mai Chí Thọ, Phường An
Phú, Quận 2, TP Hồ Chí Minh .

2. Sản Phẩm Của Công Ty
Công ty cung cấp dịch vụ tư vấn, khám sức khỏe từ xa cho cá nhân và doanh nghiệp. Với sứ
mệnh : “Chúng tôi giúp bạn duy trì một lối sống lành mạnh, và khi bạn cần tham vấn y tế, chúng tôi kết
nối bạn với những bác sĩ chuyên khoa hàng đầu qua gọi thoại và gọi video 24/7”.

<Ngơ Đơng Hồng >

<Lê Việt Hồng>


7

Chương 2: Nội dung thực tập
Đợt thực tập với nội dung : “ Tìm hiểu về Vue.js” để có thể tham gia vào dự án công ty
khi hết hạn thực tập. Đồng thời rèn luyện các kỹ năng mềm : làm việc nhóm, thuyết trình, giao
tiếp. Tìm hiểu về cơng ty và định hướng mơi trường phát triển

2.1.

Tìm hiểu cơng ty và lối sống trong công ty

Thời gian : 5 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, q trình thành lập và phát triể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,
và các trang web của công ty…
Kết quả : Hiểu thêm về cơng ty, 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.2.

Nghiên cứu kỹ thuật

2.2.1. 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 q trình làm việc.
Trong thời gian này supervisor hướng dẫn sinh viên tìm hiểu về các công cụ được
dùng trong làm việc.Trello – theo dõi, báo cáo tiến độ công việc. Slack – Thông tin
và thảo luận trong làm việc.
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Sử dụng thành thạo các cơng cụ trên.
2.2.2. Tìm hiểu ngôn ngữ Vue.js
Thời gian : 5 ngày
Nội dung : Được training về các kiến thức cơ bản Vue.js, các extension cần thiết.
Thực hiện :
 Sử dụng Vue.js để xây dựng một trang quản lý thông tin cá nhân khách hàng
với quyền xem và cập nhật.
Kết quả :

<Ngô Đông Hồng >

<Lê Việt Hoàng>


8

 Thành thạo sử dụng căn bản ngôn ngữ.
 Kinh nghiệm về logic và các chuẩn viết code
2.2.3. Tìm hiểu về Vuetify.js
Thời gian : 5 ngày.

Nội dung: Các kiến thức về Vuetify.
 Style & animations : Cấu hình và sử dụng các thuộc tính css ở Vuetify.
 Components : Cách sử dụng các component của Vuetify và tùy biến theo yêu
cầu sử dụng.
Thực hiện :
 Đọc docs tại : dưới sự hướng
dẫn của supervisor.

Kết quả :
 Sự dụng Vuetify vào trong dự án.

2.2.4. Tìm hiểu về Nuxt
Nội dung : Tìm hiểu về Nuxt.
 Cấu trúc file trong project của công ty.
 Hiểu cách thức hoạt động của Nutx
Thực hiện :
 Tạo và sắp xếp các file theo đúng cấu trúc.
Kết quả:
 Thành thạo và thao tác chính xác

2.3.

Thực hiện project

Sau khi hồn thành cơng việc tìm hiểu để làm quen công việc. Thực hiện các task được
đưa ra.

<Ngô Đông Hồng >

<Lê Việt Hoàng>


9

2.4.

Lịch làm việc

Tuần
1

-

2

-

3,4
4,5
6,7,8

9,10,11
12

-

Mức
độ
Cơng việc
Người hướng dẫn
hồn
thành
Tìm hiểu về cơng ty, cách tổ Anh Ngô Đông 100%
chức của công ty.
Hồng
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 về Vue.js
Anh Ngơ Đơng 100%
Sử dụng Vuetify
Hồng
Tìm hiểu nuxt
Tạo trang xem và update Anh Ngơ Đông 100%
thông tin cá nhân cho bệnh Hồng
nhân
Tạo trang xem và update Anh Ngô Đông 100%
thông tin cá nhân cho bác sĩ Hồng
Thực hiện xây dựng trang Anh Ngô Đông 100%
web theo mockup

Hồng
Xây dựng các Components Anh Ngô Đông 100%
để tái xử dụng theo yêu cầu
Hồng
Báo cáo kết quả hoàn thành Anh Ngô Đông 100%
và kết thúc thực tập
Hồng

<Ngô Đông Hồng >

Nhận xét của
người hướng
dẫn

<Lê Việt Hoàng>


10

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

Xây dựng trang thông tin cá nhân

3.1.1. Cho cá nhân

3.2.

Xây dựng trang web theo mockup

3.2.1. Trang Product

<Ngơ Đơng Hồng >

<Lê Việt Hồng>


11

3.2.2. Trang Order



Xây dựng với mục đích giúp admin quản lý dữ liệu, nên tập trung vào xây dựng
khuôn dữ liệu và các component tái sử dụng.

<Ngô Đông Hồng >

<Lê Việt Hoàng>


12



Các chức năng tìm kiếm và hiện thị các thuộc tính.

TÀI LIỆU THAM KHẢO

For Models

<Ngơ Đơng Hồng >

<Lê Việt Hồng>


13



For Particle
/> /> />
For OpenAL
/>
For Font
/> /> /> />
For graphics




<Ngơ Đơng Hồng >

<Lê Việt Hồng>


14

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hồn thành một game 3D

chạy trên nền tảng PC và Android. Game đã có khá đầy đủ các tính năng đã đề ra ban đầu. Do
thời gian có hạn nên tính năng game cịn đơn giản, hình ảnh chưa được đẹp như mong đợi.
Nhưng do game phát triển theo framework có tính kế thừa nên sau này khi có thời gian sẽ có thể
phát triển lên mức cao hơn.
Chân thành cảm ơn sự giúp đỡ của các anh chị nhóm trainer Gameloft, sự nỗ lực của
nhóm Beast Knight để có thể hồn thành game này. Cảm ơn thầy Nguyễn Hữu Thương đã giúp
em hoàn thành bài báo cáo này.

<Ngơ Đơng Hồng >

<Lê Việt Hồng>