Báo cáo thực tập lập trình FRONTEND với VUEJS

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 FRONTEND VỚI VUEJS

Cơng ty thực tập:

TVN GROUP

Người phụ trách:

Nguyễn Quốc Tuấn

Thực tập sinh:

Trần Ngọc Hưng

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


LỜI MỞ ĐẦU
Ngày này chúng ta đang được sống trong kỷ nguyên của tin học nhờ sự vượt bậc,
sự bùng nổ mạnh mẽ của công nghệ thông tin. Công nghệ thơng tin khơng chỉ dừng lại ở
mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống, chính trị, kinh tế, xã
hội, trở nên thân thiện , gần gũi, mang lại nhiều lợi ích cho con người. Cơng nghệ thơng
tin ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi
ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường như bây giờ.
Đi kèm theo đó, các hệ thống website cũng phát triển không ngừng với đủ các lĩnh

vực: văn hóa, thời sự, khoa học cơng nghệ, làm đẹp, nấu ăn, thể thao, … Tuy nhiên để tạo
một trang web có sức sống bền lâu thì bản thân nó phải mang lại lợi ích cho nhiều người.
Giao diện bắt mắt là yếu tố quan trọng để giữ chân người xem lại trang web của mình. Và
Vue là frontend framework giúp chúng ta thiết kế web một cách dễ dàng và chuyên
nghiệp hơn.
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 tham gia xây dựng những ứng dụng web một cách chuyên nghiệp. Nên
em đã chọn TVN Group một công ty trẻ và chuyên nghiệp để thực hiện dự định này.

2


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TVN Group đã 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ể tự xây
dựng trang được giao diện cho trang web công ty bằng Vuejs. 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 Tuấn và anh Thông đã training front-end, hướng dẫn, giúp
đỡ cho em tận tình cả những khó khăn trong cơng việc, và những vấn đề gặp phải khi làm
thực tế.
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.
Trần Ngọc Hưng
Thành phố HCM, ngày 23 tháng 7 năm 2020

3

NHẬN XÉT CỦA KHOA
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
…………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….

………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
……………………………..……………………………….
………………………………………………………………………………………………………………
4


………………………………………………….
………………………………………………………………………………………………………………
…………………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
…………………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….……………………………

MỤC LỤC

5


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

1. Giới thiệu công ty TVN group
Công ty TNHH TVN Group được thành lập vào năm 2018 và đã có những phát triển
khơng ngừng trong ngành thương mại điện tử. Công ty được thành lập bởi anh Vũ Minh
Tiến và theo quyết định số 0315022712 do sở kế hoạch và đâu tư thành phố Hồ Chí
Minh cấp.

TVN đang dần trở thành một cơng ty lớn trong lĩnh vực E-commerce. Đối tượng và
nhóm khách hàng chủ yếu là đến từ các nước Âu mỹ. Với đội ngũ developer có kinh
nghiệm lâu năm trong việc xây dựng hệ thống thì TVN đang tự tạo ra được sản phẩm Ecommerce cho riêng mình và đem lại cho khách hàng những trải nghiệm tốt hơn khi sử
dụng.

2. Sản phẩm của công ty
Hiện tại công ty đang sử dụng nền tảng của shopify và đang trong quá trình xây dựng
lại hệ thống thương mại điện tử cho riêng bản thân của cơng ty ở phía clients lẫn admin
dựa trên nền tảng của shopify. Hiện tại sản phẩm của công ty đã được release ra bản beta
và đang trong q trình hồn thiện. Một số link tham khảo sản phẩm:

6


-


https://www. alohawaiians.com
https://www. polynesianprint.com
https://www. 1stscotland.com
/>…

7


CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “ Lập trình Frontend với Vuejs” nhằm mục đích giúp sinh
viên thực tập được đào tạo về lập trình ở front-end, đồng thời giúp rèn luyện cho sinh
viê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 ứng

dụng e-commerce chun nghiệp.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản
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, 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 đi làm, các quy định cần phải tuân thủ, cách sử dụng slack để làm việc.
Kết quả : Hiểu thêm về công ty TVN, 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 các công cụ ở công ty, như dùng slack để trao đổi với mọi
người.

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

Công cụ làm việc

