<< 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 at least the Creator.ionic.io Pro plan. If you have given a coupon for a one month discount for the Pro plan, you can watch this 40 second video on how to upgrade. If you would rather not upgrade you can use these instructions using Ionic Creator Free Version.

The full video for completing this assignment is here. If you start watching it and you still have trouble getting started, I made another smaller getting started video here.

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. Use the promo code given to you in Laulima and upgrade to the $ 9/month version.
2. Create a new project named "Hawaii Electeds." See video.
3. Change the page title to "Hawaii Electeds"
4. Add a BUTTON
Set Text to "Tap to Get Current Location"
Add Angular Directive "ng-click" = "getLatLng()". We will be adding a function named "getLatLng."
5. Add PARAGRAPH
Align Center
Content: **{{ data.lat }}, {{ data.lng }}**
6. Add CONTAINER
Tag set to "div"
Classes to "row" - This container will how a row of column containers.
7. Add three (3) CONTAINER components inside the row container.
Tags set to "div"
Set first container Classes to "col-25"
Set second container Classes to "col-50"
Set third container Classes to "col-25"
8. Inside each of the three container containers, add an INPUT text box container inside each one.
9. Click the first INPUT text box.
Blank the Title
Set Placeholder to "#"
Add Angular Directive "ng-model" = "data.houseno"
Add Angular Directive "style" = "padding: 0 0 0 0"
10. Click the second INPUT text box.
Blank the Title
Set Placeholder to "Street Name"
Add Angular Directive "ng-model" = "data.street"
Add Angular Directive "style" = "padding: 0 0 0 0"
11. Click the third INPUT text box.
Blank the Title
Set Placeholder to "Zip"
Add Angular Directive "ng-model" = "data.zip"
Add Angular Directive "style" = "padding: 0 0 0 0"
12. Add a BUTTON
Set Text to "Tap to Get Electeds From Address"
Add Angular Directive "ng-click" = "getFromAddress()"
13. Add the last BUTTON
Set Text to "Tap to Reload App"
Set the Link Type to "Link" by clicking the second Type button.
Enter the complete secure URL for your app. This is necessary for the geolocation service to work on your device.
For example, my final is uploaded at http://r4chardh.busa345.com/electeds/. The secure URL is https://secrdir.com/r4chardh.busa345.com/electeds/.
14. Add a CONTAINER LIST ITEM between the "Tap to Get Electeds from Address" button and the "Tap to Reload App" button.
Delete the Paragraph component.
15. Add a CONTAINER inside the CONTAINER LIST item component
Tag set to "div"
Classes to "row" - This container will contain a row of column containers.
16. Add two (2) CONTAINER components inside the row container.
Tags set to "div"
Set left container Classes to "col-34"
Set right container Classes to "col-66"
Add an Angular Directive to the right container "style" = "text-align: right; margin-left: 5px;"
17. Inside the left container component, add an IMAGE component.
Set Image Source to text input and enter "{{ data.house.Image }}"
Set Style to Make Full Width
Set Postition to align left
18. Inside the right container component, add an HTML component.
19.Replace the HTML with:
<b>{{ data.house.First }} {{ data.house.Last }}</b> ({{ data.house.Party }})
<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 }}
20. duplicate the list container you made in Step 14, 3 times.
21. 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.
22. In the second duplicate, replace all the instances of "house" with "congress" in both the Image Source and the HTML.
23. In the third duplicate, replace all the instances of "house" with "mayor" in both the Image Source and the HTML. Remove the party affiliation "({{ data.mayor.Party }})" from the HTML.
24. Click the Code tab in the bottom left corner. Click on the Hawaii Electeds page in the Pages section.
Replace the code with the following JavaScript.

25. In the Other JS code section, click the services.js page.
Copy the following two services just above the ".service('BlankService', [function(){" line.

NOTE: Replace "Fall2016" in the GetElectedsLatLng service with your Google API Key. It's free.
26. Confirm your app works by clicking the Preview icon at the top.

Exporting HTML5 Hawaii Electeds Mobile App to cPanel Website

27. To Export your application to your website, click on the Cloud icon with the down arrow to export your application to your computer as a ZIP file.
See video.
28. Log into your website cPanel. If you can't remember the URL find it here. (Click through the security warnings if you get them. You get the security warnings because you don't have a registered secure server certificate for your website. It is your website so you don't have to worry.)
29. Once logged into cPanel, in the FILES section, click on File Manager.
Double click on the Globe icon to enter the public_html directory. A directory named "cgi-bin" is probably at the top.
In the public_html directory, create a new folder by clicking the +Folder icon in the upper left.
Name the folder electeds.
30. Double-click into the electeds folder you just created.
Click the Upload icon at the top and upload your hawaiiElecteds.zip mobile app export ZIP file that you downloaded.
Once your file has uploaded, click to go back to your electeds folder listing.
Click the Reload icon if you don't see your uploaded ZIP file.
Click on the ZIP file then right click, and select Extract. Extract the files to electeds folder.
Click the Reload icon to see your files. Your app still may not be visible until you complete the next step.
31. If your app comes up blank, it is probably because the access permissions on the uploaded JavaScript files are not set properly.
To make sure all JavaScript libraries are accessible, you will create a PHP file named init.php inside your electeds folder.
In the cPanel File Manager, click the +File icon to create a new file. Name the file init.php.
Click on the PHP icon next to your new init.php file. Click the Code Editor icon at the top.
Copy and paste the following code into the Code Editor window.

32. After pasting the code into the Code Editor window, click Save Changes and Close.
This init.php program will also create an .htaccess "redirect" file. This is so when anyone goes to your /electeds/ folder not through the http://secrdir.com secure server, it will redirect through the secure server. The only reason we do this is so the geolocation services will work. Geolocation services on your browser won't work unless the browser is on a secure server.
33. Return to the course websites page and click on your Moble App Initialize link to execute the init.php file you created. It will redirect to the secure URL for your mobile app.
34. Finally, add a link to your exported mobile app on your WordPress menu.

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