Xây dựng các ứng dụng hòa trộn phía máy chủ với Geronimo và REST

Sử dụng REST, Ajax và Apache Geronimo để xây dựng một ứng dụng hòa trộn cho Twitter và Google Maps

Khám phá các kỹ thuật và công nghệ bạn có thể sử dụng để xây dựng một ứng dụng hòa trộn (mashup) bằng cách sử dụng Apache Geronimo, một giao thức dựa trên REST và các dữ liệu từ nhiều nguồn. Ứng dụng hòa trộn kết hợp dữ liệu từ Google Maps và các thông điệp ngắn (tweet) của Twitter để định vị người dùng Twitter khi họ cập nhật trạng thái Twitter của mình.

J. Jeffrey Hanson, Kiến trúc sư trưởng, eReinsure.com, Inc.

Jeff Hanson đã có hơn 20 năm kinh nghiệm trong ngành công nghiệp phần mềm, là kỹ sư cấp cao cho cổng của Microsoft Windows của dự án OpenDoc, là kiến trúc sư trưởng của khung công tác Route 66 của Novell và là kiến trúc sư trưởng của công ty eReinsure.com, Inc, nơi ông hướng dẫn việc thiết kế và thực hiện khung công tác và nền tảng cho các hệ thống tái bảo hiểm dựa trên nền J2EE. Jeff hiện là Giám đốc kỹ thuật (CTO) của công ty Max Software, Inc, nơi ông chỉ đạo các nỗ lực để cung cấp các ứng dụng máy tính để bàn và ứng dụng doanh nghiệp và các nền tảng cho việc kiểm soát an toàn Internet và kiểm soát của cha mẹ đối với Internet. Jeff là tác giả của rất nhiều bài báo và sách


Cấp độ đóng góp cho developerWorks của
        tác giả

05 07 2009

Ban đầu, thuật ngữ mashup (hòa trộn) có nghĩa là một kỹ thuật trong âm nhạc để pha trộn hai hoặc nhiều bài hát theo một cách nào đó để tạo ra một bài hát hoàn toàn mới. Trong công nghệ phần mềm mashup hàm ý các công nghệ và các mẫu hình để kết hợp dữ liệu, các thành phần giao diện người dùng (UI) và các quy trình xử lý để tạo ra các ứng dụng web và các trang web mới.

Ứng dụng hòa trộn được các nhà phát triển web ưa chuộng bởi vì dễ dàng kết hợp các dữ liệu và nội dung. Sở dĩ dễ dàng làm như thế là do đã sẵn có và phổ cập rộng khắp các công nghệ động và giàu ngữ nghĩa dành cho Web — đó là các công nghệ như XML, ký pháp đối tượng tuần tự hóa của JavaScript (JSON - JavaScript Serialized Object notation), Khung công tác mô tả tài nguyên (RDF - Resource Description Framework), JavaScript động và Ajax. Chúng và các công nghệ khác nữa cung cấp một khả năng không giới hạn cho các nhà phát triển sáng tạo nội dung.

Từ viết tắt thường được sử dụng

  • Ajax: JavaScript không đồng bộ + XML
  • API: Giao diện lập trình ứng dụng
  • CSS: Cascading Style Sheets – Các phiếu định kiểu chồng nhau
  • DOM: Document Object Model – Mô hình đối tượng tài liệu
  • HTML: Hypertext Markup Language – Ngôn ngữ đánh dấu siêu văn bản
  • HTTP: Hypertext Transfer Protocol - Giao thức truyền tải siêu văn bản
  • UI: User interface - Giao diện người dùng
  • XML: Extensible Markup Language – Ngôn ngữ đánh dấu mở rộng được
  • XSD: XML Schema Document - Lược đồ tài liệu XML

Bạn thường tạo ra các ứng dụng hòa trộn bằng cách kết hợp các thành phần UI, các dịch vụ hoặc các quy trình xử lý và dữ liệu. Các thành phần UI có thể hòa trộn được bao gồm các mã JavaScript động, các đoạn mã HTML, nguồn cấp dữ liệu RSS, và các kết quả từ các lời gọi API của dịch vụ Web. Các ứng dụng hòa trộn phụ thuộc vào việc trộn các thành phần UI được ghép lỏng với nhau, các quy trình xử lý hoặc dữ liệu từ một hoặc nhiều trang web bằng cách sử dụng các phép biến đổi dữ liệu, các Javascript động, các thao tác DOM và các kỹ thuật khác. Các ứng dụng hòa trộn bản mẫu hiện có bao gồm việc kết hợp một bản đồ từ Google Maps với các dữ liệu tại từng địa điểm, chẳng hạn như số liệu thống kê tội phạm và giá bất động sản cho một khu vực đã cho.

