mobile development using phonegap
DESCRIPTION
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 explainedjQuery MobilePhonegappersistencejsTRANSCRIPT
By : Dov Goldberg
Tikal
GTUG 2012
Using Phonegap
WWW.TIKALK.COM
Who am I
1)My name is Dov Goldberg2)I am the Mobile Development Lead at Tikal.3)Currently creating the MyHeritage Mobile iOS app.
WWW.TIKALK.COM
Time Tracker App1. Every month employees are required to submit hour reports2. Time consuming.3. Repetative.4. Boring.
WWW.TIKALK.COM
WWW.TIKALK.COM
WWW.TIKALK.COM
Tikal Time Tracker1)My Phone is always with me.2)My Phone knows where I am.3)My Phone can log my hours for me!!!
WWW.TIKALK.COM
OR
WWW.TIKALK.COM
Cross Platform?1)Support Many Platforms.2)Open Source.3)Free.4)Deploy to app stores..
WWW.TIKALK.COM
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
Why use Phonegap?
WWW.TIKALK.COM
How Phonegap Works
WWW.TIKALK.COM
WWW.TIKALK.COM
WWW.TIKALK.COM
Time Tracker App1. 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
Time Tracker App1. 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
App Pages
1) My Projects
2) Project Details
3) Events
4) Add New Project
5) Map View
var Project = persistence.define('Project', { fid: "TEXT", name: "TEXT", address: "TEXT", latitude: "TEXT", longitude: "TEXT", currentlyHere: "BOOL"});
WWW.TIKALK.COM
App Pages
persistence.store.websql.config(persistence, 'tikaltimetracker', 'Tikal Time Tracker DB', 5 * 1024 * 1024);
persistence.schemaSync(function(tx) { // callback });
<div data-add-back-btn="true" data-role="page" id="mainPage">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#eventsPage" data-icon="grid" data-iconpos="left" class="ui-btn-left" data-theme="c">Events</a>
<a onClick="retrieveLocations();" data-icon="plus" data-iconpos="right" class="ui-btn-right" data-theme="c">Add</a>
<span class="ui-title">My Projects</span>
</div> <ul class="lstMyProjects" data-role="listview" data-split-icon="gear" data-split-theme="d">
</ul>
<script id="projectItem" type="text/x-jquery-tmpl"> <li> <a onclick="showMapForLocation('${fid}');"> <h3>${name}</h3> <p>${address}</p> </a> <a onclick="doShowProjectOptions('${fid}');">${name}</a> </li> </script> </div>
search: function(parameters, requestCallback){
// var parameters = {// requestCallback, // ll, // llAcc, // altAcc, // alt, // query, // limit, // intent, // categoryId, // url, // providerId, // linkedId,// radius// }
var requestUrl = this.SEARCH_URL + client.requestQuery();requestUrl += FourSquareUtils.createQueryString("&", parameters);FourSquareUtils.doRequest(requestUrl, requestCallback);
}
Map View
WWW.TIKALK.COM
Time Tracker App1. 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
What is Geofencing?
WWW.TIKALK.COM
WWW.TIKALK.COM
WWW.TIKALK.COM
Geofencing In Android
Custom Phonegap Plugin1. 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
Phonegap Plugin JS
WWW.TIKALK.COM
Java
WWW.TIKALK.COM
Java
WWW.TIKALK.COM
Java
WWW.TIKALK.COM
Javascript
var params = {"fid": currentLocation.id, "projectname": currentLocation.name, "latitude": currentLocation.location.lat, "longitude": currentLocation.location.lng, "address": currentLocation.location.address};
DGPTimeTracker.addProject(params,function(result) {
}, function(error) { }
);
WWW.TIKALK.COM
Questions???
Thank You!All Source Available at:
https://github.com/tikalk/TikalTimeTracker
By: Dov Goldberg
Contact: 0524871521 [email protected]