Phần 1: Phân tích yêu cầu sử dụng, xác định các yêu cầu chức năng và phi chức năng

Phân tích yêu cầu sử dụng

Đề tài phát triển ứng dụng web cho hệ thống bán hàng online

Yêu cầu nghiệp vụ

Sơ đồ nghiệp vụ

Sơ đồ nghiệp vụ

Các yêu cầu nghiệp vụ

Bước 1: Tạo sản phẩm

• Bên bán tạo sản phẩm muốn bán
• Có thể thêm các ưu đãi cũng như giảm giá

Bước 2: Khách hàng mua hàng

• Khách hàng thêm sản phẩm vào giỏ hàng
• Xác nhận phương thức thanh toán, địa chỉ nhận hàng
• Xác nhận đặt mua sản phẩm

Bước 3: Duyệt sản phẩm

• Xác nhận hàng tồn kho
• Duyệt sản phẩm
• Xác nhận lên đơn hàng

Bước 4: Liên hệ bên vận chuyển

• Bên bán liên hệ bên vận chuyển và tiến hành giao sản phẩm

Bước 5: Bên vận chuyển duyệt

• Bên vận chuyển duyệt sản phẩm cần giao
• Lên lịch giao sản phẩm và thông báo cho khách hàng

Bước 6: Nhận hàng

• Khách hàng nhận hàng theo lịch đã hẹn
• Thanh toán theo phương thức đã chọn trước
• Xác nhận đơn hàng đã giao
• Đánh giá sản phẩm

Bước 7: Nhân viên lưu các phản hồi

• Tên khách hàng
• Tên sản phẩm
• Ngày đánh giá
• Nội dung đánh giá

Yêu cầu chức năng

Các tác nhân hệ thống

• Khách hàng: Là người có nhu cầu mua sắm trực tuyến
• Nhân viên chăm sóc khách hàng: Là người tiếp thu đánh giá từ khách hàng,quản lý sản phẩm,lập báo cáo tổng kết hay đăng bài quảng cáo sản phầm.
• Nhân viên vận chuyển: Là người xác nhận đơn hàng đã được phê duyệt và giao hàng.
• Nhân viên quản trị hệ thống: Là người quản lý thông tin sản phẩm, xác nhận thông tin từ khách hàng, thực hiện lên lịch hẹn và liên hệ với bên vận chuyển khi đơn hàng đã được khách hàng chốt, mua.

Yêu cầu về chức năng của hệ thống

• Quản lý hàng hoá: Cho phép nhân viên chăm sóc khách hàng, Nhân viên quản trị hệ thống quản lý được thông tin sản phẩm và thêm, sửa, xoá sản phẩm.
• Báo cáo bán hàng: Cho phép nhân viên chăm sóc khách hàng quản lý thông tin hoá đơn bán hàng.
• Chọn hàng và cho vào rổ hàng (mua hàng): Cho phép khách hàng thêm sản phẩm với số lượng mong muốn vào giỏ hàng.
• Giỏ hàng: Cho phép khách hàng quản lý rổ hàng cá nhân và tiến hành xác nhận thanh toán
• Thanh toán: Cho phép Khách hàng lựa chon các phương thức thanh toán khác nhau (thanh toán bằng thẻ, thanh toán tại nhà,…) và đặt hàng.
• Quản lý đơn hàng: Cho phép nhân viên quản trị hệ thống xác nhận đơn hàng, quản lý thông tin đơn hàng qua google sheet và liên hệ bên vận chuyển.
• Giao hàng: Cho phép nhân viên vận chuyển xác nhận đơn hàng và thông báo cho khách hàng.

Yêu cầu về phi chức năng của hệ thống

Yêu cầu hệ thống

• Hệ thống hoạt động trên tất cả các hệ điều hành
• Hệ thống tương thích với tất cả thiết bị

Hệ thống tương thích với tất cả thiết bị

Yêu cầu về hiệu suất

