After I have gone through few rounds of setting up PhoneGap development machines, I decided to document all the compulsory and "working" steps here to help those who have got themselves lost in the journey too. The latest guide of Getting Started with Android (release of PhoneGap 2.7.0) doesn't seem to work in my case for whatever reason. Hence I fell back on the earlier version of guide (release of PhoneGap 2.1.0) which proved to be still working with the latest release 2.7.0 to date.
Step #1 - Download and install JDK
x86 or x64 depending on Windows system type
http://www.oracle.com/technetwork/java/javase/downloads/index.html
Step #2 - Download and install Android SDK
Option 1:
Download ADT (Android Developer Tools) bundle which includes all the components.http://developer.android.com/sdk/index.html
Extract ADT bundle and place its directory to the desired location.
e.g. C:\adt-bundle-windows-x86_64-20130514
How-to: http://developer.android.com/sdk/installing/bundle.html
Option 2:
Otherwise, install each of the components one by one.Android SDK
http://developer.android.com/sdk/index.html
Eclipse Classic
http://www.eclipse.org/downloads/
ADT Plugin (download it within Eclipse)
http://developer.android.com/sdk/installing/installing-adt.html
Step #3 - Download PhoneGap
Download the latest version or an earlier version.
http://phonegap.com/download/
http://cordova.apache.org/#download (alternative site)
Extract the PhoneGap ZIP package and copy the Android directory to the desired location.
e.g. C:\phonegap-2.7.0\android
Step #4 - Setup environment variables
Append to the PATH system variable:
- path to the Android SDK platform-tools directory (e.g. C:\adt-bundle-windows-x86_64-20130514\sdk\platform-tools)
- path to the Android SDK tools directory (e.g. C:\adt-bundle-windows-x86_64-20130514\sdk\tools)
Create JAVA_HOME system variable:
- path to the JDK home directory (e.g. C:\Program Files\Java\jdk1.7.0_21)
Append to the PATH system variable:
- path to the JDK bin folder (e.g. %JAVA_HOME%\bin)
Create ANT_HOME system variable:
- path to the ANT home directory (e.g. C:\adt-bundle-windows-x86_64-20130514\eclipse\plugins\org.apache.ant_1.8.3.v201301120609)
Append to the PATH system variable:
- path to the ANT bin directory (e.g. %ANT_HOME%\bin)
How-to: http://docs.phonegap.com/en/2.7.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Step #5 - Setup new PhoneGap project
Important: The newer versions of PhoneGap guide to use Android to setup new projects do not seem to work (PhoneGap version 2.2 and newer). Refer to the guide of PhoneGap version 2.1 which works: http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Guide from PhoneGap version 2.1 (working):
Launch Eclipse from C:\adt-bundle-windows-x86_64-20130514\eclipse\eclipse.exe. Select a workspace directory.
Create a new Android Application project within Eclipse (File -> New -> Android Application Project).
- Enter the information of the new application/project/package.
- Specify the SDK version to be used.
- Create a Blank Activity.
In the project folder, make sure the following directories are created:
- /libs
- /assets/www
Copy the following files from the PhoneGap Android directory (C:\phonegap-2.7.0\android) to the respective directories in the project:
- cordova-2.7.0.js to /assets/www
- cordova-2.7.0.jar to /libs
Copy the folder 'xml' from the PhoneGap Android directory to the directory '/res' in the project.
Right-click on the directory '/libs' in the project and select Build Path -> Configure Build Path... Under the category 'Java Build Path', choose the tab 'Libraries'. Click the button 'Add JARs...' and browse for the file 'cordova-2.7.0.jar' in the directory '/libs' of the project.
Edit the file MainActivity.java located in /src/[package_name] using the text editor (Right-click the file and choose Open With -> Text Editor). Add the following line after the existing imports: 'import org.apache.cordova.*;'. Modify the class MainActivity to extend from 'Activity' to 'DroidGap'. Replace the existing line 'setContentView(R.layout.activity_main);' with 'super.loadUrl("file:///android_asset/www/index.html");'. Last but most importantly, modify the method 'onCreate' scope from 'protected' to 'public' (this is missing from the PhoneGap guide).
Edit the file 'AndroidManifest.xml' located in the project root folder using the text editor. Add the following permissions between the <uses-sdk...> and <application...> tags (it is strongly advised to review the following permissions before submitting the application to Google Play):
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<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.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" />
If the application should support orientation changes (of mobile devices), add the following line: 'android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"' inside the <activity> tag. Make sure don't overwrite the existing lines within the <activity> tag.
Lastly, create a new file called 'index.html' in the directory '/assets/www' (Right-click the directory 'www' and choose New -> File). This will be the starting point of the application. An example index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Guide from PhoneGap version 2.2 and newer (not working):
Open Command Prompt window, navigate to the bin directory within the Android directory of the PhoneGap package- e.g. C:\phonegap-2.7.0\android\bin
Type in the following command and hit ENTER:
create <new project directory> <package name> <new project name>
- e.g. create ./test1 com.user.test1 Test1
After the command has completed execution, a new directory would have been created in the bin folder: test1
Launch Eclipse from C:\adt-bundle-windows-x86_64-20130514\eclipse\eclipse.exe. Select a workspace directory.
Create a new project within Eclipse (File -> New -> Project... -> Android -> Android Project from Existing Code). Browse for the project directory created above (test1). Optionally, you may copy the project into workspace.
Step #6 - Setup AVD (Android Virtual Device)
Tip: Use Intel-based emulator images for a faster experience.
Start Android SDK Manager from Elipcse toolbar. Install one or more Intel x86 Atom System Images. Also install the Intel Hardware Accelerated Execution Manager (under Extras). After download is complete, run the Intel installer downloaded within the Android SDK: extras/intel/Hardware_Accelerated_Execution_Manager
Start AVD Manager from Eclipse toolbar. Create new AVDs based on the Intel images.
Step #7 - Deploy to device
Download and install the USB driver for the device
http://developer.android.com/tools/extras/oem-usb.html
Make sure USB debugging is enabled on the device and plug it into the system.
Step #8 - Run PhoneGap project on AVD or device
Right-click the project and select: Run As -> Android Application
No comments:
Post a Comment