I am writing this post as part of a course called Mobiilituotekehitys (Mobile development) held by Tero Karvinen http://terokarvinen.com/2012/aikataulu-mobiilituotekehitys-bus4tn008-2
I am using 64-bit Xubuntu 12.10 on a HP EliteBook 2560p Laptop.
On this post I will go through the following:
- Install Eclipe IDE
- Install android eclipse plugin & SDK
- Android HelloWorld
- Install PhoneGap
- PhoneGap/Cordova HelloWorld
I followed the instructions found at http://terokarvinen.com/2012/hello-phonegap-from-xubuntu-12-04-live-cd while writing this post.
Installing Eclipse & Android SDK
First of all I started by installing 32-bit libraries followed by the Eclipse IDE.
$ sudo apt-get update
$ sudo apt-get install ia32-libs eclipse
After the installation finished, I started Eclipse.
I clicked ‘Help’ -> ‘Install New Software…’
which opened the following window:
I inserted the address
https://dl-ssl.google.com/android/eclipse/ in the bar located in the top of the window and clicked ‘add’ and ok. I checked the ‘Developer tools’ and clicked the following as prompted: ‘next’, ‘next’, ‘I accept the terms of…’, ‘Finish’ ‘next’ and ‘Yes’.
After eclipse restarted I unchecked the ‘install latest version…’ and checked the ‘Install Android 2.2…’ and clicked ‘next’. I chose not to send usage statistics to google and clicked ‘Finish’. When asked to choose packages to install, I chose ‘Accept All’ and clicked ‘Install’.
After the installation was done, I opened a new android project:
‘File’ -> ‘New’ -> ‘Project’ -> search for ‘android’ -> ‘Android Application Project’
I named the Application “Hello Android” and clicked ‘next’, ‘next’, ‘next’, ‘next’, ‘Install/Upgrade’, ‘Accept All’, ‘Install’, ‘Finish’.
Once the installation was done, I navigated to ‘Project Explorer’ on the left and chose ‘Hello Android’ -> ‘src’ -> ‘com.example.hello.android’ -> ‘MainActivity.java’ -> ‘MainActivity’. Now that the java file was opened, I clicked ‘Run As…’ (A button with a white triangle inside a green circle… play?) -> ‘Android Application’ -> ‘OK’
I clicked yes to add a new virtual device, I chose ‘Launch new…’ -> ‘Manager’ -> ‘New’, I named it api8, target: “Android 2.2 – API Level 8” -> ‘Create AVD’ -> ‘Start…’ -> ‘Launch’. The virtual device loads awhile. After the device’s “desktop” was loaded, I minimized it and noticed that the MainActivity.java’s launch was canceled (propably because it took so long for the virtual device/emulator to load). So I relaunched it pressing the same ‘run’ button as before. This time the program launched inside of the emulator.
Setting up PhoneGap
I started by creating a new Android Application Project. Next I opened terminal and moved to the directory where I created the new project.
$ cd workspace/Hello\ Cordova/
I created a new folder called “www” under the folder “assets”.
$ mkdir assets/www/
I downloaded PhoneGap from github
I unzipped the file and deleted it afterwards
$ unzip 2.1.0
$ rm 2.1.0
I copied files from the unzipped folder to other folders according to instructions at Tero’s website
$ cp -i phonegap*/lib/android/cordova*.jar libs/
$ cp -i phonegap*/lib/android/cordova*.js assets/www/
$ cp -ri phonegap*/lib/android/xml/ res/
I accepted the overwrite on the last file (config.xml)
(-i = interactive: prompt before overwrite. -r = recursive)
After all of the needed files were copied I deleted the folder I had previously unzipped.
$ rm -r phonegap-phonegap*/
I returned to Eclipse and refreshed the ‘Project Explorer’ by hitting ‘f5’ after activating the window (by selecting a folder). I checked that “cordova-2.1.0.jar” had appeared under “Hello Cordova” -> ‘libs’. I pressed mouse2 over “cordova-2.1.0.jar” and chose ‘Build Path’ -> ‘Configure Build Path…’. I opened ‘Libraries’ and clicked ‘Add JARs…’ -> “Hello Cordova” -> ‘libs’ -> ‘cordova-2-1-0.jar’. I cliked ‘OK’ and ‘OK’ and opened “MainActivity.java” under “Hello Cordova” ‘src’ etc…
I edited four lines in the java file as shown on the picture below.
Next I opened AndroidManifest.xml in text editor -mode by right clicking the file under ‘res’ and copy pasted the lines found PhoneGap’s documentation http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android (starting with the line “<supports-screens…")
between the lines
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" />
<application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
I made the index.html file by right clicking the www -folder under assets -folder and chose 'new' -> 'file'. And opened it in the text editor -mode.
I copied the full example found at PhoneGap's documentation http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#device.name_full_example
I opened the MainActivity.java -file and ran it.
I had an error and I’m not sure when it happened: I had two cordova-2.1.0.js files. One under assets/www. The correct one and one under res. I deleted the one under res and and ran the program again and the program worked fine.