Thiết kế giao diện người dùng - xây dựng ứng dụng- 123docz.net

Layout của trang chính

Khung hiện thị thông tin chat Khung chứa danh sách bạn và các tác vụ liên quan của hệ thống

Khung nhập thông điệp chat

24 Giao diện chi tiết

o Đăng nhập

Hình 7: Thiết kế giao diện - Form đăng nhập

o Đăng ký

o Cửa sổ đăng nhập bằng Google Account

Hình 9: Thiết kế giao diện – Đăng nhập google

o Giao diện chính của chương trình

CHƯƠNG 4: THỰC NGHIỆM VÀ ĐÁNH GIÁ 4.1 Cài đặt ứng dụng

Sau khi xây dựng, ứng dụng web chat đã hoàn thành ở một mức tương đối. Ứng dụng đã được cài đặt theo địa chỉ http://vsearch.vn/chatdemo.

Với môi trường được cài là: web server cài sử dụng hệ điều hành linux phiên bản CentOS 5.2. Được cài đặt Apache, MySql và PHP.

4.2 Thực nghiệm

Thực nghiệm trên một số brower như: Firefox 3.6, Internet Explorer 8.0… cho thấy chương trình hoạt động tốt.

4.2.1Thực nghiệm về giao diện chương trình

Về giao diện chương trình, qua thực nghiệm trên các brower kể trên cho kết quả tốt. Hình ảnh, khuôn hình, bố cục hiển thị đúng với thiết kế đề ra.

Form chat và cách thức hiển thị thông điệp chat tạo cho người dùng cảm giác rõ ràng và thoải mái....

4.2.2Thực nghiệm về tính năng của chương trình

o Tính năng đăng nhập bằng tài khoản Google.

Vào địa chỉ http://vsearch.vn/chatdemo chọn đăng nhập bằng tài khoản Google. Đầu tiên ta thấy một cửa sổ popup của trình duyệt hiện ra yêu cầu đăng nhập bằng tài khoản của Google, như hình ().

Điều này chứng tỏ hệ thống hoạt động đúng theo mô hình các quá trình xác thực của Google OpenID.

Nhập tài khoản và mật khẩu vào để đăng nhập vào tài khoản Google. Sau đó bạn phải xác nhận cho phép Coltech Chat sử dụng thông tin của bạn theo hình sau:

Hình 11: Xác nhận việc sử dụng thông tin của hệ thống

Nếu bạn chọn “Cho phép” thì popup sẽ đóng lại và thông tin sẽ được chuyển sang cho hệ thống Coltech Chat và lúc này coi như bạn đã đăng nhập thành công. Chứng tỏ việc sử dụng OpenID để xác thực thông tin tài khoản thành công và hệ thống Coltech Chat đã nhận được những thông tin về tài khoản của bạn. Điều này cho thấy hệ thống hoạt động tốt với Google OpenID.

o Tính năng chat

Sau khi đăng nhập người dùng chọn một bạn trong danh sách bạn của mình. Form chat hiện ra với tên đối tượng đang gửi thông điệp ở trên như sau:

Việc gửi và nhận thông điệp giữa hai người dùng (chat) diễn ra suôn sẻ. Điều đó chứng tỏ chức năng cơ bản nhất của hệ thống đã được đáp ứng tốt.

o Các tính năng quản lý thôn tin người dùng và danh sách bạn

Qua việc tiến hành sử dụng cũng như sử dụng cho thấy, các chức năng như quản lý thông tin người dùng hay quản lý thông tin về danh sách bạn của người dùng tỏ ra dễ thao tác, dễ sử dụng và rất tiện lợi cho người dùng.

4.2.3Một số thực nghiệp khác

o Thực nghiệm về tốc độ trao đổi thông điệp

Về tốc độ, qua thực nghiệm cho thấy sau khi người gửi gửi đi một thông điệp chậm nhất là sau 0,1 giây người nhận sẽ nhận được nếu sử dụng localhost (thực nghiệm đăng nhập và chat trên một máy với hai người dùng). Và với môi trường internet thực tế thì con số đó là khoảng xấp xỉ 1 giây tùy vào môi trường cũng như khoảng cách của hai người cùng với tốc độ của máy chủ…

o Thực nghiệm về số lượng người dùng kết nối đến hệ thống

Qua thực nghiệm trên server thực tế cho thấy số lượng người dùng tối đa kết nối tới hệ thống cùng một lúc có thể lên tới hàng trăm ngàn kết nối. Tùy vào cấu hình của máy chủ đặt hệ thống và tốc độ cũng như băng thông đường truyền Internet tới máy chủ đó.

4.3 Đánh giá và hướng phát triển trong tương lai

Từ những thực nghiệm trên cho thấy, hệ thống mà khóa luận trên cho thấy: hệ thống đã phần nào đáp ứng được yêu cầu đặt ra ban đầu. Tuy nhiên, hệ thống còn nhiều nhược điểm và cần phát triển hơn nữa trong tương lai. So với những phần mềm chat khác, hệ thống còn thiếu một số chức năng khác như:

− Chat nhóm. − Video chat. − Voice chat. − Gửi và nhận file.

Nếu phát triển hệ thống hơn nữa cần hướng tới công nghệ mới hơn, hoàn thiện hơn. Cũng như phát triển thêm nhiều chức năng mới không chỉ là các chức năng kể trên. Với việc sử dụng công nghệ Ajax, có nhiều các request không cần thiết đến server. Thay bằng Ajax, trong tương lai hệ thống có thể sử dụng công nghệ mới như

CommetD. Đây là công nghệ hoàn thiện hơn so với Ajax trong việc yêu cầu và đáp ứng yêu cầu của máy khách cũng như máy chủ. Công nghệ này cũng giúp cho hệ thống hoạt động với tốc độ nhanh hơn và có tính thời gian thực cao hơn. Với CommetD máy khách không cần phải thực hiện request liên tục lên máy chủ để lấy thông tin mà ngược lại, khi có thông tin cập nhật, máy chủ sẽ đẩy thông tin ấy cho máy khách một cách tức thì. Việc thực hiện và triển khai công nghệ này đòi hỏi nhiều thời gian cho việc nghiên cứu. Vì thế, đây sẽ là hướng phát triển rất tốt trong tương lai.

KẾT LUẬN

Sau khi những mục tiêu của khóa luận đã hoàn thành, tôi rút ra một số kết luận. Để xây dựng hoàn thiện một hệ thống như mục tiêu mong muốn cần nhiều thời gian và khóa luận còn cần hoàn thiện hơn nữa. Những gì khóa luận đã làm vẫn còn phải chỉnh sửa và hoàn thiện rất nhiều nếu muốn hệ thống được sử dụng một cách đích thực. Tuy nhiên trong khuôn khổ khóa luận. Những kết quả đã đạt được cũng phần nào đáp ứng được mục tiêu. Đó là tạo ra một hệ thống website cho phép người dùng chat trực tiếp. Đáp ứng được những chức năng cơ bản như một phần mềm và hơn nữa người dùng có thể dùng tài khoản Google để đăng nhập ngay vào hệ thống mà không cần phải đăng ký. Điều này mang lại những tiện lợi nhất định cho người dùng. Với những kết quả đạt được và những gì nghiên cứu được. Tin tưởng đây sẽ là một hướng phát triển mới của các ứng dụng trong tương lai. Những ứng dụng được thiết kế và xây dựng trên nền web.

Phụ lục

1. Các tham số Google OpenID: [7]

Tham số Loại Mô tả

Openid.mode Yêu cầu

Hình thức tương tác. Chỉ rõ liệu Google có thể tương tác với người dùng để thực hiện việc xác định các kết quả của yêu cầu. Các giá trị của tham số này có thể là:

o Checkid_immediate: Không cho phép tương tác

o Checkid_setup: Cho phép tương tác

o Google hỗ trợ một nâng cao cho

“checkid_immediate” thông qua giao diện người dùng mở rộng. Nếu request có chứa “openid.ui.mode=x-has-session”, nó sẽ được nhắc lại trong response nếu Google phát hiện một phiên chứng thực.

Openid.ns Yêu cầu

Phiên bản giao thức. Giá trị xác đinh phiên bản OpenID được sử dụng. Giá trị này nên là: “http://specs.openid.net/auth/2.0”.

Openid.return_to Yêu cầu

URL trả về. Giá trị xác định nơi người dùng được trả lại sau khi đăng nhập. Google hỗ trợ các loại địa chỉ HTTP và HTTPS.

Openid.assoc_handle Tùy chọn Sự kết hợp xử lý. Được đặt nếu một sự kết hợp giữa ứng dụng web và nhà cung cấp OpenID được thiết lập.

Openid.claimed_id Tùy chọn

Tuyên bố chủ quyền định danh. Giá trị này phải được đặt là:

“http://specs.openid.net/auth/2.0/identifier_select”. Openid.identity Tùy chọn Giá trị này phải đặt là:

“http://specs.openid.net/auth/2.0/identifier_select”.

Openid.realm Tùy chọn

Xác định tên miền mà người dùng cuối cùng tin tường. Giá trị này phải phù hợp với giá trị trong tham số openid.return_to. Nếu giá trị này không được khia báo, Google sẽ sử dụng các URL trong tham số openid.return_to.

PAPE mở rộng

Openid.ns.page Yêu cầu

Xác định các giao thức mở rộng được sử dụng. Giá trị này nên được đặt là:

