CHƯƠNG 3 XÂY DỰNG HỆ THỐNG, CÀI ĐẶT VÀ ĐÁNH GIÁ
3.2. Phân tích thiết kế
Người dùng cuối
Người dùng cuối là các chủ cửa hàng có đăng các sản phẩm lên các trang thương mại điện tử. Thay vì vào lần lượt từng trang rồi đăng sản phẩm thì người dùng có thể thực hiện một trong hai cách sau:
- Vào trang quản trị của hệ thống đăng một sản phẩm mẫu gồm đầy đủ tên, ảnh, giá cả…
- Vào trang chi tiết của một sản phẩm tại sàn đã có sản phẩm rồi gửi thông tin sản phẩm về hệ thống.
Người quản trị hệ thống có tác vụ duy nhất là cập nhật bộ kịch bản theo khuôn mẫu mới.
Về tổng quan hệ thống được triển khai theo mơ hình kết hợp giữa Client – Server và Server – Application.
Hình 3-1: Kiến trúc hệ thống
Có thể chia toàn bộ hệ thống thành 3 thành phần chính:
Bộ tạo/sửa các hành động mẫu:
Đây là một ứng dụng phía Server giúp cho người quản trị có thể thêm/sửa/xóa các hành động. Ứng dụng được viết bằng ngôn ngữ C# trên framework WinForm, chi tiết vềứng dụng sẽđược trình bày ở mục 3.2.3
Bộ thực thi các hành động:
Đây cũng là một ứng dụng Server nhưng thực hiện công việc chạy các hành động mà kết hợp từ hành động mẫu và dữ liệu sản phẩm. Chi tiết về ứng dụng sẽ được trình bày ở mục 3.2.4.
Đây là giao diện mà người dùng sẽ tương tác, đồng thời phía Server của web sẽ thực hiện việc kết hợp giữa dữ liệu hành động mẫu và dữ liệu thực của người dùng để sinh ra hành động mới. chi tiết về trang web được trình bày cụ thể ở phần 3.2.5
3.2.3.1 Kiến trúc hệ thống
Hình 3-2: Kiến trúc hệ thống module tạo sửa hành động mẫu
Tầng client:
Là nơi hiển thị các giao diện với người quản trị. Khi nhận thông tin từ người quản trị như thêm, sửa xóa, dữ liệu thì ứng dụng sẽ gọi các API đểtrao đổi và lưu trữ thông tin.
Tầng server
Đây là nơi cung cấp các API cho tầng client, sau đó xử lý thơng tin và đưa vào cơ sở dữ liệu.
Đây là nơi lưu trữ và thao tác truy vấn, quản lý cơ sở dữ liệu, tầng này được cài đặt dựa trên DB_Buider có sẵn của Codeigniter giúp cho việc triển khai các câu truy vấn được rành mạch, linh động.
3.2.3.2 Định nghĩa hành động, bước hành động
Hành động (Action): Được hiểu như một hành động của người dùng cuối, hành động có mục đích rõ ràng. Ví dụ hành động như đăng nhập, đăng xuất.
Bước hành động (Step): Là 1 hành vi đơn lẻ của người dùng cuối, một hoặc nhiều hành vi sẽ cấu thành nên hành động hay một hành động có thể chứa một hoặc nhiều hành vi. Ví dụ hành động mở trình duyệt gồm các hành vi là tìm đến biểu tượng Chrome rồi bấm chuột vào biểu tượng.
ơ
Mỗi website hay sàn TMĐT có các giao diện đăng sản phẩm khác nhau. Điều này có nghĩa là bộ các hành động trên mỗi sàn là khác nhau. Nhưng tựu chung lại để đăng được một sản phẩm thì cần có các hành động sau:
STT Tên hành động Mơ tả hành vi
1 Mở trình duyệt web Tìm biểu tượng của trình duyệt rồi kích đúp chuột
2 Truy cập sàn thương mại điện tử Dán đường link vào thanh địa chỉ sau đó nhấn Enter
3 Đăng nhập Điền username, password sau đó Enter
hoặc bấm nút Đăng nhập
4 Chọn danh mục Chọn danh mục theo các mức
5 Tên sản phẩm và mã sản phẩm Nhập tên, mã vào textbox
6 Ảnh đại diện của sản phẩm Chọn ảnh từ bộsưu tập hoặc tải từ máy tính
7 Giá gốc, giá khuyến mại của sản phẩm, ngày bắt đầu và kết thúc khuyến mại, sốlượng hàng cịn
Nhập thơng tin vào textbox 8 Nhập Mô tả về sản phẩm Nhập thông tin vào textbox 9 Nhập nhãn hiệu Nhập thông tin vào textbox
10 Nhập Màu sắc Chọn trong danh sách màu có sẵn, hoặc nhập mã màu hoặc chọn từ bảng màu
11 Nhập Kiểu dáng Nhập thông tin vào textbox hoặc chọn trong danh sách có sẵn
12 Nhập Kích thước Nhập thơng tin vào textbox hoặc chọn trong danh sách có sẵn
13 Nhập Khối lượng Nhập thông tin vào textbox hoặc chọn trong danh sách có sẵn
Bảng 3-1: Danh sách các hành động chủ yếu khi đăng sản phẩm
3.2.3.3 Biểu đồ Use case
Người quản trị Xác thực tài khoản Thêm phiên bản Đăng nhập Đăng xuất <<include>> <<include>> Quản lý hành động Thêm hành động Sửa hành động Xóa hành động <<include>> <<include>> <<include>> Quản lý bước hành động Thêm bước Thêm/sửa Website Sửa bước Xóa bước <<include>> <<include>> <<include>>
Hình 3-3: Lược đồ use case của phần tạo sửa hành động
a) Xác thực tài khoản
Mô tả: Khi người quản trị thao tác với hệ thống cần đăng nhập mật khẩu. Để đảm bảo tính an tồn cho hệ thống, người quản trị cần đăng nhập 2 bước gồm mật khẩu thường và OTP được gửi qua email. Tài khoản này sẽ không được đăng ký mà sẽ do Super Admin của hệ thống cung cấp.
Mô tả: Website được hiểu là một sàn thương mai điện tử. khi trên thị trường xuất hiện thêm một sàn mới thì người quản trị sử dụng chức năng này để thêm mới hoặc sửa thông tin website cũ.
c) Thêm phiên bản
Mô tả: Để lưu lịch sử phiên bản thì khi sàn TMĐT của những thay đổi lớn về mặt giao diện, người quản trị nên tạo phiên bản mới thay vì cập nhật lại tồn bộ danh sách hành động, bước hành động cũ.
d) Quản lý hành động
Mô tả: Khi tạo phiên bản mới hoặc thay đổi phiên bản cũ, người quản trị sẽ thêm mới, thay đổi các hành động để phù hợp với giao diện. Ví dụ khi phần đăng sản phẩm thêm một thuộc tính mới hoặc bỏ một thuộc tính. e) Quản lý bước hành động
Mơ tả: Khi giao diện của website thay đổi nhỏ, định danh các đối tượng thay đổi thì người dùng cần cập nhật lại các bước hành vi, thêm mới hoặc xóa hành vi khơng cần thiết.
3.2.3.4 Thiết kế cơ sở dữ liệu
a) Phân tích
Dựa vào các chức năng của bộ tạo/sửa hành động, cơ sở dữ liệu cần lưu trữ các thông tin về người dùng, website, phiên bản, hành động, bước hành động tương ứng là các thực thể của hệ thống. Các thực thể có các thuộc tính như sau:
Người dùng: lưu trữ thông tin gồm username, mật khẩu, tình trạng hoạt động.
Website: lưu trữ tên của website, người tạo, tình trạng hoạt động.
Phiên bản: lưu trữ tên phiên bản, người tạo, có phải là phiển bản cuối hay khơng, tình trạng hoạt động.
Hành động: lưu trữ tên hành động, người tạo, thứ tự hành động, ghi chú, website, phiên bản trực thuộc, tình trạng hoạt động.
Bước hành động: lưu trữ tên bước hành động, thứ tựbước hành động, người tạo, hành động trực thuộc, các tham số, thời gian chờ, tình trạng hoạt động.
Hình 3-4: Lược đồ quan hệ thực thể của phần tạo sửa hành động
Hình vẽ trên biểu thị mối quan hệ giữa các thực thể. Mỗi website có thể có nhiều phiên bản. Mỗi phiên bản có một bộ n hành động, trọng mỗi hành động thì có nhiều bước hành động.
b) Thiết kế
Từ các phân tích về các thực thể và các liên kết thực thể nêu trên, có thể mơ tả qua các lược đồ quan hệ sau:
Lược đồ quan hệ User
User (u_id, user_name, password, salt, permission, status): trong đó u_id
là khóa chính, user_name là tên đăng nhập, password là mật khẩu đã băm, salt là chuỗi ngẫu nhiên để băm mật khẩu, permission là quyền người dùng, status là trạng thái của user.
Lược đồ quan hệ Website
Website(site_id, site_name, author, status): trong đó site_id là khóa chính, site_name là tên website, author là tên username tạo website, status là trạng thái của website
Lược đồ quan hệ Version
Version (ver_id, ver_name, website_id, is_latest, author, status): trong đó
ver _id là khóa chính, ver_name là tên phiên bản, website_id là khóa ngồi xác định website trực thuộc, is_latest thể hiện có phải là phiên bản cuối hay khơng, author là tên username tạo website, status là trạng thái của phiên bản.
Lược đồ quan hệ Action
Action (act_id, act _name, author, a_index, version_id, note, status): trong
đó act_id là khóa chính, act_name là tên hành động, author là tên username tạo website, a_idx là thứ tự hành động, version_id là khóa ngồi xác định phiên bản trực thuộc, status là trạng thái của hành động.
Step(st_id, st_name, s_idx, author, action_id, params, wait, status): trong
đó st_id là khóa chính, st_name là tên website, s_idx là thứ tự bước hành động, author là tên username tạo website, action_id là khóa ngồi xác định hành động trực thuộc, params là các tham số, wait là thời gian chờ, status là trạng thái của website.
3.2.3.5 Thiết kế các API
Các thành phần trong hệ thống giao tiếp với nhau thông qua Restful HTTP API. Bảng dưới đây mô tả các chức năng của các API đã được xây dựng:
URI Phương
thức Tham số Trả về Ghi chú
api/v1/oauth/login POST username password access_token token_type refresh_token expires_in user_name Đăng nhập
api/v1/oauth/logout POST access_token status Đăng xuất
api/v1/websites GET access_token websites_list
Trả về danh sách website của người dùng api/v1/website_add POST access_token,
website_name website_id Tạo website api/v1/website_edit PUT
access_token, website_id, new_name
status Sửa website
api/v1/verions GET access_token,
website_id versions_list Trả về danh sách version trực thuộc website api/v1/version_add POST access_token, website_id, is_latest, version_name
version_id Tạo version
api/v1/version_edit PUT
access_token, version_id, new_name
status Sửa version
api/v1/actions GET access_token,
version_id actions_list
Trả về danh sách action trực thuộc version
api/v1/action_add POST access_token, action_name, a_index, version_id, note
action_id Tạo action
api/v1/action_edit PUT access_token, action_id version_id, action_name, a_index, note
status Sửa action
api/v1/steps GET access_token,
action_id steps_list Trả về danh sách step trực thuộc action api/v1/step_add POST access_token, step_name, s_index, action_id, params, wait
action_id Tạo step
api/v1/step_edit PUT access_token, step_id step_name, s_index, action_id, params, wait
status Sửa step
Bảng 3-2: Danh sách các API module tạo sửa hành động mẫu
3.2.3.6 Một vài thuật toán.
Các hàm thực thi các bước hành động
Các hàm này được coi như là trái tim (core) của toàn bộ dự án, nếu không cài đặt đầy đủ các hàm mơ phỏng thao tác người dùng thì cả q trình đăng sản phẩm sẽ thất bại. Từ các hành động chung của việc đăng sản phẩm ở trên, tác giả đã xây dựng được tập hợp 36 hành động mẫu chia thành các nhóm thể hiện cho những hành động thường có của người dùng web.
STT Tên thủ tục Diễn giải
1 MouseMovePos(x,y) Di chuyển chuột đến vị trí mới có tọa độ (x,y)
2 MouseLeftClickPos(x,y) Bấm chuột trái tại vị trí có tọa độ (x,y) 3 MouseRightClickPos(x,y) Bấm chuột phải tại vị trí có tọa độ (x,y) 4 MouseScrollUp(x,y,n) Bấm chuột trái tại vị trí có tọa độ (x,y)
xong cuộn lên n lần
5 MouseScrollDown(x,y,n) Bấm chuột trái tại vị trí có tọa độ (x,y) xong cuộn lên n lần
6 Wait (mls) Chờ trong mls mili giây
7 DragPosToPos(x1,y1,x2,y2) Kéo chuột từ tọa độ (x1, y1) sang tọa độ (x2,y2)
8 SendText(text) Nhập chuỗi là text
9 OpenApp(name) Mở app có tên name
10 ComboKey(param1) Sử dụng tổ hợp phím ví dụ ComboKey (Ctr+N)
11 OpenSite(sitename) Mở trang web có địa chỉ sitename
12 CreateFolder(path) Tạo thư mục có đường dẫn path ví dụ: CreateFolder(“D:/folder1”)
13 CreateFile(fpath) Tạo tệp có đường dẫn path ví dụ: CreateFile (“D:/1.txt”)
14 AutoIt_Send(text) Nhập chuỗi là text với AutoIT 15 SetWinActivate AutoIT chuyển tab window
Bảng 3-3: Các hàm thủ tục mà hệ thống hỗ trợgọi AutoIT
Các hàm hỗ trợ Selenium
STT Tên thủ tục Diễn giải
1 IWeb_Goto_URL(url) Selenium đi đến địa chỉ url
2 IWeb_Click_ById(ID) Selenium bấm vào đối tượng có id là ID 3 IWeb_Send_ById(text) Selenium nhập text vào hộp thoại có id là ID 4 IWeb_Click_ByName Selenium bấm vào đối tượng có name là
Name
5 IWeb_Send_ByName Selenium nhập text vào hộp thoại có name là Name
6 IWeb_Click_ByLinkText Selenium bấm vào đường dẫn có nội dung là Text
7 IWeb_Send_ByLinkText Selenium nhập text vào đường dẫn có nội dung là Text
8 IWeb_Click_ByClassName Selenium bấm vào đối tượng có class_name là cName
9 IWeb_Send_ByClassName Selenium nhập text vào hộp thoại có class_name là cName
10 IWeb_Click_ByCssSelector Selenium bấm vào đối tượng theođường dẫn CSS
11 IWeb_Send_ByCssSelector Selenium nhập text vào hộp thoại theo đường dẫn CSS
12 IWeb_Click_ByXpath Selenium bấm vào đối tượng theo đường dẫn Xpath
13 IWeb_Send_ByXpath Selenium nhập text vào hộp thoại theo đường dẫn Xpath
14 IWeb_SendHotKey Selenium nhập hot key
15 Chrome_Open Selenium mở trình duyệt Chromedriver 16 Chrome_Close Selenium đóng ChromeDriver
17 IWeb_FindElement Selenium tìm đối tượng theo 1 định danh riêng nào đó
18 IWeb_SendText Selenium nhập text vào đối tượng đã tìm thấy ở trên
19 IWeb_Click Selenium bấm vào đối tượng đã tìm thấy ở trên
20 IWeb_WaitElement Selenium chờ đối tượng thực thi
Bảng 3-4: Các hàm thủ tục mà hệ thống hỗ trợ gọi Selenium
Để cài đặt các hàm này, tác giả import từ các gói thư viện của Selenium, AutoIT sẵn có và tùy biến cách tham số đầu vào link động theo kịch bản mà người dùng nhập vào. Dưới đây là một ví dụ nhỏ về q trình cài đặt.
Hình 3-6: Cài đặt một hàm AutoIT với ngơn ngữ C#
Ngồi các hàm được hỗ trợ sẵn từ các lớp và giao diện của Selenium và AutoIT, để giải quyết triệt để bài toán và hướng đến sự tiện lợi nhất cho người quản trị, đảm bảo người quản trị không cần vào vào từng đối tượng, chuột phải và xem nguồn trang thì tác giả đã cài đặt thêm một số phương thức sau đây:
Phương thức hỗ trợ ghi lại hành động bàn phím, chuột. Chức năng này
hỗ trợ người quản trị có thể record được các hành động tác động tới website. Ví dụ khi người dùng thực hiện hành động đăng nhập cần các bước sau:
- Bước 1: truy cập trang login.sendo.vn =>hệ thống ghi nhận actions là Chrome Open > Iweb_Open_URL với tham số là login.sendo.vn
- Bước 2: Tìm textbox có name là username => hệ thống ghi nhận action là Iweb_FindElement với tham số 1 là name (thuộc tính tìm kiếm) và tham số thứ 2 là username
- Bước 3: Nhập liệu vào ô textbox giá trị là username => hệ thống ghi nhận action là Iweb_sendText với tham số hungnk (giá trị người dùng gõ vào)
- Bước 4: Tìm textbox có name là password => hệ thống ghi nhận action là Iweb_FindElement với tham số 1 là name (thuộc tính tìm kiếm) và tham số thứ 2 là password
- Bước 5: Nhập liệu vào ô textbox giá trị là password => hệ thống ghi nhận action là Iweb_sendText với tham số hungnk (giá trị người dùng gõ vào) - Bước 6: Nhấn nút Đăng nhập => hệ thống ghi nhận action là
Iweb_FindElementByID tham số là btn_login và action Iweb_Click
Để cài đặt chức năng này thì tác giả sử dụng các hook được cung cấp bởi window. Với ngơn ngữ C# thì được cài đặt trong gói WinHooksNET với 3 lớp phổ biến là MouseHook, KeyboardHook, HotKeysModule. Ba lớp này hỗ trợ hầu hết các hành động bàn phím, chuột của người dùng.
Các phương thức điều kiện IF ELSE END
Trong trường hợp có những đối tượng xuất hiện trên màn hình với tất suất bất định, ví dụ như popup quảng cáo có khi xuất hiện có khi khơng (phụ thuộc vào chiến dịch quảng cáo). Để phòng trừ trường trường hợp này, tác giả hỗ trợ xây dựng phương thức điều kiện hỗ trợ người dùng. Trong trường hợp sử dụng câu lệnh điều kiện thì người dùng phải tuân thủ một số luật về cú pháp như
- Có câu lệnh IF bắt buộc phải có END
- Có câu lệnh ELSE bắt buộc phải có IF trước nó và có END sau nó.
- Hiện tại chưa áp dụng được các cấu trúc điều kiện lồng nhau (trong IF END có chứa IF END)
Phương thức vòng lặp LOOP END BREAK
Phương thức này hỗ trợ người dùng tìm kiếm những đối tượng ở tận cùng cuối ở danh sách thì người dùng sẽ cần phải làm các hành động lặp lại là sang trang mới => tìm kiếm => nếu thấy break.
Các phương thức liên quan hình ảnh
Trong lập trình giao diện web ln có những đối tượng khơng thể tìm được bằng phương pháp css selector thơng thường. Hoặc đơi khi phương pháp định danh chính xác cũng khơng thể dùng được (do thuộc tính ID, class thay đổi). Khi đó người quản trị có thể sử dụng tìm kiếm đối tượng bằng hình ảnh. Một ví dụ khá phổ biến đó là khi người dùng chọn đăng ảnh sản phẩm. Nếu đăng ảnh qua đường dẫn thì sẽ dễ dàng tuy nhiên nhiều trang chỉ cho chọn ảnh từ bộ sưu tập có
sẵn hoặc từ máy tính cá nhân lên. Khi đó khơng thể tìm được đối tượng Open File