DỊCH VỤ THÔNG TIN BẤT ĐỘNG SẢN TRÊN BẢN ĐỒ TRỰC TUYẾN

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ


Phạm Cẩm Ngọc


DỊCH VỤ THÔNG TIN BẤT ĐỘNG SẢN TRÊN BẢN
ĐỒ TRỰC TUYẾN






KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY

Ngành: Công nghệ thông tin

HÀ NỘI – 2008
















ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ


Phạm Cẩm Ngọc


DỊCH VỤ THÔNG TIN BẤT ĐỘNG SẢN TRÊN BẢN
ĐỒ TRỰC TUYẾN

KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY

Ngành: Công nghệ thông tin


Cán bộ hướng dẫn: TS. Nguyễn Hải Châu







HÀ NỘI - 2008



LỜI CÁM ƠN

Để hoàn thành bài luận tốt nghiệp, lời đầu tiên tôi xin bầy tỏ sự cám ơn đặc
biệt tới TS. Nguyễn Hải Châu, người đã giúp tôi lựa chọn đề tài, đưa ra những
nhận xét quý giá và trực tiếp hướng dẫn tôi trong suốt quá trình nghiên cứu và
hoàn thành luận văn tốt nghiệp. Tôi xin chân thành cám ơn các thầy cô trong khoa

CNTT- trường Đại học Công nghệ- ĐHQG Hà Nội đã truyền đạt kiến thức cho tôi
trong suốt khoảng th
ời gian học tập tại trường.
Trong quá trình hoàn thành luận văn tốt nghiệp, tôi đã nhận được rất nhiều
sự giúp đỡ, động viên từ gia đình, thầy cô và bạn bè. Tôi xin gửi lời cám ơn tới
những người bạn của tôi, luôn bên cạnh tôi để chia sẻ những kinh nghiệm trong
học tập cũng như trong cuộc sống.
Cuối cùng, tôi xin gửi lời cảm ơn sâu sắc nhất tới gia
đình của mình, nguồn
động viên và cổ vũ lớn lao, và là động lực giúp tôi thành công trong công việc và
trong cuộc sống.
















TÓM TẮT NỘI DUNG

Ngày nay, ở nhiều nơi trên thế giới, đặc biệt là tại các thành phố lớn, nhu

cầu về nhà ở rất lớn. Mọi người đều có nhu cầu tìm cho mình những căn hộ ưng ý,
thỏa mãn được nhiều nhất những yêu cầu của bản thân. Họ tìm thấy những thông
tin như vậy từ các website thông tin bất động sản. Xây dựng một hệ thống cung
cấp thông tin bất động sả
n đáp ứng được đầy đủ các yêu cầu của người dùng
không phải dễ. Đã có nhiều công ty cũng như tổ chức đứng ra xây dựng những hệ
thống như vậy, nhưng không phải tất cả họ đều thành công. Xuất phát từ thực tế
đó, kết hợp với việc nghiên cứu một số website thông tin bất động sản, nghiên cứu
các dịch vụ bản đồ
trực tuyến của Google Maps, luận văn hướng đến xây dựng
một website thông tin bất động sản tận dụng được các ưu điểm của các website đi
trước đồng thời khắc phục một số hạn chế của chúng.

MỤC LỤC

DANH MỤC THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT 1
LỜI MỞ ĐẦU 2
CHƯƠNG 1. TỔNG QUAN VỀ THÔNG TIN BẤT ĐỘNG SẢN 4
TRÊN BẢN ĐỒ TRỰC TUYẾN 4
1.1.

Giới

thiệu
4
1.2.

Một số website thông tin bất động sản ở Việt Nam
4
1.3.

Ứng dụng mashup
6
1.3.1.

Web 2.0
6
1.3.2.

Mashup
8
1.4.


Housingmaps - một website điển hình sử dụng công nghệ mashup
13
1.5.

Đôi nét về hệ thống cần xây dựng
14
CHƯƠNG 2. GOOGLE MAPS VÀ GOOGLE MAP API 15
2.1.

Google Maps
15
2.2.

Google Map API
16
2.2.1.

Map Basics
16
2.2.2.

Events
20
2.2.3.

Controls
24
2.2.4.

Map Overlays

26
CHƯƠNG 3. THIẾT KẾ HỆ THỐNG WEBSITE THÔNG TIN BẤT ĐỘNG
SẢN TRÊN BẢN ĐỒ TRỰC TUYẾN 31

3.1.

Phát biểu bài toán
31
3.2.

Mô tả tổng quan hệ thống
31
3.2.1.

Kiến trúc hệ thống
31
3.2.2.

Các thành phần của hệ thống
32
3.3.

Thiết kế hệ thống
33
3.3.1.

Thiết kế dữ liệu hệ thống
33
3.3.2.


Thiết kế chức năng hệ thống
35
3.3.3.

