During this session you will learn the basics of mobile development using Phonegap. Phonegap allows you to reuse existing HTML and Javascript knowledge while enabling the use of Native APIs. See more here: http://www.phonegap.com
This session will teach you how to build your own plugin for Phonegap for either iOS or Android. To do this I will show you the Phonegap Plugin that was created for this project. The Plugin we developed simulates Geofencing by scanning WIFI hotspots.
The specific project is to create a Mobile Time Tracker. The tracker will be able to send notifications to remind you to check in and out of your projects as you arrive and depart.
Tools that will be used and explained
jQuery Mobile
Phonegap
persistencejs
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Mobile Development Using Phonegap
1. By : Dov Goldberg
Tikal
GTUG 2012
Using Phonegap
2. Who am I
1) My name is Dov Goldberg
2) I am the Mobile Development Lead at Tikal.
3) Currently creating the MyHeritage Mobile iOS app.
WWW.TIKALK.COM
3. Time Tracker App
1. Every month employees are required to submit hour reports
2. Time consuming.
3. Repetative.
4. Boring.
WWW.TIKALK.COM
9. What is Phonegap?
1)Build apps with HTML that can access native APIs.
2)Cross Platform.
3)Deploy to app stores.
4)Open Source.
5)Acquired by Adobe in 2011.
WWW.TIKALK.COM
14. Time Tracker App
1. Use your phone to help you track your hours.
2. Import hour reports directly from the phone.
3. Hour reports completed in seconds!
WWW.TIKALK.COM
15. Time Tracker App
1. Support for iOS4 and up, Android 2.3 and up.
2. Uses Foursquare Venues Platform as Location Layer.
3. Use GPS hardware to monitor hours worked.
WWW.TIKALK.COM
16. App Pages
1) My Projects
2) Project Details
3) Events
4) Add New Project
5) Map View
WWW.TIKALK.COM
24. Time Tracker App
1. UI/UX designed with jQuery Mobile.
2. Geofencing, included with iOS 4+, monitors region.
3. Geofencing not included in Android. Oh No!!!
WWW.TIKALK.COM
28. Geofencing In Android
Custom Phonegap Plugin
1. Use WIFI hotspots to trigger location updates.
2. Yes, WIFI must be on for this to work.
3. When a new project is add scan for hotspots in the area.
4. Location is scanned as recognized hotspots go in and out of
range.
WWW.TIKALK.COM
34. Questions???
Thank You!
All Source Available at:
https://github.com/tikalk/TikalTimeTracker
By: Dov Goldberg
Contact: 0524871521
dov@tikalk.com
WWW.TIKALK.COM
Editor's Notes
Hello, my name is Dov Goldberg. I work at Tikal as the Head of Mobile Development. As an employee of Tikal, I have a pretty busy schedule working on various projects for our clients. The projects are interesting and challenging. Currently, my main project is with a company called MyHeritage. They are a genealogy site and help people build and maintain online family trees. I am helping them build their iOS application.
Hello, my name is Dov Goldberg. I work at Tikal as the Head of Mobile Development. As an employee of Tikal, I have a pretty busy schedule working on various projects for our clients. The projects are interesting and challenging. Currently, my main project is with a company called MyHeritage. They are a genealogy site and help people build and maintain online family trees. I am helping them build their iOS application.
Perhaps one of the most tedious tasks I have to do monthly at Tikal is reporting the hours I work and on what project. I have to open a special web portal and sort through all the projects I worked on over the last month. This process is pretty repetitive and very boring. It would be great if there was a better way to do this task. Talk about the purpose of the app This app was made to allow users to let their mobile phone keep track of the hours they worked at their projects. Uses Geofencing Phonegap plugin developed by me to detect when a user arrives and leaves one of their projects Allows the user to export the app data so it can be imported into your companies time tracking web interface. What tech was used to develop
Perhaps one of the most tedious tasks I have to do monthly at Tikal is reporting the hours I work and on what project. I have to open a special web portal and sort through all the projects I worked on over the last month. This process is pretty repetitive and very boring. It would be great if there was a better way to do this task.
So, after thinking about this problem for some time I came up with what I think is an ideal solution. A solution that involves very little interaction from me.
I carry my Mobile Phone with me everywhere. I happen to have an iPhone 4. It is in my pocket at every project I work on. It has GPS technology which can be used to keep track of my location. So, why not let my phone keep track of where I am. Based on my location, my phone can log the hours I am at projects. Right, this seems so obvious now that I mention it.
Now I have a great idea for a new mobile app. I want to build an app that can log hours based on my location and report those hours to tikal upon request. The next thing I thought about was what mobile OS do I want to support. I have an iPhone, but I think that most Tikal employees have Android phones. So I would have to choose, iOS or Android? I want to be able to reach the greatest number of users.
I looked on the web and noticed that there are frameworks that claim to be "Cross Platform". A lot of them cost money to use like Monotouch and Titanium. I wanted something that was free and open source. I soon discovered Phonegap.
What is Phonegap? Phonegap is an open source app platform. It is based on familiar web technologies like HTML5, CSS, and Javascript. Additionally, it comes pre-packaged with "Plugins" that allow the Javascript to access native functions on the mobile device. PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript. Divide into chapters Introduction to my application (why phonegap) Add new project screen Back end – geofencing You can see how this works
Talk about the purpose of the app This app was made to allow users to let their mobile phone keep track of the hours they worked at their projects. Uses Geofencing Phonegap plugin developed by me to detect when a user arrives and leaves one of their projects Allows the user to export the app data so it can be imported into your companies time tracking web interface. What tech was used to develop
Talk about the purpose of the app This app was made to allow users to let their mobile phone keep track of the hours they worked at their projects. Uses Geofencing Phonegap plugin developed by me to detect when a user arrives and leaves one of their projects Allows the user to export the app data so it can be imported into your companies time tracking web interface. What tech was used to develop
Now that I know what framework I want to use I need to architect my app. I set out to plan how I was going to create this app. I would need a way to retrieve locations based on GPS. I thought about Foursquare. They have an open API that can be accessed by Javascript. The application would need to show the location on a map. Google Map API comes to the rescue and this, too, can be used via a javascript API. Once I determined that Phonegap was the ideal solution for my app I wanted to figure out what Javascript framework I would use. After searching on the internet I found that the top two frameworks are Sench Touch and jQuery. Sencha Touch seemed nice since it encourages MVC out of the box. After reading more about it I shied away from this solution since it coding it was tedious since it seemed all my code needed to be in JSON format. jQuery Mobile seemed like the most flexible solution. It has many plugins since it is based on jQuery and this allowed me to get up and running quickly.
1) My Projects - This is the main page of my app. Here the user can see a list of all active projects. Additionally, there are buttons for the user to add new projects and see events by month: (Picture of page) 2) Project Details - This page shows the current status of a project. The user can manually checkin or checkout and set the auto update feature. The user can also opt to remove this project altogether. 3) Events - This page allows the user to select a month and year and display the projects and hours worked. The send button will create a TSV file for each project and email them. 4) Add new project - This page retrieves nearby locations from foursquare and allows the user to add them as current projects. The user can also select to see the project on a map before adding. 5) Map View - Shows the project selected on a map. So now that we know what pages are too be included in the app lets figure out how to actually build it.
I started by defining the model for my project. The app will have an entity to represent a Project. I found an open source project called Persistence JS that wraps the functions needed to build a WebSQL database. PersistenceJS allows me to define a project as: My main view contains a list of projects. Therefore, I will need to use persistence to define a table in my database that stores Projects. persistence.schemaSync(function(tx) { // callback }); persistence will sync the defined entities and create new tables for them if needed
This line will configure a new database: persistence.store.websql.config(persistence, 'tikaltimetracker', 'Tikal Time Tracker DB', 5 * 1024 * 1024); My main view contains a list of projects. Therefore, I will need to use persistence to define a table in my database that stores Projects. persistence.schemaSync(function(tx) { // callback }); persistence will sync the defined entities and create new tables for them if needed
Now that I have my model lets build the page that will display the list of projects. This is how the projects page looks: This is all I needed to do in order to setup the first page. My page is built using jQuery Mobile. It has a div that designates the navigation bar. The next element is a ul tag to contain the list that will display the table view of projects.
Once we have the page that will list the projects we now need a way to add new projects. I thought it would be great idea to have the add new project involve as little input from the user as possible. This is how the Add Project page works: When the page is loaded it requests the devices GPS location using the GeoLocation Phonegap plugin. navigator.geolocation.getCurrentPosition(onSuccess, onError); This code calls the phone gap plugin and calls the onSuccess or onError callback function once it is completed. An error can happen if the user has declined Location services for the app. Because I want the user to have to do as little as possible to add a project I decided it would be great if I could show nearby locations. This way the user could just select his project. Foursquare provides a venues API that can be accessed without any type of authentification.
The user is now able to select a location to add as a current project. Additionally, I provide a map view to show the project on a map before the user confirms adding the project (Show Map Page) Now the user is back on the Current Projects page. So far all of our development has been done with simple HTML and Javascript using jQuery Mobile. I haven't had to build any native layouts for either Android or iPhone. My entire project is in one HTML file. I have of course included various javascript files to access jQuery Mobile and Foursquare, but development so far has been straight forward.
A geo-fence is a virtual perimeter for a real-world geographic area..
A geo-fence is a virtual perimeter for a real-world geographic area..
So now that we have our list of projects I want to program the app to automatically update my hours based on my location. How am I going to do this? Geofencing!!!
What is GeoFencing? A geo-fence is a virtual perimeter for a real-world geographic area. Wonderful. How does this help me in this case? Well, I can define GeoFences based on the latitude and longitude of my current projects. I would need a way for the device to be notified when I enter or leave one of my projects.
What is GeoFencing? A geo-fence is a virtual perimeter for a real-world geographic area. Wonderful. How does this help me in this case? Well, I can define GeoFences based on the latitude and longitude of my current projects. I would need a way for the device to be notified when I enter or leave one of my projects.
Well I know what I want to do, now the fun part is to see how I can actually program this on a mobile phone. I first checked out phonegap and didn't find any plugins for Geofencing. This would be a good opportunity to build a custom Phonegap plugin. iOS supports Geofencing natively. All I need is to define a unique id, latitude, longitude and radius. Once I register a Geofence the system will notify the app when the boundaries are crossed. If the app isn't running it will be launched in the background to process the geofence notification.
Android was another story. I didn't find any native support for Geofencing. Looking online yielded a number of sites offering subscription APIs. I wasn't going to spend money on this. I had an idea. I wanted to create my own method to mimic Geofencing. The simple choice would be to just have the GPS always on and monitoring my location. This would probably work for about two hours before eating up all the battery. I came up with another idea. Every project I go to has at least one WIFI hotspot. I could create a service that would scan for changes in WIFI hotspots. When it found one that was at one of my projects the service would trigger a request to retrieve the current location. This way only WIFI needed to be left on, instead of constant GPS monitoring, which is a lot less taxing on the battery from my experience.
Now that I knew how each device would handle Geofencing on the native side it was time to create a Phonegap plugin for each platform to wrap this native code. This way I could communicate with it from javascript. I came up with the following commands that I wanted the Javascript to be able to do:
Talk about the purpose of the app This app was made to allow users to let their mobile phone keep track of the hours they worked at their projects. Uses Geofencing Phonegap plugin developed by me to detect when a user arrives and leaves one of their projects Allows the user to export the app data so it can be imported into your companies time tracking web interface. What tech was used to develop
These functions are all part of the Phonegap plugin. The fun part was to create the native code that handled each one of them.
Talk about the purpose of the app This app was made to allow users to let their mobile phone keep track of the hours they worked at their projects. Uses Geofencing Phonegap plugin developed by me to detect when a user arrives and leaves one of their projects Allows the user to export the app data so it can be imported into your companies time tracking web interface. What tech was used to develop
These functions are all part of the Phonegap plugin. The fun part was to create the native code that handled each one of them. In order to add a project for monitoring from the Javascript in the HTML I just need to call:
