Home

Setting up phonegap to use from the command line

Updated:
Created:
android, phonegap

How do I setup a phonegap development environment, and a phonegap project itself? Without using eclipse?

This is mostly an adaption of

http://agiliq.com/blog/2012/03/developing-android-applications-from-command-line/

and

http://docs.phonegap.com/en/2.3.0/guide_command-line_index.md.html#Command-Line%20Usage

The goal is to have a small and fast setup to quickly get some html deployed to android, wrapped using phonegap.

Have Sun Java JDK Installed

Make sure its the jdk, not only the jre.

Install Android SDK

Go to the skd page and grap the 'android_sdk file', unpack it and set the path accordingly

mkdir ~/phonedev
cd ~/phonedev
wget http://dl.google.com/android/android-sdk_r21.1-linux.tgz
tar xf android-sdk_r21.1-linux.tgz
export PATH=$PATH:~/phonedev/android-sdk-linux/tools:~/phonedev/android-sdk-linux/platform-tools

Now fire up the android sdk manager, and make sure that the latest components are installed

android sdk

Install Phonegap

download phonegap from phonegap.com, unpack and add the path

wget https://github.com/phonegap/phonegap/archive/2.4.0.zip
unzip 2.4.0.zip
export PATH=$PATH:~/phonedev/phonegap-2.4.0/lib/android/bin

Create signing keys

Using the keytool from the jdk, lets create a key that we can use for signing the apk later on. This assumes we have a projec

keytool -genkey -v -keystore my.java.keystore -alias jhb -keyalg RSA -keysize 2048 -validity 10000

Creating a phonegap project

Using the create command we can now create a new phonegap project. phonegaptest is the name of the directory, com.example.phonegaptest the internal name, and MyTestProject the name of your app. Change to your liking.

create /home/joerg/phonedev/phonegaptest com.example.phonegaptest MyTestProject
cd phonegaptest

Have a look around, and adapt things as needed. All your html code and images goes into assets/www. Everything but cordova-2.4.0.js can be deleted, and replaced by e.g. your own index.html. Just make sure that you include cordova-2.4.0.js in your html file(s).

If you want to have your own icon for your app, these icon files need to be created in different sizes, and go into the res/drawable-<...> directories:

xhdpi 96x96
hdpi  72x72
mdpi  48x48
ldpi  36x36

Also have a look at the AndroidManifest.xml - maybe you want to remove a permission or two?

There is also res/xml/config.xml. I changed a thing or two, the relevant section now looks like this:

<cordova>
 <!--
 access elements control the Android whitelist.
 Domains are assumed blocked unless set otherwise
 -->

 <access origin="http://127.0.0.1*"/> <!-- allow local pages -->
 <access origin=".*"/>

 <log level="DEBUG"/>
 <preference name="useBrowserHistory" value="true" />
 <preference name="exit-on-suspend" value="false" />
 <preference name="AllowInlineMediaPlayback" value="true" />
 <preference name="splash-screen-duration" value="0" />
<plugins>
 <plugin name="App" value="org.apache.cordova.App"/>
 <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
 <plugin name="Device" value="org.apache.cordova.Device"/>
 <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
 <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
 <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
 <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
 <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
 <plugin name="File" value="org.apache.cordova.FileUtils"/>
 <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
 <plugin name="Notification" value="org.apache.cordova.Notification"/>
 <plugin name="Storage" value="org.apache.cordova.Storage"/>
 <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
 <plugin name="Capture" value="org.apache.cordova.Capture"/>
 <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
 <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
 <plugin name="Echo" value="org.apache.cordova.Echo" />
 <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
 <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>

Creating the apk (for installation on the mobile phone)

Now, everytime you want to create a new apk, do the following (assuming you are in phonegaptest, or whatever the name of your project directory is):

./cordova/release
jarsigner -keystore ../my.java.keystore -digestalg SHA1 -sigalg MD5withRSA ./bin/MyTestProject-release-unsigned.apk jhb
jarsigner -verify bin/MyTestProject-release-unsigned.apk

The MyTestProject-release-unsigned.apk actually got signed in place. The apk file can be copied/renamed to whatever.apk you like. Install on your phone. Hurray.