Thiết kế giao diện hệ thống
41
3.3.4.

Thiết kế chương trình
48
KẾT LUẬN 50
TÀI LIỆU THAM KHẢO 51
1


DANH MỤC THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT

AJAX Asynchronous JavaScript and XML- JavaScript và XML
không đồng bộ.
API

Application Programming Interface-

Giao diện chương trình
ứng dụng.
CSS Cascading Style Sheets- Các tập tin định kiểu theo tầng.
DOM Document Object Model- Mô hình đối tượng văn bản.
DHTML Dynamic HTML- HTML động.
HTML Hyper Text Markup Language- Ngôn ngữ đánh dấu siêu văn
bản.

RSS Really Simple Syndication- Tiêu chuẩn định dạng tài tiệu
dựa trên XML
XML Extensible Markup Language- Ngôn ngữ đánh dấu mở rộng.











2


LỜI MỞ ĐẦU

Ở nước ta, trong những năm vừa qua, nhu cầu về mua bán nhà đất của các
nhà đầu tư bất động sản cũng như nhu cầu bán và cho thuê căn hộ của người dân
không ngừng tăng cao. Đã có rất nhiều tổ chức, các công ty bắt tay vào việc tạo ra
các website cung cấp thông tin về bất động sản.
Yêu cầu quan trọng đối với một website thông tin bất động sản là thông tin
đưa ra phải tuyệt đối chính xác. Trong đ
ó, việc cung cấp cho người dùng một cách
trực quan nhất vị trí của từng căn hộ đóng vai trò then chốt, quyết định sự thành
công của một website. Những website này đã tìm được cho mình giải pháp, đó là
dịch vụ bản đồ trực tuyến của Google Maps. Với Google Maps, chúng ta sẽ sử
dụng các API sẵn có, tải bản đồ về ứng dụng của ta đồng thời kết hợp cơ sở d

ữ
liệu xây dựng nên một ứng dụng hoàn chỉnh. Ở Việt Nam hiện nay, khó có thể
thống kê được tổng số các website như vậy. Tuy nhiên, xét về tính hiệu quả và
tính lâu dài, thì chỉ cá biệt một vài trang tạo được uy tín và làm hài lòng người sử
dụng [2].
Luận văn “Dịch vụ thông tin bất động sản trền bản đồ trực tuyến” hướng
đến việc sử dụng các dịch vụ s
ẵn có của Google Maps xây dựng nên một website
thông tin bất động sản. Ở đó, người sử dụng có thể dễ dàng thao tác và nhận được
những thông tin cần thiết một cách chính xác và đầy đủ nhất. Luận văn gồm 3
chương:
Chương 1: Trong phần này, luận văn trình bày một cách tổng quan nhất về
các ứng dụng mashup, đồng thời giới thiệu một số website thông tin bất động sản
điển hình
ở Việt Nam cũng như trên thế giới.
Chương 2: Phần chương 2 giới thiệu những vấn đề lý thuyết liên quan đến
Google Maps và Google Maps API. Những lý thuyết được đề cập đến bao gồm
các đối tượng bản đồ, các sự kiện, các điều khiển …
3


Chương 3: Chương này sẽ tập trung vào việc phân tích thiết kế và xây dựng
một website thông tin bất động sản dựa trên những khảo sát thực tế trong chương
1và lý thuyết tìm hiểu trong chương 2.

4


CHƯƠNG 1. TỔNG QUAN VỀ THÔNG TIN BẤT ĐỘNG SẢN
TRÊN BẢN ĐỒ TRỰC TUYẾN

1.1.

Giới

thiệu

Cuối năm 2007, khi thị trường bất động sản (BĐS) bắt đầu nóng dần lên,
nắm bắt được nhu cầu của các nhà đầu tư bất động sản, nhiều công ty đã đổ xô làm
trang web bất động sản. Sự bùng nổ gần đây của một loạt trang web chuyên về bất
động sản đã cho thấy phần nào tính tiện ích cũng như hiệu quả kinh tế mang lại
củ
a nó. Nhưng đằng sau các trang web BĐS còn tồn tại những gì?

1.2.

