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 !!

107 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. 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
  5. Thank you very much for reading this post and your valuable response.

    ReplyDelete
  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. I am glad to read that you get help from this post.

    ReplyDelete
  19. 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
  20. Excellent blog. Its very useful and interesting blog. It would be great if u provide more details about it.
    Android Training in Chennai

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

    ReplyDelete
  22. 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
  23. 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
  24. 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
  25. Hello Deepa, do you have any questions regarding this post?

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

    ReplyDelete
  27. 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
  28. 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
  29. This comment has been removed by the author.

    ReplyDelete
  30. 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
  31. 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
  32. Really good blog content. Thanks for sharing this post. Android Training Institutes in Chennai

    ReplyDelete
  33. 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
  34. Wonderful blog.. Thanks for sharing informative blog

    Android Development

    ReplyDelete


  35. 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
  36. 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
  37. Thanks for the perfect description of PhoneGap! Just check our work on PnoneGap on web and app development at Hybrid App development company in Jaipur Page.

    ReplyDelete
  38. Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant.
    HTML5 Mobile App Development
    Creating a Custom Mobile App for your Business

    ReplyDelete
  39. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    SEO company in coimbatore
    Digital Marketing Company in Coimbatore
    web design in coimbatore

    ReplyDelete
  40. Thank goodness someone is promoting quality content. I often struggle with myself: do I post something on my blog to post something, or wait to post something worth saying. Keep update more.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai

    ReplyDelete
  41. I am looking for Android development. Can appbiz360 help me with Android app development for my finance app?


    ReplyDelete
  42. Really a awesome blog for the freshers. Thanks for posting the information.
    Android Training in Delhi
    Android Training institute in Delhi

    ReplyDelete
  43. Excellently explained the whole concept, Thanks for sharing information about PhoneGap which makes the application simpler and efficient. Even though it is not that easy to make an app working 100% on both Android and iOS It works well.

    Feel Free to reach us if anyone had any query regards Hybrid App Development.

    ReplyDelete
  44. Thanks for your informative article on ios mobile application development.

    Regards,
    https://www.hakunamatatatech.com/our-services/enterprise-mobile-app-development/ios-app-development/

    ReplyDelete
  45. Thanks for sharing such an informative blog. If you are a beginner and want to know the details of android app developers, I will suggest Appbiz360.

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

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

    ReplyDelete
  48. This blog is really amazing this is of much helpful for us .Visit here : phonegap app development

    ReplyDelete
  49. This blog is really amazing this is of much helpful for us .Visit here : Aso Agency

    ReplyDelete
  50. Great Content!! Thank you for sharing this helpful information as it would be very much helpful for the beginner in app development sector. Here is yet another top-notch service provider “X-Byte Enterprise Solutions” who render feasible and credible solutions to global clients that help global brands design and build superior digital products, enabling seamless user experiences across all modern platforms and devices.

    Know more here: Mobile App Development

    ReplyDelete
  51. Phone gap is a great framework that allows you to create cross-platform applications without writing any code. The only downside is that you need to handle the UI yourself. The good news is Phone gap now has a plugin that allows you to create a hybrid app, where the Phone gap code is wrapped inside a Web View. The Web View allows you to use the same UI for all the platforms. Let's learn how to put it all together.

    ReplyDelete

  52. Thank you so much for sharing such an awesome blog...
    http://www.authorstream.com/MileMarkerXFactor/

    ReplyDelete
  53. Clear cut explanation. Am pretty much impressed with your explanation. Looking for the best phone gap app development services in Hyderabad, India? Contact Cyanous software solutions now.

    Best network penetration testing services in Hyderabad
    Best software & web development company in Hyderabad

    ReplyDelete
  54. Really you have done a good job. Thanks for sharing this valuable information....
    Appium Training In Chennai
    Appium Training Online
    Appium Training In Coimbatore

    ReplyDelete
  55. This is really informative post. Thanks for giving this information to us.
    visit here...
    Web app development
    hybrid application experts

    ReplyDelete
  56. Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site. For more info:- Phonegap App Development

    ReplyDelete
  57. This post is so helpfull and informative.keep updating with more information...
    Selenium Entry Level Jobs
    Selenium Testing Jobs

    ReplyDelete
  58. Thank you for sharing such detailed Blog. I am learning a lot from you. Visit my website to get best Information About Top Bank PO coaching in Thane
    Top Bank PO coaching in Thane
    Best Bank PO coaching in Thane

    ReplyDelete
  59. Nice Blog!
    Thanks you very much for sharing valuable information.
    Keep on posting...

    Cheque based business Loan in Chennai
    Unsecured private finance in chennai

    ReplyDelete