“http://specs.openid.net/extensions/pape/1.0”.

Openid.page.max_au

th_age Tùy chọn

Thiết lập thời gian chấp nhận tối đa (tính bằng giây) tính từ khi người dùng cuối cùng chức thực. Nếu session lâu hơn, người dùng sẽ được nhắc nhở đăng nhập lại. Bằng 0 nếu không bắt buộc đăng nhập lại.

Giao diện người dùng mở rộng

Openid.ns.ui Yêu cầu

Chỉ ra rằng trang xác thực của nhà cung cấp OpenID sẽ được thay thế bằng một giao diện người dùng khác. Tham số này phải được đặt là: "http://specs.openid.net/extensions/ui/1.0".

Openid.ui.mode Tùy chọn

Chỉ định giao diện người dùng thay thế. Có thể là các giá trị sau đây:

o “Popup”.

o “X-has-session” (chỉ sự hiện diện của một phiên xác thực)

Openid.ui.icon Tùy chọn Hiện thị icon của domain nếu đặt là “true” Thuộc tính trao đổi mở rộng

Openid.ns.ax Yêu cầu Chỉ ra yêu cầu thuộc tính người dùng. Giá trị này phải được đặt là "http://openid.net/srv/ax/1.0".

Openid.ax.mode Yêu cầu Giá trị này phải đặt là “fetch_request”.

Openid.ax.required Yêu cầu

Chỉ định các thuộc tính yêu cầu, bao gồm:

o “country”.

o “email”

o “firstname”

o “lastname”

o “language”

Nếu yêu cầu nhiều thuộc tính, các thuộc tính cách nhau bởi dấu “,”.

Openid.ax.type.coun

try Tùy chọn

Yêu cầu country của người dùng. Giá trị này phải được đặt là:

"http://axschema.org/contact/country/home".

Openid.ax.type.emai

l Tùy chọn

Yêu cầu thuộc tính email của người dùng. Giá trị này phải được đặt là:

“http://axschema.org/contact/email” hoặc “http://schema.openid.net/contact/email”.

Openid.ax.type.firstn

ame Tùy chọn

Yêu cầu thuộc tính firstname của người dùng. Giá trị phải được đặt là:

"http://axschema.org/namePerson/first".

Opend.ax.type.lastna

me Tùy chọn

Yêu cầu thuộc tính lastname của người dùng. Giá trị phải được đặt là:

"http://axschema.org/namePerson/last".

Openid.ax.type.lang

uage Tùy chọn

Yêu cầu ngôn ngữ yêu thích của người dùng. Giá trị phải được đặt là:

"http://axschema.org/pref/language". Oauth mở rộng

Openid.ns.ext2 Yêu cầu

Chỉ ra một yêu cầu cho mã thông báo Oauth. Giá trị phải đặt là:

34 Openid.ext2.consum

er Bắt buộc

Khóa của người dùng được cung cấp bởi Google sau khi đăng ký trang web. Đây thường là một tên miền DNS. Giá trị này phải phù hợp với giá trị openid.realm

Openid.ext2.scope Bắt buộc Danh sách các URL xác định các dịch vụ của Google có thể truy cập được.

2. Ví dụ về OpenID

a. Mẫu các yêu cầu xác thực

Ví dụ về việc yêu cầu chứng thực như là một URL: https://www.google.com/accounts/o8/id ?openid.ns=http://specs.openid.net/auth/2.0 &openid.claimed_id=http://specs.openid.net/auth/2.0/identifie r_select &openid.identity=http://specs.openid.net/auth/2.0/identifier_ select &openid.return_to=http://www.example.com/checkauth &openid.realm=http://www.example.com/ &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup [7]

Ví dụ việc yêu cầu xác thực đăng nhập với độ dài phiên là 5 phút và kèm theo các yêu cầu thông tin cá nhân bổ sung như thuộc tính ngôn ngữ, sử dụng popup để yêu cầu đăng nhập: https://www.google.com/accounts/o8/id ?openid.ns=http://specs.openid.net/auth/2.0 &openid.ns.pape=http://specs.openid.net/extensions/pape/1.0 &openid.ns.max_auth_age=300 &openid.claimed_id=http://specs.openid.net/auth/2.0/identifie r_select &openid.identity=http://specs.openid.net/auth/2.0/identifier_ select &openid.return_to=http://www.example.com/checkauth &openid.realm=http://www.example.com/ &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup &openid.ui.ns=http://specs.openid.net/extensions/ui/1.0 &openid.ui.mode=popup &openid.ui.icon=true &openid.ns.ax=http://openid.net/srv/ax/1.0

35 &openid.ax.mode=fetch_request

