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

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 WEBSITE ECOMMERCE

Công ty thực tập

: Designveloper (DSV)

Người phụ trách

: Nguyễn Xuân Thái

Thực tập sinh

: Phan Thanh Tùng

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

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


2

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển chóng mặt của ngành công nghệ thông tin và mạng internet,
hàng loạt ứng dụng của internet đã được ra đời, và thương mại điện tử (ecommerce) đã ra đời và
bùng phát mạnh mẽ. Hàng loạt sàn thương mại điện tử đã ra đời và thịnh hành ở Việt Nam. Có
thể nói, việc kinh doanh thông qua mạng internet đã và đang dần thay thế cho ngành bán hàng
truyền thống. Vì vậy, việc xây dựng và phát triển một nền tảng bán hàng trực tuyến khơng cịn
là một lợi thế mà là nhu cầu thiết yếu của mọi doanh nghiệp .
Ngành lập trình web được sinh ra là do nhu cầu giải trí của giới trẻ bằng những thiết bị
công nghệ mới nhất. Và cũng chính giới trẻ sẽ là nguồn nhân lực quan trọng cho việc phát triển
của ngành lập trình web sau này. Vì lý do này, em quyết định chọn lập trình web làm định
hướng cho việc học tập 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 được tham gia làm web trong một môi trường chuyên nghiệp, em có dự định là sẽ thực
tập trong hè. Vì vậy, em quyết định chọn Designveloper - 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.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Designveloper đã 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ể làm được một Website
thương mại điện tử. 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 Thái, đã training reactjs và meteor, 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ảm ơn chị Trang đã training, hỗ trợ chúng em rất nhiều về các vấn đề khi làm việc trong
công ty; cảm ơn anh Dương, đã chỉ dẫn chúng em về cách lên kế hoạch, những kỹ năng không
thể thiếu của 1 developer; cảm ơn các anh Sơn, anh Quý, đã giúp đỡ để có thể vượt qua thời
gian thực tập tại công ty.
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.
Phan Thanh Tùng
TpHCM, ngày 28 tháng 7 năm 2020

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


4

NHẬN XÉT CỦA KHOA

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

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

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


5

MỤC LỤC

MỤC LỤC.......................................................................................................................... 1
Chương 1: Giới thiệu công ty thực tập..........................................................................2
1. Giới thiệu về công ty Designveloper.......................................................................2
2. Sản phẩm của cơng ty..............................................................................................2
Chương 2: Nội dung thực tập.........................................................................................3
1.
2.
3.
4.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty...........................................3
Nghiên cứu kỹ thuật................................................................................................3
Thực hiện project....................................................................................................7
Lịch làm việc...........................................................................................................7

Chương 3: Chi tiết về project.........................................................................................9
1. Giới thiệu về Game.................................................................................................9
2. Thực hiện............................................................................................................... 11
3. Kế hoạch................................................................................................................11
TÀI LIỆU THAM KHẢO..............................................................................................13
TỔNG KẾT....................................................................................................................14

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


6

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

1. Giới thiệu công ty Designveloper
Designveloper là một công ty phát triển phần mềm được thành lập vào đầu năm
2013 ở Tp Hồ Chí Minh từ một tập thể các lập trình viên trẻ và đầy nhiệt huyết.
Designveloper có văn phịng đặt tại 144 Nguyễn Thái Bình, Quận 1. Với sứ mạng
giúp cho các doanh nghiệp start-up biến các ý tưởng thành sản phẩm thực sự, DSV
có đội ngũ lập trình viên chun nghiệp trong Java, Python, GoLang, NodeJS,
ReactJS và React Native.

2. Sản phẩm của công ty
1. LuminPDF
Lumin là 1 dịch vụ lưu trữ và tích hợp tệp PDF được phát triển bởi DSV. Lumin
cho phép người dùng chỉnh sửa và lưu trữ tệp PDF trên cả ứng dụng mobile và
website, đồng bộ hoá tệp PDF trên các thiết bị, và chia sẻ tệp PDF với mọi người.
Hiện Lumin đã đạt được 22 triệu người dùng

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


