báo cáo thực tập xây dựng ECOMMERCE FRONT END

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

XÂY DỰNG ECOMMERCE FRONT-END

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

: Nguyễn Văn Hội


2

LỜI MỞ ĐẦU
Ngày này với sự phát triển không ngừng của ngành công nghệ thông tin và mạng
internet đã tạo ra một bước tiến lớn trong ngành bán hàng trực tuyến. Có thể nói, việc bán
hàng trực tuyến đã và đang dần thay thế cho các hình thức kinh doanh cũ và đặc biệt
chiếm ưu thế. Vì vậy việc thiết kế và xây dựng website E-commerce khơng cịn là nhu
cầu của doanh nghiệp mà là của tất cả mọi người.
Ứng dụng E-comerce cũng đang rất phát triển tại Việt Nam và vì thế địi hỏi

nguồn nhân lực khá lớn để có thể xây dựng nên chúng. Vì lý do này em quyết định chọn
lập trình web là định hướng sau này 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 tham gia xây dựng những ứng dụng E-comerce 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.


3

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ế đồng thời cũng cảm ơn anh Hải đã training backend cho em, giúp em tự xây được
một server demo đơn giản.
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.
Nguyễn Văn Hội
Thành phố HCM, ngày 20 tháng 7 năm 2020


4

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

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


5

Nội dung
LỜI MỞ ĐẦU ............................................................................................................................................... 2
LỜI CẢM ƠN ............................................................................................................................................... 3
NHẬN XÉT CỦA KHOA ............................................................................................................................ 4
CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP .............................................................................. 6
1.

Giới thiệu công ty TVN group ....................................................................................................... 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 ....................................................................................... 8

2.

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

Công cụ làm việc....................................................................................................................... 8

2.2

Front - end ................................................................................................................................. 9

2.3

Back-end ................................................................................................................................. 10

2.4 Nghiệp vụ công ty ........................................................................................................................ 12
3.

Thực hiện Project .......................................................................................................................... 13

4.

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

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG THỰC TẾ ............................................................................. 15
1.

Giới thiệu về Project: .................................................................................................................... 15

2.

Thực hiện: ...................................................................................................................................... 17

3.

Kế hoạch: ....................................................................................................................................... 17

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


6

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:


7

-

-

https://www. alohawaiians.com

-

https://www. polynesianprint.com

-

https://www. 1stscotland.com

-

…


8

CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “ Lập trình Fullstack Javascript Nodejs – Vuejs” 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 ở front-end lẫn back-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.
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 hoặc một số công cụ nâng cao như Docker, …


9

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 Front - end
Thời gian : 14 ngày (2 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 …

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.


10

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 2 ứng dụng demo viết bằng vuejs là Todo list và Wallet
Manager.

2.3 Back-end
Thời gian : 21 ngày (3 tuần)
Nội dung : Làm quen với Nodejs với Koa, Graphql, PostgreSQL và hệ thống api của
shopify.
-

Tìm hiểu về nodejs
o Kiến trúc của nodejs
o Tìm hiểu về moudle
o Tìm hiểu về npm
o Cách sử dụng callback, event loop, eventEmmiter
o Khái niệm Buffer, Stream
o Cách đọc ghi file
o …

-

Tìm hiểu về framework Koa
o Cách cài đặt
o Tìm hiểu các tính năng nổi bật của Koa cũng như so sánh Koa với các
framework khác như express, Hapi, Meteor, ..
o Tìm hiểu về Context để handle phần lõi application
o Tìm hiểu cách xử lý request và trả về respone cho client


11

o Tìm hiểu về các thư viện middleware của Koa như: Validatation request,
session manager, log development, … đặc biệt là tìm hiểu passport để ứng

dụng giải quyết các vấn đề về auth, login, hay các service bên thứ 3 như
google, facebook, …
o …
-

Tìm hiểu về PostgreSQL
o Cách cài đặt và kết nối
o Tìm hiểu về những syntax cơ bản
o Tìm hiểu cách viết các câu lệnh query cơ bản như: Select, Insert, Update,
Delete, Join, …
o …

-

Tìm hiểu về Graphql
o Tìm hiểu khái niệm, syntax và các thành phần cơ bản, những tính năng nổi
trội trong Graphql
o So sánh sự giống và khác nhau giữa Rest Api và graphql
o Ưu và nhược điểm khi sử dụng graphql
o Tìm hiểu cấu trúc của graphql: schema, queries, resolvers.

-

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 …

-

Tìm hiểu về heroku
o Tìm hiểu về khái niệm và cách hoạt động của heroku
o Tìm hiểu những tính năng cơ bản của heroku
o Tìm hiểu cách deloy đơn giản một server nodejs

-

Tìm hiểu về hệ thống API của shopify
o Tìm hiểu các Rest Api hiện đang có trong document của shopify


12

o Tìm hiểu các Graphql hiện đang có 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 phía back-end và
những yêu cầu 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 server miễn phí của
heroku từ những kiến thức đã được tìm hiểu.

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.


13

-

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 6 tuần được training và thực hành thì thực tập sinh đã nắm được những
kiên thức cơ bản về phía front-end lẫn back-end. Để 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 độ hồn

hướng dẫn

thành

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

1

của công ty.
-

Làm quen với các
công cụ làm việc
trong cơng ty.

2-3

4-5-6

Lập trình Front-end

Tuấn,

Anh Thơng
Lập trình Back-end
-

6

Anh

Làm

quen

Anh Hải
với Anh Tuấn

trello, setup môi
trường để làm việc

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


14

với dự án của cơng
ty.
7-8

Quy trình làm việc.

Tiến hành xây dựng Anh
ứng dụng thực tế.

Tuấn,

Anh Hải


15

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 UI, 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. Đồng

thời những công cụ được dùng chung trong đây có thể kể đến như Graphql,
Google Tag, Facebook pixel, …
Một số hình ảnh của project:


16


17

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à:
-

Trần Ngọc Hưng

-

Nguyễn Hữu Lai

Đồng thời là sự giúp đỡ nhiệt tình của leader là 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 apllo graphql để lấy dữ liệu từ shopify về

-

Đổ dữ liệu vào các component đã xây dựng


18

-

Sử dụng vuex để quản lý các state

-

Tạo các function để transform dữ liệu trả về

Kết quả: Hoà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 quá 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.


19

TÀI LIỆU THAM KHẢO
Document Shopify:
/>Document Vuejs:
/>Document Nuxtjs:
/>Document vue apollo graphql:
/>Document Graphql:
/>Document Koa:
/>