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

Đặ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ănviệc làm quen với mô

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)

Thực tập sinh : Nguyễn Tây Trung

TP Hồ Chí Minh, tháng 1 năm 2021

LỜI MỞ ĐẦU

E-Commerce (Electronic commerce) hay còn được gọi là thương mại điện tử – là cáchoạ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ệnlợi đến mức người tiêu dùng có thể mua bán sản phẩm trên toà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 doanhthô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ệcxâ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ầuthiế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 emmuố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 đượcquy trình cơ bản để xây dựng một website hoàn chình Vì lý do này, em quyết định chọn lậptrì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ựctậ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

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ôngsứ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ănviệ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ượtqua 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ềukiện em làm bài báo cáo này

Nguyễn Tây TrungTpHCM, ngày 11 tháng 7 năm 2021

NHẬN XÉT CỦA KHOA

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 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 10

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

3 Thực hiện project 13

4 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

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ànhphố Hồ Chí Minh, Việt Nam, được thành lập vào năm 2013 từ một tập thể trẻ và đầynhiệt huyết các lập trình viên web, mobile; chuyên viên thiết kế UI/UX và cácchuyê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 chuyên nghiệptrong Java, Python, GoLang, C++, PHP, Angular, NodeJS, ReactJS và React Native

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

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à đánhgiá 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ớithà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 toà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

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

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ênthực tập được đào tạo toà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ủacông ty

Ngoà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 tynhư 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ôngviệc…

Kết quả: Hiểu thêm về công ty Designveloper, quá 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ữKhuôn mẫu (Template language), nhưng JSX đi kèm với toàn bộ tính năng củaJavaScript

- 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ộtcomponent ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trongmộ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 componentdựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúnggiúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơngiả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à ClassComponent

- 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

- 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

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúngchuẩn, dễ đọc, dễ hiểu

2.3 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ácthiế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ườidùng dễ dàng, thuận tiện và nhanh chóng hơn

- 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ụngbootstrap 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ếtkiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện vớicá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 IEbrowser, 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

- 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ụ trongcông việc

2.4 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ườngnày

- 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áctớ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, … trongMeteor chỉ cần gắn module vào và chỉnh sửa một chút theo ý mình

- Đọ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

Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

3 - Tìm hiểu Meteor và MongoDB

- Thực hành một số ví dụ cơ bản

Anh HoàngVăn Dũng

- Báo cáo cuối đợt thực tập

- Bài test củng cố kiến thức

Anh HoàngVăn Dũng

100%

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

1 Giới thiệu về project

Với đề tài “Xây dựng Website E-Commerce”, thực tập sinh phải xây dựng một websitegồ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

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

8 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: Nguyễn Tây Trung

Với sự giúp đỡ nhiệt tình của mentor Hoàng Văn Dũng và các anh chị dev trong công ty

4 Quá 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:

- Homepage:

- Form đăng nhập:

- Form đăng ký:

- Danh sách sản phẩm:

- Chi tiết sản phẩm:

- Trang giỏ hàng và đặt hàng

- Quản lý đơn hàng của admin

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

TÀI LIỆU THAM KHẢO

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ộtwebsite 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ểhoà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àibáo cáo này