7

2. Swell & Switchboard
Swell & Switchboard là 1 nền tảng quản lý doanh nghiệp trong ngành công
nghiệp năng lượng mặt trời. Đến nay, nền tảng này đang được áp dụng và đánh
giá rất cao trong việc quản lý quy trình làm việc hàng ngày của khách hàng. Với

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


8

thành tựu này, DSV đang phát triển nâng cao mô hình của sản phẩm để đạt được
độ phủ sóng ra toàn thế giới

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


9

3. Walrus Education
Walrus là một nền tảng để kết nối sinh viên, giáo viên và trường học. Công nghệ
React, React Native và Nodejs đã được dùng để phát triển các ứng dụng web và
mobile cho nền tảng này. Nghiên cứu và thu thập các dữ liệu thích hợp để làm rõ

thông số kỹ thuật và để giúp cho khách hàng hiểu rõ những mong muốn của bản
thân.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


10

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Xây dựng website ecommerce” 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 web, đồ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 phần mềm chuyên nghiệ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 : 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, quá 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 email trong công
việc…
Kết quả : Hiểu thêm về cơng ty Designveloper, 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. Các công cụ làm việc
Thời gian : 1 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ư
Mattermost - sử dụng để giao tiếp nội bộ trong công ty, Boon – product của công ty
dùng để tặng điểm cho nhân viên trong công ty, Github – trang quản lý source 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, so với việc dung các IDE.
2.2. Tìm hiểu ngơn ngữ về Reactjs
Thời gian : 2 ngày
Nội dung : Được training về các khái niệm cơ bản và tối quan trọng của Reactjs, sử
dụng cho việc thiết kế UI.
- JSX = Javascript + HTML. Nó transform 1 element HTML về thành JS, giúp dev
có thể nhúng code HTML vào thẳng JS file thay vì phải chia thành 2 file độc lập

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


11

như lập trình web bình thường. Chính JSX là điểm đột phá giúp React là 1 thư
viện được sử dụng nhiều nhất của JS.
- Component :
Bên cạnh JSX, component là một khái niệm giúp React được ưa chuộng, bởi nó
giúp chia ui thành nhiều các phẩn nhỏ hơn và dev có thể tái sử dụng các
component ở nhiều trang khác nhau, thay vì phải code lại 1 thành phần giống
nhau nhiều lần. Nhờ đó dev có thể dễ dàng chia nhỏ 1 trang web và dễ dàng
debug.
- Props
Props là những giá trị input được truyền từ bên ngoài vào component và props là

thuộc tính read-only, có nghĩa là component chỉ được phép sử dụng giá trị đó và
khơng có quyền thay đổi giá trị của nó.
- State :
State là 1 object lưu trạng thái của component. Với những biến được sử dụng
trong trang web và có thể thay đổi trong quá trình sử dụng, những biến này phải
được lưu trữ trong state và không được phép thay đổi bằng cách gán trực tiếp giá
trị mới mà phải sử dụng hàm setState (class component) hoặc dùng useState
(function component)
Thực hiện :
- Đọc document từ trang chủ React và một vài bài viết tham khảo của các blogger.
- Tham khảo từ những chia sẻ của mentor.
Kết quả :
-

2.3.

Nâng cao kỹ năng lập trình với Reactjs
Có được những kiến thức quan trọng cho việc lập trình frontend với reactjs.
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 backend với Meteor và Mongodb
Thời gian : 2 ngày
Nội dung: Các kiến thức cơ bản về Meteor để có thể làm ra một backend đơn giản.
-

Khái niệm cơ bản về Meteor.
Meteor là 1 nền tảng được xây dựng dựa trên môi trường Nodejs cho phép tạo ra
các ứng dụng web thời gian thực. Nó đảm bảo việc đồng bộ thông tin giữa CSDL
của ứng dụng và giao diện người dùng.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


12

