Combining Sencha Touch with PhoneGap is a great option, as it allows access to a lot more device functionality that would otherwise be restricted whilst still allowing you full use of the features Sencha Touch offers. By default, Sencha Touch already has great support for PhoneGap as these two technologies are commonly used together. There are two ways to go about including PhoneGap in your application: there’s the ‘normal’ way and the ‘easy’ way, we will be focusing on the latter in this article by taking a look at how to use PhoneGap Build
UPDATE: The way in which you should include PhoneGap Build in your Sencha Touch projects has changed. This article still contains relevant information about PhoneGap Build but you should take a look at Building Your App Remotely with PhoneGap Build and Sencha Cmd for instructions on how to implement it.
What is PhoneGap?
PhoneGap is an open source platform that allows developers to create native mobile applications for multiple platforms from a single code base, using web technologies such as HTML5, CSS and JavaScript. It works in essentially the same way to how the Sencha Touch native packager works – at run-time the application is displayed to the user through a native web-view element which loads in the HTML5, CSS and JavaScript code. Essentially, we’re presenting the application as though it is running as a normal native application when it is technically still just running through a web browser.
Ok, so what is PhoneGap Build?
PhoneGap Build is a cloud based service offered by Adobe that takes away the hassle of creating and maintaining your own PhoneGap project. PhoneGap Build allows you to simply upload your web files and all of the compilation is completed on their end and then returned to you. There are benefits to using this method such as the fact that you don’t need to maintain multiple SDKs on your computer and being able to create an iOS PhoneGap application without a Mac. There are some trade-offs however, PhoneGap Build often lags behind with updates to PhoneGap and does not offer all of the functionality that PhoneGap does.
Let’s get started with PhoneGap Build
UPDATE: I’ve added a video tutorial on setting up PhoneGap Build, you can check it out here.
To get started with PhoneGap you can head over to https://build.phonegap.com/ and register your account. You will notice that there is both a free and a paid option; you are able to create one private application for free but you need to pay for more than that. If you want your application to be open to the public, then you are able to create more apps. This does not mean that you can only create one application ever for free, you can continue using the same account and simply delete an old application and replace it. If you want to have multiple projects running at once though then you’ll most likely have to part with some cash.
Once you’ve logged in and created an app on PhoneGap Build, you will see an option to upload your code and all of the platforms that it will be built for, these are:
- iOS
- Android
- Windows Phone
- Blackberry
- Symbian
- WebOS
By default, your application will be built for every platform but this can be changed in the config file if you wish.
Speaking of the config file…
Using PhoneGap Build is almost as easy as just uploading your code, but there’s a couple other steps you need to take first. In Sencha Touch you’ll have to open up your index.html file and add the following line:
<script type="text/javascript" src="phonegap.js"></script>
``` It's important that you **don't actually include a phonegap.js file in your
project**. This is often a cause of confusion, people will assume that they need
to download phonegap.js and include it in their application but this file is
added **automatically **when it is built. You will also require a config.xml
file that needs to be included in the root folder of your project. This file is
used to tell PhoneGap Build what to do. There's a lot we can define in here
including splash screens, plugins and what to build for but to start off with we
can use the basic example provided in the documentation: ```html
<?xml version="1.0" encoding="UTF-8" ?>
<widget
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
id="com.phonegap.example"
versionCode="10"
version="1.0.0"
>
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description> An example for phonegap build docs. </description>
<author href="https://build.phonegap.com" email="support@phonegap.com">
Hardeep Shoker
</author>
</widget>You should take a look at the documentation to get a better understanding of what can be defined in this file.You will also need to create the appropriate certificates, you can check out how to create an iOS provisioning profile and .p12 with Windows here. Once you’ve got these things in order, you should be able to upload your code by zipping up the entire project folder and have your army of native applications delivered right back to you.
Future posts will cover this topic in more detail, let me know in the comments if there is anything specific you’d like me to focus on!