Một số website thông tin bất động sản ở Việt Nam
Trên thực tế, số lượng người quan tâm và có nhu cầu trao đổi, mua bán, tìm
hiểu thông tin trong lĩnh vực BĐS hiện nay đang rất lớn. Trong khi đó, số lượng
đầu báo có chuyên mục riêng cho lĩnh vực BĐS hiện nay đang hạn chế, có thể kể
đến: Báo Xây dựng, Sài Gòn Giải Phóng, Diễn Đàn Doanh Nghiệp, Thị Trường
định kỳ có mục dành riêng cho thị trường nhà đất.
Tuy vậy, xét cho cùng, chưa có một tờ báo nào chuyên hẳn về th
ị trường
nhà đất. Do đó, việc các website tổng hợp lại thông tin từ nhiều nguồn, kết hợp với
một số tiện ích miễn phí trên mạng được xem là đánh đúng vào nhu cầu thiết yếu
của người dùng.
Các thông tin, tin tức về BĐS trên thị trường luôn nóng theo từng ngày,
từng giờ, nên các trang web tổng hợp có nhiều thuận lợi hơn so với báo giấy. Các
tin tức trong ngành được cập nhật mộ
t cách nhanh chóng và tổng hợp theo từng
chuyên đề để người dùng dễ dàng theo dõi. Ngoài ra, các website còn bổ sung
nhiều tiện ích miễn phí để thu hút người dùng, như: Diễn đàn, chợ ảo BĐS, tư vấn
xây dựng, nội thất [2].
5


Thử lướt qua một loạt các trang web BĐS như nhadat.timnhanh.com,
muaban.net, diaoconline.vn, metvuong.com, ehouse.com.vn, nhadatviet.vn …,
người xem đều có chung một nhận định, hầu hết các trang web đều có cách trình
bày đẹp, bắt mắt, thông tin đa dạng và phong phú. Một số trang web như
ehouse.com.vn, metvuong.com còn trang bị hệ thống định vị bản đồ kỹ thuật số
hiện đại, cho phép người truy cập chỉ cần "click" chuột vài cái là có thể tìm thấy
ngay những căn nhà, căn hộ, dự án mà mình cầ

n tìm nằm ở đâu, vị trí nào ở TP
Tuy nhiên, nhược điểm chung của một số trang web này vẫn là thông tin cũ
và thiếu chính xác. Đã có trường hợp khi một khách hàng truy cập một trang web
BĐS tìm mua một căn nhà sở hữu nhưng khi gọi đến địa chỉ căn nhà cần mua, thì
mới biết người chủ đã bán cách đây nửa năm rồi! Hay như một số thông tin giá
nhà đất trên các trang web không cập nhật nhanh, không theo kị
p với tình hình
biến động của giá vàng cũng như USD trên thế giới nên nếu ai quá tin tưởng vào
những thông tin này có thể dẫn đến những thất bại trong kinh doanh. Đây là một
thách thức rất lớn với các website BĐS vì chỉ một vài lần khách hàng tìm đến
website của mình mà không thấy thông tin mới, họ sẽ đi luôn, không quay lại nữa.
Ngoài ra, các trang web này do quá chú trọng về mặt giao diện, sử dụng đồ họa
công nghệ cao, mà với Ehouse là công nghệ
tự động định vị trên hệ tọa độ của bản
đồ kỹ thuật số nên tốc độ đáp ứng yêu cầu người sử dụng chậm, mất thời gian
trong việc định vị trên bản đồ [3].
Bên cạnh đó, ở Việt Nam hiện nay còn có một số website chuyên làm về
bản đồ trực tuyến, cho phép người dùng tìm kiếm địa điểm, đường đi hay thậ
m chí
là xem thông tin dự báo thời tiết một vùng, miền nào đó, có thể kể ra như :
diadiem.com, thodia.vn, didaudidau.com, bandia.baamboo.com,
vietbando.com.vn, diadanh.net … Điểm chung của các trang diadiem.com,
didaudidau.com, bandia.baamboo.com, thodia.vn là đều sử dụng các API của
Google Map kết hợp với ảnh bản đồ tạo nên bản đồ trực tuyến. Các trang đều có
điểm hạn chế là ảnh bản đồ sử dụng là ảnh bitmap, không phải ảnh vector nên có
giới hạn về độ sắc nét của b
ản đồ dẫn đến giới hạn trong độ zoom ảnh bản đồ. Đối
với vietbando.com.vn và diadanh.net, hai trang có điểm chung là cùng sử dụng
ảnh vệ tinh của Google Map để tự vẽ và xây dựng nên bản đồ của mình. Đây là
6

điểm hạn chế lớn, vì khi các ảnh vệ tinh của Google Map bị thay đổi, nếu không
kịp cập nhật, toàn bộ dữ liệu bản đồ của hệ thống sẽ không chính xác. Khi đó, vị
trí xuất hiện của một đối tượng trên bản đồ sẽ bị xê dịch, không còn chính xác,
một đoạn đường có thể bị lệch thành hai đoạn đường khác nhau…

1.3.

Ứng dụng mashup
1.3.1.

Web 2.0
Web 2.0 được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web
mới có những thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở
cách thức sử dụng - hình thành nên môi trường cộng đồng, ở đó mọi người cùng
tham gia đóng góp cho xã hội "ảo" chứ không đơn thuần chỉ "duyệt và xem". Vậy
Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ
"Web 2.0" đang trở nên thịnh hành. Thự
c chất, Web 2.0 có nghĩa là sử dụng web
đúng với bản chất và khả năng của nó.
Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm
kết nối các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ
thông tin hiệu quả. Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee
cũng nhằm mục tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lên
Internet và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-
Lee vi
ết bao gồm cả công cụ soạn thảo trang web). Tuy nhiên, sau đó web đã phát
triển theo hướng hơi khác mục tiêu ban đầu.
Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0)

