Hawaii Electeds

Mobile Application Project (Part 1)


In this assignment you will create a mobile application that someone in Hawaii can use to determine their elected officials based on their geographic location. Click here for an example of the application we will be building.

Our application will use the mobile device's Geolocation service, as well as three API web services. The first is by GeoNames which is a free web service for determining the nearest street address to a set of geocoordinates.

Kohoike.org provides two experimental web services, one for returning the list of elected officials for a Hawaii address, and a second for returning an elected official profile from the office and district.

PART 1. GET ELECTEDS SCREEN.
The diagram illustrates the functional components of the first screen. Click for a video on how to do this assignment.

A. Sign up for a free Appery.io account using your @hawaii.edu email address.

Create a new app using your name (e.g., Hawaii Electeds).
B. On the left, click on Pages and then click on the startScreen page. Familiarize yourself with the DESIGN screen.

Click on the header and change the Text to "Hawaii Electeds" in the PROPERTIES window on the right.
C. SCREEN DESIGN
From the PALETTE, drag the following to the screen in order:
  1. Button - Change the Text to "Get Geocoordinates." Name the button btnGetLatLng.
  2. Grid - Change the Rows of the mobilegrid to 1 and click Apply. Leave the Cols at 2.

    1. Drag a Label into the first cell of the grid. Name the mobilelabel lblLatitude. Change the Font Size to 12 and Align to Center. Type Latitude for the Text.
    2. Drag a Label into the second cell of the grid. Name the mobilelabel lblLongitude. Change the Font Size to 12 and Align to Center. Type Longitude for the Text.
  3. Button - Change the Text to "Get Address." Name the button btnGetAddress.
  4. Grid - Change the Rows of the mobilegrid to 1 and click Apply. Leave the Cols at 3 and click Apply.

    1. Click the first mobilegridcell of the grid. Change the Dimension width to 25%.
    2. Click the third mobilegridcell of the grid. Change the Dimension width to 25%.
    3. Drag an Input control into the first cell of the grid. Name the mobiletextinput txtHouseNo. Delete what is in the Text field. In the Placeholder field, enter "House #". Click the Mini Version checkbox.
    4. Drag an Input control into the second cell of the grid. Name the mobiletextinput txtStreet. Delete what is in the Text field. In the Placeholder field, enter "Street". Click the Mini Version checkbox.
    5. Drag an Input control into the third cell of the grid. Name the mobiletextinput txtZip. Delete what is in the Text field. In the Placeholder field, enter "Island". Click the Mini Version checkbox.
  5. Button - Change the Text of the mobilebutton to "Get Electeds." Name the button btnGetElecteds.
  6. List - Change the number of Items in the mobilelist to 4 and click Apply.

    1. Click on Item 1. Change the name of the mobilelistitem to itmMayor. Change the Text to Mayor.
    2. Click on Item 2. Change the name of the mobilelistitem to itmCongress. Change the Text to Congressman.
    3. Click on Item 3. Change the name of the mobilelistitem to itmSenate. Change the Text to Senator.
    4. Click on Item 4. Change the name of the mobilelistitem to itmHouse. Change the Text to House Rep.
D. SETUP Get Geolocation BUTTON
First we will set up and verify the Get Geolocation button.
  1. SERVICE - Click CREATE NEW on the left top and select Service.
    1. Enter GeolocationService for the name.
    2. Click Geolocation for the Device service.
    3. Click the Create Service button.
    4. Close the GeolocationService Service tab.
  2. DATASOURCE - Return to the start screen. Click the DATA tab on the left (under DESIGN). For Add datasource, Select Type Device. GeolocationService should be the only choice. Click Add.
    1. Name the datasource get_location.
    2. Open the new datasource and click on Success: Mapping.
    3. Click Expand all on both sides.
    4. Drag the latitude Service response on the left onto the lblLatitude Text field on the right.
    5. Drag the longitude Service response on the left onto the lblLongitude Text field on the right.
    6. Click Save and return at the top
  3. EVENT HANDLER - Return to the start screen. Click the DESIGN tab on the left. Open the EVENTS tab at the bottom.
    1. For COMPONENT select btnGetLatLng.
    2. For EVENT select Click event.
    3. For ACTION select Invoke service.
    4. For Datasource select get_location. Click Save.
  4. Save and test the Get Geolocation button to confirm it functions properly.
E. SETUP Get Address BUTTON
Next we will set up and verify the Get Address button.
  1. SERVICE - Click CREATE NEW on the left top and select Service.
    1. Enter GetNearestAddress for the name. Click the Create Service button.
    2. Under Settings, enter http://api.geonames.org/findNearestAddressJSON for the URL
    3. Under Request, Add a new parameter named formatted. Enter true for the Value.
    4. Also under Request, Add a new parameter named username. Enter your geonames.org username for the Value. (Go to geonames.org/login to create a free account.)
    5. Also under Request, Add a new parameter named style. Enter full for the Value.
    6. Also under Request, Add a new parameter named lat. Leave the value blank.
    7. Also under Request, Add a new parameter named lng. Leave the value blank.
    8. Under Test, Enter 21.2981 for lat and -157.6710 for lng. Click Test. Click Import as Response.
    9. Close the GetNearestAddress Service tab.
  2. DATASOURCE - Return to the start screen. Click the DATA tab on the left (under DESIGN). For Add datasource, Select Type Service. Select GetNearestAddress. Click Add.
    1. Name the datasource get_address.
    2. Open the new datasource and click on Before send: Mapping.
    3. Click Expand all on both sides.
    4. Drag the lblLatitude Text field on the left to the lat query field on the right.
    5. Drag the lblLongitude Text field on the left to the lng query field on the right.
    6. Click Save and return at the top

    7. With the datasource open, click on Success: Mapping.
    8. Click Expand all on both sides.
    9. Drag the postalcode Text field on the left to the txtZip Text field on the right.
    10. Drag the street Text field on the left to the txtStreet Text field on the right.
    11. Drag the streetNumber Text field on the left to the txtHouseNo Text field on the right.
    12. Click Save and return at the top
  3. EVENT HANDLER - Return to the start screen. Click the DESIGN tab on the left. Open the EVENTS tab at the bottom.
    1. For COMPONENT select btnGetAddress.
    2. For EVENT select Click event.
    3. For ACTION select Invoke service.
    4. For Datasource select get_address. Click Save.
  4. Save and test the Get Address button to confirm it functions properly. Be sure to click Get Geolocation before clicking the Get Address button.
F. SETUP Get Electeds BUTTON
Finally we will set up and verify the Get Electeds button.
  1. SERVICE - Click CREATE NEW on the left top and select Service.
    1. Enter GetElecteds for the name. Click the Create Service button.
    2. Under Settings, enter http://kohoike.org/api/ballot/ for the URL
    3. Under Request, Add a new parameter named houseno. Leave the Value blank.
    4. Also under Request, Add a new parameter named street. Leave the Value blank.
    5. Also under Request, Add a new parameter named zip. Leave the Value blank.
    6. Under Test, Enter a valid address and Click Test. Click Import as Response.
    7. Close the GetElecteds Service tab.
  2. DATASOURCE - Return to the start screen. Click the DATA tab on the left (under DESIGN). For Add datasource, Select Type Service. Select GetElecteds. Click Add.
    1. Name the datasource get_electeds.
    2. Open the new datasource and click on Before send: Mapping.
    3. Click Expand all on both sides.
    4. Drag the txtHouseNo Text field on the left to the houseno query field on the right.
    5. Drag the txtStreet Text field on the left to the street query field on the right.
    6. Drag the txtZip Text field on the left to the zip query field on the right.
    7. Click Save and return at the top
    8. With the datasource open, click on Success: Mapping.
    9. Click Expand all on both sides.
    10. Drag the congressionalRepDistrict field on the left to the itmCongressman Text field on the right.
    11. Drag the senateRepDistrict field on the left to the itmSenator Text field on the right.
    12. Drag the houseRepDistrict field on the left to the itmHouseRep Text field on the right.
    13. Drag the mayorDistrict field on the left to the itmMayor Text field on the right.
    14. Click Save and return at the top
  3. EVENT HANDLER - Return to the start screen. Click the DESIGN tab on the left. Open the EVENTS tab at the bottom.
    1. For COMPONENT select btnGetElecteds .
    2. For EVENT select Click event.
    3. For ACTION select Invoke service.
    4. For Datasource select electeds. Click Save.
  4. Save and test the Get Electeds button to confirm it functions properly. Be sure there is a Hawaii address entered in the Address text box inputs before clicking the Get Electeds button.
G. Make sure you set your application so I can see it by clicking down the TEST menu at the top. Post a link to your application on your website. Click for a video reminding you how to link your application to your website.


In Part 2 you will create the elected official profile screen that will display when one of the elected officials is tapped.

mobileapp.php