<< Back

Instructions for Completing Hawaii Electeds Mobile App Project

In this project you are going to create a mobile app like this that reads your geolocation and displays state representatives at that particular location.

This exercise requires you to sign up for the Creator.ionic.io free plan. You do not need to upgrade. If you have upgraded, you can use these instructions using Ionic Creator Pro.

Your mobile app will use an API I wrote that takes the geolocation or address and returns a JavaScript Object Notation (JSON) formatted array of information on the state representatives for that particular location.

For example, if we were at coordinates (21.3556176,-158.0570149), then using our API

https://secrdir.com/api/electeds/?key=Fall2016&lat=21.3556176&lng=-158.0570149

gives us the elected officials at that location.

Another example, if we were interested in the elected officials representing 78-6831 Alii Dr 96740 in Kona (Map), we would request

https://secrdir.com/api/electeds/?houseno=78-6831&street=Alii&zip=96740.

With the Creator.Ionic.io development platform, follow the instructions to create a mobile app that uses this API.
1. Sign up for Creator.Ionic.io.
2. Create a new project named "Hawaii Electeds"
3. Change the page Title to "Hawaii Electeds"
4. Drag over a BUTTON
Set Text to "Tap to Get Current Location"
5. Drag over a PARAGRAPH
Click Align Center
Enter Content: "**{{ data.latitude }}, {{ data.longitude }}**"
6. Drag over a CONTAINER
For Style Tag, enter "row"
7. Add three (3) CONTAINER components inside the row container.
For each of the three containers, set the Style Tag to "div" and Classes to "col-25"
Then change the second container Classes to "col-50"
8. Inside each of the three containers you just added, drag in an INPUT text box.
9. Click the first INPUT text box.
Blank the Title
Set Placeholder to "#"
10. Click the second INPUT text box.
Blank the Title
Set Placeholder to "Street Name"
11. Click the third INPUT text box.
Blank the Title
Set Placeholder to "Zip"
12. Add a BUTTON
Set Text to "Tap to Get Electeds From Address"
13. Add a CONTAINER LIST ITEM below the "Tap to Get Electeds from Address" button.
Delete the Paragraph component.
14. Add a CONTAINER inside the CONTAINER LIST item component
Set Style to "div"
Classes to "row" - This container will contain a row of column containers.
15. Add two (2) CONTAINER components inside the row container.
For each of the two containers, set the Style Tag to "div" and Classes to "col-34"
Then change the second container Classes to "col-66"
16. Inside the left container component, drag in an IMAGE component.
Set Image Source to text input and enter "{{ data.house.Image }}"
Set the Style Make Full Width checkbox
Set Position to align left
17. Inside the right container component, add an HTML component.
18.Replace the HTML with:
<div style="text-align:right;">
<b>{{ data.house.First }} {{ data.house.Last }}</b><br>
{{ data.house.Title }}<br>
{{ data.house.LongDistrict }}<br>
{{ data.house.Area }}<br>
<br>
{{ data.house.Phone }}<br>
{{ data.house.Room }}<br>
{{ data.house.Room2 }}
</div>
19. duplicate the list container you made in Step 13, 3 times.
20. In the first duplicate, replace all the instances of "house" with "senate" in both the Image Source and the HTML.
A simple text editor program like Notepad on Windows or TextEdit on the Mac can be helpful for this step and the next two steps.
21. In the second duplicate, replace all the instances of "house" with "congress" in both the Image Source and the HTML.
22. In the third duplicate, replace all the instances of "house" with "mayor" in both the Image Source and the HTML.

Exporting HTML5 Hawaii Electeds Mobile App to your Desktop

23. To Export your application to your desktop, click on the Cloud icon with the down arrow to export your application to your computer as a ZIP file.
Locate your downloaded ZIP file and drag it to your Desktop and Unzip it (by double-clicking on a Mac or right-click Extract All on Windows). Open the folder. There should be an index.html file, and a templates, lib, js and img folder.
To finish coding your application, you will edit three files. (1) services.js file in the js folder, (2) the controllers.js file in the js folder, and the (3) the hawaiiElecteds.html file in the templates folder.
24. Connect API Services: Locate and open the js folder. Open services.js using a text editor (e.g., TextEdit on a Mac or NotePad on Windows).
The first line of services.js should be: angular.module('app.services', [])
Just after the first line, insert the following 26 lines of code:
.service('GetElectedsLatLng', function() {
	return {
		getPost: function(lat, lng) {

			var key = "Fall2016";	// replace Fall2016 with your free Google Maps API Key

			var url="https://secrdir.com/api/electeds/?key="+key+"&lat="+lat+"&lng="+lng;
			return .get(url)
			.then(function (response) {
				return response.data;
			});
		}
	};
})

.service('GetElectedsAddress', function() {
	return {
		getPost: function(houseno, street, zip) {
			var url="https://secrdir.com/api/electeds/?houseno="+houseno+"&street="+street+"&zip="+zip;
			return .get(url)
			.then(function (response) {
				return response.data;
			});
		}
	};
})

Save services.js.
The first .service('GetElectedsLatLng' function requests the elected officials information from the API using the latitude and longitude parameters.
The second .service('GetElectedsAddress' function requests the elected officials information from the API using the house number, street and zipcode address.
25. Add Page Controller JavaScript: Locate and open the js folder. Open controllers.js using a text editor.
The first line of services.js should be: angular.module('app.controllers', [])
Replace all the code below the first line with the following 58 lines of code:
.controller('hawaiiElectedsCtrl', ['$scope', '$stateParams', 'GetElectedsLatLng', 'GetElectedsAddress', 

function ($scope, $stateParams, GetElectedsLatLng, GetElectedsAddress) {
    
	$scope.data = { };

	$scope.getLatLng=function()
	{
		navigator.geolocation.getCurrentPosition(savePosition);
		setTimeout(getPositionAgain,1000);
	};

	function savePosition(location)
	{
		$scope.data.latitude = location.coords.latitude.toFixed(6);
		$scope.data.longitude = location.coords.longitude.toFixed(6);
	}

	function getPositionAgain()
	{
		navigator.geolocation.getCurrentPosition(savePosition);
		$scope.getBallotLatLng();
	}

	$scope.getLatLng();

	$scope.getBallotLatLng=function()
	{
		GetElectedsLatLng.getPost($scope.data.latitude,$scope.data.longitude)
		.then(function(response) {
			$scope.post = response;
			$scope.data.houseno = $scope.post.houseno;
			$scope.data.street = $scope.post.street;
			$scope.data.zip = $scope.post.zip;
			$scope.data.mayor = $scope.post.mayor;
			$scope.data.house = $scope.post.house;
			$scope.data.senate = $scope.post.senate;
			$scope.data.congress = $scope.post.congress;
		});
	}

	$scope.getBallotAddress=function()
	{
		GetElectedsAddress.getPost($scope.data.houseno,$scope.data.street,$scope.data.zip)
		.then(function(response) {
			$scope.post = response;
			$scope.data.houseno = $scope.post.houseno;
			$scope.data.street = $scope.post.street;
			$scope.data.zip = $scope.post.zip;
			$scope.data.mayor = $scope.post.mayor;
			$scope.data.house = $scope.post.house;
			$scope.data.senate = $scope.post.senate;
			$scope.data.congress = $scope.post.congress;
			$scope.data.latitude = '';
			$scope.data.longitude = '';
		});
	}
}])

Save controllers.js.
26. Locate and open the templates folder. Your application only has one page so there should only be one page in the folder. Open the file using the text editor.
27. Confirm your app works by clicking the Preview icon at the top.

Richard Halverson, Jr., Ph.D. • University of Hawaii


SECRDIR.COM HOME | IONIC PRO | IONIC FREE