Once you’ve created a hybrid app using Evothings Studio, a natural next step is to publish your app on one of the public app stores. You can be traditional and build it yourself using the Cordova Command Line Interface (CLI) but why not utilise one of several companies offering build services. A good representative for these on-line services is Adobe’s Phonegap Build service. This tutorial explains the steps required to make your app available on Google Play, a similar workflow will also take the app to Apple’s iTunes and Windows Market.
For the purpose of this tutorial, we will be using something relatively simple; the Cordova Accelerometer example app which comes bundled with Evothings Studio. You can read the example tutorial here and download the related example code from Evothings examples Github repository. You can also use your own example app, while the steps required may vary slightly depending on the nature of your application. Let’s start building the example code into a standalone app using PhoneGap Build, and here we go:
Step 1: Create an Adobe ID to use PhoneGap Build
Sign up for an Adobe ID – for now you can choose free plan to sign up. After signing up, you will see a welcome screen with two tabs; one for open source apps and one for private apps. Under the “free” plan, you can build unlimited open source apps but they have to be pulled from a valid, publically available Github repository. You can alternatively build a private app, by uploading the JavaScript and HTML files to the build manager.
Step 2: Get the example source code
If your own app code is hosted at a public repository at Github, it can be pulled straight into the PhoneGap Build. In our case, the complete example code can easiest be found bundled in the examples’ catalog of Evothings Studio (we do have a public repo for all our bundled examples on Github, while you’ll find that these are source files and are processed further and resources are added each time Evothings Studio is built and shipped — you wouldn’t want use them as is).
So open Evothings Workbench on your PC, locate the example “Cordova Accelerometer” and click on related “Code” button, you will find the folder with the source code of this example.
Step 3: Identify your required plugins
If you are developing an IoT app, chances are that you may have used multiple plugins in order to access native device features such as camera or accelerometer.
While using PhoneGap Build, one has to specifically identify the required plugins via config.xml file even if they come as part of default Cordova package.
Since, our example app is using Cordova Device Motion and Cordova Vibration plugins, we will need to specify these plugins in config.xml file.
Step 4: Using config.xml for specifying the required plugins
Create a config.xml file inside the top level directory of example source code, paste the following code into the file. File encoding should be UTF-8 for it to work properly, set this condition in your text editor under “Encoding” or similar.
<?xml version='1.0' encoding='utf-8'?> <widget id="com.evothings.accelerometer-demo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> <name>Cordova Accelerometer</name> <description> Testing the on-board accelerometer </description> <author email="websmurf@evothings.com" href="http://evothings.com"> Webb S Murph </author> <content src="index.html" /> <gap:plugin name="cordova-plugin-device-motion" source="npm" /> <gap:plugin name="cordova-plugin-vibration" source="npm" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>
Notice the “gap:plugin name” element, that is where we are notifying the build process that it needs to include Cordova Device Motion and Cordova Vibration plugins while building the app.
You can also provide a version number of the plugin, if not provided, the build process will fetch the latest version of the plugin. If you want to know more about including plugins the build process, PhoneGap Build docs have all the required information.
You can also add other intents, depending on what URI schema you’re attempting to use:
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
You can make a far more elaborate configuration file, and the guys Adobe have put together a kitchen sink version for this purpose, with most of the required bells and whistles right here.
Step 5: Upload a zip file containing your Evothings app folder
Now zip the example app folder and upload it to the PhoneGap Build as a private app. After the upload is completed, you will be asked to enter the name of your app along with it’s description, on the same page you will also see options to Enable Debugging and Enable Hydration. You can read about these options in PhoneGap build docs, however, for now just leave them unchecked, supply the app name and description and click the “Ready to build” button.
On the next page, click on Android tab, you will be presented with the App details page. On this page you will immediately see iOS build throwing an error while with Android and Windows Phone build results you may see a spinning wheel, after some time the spinning wheel will go away and buttons to download xap for Windows Phone and apk for Android will appear instead. You can either click on these buttons or use the “install” button above to download your app from the PhoneGap build service. Your app build is now complete, you can use it for local distribution or for your own private use (don’t forget to allow apps from “unknown sources” on your Android phone). You can also click on the “Collaborators” tab to send the build to testers and other members of your team.
Step 6: Signing the app for app stores
The iOS build intrinsically failed because PhoneGap Build needs a signing key from Apple Developer Centre to compile an app. Similarly, the Android and Windows Phone apps are also not ready for upload as the required signing key for Android and required publisher key for the Windows Phone app store were not supplied before the build process.
Signing keys are necessary to protect the app from misuse and certify it has the correct origin, you can generate these keys by obtaining the membership of the respective app stores. For further information about generating signing keys, follow these links:
Once, you have obtained your publisher key for Windows Phone and signing keys for iOS and Android respectively, you can add them to your app in PhoneGap Build account, rebuild and download the signed app that you can now upload to respective app store.