Bài viết này thảo luận về cách sử dụng các API do Twitter và Google Maps cung cấp cùng với Ajax và các mã Java™ để xây dựng một ứng dụng hòa trộn mà bạn có thể triển khai và cho chạy trong một môi trường Apache Geronimo.
(Lưu ý của biên tập viên: Bài viết này thảo luận về một trong nhiều cách để tạo các ứng dụng hòa trộn phía máy chủ. WebSphere® cung cấp một biện pháp khác để xây dựng các ứng dụng dựa trên web bằng cách sử dụng kịch bản lệnh (scripting) động. Xem mục Tài nguyên để có thêm thông tin về phần mềm được thảo luận trong bài viết này và nơi tìm phần mềm đó…)

Làm quen với Geronimo

Geronimo là nền Java doanh nghiệp (Java EE), hoàn toàn tương thích với nền Java, mà bạn có thể sử dụng để xây dựng các dịch vụ và ứng dụng doanh nghiệp. Geronimo được thiết kế theo một kiến trúc sử dụng các kỹ thuật đảo ngược điều khiển (Inversion of Control – IOC) để tách riêng các dịch vụ và các thành phần tới một mức độ cao. Việc tách riêng ở mức cao như vậy cho phép triển khai và có môi trường thực thi cấu hình được và mô đun hóa cao độ. Geronimo đẩy mạnh sử dụng phần mở rộng quản lý của Java (Java Management Extensions -JMX) và khung công tác kiểu Mbean đặc thù cho Geronimo, làm cho Geronimo trở thành một nền tảng doanh nghiệp mạnh mẽ và dễ quản lý.

Bạn tạo ra một môi trường chạy của Geronimo bằng cách sử dụng một tập hợp có thể tùy chỉnh được các mô-đun được lắp ráp và được quản lý bởi một máy hạt nhân (kernel engine) gọn nhẹ. Máy hạt nhân là một mô-đun của Geronimo, nó là một tập hợp bất kỳ các lớp, các mô-đun khác, và một cấu hình tuần tự hóa được (serializable). Hạt nhân Geronimo nạp, hợp dịch và hòa phối các mô-đun khi một cá thể chạy thi hành của Geronimo được khởi động. Các mô-đun đã lắp ráp xác định các chức năng cho môi trường triển khai và thi hành Geronimo. Tất cả các dịch vụ trong một cá thể chạy thi hành của Geronimo được triển khai như là các mô-đun.

Các mô-đun Geronimo được định nghĩa trong một tệp tin XML được gọi là một kế hoạch triển khai (deployment plan). Kế hoạch triển khai Geronimo cuối cùng bao gồm một tổ hợp của một kế hoạch triển khai ban đầu, một tệp tin Maven project.properties và một tệp tin mô hình đối tượng dự án Maven (Maven Project Object Model -POM). Hình 1 cho ta thấy cách thức các tạo tác được xử lý như thế nào để tạo ra một kế hoạch triển khai cuối cùng.

Hình 1. Xử lý các kế hoạch triển khai Geronimo
Processing Geronimo deployment plans

Nội dung của một kế hoạch triển khai được kiểm soát bởi một tệp tin XSD. Kế hoạch triển khai định nghĩa ID của mô-đun, các thuộc tính môi trường cho một mô-đun, các phụ thuộc của mô-đun, các dịch vụ mà mô-đun cung cấp và Geronimo Beans (GBeans) cho mô-đun và một số thứ khác. Liệt kê 1 minh hoạ một kế hoạch triển khai Geronimo đơn giản.

Liệt kê 1. Ví dụ kế hoạch triển khai Geronimo
<?xml version="1.0" encoding="UTF-8"?>
<module xmlns="http://geronimo.apache.org/xml/ns/deployment-1.1">
  <environment>
    <moduleId>
      <groupId>geronimo</groupId>
      <artifactId>example</artifactId>
      <version>1.0.0</version>
      <type>car</type>
    </moduleId>  
    <dependencies>
      <dependency>
        <groupId>geronimo</groupId>
        <artifactId>j2ee-server</artifactId>
        <type>car</type>
      </dependency>
    </dependencies>
    <hidden-classes/>
    <non-overridable-classes/>
  </environment>
  
  <gbean name="ExampleService" class="com.example.myservices.MyServiceGBean">
    <attribute name="prop1">12345</attribute>
    <attribute name="prop2">This is a value for a property</attribute>
  </gbean>
</module>

Khi tiến trình xây dựng biên dịch một kế hoạch triển khai giống như kế hoạch trong Liệt kê 1, một tệp tin lưu trữ cấu hình (Configuration Archive - CAR) được tạo ra với một tên duy nhất. Tên duy nhất này được sinh ra cho cấu hình trong liệt kê 1 sẽ là geronimo/example-1.0.0/car.