chủ yếu gồm các website "đóng" của các hãng thông tấn hay các công ty nhằm
mục đích tiếp cận độc giả hay khách hàng hiệu quả hơn. Nó là phương tiện phát
tin hơn là phương tiện chia sẻ thông tin. Chỉ đến gần
đây, với sự xuất hiện của
nhiều kỹ thuật mới như blog (hay weblog), wiki web mới trở nên có tính cộng
đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sự của
nó.
7


Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của
O’Reilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do O’Reilly Media và
MediaLive International tổ chức vào tháng 10/2004. Dougherty không đưa ra định
nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0: "DoubleClick
là Web 1.0; Google AdSense là Web 2.0. Ofoto là Web 1.0; Flickr là Web 2.0.
Britannica Online là Web 1.0; Wikipedia là Web 2.0. v.v ".
Sau đó Tim O’Reilly, chủ tịch kiêm giám đốc điều hành O’Reilly Media,
đã đúc kết lại 7 đặc tính của Web 2.0:
1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng.
2. Tập hợp trí tuệ cộng
đồng.
3. Dữ liệu có vai trò then chốt.
4. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không
ngừng.
5. Phát triển ứng dụng dễ dàng và nhanh chóng.
6. Phần mềm có thể chạy trên nhiều thiết bị.
7. Giao diện ứng dụng phong phú.
Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai
trò nền tảng ứng dụng. Nhưng đế
n hội thảo Web 2.0 lần 2 tổ chức vào tháng

10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.
Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0. Hàng loạt
công nghệ mới được phát triển nhằm làm cho ứng dụng trên web mạnh hơn, nhanh
hơn và dễ sử dụng hơn, được xem là nền tảng của Web 2.0. Kiến trúc công nghệ
của Web 2.0 hiện vẫn đ
ang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ,
cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng.
Cung cấp nội dung
Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ
chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng
sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin). Có
8


nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất
cả đều dựa trên XML. Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN
dùng để mở rộng tính năng của website hay cho phép người dùng tương tác.
Dịch vụ web
Các giao thức truyền thông 2 chiều là một trong những thành phần then
chốt của kiến trúc Web 2.0. Có hai loại giao thức chính là REST và SOAP. REST
(Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền
đi trạng thái của tất cả giao dị
ch; còn SOAP (Simple Object Access Protocol) thì
phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ
web đều được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có
thể có ngoại lệ.
Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object
Properties Broadcasting Protocol do Chris Dockree phát triển. Giao thức này cho
phép các đối tượng ảo (tồn tại trên web) tự biết chúng "là gì và có thể làm gì”, nhờ
vậy có thể tự liên lạ

c với nhau khi cần.
Phần mềm máy chủ
Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng
hơn đến phần mềm làm việc ở background. Cơ chế cung cấp nội dung chỉ khác
phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch
vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn.
Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm hai
loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc
xây dựng ứng dụng "gắn thêm" cho máy chủ web, có sử dụng giao tiếp API [14].

1.3.2.

Mashup
Khi Web 2.0 đang dần trở nên thịnh hành thì cùng với nó công nghệ
mashup ra đời và mặc dù chỉ mới phát triển trong thời gian gần đây nhưng nó đã
tạo nên một cuộc cách mạng lớn trong lĩnh vực này. Mashup cho phép mọi người
thể hiện khả năng sáng tạo bất tận bằng cách "nối" hai hay nhiều ứng dụng web lại
9


với nhau. Thuật ngữ này được nói đến đã lâu nhưng nay mới được giới công nghệ
chú trọng hơn.
Theo từ điển trực tuyến Wikipedia, mashup được định nghĩa như một công
cụ có khả năng lấy thông tin từ nhiều nguồn dữ liệu khác nhau nhằm tạo ra một
dịch vụ tích hợp đơn nhất và hoàn toàn mới mẻ. Người sử dụng không cần phải
am hiểu về kỹ thuật mà chỉ cần xây dựng dịch vụ dựa trên giao diện lập trình ứng
dụng sẵn có như của Google, Amazon, Flickr

Hình 1: Mô hình ứng dụng mashup.

Mashup được phân làm bốn loại tiêu biểu :
10


• Consumer mashup: Trích xuất dữ liệu khác nhau từ nhiều nguồn và
được tập hợp lại dưới một giao diện đồ họa đơn giản.
• Data mashup: Trộn dữ liệu cùng loại từ nhiều nguồn, chẳng hạn gộp dữ
liệu từ các RSS feed vào một feed đơn nhất.
• Business mashup: Sử dụng cả hai loại mashup trên, thường là tích hợp
data ở cả trong và ngoài công ty. Ví dụ, công ty bất động s
ản A có thể
phân tích thị phần khi so sánh số căn nhà họ bán được tuần qua với danh
sách tổng các ngôi nhà được bán trên thị trường.
• Telecom mashup là ứng dụng viễn thông tổng hợp, chẳng hạn kết hợp
dịch vụ tin nhắn từ công ty A, nhạc chuông của công ty B, thư thoại
(voicemail) của công ty C
Mashup thể hiện rõ đặc trưng của Web 2.0 là "cá nhân hóa thông tin".
Chẳng hạn, một nhà lập trình có thể tạo website chia sẻ ảnh và video của riêng
mình khi kết hợp hai dịch vụ YouTube và Flickr. Hay người sử dụng có thể "trộn"
dữ liệu về tình trạng giao thông ở Hà Nội với Google Maps để lập bản đồ các điểm
thường xuyên tắc đường trong thành phố [14].
Thông thường các dịch vụ web dùng mashup kết hợp bản đồ với nhiều loại
dữ liệu từ nhiều nguồn trên web. Trong năm qua, chúng ta đã chứng kiến nhiều
site mới nổ
i đình nổi đám như Zillow.com dự đoán giá bất động sản hay
AuctionMapper thể hiện các kết quả tìm kiếm eBay trên bản đồ để giúp định vị
những người bán hàng gần nhất.
Nhưng mashup còn có thể làm được nhiều việc hơn là những bản đồ có chú
giải cho những website thông thường. Kỹ thuật này cũng có thể áp dụng cho
những ứng dụng nghiệp vụ phục vụ hoạ

t động của doanh nghiệp. Vì mashup dựa
trên nền tảng kỹ thuật hiện có - JavaScript, XML và DHTML, kết hợp với kết nối
Internet tốc độ cao để hỗ trợ giao diện đồ họa và tính năng phong phú - nên không
yêu cầu đầu tư nhiều. Mashup đang bắt đầu được xem xét một cách nghiêm túc
như là giải pháp cho các vấn đề tích hợp, ứng dụng vốn thường là gánh nặng trước
đây.
11


Cách thức tích hợp linh hoạt này đã được áp dụng trước đây, như các site
thương mại điện tử kết hợp dữ liệu giám sát của UPS hay FedEx (các dịch vụ vận
chuyển hàng hoá) với thông tin đơn hàng để cung cấp màn hình tổng hợp về tình
trạng đơn hàng. Trong môi trường doanh nghiệp, các hãng cung cấp giải pháp
portal (cổng thông tin) như IBM và Plumtree đã từ lâu cung cấp các công cụ đồ
hoạ để cho phép kết hợp các nguồ
n dữ liệu một cách dễ dàng, tạo nên các ứng
dụng web tùy biến đơn giản [17].
Trên thực tế, chúng ta thường gặp bốn nội dung chính của mashup:
• Bản đồ: Chẳng hạn người dùng lập bản đồ về bất động sản, cửa hàng
quà tặng, trường học tại một địa phương qua Google Maps.
• Video - ảnh: Ví dụ như dùng giao diện lập trình ứng dụng API của
Flickr
để tạo mashup chia sẻ ảnh trên những site khác.
• Tìm kiếm - mua sắm: Là việc tích hợp search engine để tra cứu thông
tin về du lịch, nhà hàng
• Tin tức: Tiêu biểu nhất là Digg.com - dịch vụ hỗ trợ người sử dụng tập
hợp tin tức về công nghệ, văn hóa từ hàng loạt website khác nhau.
Một số khảo sát gần đây cho thấy, trong các nội dung trên của mashup, các
ứng dụng mashup cho tiện ích bản đồ chiếm tỉ l
ệ lớn nhất, bằng một nửa so với

các nội dung còn lại.
12



Hình 2. Tỉ lệ ứng dụng các tiện ích của mashup

Tuy nhiên, vì các mashup dễ tạo hơn so với nhiều ứng dụng truyền thống
nên chúng có thể không được kiểm soát kỹ lưỡng về mặt bảo mật. Nhiều ứng dụng
loại này dựa trên JavaScript vốn có nhiều kẽ hở. Việc cài đặt thoải mái các thành
phần mashup bên ngoài là mối hiểm họa vì bạn không biết rõ bên trong nó thực
hiện những tác vụ gì. Mặc dù hấp dẫn với những ứng dụng phát triển nhanh và g
ọn
nhẹ nhưng mashup cũng có những hạn chế. Theo Stefan Andreasen - giám đốc kỹ
thuật của Kapow Technologies, "các mashup có ý nghĩa cho 80% qui trình CNTT
thông thường. Nhưng không công ty nào sử dụng mô hình như mashup cho thông
tin quan trọng". Vì thế, khi tạo các ứng dụng dựa trên mashup cần tham khảo một
số quy tắc sau:
• Dùng các nguồn dữ liệu bên ngoài có giấy phép để tránh những quảng
cáo không mong muốn; với các nguồn miễn phí, cần nắm rõ các điều
khoản thỏa thuậ
n sử dụng.
• Tạo thư mục các nguồn dữ liệu nội bộ dạng XML và RSS để cung cấp
cho những người phát triển mashup trong bộ phận CNTT cũng như ở
các bộ phận nghiệp vụ khác.
13


• Sử dụng mashup như là tùy chọn tích hợp cho các công việc thông
thường như giám sát tình trạng đơn hàng với các đối tác bên ngoài.

• Các công cụ mashup vẫn còn trong giai đoạn phát triển, hãy tìm công cụ
tốt nhất đáp ứng nhu cầu hiện tại của bạn nhưng vẫn tiếp tục xem xét
những công cụ mới.
• Phát triển và bắt buộc tuân thủ các chính sách sử dụng mashup nhưng
đừng quá cứng nhắc, nế
u không bạn sẽ thủ tiêu mục đích của việc phát
triển linh hoạt.

1.4.

Housingmaps - một website điển hình sử dụng công nghệ mashup
Houingmaps
(
)- một website thông tin bất
động sản ở Mỹ là sự kết hợp hoàn hảo giữa Google Maps và Craigslist cung cấp
cho người sử dụng một cách trực quan nhất các thông tin về bất động sản . Nếu
như Google Maps là website cung cấp các API cho giải pháp bản đồ trực tuyến thì
Craigslist là website giao vặt nổi tiếng được chấp nhận ở nhiều nơi trên thế
giới.Với Housingmaps người sử dụng có thể dễ dàng tìm thấy các c
ăn hộ họ cần
đồng thời xác định được chính xác vị trí của các căn hộ đó trên bản đồ. Giao diện
của Housingmaps tương đối đơn giản, chúng ta không phải mất quá nhiều thời
gian cho việc sử dụng nó. Housingmaps có tất cả các tính năng của cả Google
Maps cũng như Craigslist. Chúng ta có thể dễ dàng di chuyển xung quanh bản đồ
đến vị trí mong muốn bằng cách sử dụng con trỏ hướng trên bản
đồ, có thể phóng
to, thu nhỏ bản đồ. Housingmaps còn có các biểu tượng (icon) để xác định các
danh sách đối tượng của Craigslist. Những biểu tượng màu xanh đại diện cho các
thành phố, khi người dùng nhấn chuột chọn sẽ cho danh sách các căn hộ có nhu
cầu bán và cho thuê trong phạm vi thành phố. Biểu tượng màu đỏ và vàng đại diện

cho các căn hộ, với biểu tượng màu vàng thì căn hộ đó có kèm theo ảnh quảng bá
của mình. Housingmaps còn có các tính năng của Craigslist, cho phép người dùng
s
ử dụng tính năng lọc kết quả theo vị trí căn hộ, giá cả, số lượng phòng của căn hộ
… Đây là tính năng nổi trội của Housingmaps, cung cấp tiện ích lớn cho người
dùng. Danh sách các căn hộ của Craigslist nằm ở phía bên phải của bản đồ, bằng
14


một nhấp chuột, ta có thể có tất cả thông tin chi tiết theo danh sách trả về của
Craigslist. Housingmaps rất hữu dụng, đặc biệt khi chúng ta chuyển đến một thành
phố khác, rất dễ dàng ta có thể xác định được căn hộ phù hợp với nhu cầu của
mình.
Tuy nhiên, hạn chế của Housingmaps lại nằm ở chính ưu điểm của nó. Giao
diện của Housingmaps tương đối đơn giản, dễ sử
dụng nên không cung cấp được
thông tin đầy đủ cho người dùng. Một điểm hạn chế khác của Housingmaps đó là
nó chỉ cung cấp thông tin cho khoảng 40 thành phố ở Mỹ, trong khi nhu cầu tại
các thành phố lớn khác cũng rất cần thiết. Những điểm hạn chế này lại là ưu thế
của Mapskrieg- đối thủ mới và rất tiềm tàng của Housingmaps [4].

1.5.

Đôi nét về hệ thống cần xây dựng
Qua phân tích một số ưu điểm cũng như hạn chế của các website trên, luận
văn hướng tới việc xây dựng một hệ thống thông tin bất động sản tận dụng được
những ưu điểm của các website đó, đồng thời giải quyết được một số mặt hạn chế
đã phân tích ở trên
Hệ thống chúng ta xây dựng, trước hết sẽ
có giao diện gần giống với

Housingmaps, tương đối đơn giản, dễ sử dụng, khả năng đáp ứng nhu cầu cao, có
thêm các chức năng tìm kiếm, lọc thông tin phù hợp với nhu cầu của người sử
dụng. Hệ thống sẽ bổ sung thêm chức năng tìm kiếm trong một phạm vi bán kính
nhất định, hướng đến việc cập nhật thông tin mới và loại bỏ những thông tin cũ,
không còn giá trị. Việc loại bỏ thông tin cũ không phải là loại bỏ hoàn toàn, mà là
loại bỏ có sử dụng lại cho các mục đích khác, chẳng hạn như thống kê thông tin.




15


CHƯƠNG 2. GOOGLE MAPS VÀ GOOGLE MAP API

Thời gian gần đây, chúng ta đã khá quen thuộc với các khái niệm về
Google Maps và Google Map API. Nhưng cụ thể, Google Maps là gì? Google
Map API cung cấp những gì? Trong chương này chúng ta sẽ cùng tìm hiểu về
Google Maps và Google Map API.

2.1.

Google Maps
Google Maps là một dịch vụ của Google, cung cấp các ứng dụng và cộng
nghệ hoàn toàn miễn phí về dịch vụ bản đồ trên web, bao gồm Google Maps
website (website về Google Maps), Google Ride Finder (cho phép người lái xe xác
định được vị trí và hướng, cách thức để đi đến đích), các bản đồ nhúng trên các
website thông qua Google Map API…Với Google Maps, người sử dụng có thể có
nhiều tính năng tiện ích như :
• Kết hợp thông tin của các kết quả tìm kiếm về cùng một đị

a điểm như vị
trí, thông tin liên lạc, bình luận … Chẳng hạn, khi ta gõ truy vấn [ pizza
in San Jose, CA ], kết quả trả về sẽ là một danh sách vị trí, thông tin liên
lạc, hay giờ mở cửa, hình thức thanh toán, … của các nhà hàng.
• Người dùng có thể nhấp chuột và di chuyển bản đồ để hiển thị sang
vùng lân cận mà không cần phải đợi bản đồ nạp lại vùng đó.
• Google Maps còn có các chế độ hiển thị nh
ư Satellite, Terrain, … tùy
vào mục đích người dùng.
• Cũng giống như các dịch vụ bản đồ trực tuyến khác, Google Maps cung
cấp cơ chế Google Maps driving directions đưa ra đường đi giữa hai địa
điểm bất kỳ thuộc cùng quốc gia hay giữa hai quốc gia trên thế giới, sẽ
có nhiều đường đi khác nhau, mỗi đường đi sẽ có chi tiết về hành trình
cho người dùng lựa chọn.
16


• Google Maps cho phép các tương tác với bàn phím, giúp người dùng dễ
dàng hơn trong việc sử dụng. Người dùng chỉ đơn giản sử dụng các
phím Page Up, Page Down, Home và End để dịch chuyển bản đồ, điều
chỉnh độ Zoom bằng các phím +,
• Ngoài ra, thay vì bàn phím, người dùng có thể sử dụng chuột, điều
chỉnh Zoom bằng cách kích đúp chuột trái và phải, dịch chuyển bằng
cách giữ chuột trái và kéo …

2.2.

Google Map API
Cùng với Google Maps, Google đã tạo ra Google Map API giúp những
người phát triển dễ dàng tích hợp Google Maps vào các website kết hợp với dữ

liệu của họ. Sử dụng Google Map API, chúng ta có thể dễ dàng nhúng toàn bộ
Google Maps vào trong website của mình. Để sử dụng các API này, rất đơn giản,
trước tiên chúng ta cần đăng ký một khóa API. Khi đã nhận được khóa API, chúng
ta có thể phát triển các ứng dụng bản đồ trực tuyến dựa vào những kiến thức nền
t
ảng về đối tượng, sự kiện, điều khiển … của Google Map API.

2.2.1.

Map Basics
Phần tử cơ sở trong bất kỳ ứng dụng nào của Google Map API, là các đối
tượng bản đồ (map object) của nó. Để tạo các ứng dụng loại này, chúng ta cần biết
cách khởi tạo các map object, thiết lập kích thước, thuộc tính cho chúng. Để bắt
đầu chúng ta cùng xét ví dụ khá đơn giản sau đây.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
17


<script
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new
GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Trong ví dụ này, để sử dụng các API của Google Maps, trước tiên chúng ta
phải nạp các API này, bằng cách sử dụng thẻ script :
<script
src=
type="text/javascript"></script>
Để bản đồ hiển thị được trên trang web, chúng ta cần phải chuẩn bị trước
cho nó một vị trí để hiển thị. Việc này được thực hiện bằng cách tạo một phần t
ử
div và giữ một tham chiếu đến phần tử này trên DOM.

<div id="map_canvas" style="width: 500px; height: 300px"></div>
18


Ví dụ này tạo một phần tử div có tên là “map_canvas”, thiết lập kích thước
bằng cách sử dụng thuộc tính style. Trong trường hợp kích thước của bản đồ
không được chỉ định qua thuộc tính GMapOptions trong hàm tạo, kích thước bản
đồ sẽ là kích thước của phần tử chứa nó.
Khi đã có phần tử div này, chúng ta sử dụng JavaScript để tạo map object
var map = new GMap2(document.getElementById("map_canvas"));
GMap2 là một lớp trong JavaScript đại diệ

n cho lớp đối tượng bản đồ. Các
đối tượng của GMap2 định nghĩa một bản đồ trên trang web. Chúng ta có thể tạo
nhiều thể hiện của lớp, tức là có thể có nhiều bản đồ trên cùng một trang web.
Việc tạo một thể hiện mới của GMap2 sử dụng toán tử new của JavaScript.
Mỗi khi tạo ra một map object, chúng ta chỉ định cho nó một DOM node
trên trang web (thường là mộ
t phần tử div) như là một container chứa đựng nó.
Các HTML node là các lớp con của đối tượng document trong JavaScript, ta nhận
được tham chiếu của nó qua phương thức document.getElementById(). Sau khi đã
có một map object, việc tiếp theo cần làm là khởi tạo nó thông qua phương thức
setCenter(). Phương thức này yêu cầu môt tọa độ GLatLng (bao gồm kinh độ và vĩ
độ), một zoom level và phải được thực hiện trước tất cả các thao tác khác trên
map
object.
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Với một trang HTML, một DOM có thể được nạp thêm nhiều đối tượng
khác như các ảnh, các kịch bản … Để đảm bảo rằng bản đồ của ta được nạp lên
sau cùng, chúng ta chỉ thực hiện việc gọi hàm tạo các đối tượng GMap2 một lần
trong thẻ body
<body onload="initialize()" onunload="GUnload()">
Tương tự như Google Maps, các map object cũng được Google Map API
cung cấp các map type khác nhau, các
map type chuẩn bao gồm :
• G_NORMAL_MAP - kiểu hiển thị mặc định.
• G_SATELLITE_MAP - hiển thị theo kiểu ảnh vệ tinh.
19


• G_HYBRID_MAP – hiển thị kết hợp giữa nomal và satellite.
• G_DEFAULT_MAP_TYPES – một mảng của ba kiểu trên.

Các map object có thể được thiết lập kiểu hiển thị sử dụng phương thức
setMapType() của đối tượng GMap2. Đoạn code sau thiết lập chế độ hiển thị là
statelite:
var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
Mỗi map object cũng có thể tự hiển thị một c
ửa sổ thông tin (info window)
của kiểu GInfoWindow, cửa sổ này có nội dung là một đoạn HTML, và được hiển
thị trên của bản đồ. Một đối tượng GInfoWindow không có các hàm tạo, chúng
được tự động tạo ra và gắn vào bản đồ khi chúng ta tạo ra một map object. Chúng
ta không thể hiện thị nhiều hơn một info window tại cùng một thời điểm với một
map object cụ
thể, nhưng có thể di chuyển cũng như thay đổi nội dung của nó nếu
cần.
Lớp GMap2 cung cấp phương thức openInfoWindow(), lấy tham số là một
điểm và một phần tử DOM để hiển thị một info window. Phương thức
openInfoWindowHtml() cũng tương tự, nhưng nhận tham số thứ hai là một xâu
chứ không phải một phần tử DOM.
Ví dụ sau hiể
n thị một info window tại trung tâm của bản đồ với thông điệp
“Hello, world”.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
20



Hình 3. Info Window

2.2.2.

Events
Đối với mỗi trình duyệt, JavaScript được xem là một even driven, nghĩa là
JavaScript đáp ứng với các tương tác bằng cách tạo ra các sự kiện và mong muốn
rằng chương trình sẽ lắng nghe các sự kiện này. Chẳng hạn, với một trình duyệt,
các tương tác chuột và bàn phím của người dùng sẽ gây ra sự kiện, sự kiện này lại
được tạo nên trong DOM. Chương trình sẽ lắng nghe những sự kiện đã được đăng
ký với các event listener của Java Scriptvà thực hiện xử lý mỗi khi nhận được một
sự kiện nào đó.
Google Map API đã thêm vào các mô hình sự kiện (event model) bằng cách
định nghĩa sự kiện cho các đối tượng Map API. Những sự kiện này hoàn toàn khác
và tách rời so với các sự kiện chuẩn trong DOM. Tuy nhiên, do các trình duyệt
khác nhau thực thi các event object trên DOM khác nhau nên Google Map API
cung cấp thêm cơ chế để lắng nghe và đáp ứng sự kiện DOM này mà không cần
thêm vào điều khi
ển cho một trình duyệt cụ thể.