CHƯƠNG 3- ỨNG DỤNG JOOB LIB MẠNG XÃ HỘI ĐỊA ĐIỂM TRấN DI ĐỘNG

Một phần của tài liệu xây dựng bộ thư viện lập trình joob lib ứng dụngxây dựng mạng xã hội địa điểm trên di động (Trang 37 - 52)

3.1. Bài toán ứng dụng mạng xã hội địa điểm

Ứng dụng mạng xã hội địa điểm Joob gồm 2 module chức năng lớn:

• Phần mạng xã hội: gồm quản lý người dùng, người dùng có thể cập nhật trạng thái, chia sẻ với bạn bè, bình luận, mời kết bạn.

• Phần địa điểm: người dùng cập nhật địa điểm cựa mỡnh (hệ thống tự định vị), tìm kiếm địa điểm, tìm bạn bè và địa điểm ở gần, check-in một địa điểm và chia sẻ với bạn bè.

Phần quản trị hệ thống hỗ trợ quản lý người dùng, quản lý danh sách địa điểm.

3.2. Yêu cầu của hệ thống

3.2.1. Yêu cầu về môi trường

Mã nghiệp vụ Từ khóa Mô tả yêu cầu Error:

Reference source not found.1

Hệ điều hành Hệ thống chạy trên nền Android 2.0 trở lên, Iphone

Error: Reference

Cấu hình Điện thoại có hỗ trợ kết nối mạng (WiFi, 3G, GPRS…)

Nội dung chương 3:

• Bài toán ứng dụng mạng xã hội địa điểm

• Các yêu cầu của hệ thống

o Các yêu cầu chung

o Sơ đồ chức năng của hệ thống

• Thiết kế hệ thống

o Thiết kế thành phần hệ thống

o Thiết kế cơ sở dữ liệu

o Thiết kế các module của hệ thống

o Thiết kế giao diện

source not found.2 Error: Reference source not found.3

Phần mềm máy chủ Máy chủ cần chạy được PHP

Bảng 2 – Yêu cầu về môi trường của mạng xã hội Joob

3.2.2. Yêu cầu về giao diện

Mã nghiệp vụ Mô tả yêu cầu Error:

Reference source not found.1

Giao diện nhỏ gọn, ít thao tác + Số lượng button là tối thiểu

+ Để thực hiện 1 tác vụ, người dùng không cần thực hiện quá 3 thao tác

Bảng 3 – Yêu cầu về giao diện của mạng xã hội Joob (adsbygoogle = window.adsbygoogle || []).push({});

3.2.3. Sơ đồ chức năng hệ thống

3.2.3.1. Các chức năng của người dùng :

* Danh sách các chức năng :

Cấp Mã Tên gọi tắt Tên chức năng

1 F001 Authenticate Login, Logout, Register 1 F002 Manage Profile Magage User Profile 1 F003 Manage Feeds Posts, Remove Feeds

1 F004 Manage Friends Invite, Accept, Refuse, Remove Friends

1 F005 Checkins Checkins Place 1 F006 View Near

Friends Show on maps/List Near Friends 1 F007 View Near Places Show on maps/List Near Places 1 F008 View Near Users Show on maps/List Near Users 1 F009 View Feeds View Friends/ User Feeds 1 F010 View Profile View User Profile only 1 F011 View Place View Place detail 1 F012 Vote Vote place/feed 1 F013 Search Search in places/users

* Sơ đồ use case:

* Mô tả các chức năng :

- Login (F001a)

+ Mô tả: User login vào trang joob.com trên điện thoại. + Quy trình thực hiện

User truy cập vào trang wordpress. User nhập username và password.

Hệ thống kiểm tra thông tin Login và thông báo.

- Nếu thông tin sai: thông báo cho user login lại.

- Nếu thông tin đúng: thông báo thành công và redirect đến trang chủ. + Yêu cầu

Mã nghiệp

vụ Mã Yêu cầu Mô tả yêu cầu

UR001a.01 F001a.01 Kiểm tra thông tin user và trả về kết quả đúng như quy trình.

UR001a.02 F001a.02 Ngăn chặn các hình thức truy cập trái phép.

Bảng 5a – Mô tả yêu cầu phía người dùng

- Logout (F001b)

+ Mô tả: User logout khỏi trang joob.com. + Quy trình thực hiện

User ấn vào link Logout.

User xác nhận lại hành động Logout. Hệ thống logout user.

+ Yêu cầu Mã nghiệp

vụ Mã Yêu cầu Mô tả yêu cầu UR001b.01 F001b.01 Logout thành công.

Bảng 5b – Mô tả yêu cầu phía người dùng

- Register (F001c)

+ Mô tả: User đăng ký thành viên trong trang joob.com. + Quy trình thực hiện (adsbygoogle = window.adsbygoogle || []).push({});