Các tệp tin CAR của Geronimo

Một tệp tin CAR của Geronimo là một tệp tin lưu trữ Java (Java Archive - JAR) chứa dạng thức tuần tự hóa (serialized) của một kế hoạch triển khai và bất cứ nguồn tài nguyên bổ sung nào khác. Một kế hoạch triển khai đã tuần tự hóa được chứa trong một tệp tin có tên là config.ser tại thư mục META-INF của các tệp tin CAR. Các tệp tin CAR được tạo ra bởi một trình cắm thêm tạo gói của Geronimo cho Maven trong quá trình xây dựng.

Kho chứa của Geronimo

Kho chứa của Geronimo là nơi đăng ký của các tạo tác thường được tập hợp lại dưới dạng một hệ thư mục trong hệ thống tệp tin. Bản phân phối mã nhị phân của Geronimo cung cấp một thư mục có tên repository (kho chứa), chứa tất cả các phụ thuộc cho các mô-đun, là nền của Geronimo lõi.

Trong Geronimo, một tạo tác là một thành phần bất kỳ, ví dụ như một tệp tin Lưu trữ web (WAR), một tệp tin JAR, hoặc một tệp tin CAR, được lưu giữ trong kho chứa của Geronimo. Tạo tác được lưu giữ trong các tiện ích triển khai dòng lệnh hoặc bàn điều khiển trang Web của Geronimo web được cung cấp với một thao tác phân phối của Geronimo.

Tải về và cài đặt Geronimo

Hãy tải về bản nền Geronimo (Xem mục Tài nguyên), sau đó giải nén các tệp tin vào một thư mục, tôi gọi là GERONIMO_HOME. Sau khi Geronimo đã được cài đặt, bạn mở cửa sổ dòng lệnh và thay đổi tên thư mục này thành thư mục GERONIMO_HOME/bin sau đó chạy tệp tin startup.sh. Thao tác này khởi chạy máy chủ trong cửa sổ dòng lệnh mới. Khi máy chủ đã khởi động, bạn sẽ thấy một màn hình tương tự như hình 2.

Hình 2. Cửa sổ dòng lệnh khởi động của Geronimo
Geronimo startup console

Cửa sổ dòng lệnh khởi động cho thấy các mô-đun, các đầu nối và các ứng dụng đã được nạp và được khởi chạy khi môi trường chạy của Geronimo được thiết lập. Bạn có thể ngừng Geronimo đang chạy bằng cách sử dụng kịch bản lệnh shutdown.sh, cũng nằm trong thư mục GERONIMO_HOME\bin\ tại nơi cài đặt Geronimo của bạn.


Làm quen với REST

Representational State Transfer (REST) hay “chuyển giao trạng thái đại diện”, là một mẫu hình kiến trúc phần mềm và một kiểu gọi hàm để truy cập và cập nhật tài nguyên trên mạng. Thuật ngữ REST, được định nghĩa trong luận án của Roy Thomas Fielding (Xem mục Tài nguyên), thường được sử dụng để mô tả việc truyền dữ liệu thông qua HTTP bằng cách sử dụng các yêu cầu và các hồi đáp tiêu chuẩn được định nghĩa bởi một tập hợp mặc định các phương thức của HTTP như: GET, POST, DELETE, và PUT.

Kiểu kiến trúc của REST yêu cầu ta sử dụng các mã định danh tài nguyên đồng dạng (URIs) để xác định địa điểm và truy cập các đại diện của tài nguyên - chúng được gọi là trạng thái đại diện của các tài nguyên. Các trạng thái đại diện có thể được truy cập bằng cách sử dụng một tập hợp hạn chế các động từ create, read, update,delete (CRUD) với một vài việc bổ sung thêm vào những cái mà các giao thức tiêu chuẩn, chẳng hạn như giao thức HTTP, đã cung cấp. Các cuộc trao đổi dựa trên nền REST cần phải là phi trạng thái, bằng cách đó ta làm cho nó trở thành một nhân tố tạo điều kiện thuận lợi quan trọng cho các định dạng dữ liệu có ngữ nghĩa ví dụ như RSS, RDF, ngôn ngữ ngữ nghĩa Web (Web Ontology Language - OWL) và Atom.


Làm quen với Google Maps

Các API của Google Maps cung cấp một số cách để thao tác các bản đồ hoặc tạo ra và lấy ra các bản đồ có thể được nhúng vào trong một trang Web. Điều quan tâm của bài viết này là khả năng mà các API của Google Maps cung cấp, cho phép lấy ra một bản đồ dựa trên một xâu ký tự biểu diễn địa điểm.

Giao diện công cộng của Google Maps

Google Maps cung cấp các API mà bạn có thể truy cập bằng cách sử dụng các yêu cầu HTTP tiêu chuẩn. Mỗi yêu cầu API đòi hỏi một khóa API mà bạn cần phải có trước đó. Các API của Google Maps hỗ trợ các hồi đáp HTTP trong các định dạng dữ liệu kiểu KML và GeoRSS.

Sử dụng các API của Google Maps

Để bắt đầu sử dụng các API của Google Maps, trước tiên bạn phải đăng ký để nhận được một khóa API từ trang mã của Google. Khóa mà bạn nhận được sẽ có hiệu lực cho chỉ một tên miền Web.

Lấy ra một bản đồ từ Google Maps

Google Maps cho biết một API, API này cung cấp khả năng lấy ra một biểu hiện (rendition) bản đồ số hóa theo tọa độ địa lý thực (geo-coded) của địa điểm đã cho. Để lấy ra một địa điểm và các thông tin khác về người sử dụng, bạn chỉ cần thực hiện một yêu cầu HTTP GET tiêu chuẩn bằng cách sử dụng http://maps.google.com/maps/geo?q=Salt+Lake+City%2C+UT&output=xml&key={apikey}. Bạn phải thay thế {apikey} bằng khóa API mà Google cấp cho bạn. Ví dụ dưới đây cho bạn thấy cách sử dụng API này với một lệnh curl trong một cửa sổ dòng lệnh. (curl hay cURL là viết tắt của client URL, một trình tiện ích có tham số đầu vào là một URL, cho phép kết nối và giao tiếp với nhiều kiểu máy chủ khác nhau với các giao thức khác nhau).

C:\>curl -G http://maps.google.com/maps/geo?q=Salt%20Lake%20City
   %2C%20UT%26output=xml%26key=ABQIAAAA7kHuyDenRy7D_
   kXwDkUfhBQCabR54RQscLxLTjQlrb8wKm07EBRSANMlyMuVIxp6jUQazrN52Pzp3w

Các hồi đáp sẽ được trả lại dưới dạng một dữ liệu dựa trên XML được gọi là KML có chứa các thông tin về địa điểm đã cho. KML là một chuẩn mở được tổ hợp Inc Geospatial Consortium (OGC) bảo trợ. Bên dưới là ví dụ về dữ liệu KML này về thành phố Salt Lake City.

Liệt kê 2. Ví dụ về một tài liệu KML
<kml xmlns="http://earth.google.com/kml/2.0">
  <Response>
    <name>Salt Lake City, UT</name>
    <Status>
      <code>200</code>
      <request>geocode</request>
    </Status>
    <Placemark id="p1">
      ...
      <Point>
        <coordinates>-111.888189,40.771592,0</coordinates>
      </Point>
    </Placemark>
  </Response>
</kml>

Trong liệt kê này, các phần tử <coordinates> chứa các giá trị chỉ rõ kinh độ, vĩ độ và độ cao (so với mặt biển) tương ứng của thành phố Salt Lake.


Làm quen với Twitter

Twitter cung cấp một dịch vụ cho phép người sử dụng kết nối với nhau bằng cách sử dụng các yêu cầu của HTTP tiêu chuẩn, các tin nhắn và các thông điệp văn bản. Tiền đề của dịch vụ Twitter là cho người dùng gửi các thông điệp ngắn, được gọi là tweets, mô tả những gì họ đang làm. Các tweets được gửi đến các máy chủ Twitter và chuyển tiếp đến những “môn đồ” (followers) của người gửi tweet.

Giao diện công cộng của Twitter

Twitter cung cấp một bộ các API, bạn có thể truy cập bằng cách sử dụng các yêu cầu của HTTP tiêu chuẩn. Các API của Twitter đại khái dựa vào kiến trúc REST. Mỗi API của Twitter hiện đang hỗ trợ các hồi đáp của HTTP dưới các định dạng dữ liệu XML, JSON, RSS và Atom. Ví dụ về việc sử dụng một API của Twitter với một lệnh curl trong cửa sổ dòng lệnh để lấy các lịch trình thời gian (timeline) công cộng của Twitter dưới dạng RSS: C:\>curl -G http://twitter.com/statuses/public_timeline.rss.

Cũng sẵn có các API khác để thực hiện các nhiệm vụ chẳng hạn như lấy ra lịch trình thời gian của một người bạn, gửi lên cập nhật trạng thái, cập nhật vị trí của khái lược của bạn và lấy ra các dữ liệu khái lược của một người sử dụng.

Lấy ra một địa điểm của người sử dụng Twitter