• Hệ thống sẽ thực hiện các chức năng trong 2 giây hoặc ít hơn
• Hoạt động trơn tru, ổn định

Yêu cầu về bảo mật

• Chỉ có quản trị viên và nhân viên mới có quyền thay đổi, chỉnh sửa thông tin đơn hàng đã được đặt mua
• Bảo mật thông tin khách hàng tuyệt đối
• Chỉ có quản trị viên và nhân viên chăm sóc khách hàng mới có quyền chỉnh sửa thông tin sản phẩm

Yêu cầu về giao diện và văn hoá và chính trị

• Hệ thống thiết kế cho người dùng biết sử dụng tiếng việt, không có yêu cầu gì về văn hoá và chính trị
• Thiết kế hợp lí, bắt mắt và thân thiện với người dùng

Phần 2: Xây dựng mô hình chức năng

Biểu đồ THSD cho chức năng giỏ hàng

Biểu đồ THSD cho chức năng giỏ hàng

Biểu đồ hoạt động cho THSD giỏ hàng

Biểu đồ hoạt động cho THSD giỏ hàng

Biểu đồ THSD cho chức năng đặt hàng

Biểu đồ THSD cho chức năng đặt hàng

Biểu đồ hoạt động cho THSD

Biểu đồ hoạt động cho THSD

Phần 3: Xây dựng mô hình cấu trúc

Mô hình cấu trúc cho chức năng giỏ hàng

Mô hình cấu trúc cho chức năng giỏ hàng

Mô hình cấu trúc cho chức đặt hàng

Mô hình cấu trúc cho chức đặt hàng

Phần 4: Xây dựng mô hình hành vi

Biểu đồ tuần tự cho THSD giỏ hàng

Biểu đồ tuần tự cho THSD giỏ hàng

Biểu đồ tuần tự cho THSD đặt hàng

Biểu đồ tuần tự cho THSD đặt hàng

Phần 5: Thiết kế mô hình dữ liệu quan hệ đối tượng

Mô hình tổng thể dữ liệu quan hệ đối tượng chức năng giỏ hàng

Mô hình tổng thể dữ liệu quan hệ đối tượng chức năng giỏ hàng

Mô hình tổng thể dữ liệu quan hệ đối tượng chức năng đặt hàng

Mô hình tổng thể dữ liệu quan hệ đối tượng chức năng đặt hàng

Phần 6: Thiết kế giao diện người máy cho chức năng giỏ hàng và đặt hàng

Chức năng giỏ hàng

Chức năng giỏ hàng

Chức năng đặt hàng

Đặt hàng

Nhập thông tin địa chỉ để đặt hàng

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

Email xác nhận đơn đặt hàng

Phần 7: Thử nghiệm xây dựng 1 ứng dụng web theo phân tích thiết kế

Giới thiệu về giao diện web

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
    <head>
        <title>Tiêu đề trang web</title>
        <!-- Bắt đầu viết CSS cho web -->
        <b:skin>
            <![CDATA[
                /* Chèn CSS vào đây */
            ]]>
        </b:skin>
        <!-- Kết thúc CSS -->
    </head>
    <!-- Bắt đầu phần hiển thị trên web -->
    <body>
        <!-- Thêm nội dung trang web của bạn vào đây! -->
    </body>
    <!-- Kết thúc phần hiển thị trên web -->
</html>

Một số tính năng nổi bật

Đặt hàng không cần đăng nhập hoặc tạo tài khoản

Các bước thực hiện đẩy dữ liệu lên google form

• Bước 1: Lấy ID chứa dữ liệu nhập vào của Google form bằng cách view-source

var FB_PUBLIC_LOAD_DATA_ = [null, [null, [
    [679137993, "Họ và tên", null, 1, [
        [2016525067, null, 0]
    ]],
    [253820477, "Số điện thoại", null, 1, [
        [1493999487, null, 0]
    ]],
    [642142200, "Email", null, 1, [
        [247933723, null, 0]
    ]],
    [1129428543, "Địa chỉ", null, 1, [
        [1573110796, null, 0]
    ]],
    [601838141, "Ghi chú", nulll, 1, [
        [340809387, null, 0]
    ]],
    [2130977281, "Sản phẩm", null, 1, [
        [828272976, null, 0]
    ]]
]
  

• Bước 2: Gán ID lấy được ở bước 1 vào form trên hệ thống

<form action="https://docs.google.com/forms/d/e/AAAAAABBBBBBCCCCCC/formResponse?embedded=true" class="blockform" id="form_dathang" method="POST" onsubmit="return emptycart()" style="display: block;" target="hidden_iframe">
    <div class="row">
        <label>Thông tin người mua hàng</label>
        <br/>
        <div class="col-sm-6">
            <input aria-required="true" name="entry.2016525067" placeholder="Họ và tên" required="" title="" type="text" value=""/>
        </div>
        <div class="col-sm-6">
            <input aria-required="true" name="entry.1493999487" placeholder="Số điện thoại" required="" title="" type="text" value=""/>
        </div>
        <div class="col-sm-12">
            <input aria-required="true" name="entry.247933723" placeholder="Email" required="" title="" type="text" value=""/>
        </div>
        <div class="col-sm-12">
            <input aria-required="true" name="entry.1573110796" placeholder="Địa chỉ nhận hàng" required="" title="" type="text" value=""/>
        </div>
        <div class="col-sm-12">
            <input aria-required="true" name="entry.340809387" placeholder="Ghi chú" required="" title="" type="text" value="" />
        </div>
        <label>Thông tin đơn hàng</label>
        <br/>
        <div class="col-sm-12">
            <textarea id="layidthongtinsanpham" name="entry.828272976" readonly="true" rows="4"></textarea>
        </div>
        <div class="col-sm-12">
            <input class="input-checkbox" id="okdathang" name="okdathang" required="" type="checkbox" value="false"/>
            <label class="checkbox__label">Chấp nhận đồng ý đặt hàng</label>
        </div>
        <div class="col-sm-12">
            <a class="previous-link" href="/p/cart.html"><i aria-hidden="true" class="fa fa-angle-left fa-lg"></i>Quay về giỏ hàng</a>
            <input class="btn-primary btn-checkout" name="submit" type="submit" value="Đặt đơn hàng" /></div>
    </div>
    <div class="simpleCart_items" id="angiohang"></div>
</form>
  

Quản lý dữ liệu

Các bước thực hiện đẩy dữ liệu vào Google Sheet

• Bước 1: Liên kết Google Form với Google Sheet
• Bước 2: Chia sẻ quyền truy cập cho nhân viên quản lý

Xác nhận đơn đặt hàng

Các bước thực hiện gửi email xác nhận tự động

• Bước 1: Truy cập Google Sheet trang quản lý dữ liệu đặt hàng
• Bước 2: Chọn công cụ ➤ Trình trình sửa tệp lệnh (script.google.com)
• Bước 3: Viết chương trình gửi email xác nhận đơn đặt hàng

function guiEmail(e) {

    // Truyền vào biến e để lấy giá trị từ biểu mẫu

    // Lấy giá trị của cột số 0 lưu vào biến time
    var time = e.values[0];
    // Lấy giá trị của cột số 1 lưu vào biến name
    var name = e.values[1];
    // Lấy giá trị của cột số 2 lưu vào biến tel
    var phone = e.values[2];
    // Lấy giá trị của cột số 3 lưu vào biến email
    var email = e.values[3];
    // Lấy giá trị của cột số 4 lưu vào biến email
    var address = e.values[4];
    // Lấy giá trị của cột số 5 lưu vào biến note
    var note = e.values[5];
    // Lấy giá trị của cột số 6 lưu vào biến product
    var product = e.values[6];

    // Tiêu đề email
    var subject = '[Adele Perfume ™] Xác Nhận Đơn Đặt Hàng';

    // Nội dung email
    var body = 'Xin chào ' + name + '!<br /><br />';
    body = body + 'Lời đầu tiên, Adele Perfume xin gửi lời cảm ơn chân thành và sâu sắc nhất đến quý khách hàng đã tin tưởng và lựa chọn sản phẩm của chúng tôi. Sự tin tưởng của quý vị đã góp phần lớn quyết định sự phát triển và thành công của Adele Perfume trong thời gian qua. <br /><br />';
    body = body + 'Dưới đây là thông tin sản phẩm của quý khách hàng: <br /><br />';
    body = body + '- Thời gian đặt hàng: ' + time + '<br />';
    body = body + '- Họ và tên: ' + name + '<br />';
    body = body + '- Số điện thoại: ' + phone + '<br />';
    body = body + '- Email: ' + email + '<br />';
    body = body + '- Địa chỉ: ' + address + '<br />';
    body = body + '- Ghi chú: ' + note + '<br />';
    body = body + '- Sản phẩm: ' + product + '<br />';
    body = body + '- Thời gian nhận hàng: Dự kiến 2-3 ngày kể từ khi đặt hàng<br /><br />';
    body = body + 'Thời gian giao hàng thông thường là từ 8h00 sáng đến 18h00 chiều hàng ngày. Tuy nhiên khách hàng có thể nhận được hàng ngoài khung giờ này, tùy thuộc vào lịch làm việc của người giao hàng (shipper) hoặc thỏa thuận nhận hàng giữa khách hàng và shipper (nếu có).<br /><br />';
    body = body + 'Quý khách vui lòng kiểm tra thông tin đơn hàng, nếu có sai xót hãy phản hồi lại email này !<br /><br />';
    body = body + 'Trân trọng! <br />';
    body = body + '------------------------------<br />';
    body = body + '© Adele Perfume ™ - Nước Hoa Pháp Chính Hãng<br />';
    body = body + 'Hotline: 0979 783 197 - 0981 859 688<br />';
    body = body + 'Email: [email protected]<br />';
    body = body + 'Website: https://www.nuochoaphapcaocap.com/<br />';

    MailApp.sendEmail({
        to: email,
        subject: subject,
        htmlBody: body
    });

}

• Bước 4: Cấu hình tuỳ chọn mốc thời gian gửi email

Đánh giá sản phẩm

Cải tiến chất lượng sản phẩm

Xây dựng niềm tin của khách hàng

Phát triển hệ thống quản lý

Các bước thực hiện thêm đánh giá sản phẩm

• Bước 1: Chọn ID ứng dụng và ngôn ngữ
• Bước 2: Chèn JavaScript SDK vào hệ thống, cụ thể là trước thẻ đóng </head>

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v11.0&appId=99999999999999999999&autoLogAppEvents=1" nonce="X9UkqOmF"></script>
  

• Bước 3: Nhúng code phía dưới vào dưới bài đăng của mỗi sản phẩm

<div class="fb-comments" data-href="" data-width="" data-numposts="5"></div>
  

• Bước 4: Thiết lập kiểm duyệt và nhận thông báo khi có đánh giá sản phẩm mới

<!-- Thêm một người kiểm duyệt, -->
<meta content='{YOUR_FACEBOOK_USER_ID}' property='fb:admins'/>
<!-- Để thêm nhiều người kiểm duyệt, -->
<meta content='{YOUR_FACEBOOK_USER_ID_1}' property='fb:admins'/>
<meta content='{YOUR_FACEBOOK_USER_ID_2}' property='fb:admins'/>
<meta content='{YOUR_FACEBOOK_USER_ID_3}' property='fb:admins'/>
<!-- Thêm ID ứng dụng đã tạo -->
<meta content='{YOUR_APP_ID}' property='fb:app_id'/>
  

Hệ thống bán hàng online

Nhóm sinh viên thực hiện

Lời kết