báo cáo thực tập xây dựng WEBSITE e COMMERCE
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.65 MB, 24 trang )
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 E-COMMERCE
Công ty thực tập
: Designveloper (DSV)
Người phụ trách
: Hoàng Văn Dũng
Thực tập sinh
: Nguyễn Tây Trung
TP. Hồ Chí Minh, tháng 1 năm 2021
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
2
LỜI MỞ ĐẦU
E-Commerce (Electronic commerce) hay còn được gọi là thương mại điện tử – là các
hoạt động mua hoặc bán các sản phẩm thông qua dịch vụ trực tuyến. Thương mại điện tử tiện
lợi đến mức người tiêu dùng có thể mua bán sản phẩm trên tồn thế giới ở bất kì thời gian nào.
Đây chính là điều mà các cửa hàng truyền thống khơng thể có được. 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.
Bằng việc lựa chọn và thực hiện đề tài “Xây dựng website E-Commerce”, chúng em
muốn tìm hiểu và đưa ra một giải pháp tốt nhằm giải quyết công việc bán hàng trực tuyến.
Thông qua việc thực hiện xây dựng website này chúng em học hỏi hiều kiến thức và hiểu được
quy trình cơ bản để xây dựng một website hồn chình. 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 chun 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: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
3
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Designveloper Việt Nam đã 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, 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 thử
hoàn chỉnh. 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 Dũng, đã training cho em về HTML/CSS, ReactJs và MeteorJS,
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 và hỗ trợ chúng em rất nhiều
về các vấn đề trong cơng ty, giúp em hịa nhập và thích nghi nhanh hơn với văn hóa của công ty,
cảm ơn anh Nhật đã chỉ dẫn chúng em về cách làm báo cáo, lên kế hoạch, và debug code, những
kỹ năng không thể thiếu của 1 developer; cảm ơn chị My, anh Nhật, đã 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.
Nguyễn Tây Trung
TpHCM, ngày 11 tháng 7 năm 2021
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
4
NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
5
MỤC LỤC
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 về công ty Designveloper.......................................................................6
2. Sản phẩm của cơng ty..............................................................................................7
Chương 2: Nội dung thực tập.......................................................................................10
1.
2.
3.
4.
Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty.........................................10
Nghiên cứu kỹ thuật..............................................................................................10
Thực hiện project...................................................................................................13
Lịch làm việc.........................................................................................................14
Chương 3: Chi tiết về project.......................................................................................15
1. Giới thiệu về project..............................................................................................15
2. Nội dung................................................................................................................15
3. Thực hiện..............................................................................................................16
4. Quá tình thực hiện.................................................................................................16
5. Một số hình ảnh giao diện của ứng dụng...............................................................17
TÀI LIỆU THAM KHẢO..............................................................................................23
TỔNG KẾT....................................................................................................................24
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
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à công ty phát triển phần mềm và ứng dụng hàng đầu tại Thành
phố Hồ Chí Minh, Việt Nam, được thành lập vào năm 2013 từ một tập thể trẻ và đầy
nhiệt huyết các lập trình viên web, mobile; chuyên viên thiết kế UI/UX và các
chuyên gia VOIP.
Designveloper có văn phịng đặt tại 144 Nguyễn Thái Bình, Quận 1. Với sứ
mạng/nhiệm vụ của Designveloper là giúp các doanh nghiệp và start-up biến các ý
tưởng thành sản phẩm thật sự. Designveloper có các lập trình viên chun nghiệp
trong Java, Python, GoLang, C++, PHP, Angular, NodeJS, ReactJS và React Native.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
7
2. Sản phẩm của công ty
1. LuminPDF
LuminPDF là một dịch vụ lưu trữ và tích hợp tệp PDF được phát triển bởi
Designveloper. LuminPDF cho phép người dùng chỉnh sửa và lưu trữ tệp PDF trên
cả ứng dụng di động và website, đồng bộ hóa tệp PDF trên các thiết bị, và chia sẻ
tệp PDF với mọi người. Hiện LuminPDF đã đạt được 22 triệu người dùng.
2. Swell & Switchboard
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
8
Swell & Switchboard là một 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
thành tựu này, Designveloper đang phát triển nâng cao mơ hình của sản phẩm để
đạt độ phủ sóng ra tồn thế giới.
3. Joyn’it
Nền tảng Joyn’it cung cấp các dịch vụ dành riêng cho cộng đồng để tạo sự kiện
dễ dàng và thông báo cho thành viên các sự kiện sắp diễn ra
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
9
4. Bonux
Bonux là một dự án xây dựng ví tiền điện tử với các tính năng lưu trữ, quản lý và
thực hiện giao dịch cho người sử dụng. Thiết kế giao diện UI-UX và một số kỹ
thuật khác đã được áp dụng vào quá trình phát triển dự án.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
10
Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Xây dựng website E-Commerce” 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 game 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ộ công ty, Boon – sản phẩm của công ty dùng để
nhân viên tặng điểm cho nhau, 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 dùng các IDE.
2.2. Tìm hiểu về ReactJS
Thời gian : 2 ngày
Nội dung : Được training về các khái niệm và thuật ngữ của ReactJS
- JSX là một cú pháp mở rộng cho JavaScript. Reactjs khuyến khích người dùng
sử dụng JSX với React để mô tả giao diện (UI). JSX có thể trơng giống Ngơn ngữ
Khn mẫu (Template language), nhưng JSX đi kèm với tồn bộ tính năng của
JavaScript.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
11
-
Component. React được xây dựng xung quanh các component, chứ không dùng
template như các framework khác. Trong React, chúng ta xây dựng trang web sử
dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một
component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong
một component lại có thể chứa thành phần khác. Mỗi component trong React có
một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component
dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng
giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn
giản chỉ cần một method render. Có rất nhiều methods khả dụng khác,
nhưng render là method chủ đạo. Có 2 loại component: Functional và Class
Component.
- Props: giúp các component tương tác với nhau, component nhận input gọi là
props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI
Thực hiện :
- Đọc documentation từ trang chủ React và một vài bài viết tham khảo của các
blogger trên Viblo.
- 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.
Tìm hiểu về Bootstrap
Thời gian : 1 ngày
Nội dung : Được training về cãc kĩ thuật 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 người
dùng dễ dàng, thuận tiện và nhanh chóng hơn.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
12
-
Lí do nên dùng Bootstrap:
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.
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.
Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt
(Chrome, Firefox, Internet Explorer, Safari, and Opera). Tuy nhiên, với IE
browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên. Điều này vô cùng dễ hiểu vì
IE8 khơng support HTML5 và CSS3.
Thực hiện :
-
Đọc documentaion của Bootstrap.
Làm bài thực hành để củng cố kiến thức.
Hỏi mentor khi có thắc mắc.
Kết quả:
2.4.
-
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.
Tìm hiểu về MeteorJs và MongoDB
Thời gian : 2 ngày
Nội dung : Được training về cãc kĩ thuật cơ bản để có thể làm ra một backend đơn
giản
-
Meteor là một 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 theo thời gian thực. Nó đảm bảo việc đồng bộ thơng tin giữa
cơ sở dữ liệu của ứng dụng và giao diện người dùng.
-
Vì được xây dựng trên nền NodeJS nên Meteor sử dụng JavaScript trên cả client
và server. Hơn thế nữa, Meteor cịn cho phép chia sẻ code giữa hai mơi trường
này.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
13
-
Một vài ưu điểm của Meteor:
Không cần quá nhiều kiến thức lập trình, chỉ cần HTML, CSS,
Javascript, chút kiến thức về OOP và database là được. Mọi thao tác
tới DB đều thông qua các API của Meteor, viết bằng Javascript. Do
đó mà người dùng cũng khơng cần biết viết câu lệnh SQL.
Nhanh chóng tạo ra sản phẩm.
Có vô số module đã viết sẵn, 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 gắn module vào và chỉnh sửa một chút theo ý mình
là có thể sử dụng được.
Tích hợp nhiều cơng nghệ: NodeJS, Express, MongoDB,
WebSocket, Phonegap.
Code ít, được nhiều. Deploy rất nhanh.
Thực hiện :
-
Đọc documentaion của Meteor.
Tham gia đầy đủ các buổi training.
Tìm kiếm trài liệu trên mạng và xem các tutorial.
Kết quả:
-
Hiểu được những khái niệm cơ bản trong lập trình Backend với Meteor
3. Thực hiện project
Sau một tuần đầu được training và thực hành, thực tập sinh đã nắm được những kiến
thực cơ bản về ReactJS, Meteor và Bootstrap. 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
Người
Mức độ
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
14
hướng dẫn
-
1
2
3
4-7
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 Meteor và MongoDB
- Thực hành một số ví dụ cơ bản
- Lên kế hoạch thực hiện dự án
- Thực hiện dự án
- Review code
- Test code
Giai đoạn kế thúc, báo cáo:
Fix bug.
Demo code.
Báo cáo cuối đợt thực tập.
Bài test củng cố kiến thức
Chị Trang
hoàn
thành
100%
Anh Hoàng 100%
Văn Dũng
Anh Hoàng 100%
Văn Dũng
Anh Hoàng 100%
Văn Dũng
Anh Hoàng 100%
Văn Dũng
Chương 3: Chi tiết về project
1. Giới thiệu về project
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
15
Với đề tài “Xây dựng Website E-Commerce”, thực tập sinh phải xây dựng một website
gồm 2 phần client và admin. Phía client cho phép người dùng tìm kiếm sản phẩm và tạo
đơn hàng. Phía admin cho phép người dùng quản lý đơn hàng và quản lý sản phẩm.
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 lý
(admin)
đơn
hàmg Cho phép admin quản lý đơn hàng, tìm kiếm,
thay đổi trạng thái đơn hàng
8
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
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
16
3. Thực hiện:
Sinh viên: Nguyễn Tây Trung.
Với sự giúp đỡ nhiệt tình của mentor Hồng Văn Dũng và 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ệ phù hợp với project
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 DB + 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.
5. Một số hình ảnh giao diện của ứng dụng:
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
17
-
Homepage:
-
Form đăng nhập:
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
18
-
Form đăng ký:
-
Danh sách sản phẩm:
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
19
-
Chi tiết sản phẩm:
-
Trang giỏ hàng và đặt hàng
-
Quản lý đơn hàng của admin
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
20
-
Quản lý sản phẩm
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
21
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
22
TÀI LIỆU THAM KHẢO
For React
/> />
For HTML/CSS
/>
For Bootstrap
/>
For Meteor
/> />
For MongoDB
/>
More:
/>
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
23
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
24
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 hoàn thành một
website E-commerece bằng Reactjs và Meteor. Web đã có đầy đủ các tính năng đã đề ra ban
đầu. 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 E-commerce này. Cảm ơn anh Hoàng Văn Dũng đã giúp em hoàn thành bài
báo cáo này.
Người phụ trách: Hoàng Văn Dũng
Sinh viên: Nguyễn Tây Trung