Twitter đưa ra một API, API này cung cấp khả năng để lấy ra thuộc tính về location của khái lược của người sử dụng. Để lấy ra địa điểm và các thông tin khác của một người sử dụng, bạn chỉ cần thực hiện một yêu cầu HTTP GET tiêu chuẩn bằng cách sử dụng http://twitter.com/users/show/{targetUserID}.xml. Bạn phải thay {targetUserID} bằng ID trong Twitter của người sử dụng mà ta định lấy thông tin về người đó. Ví dụ của việc sử dụng API này với lệnh curl từ cửa sổ dòng lệnh:

C:\>curl -G http://twitter.com/users/show/jhanson583.xml

Hồi đáp được trả về dưới dạng dữ liệu theo định dạng XML, chứa các thông tin về người sử dụng, bao gồm cả địa điểm của người sử dụng như đã được định cấu hình trong khái lược người sử dụng. Một ví dụ về dữ liệu XML kiểu này cho người sử dụng jhanson583 là:

Liệt kê 3. Ví dụ dữ liệu XML cho khái lược của người sử dụng Twitter
<?xml version="1.0" encoding="UTF-8"?>
<user>
  <id>10852552</id>
  <name>Jeff Hanson</name>
  <screen_name>jhanson583</screen_name>
  <location>Salt Lake City, UT</location>
   …
</user>

Tại đây, phần tử <location> chứa dữ liệu được nhập vào trong khái lược của người sử dụng jhanson583. Lưu ý rằng bạn có thể gõ nhập chuỗi dạng tự do, vì vậy không bảo đảm là nó hợp lệ để áp dụng cho một truy vấn đối với Google Maps. Vì vậy, dữ liệu bản đồ chỉ có thể được lấy ra cho khái lược người sử dụng có chứa dữ liệu địa điểm hợp lệ trong phần tử <location>. Các dữ liệu về địa điểm được hiển thị trong khái lược ở trên là hợp lệ để cho ứng dụng truy vấn Google Maps.

Lấy ra một địa điểm của người sử dụng Twitter bằng mã Java

Lấy ra các thông tin khái lược của người sử dụng trong ngôn ngữ Java chỉ đơn giản là gửi một yêu cầu HTTP GET và phân tích cú pháp kết quả hồi đáp. Các đoạn mã trong liệt kê 4 là mã Java để gửi một yêu cầu HTTP GET chung nhất.

Liệt kê 4. Ví dụ yêu cầu HTTP bằng ngôn ngữ Java
  public static String sendHTTPRequest(String url)
    throws Exception
  {
    String res = null;

    try
    {
      HttpURLConnection con = null;
      InputStream inStream = null;
      OutputStream outputStream = null;

      try
      {
        con = (HttpURLConnection) new URL(url).openConnection();
        con.setDoInput(true);
        con.setRequestMethod("GET");
        inStream = con.getInputStream();
        res = parseHTTPResponse(inStream);
      }
      finally
      {
        try
        {
          inStream.close();
          outputStream.close();
          con.disconnect();
        }
        catch (Exception e)
        {
        }
      }
    }
    catch (IOException e)
    {
      e.printStackTrace();
    }

    return res;
  }

  public static String parseHTTPResponse(InputStream inStream)
    throws IOException
  {
    BufferedReader br = null;
    br = new BufferedReader(new InputStreamReader(inStream, "UTF-8"));
    StringBuffer buf = new StringBuffer();
    String line;
    while (null != (line = br.readLine()))
    {
      buf.append(line).append("\n");
    }
    return buf.toString();
  }

Trong liệt kê này phần tử HttpURLConnection được sử dụng để gửi yêu cầu GET. Hồi đáp từ yêu cầu này được lấy ra dưới dạng InputStream , nó được đọc từng dòng để truy cập vào dữ liệu XML. Bằng cách sử dụng mã như ở trên để gửi một yêu cầu HTTP, bạn có thể gọi ra một API của Twitter để lấy ra khái lược của người sử dụng như liệt kê ở dưới .

Liệt kê 5. Yêu cầu HTTP để lấy ra dữ liệu khái lược Twitter bằng ngôn ngữ Java
public class Twitter
{
  private static final String API_URL = "http://twitter.com/users/show/";

  public static String getUserLocation(String targetUserID)
    throws Exception
  {
    String response =
      HTTP.sendHTTPRequest(API_URL + targetUserID + ".xml", null);
    DocumentBuilder docBuilder =
       DocumentBuilderFactory.newInstance().newDocumentBuilder();
    Document doc =
      docBuilder.parse(new InputSource(new StringReader(response)));
    if (null != doc)
    {
      NodeList nodeList = doc.getElementsByTagName("location");
      if (null != nodeList && nodeList.getLength() > 0)
      {
        Node locationNode = nodeList.item(0);
        if (null != locationNode)
        {
          return locationNode.getTextContent();
        }
      }
    }

    throw new Exception("Invalid HTTP response content encountered");
  }
}

Làm quen với Ajax

Ajax là một tập hợp các kỹ thuật và khái niệm dành cho việc tương tác với máy chủ HTTP từ một trình duyệt có cho phép JavaScript mà không cần trực tiếp làm mới trang để gọi các yêu cầu máy chủ. Ajax cũng là một tập hợp các kỹ thuật và khái niệm để cập nhật động các trang trình duyệt bằng cách sử dụng JavaScript, CSS, thao tác DOM v.v… Khả năng lấy dữ liệu từ một máy chủ thông qua một trang trình duyệt và để áp dụng những dữ liệu ấy mà không cần làm mới trang web đã tạo điều kiện thuận lợi cho bầu không khí dành cho việc tạo ra các ứng dụng dựa trên trình duyệt với một trải nghiệm phong phú về giao diện người dùng, ganh đua với các ứng dụng máy tính để bàn.

Các trang web dùng kỹ thuật Ajax nhờ vào việc sử dụng một đối tượng JavaScript gọi là đối tượng XMLHttpRequest. Đối tượng này được sử dụng để truyền tải các yêu cầu HTTP từ một trình duyệt tới một máy chủ và nhận hồi đáp từ máy chủ một cách đồng bộ hoặc không đồng bộ.

Các đoạn mã trong liệt kê 6 tạo ra một cá thể của đối tượng XMLHttpRequest trong phương thức ajaxPost. Sau đó, đối tượng XMLHttpRequest sẽ được sử dụng để gọi một phương thức HTTP POST tiêu chuẩn trên khung công tác máy chủ. Dữ liệu được lấy từ khung công tác máy chủ được chuyển đến phương thức send của đối tượng của XMLHttpRequest, ở đây nó được lấy ra, được phân tích cú pháp và được chuyển tới phương thức createMap mà từ đó bản đồ của Google Maps được tạo ra và được áp dụng cho trang web.

Liệt kê 6. Xử lý một yêu cầu XMLHttpRequest và hồi đáp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
   Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>Google Maps</title>
  
  <script src="http://maps.google.com/maps?file=api&v=2&key=..."
    type="text/javascript"></script>

  <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible())
    {
      // =============================================
      // createMarker function
      // =============================================
      function createMarker(point, html)
      {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function()
        {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // =============================================
      // createMap function
      // =============================================
      function createMap(latitude, longitude, twitterUser)
      {
        // Display the map, with some controls, and set the initial location
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(latitude, longitude), 8);

        // Set up marker

        var point = new GLatLng(latitude, longitude);
        var marker = createMarker(point, twitterUser)
        map.addOverlay(marker);
      }
      
      // =============================================
      // ajaxPost function
      // =============================================
      function ajaxPost(apiURL)
      {
        var twitterUser = document.getMapForm.TwitterUser.value;
        var xmlRequest = new XMLHttpRequest();

        // The false parameter indicates a synchronous call
        //
        xmlRequest.open("POST", apiURL + '?TwitterUser=' + twitterUser, false);
        xmlRequest.send(twitterUser);
        if (xmlRequest.status == 200)
        {
          if (xmlRequest.responseText)
          {
            var xmlDoc = xmlRequest.responseXML;

            var latitude =
              xmlDoc.getElementsByTagName('latitude')[0].firstChild.data;
            var longitude =
              xmlDoc.getElementsByTagName('longitude')[0].firstChild.data;

            createMap(latitude, longitude, twitterUser);
          }
        }
        else
        {
          alert("ajaxPost failed with status: " + xmlRequest.status);
        }
      }
    }
    else
    {
      // display a warning if the browser was not compatible
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
  </script>
</head>

<body onunload="GUnload()">

<p/>

<form method="POST"
    action="javascript:ajaxPost('http://localhost:8080/twoogle/service/getMap')"
    name="getMapForm">
  Twitter user name: <input type="text" value="" name="TwitterUser"/>
  <input type="submit" value="Get Map" name="submit"/>
</form>

<p/>

<div id="map" style="width: 550px; height: 450px"></div>
</body>

</html>

Mã lệnh sử dụng các vĩ độ và kinh độ được lấy ra cho một người sử dụng Twitter đã cho để tạo ra một bản đồ của Google Maps. Bản đồ này sau đó sẽ áp dụng cho DOM của trang web, ở đây nó sẽ trở thành một phần tử con của phần tử <div> của bản đồ.


Kết hợp Twitter và dữ liệu của Google Maps bằng cách sử dụng REST và các kỹ thuật Ajax

Với khả năng lấy các dữ liệu về địa điểm cho người dùng Twitter và dữ liệu địa lý (geo-code) của Google Maps, bạn có thể xây dựng các dịch vụ liên quan để xuất bản dữ liệu của Twitter và dữ liệu của Google Maps mà các ứng dụng hòa trộn có thể sử dụng và phối hợp để sinh ra một nhóm UI từ dữ liệu đã được kết hợp.

Khung công tác được mô tả trong khuôn khổ bài viết này kết hợp các dữ liệu từ việc gọi dịch vụ, nó lấy ra dữ liệu về địa điểm của khái lược người sử dụng Twitter, cũng như các dữ liệu về kinh độ và vĩ độ từ Google Maps cho dữ liệu địa điểm. Dữ liệu này sau đó được lấy ra bằng cách sử dụng các kỹ thuật Ajax từ JavaScript trong một trang hoà trộn, ở đây các dữ liệu được nạp động vào DOM của trang web để hiển thị bản đồ với địa điểm của người sử dụng Twitter. Dự án nguồn cho ví dụ này có sẵn trong phần Tải về.

Luồng điều khiển trong khung công tác khá đơn giản: Bạn tạo ra một lệnh gọi dịch vụ dựa trên nền REST đồng bộ bằng cách sử dụng Ajax từ trang hoà trộn đến servlet Java hiểu Ajax ở phía máy chủ. Các lời gọi dịch vụ được cấu trúc như sau: http://{host}:{port}/twoogle/service/getMap. Các servlet gửi các lời gọi dịch vụ tới Twitter và Google Maps để lấy địa điểm của người sử dụng. Các vĩ độ và kinh độ của địa điểm của người sử dụng được chuyển trở lại tới trang hòa trộn và được áp dụng cho trang web để tạo ra một bản đồ. Khung công tác được thể hiện trong Hình 3.

Hình 3. Khung công tác hòa trộn Twitter / Google Maps
The Twitter/Google Maps mashup framework

Khung công tác nhận được các yêu cầu HTTP dựa trên nền Ajax từ một trình khách hòa trộn, sau đó nó sử dụng các dữ liệu từ các yêu cầu để lấy ra dữ liệu về địa điểm từ Twitter và Google Maps. Các giá trị về vĩ độ và kinh độ của một người sử dụng Twitter đã cho được gửi trở lại cho trình khách hòa trộn dưới dạng XML để được phân tách cú pháp và được áp dụng cho trang hòa trộn.


Triển khai và chạy khung công tác

Khung công tác REST và Ajax Twitter/Google Maps đưa ra một servlet tiếp nhận các yêu cầu HTTP có cấu trúc REST và dựa trên nền Ajax. Các dữ liệu từ các yêu cầu được chuyển tới các dịch vụ của Twitter và của Google Maps để lấy ra các dữ liệu địa điểm cho một người sử dụng Twitter đã cho.

Để triển khai khung công tác, bạn đóng gói các lớp đã biên dịch cho khung công tác cùng với các tệp tin HTML tĩnh và các tài nguyên khác trong một thư mục được cấu trúc giống như một tệp tin WAR đã bung ra. Sau đó áp dụng lệnh hiển thị dưới đây cho thư mục mà tệp tin WAR đã bung ra để triển khai khung công tác lên Geronimo.

GERONIMO_HOME\bin>deploy --user system 
    --password manager deploy --inPlace MYAPPDIR\MYAPPNAME

Bạn phải thay địa chỉ MYAPPDIRMYAPPNAME bằng địa chỉ thư mục và tên của ứng dụng của bạn một cách tương ứng. Bạn có thể sử dụng lệnh dưới đây để gỡ bỏ bản triển khai khung công tác khỏi Geronimo.

GERONIMO_HOME\bin>deploy --user system 
    --password manager undeploy MYAPPNAME

Một lần nữa bạn phải thay MYAPPNAME bằng tên của ứng dụng của bạn.


Kiểm thử khung công tác

Sau khi ứng dụng đã được triển khai thành công, bạn gõ nhập URL sau vào trình duyệt Web: http://host:port/twoogle. Khi trang web xuất hiện, bạn gõ nhập tên người sử dụng Twitter tại ô ở phía trên cùng của trang, sau đó nhấn Get Map. Nếu khái lược người sử dụng chứa một phần tử <location> hợp lệ, một bản đồ Google Maps sẽ xuất hiện trên trang web.

Kết luận

Apache Geronimo là một nền Java EE mà bạn có thể sử dụng để xây dựng các dịch vụ doanh nghiệp và các ứng dụng. Geronimo được thiết kế dựa trên các dịch vụ và các thành phần rời nhau để tạo điều kiện thuận lợi cho việc triển khai và nhận được môi trường thực thi có tính mô-đun cao, cấu hình được và dễ quản lý. Ứng dụng hòa trộn được các nhà phát triển web sử dụng rộng rãi vì những khả năng mà nó thể hiện và sự dễ dàng tổ hợp các dữ liệu và nội dung với nhau. Tính dễ thao tác này là do đã sẵn có và phổ cập rộng khắp các công nghệ động và giàu ngữ nghĩa dành cho Web — các công nghệ như XML, JSON, RDF, mã JavaScript động và Ajax.

Bài viết này thảo luận về kỹ thuật để kết hợp việc gọi dịch vụ kiểu REST với các trình khách và các máy chủ dựa trên nền Ajax trong một khung công tác Java để lấy ra các dữ liệu về địa điểm của một người sử dụng Twitter đã cho. Dữ liệu về địa điểm sau đó được sử dụng để lấy ra dữ liệu vĩ độ và kinh độ từ Google Maps, các dữ liệu này đến lượt nó được áp dụng, thông qua sử dụng các kỹ thuật Ajax phía khách, để tạo ra một bản đồ Google Maps và nạp động lên trang hòa trộn.

Nhiệm vụ của bạn bây giờ là tải xuống phiên bản mới nhất của Geronimo, tự làm quen với các API của Twitter và của Google Maps và nghiên cứu các khái niệm chung của trang hòa trộn. Sử dụng các mô hình đơn giản hóa để lập trình các ứng dụng web mà REST và Ajax cung cấp, ngay bây giờ bạn có thể bắt đầu khai thác sức mạnh của Geronimo, Twitter và Google Maps để xây dựng các ứng dụng hòa trộn vững chãi và có độ linh hoạt cao.


Tải về

Mô tảTênKích thước
Sample projectos-ag-mashup-rest-TwitterFramework.zip13KB

Tài nguyên

Học tập

  • Trang IBM developerWorks sẽ mang lại cho bạn mọi sự giúp đỡ mà bạn cần để sử dụng Nền Apache Geronimo
  • Tìm hiểu thêm về REST và Ajax trong bài viết của Bill Higgins: "Ajax and REST, Phần 1."
  • Tiếp tục nghiên cứu về hòa trộn với bài viết của Duane Merrill "Mashup: Cách thức mới của ứng dụng web."
  • Xem trang Phát triển Twitter.
  • Xem trang Phát triển Google Maps.
  • Đọc Luận án Tiến sĩ về REST của Roy Thomas Fielding.
  • Để biết thêm thông tin về KML, bạn xem trang OGC.
  • WebSphere sMash là một môi trường phát triển và chạy thi hành của IBM để tạo ra các ứng dụng web động bằng cách sử dụng ngôn ngữ kịch bản lệnh Groovy và PHP. WebSphere Smash tích hợp với Eclipse và tạo ra các dịch vụ kiểu REST ở bên trên Groovy hay PHP.
  • Dự án Zero là cộng đồng phát triển phần mềm thử nghiệm, tại đây các phiên bản mới của WebSphere smash được thai nghén.
  • Để nghe các bài phỏng vấn và các cuộc thảo luận thú vị dành cho các nhà phát triển phần mềm, bạn vào mục các sản phẩm phát thanh (podcast).
  • Theo dõi sát Các sự kiện kỹ thuật và phát tin trên Web của developerWorks.
  • Xem thông tin về các hội nghị sắp tới, các triển lãm thương mại, các tin phát trên web, và Các sự kiện trên khắp thế giới đang là mối quan tâm của các nhà phát triển mã nguồn mở của IBM.
  • Xem trang Vùng mã nguồn mở của developerWorks để có nhiều thông tin về các mục “làm thế nào”, các công cụ và các dự án được cập nhật để giúp bạn phát triển với các công nghệ mã nguồn mở và sử dụng chúng với các sản phẩm của IBM.
  • Theo dõi và tìm hiểu về IBM và các công nghệ mã nguồn mở và các chức năng sản phẩm trên trang web miễn phí: Trình chiếu theo yêu cầu của developerWorks.

Lấy sản phẩm và công nghệ

  • Tải xuống phiên bản mới nhất của Apache Geronimo.
  • WebSphere sMash DE bao gồm trình xây dựng ứng dụng và trình chạy thi hành để hỗ trợ việc phát triển, kiểm thử và việc triển khai hạn chế các ứng dụng.
  • Đổi mới dự án phát triển mã nguồn mở tiếp theo của bạn với Các phần mềm dùng thử của IBM, có sẵn để tải về hoặc trên đĩa DVD.
  • Tải về phiên bản đánh giá sản phẩm của IBM, và thực hành các công cụ phát triển ứng dụng và sản phẩm phần mềm nằm giữa (Middleware) từ DB2®, Lotus®, Rational®, Tivoli® và WebSphere.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=406454
ArticleTitle=Xây dựng các ứng dụng hòa trộn phía máy chủ với Geronimo và REST
publish-date=07052009