 Okay, so thanks for the great introduction. What I forgot to tell you was that this is going to be the best talk of TriCon So there's been a lot of speculation about phone gap and a lot of talk going on about what is phone gap and why we use it Or why we don't use it. There are the people who used it and who loved it There are people who have tried it a bit and want to know more about it And there are yet another class of people who have used it and they hate it so much that they're going and Phone books, phone gaps, this talk is meant to show you what exactly phone gap is and how you use it And then you can actually make a judgment of how you feel about phone gap after this So for all the people who hate phone gap, when Android came up All the Apple enthusiasts said that it's work-rap, it's us. And we all know what happened to Apple after that Don't we? Okay So what I'm just saying is as we heard in the morning, there's nothing white and then there's nothing black There's something great between now and it's good to know about that thing because it motivates innovation So why are we here? So we're basically here to see what phone gap is, what phone gap does and how we use phone gap So I'll try to keep the talking less and try to show you more things I'll basically start with explaining what is phone gap and show you a few demos I was going to show you a demo of some tools that you can use to develop cross-platform hybrid applications using phone gap and At the end you have to be convinced that phone gap works So there's only one agenda in my mind to convince you that phone gap works Okay, so to start with to give a little bit of background about the different kinds of mobile applications There are the usual web applications that have always been there, which are the desktop web applications I don't really have any mobile specific content in them But you can always access them using the mobile browsers, but they're not really guaranteed to work well with mobile So you might have a Facebook application Like if you launch Facebook from your mobile browser You have to go to the left to go to photos and then start to the right to go to the logout page So it doesn't really work that well mobile applications mobile devices So we have what is called a mobile application, which is more tailored to the UI of the mobile device and more Constrained to that small screen It does not also have any mobile specific capabilities as such But you can build these applications using some mobile specific widgets Which give them a better look and feel than the traditional web applications But they cannot access any device specific functionality and they are basically act as using that just the mobile browser So these are mobile browser based applications Coming to the native side of the applications are the old native mobile applications that all of you have been seeing We have native applications for Android, native applications for iPhone and of course They are the best in richness of mobile presentation and also the maintenance cost is really high Because you have to make sure that these applications work properly on each configuration of the mobile device And you have to support them through the lifetime That means that whenever a new version of a mobile platform comes out You'll have to make sure that you update your app to support that word On the same Spectrum it's low on portability because if you develop an application for Android you can't really use it on iPhone So in order to solve all these problems that come around with just web applications or just native applications People have started using what are we what we call as hybrid mobile application now So hybrid mobile application can combine the best of both worlds You can use you can code everything in web technologies in HTML5 in JavaScript And still be able to get native applications using that code Okay, so you can wrap your web application inside a native application and put it into the Insorted into a device and you can put it into the application store Okay, so this is one thing that is not possible with the traditional mobile applications And a lot of people have been trying around to build applications the mobile way the native way But then they flash their heads and come back and they think that you know none of the solution is really Serving their purpose. So then they start with the hybrid approach Okay, so it doesn't really mean that the hybrid approach is the holy grail, which Which just guarantees that all the future problems are going to be solved But it tries to solve at least the problems that come with the traditional web applications and the lack of Portability in the native mobile applications So it boils down to a few couple of points our native applications take too much time to take too much money and effort You have to know after specific stuff to do iPhone applications You have to do the you have to know the Android specific API to do the Android specific stuff On the other hand web applications do not have any access to native functionality So what if you want to access your contact from your web application? You only will do that What if you want to access access the camera or features like that? so if you build a phone book application a Facebook application and you want people to be able to take photos on the camera and upload upload it straight away to the Facebook photo Gallery, then you won't be able to use a web application because it won't give you access to the camera so going hybrid is the best solution in that sense in those kind of use cases and We want to see how hybrid Android applications are built using phone. Yeah Let's start an example So suppose you want to build a web-based movie ticket booking application In which you want to book a ticket and then you want to invite your friends to see the movie with you And you want to invite those friends from your contact book in your phone Okay, so if you just go with the traditional mobile application You won't be able to refer your contact book to get the To get the contacts and show it to the users so that you can select them and invite these friends So phone app shows the way it provides JavaScript APIs which have struck the platform set of services So there are essentially two problems that you want to address here How can you query the platforms contact book from within your application? And how can you do that in a platform agnostic way because you want to build this application Not just for Android or not just for iPhone you want to build this application and make sure that everybody can use it So you don't want to be really writing platform specific APIs in your application You just want to write it once and deploy it everywhere. Okay, so phone app provides JavaScript APIs It's a platform agnostic Solution and you can develop an app using HTML file, dojo, JavaScript once and package it for various platforms using phone app The thing to note here is that phone app does not give you any UI It's just a solution to wrap your application into a native application and gives you a bridge to access the native functionality But it does not give you any UI. So you can just use the HTML file UI toolkits, you can use a dojo, xmobile, you can use sencha, touch, titanium etc So I'll be talking about the dojo, mobile and sencha touch, but titanium we have right next to this talk So I think I'll skip that part There's also a new Facebook connect again in the new version of the phone app API So you can actually connect your application to Facebook using the single kind of mechanism using a phone app API So this is a very new thing Here's a list of supported features in phone app So you can see that Android and iOS For 3GS, the list is complete and every functionality is there in phone app I won't say that all these Things are exhaustive. They don't really cover the complete spectrum of what is available in a mobile phone But it's a modern technology. It's a very new technology. It's been there only since like about a year or so The version 1.0.2 just came out and I think as with time you'll find a lot more in phone gap than what you have right now There's also something called a phone gap build. Now this is something that that phone app was really build for you, you know So you have a bunch of JavaScript, CSS, HTML files and you want to package them for different types of platforms So phone gap gives you a utility. You upload your web application to phone gap and phone gap will package that Application for different platforms. So you can just push them into different app stores So this is a very new thing in phone gap and it's a charge service if you want to do it on a commercial scale But for a single application, you can still try it on phone gap.com So the next thing is what is dojo is mobile? So since we are using phone gap We need to know what all toolkits are relevant to develop mobile applications to develop the UI in the mobile application So that they can then package them and distribute them for pages that forms. So dojo is mobile is one such toolkit It it's a it it provides widgets for creating mobile applications And provides lightweight widgets So it's the subset of the dojo toolkit and it has only a few dependencies on dojo and widget And I think it has a subset of the dojo parser Which is sufficient to bootstrap the application so because it's lightweight you can actually deploy it on a mobile device and Make sure that the performance is not sluggish because a dojo library is very big So deploying it on mobile device will take a lot of memory and performance is very bad So it solves those problems It takes to provide lightweight UI widgets as I said And but cannot do any native device functionality. That is what's on the app interface It allows customization of the app looking fields. So it can be device-specific or device-neutral You can actually have you can actually use the dojo mobile widgets Which look very similar to the iPhone UI or the Android UI And it comes with the iOS, Android and library keys. It does not really support Windows, mobile or other phones right now So the next way of the other way of doing a UI on web would be Sencha Touch It is also an HTML5 mobile web app framework and You can again develop apps that you can feel native on Android, iPhone and Raspberry Again, it's not available for Windows, mobile But in this case it only supports touch-based device devices and In some cases, the Sencha Touch widgets are much more native looking than the dojo mobile widgets And there's also a Sencha app designer. So you can use drag-and-drop functionality to develop your UI So these are some examples of apps developed using Sencha framework Let me show you some examples of applications You can develop using our own app. So here's one application. It's called ITA Dominate It shows you a speed of all the friends who are playing games and what games they're playing and you can actually share your gaming activity with your friends So as you can see the UI is pretty good I don't have either an Android phone or an iPhone phone right now with me So I can't show you the real demonstration, but this is what screenshots look like. There's also another iPhone app Which helps you maintain a journey So again the UI looks very very close to the iPhone UI and again this application has been packaged into iPhone using phone gap Okay, so onto the demos So I'm going to show you how to develop a basic application using phone gap on Eclipse So all that you need on Eclipse is a phone gap plugin So here's a phone gap plugins command and you want to download the phone gap libraries That's all you need. Okay, so to start you can just click on the phone gap new project command And it will automatically let you use the built-in phone gap version 101 Which is the latest version of the start. You can also include Sencha touch libraries or jQuery mobile libraries jQuery is another HTML5 framework You can use phone gap example source as a template for your project. So let us do that So it has a project wizard which is very close to what the Android project wizard looks like You can select whatever APIs you want, whatever version of Android you want and you can even create a test product if you want So we'll just click finish and see how it looks like So this is what the basic application looks like the template and it's completely done using HTML and a style sheet So the HTML basically just takes a style sheet And It refers to the phone gap So the phone gap.js is the one where you have all the APIs that you will need to Call platform specific functionality. So it has like a get contacts API. It has a get camera API and stuff like that And you can see that There's simple HTML5 visits for rendering the UI So here we are not using dojo mobile not using Sencha touch just HTML5 The other thing to note would be that in the basic project in the manifest file You will have a whole lot of permissions set already So you need to be careful when you're deploying the application You need to remove the permissions that you don't want your application to have. Okay, so let's see how this application looks on the emulator Already have this installed This is how it looks. You click on the get phones contacts It returns you the phone's contacts. So currently in my phone's contact book there are four contacts and the third contact is set So the API has been modified to say to give you the third contact name Okay, then there are a bunch of other functionalities that you can see like check network So it gives me a server free connection and there are other kinds of services like location service and everything is exposed by JavaScript APIs So you just write a web application use those APIs and package it using phone. Yeah, and you're done So the next kind of use case which I find really interesting is the one in which you have a native application And inside the native application you want to have a couple of activities which are basically just web UI, web web widgets Okay, so one way of going That is that you create a web view inside a native activity and you do whatever you want to do inside that web view But then you don't have entire control over the platform specific stuff Okay, so in order to do that you can use phone gap again You can just create a native application as I'll show you the structure of the phone gap Project to help you understand how that is done So the product we created has a usual Structure of the Android project except for the assets folder over there So the assets folder is a place where it consists of all the web stuff It has the HTML it has the Phone gap just then there's also this folder which has a phone gap chart And there's a CSS here in the assets folder and in the source from the main activity All we are doing is they're extending droid gap instead of extending activity okay, right gap is taking from the phone gap chart and You're just loading a URL. You're not doing anything in that activity just loading a URL So right now, this is one activity in which you are loading that URL and just moving on to the web world But if you want to develop an application which has both native and web components You can have activities doing the native stuff and in one activity you can call the URL and move on to the web stuff So that is a kind of application Show You mean the UI So the UI widgets is completely different stuff from what phone gap does you can develop your UI widget in any way you want to You can just use HTML5 or the traditional UI widgets All you can use all these dojo mobile and censure widgets But then when you have that application ready, you have to push it to your mobile phone So how do you do that? You package that using phone gap So there are two things that phone gap does. Phone gap is packaging your web application into your native phone And the other thing is it is letting you call APIs to access platform-specific functionality in a platform-agnostic way You don't have to care writing your web application whether this application will be running on iPhone or on Android Just call the getContacts API and you are done with it I'll get it a very simple app It shows me four contacts Click on the contact, it gives me the details and phone number Then it has a button which says click here to send an email So what I want to really do is from this native application I want to move to a web-based application, a web-based email client Because my native application I don't want it to support an email I want to say I want to just move to Gmail Because that will prevent me the effort of creating a web client on my own So I will just click this button and move on to the web part of this application On the handle I have associated the activity which calls this URL So this is a completely web-based widget It is not a native widget in which a web view is put It is completely a web-based widget You can once again see how it lets you access the phone contact So once again the JavaScript was just getContacts And PhoneGap took care of querying Android for all the contacts Just to give you an idea of how this was done So it had the entry activity Which shows me the contacts and associates an all-item click handle with the button This all-item click handle gets me the contact details And launches, yeah here it is It launches another activity Which shows me the contacts And in this activity once again I had that button Which to which I have associated another activity Which is the main activity And from the main activity I just called the URL So the main activity is the only activity which is extending right here All the other activities were extending the normal activity So it is nothing but a native app But it has been extended to use an email functionality of the web using PhoneGap So this is a classic hybrid application So PhoneGap provides the API that JavaScript may be using Yeah I'll show you the PhoneGap not JavaScript Just a minute I got the JavaScript and this phone was The page that we had made for you made for this activity The page, the web page The page will work on the Blackberry phone itself as well Yeah so it also works by your desktop browser So what you do is to basically use any tool you want to create the URL You test it on your desktop web browser But only on Chrome or Safari because they are the webkit based browsers And it won't work well on Internet Explorer So once you've tested your web widget You can just push it into the assets folder And you can call that URL using your PhoneGap extended activity Same STL file and with the same set of CSS and PhoneGap JavaScript That same STL can work on Blackberry, iPhone and other browser supported applications Exactly What is the front end's flash? The front end is flash Change it So I have a web application Which has a front end flash And you are saying some phones don't support flash that way The PhoneGap supports it You have a PhoneGap suite that way So if I have a web application online Giving links has been put to the web Does it build the same set of things that it should have? It will just call the web page You will just give it the URL, right? It will just call the web page It doesn't care what the web page contains If it's a flash link, it will still call it And the phone has to support flash If the phone will not support flash, then the phone will be trash Yeah Yeah, that is it Because basically it's just an Android application Or an iPhone will just be an iPhone application It's just calling a web URL, that's it Just to say, I'll just complete and maybe then you can ask the questions Another thing I wanted to show you But I am not really able to show you is Maketa So Maketa is a visual offering tool Which helps you to author HTML5 and dojo mobile UI In a drag and drop fashion So as you can see, you have all the widgets there You can just drag and drop a widget into this form And you can edit all the properties So it not only lets you create a UI But also edit the theme You can change the phone, the color, everything in Maketa So this is a tool to help you build the UI And then once the UI is built, you can just export this whole project from here And put it in the assets folder in your phone app project So it's as simple as that As soon as you do that, you can just run that application and it will be able to run on Android So let me just show you a small demo of the video So this is how it looks like This shows Maketa integrated inside Eclipse And that happens with a rational application developer tool But you can download Maketa on the desktop and start using it So I've done the demos Now I've showed you Maketa So Maketa is just what you see is what you get A visual offering editor And you can easily modify the style sheet as well And you can test the app on the browser So this is one thing I can't show because Maketa is not working You can test the application on different phones on the browser itself So it has a scroll, it has an option select Whether you want to test this on Android or iPhone And then the browser itself will test the application So the whole idea is that your testing on the application has also become easy You don't have to deploy the application on the browser or the emulator and then test it Because the application, the web part of the application is independent of the platform And you can actually test it on the browser itself Another way to test the application is Ripple So it's an extension for Google Chrome And it's used for testing web components in mobile applications on the browser It's developed by TinyPost, which is a company recently bought by Ripple And it offers own-gap support So let's test the Sensha Touch app using Ripple So I have some Sensha Touch application examples here So this is a purely web application which is done using Sensha Touch widgets So it obviously works on Chrome like this But this is not how you want to see it on the phone You want to test it on the phone itself So what you'll do is there's a Ripple plug-in for Chrome Just click on that plug-in and select enable So the application has to be running on a web server Only then you can test it using Ripple You point your browser to the web address and then click enable Just test it on my phone So it's usually okay but in this resolution it's not rendering it properly So you can see basically the idea is that You can configure which device you want to look at Which device you want to test your web application in And you can also do some other controls like geolocation You can set your geolocation using Ripple So suppose you want to simulate an action where your geolocation changes And you want to see how your device reacts to that You can set the geolocation here And then you can just test the behavior of your application using that So another thing that recently came out is the IBM Mobile Technology Review It provides you sample code and documentation that demonstrate capabilities Such as notification and the ability to build hybrid applications And includes an application server, a notification framework And a lot of examples on hybrid app development using HTML, CSS, JavaScript and phone app So you can just download this, it's available for free And you can start playing around with the samples And deploy them on the server and test them using Ripple and do all the things So it's one good starting point if you want to build it Just search for IBM Mobile Technology Review There's a link at the end of this presentation as well If you search for IBM Mobile Technology Review you'll be able to go to the website So there's another tool, Rational Application Developer I've already showed you that it integrates with Maketa It also has drag and drop functionality So if you are already using this tool or if you want to use this tool you can It also gives you another browser based emulator Another tool is Rational Game Concert So if you are trying to construct your applications in the enterprise You want different things like source control management Team collaboration, work items, planning You can get it in one single tool So this is available for free for up to 10 developers So if you are in a small company or in a small team You can just start using it for your mobile development purposes It's all built on Eclipse so it supports Android out-of-the-box And I've shown you how PhoneGap also integrates with Eclipse So it will basically help you build PhoneGap applications if you want If you are a university student you can use it for free So you can there's an academic initiative called Jazz Hub How many of you are university students here? Oh a lot of you So you can start using the tool and you can start building PhoneGap in Android applications And you can just create a project on the cloud So it will help you collaborate with other colleges as well And you can use all the team and planning features of Rational Game Concert Along with the Android applications Okay, so the conclusion is that PhoneGap blocks Any doubts? Yeah I want to ask something That's the ultimate thing? Yeah, ultimate thing? Ultimately, PhoneGap is using WebView or WebRatting? PhoneGap is not really using anything PhoneGap is just a set of JavaScript APIs Nothing else So in your application you call a URL And in that URL you may have a JavaScript code Which would want to call something like a contact book in your code Okay, so JavaScript will have a single code to get contacts And that single JavaScript code will work on all platforms So this is the purpose of PhoneGap It does no rendering Can you open a particular application? Like suppose again I am getting people from my code Is it possible? From which code? Suppose you are using contact Because what the PhoneGap is doing is setting contact and display view Okay Now what about like gallery view? How will I interact with it? Yeah, once again it will have a different API for that So you just call that API and you can use PhoneGap to find out how to Call the platform specific stuff to return the photos to it Okay, thank you So in detail of this question In detail of this question The rendering of that Java REST table is handled by Android OS So the browser rendering is different than the rendering That rendering is just like if you are suppose you have a rescue inside a native application So the way it is rendered in the same way is also rendered There is no difference How we can use Dojo on Android? Dojo is not really an Android specific thing It's for every mobile platform So as I explained, you use Dojo by use Maketa You create a web application using Dojo widgets And then you just copy paste that code into the assets folder The HTML file So copy paste it explicitly Yeah, I mean you can do that on widgets as well Or you have to write the code So if you want that drag and drop in handy You use something like Maketa And then in your project you just insert that code In your assets folder And make sure that you have all the dependencies So in the case of Dojo There are some dependencies that you want to make sure your project will have So in the assets folder There's a lib folder which has the dojo and the dojox folders So you want to make sure that these are there in your project These are the dojo like really strong mobile delivery Yeah, because they won't be delivering Android phone So you have to explicitly shift them along with your application But since dojox is a very lightweight set of widgets It won't load your application as such If I'm using an Android SDK application I can't use the phone gap Come again? Yeah, I'm using Android SDK application In a thing? SDK Yeah No, why not? See, phone gap is nothing but a set of JavaScript API Whatever you are using in your application If it runs on Android There's nothing stopping it from using the phone gap JavaScript API Your code in your web-based application will have a call to the phone gap That's it How can it run on an iPhone? If I'm using a platform architecture and changes, I'm making it my new level See, in that case, the project has become very specific to Android Yeah, that's what I'm saying In that case, there is no chance So if there are some APIs which work only on some platform How do you know which APIs are available? Can you do a programmatic check? Even for phone gap, the APIs won't work So you just read the phone gap documentation The latest documentation when you download it And you will know what all APIs it has So like I showed you a table What are the functionalities that are written in the table Are all supported by web-based APIs Of course, to find out which APIs it has You can either read the documentation Or you can check out this phone gap JavaScript API So my question was, if something is available on one platform And not on another Is there a general flag which is not available? So the documentation will tell you What all is available on which one platforms? I think this point is that if you're making an application Can the application detect what it is running on So that it doesn't call those things Is that what you're trying to ask? Yeah So if it's a device which has an accelerometer Another way that does not have an accelerometer Yeah, it uses an accelerometer Can you do a device check Kind of a thing from your application And then you can do that yourself So if you want to know which platform you're running on Again, phone gap has an API called that So you call that API course And you determine which platform you're running on But it's up to you to decide That this platform does not support accelerometer So do not call the accelerometer there An application where I require some kind of checking Does phone gap help anywhere? Not anywhere Because there's a number of companies that are like No mobile Which gives you no sync Is there something that phone gap offers on that platform? Not yet It came as 5.5 Not yet So that is different What kind of storage is there? Not all the storage also There is the cache and framework and the local... But I have to write code to sync there I think you can take that offline So I'm not really afraid of that Okay fine And there are a lot of scrolling issues Like when you're using this phone gap Packaged application Scrolling does not work on iPhone properly Scrolling does not This is the list called scrolling properly In Android phones But how is that being resolved? As a library it is having some limitations So if you land on such a problem See what you're talking about There's mostly the UI stuff right? So phone gap as I said does not do UI It only makes sure that You can package your web application Indoor native application And you can call Platinum specific stuff from inside your JavaScript code So the UI problems arise because The UI toolkits right now are not that mature You have mobile, you have sensor touch They're all evolving technologies And the performance will definitely be Lower than the native performance So if you want really user critical kind of a UI Where the user has to Is expecting a really good responsiveness Then I would suggest you go to the native then But if you can compromise a bit On that responsiveness part Then I think it's the best way to go Any other questions? Okay so we'll end the session Thank you so much Ashma for coming over here I'll be right on the pause for the great talk