Bảng 3.1. Các chức năng chi tiết của hệ thống
Chức năng Mô tả Chi tiết
Đăng nhập Cho phép ngƣời dùng đăng nhập vào hệ thống. Màn hình đăng nhập có hai
trƣờng: Username, Password và nút “Login”, “Cancel”.
Sau khi ngƣời dùng chọn “Login”: Nếu username và password đúng, ngƣời dùng đăng nhập thành công hệ thống. Nếu sai sẽ có thông báo lỗi.
Quản lý ngƣời dùng
Cho phép thêm, sửa, xóa ngƣời dùng trong hệ thống.
Các thông tin về ngƣời dùng bao gồm tên đăng nhập, mật khẩu, họ tên, ngày sinh, địa chỉ, quyền… Mỗi ngƣời dùng chỉ đƣợc phân một nhóm quyền duy nhất. Tên đăng nhập là duy nhất với mỗi ngƣời dùng.
Quản lý nhóm quyền
Cho phép thêm, sửa, xóa nhóm quyền trong hệ thống.
Các thông tin về nhóm quyền bao gồm tên, mã, quyền tƣơng ứng. Quản lý dịch
vụ
Cho phép thêm, sửa, xóa dịch vụ
Các thông tin về dịch vụ bao gồm loại dịch vụ, địa chỉ cung cấp dịch vụ, tỉnh thành, mô tả về dịch vụ. Tìm kiếm
điểm cung cấp dịch vụ
Cho phép tìm kiếm địa chỉ các điểm cung cấp dịch vụ
Ngƣời dùng chọn dịch vụ cần tìm địa điểm cung cấp, hệ thống liệt kê các điểm cung cấp dịch vụ cho ngƣời dùng biết. Ngƣời dùng có thể nhấp chuột vào địa điểm đƣợc chỉ để xem mô tả chi tiết về địa điểm đó.
Tìm kiếm địa điểm
Cho phép tìm kiếm địa điểm bất kỳ
Ngƣời dùng nhập địa điểm cần tìm, chọn tìm kiếm, hệ thống hiển thị địa điểm đó trên bản đồ
Tìm kiếm đƣờng đi giữa hai địa điểm
Cho phép tìm kiếm đƣờng đi giữa hai địa điểm
Ngƣời dùng nhập điểm bắt đầu, điểm kết thúc, chọn chỉ đƣờng, hệ thống hiển thị đƣờng đi từ điểm đầu đến điểm kết thúc trên bản đồ và danh sách các đƣờng đi để tới đƣợc điểm kết thúc đó.
3.4.3 Yêu cầu về môi trường phát triển
Hệ thống đƣợc phát triển bằng ngôn ngữ Java nhờ công cụ Eclipse. Mã nguồn và các file liên quan đƣợc đặt trên máy localhost. Các file sau khi chạy thành công trên localhost sẽ đƣợc đẩy lên App Engine.
Ngƣời sử dụng dùng trình duyệt web để ghé thăm ứng dụng. Điện thoại hoặc máy tính của ngƣời dùng có kết nối Internet.
3.4.4 Các ca sử dụng của hệ thống
User
Visitor Member
Manage Service Login as User
<<include>> (adsbygoogle = window.adsbygoogle || []).push({});
View Address Info Search Address
Get direction
Hình 0.5 Các ca sử dụng của người dùng cuối
Các ca sử dụng của Administrator: Administrator Manage User Manage Service Manage Role Login as Administrator <<include>> <<include>> <<include>> Hình 0.6 Các ca sử dụng của quản trị hệ thống Quản lý ngƣời dùng: Administrator
Manage User Login as Administrator
Add User Update User Delete User <<include>> <<include>> <<include>> Hình 0.7 Ca sử dụng quản lý người dùng Quản lý nhóm quyền: Administrator Login as Administrator Manage Role Add Role Update Role Delete Role <<include>> <<include>> <<include>> Hình 0.8 Ca sử dụng quản lý nhóm quyền
Quản lý Dịch vụ: Administrator Login Manage Service Add Service Update Service Delete Service <<include>> <<include>> <<include>> Member Hình 0.9 Ca sử dụng quản lý Dịch vụ
Các user case về vịêc hiển thị bản đồ:
User
Visitor Member
Search Address
View Address Info Get direction
Display Information
Display Image
Display Map Display direction
Hình 0.10 Ca sử dụng xem bản đồ
3.4.5 Thiết kế hệ thống 3.4.5.1 Biểu đồ hoạt động 3.4.5.1 Biểu đồ hoạt động
Click Login
Type Username/Pass Display Error
Display menu Redirecting to login page
Data false true Use Function Choosing menu Finishing Finishing Initialize
Hình 0.11 Sơ đồ hoạt động cho chức năng đăng nhập
Mô tả: Vào hệ thống, ngƣời dùng chọn chức năng Login, hệ thống sẽ hiển thị trang đăng nhập, trong đó ngƣời dùng phải nhập tên đăng nhập (Username), mật khẩu (Password) rồi nhấn Login. Nếu dữ liệu ngƣời dùng nhập vào không tồn tại trong hệ thống thì hiển thị lỗi tƣơng ứng. Nếu dữ liệu ngƣời dùng nhập vào đã tồn tại trong hệ thống thì sẽ hiển thị màn hình chứa danh mục các chức năng. Ngƣời dùng chọn chức năng để thao tác.
Chức năng xem bản đồ:
Display Map Initialize
Type address
Display Address in Map Click mouse in Address
Display Image Display Info
Data Data No image, info Having image Having information Finishing Finishing
Hình 0.12 Sơ đồ hoạt động cho chức năng xem bản đồ (adsbygoogle = window.adsbygoogle || []).push({});
Mô tả: khi ngƣời sử dụng vào hệ thống, hệ thống hiển thị bản đồ Việt Nam cho ngƣời sử dụng. Ngƣời sử dụng nhập địa chỉ cần tìm vào, hệ thống sẽ tìm kiếm và hiển thị địa chỉ đó trên bản đồ. Ngƣời dùng có thể di chuột lên vị trí đó để xem đƣợc hình ảnh/thông tin về địa điểm (nếu có).
Type destination
Type Source Display direction
Intialize
Data
Finishing
Hình 0.13 Sơ đồ hoạt động cho chức năng tìm kiếm đường đi
Mô tả: Ngƣời dùng nhập địa chỉ đích, địa chỉ nguồn và nhấn tìm đƣờng đi, hệ thống sẽ hiển thị đƣờng đi cho ngƣời dùng.
Chức năng quản lý dịch vụ:
Input Service Information
Click Add Initialize
Data
Data true Add new service Display services
Display error false
Click Update Choose service
Click Delete Delete Service Click update Data Update service Display error true false Data
Hình 0.14 Sơ đồ hoạt động cho chức năng quản lý dịch vụ
Mô tả: Ngƣời dùng nhập thông tin về dịch vụ, nhấn thêm mới để thêm dịch vụ vào hệ thống. Nếu dữ liệu nhập vào hợp lệ thì hệ thống thêm mới dịch vụ và hiển thị danh sách các dịch vụ bao gồm dịch vụ vừa thêm mới. Nếu dữ liệu nhập vào không hợp lệ thì hệ thống hiển thị thông báo lỗi và hiển thị danh sách các dịch vụ cũ. Ngƣời dùng chọn một dịch vụ và nhấn cập nhật, màn hình hiển thị các thông tin của dịch vụ cần cập nhật, ngƣời dùng nhập các thông tin phù hợp và nhấn cập nhật. Nếu dữ liệu hợp lệ thì hệ thống cập nhật thông tin cho dịch vụ, nếu không sẽ hiển thị lỗi tƣơng ứng. Ngƣời dùng chọn một dịch vụ và nhấn xóa, hệ thống sẽ xóa dịch vụ đƣợc chọn ra khỏi hệ thống.
3.4.5.2 Biểu đồ tuần tự
AddUserView
: Administrator
ErrorView ListUserView System
1 : Send request to add user()
2 : Send User information()
3 : Check()
4 : Return if error()
5 : Insert user() 6 : Display result()
Hình 0.15 Biểu đồ tuần tự chức năng thêm người dùng
Các xử lý chính:
- Kiểm tra xem thông tin nhập vào đã hợp lệ chƣa; - Kiểm tra xem ngƣời dùng đã có trong hệ thống chƣa; - Nếu có rồi thì hiển thị lỗi và không thêm ngƣời dùng; (adsbygoogle = window.adsbygoogle || []).push({});
- Nếu chƣa có thì thêm ngƣời dùng vào hệ thống và hiển thị thông báo thêm mới thành công.
Chức năng sửa ngƣời dùng:
Hình 0.16 Biểu đồ tuần tự chức năng sửa người dùng
Các bƣớc xử lý chính:
- Kiểm tra xem thông tin nhập vào đã hợp lệ chƣa;
- Nếu không hợp lệ thì hiển thị lỗi và không thêm ngƣời dùng;
UpdateUserView
: Administrator
ErrorView ListRoleView System
1 : Send request to update User()
2 : Send Role info()
3 : Check()
4 : Return if error()
5 : Update Role() 6 : Display result()
- Nếu hợp lệ thì cập nhật ngƣời dùng vào hệ thống và hiển thị thông báo cập nhật thành công.
Chức năng xóa ngƣời dùng:
DeleteUserView
: Administrator
ErrorView ListUserView System
1 : Send request to delete User()
2 : Send request()
3 : Check()
4 : Return if error()
5 : Delete User() 6 : Display result()
Hình 0.17 Biểu đồ tuần tự chức năng xóa người dùng
Các bƣớc xử lý chính:
- Kiểm tra xem ngƣời dùng đã đƣợc sử dụng làm gì chƣa;
- Nếu có ràng buộc trên ngƣời dùng thì không xóa đƣợc và hiển thị lỗi - Nếu không thì xóa ngƣời dùng khỏi hệ thống;
Chức năng thêm nhóm quyền:
AddRoleView (adsbygoogle = window.adsbygoogle || []).push({});
: Administrator
ErrorView ListRoleView System
1 : Send request to add role()
2 : Send Role information()
3 : Check()
4 : Return if error()
5 : Insert role() 6 : Display result()
Hình 0.18 Biểu đồ tuần tự chức năng thêm nhóm quyền
Các xử lý chính:
- Kiểm tra xem nhóm quyền đã có trong hệ thống chƣa; - Nếu có rồi thì hiển thị lỗi và không thêm nhóm quyền;
- Nếu chƣa có thì thêm nhóm quyền vào hệ thống và hiển thị thông báo thêm mới thành công.
Chức năng sửa nhóm quyền:
UpdateRoleView
: Administrator
ErrorView ListRoleView System
1 : Send request to update Role()
2 : Send Role info()
3 : Check()
4 : Return if error()
5 : Update Role() 6 : Display result()
Hình 0.19 Biểu đồ tuần tự chức năng sửa nhóm quyền
Các bƣớc xử lý chính:
- Kiểm tra xem thông tin nhập vào đã hợp lệ chƣa;
- Nếu không hợp lệ thì hiển thị lỗi và không thêm nhóm quyền;
- Nếu hợp lệ thì cập nhật nhóm quyền vào hệ thống và hiển thị thông báo cập nhật thành công.
Chức năng xóa nhóm quyền:
DeleteRoleView
: Administrator
ErrorView ListRoleView System
1 : Send request to delete Role() (adsbygoogle = window.adsbygoogle || []).push({});
2 : Send request()
3 : Check()
4 : Return if error()
5 : Delete Role() 6 : Display result()
Hình 0.20 Biểu đồ tuần tự chức năng xóa nhóm quyền
Các bƣớc xử lý chính:
- Kiểm tra xem nhóm quyền đã đƣợc sử dụng làm gì chƣa;
- Nếu có ràng buộc trên nhóm quyền thì không xóa đƣợc và hiển thị lỗi - Nếu không thì xóa nhóm quyền khỏi hệ thống;
Chức năng thêm Dịch vụ:
AddInstitutionView
: Administrator
ErrorView ListInstitutionView System
1 : Send request to add institution()
2 : Send Institution information()
3 : Check()
4 : Return if error()
5 : Insert Institution() 6 : Display result()
Hình 0.21 Biểu đồ tuần tự chức năng thêm Dịch vụ
Các xử lý chính:
- Kiểm tra xem thông tin nhập vào đã hợp lệ chƣa; - Kiểm tra xem Dịch vụ đã có trong hệ thống chƣa; - Nếu có rồi thì hiển thị lỗi và không thêm Dịch vụ;
- Nếu chƣa có thì thêm Dịch vụ vào hệ thống và hiển thị thông báo thêm mới thành công.
UpdateInstitutionView
: Administrator
ErrorView LisInstitutionView System
1 : Send request to update Inst()
2 : SendInst info()
3 : Check()
4 : Return if error()
5 : Update Inst() 6 : Display result()
Hình 0.22 Biểu đồ tuần tự chức năng sửa Dịch vụ (adsbygoogle = window.adsbygoogle || []).push({});
Các bƣớc xử lý chính:
- Kiểm tra xem thông tin nhập vào đã hợp lệ chƣa;
- Nếu không hợp lệ thì hiển thị lỗi và không sửa Dịch vụ;
- Nếu hợp lệ thì cập nhật Dịch vụ vào hệ thống và hiển thị thông báo cập nhật thành công.
Chức năng xóa Dịch vụ:
DeleteInstView
: Administrator
ErrorView ListInstrView System
1 : Send request to delete Institution()
2 : Send request()
3 : Check()
4 : Return if error()
5 : Delete Inst() 6 : Display result()
Hình 0.23 Biểu đồ tuần tự chức năng xóa Dịch vụ
Các bƣớc xử lý chính:
- Kiểm tra xem Dịch vụ đã đƣợc sử dụng làm gì chƣa;
- Nếu có ràng buộc trên Dịch vụ thì không xóa đƣợc và hiển thị lỗi - Nếu không thì xóa Dịch vụ khỏi hệ thống;
Chức năng hiển thị bản đồ:
MapView
: Administrator
System
1 : Send request to display Map()
2 : Send request()
3 : Call Google Maps()
4 : Display result()
Hình 0.24 Biểu đồ tuần tự chức năng hiển thị bản đồ
Các bƣớc xử lý chính: Gọi đến Google Maps để hiển thị bản đồ. Kết quả trả về sẽ đƣợc hiển thị trên hệ thống.
Chức năng tìm đƣờng đi:
MapView
User System (adsbygoogle = window.adsbygoogle || []).push({});
1 : Enter source, destination()
2 : Send request to get direction()
3 : Call Google Maps()
4 : Display result()
Hình 0.25Biểu đồ tuần tự chức năng tìm đường đi
Các bƣớc xử lý chính: gọi đến Google Maps để lấy ra đƣờng đi từ đích tới nguồn. Kết quả trả về đƣợc hiển thị trên hệ thống.
MapView
User System
1 : Enter address()
2 : Send request to geocode()
3 : Call Google Maps()
4 : Display result()
Hình 0.26 Biểu đồ hoạt động chức năng tìm địa điểm
Các bƣớc xử lý chính: gọi đến Google Maps để lấy ra địa điểm tƣơng ứng. Kết quả trả về đƣợc hiển thị trên hệ thống.
Chức năng tìm kiếm điểm cung cấp dịch vụ trên bản đồ:
MapView
User System
1 : Choose service type()
2 : Send request to search service()
3 : Search service() 4 : Call Google Maps()
5 : Display result()
Hình 0.27 Biểu đồ hoạt động chức năng tìm kiếm điểm cung cấp dịch vụ
Các bƣớc xử lý chính: tìm kiếm trong hệ thống những điểm cung cấp dịch vụ ứng với điều kiện tìm kiếm, gọi đến Google Maps để lấy ra địa điểm tƣơng ứng, hiển thị thông tin mô tả chi tiết của địa điểm tƣơng ứng. Kết quả trả về đƣợc hiển thị trên hệ thống.
3.4.5.3 Thiết kế giao diện
Service map
Service map
Enter Text
Search
Address
Hình 0.28 Màn hình tìm kiếm địa điểm (adsbygoogle = window.adsbygoogle || []).push({});
Màn hình tìm đƣờng đi: Service map Service map Enter Text Enter Text Search Source Destination Hình 0.29 Màn hình tìm đường đi
Màn hình tìm kiếm điểm cung cấp dịch vụ: Service map Service map Search Service Province Cafe Ha Noi
Hình 0.30 Màn hình tìm kiếm điểm cung cấp dịch vụ
Màn hình đăng nhập: Login Login Enter Text Enter Text Login Cancel Username Password Hình 0.31 Màn hình đăng nhập Màn hình quản lý ngƣời dùng:
User Management User Management Enter Text Enter Text Create Role
Date create Enter Text Enter Text Enter Text Enter Text Password Birthday Address Login
Login Birthday Address Role Date create Update Delete
Hình 0.32 Màn hình quản lý người dùng Màn hình cập nhật ngƣời dùng: Update User Update User Enter Text Enter Text Update Role
Date create Enter Text Enter Text Enter Text Enter Text Password Birthday Address Login Hình 0.33 Màn hình cập nhật người dùng Màn hình quản lý nhóm quyền:
Role Management Role Management Enter Text Enter Text Create Name Role id
Role_id Name Update Delete
Hình 0.34 Màn hình quản lý nhóm quyền Màn hình cập nhật nhóm quyền: Update Role Update Role Enter Text Enter Text Update Name Role id Hình 0.35 Màn hình cập nhật nhóm quyền Màn hình quản lý Dịch vụ: Service Management Service Management Enter Text Enter Text Create Address Service type
Service type Address Province Update Delete
Enter Text
Province
Description Enter Text
Desctiption
Hình 0.36 Màn hình quản lý Dịch vụ
Update Service Update Service Enter Text Enter Text Update Address Service type Enter Text Province
Description Enter Text
Hình 0.37 Màn hình cập nhật Dịch vụ 3.4.5.4Thiết kế lớp Lớp User: UserBank +id +login +password +birthday +address +role +datecreate +finished +getId() +getLogin() +setLogin() +getPassword() +setPassword() +getBirthday() +setBirthday() +getAddress() +setAddress() +getRole() +setRole() +getDateCreate() +setDateCreate() +setFinish() Hình 0.38 Lớp User Lớp Role: Role +id +roleid +name +getId() +getRoleid() +setRoleid() +getName() +setName() Hình 0.39 Lớp Role Lớp Service:
Service +servicetype +address +province +description +id +getId() +setServiceType() +getServiceType() +getProvince() +setProvince() +getAddress() +setAddress() +getDescription() +setDescription() Hình 0.40 Lớp Service 3.4.5.5Thiết kế Datastore
Thực thể UserBank có các thuộc tính: Login, Password, Birthday, Address, Role, datecreate.
Thực thể Role có các thuộc tính: roleid, name.
Thực thể Service có các thuộc tính: service_type, address, province, description.
3.5 Phát triển mã nguồn ứng dụng
Trƣờng hợp ứng dụng muốn chạy trên điện thoại thì cần thêm đoạn mã nguồn nhƣ sau:
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } } (adsbygoogle = window.adsbygoogle || []).push({});
Để thêm các điều khiển cho bản đồ, đoạn mã nguồn thực thi nhƣ sau:
controlDiv.style.padding = '5px';
var controlUI = document.createElement('DIV'); controlDiv.appendChild(controlUI);
var controlText = document.createElement('DIV'); controlText.innerHTML = 'Login';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() { window.location.href = "Login.jsp";
});
Mã nguồn cho việc tìm kiếm một địa chỉ nhập vào dƣới dạng địa chỉ thông thƣờng:
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({
map: map, title: address, position: results[0].geometry.location }); markersArray.push(marker);} }); }
Để định hƣớng quãng đƣờng đi giữa hai địa điểm, đoạn mã nguồn nhƣ sau:
var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = {
origin: start, destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING}; directionsService.route(request, function(response, status){ if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response);} });
Để thực hiện thêm mới hoặc cập nhật một thực thể, sử dụng hàm put của
datastore, ví dụ nhƣ sau:
DatastoreService datastore =
DatastoreServiceFactory.getDatastoreService();
Key key = KeyFactory.createKey("Role", Long.parseLong(id_role)); Transaction txn = datastore.beginTransaction();
entity = datastore.get(key);
entity.setProperty("roleid", roleid); entity.setProperty("name", name); datastore.put(entity);
txn.commit();
Để lấy đƣợc các thực thể theo một giá trị của một thuộc tính nào đó, sử dụng
hàm addFilter của com.google.appengine.api.datastore.Query nhƣ sau: