Đề tài Dịch vụ thông tin bất động sản trền bản đồ trực tuyến

ó, ở 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" ""> Google Maps JavaScript API Example 17 <script src= type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } 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"> Để 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. 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 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ể. 21 Sự kiện trong Google Map API được xử lý bằng cách sử dụng các hàm tiện ích trong GEvent namespace. Mỗi Map API object có một số lượng tên các sự kiện nhất định. Chẳng hạn, GMap2 có các sự kiện là click, dbclick, move …Với mỗi sự kiện trong một ngữ cảnh cụ thể, chúng ta có thể truyền vào các tham số để nhận dạng ngữ cảnh này. Ví dụ, khi người dùng di chuyển chuột quanh phạm vi một map object, ta có thể biết được chính xác các tọa độ mà chuột đã di chuyển qua trên bản đồ. Để đăng ký một sự kiện, chúng ta sử dụng phương thức tĩnh GEvent.addListener(). Phương thức này nhận hai tham số là một map object và tên sự kiện cần lắng nghe. Chẳng hạn, muốn bắt sự kiện nhấp chuột của người dùng, có thể làm như sau : var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function() { alert("You clicked the map."); }); Mỗi sự kiện trong danh sách các sự kiện của Maps API đều có thể nhận các tham số truyền vào. Chúng ta có thể truy cập trực tiếp các tham số này bằng cách đưa vào trong hàm xử lý xự kiện các biến tham chiếu để nhận giá trị. Ví dụ sau đưa vào hai biến tham chiếu và nhận được tọa độ người dùng nhấp chuột và zoom level hiện thời. GEvent.addListener(map,"click", function(overlay,point) { var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom(); map.openInfoWindow(point, myHtml); }); 22 Hình 4. Sử dụng tham số truyền vào. Các hàm rất hữu ích khi ta gắn nó với các sự kiện của một thể hiện đối tượng cụ thể. Tuy nhiên, khi ta muốn hàm của ta liên kết với tất cả các thể hiện của một đối tượng, chúng ta có thể sử dụng phương thức GEvent.Bind().Trong ví dụ sau, một thể hiện của lớp sẽ thực hiện việc binding các sự kiện với phương thức của nó. function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; 23 alert("You have clicked the map " + this.counter + " " + (this.counter == 1 ? "time" : "times")); } var application = new MyApplication(); Hình 5. Binding các Event với các Object Method. Event Object của Google Maps API tự tạo ra và quản lý các sự kiện của nó. Tuy nhiên, DOM đôi khi cũng tạo ra các sự kiện của riêng mình. Google Maps API cung cấp thêm cơ chế để giữ và xử lý các sự kiện này, đó là phương thức tĩnh GEvent.addDomListener(), dùng để đăng ký cho một sự kiện DOM. Khi việc lắng nghe một sự kiện không còn cần thiết nữa, một cách tự nhiên, ta cần hủy nó. Vì các hàm addListener() hay addDomListener() trả lại cho ta một GEventListener handle nên việc hủy bỏ một sự kiện được thực hiện như sau : var myEventListener = GEvent.addListener(…); GEvent.removeListener(myEventListener); 24 2.2.3. Controls Google Map API cung cấp các phần tử UI (User Interface) cho phép người dùng tương tác với bản đồ. Những phần tử này được gọi là các control (điều khiển) và ta có thể thêm tất cả các control này vào trong một ứng dụng Google Map API. Maps API đã xây dựng sẵn một số control chúng ta có thể sử dụng trong bản đồ của mình: • GLargeMapControl – Thiết lập chế độ large pan/zoom. Xuất hiện mặc định ở góc trái trên của bản đồ. • GSmallMapControl - Thiết lập chế độ small pan/zoom. Xuất hiện mặc định ở góc trái trên của bản đồ. • GSmallZoomControl - Thiết lập chế độ small zoom control (không có các panning control). • GScaleControl – Tỉ lệ bản đồ. • GMapTypeControl – Các button cho phép người dùng lựa chọn giữa các map type . • GHierarchicalMapTypeControl – Danh sách các buttons, menu được thêm vào cho phép người dùng lựa chọn các kiểu map type tự tạo khác nhau. • GOverviewMapControl – Cho phép hiển thị một bản đồ overview, xuất hiện ở góc dưới cùng bên phải. Tất cả các control trên được xây dựng từ lớp cơ sở GControl. Có sự khác biệt giữa GmapTypeControl và GHierarchicalMapTypeControl với các control còn lại là chúng có thể được cấu hình. Mặc định, Google Map API cung cấp ba map type là G_NORMAL_MAP, G_SATELLITE_MAP và G_HYBRID_MAP. Nếu muốn, chúng ta có thể điều chỉnh các map type này, có thể loại bỏ chúng sử dụng GMap2.removeMapType() 25 hoặc thêm vào bằng cách sử dụng GMap2.addMapType(). Đoạn mã sau loại bỏ kiểu G_HYBRID_MAP từ các map type gắn với một map object, khi chúng ta loại bỏ GMapTypeControl từ map object của ta, sẽ chỉ có hai map type là G_NORMAL_MAP và G_SATELLITE_MAP xuất hiện. var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } ); map.removeMapType(G_HYBRID_MAP); map.setCenter(new GLatLng(42.366662,-71.106262), 11); var mapControl = new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl()); Hình 6. Thêm các Control và loại bỏ một Map Type. Ở ví dụ trên, các control được thêm vào map object sử dụng phương thức addControl() của lớp GMap2. Có thể có nhiều control cùng được thêm vào một map object. 26 Phương thức addControl() ở trên nhận một tùy chọn thứ hai là tham số về GControlPosition cho phép chúng ta chỉ định vị trí mà control xuất hiện trên bản đồ. Giá trị này có thể là một trong các giá trị sau đây : • G_ANCHOR_TOP_RIGHT • G_ANCHOR_TOP_LEFT, • G_ANCHOR_BOTTOM_RIGHT • G_ANCHOR_BOTTOM_LEFT Nếu tùy chọn này được bỏ qua, Maps API sẽ sử dụng vị trí mặc định của các control. 2.2.4. Map Overlays Overlay là các đối tượng trên bản đồ được liên kết với kinh độ và vĩ độ của hệ tọa độ, chúng di chuyển khi chúng ta thực hiện dịch chuyển hay zoom bản đồ. Maps API có các kiểu overlay cơ bản sau: • Các điểm trên bản đồ được hiển thị nhờ vào các marker, trên bản đồ chúng thường là các biểu tượng sẵn có. Marker là các đối tượng của kiểu GMarker, chúng được tạo nên từ kiểu GIcon. • Các đoạn thẳng trên bản đồ được hiển thị sử dụng các polyline (tập hợp các điểm) là đối tượng của kiểu GPolyline. • Trên bản đồ các vùng được hiển thị dưới dạng polygon nếu nó có hình dạng bất kỳ, dưới dạng ground nếu nó là hình chữ nhật. Các polygon tương tự như các polyline ở chỗ nó bao gồm tập các đoạn thẳng khép kín và có hình dáng bất kỳ. • Info Window là một kiểu overlay đặc biệt, nó được thêm vào bản đồ một cách tự động và chỉ có một đối tượng duy nhất của kiểu GInfoWindow. Marker là đối tượng hay gặp nhất và thường xuất hiện trong các ứng dụng Google Map API. Chúng đại diện cho các điểm trên bản đồ. Mặc định, marker sử 27 dụng G_DEFAULT_ICON nếu chúng ta không chỉ định một icon cụ thể cho chúng. Một GMarker Constructor nhận hai tham số là tọa độ GLatLng và một tùy chọn GMarkerOptions. Marker được thiết kế cho các tương tác. Thông thường, marker nhận các sự kiện “click” và đưa ra một info window. Ví dụ sau thực hiện thêm 10 marker ở 10 vị trí bất kỳ trên bản đồ. var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } Trong ví dụ này, trước tiên chúng ta sử phương thức getBounds() của GMap2 lấy được hình chữ nhật bao của bản đồ. Sau đó, sử dụng các phương thức geSouthWest() và getNorthEast() lấy ra các tọa độ trên trái và dưới phải của bản đồ, dùng hàm math.random() tạo random 10 vị trí nằm trên bản đồ, cuối cùng, tạo các marker ở các vị trí đó. 28 Hình 7. Thêm 10 Marker ở các vị trí bât kỳ. Marker là các đối tượng có thể tương tác, có thể “click” và “drag” tới vị trí mới. Mặc định, các marker có thể “click’ nhưng không thể “drag”. Muốn “drag” được các marker, chúng ta khởi tạo marker và thêm vào tùy chọn draggable được thiết lập là true. Quá trình “drag” một marker bao gồm bốn loại sự kiện : “click”, “dragstart”, “drag” và “dragend” để diễn đạt các trạng thái “drag”. Trong ví dụ sau, chúng ta bắt sự kiện lúc bắt đầu “drag” (“dragstart”) và lúc kết thúc “drag” (“dragend”). var map = new GMap2(document.getElementById("map_canvas")); var center = new GLatLng(37.4419, -122.1419); map.setCenter(center, 13); var marker = new GMarker(center, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); 29 GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("Just bouncing along..."); }); map.addOverlay(marker); Khi ta thêm một số lượng lớn các marker vào bản đồ, chúng làm giảm hiệu năng của trang web cũng như gây ra tình trạng lộn xộn tại một zoom level nào đó. Tính năng marker manager cung cấp giải pháp cho cả hai vấn đề trên, cho phép hiển thị số lượng lớn các marker trên cùng một bản đồ cũng như chỉ định ở zoom level nào thì marker được xuất hiện. Marker Manager sẽ giám sát viewport và zoomlevel hiện thời, thêm các marker phù hợp, đồng thời loại bỏ các marker nằm ngoài viewport cũng như không nằm trong zoom level hiện tại. Tất cả các marker phù hợp, được chuyển đến bản đồ một lần duy nhất để hiển thị. Điều này thực sự hiệu quả, vừa tăng hiệu suất thực thi của website, vừa loại bỏ những lộn xộn không đáng có. Để sử dụng marker manager, chúng ta tạo ra một GMarkerManager Object đồng thời chuyển một map object cho nó. var map = new GMap2(document.getElementById("map_canvas")); var mgr = new GMarkerManager(map); Maps API cung cấp một số tùy chọn để nâng cao hiệu quả thực thi của maker manager đó là cho phép thêm vào các tùy chọn. Các tùy chọn này được truyền vào thông qua một GMakerManagerOptions object, bao gồm các trường sau: • maxZoom: Chỉ đinh mức zoom level cao nhất mà marker manager giám sát, giá trị mặc định là giá trị lớn nhất của zoom level mà Google Maps cung cấp. 30 • borderPadding: Xác định vùng mở rộng tính theo đơn vị pixel được giám sát bởi manager bên ngoài viewport hiện thời. Giá trị mặc định là 100. • trackMarkers: Chỉ ra rằng liệu những marker đã thay đổi có tiếp tục được giám sát không. Giá trị mặc định là false. GMakerManagerOptions là một object literal, nghĩa là chúng ta có thể khai báo mà không cần khởi tạo. var map = new GMap2(document.getElementById("map_canvas")); var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true}; var mgr = new MarkerManager(map, mgrOptions); Sau khi tạo ra một marker manager, làm thế nào để thêm vào các marker? GMarkerManager cho phép thêm một marker ngay tức khắc sử dụng phương thức addMarker() và thêm vào một mảng các marker sử dụng phương thức addMarkers() . Một marker duy nhất được thêm sử dụng addMarker() sẽ xuất hiện ngay lập tức trên bản đồ nếu nó nằm trong viewport và zoom level hiện thời. Tuy nhiên, thêm một tập các marker sử dụng addMarkers(), các marker sẽ không xuất hiện trên bản đồ cho đến khi chúng ta thực sự gọi phương thức refresh() của GMarkerManager. Sau khi được gọi, GMarkerManager sẽ hiển thị tất cả các marker trong viewport và zoom level hiện tại. 31 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 3.1. Phát biểu bài toán Xuất phát từ những nhu cầu thực tiễn, bài toàn mà luận văn hướng tới là ứng dụng các dịch vụ bản đồ trực tuyến của Google Map kết hợp với cơ sở dữ liệu do chúng ta tạo ra để xây dựng hệ thống cung cấp các thông tin về bất động sản đáp ứng được đầy đủ các yêu cầu cốt lõi sau: • Hiển thị được chính xác thông tin về tọa độ của các căn hộ bán và cho thuê trên bản đồ theo nhu cầu của người sử dụng. • Tích hợp đuợc các thông tin về bất động sản trên bản đồ số (thông tin người đăng, địa chỉ căn hộ, diện tích căn hộ, kiểu nhà, loại giao dịch, giá giao dịch). • Kết nối với cơ sở dữ liệu thực hiện các chức năng cập nhật cũng như các chức năng quản trị phân tích, giám sát cảnh báo dựa vào các số liệu thống kê. • Cung cấp đầy đủ các tính năng, phục vụ các mục đích tìm kiếm, lọc thông tin và hiển thị của người sử dụng. 3.2. Mô tả tổng quan hệ thống 3.2.1. Kiến trúc hệ thống Hệ thống xây dựng dựa trên các mô hình ứng dụng Map mashup đã có. 32 Hình 8. Mô hình kiến trúc hệ thống 3.2.2. Các thành phần của hệ thống Luận văn hướng đến xây dựng một hệ thống hoàn chỉnh, bao gồm các thành phần sau đây: • Web Server của Google Maps: cung cấp các API cho giải pháp bản đồ trực tuyến. Để sử dụng đuợc các API này, trước hết, hệ thống phải tải về các Google Map Javascript của Google Maps Web server. • Cascading Style Sheets (CSS): miêu tả cách trình bày tài liệu. • Web service (RSS, JSON, XML) : cung cấp dữ liệu theo định dạng chuẩn. • Web page chúng ta cần xây dựng là một website hiển thị thông tin và thực thi chức năng người dùng. 33 Với mô hình này, hệ thống của chúng ta là một ứng dụng mashup thực sự. Hệ thống tải bản đồ của Google Maps, trộn với dữ liệu lấy từ một Web service và hiển thị thông tin cho người dùng. Tuy nhiên, trong khoảng thời gian có hạn, luận văn sẽ dừng lại ở việc xây dựng một mô hình hệ thống đơn giản hơn. Dữ liệu sẽ đuợc lấy từ một hệ cơ sở dữ liệu và chưa có các đặc tả CSS. 3.3. Thiết kế hệ thống 3.3.1. Thiết kế dữ liệu hệ thống 3.3.1.1. Sơ đồ lớp dữ liệu Hình 9. Sơ đồ lớp dữ liệu hệ thống 3.3.1.2. Mô tả chi tiết các lớp đối tượng a) Thông tin bất động sản 34 STT Tên thuộc tính Loại Kiểu Miền GT Ràng buộc Ý nghĩa 1 Id Khóa chính Int Khác Null Id của một thông tin bất động sản 2 HoTenNguoi Dang Varchar (50) Khác Null Họ tên người đăng 3 DiaChiCan Ho Varchar (80) Khác Null Địa chỉ căn hộ 4 DienTich Float Khác Null Diện tích 5 SoDTLien Lac Varchar (20) Số điện thoại liên lạc 6 KinhDo Float Khác Null Kinh độ 7 ViDo Float Khác Null Vĩ độ 8 CaoDo Float Cao độ 9 IdKieuNha Int Khác Null Id của kiểu nhà 10 IdLoaiGiao Dich Int Khác Null Id của loại giao dịch 11 Gia Varchar (20) Khác Null Giá 12 NgayDang Date Time Ngày đăng 35 13 NgayHetHan Date Time Ngày hết hạn b) Kiểu nhà STT Tên thuộc tính Loại Kiểu Miền GT Ràng buộc Ý nghĩa 1 IdKieuNha Khóa chính Int Khác Null Id của kiểu nhà 2 TenKieuNha Varchar (40) Khác Null Tên kiểu nhà c) Loại giao dịch STT Tên thuộc tính Loại Kiểu Miền GT Ràng buộc Ý nghĩa 1 IdLoaiGiao Dich Khóa chính Int Khác Null Id loại giao dịch 2 TenLoaiGiao Dich Varchar (40) Khác Null Tên loại giao dịch 3.3.2. Thiết kế chức năng hệ thống 3.3.2.1. Danh sách các chức năng 36 # Mã chức năng Tên chức năng Chức năng cha 1 QT Quản trị hệ thống 2 QT_TTT Thêm thông tin Quản trị hệ thống 3 QT_CNTT Cập nhật thông tin Quản trị hệ thống 4 TK Tìm kiếm thông tin 5 TK_TBK Tìm kiếm theo bán kính Tìm kiếm thông tin 6 LOC Lọc kết quả 7 LKQ_TG Lọc kết quả theo giá Lọc kết quả 8 LKQ_TLGD Lọc kết quả theo loại giao dịch Lọc kết quả 9 LKQ_TKN Lọc kết quả theo kiểu nhà Lọc kết quả 3.3.2.2. Thiết kế chức năng a) Thêm thông tin ¾ Mã chức năng: QT_TTT. ¾ Tên chức năng: Thêm thông tin. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng “click” chuột vào bản đồ để thêm mới thông tin về căn hộ cần bán hoặc cho thuê. Vị trí người dùng chọn được giả thiết là vị trí căn hộ người dùng sẽ đăng thông tin. Người dùng có thể chọn lại vị trí bằng cách di chuyển marker đến vị trí mong muốn. • Người dùng nhập thông tin chi tiết về căn hộ trực tiếp trên marker : o Họ tên người đăng. o Địa chỉ căn hộ. o Số điện thoại liên lạc. 37 o Loại giao dịch. o Kiểu nhà. o Diện tích. o Giá. • Giá trị của ngày đăng sẽ được tự động chèn vào cơ sở dữ liệu là ngày giờ hiện tại của hệ thống. Ngày hết hạn do ta quy định, sau ngày đăng một khoảng thời gian nào đó. • Chọn thêm mới người dùng. • Hệ thống tạo mới người dùng, hiển thị thông báo thành công. • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dùng chọn chức năng thêm mới thông tin. ¾ Dữ liệu đầu vào: Thông tin về căn hộ. ¾ Dữ liệu đầu ra: Căn hộ mới. b) Cập nhật thông tin ¾ Mã chức năng: QT_CNTT. ¾ Tên chức năng: Cập nhật thông tin. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng “click” chuột vào các Marker trên bản đồ để xem thông tin và sau đó nhấn vào nút cập nhật. • Thay đổi vị trí căn hộ bằng cách di chuyển marker đến vị trí mong muốn. • Thay đổi các thông tin chi tiết của căn hộ trực tiếp trên marker: 38 o Họ tên người đăng. o Địa chỉ căn hộ. o Số điện thoại liên lạc. o Loại giao dịch. o Kiểu nhà. o Diện tích. o Giá. • Chọn ghi thông tin cập nhật. • Hệ thống cập nhật thông tin, hiển thị thông báo thành công. • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dụng chọn chức năng cập nhật thông tin. ¾ Dữ liệu đầu vào: Thông tin mới về căn hộ. ¾ Dữ liệu đầu ra: Thông tin cập nhật. c) TÌm kiếm theo bán kính ¾ Mã chức năng: TK_TBK. ¾ Tên chức năng: Tìm kiếm theo bán kính. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng chọn chức năng tìm kiếm theo bán kính. • Hệ thống thực hiện tìm kiếm các căn hộ giao dịch trong phạm vi bán kính người dùng đã chọn. • Hệ thống hiển thị thông tin tìm kiếm được cho người dùng. 39 • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dùng chọn chức năng tìm kiếm thông tin theo bán kính. ¾ Dữ liệu đầu vào: Bán kính. ¾ Dữ liệu đầu ra: Các căn hộ giao dịch trong phạm vi bán kính. d) Lọc kết quả theo giá ¾ Mã chức năng: LKQ_TG. ¾ Tên chức năng: Lọc kết quả theo giá. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng chọn chức năng lọc kết quả theo giá. • Hệ thống thực hiện lọc kết quả các căn hộ giao dịch thỏa mãn yêu cầu về giá của người sử dụng (thỏa mãn yêu cầu giá trị giao dịch dao động trong biên độ nhất định). • Hệ thống hiển thị thông tin cho người dùng. • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dùng chọn chức năng lọc kết quả theo giá giao dịch. ¾ Dữ liệu đầu vào: Biên độ dao động giá. ¾ Dữ liệu đầu ra: Các căn hộ giao dịch trong phạm vi biên độ dao động giá. e) Lọc kết quả theo loại giao dịch ¾ Mã chức năng: LKQ_TLGD. 40 ¾ Tên chức năng: Lọc kết quả theo loại giao dịch. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng chọn chức năng lọc kết quả theo loại giao dịch (nhà bán, nhà cho thuê). • Hệ thống thực hiện lọc các kết quả tìm kiếm theo loại giao dịch. • Hệ thống hiển thị thông tin tìm kiếm được cho người dùng. • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dùng chọn chức năng lọc kết quả theo loại giao dịch. ¾ Dữ liệu đầu vào: Loại giao dịch. ¾ Dữ liệu đầu ra: Các căn hộ theo loại giao dịch người dùng đã chọn. f) Lọc kết quả theo kiểu nhà ¾ Mã chức năng: LKQ_TKN. ¾ Tên chức năng: Lọc kết quả theo kiểu nhà. ¾ Luồng xử lý chính: • Luồng xử lý chính bắt đầu khi người dùng chọn chức năng lọc kết quả theo kiểu nhà(chung cư, nhà cao tầng, nhà cấp 4, biệt thự). • Hệ thống thực hiện lọc các kết quả tìm kiếm theo kiểu nhà. • Hệ thống hiển thị thông tin tìm kiếm được cho người dùng. • Luồng xử lý kết thúc. ¾ Chức năng đuợc sử dụng khi: Người dùng chọn chức năng lọc kết quả theo kiểu nhà. ¾ Dữ liệu đầu vào: Kiểu nhà. 41 ¾ Dữ liệu đầu ra: Các căn hộ theo kiểu nhà người dùng đã chọn. 3.3.3. Thiết kế giao diện hệ thống a) Giao diện chính của hệ thống Hình 10. Giao diện chính của hệ thống Giao diện chính của hệ thống gồm các thành phần sau: • Phía bên tay trái giao diện chính là bản đồ của GoogleMaps. Người dùng có thể thực hiện các thao tác thông thường như thực hiện trên bản đồ của GoogleMaps. Trên bản đồ, các marker màu đỏ đại diện cho các căn hộ cần bán, màu xanh đại diện cho các căn hộ cần cho thuê. Người 42 dùng có thể “click” trực tiếp vào các marker này để xem thông tin chi tiết về một căn hộ. • Phía bên tay phải giao diện chính là một SidebarEntry lưu các kết quả trả về là địa chỉ căn hộ dưới dạng các liên kết cho phép người dùng “click” trực tiếp để xem thông tin về căn hộ mình muốn. Hình 11. Thao tác với SidebarEntry • Hai liên kết Nhà bán và Nhà cho thuê cho phép người dùng lọc kết quả theo loại giao dịch. Khi người dùng nhấn nút chọn loại giao dịch, các căn hộ tương ứng với loại giao dịch được chọn sẽ xuất hiện đồng thời trên bản đồ cũng như trên SidebarEntry. Kết quả trả về trên bản đồ sẽ là các căn hộ màu xanh hoặc màu đỏ tùy vào loại hình giao dịch mà người dùng chọn. 43 Hình 12. Lọc kết quả theo nhà để bán • Chương trình có một ListBox cho tùy chọn về Giá. Các mức giá đưa ra tương đối đa dạng, bao gồm các mức giá trong khoảng, mức nhỏ hơn và mức lớn hơn, cho phép người dùng dễ dàng lựa chọn. Khi người dùng chọn tùy chọn Giá, hệ thống sẽ nhận biết sự tác động, thực hiện việc tìm kiếm các căn hộ nằm trong miền giá trị người dùng đã chọn, hiển thị kết quả trên bản đồ và SidebarEntry. Nhu cầu tìm kiếm theo giá của người dùng thường gắn liền với một loại hình giao dịch nhất định (bán hoặc cho thuê). Hệ thống cung cấp thêm một tính năng tương đối thông mình, đó là khi người dùng đã chọn một loại hình giao dịch, chương trình sẽ ghi nhớ loại hình giao dịch đó. Sau đó, nếu người dùng chọn tùy chọn 44 về giá, chương trình sẽ kết hợp cả hai tùy chọn, cho phép người dùng tìm kiếm căn hộ bán hoặc cho thuê theo biên độ dao động giá nhất định. Hình 13. Lọc kết quả theo mức giá • Một TextBox để nhập thông tin tìm kiếm về Bán kính và một Button Tìm kiếm để thực hiện chức năng tìm kiếm. Khi người dùng nhập bán kính, nhấn nút Tìm kiếm, thệ thống sẽ hực hiện tìm kiếm các căn hộ nằm trong phạm vi bán kính đã chọn so với trung tâm của bản đồ hiện thời, hiển thị kết quả trên bản đồ và SidebarEntry. Trên SidebarEntry, kết quả sẽ trả về sẽ bao gồm thêm bán kính tính được cho các căn hộ nằm trong phạm vi bán kính đã chọn. 45 Hình 14. Tìm kiếm các căn hộ trong phạm vi bán kính 2 km • Một ListBox cho tùy chọn về Kiểu nhà. Hiện tại, chương trình cung cấp 4 loại kiểu nhà cho người dùng lựa chọn, bao gồm biệt thự, chung cư, nhà cao tầng và nhà cấp 4. Khi người dùng chọn tùy chọn kiểu nhà, hệ thống sẽ nhận biết sự tác động, thực hiện việc tìm kiếm các căn hộ thuộc kiểu nhà người dùng đã chọn, hiển thị kết quả trên bản đồ và SidebarEntry. 46 Hình 15. Lọc kết quả theo kiểu nhà b) Giao diện thêm mới Giao diện thêm mới xuất hiện khi người dùng “click” chuột vào bản đồ để xác định chính xác tọa độ căn hộ họ muốn đăng thông tin. Người dùng có thể di chuyển marker chính xác đến vị trí họ muốn bằng cách giữ chuột và kéo đến vị trí khác. Một Info Window xuất hiện với các Text Box và List Box cho người dùng nhập thông tin cần thiết về căn hộ. Người dùng thực hiện thêm mới bằng cách nhấn nút Ghi lại để gửi yêu cầu cho hệ thống xử lý. 47 Hình 15. Giao diện thêm mới c) Giao diện cập nhật Giao diện cập nhật xuất hiện khi người dùng chọn xem thông tin về căn hộ họ quan tâm. Khi đó phía trên của căn hộ được kích hoạt sẽ xuất hiện một Info Window cho phép người dùng xem thông tin và có thể sửa thông tin trên đó. Người dùng có thể thay đổi thông tin về vị trí căn hộ bằng cách di chuyển các marker trên bản đồ đến vị trí họ muốn. Người dùng cập nhật thông tin mới cho căn hộ bằng cách chọn Ghi lại để cập nhật thông tin về hệ thống. Việc cập nhật thực sự cần thiết nhất là với mục giá khi tỷ giá đồng USD, VNĐ hay một số đồng tiền khác biến động từng giờ, nếu không kịp thời cập nhật, thông tin sẽ trở nên cũ, không chính xác. 48 Hình 13. Giao diện cập nhật Trong tương lai, khi xây dựng hệ thống, để thực hiện được trực tiếp các chức năng thêm mới và cập nhật, người sử dụng phải đăng nhập, khi đó là một người quản trị, hệ thống sẽ cho phép họ thực hiện hai chức năng này. Còn một người dùng muốn đăng một thông tin bất động sản, họ phải liên hệ trước với người quản trị để được cấp quyền, rồi sau đó mới được đăng tin và đảm bảo thông tin đăng phải chính xác. 3.3.4. Thiết kế chương trình Chúng ta cần xây dựng chương trình có khả năng nhận các yêu cầu của người dùng, truy xuất cơ sở dữ liệu hệ thống để tìm ra những thông tin phù hợp, những thông tin này lại xuất hiện tại các marker trên bản đồ. Để giải quết vấn đề của chúng ta, chương trình được xây dựng theo cấu trúc phân tầng Front End và 49 Back End là phù hợp hơn cả. Chương trình Front End của ta thực chất là giao diện của hệ thống, có nhiệm vụ nhận các yêu cầu của người sử dụng, gửi yêu cầu đó và nhận các kết quả trả về (một file XML) từ Back End, sau đó hiển thị kết quả cho người sử dụng. Về phía Back End, nó có nhiệm vụ nhận các yêu cầu từ Front End, thực hiện các truy vấn trong cơ sở dữ liệu để tìm ra các kết quả phù hợp, gửi kết quả là một file XML tới Front End. Front End được xây dựng dựa trên ngôn ngữ HTML và Java Script. Nó sử dụng JavaScript để tải về bản đồ của Google Maps, sử dụng các sự kiện mà JavaScript cũng như Google Map API cung cấp để nhận yêu cầu người sử dụng và hiện thị kết quả tìm được. Back End được xây dựng trên ngôn ngữ PHP, có nhiệm vụ kết nối với hệ cơ sở dữ My Sql của hệ thống, thực hiện truy vấn, sau đó đưa kết quả ra một file XML và gửi cho Front End. 50 KẾT LUẬN Với việc xây dựng thành công một website thông tin bất động sản với bản đồ trực tuyến, luận văn đã đạt được những yêu cầu ban đầu đặt ra trong việc nghiên cứu tìm hiểu cách sử dụng các dịch vụ bản đồ trực tuyến của Google Maps để xây dựng một website thông tin bất động sản. Luận văn mới chỉ dừng lại ở việc xây dựng một hệ thống đơn giản, cung cấp một số tiện ích cho người sử dụng, song luận văn mang tính thực tiễn cao, có khả năng phát triển, mở rộng trong tương lai. Luận văn có thể được sử dụng như một tài liệu ban đầu cho việc tiếp cận và sử dụng các API của Google Maps. Tài liệu này sẽ rất hữu ích vì ngoài việc được sử dụng để tạo ứng dụng mashup về thông tin bất động sản, Google Maps còn có thể tạo các ứng dụng về tìm đường, chỉ ra đường đi ngắn nhất, cung cấp thông tin về du lịch, danh lam thắng cảnh, dân số, diện tích … của một thành phố hay quốc gia nào đấy. Trong tương lai, để tiếp tục phát triển và ứng dụng được, luận văn cần nghiên cứu và bổ sung các công nghệ như AJAX, CSS… đồng thời nghiên cứu sâu hơn nữa về các dịch vụ của Google Maps như KML, GeoRSS… 51 TÀI LIỆU THAM KHẢO 1. 2. 3. 4. 5. 6. 7. with-gmaps-apps?hl=en 8. 9. 10. 11. 12. I/topics?start=10&sa=N 13. 14. 15. 33076 16. mapscraigslist-mashup-258969.php 17. apscraigslist-mashup-258969.php 18. 0 52 19. 20. 21. 22. 23. 24.