Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mobile Citizen Engagement App in Ionic 2: Part I

DZone's Guide to

Mobile Citizen Engagement App in Ionic 2: Part I

This is the first part in a three-part series on building a mobile citizen engagement application that queries open government data.

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

This is the first part in a three-part series on building a mobile citizen engagement application that queries open government data. Part one will cover getting a working application running. Part 2 will explore creating an additional page in the application to show the user additional detail information. The concluding Part 3 will continue with how to style the application from the default Ionic template.

Most mobile applications are developed with a specific platform in mind. These native applications allow developers to take full advantage of the platform’s capabilities. Hybrid mobile applications, on the other hand, allows developers and designers to develop applications for more than one target platform. One of these hybrid frameworks that has been greatly revamped is Ionic.

Ionic released Ionic2 RC 0, in September 2016, which incorporates AngularJS 2 Final. Ionic 2 has restructured the Ionic API’s and application structure to make development of hybrid mobile applications easier.  A number of years ago Phonegap/Cordova were developed to bridged the gap of access to native features of the mobile device with its web viewer. This allowed mobile applications to be built for multiple platforms. Ionic’s framework added simplicity to the hybrid mobile application technology stack as it leverages AngularJS and TypeScript in it's API and components. 

This tutorial is not going to cover installation of nodejs to Ionic as there is already plenty of resources for setting up your environment. There is also the assumption you have installed required development tools and emulators for android, IOS, or windows. These tools are only required when you are ready to deploy your applications to those platforms.

In this tutorial, we will walk through creating  new Ionic 2 project and use it to query a Socrata REST API endpoint. Socrata is an open data cloud solution that allows federal, state and local governments to publish data with the intent to enable citizen engagement. The application we will build will query some of this data and allow the user to view summary and detail information.

Ionic comes with a command line tool that provides a quick start up for a new project. The startup project comes complete to build and run a mobile environment. Once you have installed the basic nodejs, cordova, and ionic packages, building our first application will be quick.

Starter Project

The best place to begin with starting an application project is to use a template. We will use a tab template that will give us a basic tabbed application with a home page, about us, and contact us. If you want to see other starter applications go here http://ionicframework.com/getting-started/. Open the command prompt or terminal window and in the folder you would like to start your project and type:

 ionic start MyPermits tabs --v2 

‘MyPermits’ will be the name of your project folder that will be created. You will see packages being installed for this project. We won’t worry about installing the android and IoS platforms at this time. In addtion, Ionic2 handles installation of these platforms when the application is run for the target platform. Notice the --v2 parameter this indicates that the project configurations to use Ionic 2. This will use Ionic's latest API, AngularJS 2, and TrueType script for developing the application.

We will want to confirm that our project template can be run and deployed. Ionic has a server that allows developers to test their applications within a desktop web browser. Web developers can make application changes and the server will render the application changes almost immediately. This paradigm greatly decreases development time, unlike traditional mobile development, which requires builds and deployments to an emulator. The ionic server will be sufficient for this tutorial, but it is recommended you test your final application in the platform emulator you plan to deploy your application.

Go to the ‘MyPermits’ folder from the command line and type the following start running the Ionic server:

 Ionic serve --lab 

The default desktop browser will launch. You can also go to the start page by opening the browser to: http://localhost:8100/ionic-lab

The server will show a mobile renderings for IoS, Android and windows mobile. This indicates your project setup and build is working. You will notice that the navigation tabs and header bars for each platform differs slightly. This is one of the benefits of Ionic's components as it tries to simplify the cross-platform look and feel, without requiring too much work from the web developer or designer.

Project Structure

You will notice the project folder has the following file structure. For this project we will primarily focus on files in the src folder.

├── package.json     // bower dependencies
  ├── config.xml     // cordova configuration
  ├── hooks          // custom cordova hooks to execute on specific commands
  ├── ionic.config.json  // ionic configuration
  ├── package.json   // node dependencies

├── tsconfig.json   // type script config

├── node_modules     // node js and angular modules

├── platforms      // iOS/Android specific builds will reside here
  ├── plugins        // where your cordova/ionic plugins will be installed

├── resources         // resources for mobile platform
  ├── src           // scss, code, pages, services
  └── www            // application - JS code and libs, CSS, images, etc.

Create Socrata Service

Ionic 2 allows web developers to use Typescript. This is a superset of the javascript language that allows developers to use object oriented classes and strict typing. Microsoft developed Typescript as an open source language and they developed Visual Studio Code as an open source code editor that supports Typescript. This lighter version of Visual Studio also has TypeScript auto completion so for this tutorial it  makes it easy to debug and test the application. You can download it for free and it runs on windows, mac, and Linux. https://code.visualstudio.com/  

The first file we will create is the Socrata services. Create a file called socrata.ts. This will go into src\app\ folder of our project. The purpose is to query a REST API endpoint.

socrata.ts

import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';
import {Observable} from "rxjs";

@Injectable()
export class SocrataService {

    constructor(private http: Http) {
    }

    getPermits() {
        let permitData = this.http.get('https://data.seattle.gov/resource/i5jq-ms7b.json?$limit=50');
       return permitData;
    }
}

Line 12: We are querying a Socrata rest endpoint and telling it to send back data as a JSON array object. In additon, we are setting the results to only the first 50 rows. Socrata has a full feature of query and filter capabilities for applications to interrogate their open data platform.

The Controller

Next, we need to incorporate the service as a service provider to our home screen controller. Open up the home.ts file and  import the Socrata service. We will be doing the following:

  • Import the newly created Socrata service module

  • Add the component service component to the controller

  • Initiate the constructor for the Socrata service

  • Implement a function to query the service and hold the resulting json list.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {SocrataService} from '../../app/socrata';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [SocrataService]
})
export class HomePage {

  public foundPermits;

  constructor(private socrata: SocrataService, public navCtrl: NavController) {
  }

  getPermits() {
        this.socrata.getPermits().subscribe(
            data => {
                this.foundPermits = data.json();
            },
            err => console.error(err),
            () => console.log('getPermits completed')
        );
  }

}

Line 3: adds the import for the new Socrata service.

Line 8:  adds the Socrata service as a provider for this controller's. The controller is leveraging the  component decorator, which is an Angular 2 feature. Most pages in this application will use this. This provides the component the ability to know which html page to use for rendering the view and sets the selector on the navigation bar. 

Line 12: This is a public accessible member that will hold the resulting JSON information to be displayed on the page.

Line 14: the constructor needs to be initialized with not only the navigation component, but the Socrata service provider.

Line 17: This function uses the Socrata service to initiate the query and marshals the data into a JSON data object. In the Socrata service it was specified that the returning data be sent to the application as a JSON object array.

The View

The next is to modify the view so the user can see a query button to start the query and then display the results list as a set of scrollable cards. Open the home.html file. In the <ion-content> tag add the following:

<ion-card>
    <div class="card-title">Seattle</div>
    <div class="card-subtitle">Permits</div>
    <div padding>
        <button ion-button block (click)="getPermits()">Query</button>
    </div>
</ion-card>

This will put a card with a title and a button to initiate our query. Below this ion-card component we will add another card that will display the results, when the user presses the query button. When the user presses the query button the click event calls the getPermits function in the controller component. The Ssocrata service calls out to the REST service and gets the JSON data and puts assigns it to the 'foundPermits' object.

Angular has a directive we can use to iterate through the JSON array called *ngFor

When querying the Socrata rest service it returns a JSON array as such:

[{"action_type":"ADD/ALT","address":"3612 48TH AVE SW","applicant_name":"WOLPA, ZACHARY","application_permit_number":"6304884","category":"SINGLE FAMILY / DUPLEX","description":"Construct alterations to existing single family residence,","latitude":"47.57163644","location":{"type":"Point","coordinates":[-122.393174,47.571636]},"longitude":"-122.39317393","permit_and_complaint_status_url":"http://web6.seattle.gov/dpd/PermitStatus/Project.aspx?id=6304884","permit_type":"Construction","status":"Initial Information Collected","value":"0","work_type":"No plan review"}]

Therefore, as we loop through all the returning JSON array data we can get any key value detail. In this case, we will display the permit category, and permit number. 

<ion-card *ngFor="let permit of foundPermits" >
<ion-card-header>
<ion-icon name="home" item-left></ion-icon> {{ permit.category }}
</ion-card-header>
<ion-card-content>
{{ permit.application_permit_number }}
</ion-card-content>
</ion-card>

Startup the Ionic server and view the resulting UI. It will look like this, when the user presse the search button.

You have successfully created an Ionic 2 application that can query a Socrata rest service and get basic summary data back.

Source on github: https://github.com/wiyou/citypermit

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
ionic framework ,open data ,rest api ,angular 2 ,mobile

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}