User truy cập vào trang đăng ký.

User nhập thông tin cá nhân: email, password, confirm password. Hệ thống kiểm tra thông tin đăng ký và thông báo.

- Nếu thông tin sai: thông báo cho user sửa lại lại.

- Nếu thông tin đúng: thông báo đăng ký thành công và redirect đến trang chủ.

+ Yêu cầu Mã nghiệp

vụ Mã Yêu cầu Mô tả yêu cầu

UR001c.01 F001c.01 Kiểm tra thông tin user và trả về kết quả đúng như quy trình.

UR001c.02 F001c.02 Ngăn chặn các hình thức phá hoại hệ thống

Bảng 5c – Mô tả yêu cầu phía người dùng

3.2.3.2. Các chức năng của quản trị hệ thống (admin):

* Danh sách các chức năng :

Cấp Mã Tên gọi tắt Tên chức năng

1 F014 Manage Users View, Filter, Change User-state 1 F015 Manage Places View, Filter, Add, Edit, Delete places

* Sơ đồ use case:

Hình 10 – Sơ đồ usecase của quản trị trong mạng xã hội Joob

* Mô tả các chức năng :

- Manage User (F014)

+ Mô tả: Admin vào trang joob.com/admin/users trên máy tính. + Quy trình thực hiện

Admin vào trang joob.com/admin trên máy tính.

Hệ thống kiểm tra admin đã Login hay chưa. - Nếu đã login thì tiếp tục.

- Nếu chưa login thì redirect đến trang Login. Hệ thống liệt kê danh sách các user có trong hệ thống.

Admin chỉnh sửa thông tin của user (quyền, trạng thái) và click vào Cập nhật. - Nếu thành công: thông báo thành công.

+ Yêu cầu Mã nghiệp

vụ Mã Yêu cầu Mô tả yêu cầu

UR014.01 F014.01 Chỉnh sửa thông tin user theo thiết lập của admin. UR014.02 F014.02 Hiển thị danh sách user theo yêu cầu tìm kiếm.

Bảng 7a – Mô tả yêu cầu phía quản trị

- Manage Place (F015)

+ Mô tả: Admin vào trang joob.com/admin/places trên máy tính. + Quy trình thực hiện

Admin vào trang joob.com/admin/places trên máy tính. Hệ thống kiểm tra admin đã Login hay chưa.

- Nếu đã login thì tiếp tục. (adsbygoogle = window.adsbygoogle || []).push({});

- Nếu chưa login thì redirect đến trang Login. Hệ thống liệt kê danh sách các địa điểm có trong hệ thống.

Admin chỉnh sửa thông tin của từng địa điểm (quyền, trạng thái) và click vào Cập nhật.

- Nếu có lỗi: hiển thị thông báo và yêu cầu nhập lại. - Nếu thành công: thông báo thành công.

+ Yêu cầu Mã nghiệp

vụ Mã Yêu cầu Mô tả yêu cầu

UR015.01 F015.01 Chỉnh sửa thông tin địa điểm theo thiết lập của admin.

UR015.02 F015.02 Hiển thị địa điểm theo tìm kiếm

Bảng 7b – Mô tả yêu cầu phía quản trị

3.3. Thiết kế hệ thống

3.3.1. Thiết kế thành phần

Mạng xã hội Joob được thiết kế sử dụng Joo framework và bộ thư viện lập trình Joob Lib. Thiết kế thành phần của hệ thống có thể được mô tả qua biểu đồ sau :

Hình 11 – Biểu đồ thành phần tổng quan mạng xã hội Joob

Như sơ đồ trên, phần mỏy khỏch của mạng xó hụi Joob được xây dựng trên nền Joo Framework, với các portlet và plugin của riêng hệ thống.

Còn Joob Lib được triển khai phớa mỏy khỏch của hệ thống theo kiến trúc MVC, với các Module và Model được phát triển dựa trên Joob Lib. Hệ thống tận dụng được rất nhiều điểm mạnh của Joob Lib, như đơn giản hóa việc lập trình với cơ sở dữ liệu, cung cấp nội dung cho mỏy khỏch dưới dạng JSON, kiến trúc 3 thành phần MVC lỏng lẻo.

3.3.2. Thiết kế cơ sở dữ liệu

Hệ thống bao gồm 2 đối tượng chính : người sử dụng và địa điểm. Các quan hệ khác được bổ sung nhằm thực hiện các tính năng của hệ thống gồm : friends, feeds, votes, notifications, checkins.

Sau đây là thiết kế chi tiết cơ sở dữ liệu của hệ thống và các ràng buộc của từng quan hệ :

3.3.3. Thiết kế các module của hệ thống

3.3.3.1. Biểu đồ lớp thành phần Model (Model Component)