&openid.ax.type.email=http://axschema.org/contact/email &openid.ax.type.language=http://axschema.org/pref/language &openid.ax.required=email,language [7]

Ví dụ minh họa một OpenID + Oauth:

https://www.google.com/accounts/o8/id ?openid.ns=http://specs.openid.net/auth/2.0 &openid.claimed_id=http://specs.openid.net/auth/2.0/identifie r_select &openid.identity=http://specs.openid.net/auth/2.0/identifier_ select &openid.return_to=http://www.example.com/checkauth &openid.realm=http://www.example.com &openid.assoc_handle=ABSmpf6DNMw &openid.mode=checkid_setup &openid.ns.oauth=http://specs.openid.net/extensions/oauth/1.0 &openid.oauth.consumer=www.example.com &openid.oauth.scope=http://docs.google.com/feeds/+http://spre adsheets.google.com/feeds/ [7]

b. Mẫu thông tin trả về của Google Url trả về khi đăng nhập thành công

http://www.example.com/checkauth ?openid.ns=http://specs.openid.net/auth/2.0 &openid.mode=id_res &openid.op_endpoint=https://www.google.com/accounts/o8/ud &openid.response_nonce=2008-09-18T04:14:41Zt6shNlcz-MBdaw &openid.return_to=http://www.example.com:8080/checkauth &openid.assoc_handle=ABSmpf6DNMw &openid.signed=op_endpoint,claimed_id,identity,return_to,resp onse_nonce,assoc_handle &openid.sig=s/gfiWSVLBQcmkjvsKvbIShczH2NOisjzBLZOsfizkI= &openid.identity=https://www.google.com/accounts/o8/id/id=ACy QatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3fAY 983DpW4UQV_U &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U [7]

Ví dụ về thông tin trả về khi quá trình xác thực không thành công http://www.example.com/checkauth

?openid.mode=cancel

Ví dụ thông tin trả về khi xác thực thành công và có yêu cầu các thông tin tài khoản đi kèm như ngôn ngữ,…

http://www.example.com/8080/checkauth ?openid.ns=http://specs.openid.net/auth/2.0 &openid.mode=id_res &openid.op_endpoint=https://www.google.com/accounts/o8/ud &openid.response_nonce=2008-09-18T04:14:41Zt6shNlcz-MBdaw &openid.return_to=http://www.example.com:8080/checkauth &openid.assoc_handle=ABSmpf6DNMw &openid.ns.pape=http://specs.openid.net/extensions/pape/1.0 &openid.pape.auth_time=2005-05-15T17:11:51Z &openid.pape.auth_policies=http://schemas.openid.net/pape/pol icies/2007/06/none &openid.signed=op_endpoint,claimed_id,identity,return_to,resp onse_nonce,assoc_handle,ax.mode,ax.type.email,ax.value.email &openid.sig=s/gfiWSVLBQcmkjvsKvbIShczH2NOisjzBLZOsfizkI= &openid.identity=https://www.google.com/accounts/o8/id/id=ACy QatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3fAY 983DpW4UQV_U &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U &openid.ns.ax=http://openid.net/srv/ax/1.0 &openid.ax.mode=fetch_response &openid.ax.type.email=http://axschema.org/contact/email &openid.ax.value.email=fred.example@gmail.com &openid.ax.type.language=http://axschema.org/pref/language &openid.ax.value.language=english [7]

Thông tin trả về với một token Oauth:

37 &openid.claimed_id=https://www.google.com/accounts/o8/id/id=A CyQatixLeLODscWvwqsCXWQ2sa3RRaBhaKTkcsvUElI6tNHIQ1_egX_wt1x3f AY983DpW4UQV_U &openid.ns.ax=http://openid.net/srv/ax/1.0 &openid.ax.mode=fetch_response &openid.ax.type.email=http://axschema.org/contact/email &openid.ax.value.email=fred.example@gmail.com &openid.ax.type.language=http://axschema.org/pref/language &openid.ax.value.language=english [7]

Tài liệu tham khảo

[1] Jon Duckett. Beginning Web Programming with HTML XHTML and CSS. Wiley Publishing, Inc, 2004.

[2] Michael Glass, Yann Le Scouarnec, Elizabeth Naramore, Gary Mailer, Jeremy Stolz, and Jason Gerner. Beginning PHP, Apache, MySQL Web Development. Wiley Publishing, Inc, 2004.

[3] Christopher Cosentino. Advanced PHP for Web Professionals. Prentice Hall PTR, 2002.

[4] Matthew Eernisse. Build Your Own Ajax Web Application. SitePoint, 2006. [5] Danny Goodman. JavaScript & DHTML Cookbook. O'Reilly, 2003.

[6] Akinola Akintomide. Ajax For Web Application Developers. Sam, 2007. [7] Federated Login for Google Account Users.