CHƢƠNG II MƠ HÌNH TRỰC QUAN HĨA SỰ KIỆN LỊCH SỬ
2.4. Trực quan hóa sự kiện với cơng cụ TimeMapper
2.4.2. Các thành phần của TimeMapper
TimeMapper đƣợc xây dựng dựa trên một tập hợp thành phần mã nguồn mở khác nhƣ: TimelineJS, ReclineJS, Leaflet, BackBone và Bootstrap.
2.4.2.1. TimelineJS
TimelineJS là một công cụ mã nguồn mở cho phép chúng ta có thể xây dựng các mốc thời gian một cách phong phú và trực quan bằng 40 ngôn ngữ trên thế giới. Hơn thế nữa, chúng ta cịn có thể tƣơng tác với các mốc thời gian này khi sử dụng. Ngồi việc có thể hiển thị thời gian trên một dòng thời gian, TimelineJS còn cho phép hiển thị các ảnh, video, web,… và những nội dung liên quan tới sự kiện với mỗi một mốc thời gian đó.
Hình 2-8. Minh họa một timeline được tạo từ TimelineJS
TimelineJS đƣợc xây dựng dựa vào bộ thƣ viện mã mở D3.JS (Data Driven Documents). Đây là một thƣ viện javascript rất mạnh dùng để hiển thị và trình bày thơng tin. D3.JS thao tác với các tài liệu dựa trên một tập hợp các dữ liệu. Dữ liệu trên web đƣợc D3.JS thể hiện bằng cách sinh ra các code HTML, SVG và đƣợc định dạng bằng CSS.
D3 đƣợc phát triển bởi Mike Bostock, Vadim Ogievetsky và JeffHeer từ năm 2009. Mục đích của D3.JS là giúp các chuẩn web có thể vận dụng đƣợc đầy đủ các chức năng của các trình duyệt mới mà không cần sử dụng thƣ viện mã nguồn nào khác, đồng thời kết hợp các thành phần hiển thị và phƣơng thức tiếp cận hƣớng dữ liệu với thao tác trên DOM.
D3.JS có rất nhiều các ƣu điểm nhƣ:
- D3.JS thể hiện tài liệu bằng HTML và SVG nên có thể dễ dàng định dạng về dạng CSS, gỡ lỗi bằng Firebug hay các cơng cụ về DOM mặc định của trình duyệt.
- D3.JS có hỗ trợ sẵn rất nhiều thành phần hay công cụ bổ sung cho những yêu cầu hiển thị dữ liệu
Ngoài những ƣu điểm trên D3 cũng có một vài nhƣợc điểm nhƣ: thao tác chậm đối với dữ liệu đầu vào lớn hay SVG cũng gặp vấn đề này với dữ liệu đầu vào.
2.4.2.2. ReclineJS
ReclineJS là một thƣ viện đơn giản nhƣng rất mạnh mẽ để xây dựng dữ liệu cho các ứng dụng viết bằng javascrip thuần túy hoặc HTML. Recline tái sử dụng tốt nhất các thƣ viên nhƣ SlickGrid, Leaflet, Flot và D3 để tạo ra các khung nhìn và cho phép kết nối dữ liệu chỉ trong vài giây.
Recline bao gồm 3 thành phần chính: Models, Backends và Views
Hình 2-9. Mơ hình của Recline JS
Models giúp bạn cấu trúc dữ liệu bằng cách cung cấp một số các đối tƣợng và hàm. Hai cấu trúc quan trọng là Dataset và Record – một Dataset là một tập hợp các Record. Thêm vào đó, ta có đối tƣợng Field để mô tả các cột của dataset, đối tƣợng Query để mô tả các truy vấn và đối tƣợng Facet lƣu trữ các thông tin về một field.
Backends kết nối mơ hình của bản với dữ liệu nguồn nhƣ : Google Docs Spredsheet, CSV files, DataHub, ElasticSearch,…
Views là thành phần hiển thị giao diện với ngƣời sử dụng, giúp ngƣời dùng có thể chỉnh sửa hoặc tƣơng tác với dữ liệu. Ví dụ nhƣ: bản đồ, đồ thị, lƣới dữ liệu,..
2.4.2.3. Leaflet
Leaflet đƣợc phát triển bởi Vladimir Agafonkin, nó là mã nguồn mở hàng đầu của JavaScrip cho phép ngƣời sử dụng tƣơng tác với bản đồ một cách thân thiện nhất. Nó có dung lƣợng khoảng 33KB và nó có tất cả các tính năng cần thiết giúp ngƣời sử dụng thao tác với bản đồ một cách hiệu quả nhất.
Hình 2-10. Một ví dụ về tương tác bản đồ của Leaflet
Leaflet đƣợc thiết kế với sự đơn giản, hiệu quả và khả dụng trong việc tƣ duy nó hoạt động hiệu quả trên tất cả các nền tảng máy tính và di động vì nó sử dụng HTML5 và CSS. Ngồi ra, nó có thể đƣợc mở rộng với rất nhiều các công cụ bổ sung cho chức năng mà bạn cần.
Một vài tính năng tƣơng tác của Leaflet nhƣ: di chuyển màn hình theo qn tính, kích đúp chuột để phóng to, thêm ghi chú cho điểm đánh dấu, nháy chuột,…
Backbone - BB là một thƣ viện các phƣơng thức để hỗ trợ các lập trình viên trong việc tổ chức đoạn mã, lập trình với dữ liệu và các DOM nhanh chóng, rõ ràng, cụ thể và có tổ chức hơn. Ngồi ra nó cịn cho phép viết một ứng dụng máy khách có cấu trúc đẹp và gọn gàng hơn.
BackBone đƣợc viết bằng JavaScrip hay nó còn đƣợc coi nhƣ một JavaScript ở phía máy khách, cho phép cấu trúc dữ liệu tới các ứng dụng web bằng cách liên kết các khóa với các của API nhƣ : các hàm liệt kê, hàm xử lý sự kiện, hay kết nối với API hiện tại với việc sử dụng file JSON, XML hoặc paintText.
Chúng ta biết rằng việc cập nhật dữ liệu mà khơng phải tải lại trang hay nói cách khác là chúng ta sẽ sử dụng javascript để trao đổi dữ liệu giữa máy khách và máy chủ. Theo đó, chiều từ máy khách – máy chủ các đoạn script ở máy khách sẽ thu thập thông tin từ các đầu vào và truyền về cho máy chủ, đồng thời thay đổi cấu trúc html trên trang hiện tại. Chiều từ máy chủ – máy khách thì máy chủ sẽ tiếp nhận, xử lí và trả dữ liệu về cho máy khách, script trên máy khách sẽ nhận dữ liệu sau đó tổ chức dữ liệu và lấp đầy vào các đoạn mã html và hiển thị cho ngƣời dùng. Nhƣ vậy, trong cả hai q trình đều khơng tải lại các tài nguyên nhƣ css, html và js, giúp giảm thời gian chờ của ngƣời dùng, thời gian đáp ứng của máy chủ. Và để làm đƣợc điều này thì Backbone là một cơng cụ tuyệt vời giúp chúng ta làm đƣợc những điều nhƣ đã nói ở trên một cách dễ dàng và gọn nhé.
Cấu trúc của Backbone giống với mơ hình MVC giúp chúng ta quản lý tốt hơn, dễ dàng bảo trì và nâng cấp vì code của backbone rất rõ ràng và dễ hiểu. Trong backbone có các thành phần cơ bản sau:
Model (M): giống nhƣ linh hồn của Backbone, model chứa những dữ liệu để trao đổi với máy chủ và đƣợc lấp đầy vào các View khi hiển thị ra trang html.
View (V): giống nhƣ thể xác, là phần bao bọc bên ngoài của Backbone. Nó cho phép kết nối giữa model và html bên ngoài, lấp đầy dữ liệu từ model vào các mẫu khung nhìn, tạo thành mã html rồi hiển thị nó.
Collection (C): giống nhƣ một tập có thứ tự của model, nó là tập con của model giúp chúng ta lấy dữ liệu dạng json từ các yêu cầu.
Tuy nhiên, chúng ta có thể thấy rằng BB không phải là Model – View – Controler, nó thiếu mất Controler giống nhƣ trong mơ hình MVC, vì vậy khi làm việc nhiều, bạn sẽ thấy có sự nhập nhằng vì các thao tác làm trong controler đƣợc rải rác vào Model và View.
2.4.2.5. Bootstrap
Bootstrap là một công cụ mã nguồn mở cho phép chúng ta thiết kế một trang web đƣợc thiết kế điều chỉnh kích thƣớc sao cho vừa với mọi loại thiết bị màn hình khác nhau, sắp xếp lại các thành phần trên site và co giãn ảnh sao cho vừa với lịch thƣớc màn hình,… nhanh hơn và dễ dàng hơn. Bootstrap đƣợc phát triển bở Mark Otto và Jacob Thornton tại Twitter. Nó đƣợc xuất bản nhƣ một mã nguồn mở vào tháng 8 năm 2011 trên GitHub.
Bootstrap đƣợc coi là một thƣ viện mã lệnh phổ biến nhất bao gồm HTML templates, CSS templates và JavaScript tạo ra những cái cơ bản có sẵn nhƣ: typography, forms, buttons, tables, navigation, modals, img carousels,… Trong bootstrap có thêm các plugin JavaScript giúp cho việc thiết kế reponsive website dễ dàng và nhanh chóng hơn.
Tại sao bạn nên sử dụng Bootstrap:
- Nó rất đơn giản vì nó chỉ dựa trên HTML, CSS và JavaScript.
- Xây dựng sẵn các phản hồi css trên các thiết bị phone, tablets và destops. - Nó tƣơng thích với tất cả các trình duyệt trừ IE 9 trở xuống.
Vì bootstrap là một thƣ viện mã nguồn mở nên việc tải về sử dụng là một việc rất dễ dàng. Bạn có thể tải về tại trang getbootstrap.com.
2.4.3. Nhược điểm của công cụ TimeMapper
Sau khi nghiên cứu cơng cụ TimeMapper, có thể thấy đây là một công cụ tuyệt vời giúp chúng ta có thể trực quan hóa các sự kiện lịch sử. Tuy nhiên, cơng cụ này cịn một vài nhƣợc điểm nhƣ:
- Công cụ này sử dụng dữ liệu đầu vào là một bảng tính của google. Bảng tính này chỉ hỗ trợ thao tác dữ liệu thông qua dịch vụ của Google doc và thiếu khả năng quản lý dữ liệu của một cơ sở dữ liệu nhƣ thực hành truy vấn dữ liệu,… - Bản đồ để hiện thị dữ liệu chỉ hỗ trợ nguồn dữ liệu bản đồ từ dịch vụ
- Vị trí của các sự kiện trên bản đồ chỉ đƣợc mơ hình hóa theo một điểm tọa độ.
- Sử dụng NodeJS là máy chủ Web nên khả năng tùy biến, hỗ trợ số lƣợng ngƣời dùng và mở rộng ứng dụng sử dụng các ngôn ngữ khác, chẳng hạn nhƣ PHP cịn hạn chế.
Chính vì vậy, từ ý tƣởng này và một vài những nhƣợc điểm của TimeMapper, đồng thời kế thừa những bộ thƣ viện chƣa trong để xây dựng ứng dụng trực quan hóa các sự kiện Lịch Sử, góp phần giải quyết thực trạng dạy và học Lịch Sử hiện nay.
2.5. Tổng kết chƣơng
Chƣơng này trình bày về bài tốn dạy và học Lịch Sử ở các trƣờng THPT và các phƣơng pháp trƣc quan hóa dữ liệu. Giới thiệu công cụ TimeMapper, các thành phần và nêu lên một vài nhƣợc điểm của công cụ này để làm nền tảng phát triển cho ứng dụng.
CHƢƠNG III. XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM 3.1. Yêu cầu bài toán 3.1. Yêu cầu bài toán
Từ những yêu cầu về thực trạng dạy và học Lịch sử đƣợc phân tích ở trên, mục tiêu của luận văn là xây dựng hệ thống hiển thị trực quan hóa các sự kiện Lịch sử giúp cho học sinh hứng thú với mơn học, cải thiện tình trạng dạy và học Lịch sử mà cả xã hội đang quan tâm.
Để xây dựng ứng dụng trực quan hoá sự kiện lịch sử, cách tiếp cận cận của chúng tôi là dựa trên ý tƣởng của TimeMapper và sử dụng những bộ thƣ viện của nó để tuỳ biến, xây dựng ra ứng dụng đặt ra có thể triển khai thi hành trên nền những máy chủ Web truyền thống nhƣ Apache Web Server, hỗ trợ những ngơn ngữ lập trình nhƣ PHP. Ứng dụng trực quan hóa các sự kiện Lịch sử trên nên Web phải thỏa mãn các yêu cầu sau:
- Trực quan hóa một sự kiện theo bản đồ và theo một dòng thời gian để đảm bảo tính dễ hiểu, dễ sử dụng và có khả năng tƣơng tác với ngƣời dùng
- Toàn bộ dữ liệu đƣợc quản lý bởi hệ quản trị CSDL PostgreSQL để thuận lợi hơn trong việc thi hành các truy vấn ngƣời dùng và bảo trì dữ liệu sau này. - Có thể mở rộng mơ hình sự kiện lịch sử chi tiết đến đa giác bao vùng diễn ra sự
kiện.
- Cho phép sử dụng nhiều nguồn dữ liệu bản đồ khác nhau.
3.2. Phân tích, thiết kế hệ thống
3.2.1. Mơ hình kiến trúc hệ thống
Việc phân tích các u cầu của bài tốn cùng với các công cụ đƣợc sử dụng trong luận văn đƣa ra đƣợc mơ hình kiến trúc để thiết kế hệ thống.
- PostGreSQL/ PostGIS trong mơ hình thể hiện dữ liệu đầu vào của hệ thống - Ứng dụng webGIS bao gồm các thành phần trong TimeMapper.
3.2.2. Các chức năng hệ thống
Theo phân tích và u cầu của hệ thống thì hệ thống sẽ có những chức năng cụ thể dƣới đây:
- Nhóm chức năng hiện thị và thao tác trên bản đồ: nhóm chức năng này cho phép hiển thị bản đồ nền dạng title và các thao tác cơ bản nhƣ phóng to, thu nhỏ, dịch chuyển bản đồ bằng chuột và nút điều khiến
- Nhóm chức năng hiển thị và thao tác với Timeline: nhóm chức năng này cho phép hiển thị thời gian theo kiểu dịng thời gian. Ngồi ra nó cịn cung cấp các thao tác nhƣ phóng to hay di chuyển giữa các mốc thời gian.
- Chức năng hiển thị trực quan hóa các sự kiện Lịch sử: nhóm chức năng này kết hợp dữ liệu địa lý và dữ liệu thời gian để tạo ra một giao diện hiển thị một sự kiện Lịch sử. Ngồi ra, chúng ta có thể tƣơng tác qua lại giữa các sự kiện trên dòng thời gian và bản đồ.
- Nhóm chức năng về quản lý dữ liệu sự kiện gắn với nền bản đồ số trực tuyến: Nhóm chức năng này cho phép ngƣời quản trị thao tác với các sự kiện dễ dàng nhờ giao diện thân thiện.
Dựa trên các chức năng cơ bản của hệ thống, dƣới đây là biểu đồ ca sử dụng của hệ thống.
3.2.3. Thiết kế CSDL
Dữ liệu sau khi đƣợc tổng hợp và mơ hình hóa đƣợc đƣa vào cơ sở dữ liệu phục vụ cho việc trực quan hóa gồm có 1 bảng đƣợc lƣu trữ trong PostGreSQL/ PostGIS.
Các trƣờng trong bảng dữ liệu vnHistory:
STT Mã trƣờng Kiểu dữ liệu Mô tả
1 id Autonumber Đánh số các sự kiện
2 tdname Text Tên sự kiện, khóa chính
3 start Date Ngày bắt đầu
4 end Date Ngày kết thúc
5 description Text Mô tả thông tin về sự kiện
6 img Text Liên kết ảnh/video của sự kiện
7 place_old Text Địa danh cũ
8 place_new Text Địa danh hiện nay
9 location Geometry Kinh độ
10 location_original Geometry Vĩ độ
Bảng 3-1. Bảng cơ sở dữ liệu các sự kiện Lịch Sử
3.3. Phát triển ứng dụng
3.3.1. Môi trường phát triển
- Hệ điều hành: Centos 6.5
- Thiết lập môi trƣờng phát triển PHP với các thƣ viện javascript đã giới thiệu: Timeline.js, Recline.js, Leaflet.js, BackBone.js, Bootstrap.js.
- Máy chủ web: apache
- Hệ quản trị cơ sở dữ liệu: PostgreSQL/PostGIS - Máy chủ quản lý bản đồ: MapServer
3.3.2. Dịch vụ bản đồ nền sử dụng MapServer
Hiện nay ở Việt Nam, MapServer đƣợc sử dụng khá phổ biến, MapServer có tính năng hỗ trợ nhiều ngơn ngữ lập trình nhƣ .NET, PHP, và có thể thao tác với
nhiều loại cơ sở dữ liệu khá nhau. Có rất nhiều các giải pháp khác nhau nhƣng giải pháp sử dụng phần mềm mã nguồn mở MapServer đƣợc sử dụng rộng rãi hơn.
MapServer là một môi trƣờng mã nguồn mở cho phép xây dựng những ứng dụng xử lý dữ liệu không gian qua internet. Đây là sản phẩm của trƣờng đại học Minnesota trong dự án kết hợp giữa NASA với bộ tài nguyên Minnesota.
MapServer có thể hoạt động ở hai chế độ CGI và API. Ở chế độ CGI, các chức năng của MapServer trong môi trƣờng WebServer là CGI MapScript. Đây là cách thức dễ dàng để khởi tạo và phát triển một ứng dụng. Ở chế độ API, có thể truy cập MapServer bằng PHP, Perl hoặc Python, chế độ này cho phép xây dựng các ứng dụng một cách dễ dàng, linh hoạt và có khả năng truy cập các cơ sở dữ liệu mở rộng khác.
MapScript cho phép các ngôn ngữ nhƣ PHP, Perl, Python và Java có thể truy xuất các hàm QPI của Mapserver. Khơng những vậy, MapScript cịn cung cấp môi trƣờng thuận lợi cho việc phát triển các ứng dụng tích hợp các dữ liệu phân tán. Ta có thể lấy dữ liệu khơng gian thơng qua các ngôn ngữ trên và dựa vào MapScript ta có thể tạo đƣợc một ảnh bản đồ.
Đơn giản hơn, chúng ta có thể hiểu Mapserver nhƣ là một chƣơng trình CGI đƣợc đặt trong webserver (hay nói cách khác, mapserver đóng vai trị nhƣ một hệ thống GIS đƣợc đặt trên web server). Khi có một request gửi đến Mapserver, nó sử dụng thơng tin đƣợc truyền ở request URL và trong mapfile để tạo hình ảnh của bản đồ đƣợc yêu cầu.
MapServer thƣờng hoạt động phía sau một web server. Webserver nhận yêu cầu bản đồ và truyền chúng đến mapserver để tạo. Mapserver sẽ đọc dữ liệu từ nhiều nguồn khác nhau và kéo các layer tạo thành hình ảnh bản đồ. Sau khi tạo ra