Vì được xây dựng trên nền nodejs nên Meteor sử dụng JS trên cả client và server.
Hơn nữa, Meteor còn cho phép chia sẻ code giữa 2 môi trường này.
Khác với một vài framework của js như Angular, Meteor không chỉ là 1
framework mà còn là cả 1 hệ sinh thái (ecosystem). Meteor cung cấp gần như toàn
bộ những thứ cần để làm 1 ứng dụng web/mobile:
• Phần frontend có thể sử dụng bất kỳ framework/library nào đang có của JS
như: React, Vue, Angular, ...
• Phần backend sử dụng Nodejs và Express để làm server, dùng MongoDB
làm database chính. Tuy nhiên, khơng cần phải tìm hiểu về nodejs hay
express mà chỉ cần code Meteor.
• Sử dụng hệ thống module tương tự npm, Maven hay Nuget.
• Một số tool để build/deploy web site và mobile app. Chỉ cần code 1 lần, có
thể deploy nó thành 1 web app hoặc build thành 1 mobile app.
Một vào ưu điểm giúp Meteor được ưa chuộng:
• Khơng cần q nhiều kiến thức về lập trình, chỉ cần biết về JS, một chút
kiến thức về OOP và database là dược. Mọi thao tác với database đều thông
qua API của Meteor, viết bằng JS, không cần phải sử dụng SQL.
• Nhanh chóng tạo ra sản phẩm: được các startup, các doanh nghiệp nhỏ ưa
chuộng
• Có vơ số module đã viết sẵn, nhờ đó chỉ cần gắn vào và sử dụng. Ví dụ
việc đăng nhập, phân quyền khá phức tạp trong C#, Java, ... trong Meteor
chỉ cần modile vào, chỉnh sửa lại để phù hợp với app là được.
• Tích hợp nhiều cơng nghệ: Nodejs, Express, MongoDB, Websocket,

Phonegap,...
• Code ít, được nhiều, deploy nhanh.
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.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


13

Kết quả :
2.4.

Hiểu được những khái niệm cơ bản trong lập trình backend với Meteor.

Tìm hiểu về Bootstrap
Thời gian : 1 ngày
Nội dung : Tìm hiểu về các kỹ thuật làm frontend với bootstrap
-

-

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ
dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các
thiết bị cầm tay như mobile, ipad, tablet, ...
Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons,

tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có
thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ
dàng, thuận tiện và nhanh chóng hơn.

-

Những điểm thuận lợi khi sử dụng bootstrap:
o Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và
Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng
bootstrap tốt.
o Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị
Iphones, tablets, và desktops. Tính năng này khiến cho người dùng tiết
kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với
các thiết bị điện tử, thiết bị cầm tay.

Thực hiện :
-

Làm ra các bài thực hành, kiểm tra kiến thức đã học

Kết quả:
-

Nâng cao kỹ năng lập trình với ngơn ngữ HTML, CSS.
Làm quen và biết được công dụng và cách sử dụng các công cụ phục vụ trong
công việc.

3. Thực hiện project

Người phụ trách: Nguyễn Xuân Thái

Sinh viên: Phan Thanh Tùng


14

Sau một tuần tìm hiểu về các kiến thức mới, thực tập sinh đã nắm được những kiến thực
cơ bản về Reactjs và Meteor. Trong 3 tuần còn lại, trainer đã hướng dẫn thực tập sinh áp
dụng những kiến thức đã học để thực hiện một project website ecommerce
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Tuần

Cơng việc
-

1

2
3
4
5
8

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 và Mattermost
- Tìm hiểu về Reactjs

- Thực hành Reactjs
- Làm bài test Reactjs
- Tìm hiểu về Meteor
- Thực hành một số vd cơ bản
- Lên kế hoạch
- Thực hiện dự án
- Review code
- Testing
Giai đoạn kết thúc, báo cáo :
- Fix bug
- Demo code
- Báo cáo cuối đợt thực tập.

Người hướng dẫn
Chị Trang

Mức độ hoàn
thành
100%

Anh Nguyễn Xuân 100%
Thái
Anh
Thái
Anh
Thái
Anh
Thái
Anh
Thái

Nguyễn Xuân 100%
Nguyễn Xuân 100%
Nguyễn Xuân 100%
Nguyễn Xuân 100%

Chương 3: Chi tiết về project
Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


