Friday, 26 December 2014

Hybrid App Development - Android Application Development using PhoneGap

If you are very new to PhoneGap application development, this post can help you to kick off android application development using PhoneGap framework. In this post, I will walk you through the steps that I performed to setup the environment to develop PhoneGap based android application on Windows machine. I am using Android Studio as IDE to develop, test and run the android applications.

If you would like to see the steps in video, you can refer my video attached below:


Below are my other posts related to Android Application Development:
About PhoneGap:

PhoneGap is mobile development framework. It facilitates developers to build mobile application using JavaScript, HTML5 and CSS3. This framework is owned by Adobe and open sourced as Apache Foundation Project named ‘Apache Cordova’. Mobile applications which are developed using PhoneGap called Hybrid Apps. These applications are not fully native in nature. These apps use native web view type elements to display application resources. Hybrid Apps can be run inside a device native container where devices browser engine is used to render HTML and process Java Scripts. The major benefit of this framework is, same HTML5 code base can be used by projects developed for different OS like iOS, Android etc. You just need to do minor platform specific changes in these files to run on different OS based devices.

That's enough about PhoneGap, there is plethora of options on net that you can refer to get more detail on PhoneGap framework, it's history, it's pros/cons etc. Let's start with steps to develop first hybrid application.

Prerequisites
I assume you already have android application development environment setup (JDK, Android SDK, Android Studio). don't you? If you don't, please refer this link (at least step-1, 2 and 3.B) to setup Android SDK and then install Android Studio using this link. Also, install Apache Ant by following this link.

Before going ahead, ensure that you have setup below environment variables:
  • Defined JAVA_HOME and added '%JAVA_HOME%\bin' to PATH
  • Added path to your Android SDK platform-tools and tools directory in PATH variable, i.e. <SDK_DIR>\platform-tools;<SDK_DIR>\tools
  • Defined ANT_HOME and added '%ANT_HOME%\bin' to PATH
Installing and Setting up PhoneGap Framework

1. Download PhoneGap from here and extract. At this point of time, I downloaded PhoneGap-2.9.1.
2. Now you need to generate cordova.jar. In a terminal window, navigate to '<PhoneGap-
    2.9.1>\lib\android\framework' directory and run below comman:

   <PhoneGap-2.9.1>\lib\android\framework>android update project -p . -t android-21


   And then run below command:

   <PhoneGap-2.9.1>\lib\android\framework> ant jar
   This command will generate the cordova-2.9.1.jar file under directory <PhoneGap-
   2.9.1>\lib\android\framework\cordova-2.9.1.jar
   
Creating PhoneGap Project

1. To create the PhoneGap project, In a terminal window, navigate to '<PhoneGap-
    2.9.1>\lib\android\bin' directory and run below command to create the project:

   create <project_folder_path> <package_name> <project_name>


2. Now you need to import project into Android Studio. Open Android Studio and select the option 'Import non-Android Studio Project' to import your created project. 


3. Once your project is imported successfully, open the index.html file and add any html element inside body tag say any header tag to display your text. 

4. Its time to run the project. Ensure that you have setup AVD (Android Virtual Device) to run the project. If you didn't, you can refer my other post to setup AVD. 

Now click the run button shown in below image and wait till your AVD is launched. Once AVD is launched, unlock the screen and see your running application with the text that you have added in index.html.


I hope this post helped you out creating your first PhoneGap based android application. Please provide your feedback to improve this post further.

!! Happy Android Application Development !!

