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

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 hoàn chình.. Đặc biệt cảm ơn chị Trang đã hướng dẫn, g

Trang 1

Dương Thạnh Tín

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 Đình Sơn Thực tập sinh : Dương Thạnh Tín

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

TP.HCM, 25/12/2019

Trang 2

MỞ ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của khoa học công nghệ, Công nghệ Thông tin là một trong những ngành có vị thế dẫn đầu và có vai trò rất lớn trong sự phát triển chung đó Các ứng dụng của công nghệ thông tin được áp dụng trong mọi lĩnh vực nghiên cứu khoa học cũng như trong mọi lĩnh vực của đời sống Là một phần của Công nghệ Thông tin, Công nghệ web đang có được sự phát triển mạnh mẽ và phổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn

Bằng việc lựa chọn và thực hiện đề tài “Xây dựng website ecommerce”, 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 hoàn chình

Website bán hàng giúp cho khách hàng những lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm thông qua chức năng tìm kiếm và giỏ hàng Các thông tin về sản phẩm được hiển thị chi tiết với từng sản phẩm, từ đó khách hàng dễ dàng nhận biết và lựa chọn được thứ mình cần Tuy chỉ là một đồ án nhỏ nhưng nó đã giúp chúng em học tập được nhiều kiến thức và công nghệ mới

Trang 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 bán hàng 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 chị Trang đã hướng dẫn, giúp đỡ cho chúng 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 anh Sơn ,

đã training Nodejs, Reactjs và hỗ trợ chúng em rất nhiều về các vấn đề kỹ thuật về Front-end và Back-end trên Webiste, cảm ơn anh Sơn, đã chỉ dẫn chúng em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu; cảm ơn các anh chị trong công ty đã hỗ trợ và giúp đỡ em khi em mới vào công ty thực tập để có thể thích nghi với một môi trường mới

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

Dương Thạnh Tín

TP Hồ Chí Minh, ngày 28 tháng 7 năm 2020

Trang 4

NHẬN XÉT CỦA KHOA

Trang 5

Mục lục

MỞ ĐẦU 1

LỜI CẢM ƠN 3

Chương I: Giới thiệu công ty thực tập 6

Giới thiệu công ty 6

Sản phẩm của công ty 6

2 Chương II: Nội dung thực tập 7

Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7

Nghiên cứu kĩ thuật 7

2.2.1 Các công cụ làm việc 7

2.2.2 Tìm hiểu về giao diện Website 8

2.2.3 Tìm hiểu về Bootstrap 9

2.2.4 Tìm hiểu về JavaScript 10

2.2.5 Tìm hiểu về Front-end với Reactjs 10

2.2.6 Tìm hiểu về Back-end với Nodejs 11

Thực hiện project 11

Lịch làm việc 12

3 Chương III: Chi tiết về Project 13

Giới thiệu về Website 13

Các tính năng chính 13

Thực hiện 14

Quá trình thực hiện 14

TÀI LIỆU THAM KHẢO 16

Trang 6

TỔNG KẾT 17

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

Giới thiệu công ty

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 Với quy trình làm việc chuyên nghiệp, chúng tôi cam kết cung cấp các dịch vụ với chất lượng tốt nhất và mức giá hợp lý

Sản phẩm của công ty

Designveloper chuyên thiết kế Website và App Mobile Designveloper đưa ra giải pháp công nghệ cho start-up và doanh nghiệp trong mọi lĩnh vự như năng lượng, tài chính, logistic, y tế, truyền thông, giáo dục, vận tải, Chúng tôi đồng hành từ lúc dự án mới chỉ là ý tưởng cho đến khi hoàn thiện sản phẩm và tạo thành một thương hiệu Nhờ đó công ty đã có những dự án thành công: LuminPDF, Swell & Switchboard, Walrus Education, Joyn’it, Bonux,

Trang 7

2 Chương II: Nội dung thực tập

Đợt thực tập với chủ đề “Xây dựng một Website Ecommerce” nhằm mục đích giúp sinh

viên thực tập được đào tạo toàn diện về Front-end và Back-end, đồ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 chuyên nghiệp

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

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 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, 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

Nghiên cứu kĩ thuật

2.2.1 Các công cụ làm việc

Trong thời gian này, Mentor đã 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ư Trello sử dụng trong làm việc nhóm và để theo dõi quá trình hoàn thiện của Website, Masttermost là phần mềm để trao đổi thông tin giữa các cá nhân với nhau

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

Trang 8

2.2.2 Tìm hiểu về giao diện Website

Các thành phần thường có trong trang web

cáo

form có thể dùng để tìm thông tin trong một trang, một site hay tất cả các site trên toàn cầu

gọi navigator là menu list cũng đúng

chứa các navigator Một website được cấu trúc chặt chẽ cần phải có header này

thông tin cần thiết: Contact us, Private policy, About us hay nối với các trang chuyên đề Mục đích của header và footer là giúp người xem không bị lạc hướng trong kho thông tin của bạn Nếu thiếu footer hay header, trang web trở thành trang cụt (orphan page)

thay đổi về nội dung

vào đó lưu lại trên trang web và đợi người khác trả lời, hưởng ứng Forum giúp nâng cao

kiến thức tập thể và hấp dẫn người xem

thông tin Chat không lưu lại trên trang web

Thực hiện:

Trang 9

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về 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

- Có được những kiến thức quan trọng cho việc lập trình Website sau này

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

2.2.3 Tìm hiểu về 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:

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

Trang 10

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

2.2.4 Tìm hiểu về JavaScript

Thời gian: 3 ngày (1 tuần)

- Các kiến thức cơ bản về Array, String, DOM, Object, Variable, Function, Scope, HTTP,

…

- Tìm hiểu về TypeScript, npm, ES6 và các vấn đề liên quan đến JavaScript

- Lập trình hướng chức năng

Thực hiện:

Kết quả:

- Có được những kiến thức quan trọng cho việc lập trình Website sau này

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

2.2.5 Tìm hiểu về Front-end với Reactjs

- Các kiến thức cơ bản về: Component, JSX, State, Props, Lifecycle Hooks, Styles, …

- Sử dụng Axios để tương tác với API

- Tìm hiểu các kiến trúc của Redux

- Sử dụng SCSS

Trang 11

Thực hiện:

Kết quả:

- Nắm được cách triển khai ứng dụng

2.2.6 Tìm hiểu về Back-end với Nodejs

- Các kiến thức cơ bản về Back-end: Middleware, route, Cookie, JWT, …

- Triển khai và sử dụng các packages

- Tìm hiểu về Express và thực hiện Website theo mô hình MVC

- Sử dụng Database: MongoDB

- Viết API

Thực hiện:

- Tham gia đầy đủ các buổi training

Kết quả:

- Nắm được cách triển khai ứng dụng

- Biết cách sử dụng MongoDB, Express và Nodejs

Thực hiện project

Sau khi đượ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ề cách lập trình Front-end và Back-end: Reactjs, Nodejs, Mongodb Các Mentor đã hướng dẫn thực tập sinh áp dụng các kiến thức đã học để thực hiện một project về Website Ecommerce

Trang 12

Lịch làm việc

Tuần Công việc Người hướng dẫn

Mức độ hoàn thành

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

1

- 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

- Tìm hiểu ngôn ngữ lập trình JavaScript, html, scss

Chị Trần Mai Bích Trang

2

- Tìm hiểu các kiến thức Front-end với Reactjs

- Thực hiện dự án

Anh Nguyễn Đình Sơn

3

- Tìm hiểu các kiến thức Back-end với Nodejs

- Thực hiện dự án

Anh Nguyễn Đình Sơn

4

- Thực hiện dự án Anh Nguyễn Đình

Sơn

Trang 13

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

Giới thiệu về Website

Với đề tài “Xây dựng Website Ecommerce” giúp cho khách hàng những lựa chọn

linh hoạt và tiện lợi trong việc tìm mua sản phẩm thông qua chức năng tìm kiếm và giỏ hàng Các thông tin về sản phẩm được hiển thị chi tiết với từng sản phẩm, từ đó khách hàng

dễ dàng nhận biết và lựa chọn được thứ mình cần

Các tính năng chính

Vì đây là nội bộ của công ty Designveloper nên em chỉ khái quát về các yêu cầu chức năng của trang Web

Danh sách tác nhân của hệ thống:

1 Người quản trị (Admin) Người quản trị hệ thống

2 Người dùng Khách hàng có nhu cầu mua hàng truy

cập vào hệ thống

1 Đăng nhập Cho phép người truy cập đăng nhập vào

hệ thống Dựa vào vai trò của user đăng nhập mà có thể giới hạn các thao tác với

hệ thống

2 Đăng ký Cho phép người truy cập tạo tài khoản và

có thể đăng nhập vào hệ thống với thoogn tin đăng nhập lúc đăng ký

3 Cập nhật thông tin

profile

Cho phếp người dùng sửa đổi các thông tin cá nhân phù hợp trên hệ thống

Trang 14

4 Quản lý sản phẩm Thực hiện thêm/xoá/cập nhật/xem các

sản phẩm của hệ thống

5 Quản lý user Thực hiển thêm xóa cập nhật các user

đăng nhập vào hệ thống

6 Quản lý đơn đặt hàng Cho phép người dùng xem các đơn đặt

hàng sau khi đăng nhập vơi vai trò admin

8 Xem doanh sách các sản

phâm bày bản

Cho phép người dùng xem danh sách các sản phẩm phù hợp theo loại

9 Thống kê doanh thu Thống kê doanh thu của quán

10 Quản lý giỏ hàng Thực hiện thêm/xoá/cập nhật/xem các

sản phẩm trong giỏ hàng của hệ thống

Thực hiện

Sinh viên: Dương Thạnh Tín

Với sự giúp đỡ nhiệt tình của anh Nguyễn Đình Sơn

Quá trình thực hiện

Giai đoạn 1:

- Trao đổi với mentor

- Tìm hiểu và chọn công nghệ phù hợp với project

Kết quả: Front-end là Reactjs, Back-end là Nodejs và cơ sở dữ liệu là MongoDB

Giai đoạn 2:

- Thiết kế Website và xây dựng các chức năng chính của Website

- Demo cho mentor về những kết quả mình đã làm

- Fix một số lỗi trong quá trình thực hiện

Kết quả: Công việc được hoàn thành một cách nhanh chóng hơn và hoàn thiện hơn

Giai đoạn 3:

- Được mentor yêu cầu thêm chức năng và chỉnh sửa giao diện

- Fix một số lỗi trong quá trình thực hiện

Trang 15

Kết quả: Hoàn thành việc triển khai dự án và một số chức năng chính nhưng vẫn còn phát

sinh lỗi trong quá trình thực hiện

Trang 16

TÀI LIỆU THAM KHẢO

[1]:https://scotch.io/tutorials/build-and-understand-a-simple-nodejs-website-with-user-authentication

[2]: https://hackernoon.com/how-to-build-a-website-for-your-band-using-node-js-a7c856266c [3]: https://www.tutorialspoint.com/mongodb/index.htm

[4] https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

[5] https://www.mongodb.com/

[6] https://nodejs.org/en/

[7] https://reactjs.org/

[8] https://es6.io/

[9] http://expressjs.com/

Trang 17

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, em đã được trải nghiệm và làm quen được với một môi trường làm việc vô cùng chuyên nghiệp Em đã được học hỏi nhiều kiến thức và nhiều kĩ năng quan trọng để có thể thích nghi nhanh chóng với công việc của một lập trình viên chuyên nghiệp

Chân thành cảm ơn các anh chị trong công ty Designveloper đã hỗ trợ và giúp đỡ em trong thời gian qua Em xin chân thành cảm ơn anh Nguyễn Đình Sơn đã giúp đỡ em trong thời gian thực tập ở công ty

Định dạng
Số trang	17
Dung lượng	409,86 KB