Thời gian : 3 ngày
Nội dung : Tìm hiểu và cài đặt các cơng cụ cần thiết cho quá trình làm việc.

8


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 đó có Trello – sử dụng
trong việc làm nhóm và nhận task từ leader. Gitlab – dùng để lưu trữ source code.
VSCode để có thể code, …
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.
2.2

Tìm hiểu về VueJS

Thời gian : 21 ngày (3 tuần)
Nội dung : Làm quen với framework Vuejs.
-

Vì đã có trước những kiến thức cơ bản về html, css, javascript nên khi vào thực
tập đã được tìm hiểu ngày vào framework mà cơng ty đang sử dụng để xây dựng

-

-

sản phẩm.
Tự tìm hiểu và được training cho những kiến thức cơ bản về vuejs như:
o Đối tượng trong vuejs
o Cú pháp template
o Vòng đời
o Component
o State, Props, Slot
o Event, action
o Sự giống nhau và khác nhau giữa methods và computed
o Cách dùng Vuex để quản lý state
o Cách sử dụng Vue router
o Tìm hiểu về server side render: sử dụng nuxt js
o …
Tìm hiểu về firebase

o Tìm hiểu khái niệm và cách tạo tài khoản firebase
o Tìm hiểu các tính năng chính của firebase: Realtime database,
Authencation, Firebase cloud messaaging, …
o Tìm hiểu cách deloy ứng dụng lên firebase
o …
Thực hiện :
9


-

Tham gia đầy đủ các buổi làm và training của công ty.
Làm các bài thực hành ở mỗi kiến thức đã học.
Hệ thống hóa lại kiến thức đã học bằng cách sử dụng xmind, vẽ sơ đồ tư duy.
Ứng dụng làm demo.
Kết quả :

-

Nâng cao kỹ năng lập trình web.
Giúp hiểu rõ về vuejs, framework mới ra đời và đang phát triển, được công ty lựa

-

chọn để xây dựng sản phẩm.
Hệ thống lại được những kiến thức đã được học trước đó.
Biết thêm một số quy tắc trong việc viết code, làm thế nào để code clean hơn.
Đã tự tạo cho mình được ứng dụng demo viết bằng vuejs là Todo list.

2.3

Tìm hiểu về Element UI

Thời gian : 7 ngày (1 tuần)
Nội dung : Làm quen với cách sử dụng UI framework – Element UI và API
Storefront của Shopify
-

-

Tìm hiểu về framework
o Cách cài đặt
o Tìm hiểu cách sử dụng cũng như cách tùy chỉnh các component của
framework theo nhu cầu sử dụng
Tìm hiểu về hệ thống API của shopify
o Tìm hiểu Storefront API trong document của shopify

Thực hiện :
-

Tham gia đầy đủ các buổi làm và training của công ty.
Làm các bài thực hành ở mỗi kiến thức đã học.
Hệ thống hóa lại kiến thức đã học bằng cách sử dụng xmind, vẽ sơ đồ tư duy.
Ứng dụng làm demo.

Kết quả :
-

Hiểu và nắm được những kiến thức cơ bản về những thành phần cần có để xây

-

dựng website công ty.
Xây dựng được ứng dụng demo là Todo list và đã deloy lên firebase.
10


2.4 Nghiệp vụ công ty
Thời gian : 1 ngày
Nội dung : Tìm hiểu quản lý dự án với trello, thao tác với git, development process.
Review -> Feedback -> Development -> Staging -> Production
-

Review: sau khi hoàn thành task, techlead sẽ bắt đầu review về mặt kỹ thuật

-

(chuẩn code, logic,…). Lập trình viên phải tự test mới được review.
Feedback: nếu có lỗi về mặt kỹ thuật, techlead sẽ đưa task vào trang thái feedback
và lập trình viên phải sửa feedback sau đó đưa lại cột review chờ feedback lại từ

-

tech lead.
Development: sau khi được chấp thuận, code của bạn sẽ được apply vào môi
trường development. Lúc này, bạn cũng như các tester sẽ tiến hành test. Nếu xảy

-

ra lỗi thì bạn phải fix lỗi sau đó đưa task lại trạng thái review.

Staging: Là môi trường trung lập, không ai được phép chỉnh sửa gì trên mơi
trường này. Bình thường các code trên development sẽ replicate từ staging về theo

-

đợt.
Production: môi trường người dùng.

Kết quả :
-

Hiểu rõ quy trình làm việc cơng ty.
Nắm được cách quản lý và deloy code với gitlab.

3. Thực hiện Project
Sau hơn 4 tuần được training và thực hành thì thực tập sinh đã nắm được kiên thức
cơ bản về VueJS và một số kiến thức cần thiết. Để chuẩn bị bước vào xây dựng
ứng dụng thực tế là website thương mại điện tử của công ty.
Chi tiết sẽ được trình bày ở phần sau.
4. Lịch làm việc
Tuần

Cơng việc

Người

Mức độ hoàn

Nhận xét của
11

hướng dẫn

1

-

Tìm hiểu về cơng ty, cách Anh Tuấn

-

tổ chức của công ty.
Làm quen với các công cụ

-

2-3-4

5

thành

người hướng
dẫn

làm việc trong cơng ty.
Tìm hiểu về VueJS
Anh Tuấn,
Áp dụng kiến thức vừa học

Anh Thơng
để xây dựng ứng dụng

Todo list
- Tìm hiểu Element UI
Anh Tuấn
- Làm quen với Shopify API
- Làm quen với trello, setup Anh Tuấn
môi trường để làm việc với

6

dự án của cơng ty.
Quy trình làm việc.
Tiến hành xây dựng ứng dụng Anh Tuấn,
-

7-8

thực tế.

Anh Hải

12


CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ
1. Giới thiệu về Project
Vì cơng ty đang th sử dụng nền tảng của shopify, cho nên nhu cầu của công ty
hiện tại là tạo ra một sản phẩm do chính cơng ty xây dựng và không cần phải đi

thuê từ nền tảng khác giúp tiết kiệm chi phí cho cơng ty. Vì thời gian thực tập có
hạn nên trong 2 tuần cuối cùng nhóm thực tập chỉ đủ dể xây dựng giao diện cho
ứng dụng của cơng ty. Về phía UI thì chỉ cần xây dựng lại dựa trên layout đã có
sẵn ở shopify và tối ưu hóa sao cho website chạy nhanh nhất có thể, tăng trải
nghiệm người dùng. Cịn về phía server thì do khơng đủ thời gian cũng như chưa
có kinh nghiệm nhiều nên chỉ dừng lại ở mức tìm hiểu và sử dụng lại những api đã
có sẵn từ shopify.
Anh Tuấn leader quyết định chọn nuxt js để xây dựng ứng dụng, vì nuxt js là
server side render nên sẽ tốt cho việc SEO những website E-commerce như thế
này.
Một số hình ảnh của project:

13


14


Một số giao diện trang admin

15


2. Thực hiện:
Để hồn thành một phần project này thì nhóm thực hiện bao gồm em cùng với 2
bạn khác là:
-

Nguyễn Văn Hội
Nguyễn Hữu Lai

Đồng thời là sự giúp đỡ nhiệt tình của anh Tuấn và anh Hải.
3. Kế hoạch:
Giai đoạn 1:
-

Xây dựng UI cho tất cả các page
Tạo các component dùng chung

Kết quả: Cơ bản hoàn thành giao diện cho website
Giai đoạn 2:
-

Sử dụng apollo graphql để lấy dữ liệu từ shopify về
Đổ dữ liệu vào các component đã xây dựng
Sử dụng vuex để quản lý các state
Tạo các function để transform dữ liệu trả về
16


Kết quả: Hồn thành những tính năng trên và page hiển thị đúng dữ liệu từ
shopify trả về
Giai đoạn 3:
-

Deloy ứng dụng lên host, sử dụng CI/CD của gitlab
Fix lỗi phát sinh trong q trình chạy thử nghiệm

Kết quả: Hồn thành việc triển khai website lên production, nhưng còn phát
sinh nhiều lỗi và không thể khác phục được hết trong thời gian thực tập.

TÀI LIỆU THAM KHẢO
Document Shopify:
17


/>Document Vuejs:
/>Document Nuxtjs:
/>Document vue apollo graphql:
/>
18