Development app – Phonegap and Eclipse

What is it Phonegap? It is an HTML5 app platform.

How is it work? Phonegap will wrap our html5&css3 code with javascript

Here is a link how to set up and create your workspace :    http://phonegap.com/start#android

After installing all necessary software (eclipse & SDK) we can create a new android project. It is necessary to make those basic changes

  • create new folder www in assetes
  • create new folder libs
  • copy website into created www folder
  • copy downloaded phonegap.js file to www folder
  • copy downloaded phonegap.jar file to libs folder and configure path
  • copy phonegap xml folder to res folder
  • edit default java file to: (bold text need to be changed according to your project name and settings)

package drinking.games.rules;

import android.os.Bundle;
import org.apache.cordova.*;

public class DrinkingGamesRulesActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl(“file:///android_asset/www/index.html”);
super.setBooleanProperty(“keepRunning”, false);
}
}

  • edit default manifest.xml to: (bold text need to be changed according to your project name and settings)

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=“games.rules”
android:versionCode=”1″
android:versionName=”1.0″ >
<supports-screens
android:largeScreens=”true”
android:normalScreens=”true”
android:smallScreens=”true”
android:resizeable=”false”
android:anyDensity=”true”
/>
<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.RECEIVE_SMS” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.RECORD_VIDEO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
<uses-permission android:name=”android.permission.READ_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.GET_ACCOUNTS” />
<uses-permission android:name=”android.permission.BROADCAST_STICKY” />

<uses-feature android:name=”android.hardware.camera” />
<uses-feature android:name=”android.hardware.camera.autofocus” />

<application android:label=”@string/app_name” >
android:debuggable=”true”>
<activity android:name=“.Top10DrinkingCardGamesActivity”
android:label=”@string/app_name” android:configChanges=”orientation|keyboardHidden”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”com.phonegap.DroidGap” android:label=”@string/app_name”
android:configChanges=”orientation|keyboardHidden”>
<intent-filter>
</intent-filter>
</activity>
</application>

<uses-sdk android:minSdkVersion=“8” />
</manifest>

After creating a new project and copying my website into www folder, we can launch our app to see how it looks like on our virtual device and on phone in realtime.

Result is so different. Virdual device is very slow, transition between pages takes up to 5 seconds, pages are flickering, and also layout of few elements is completly different from actual phone screen. Here is a screen shot to give you an idea how it looks like:

For this reason its very important to test your application on real device. There are 2 ways of doing it.

One of them is to connect your phone to your computer/mac and launch your app straight into phone instead of virtual device. fast and favorite way 🙂

Second way is simply email your app to your account which is set on the phone. (You need to allowed an application to be stored from non market source within phone settings otherwise you will not be able to install an application.) It is a longer approach, but this way I have all my development process/steps on my email account and can download them at any time. Is great for backup each time I make some changes. Here are some examples:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: