Đồ án tìm hiểu về reactjs và xây dựng website bán hàng

Cung cấp đầy đủ thông tin, hình ảnh về sản phẩm nội thất Một thiết kế website nội thất, giúp khách hàng có cái nhìntổng quan về doanh nghiệp, sản phẩm thông qua việc cung cấp đầy đủ các

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

CHƯƠNG 1 GIỚI THIỆU CHUNG

1.1 Tính cấp thiết của đề tài

Nhu cầu sử dụng trong xã hội luôn là động cơ chính thức đẩy sản xuất, như chung ta cũng biết được việc thiếu thông tin cho công đoạn đáp ứng cung cầu làm cho việc đưa sản phẩm đến tay người tiêu dùng trở nên khó khăn và gây nhiều lãng phí cho xã hội Bên cạnh đó việc phổ biến sử dụng Internet đã tạo ra một bước ngoặt mới trong định hướng phát triên ngành Công Nghệ Thông Tin của nước ta cùng với nhu cầu sử dụng các phương tiện truyền thông để trao đổi thông tin ngày cáng phát triển mạnh Từ thực tế đó việc đưathông tin đáp ứng các nhu cầu của mọi người và hổ trợ cho việc mua bán diễn ra một cách nhanh chóng, tiết kiệm đã trở nên vô cùng cấp thiết Mua bán qua mạng cũng là một xu thế hiện nay, haycòn gọi là thương mại điện tử, và đây cũng là một mảnh đất mới chothị trưởng hàng tiêu dùng trong giai đoạn phát triển kinh tế ở nước ta

Việc bạn các thể dung dung ngồi nhà mà du ngoạn từ của hàngnày sang cửa hàng kia đã trở thành hiện thực Ngày nay bất cứ hànghóa nào, bạn đều có thể đặt mua qua mạng internet

Trong số các hàng hóa được mua bán qua internet thì nội thất cũng năm trong đó Nội thất là mặt hàng cần thiết cho các gia đình,

vì thế khi muốn mua trên mạng thì khách hàng chỉ cần ngồi nhà và

sẽ có người đến giao

Do đặc điểm mua bán trên Internet là người mua và người bán không hề gặp mặt nhau và người mua không thể kiểm tra trực tiếp hàng hóa Vì thế cần phải xây dụng một website đẹp mặt đầy đủ thông tin và sản phẩm, Cũng như các chức năng mua hàng,…

1.2 Mục đích của đề tài

Khách hàng có thể tìm kiếm thông tin về các sản phẩm của công

ty MTL

Khách hàng có thể đặt sản phẩm trực tuyến Website sẽ cập nhật thông tin đặt hàng này lên cơ sở dữ liệu, cho phép người quản trị được phân quyền thao tác các công việc sau :

 Tìm kiếm các đơn đặt hàng đã xác nhận hay chưa xác nhận

 Xác nhận đơn đặt hàng hợp lệ, chỉnh sửa thông tin khác hàng và thông tin đặt hàng

 Thống kê số lượng mua hàng của khách hàng

Thay đổi, thêm mới hoặc xóa bỏ thông tin hình ảnh về các sản phẩm công ty muốn giới thiệu cho khách hàng

Theo dõi tình hình liên lạc thông qua website của khách hàng,

để đáp ứng kịp thời nhu cầu của họ

Về tổ chức lưu trữ, thực hiện các yêu cầu sau :

 Thêm, xóa, sửa thông tin, hình ảnh về các sản phẩm do công ty tổ chức, phục vụ cho công tác quản lý, thống kê tình hình hoạt động của công ty

 Thêm xóa, sửa thông tin, hình ảnh về các sản phẩm

1.2 Công cụ phát triển.

a ReactJS

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ

dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng cácđoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

React là một thư viện UI phát triển tại Facebook để hỗ trợviệc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được

React được sử dụng tại Facebook trong production,

và www.instagram.com được viết hoàn toàn trên React

Ngoài ra trong đồ án sử dụng Redux để quản lý state của các component của website 1 cách hiệu quả

Giới thiệu Redux

Redux là 1 tool dùng để quản lý state cho các ứng dụng

Javascript Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test Redux ra đời lấy cảm hứng từ tư

tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậy

Redux thường dùng kết hợp với React

Hầu hết các lib như React, Angular, etc được built theo một cách sao cho các components đến việc quản lý nội bộ các state của chúng mà không cần bất kỳ một thư viện or tool nào từ bênngoài.

Nó sẽ hoạt động tốt với các ứng dụng có ít components nhưng khi ứng dụng trở lên lớn hơn thì việc quản lý states được chia sẻqua các components sẽ biến thành các công việc lặt nhặt

Trong một app nơi data được chia sẻ thông qua các

components, rất dễ nhầm lẫn để chúng ta có thể thực sự biết nơi mà một state đang live Một sự lý tưởng là data trong một component nên live trong chỉ một component Vì vậy việc sharedata thông qua các components anh em sẽ trở nên khó khăn hơn

Ví dụ, trong react để share data thông qua các components anh

em, một state phải live trong component cha Một method để update chính state này sẽ được cung cấp bởi chính component cha này và pass như props đến các components con

a.1.Actions

Actions đơn giản là các events Chúng là cách mà chúng ta send data từ app đến Redux store Những data này có thể là từ

sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission.

a.2.Reducers

Reducers là các function nguyên thủy chúng lấy state hiện tạicủa app, thực hiện một action và trả về một state mới Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một actionđược gửi đến store

a.3.Store

Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Bạn có thể access các state được lưu,update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods

b Netcore

ASP.NET Core là một open-source mới và framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile Ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên phiên bản đầy đủ của NET

Framework Nó được thiết kế để cung cấp và tối ưu

development framework cho những dụng cái mà được triển khai trên đám mây (clound) hoặc chạy on-promise Nó bao gồm các thành phần theo hướng module nhằm tối thiểu tài nguyên và chi phí phát triển, như vậy bạn giữ lại được sự mềm giẻo trong việc xây dựng giải pháp của bạn Bạn có thể phát triển và chạy những ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux Đồng thời nó đã trở thành một mã nguồn mở Đây là một thay đổi rất lớn và theo mình là quan trọng nhất của ASP.NET Core Điều mà trước đây khó có một lập trình viên nào có thể nghĩ đến Có lẽ đó cũng là một xu thế

mà các ngôn ngữ lập trình hiện nay đang hướng tới

PostgreSQL được thiết kế để chạy trên các nền tảng

tương tự UNIX Tuy nhiên, PostgreSQL sau đó cũng được điều chỉnh linh động để có thể chạy được trên nhiều nền tảng khác nhau như Mac OS X, Solaris và Windows

PostgreSQL là một phần mềm mã nguồn mở miễn phí Mãnguồn của phần mềm khả dụng theo license của PostgreSQL, một license nguồn mở tự do Theo đó, bạn sẽ được tự do sử dụng, sửa đổi và phân phối PostgreSQL dưới mọi hình thức

PostgreSQL không yêu cầu quá nhiều công tác bảo trì bởi

có tính ổn định cao Do đó, nếu bạn phát triển các ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác

CHƯƠNG 2 : PHÂN TÍCH THIẾT KẾ WEBSITE

Sơ đồ use case tổng quát:

2.1 Mô tả website

Hoạt động kinh doanh online sẽ giúp tăng hiệu quả,

doanh thu cho các doanh nghiệp linh doanh nội thất Hiện nay, nhiều chủ nội thất vẫn kinh doanh theo hình thức truyền thống

là chính Tuy nhiên nếu muốn mở rộng kinh doanh sang thị trường trực tuyến thì không thể thiếu được website nội thất Cóthiết kế website nội thất, giúp khách hàng có cái nhìn tổng quan, tăng doanh thu cho cửa hàng nội thất của bạn

Cung cấp đầy đủ thông tin, hình ảnh về sản phẩm nội thất

Một thiết kế website nội thất, giúp khách hàng có cái nhìntổng quan về doanh nghiệp, sản phẩm thông qua việc cung cấp đầy đủ các thông tin về giá cả, tính năng, hình ảnh của sảnphẩm nội thất Khi doanh nghiệp có một thiết kế website nội thất, mọi thông tin về sản phẩm nội thất sẽ được đăng tải đầy

đủ cùng với các hình ảnh về sản phẩm sẽ giúp khách hàng nắm được thông tin một cách đầy đủ, chính xác và rõ ràng

Việc nắm bắt đầu đủ thông tin về các sản phẩm nội thất

sẽ giúp khách hàng đưa ra lựa chọn chính xác cho nhu cầu của mình Bên cạnh đó thì khách hàng cũng có cái nhìn tổng quan

về các sản phẩm, so sánh những ưu, nhược điểm của từng sản phẩm khác nhau để đưa ra sự lựa chọn đúng đắn

Hoạt động mua bán, thanh toán dễ dàng

Ngoài việc cung cấp thông tin và hình ảnh một cách đầy

đủ, chính xác cho khách hàng thì việc có một thiết kế website nội thất sẽ giúp cho hoạt động mua bán, thanh toán dễ dàng hơn trước nhiều Nếu với hình thức kinh doanh truyền thống thìkhách hàng sẽ phải đến trực tiếp cửa hàng để xem sản phẩm thì hiện nay với một website nội thất việc mua bán trở nên dễ dàng hơn nhiều

Khách hàng sẽ không phải tới trực tiếp cửa hàng mà chỉ cần truy cấp vào website nội thất xem thông tin sản phẩm đã được đăng tải một cách đầy đủ, cụ thể và chính xác với hình

ảnh minh họa rõ ràng là khách hàng đã có thể chọn lựa được sản phẩm chất lượng, phù hợp với nhu cầu của mình Tiếp theo, việc đặt mua hàng cũng rất dễ dàng Chỉ cần một cú clickchuột vào nút “Mua hàn” trên website, sau đó lựa chọn hình thức thanh toán là khách hàng đã mua được sản phẩm Sản phẩm sau đó được giao đến tận tay khách hàng rất tiện lợi và nhanh chóng.

Tính tương tác giữa doanh nghiệp, khách hàng cao

Có thiết kế website nội thất, giúp khách hàng có cái nhìn tổng quan thông qua việc tương tác dễ dàng, thuận tiện trên website giứa doanh nghiệp và khách hàng Mọi thắc mắc của khách hàng về sản phẩm sẽ được giải đáp tận tình, chính xác, nhanh chóng

Hiện nay thì các website đều được tích hợp tính năng chat trực tuyến Khi khách hàng có thắc mắc về sản phẩm khi truy cập website sẽ hỏi trực tiếp qua hệ thống chat này và người quản trị website sẽ trả lời trực tiếp ngay cho khách hàng

để cung cấp thông tin ngay khi họ cần Chính vì tiện ích này giúp cho khách hàng cảm thấy hài lòng, được phục vụ chu đáo

sẽ giúp họ thoải mái hơn trong quá trình mua hàng khiến cho hiệu quả bán hàng của doanh nghiêp tăng

Tạo sự thu hút, chú ý cho khách hàng

Khi có một thiết kế website nội thất là doanh nghiệp đã tạo thêm sự thu hút, chú ý cho khách hàng giúp tăng thêm cơ hội bán hàng so với các hình thức kinh doanh truyền thông Để tăng sự thu hút thì khi thiết kế website có thể thêm vào các yếu tố như: âm nhạc, video… nhưng cũng không nên quá lạm dụng làm ảnh hưởng đến tốc độ tải trang

Với một thiết kế website nội thất, giúp khách hàng có cái nhìn tổng quan như vậy thì mỗi đơn vị, doanh nghiệp khi kinh doanhnội thất đền nên thiết kế web

2.2 Cơ cấu các bộ phận và nhiệm vụ cơ bản.

Cửa hàng gồm 3 bộ phận, hoạt động có mối liên quan chặc chẽ với nhau :

• Bộ phận quản lý (Admin) : Cập nhật sản phẩm, thêm tài khoản nhân viên bán hàng, duyệt các đơn hàng và chuyển qua cho bộ phận kho và giao hàng, đăng bài mới, hỗ trợ về website

• Bộ phận bán hàng : Tư vấn cho khách hàng, trả lời các thắc mắc của khách hàng khi khách hàng có yêu cầu, trả lời các

comment của khách hàng, báo cáo doanh số cho quản lý

• Bộ phận kho và giao : Báo cáo số lượng hàng trong kho cho quản lý, nhận hóa đơn từ quản lý và giao hàng cho khách

2.3 Quy trình xử lý

Sau khi khách hàng truy cập vào website, khách hàng có thể truy cập theo các mục trên menu theo sở thích Khách hàng xem cácsản phẩm mình muốn mua rồi thêm vào giỏ hàng bằng cách nhấn nút MUA NGAY Nếu sản phẩm đó hết hàng thì sẽ báo cho khách hàng để cập nhật qua sản phẩm khác Sau khi lựa hết các sản phẩm khách hàng bấm thanh toán để chuyển tới trang đặt hàng Để đặt hàng thì khách hàng phải đăng kí thành viên Sau khi đăng kí thành công thì đăng nhập và tiến hành thanh toán Có hai hình thức thanh toán chuyển khoản hoặc nhận hàng và thanh toán Thanh toán xongthì của hàng sẽ liên hệ với khách hàng sớm nhất để giao hàng đổi với chuyển khoản và thanh toán tại địa chỉ giao hàng đối với nhân hàng và thanh toán

Bộ phận quản lý : Sẽ cập nhật sản phẩm, số lượng, xác nhận đơn hàng đã giao hàng đã giao hoặc chưa giao, xuất hóa đơn và chuyển hóa đơn cho bộ phận kho – giao hàng xử lý

Bộ phận bán hàng : Khi khách hàng có thắc mắc về sản phẩm thì sẻ trả lời cho khách hàng, hướng dẫn khách hàng mua hàng

Bộ phận kho – giao hàng : Nhận đơn hàng từ bộ phẩn quản lý

để xử lý, cập nhật số lượng sản phẩm có trong kho cho quản lý để cập nhật lên website Giao hàng theo đơn đặt hàng

2.4 Phân tích chức năng.

2.4.1 Sơ đồ phân rả chức năng.

Các bước xây dựng gồm 3 bước

Xác định các chức năng chi tiết của hệ thống

Gom nhóm các chức năng chi tiết thành các chức năng to hơn: Gồm 5 bước

Bước 1: Trong bảng khảo sát chi tiết hệ thống hiện tại gạch chân tất cả các động từ+bổ ngữ liên quan đến công việc của hệ thốngBước 2: Trong danh sách các chức năng được chọn ở bước 1 tìm

Vẽ sơ đồ chức năng

Kí hiệu sử dụng :

Sử dụng hình chữ nhật đễ biểu diễn chức năng chi tiết của hệ thống Chức năng là công việc mà tổ chức cần làm và được phân theo nhiều mức từ tổng hợp đến chi tiết

Mỗi chức năng được phân rã thành các chức năng con Các chức năng con có quan hệ phân cấp với chức năng cha Biểu diễn:

Quản lý sản phẩm

2.4.1 Sơ đồ phân rã chức năng

Bộ phận quản lý

Quản lý giao diện :

 Thay đổi logo

 Thay đổi menu web

 Quản lý banner web

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

 Xác nhận đơn hàng

 Chi tiết đơn hàng

 Xóa đơn hàng đã giao

Quản lý tài khoản :

 Thêm tài khoản mới

 Xóa tài khoản

 Chỉnh sửa thông tin tài khoản

Bộ phận bán hàng

Trả lời tin nhắn khách hàng :

 Trả lời tin nhắn của khách hàng qua cổng chat

 Trả lời tin nhắn của khách hàng qua fb

 Nhập hàng xuất hàng theo yêu cầu của quản lý

 Kiểm tra số lượng hàng hóa trong kho báo cáo cho quản lý

2.4.2 Đắc tả chi tiết các chức năng trong web

Chức năng tìm kiếm

Đầu đềTên chức năng : Tìm kiếmĐầu vào : Các từ khóa tìm kiếm khách hàng nhập vào ( kí tự, số)

Đầu ra : Kết quả tìm kiếm chứa kí tự khách hàng tìm

Chức năng giỏ hàng

Đầu đềTên chức năng : Chức năng giỏ hàngĐầu vào : Sản phẩm có trong cơ sở dữ liệu của web Đầu ra : Danh sách các sản phẩm đã mua ( Hóa đơn )

Chức năng xóa giỏ hàng

Đầu đềTên chức năng : Xóa giỏ hàngĐầu vào : Sản phẩm có trong giỏ hàng (VD: Kem chống nắng)

Đầu ra : Giỏ hàng đã được xóa

2.5 Ngôn Ngữ Và Hề Điều Hành

2.5.1 Môi trường phát triển :

Hệ điều hành : Window 7,8,8.1,10 Pro

Hệ quản trị CSDL : Postgresql

Công cụ phân tích thiết kế : PowerDesigner

Công cụ xây dựng : Reactjs

Các trình duyệt web : Google Chrome, Cốc Cốc, Mozila FireFox,IE

2.5.2 Môi Trường Triển Khai :

Các trình duyệt web : Google Chrome, Cốc Cốc, Mozila FireFox,IE

Dịch vụ lưu trữ web : Web Hosting

Dịch vụ Domain

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ CSDL

3.1 Thiết kế CSDL

Dựa vào phần thiết kế ở chương 2 thì CSDL của website bán hàng sẽcó.

 Table BlogPost Tag

 Nhóm các Table Microsoft Identity

3.2 Chi tiết dữ liệu trong table.

Bảng Product

Bảng : ProductTên thuộc tính Diễn Giải Kiểu dữ

Mô tảKích cỡ

Intstringstringstringbytestringstringstring

Ràng buộcKhông ràngbuộcKhông ràngbuộcKhông ràngbuộcKhông ràngbuộc

Tag

Danh mụcTag

intint

Không ràng buộc

Không ràng buộc

Không ràng buộc

Khóa ngoại Khóa ngoại

tự

Bảng Categories

Bảng : BannerThuộc tính Diễn Giải Kiểu dữ liệu Loại dữ

Intstringbytedatetime

Ràng buộcKhôngràng buộcKhôngràng buộc

IntIntdatetime

Ràng buộcRàng buộcKhôngràng buộc

50 ký tự

50 ký tự

100 ký tự