102 comments:

  1. Thanks for this post. Your post could guide me developing app using PhoneGap. Nice work....looking forward for more.

    ReplyDelete
  2. Lovely read, thank you very much. Extremely helpful. I am following the PhoneGap BUILD route, mostly because I need to optimize time and resources and I can’t handle double-coding on Win and OSX. It works fine, although it’s not always THAT easy to make stuff working 100% on both Android and iOS, specifically if you want to go deeper than coding simple pages.

    ReplyDelete
    Replies
    1. Thanks for your comments. I agree that it is not easy to create same app for different platform. But, it reduces cost of resources and efforts.

      Delete
  3. Thanks for sharing the post with useful screens and links of developing app using PhoneGap.
    Good work!

    ReplyDelete
  4. I agree with your post. Android software development kit makes the application development process lot simpler and effective. You can create best performing android application with ease. Android Training Institutes in Chennai | Android Training in Chennai

    ReplyDelete
    Replies
    1. Thank you very much for reading this post and your valuable response.

      Delete
  5. Congrats for massive reach of your application across different platform. Keep on continuing your good work.
    Regards
    Kovalan iOS Training in Chennai

    ReplyDelete
    Replies
    1. Good to see that this post is being read. Wait for next series of post on different tech stack.

      Delete
  6. Good Work. Screen shots with pin pointing arrows very helpful to understand. i think you experimented it well

    ReplyDelete
    Replies
    1. Thanks so much for your comment. Yeah, I developed the application and used in mobile.

      Delete
  7. Hi this is John, I am working in a android app development company. I have read your post its impressive. I have some questions to ask... So do you have some time for discussion???

    ReplyDelete
    Replies
    1. Hey John..Thanks so much for your comment. Sure, we can discuss.

      Delete
  8. Hello, I am a director in an event management app company. Your post is Great!!!

    ReplyDelete
    Replies
    1. Thanks Mark. It's great to see that my post is being read.

      Delete
  9. Hi, Thanks for sharing this valuable blog.I was really impressed by reading this blog. I did HTML5 Training at reputed HTML5 Training Institutes in Chennai. This is really useful for me to make a bright future in designing field.

    ReplyDelete
    Replies
    1. Your welcome Victoria. I feel great that my post helped you out. Hope, you will get more post. :) Enjoy Mobile App Development.

      Delete
  10. This is a superb post... Highly informative....
    smartphone apps developer

    ReplyDelete
  11. Android is growing at very fast speed and Android Developers who are developing Mobile Apps in San Diego are developing most usable mobile apps for the business owners.

    ReplyDelete
    Replies
    1. Thanks for reading this post. I also visited your site. Great to see that you guys are working on mobile development which is hot demand of market today.

      Delete
  12. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing Mobile Apps Development India |Mobile Application Development Companies India

    ReplyDelete
  13. Nice blog. Android mobile are more capable to support every app especially html5 design. If you looking for any mobile application development tools, please visit us. we will guide.best of luck. looking for many more interesting articles from you.

    ReplyDelete
    Replies
    1. Sure, I am getting into the mobile development, I will keep on posting more interesting posts.

      Delete
  14. I agree with your post. Android software development kit makes the application development process lot simpler and effective. You can create best performing android application...........

    Android Apps Developer

    ReplyDelete
  15. Thanks for sharing information about PhoneGap and learn android programming through PhoneGap and make the application simpler and effective way. This article is really amazing and interesting case of provide a way to develop applications with Phone-Gap.

    ReplyDelete
    Replies
    1. Thanks for reading this and providing nice feedback. It always encourages me to write and share more posts.

      Delete
  16. Excellent post!!! Training on android technology helps professionals to establish a career in android mobile application development.

    ReplyDelete
  17. Excellent post. Android is an open source operating system used for tablet computers and smartphones. If your are interested to develop creative mobile applications then you must learn about android OS. Its helpful for you.

    Regards..
    Android Training in Chennai




    ReplyDelete
  18. Hi, this blog is really amazing and provide me answers to all my questions .This is really informative and I will for sure refer my friends the same.Web Designing Company | Web Designing Companies Bangalore

    ReplyDelete
    Replies
    1. I am glad to read that you get help from this post.

      Delete
  19. Replies
    1. Hello Deepa, do you have any questions regarding this post?

      Delete
  20. your blogs is awesome.
    Caller Tune
    With Videocon Caller Tunes, you can play your favorite song for all your callers instead of the boring Tring Tring! Choose from Bollywood to International hits, wacky sounds to pure instrumental and MORE. To activate Call 543211 @Rs3/min or SMS CT ACT to 121 (Toll Free) or dial *501# (toll free browsing). Rs. 15 per Tone Download. To deactivate the service SMS CT DCT to 543211 (Toll Free).

    ReplyDelete
  21. Thanks for your informative article on ios mobile application development. Your article helped me to explore the future of mobile apps developers. Having sound knowledge on mobile application development will help you to float in mobile application development. iOS Training in Chennai

    ReplyDelete
    Replies
    1. Your welcome...I feel great that my blog helped you.

      Delete
  22. Thanks for sharing such a nice blog on Android Apps Development. keep posting :)

    ReplyDelete
    Replies
    1. Thanks David...I am looking forward to add more posts on Android Apps.

      Delete
  23. Excellent blog. Its very useful and interesting blog. It would be great if u provide more details about it.
    Android Training in Chennai

    ReplyDelete
  24. Nice Blog....Thanks for sharing this blog.We got an innovative info.These are the latest HTML5 apps. The biggest advantage of developing hybrid app is consistent, cross platform UI that is compatible with most devices. This is less expensive app development method but cannot be used for every type of app.web designer omaha

    ReplyDelete
    Replies
    1. Thanks, I agree it is less expensive app development method.

      Delete
  25. Your article is very informative and well written....
    That aside...i followed the steps and made an app and imported it to studio. But when I run index.html it gives me error.

    3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:49.928 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 6, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:49.987 3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:49.987 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 9, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:50.038 3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:50.038 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 11, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:50.088 3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:50.088 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 13, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:50.128 3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:50.128 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 15, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:50.168 3880-3880/com.jojo.a.hybrid E/GLUtils﹕ GL ERROR - after At the end of blitTileFromQueue()() glError (0x501)
    08-07 11:06:50.168 3880-3880/com.jojo.a.hybrid E/TransferQueue﹕ blitTileFromQueue ERROR: fboId 1, destTexId 17, srcTexId 3, textureWidth 256, textureHeight 256
    08-07 11:06:51.338 3880-3880/com.jojo.a.hybrid D/CordovaActivity﹕ onMessage(spinner,stop)

    ^This is the error i get. Pls get back to me if u find a solution. :D

    ReplyDelete
    Replies
    1. Can you please provide more detail regarding this? I mean what version you are using and all.

      Delete
  26. Really useful post about android app development. Thanks for sharing it in public. Look forward to read more.

    ReplyDelete
    Replies
    1. Thanks Megron, It's great that this post helped you.

      Delete
    2. This comment has been removed by the author.

      Delete
  27. Thanks for this post. Your post could guide me developing app using PhoneGap. Nice work.
    Mobile Application Development Company Lucknow

    ReplyDelete
  28. Nice posting, thanks for sharing with us. Your blog is great and helped me feel better knowing about thehybrid App development Thanks again!

    ReplyDelete
    Replies
    1. Good to see that this post helped you in learning.

      Delete
  29. Java India is an India based emerging company provides complete Java web solutions. We offer Java website development, Java application development and lot more services across the globe.

    ReplyDelete
  30. There are lots of information about latest technology and how to get trained in them, like Best Hadoop Training In Chennai have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies Hadoop Training in Chennai By the way you are running a great blog. Thanks for sharing this blogs..

    ReplyDelete
  31. I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing..
    SalesForce Training in Chennai

    ReplyDelete
  32. Pretty article! I found some useful information in your blog, it was awesome to read,thanks for sharing this great content to my vision, keep sharing..
    Unix Training In Chennai

    ReplyDelete
  33. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic. After reading your post,thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic
    Android Training In Chennai In Chennai

    ReplyDelete
  34. SAP Training in Chennai
    This post is really nice and informative. The explanation given is really comprehensive and informative..

    ReplyDelete
  35. Oracle Training in chennai
    Thanks for sharing such a great information..Its really nice and informative.

    ReplyDelete
  36. Selenium Training in Chennai
    Wonderful blog.. Thanks for sharing informative blog.. its very useful to me..

    ReplyDelete
  37. Data warehousing Training in Chennai
    I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly..

    ReplyDelete
  38. Whatever we gathered information from the blogs, we should implement that in practically then only we can understand that exact thing clearly, but it’s no need to do it, because you have explained the concepts very well. It was crystal clear, keep sharing..
    Websphere Training in Chennai

    ReplyDelete
  39. Oracle DBA Training in Chennai
    Thanks for sharing this informative blog. I did Oracle DBA Certification in Greens Technology at Adyar. This is really useful for me to make a bright career..

    ReplyDelete
  40. This is really an awesome article. Thank you for sharing this.It is worth reading for everyone. Visit us:
    Oracle Training in Chennai

    ReplyDelete
  41. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Oracle DBA Training in Chennai

    ReplyDelete
  42. great article!!!!!This is very importent information for us.I like all content and information.I have read it.You know more about this please visit again.
    Oracle RAC Training in Chennai

    ReplyDelete
  43. Wonderful tips, very helpful well explained. Your post is definitely incredible. I will refer this to my friend.
    SalesForce Training in Chennai

    ReplyDelete
  44. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.
    Java Training in Chennai

    ReplyDelete
  45. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog.
    PHP Training in Chennai

    ReplyDelete
  46. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me..
    Android Training in Chennai

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog.
    SAP Training in Chennai

    ReplyDelete
  49. Excellent information with unique content and it is very useful to know about the information based on blogs.
    Hadoop Training in Chennai

    ReplyDelete
  50. It is really very helpful for us and I have gathered some important information from this blog.If anyone wants to Selenium Training in Chennai reach Greens Technology training and placement academy.
    selenium Training in Chennai

    ReplyDelete
  51. P & P Infotech gives you the chance to commission your own apps so you can meet the exclusive needs of your customer base better than anyone else on the market. We use our knowledge and skills to build apps which are equivalent or better in quality.

    PnpInfotech- Mobile App Development

    ReplyDelete
  52. In market you can find many companies which are offering android application development services at an affordable price as per need and requirement of clients. In present more than 55 per cent of smartphone users are using the android platform, so better to leverage the major market share.

    ReplyDelete
  53. Great blog very useful information about mobile application development for more information about android application development have a look the page
    Mobile Application Development

    ReplyDelete
  54. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic..
    Selenium Training in Chennai | QTP Training in Chennai

    ReplyDelete
  55. Thanks for Information Oracle Apps Technical is a collection of a bunch of collected applications like accounts payables, purchasing, inventory, accounts receivables, human resources, order management, general ledger and fixed assets, etc which have its own functionality for serving the business
    Oracle Apps Training In Chennai

    ReplyDelete
  56. Oracle Training in chennai | Oracle D2K Training In chennai
    This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic..

    ReplyDelete
  57. Thanks your blog is awesome.
    Videocon offers one of the best prepaid service in Punjab.

    ReplyDelete
  58. Wonderful blog.. Thanks for sharing informative blog

    Android Development

    ReplyDelete


  59. Hi there, awesome site. I thought the topics you posted on were very interesting. I tried to add your RSS to my feed reader and it a few. take a look at it, hopefully I can add you and follow.


    Android App Development Training in Chennai



    ReplyDelete
  60. Latest Govt JObs 2016

    Your way of describing the whole thing in this paragraph is actually pleasant, every one be able to effortlessly know it, Thanks a lot.|.................

    ReplyDelete