15

1. Giới thiệu về game
Với đề tài “Xây dựng website ecommerce”, trainee phải phát triển một website
gồm 2 phần client và admin. Phía client cho phép người dùng lựa chọn linh hoạt
và tiện lợi trong việc tìm sản phẩm và đặt hàng. Phía admin cho phép người dùng
quản lý đơn hàng.
2. Nội dung:
1. Danh sách tác nhân của hệ thống:
STT

Tên tác nhân

Ý nghĩa

1

Người dùng (user)

Khách hàng có nhu cầu mua hàng truy cập vào
hệ thống

2

Người quản trị (admin)

Người quản trị hệ thống

2. Các tính năng chính:
STT

Use case

Ý nghĩa

1

Đăng
admin)

nhập

(user, Cho phép người dùng truy cập vào hệ thống.
Người dùng chỉ được yêu cầu đăng nhập khi
muốn đặt hàng

2

Đăng ký (user)

Cho phép người dùng tạo tài khoản với các
thông tin cung cấp cho hệ thống

3

Lọc sản phẩm (user)

Cho phép người dùng xem danh sách sản phẩm
và lọc sản phẩm theo các filter khác nhau

4

Giỏ hàng (user)

Cho phép người dùng thêm sản phẩm vào giỏ
hàng và quản lý giỏ hàng của mình

5

Đặt hàng (user)

Cho phép người dùng đặt hàng

6

Quản lý
(admin)

sản

phẩm Cho phép admin tìm kiếm/ thêm/ xố/ sửa thơng
tin của sản phẩm

7

Quản

đơn

hàmg Cho phép admin quản lý đơm hàng, tìm kiếm,

lý

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


16

8

(admin)

thay đổi trạng thái đơn hàng

Email

Gửi mail tới khách hàng khi đăng ký tài khoản,
đặt đơn hàng hoặc huỷ đơn hàng

3. Thực hiện
Sinh viên: Phan Thanh Tùng
Với sự giúp đỡ nhiệt tình của mentor Nguyễn Xuân Thái + các anh chị dev trong cơng
ty

4. Q trình thực hiện
Giai đoạn 1:
-

Trao đổi với mentor để thống nhất về công nghệ sử dụng
Tìm hiểu về cơng nghệ

Kết quả :
-

Sử dụng Reactjs + Meteor + MongoDB để phát triển ứng dụng

Giai đoạn 2:
-

Thiết kế giao diện cho phần client
Khởi tạo project Meteor + MongoDB

-

Trao đổi với mentor về CSDL + kế hoạch hoàn thành ứng dụng

Giai đoạn 3:
- Thiết kế giao diện cho phần admin

- Hoàn thiện database + Viết api
Giai đoạn 4:
- Bổ sung phần gửi email
- Fix bug và hoàn thành ứng dụng
- Demo cho mentor
Kết quả : Hoàn thành việc phát triển ứng dụng theo các yêu cầu đề ra đúng thời hạn.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


17

5. Một số hình ảnh giao diện của ứng dụng
- Header:

-

Footer:

-

Homepage:

-

Đăng nhập:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng

18

-

Đăng ký:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


19

-

Danh sách sản phẩm:

-

Chi tiết sản phẩm:

-

Giỏ hàng:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng

20

-

Trang đặt hàng:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


21

-

Quản lý đơn hàng:

-

Cập nhật thông tin đơn hàng:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


22

-

Quản lý sản phẩm:

-

Thêm sản phẩm:

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


23

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng


24

TÀI LIỆU THAM KHẢO

For React
/>
For Meteor
/>
For MongoDB
/>
More:
/> />
Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng

25

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, em đã kịp hoàn thành một website
ecommerce bằng Reactjs + Meteor. Web đã có được một vài tính năng như u cầu đề ra. Do
thời gian có hạn nên tính năng web cịn đơn giản, hình ảnh chưa được đẹp như mong đợi.
Nhưng do web 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 Designveloper để em có thể
hồn thành website này.

Người phụ trách: Nguyễn Xuân Thái
Sinh viên: Phan Thanh Tùng