Hình 13 – Biểu đồ lớp thành phần Model

Hệ thống gồm có 8 class Model tương ứng với 8 bảng trong cơ sở dữ liệu như trình bày ở phần 3.3.2. Các class này đều kế thừa lớp Joob_Db_Table.

Ngoài ra có 2 class phụ là Model_Map, Model_PlaceGroup không lưu trữ trong cơ sở dữ liệu.

Class Friendship và FeedUser kế thừa lớp Joob_Db_Relation ánh xạ mối quan hệ bạn bè (friendship) giữa user-user và feed-user.

3.3.3.2. Biểu đồ lớp thành phần Module (Controller component)

Hình 14 – Biểu đồ lớp thành phần Module

Tất cả các lớp Module trong hệ thống đều kế thừa Joob_Controller_Task, tương đương với thành phần Controller. Trong đó, mỗi Task tương đương với một Action như trong Zend Framework.

Mô tả cụ thể của từng class trong thành phần Module này như sau :

BaseAjaxModule

Lớp cơ bản cho các Module khác, cung cấp một số tác vụ nền như :

• getUser : Lấy đối tượng User hiện tại (adsbygoogle = window.adsbygoogle || []).push({});

• postDispatch : Kế thừa lại hàm của Joob, sử dụng để hiển thị nội dung AjaxView trả về.

• checkPersistent : Được gọi khi không tìm thấy thông tin về người dùng hiện tại ở session. Hàm này phục vụ cho chức năng ô Tự động đăng nhập ằ, thực hiện bằng cách kiểm tra cookie để đối chiếu với cơ sở dữ liệu

UserModule

Cung cấp các dịch vụ liên quan đến quản lý người dùng như :

• checkLoginTask : kiểm tra người dùng đã đăng nhập hay chưa

• registerTask/loginTask/logoutTask : đăng ký, đăng nhập và đăng xuất

• getNearFriendsTask/getNearPlacesTask : tìm kiếm cỏc địa điểm hay bạn bè gần chỗ mình

PlaceModule

Cung cấp các dịch vụ liên quan đến địa điểm như :

• checkinTask/checkoutTask : Cập nhật với hệ thống về địa điểm hiện tại của bạn để hệ thống có thể thông báo với bạn bè của bạn thông qua feed.

• getPlaceDetailTask : Lấy thông tin chi tiết của một địa điểm

• voteTask : vote cho địa điểm

FeedModule

Cung cấp các dịch vụ liên quan đến Feed

• loadFeedsTask: Tải về các feed của user hiện tại hay của một người chỉ định

• postFeedTask: Gửi một feed mới.

• removeFeedTask: Xóa một feed của mình. 3.3.3.3. Biểu đồ các lớp Javascript

Các lớp Javascript trong Joob bao gồm các lớp thuộc cỏc gúi Porlets, Plugins thực thi các lời gọi Ajax đến thành phần Module phía server của hệ thống. Các lớp Portlet và Plugin này tương đương với các Task trong các lớp thuộc gói Module, do đó không trình bày lại ở đây nữa.

Ngoài ra, để phục vụ cho tính năng về địa điểm, Joob cú thờm class Map.js : sử dụng bộ thư viện Google Maps API để thực thi các tác vụ trên bản đồ. Thiết kế của lớp Map này như sau :

Hình 15 – Sơ đồ lớp Map.js

Một số hàm chính của lớp Map :

• getCurrentLatLng : Lấy tọa độ (kinh độ - vĩ độ) hiện tại của người dùng

• markLocation : Đánh dấu một địa điểm trên bản đồ bằng kí hiệu

• setMap : Khởi tạo và hiển thị bản đồ tại một vùng xác định trong DOM

• showFriendOnMap : Hiển thị bạn bè ở gần trên bản đồ

• showUserOnMap : Hiển thị những người dùng khác của hệ thống ở gần

• searchAddress : tìm kiếm địa điểm trên bản đồ

• searchMap : tìm kiếm địa điểm (đường phố) trên bản đồ và các địa điểm có sẵn trong hệ thống

• focus : Chuyển tới một tọa độ trên bản đồ 3.3.4. Thiết kế giao diện người dùng

Mạng xã hội địa điểm Joob được phát triển trên điện thoại di động nên giao diện được thiết kế đơn giản, ớt cỏc form control và tối giản hóa cỏc thao tác của người sử dụng. Dưới đây là sơ đồ thiết kế sơ bộ về các trang chính và flow cho ứng dụng : (adsbygoogle = window.adsbygoogle || []).push({});

3.4. Kết quả và đánh giá

Một phần của tài liệu xây dựng bộ thư viện lập trình joob lib ứng dụngxây dựng mạng xã hội địa điểm trên di động (Trang 37 - 52)