Android App Development in HTML5 using Visual Studio 2012 Express for Web
I am a huge fan of Android platform, and I wanted to develop some Android Apps, but not in Eclipse. I learned that PhoneGap can be used to convert HTML5 applications into Android APKs, so I thought why not give it a try! And of course what could be a better HTML5 development IDE than Visual Studio Express 2012 for Web, which I love most! Its JavaScript code-complete and debugging facility are second to none!
During this whole exercise, I had to perform a set of manual operations, so I thought of converting it into a reusable project template. Every time I want to create a new Android App, I just wanna have to click on 'New Project" and then "AndroidApp" and it should just work! And here it is! . I am sharing this template with all of you so that you can also share the joy of coding Android apps in Visual Studio.
Prerequisites:
You will still need the Java SE SDK and Android SDK because that is what's used underneath. Moreover, you will need ANT SDK as well in order to build. (CTRL+SHIFT+B in Visual Studio still works! It just calls the ANT SDK which performs the magic behind the scene).
The following is the list of prerequisites:
Android SDK: http://developer.android.com/sdk/index.html
Java SDK: http://www.oracle.com/technetwork/java/javase/overview/index.html
Ant SDK: http://ant.apache.org/bindownload.cgi
VS2012 Express for Web : http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products#product-express-summary
(It can work with any version, but I am targeting Express edition as it is FREE and who doesn't love FREE?)
Download The Template:
This is the template I keep on talking about.
Download
**Steps To Install:
**
1. Install Java SDK
2. Install Android SDK
3. Install ANT
4. Set Environment Variables JAVA_HOME, ANDROID_SDK_HOME and ANT_HOME to the path of respective folder where these SDKs are installed.
5. Add the following to the environment variable named PATH
%JAVA_HOME%\bin;%ANDROID_SDK_HOME%\tools;%ANT_HOME%\bin;
6. Install Visual Studio 2012 Express for Web (or any edition as a matter of fact)
7. Extract the Bundle. It will have a readme file and a template file.
Copy the AndroidAppVSTemplate.zip to
My Documents\Visual Studio 2012\Templates\ProjectTemplates
8. Launch Visual Studio 2012 Express for Web and create a New Project. If you select 'Visual C#' from the tree, you will be able to see a new project type 'AndroidApp'.
*** IMPORTANT *** Don't use space in the name of the app or even in the whole path, otherwise the build will fail.
9. Go to assets/www/app.html to Start writing your android application fully in HTML5/jQuery Mobile/KnockOut.js
If you want to build your app, just press CTRL+SHIFT+B. In case there was an error due to some missing environment variables, the build will fail. You can see the detailed error log in 'Output' window. If the build succeeds, an APK will be generated in the bin folder.
The app.html contains some sample HTML5+jQueryMobile code. The end result would look similar to the screenshot below
Note:
You can test your apk in emulator by running util\run.bat. If it does not work somehow, you can still resort to old fashioned way of using ADB.exe from android platform-tools.
There are a couple other HTML/JS/CSS files from the cordova package which I kept as it is. I just changed their name to something more meaningful. You can delete them if you want to.
The main entry point of application is index.html, which can be changed by modifying res\xml\config.xml. The following entry needs to be changed.
<content src="index.html"/>
Please note that the template was created with Android SDK 12 as base. However, it is flexible and with just a little modification you can run in on any android version. The files you need to modify are
- AndroidManifest.xml - Change the SDK number from 12 to the number of SDK you are using.
<uses-sdk android:minSdkVersion="12" android:targetSdkVersion="12" /> - project.properties - Change the value of variable 'target' from 'android-12' to the number of SDK you are using.
Final Thoughts:
By the way, I am just a mediator, someone who thought of putting all pieces together in a single Visual Studio template. The real credit goes to folks who created wonderful frameworks such as PhoneGap, jQuery Mobile, knockout.js. The guys who thought of making HTML5 supercool also deserves their share of credit.
I hope you will like this template and be more motivated to create android apps, especially if you are not familiar with java or you are a Visual Studio lover like me. If you do like this, then don’t forget to drop a comment!
We are working in HTML5 and Love to use Visual Studio 2012 Express for Web its complete to develop any HTML and HTML web.