CHAPTER 16 - Create Apps by Linking to Government Open Data

We learned how to use EZoApp to link JSON in the previous chapter. But, how do I find all these JSON data to use? When it comes to data, we should immediately think of the open data provided by our government. In addition to information about tourist spots, the government's open data offer a lot of other useful information. Though using browsers on computers requires cross-domain, apps do not have this issue. Let us link to the government's open data now! (Remember to enable cross-domain!)

Link to the open data of Kaohsiung City Government: http://data.kaohsiung.gov.tw/Opendata/. Select dining information (http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AV&CaseNo2=2&Lang=C ), then open the JSON link ( http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AV&CaseNo2=2&FileType=1&Lang=C&FolderType=). You can see clearly the JSON data related to dining. We can pick a few attributes we want to work with, such as Name, Tel, and Add.

Next, start EZoApp. Drag-and-drop a json-listview component onto the design screen; modify the "{{ }}" in the HTML by entering the attributes we just selected. The HTML should now look like the code below: (note: it's recommended that you type the code in the HTML page manually instead of using the property panel in order to avoid the incidental and/or unexpected conversion of special symbols, such as '&'.)

<ul id="gk-1014HNkC" data-role="listview" data-autodividers="true" data-inset="true" is="json-listview" service="http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AV&CaseNo2=2&FileType=1&Lang=C&FolderType=">
  <li divider="{{Name}}" is="listview-li">tel：{{Tel}}
    <br>Address：{{Add}}</li>
</ul>

After entering the code, click Preview. You can see that you are now connected with Kaohsiung City's open data. However, since the amount of data is quite large, it could take a while before the page loads. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5193735243563008)

A simple linking like this is not too special. It would be cool if a map would be displayed when we click an item. To do that, we need to add a new page. Click "Add Page" at the bottom to add a new page named "map".

In the page's HTML code, add a header and a button in the header, as well as a map. The purpose of the button is to return to the previous page. The code should look like this now:

<div id="map" data-role="page" is="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>map</h3>
    <a class="ui-btn ui-btn-left ui-icon-arrow-l ui-btn-icon-notext">back</a>
  </div>
  <div role="main" class="ui-content" is="content">
    <div is="gmap" style="width:100%;height:200px;" zoom="12" address="Qianzhen, TW"></div>
  </div>
</div>

Remember to set the attributes of the button. Here, you can set the href to point it back to Home; or set rel as Back, which will return to Home when clicked. (If you would like to use effects, just set the transition.)

After the map page is complete, we need to feed the address to it. We need to switch back to the home page to modify its HTML. In the HTML of the home page, wrap around the "{{Add}}" with an a tag and a span tag, and add to it a class called "add".

<div id="home" data-role="page">
  <div role="main" class="ui-content">
    <ul id="gk-1014HNkC" data-role="listview" data-autodividers="true" data-inset="true" is="json-listview" service="http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&amp;CaseNo1=AV&amp;CaseNo2=2&amp;FileType=1&amp;Lang=C&amp;FolderType=">
      <li divider="{{Name}}" is="listview-li">
        <a href="#map">電話：{{Tel}}
          <br>地址：
          <span class="add">{{Add}}</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Next, we will go to the map page and give our map component an id called "address".

<div id="address" is="gmap" style="width:100%;height:200px;" zoom="12" address="Qianzhen, TW">
</div>

Next, we need to edit JS- mainly to construct a global variable called address. Clicking the list will bring in the address and, when switching pages, the API of the gk-component will read it and switch the map. (Refer to the example on the official website: http://jqmdesigner.appspot.com/designer.html#&ref=5630031900442624)

var address;
$(document).on("pageinit", "#home", function () {
  var $ele = $("#gk-1014HNkC"),
    url = $ele.attr("service");
  if (url) {
    $.getJSON(url).complete(function (data) {
      $ele.gk("model", $.parseJSON(data.responseText));
      $ele.find('a').on('click',function(){
        address = $(this).find('.add').text();
      });
    });
  }
});
$(document).on("pageshow", "#map", function () {
  console.log(address);
  var $map = $('#address');
  $map.gk('address', address);
});

That's it. Without writing too much code, we have created an app that links to public data and displays a map! Of course, a good app requires more work to make its UI look appealing. EZoApp can save us lots of development time, so we can spend more time on beautifying the UI! (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5153539181510656)

Continue reading CHAPTER 17 - Create Weather Apps by Linking to Weather Information (1)
Or Return to Table of Contents