How to create a Phonegap build for an Android app: Part 2

Android and Phonegap

So, guys time for again another tutorial as I promised. Yes today I am going to show you that how to create a zip file to upload on Phonegap’s account in Adobe or Github and get your things done out there.

Uptil now you might have built the app which I taught you in the last tutorial of mine. If you haven’t done that yet than check that out first :

How to create an Android app with Phonegap using Eclipse?

Now lets begin our next tutorial on Phonegap build.
Phonegap is a cross platform framework, so the build on Phonegap needs an application to be packaged in a specific way which is a bit peculiar one.

Phonegap uses W3C Widget Packaging specification for the same.

There are two basic leaps for getting this thing done. They are:

1)      What you need to upload?

2)      How to upload?

What you need to upload?

For a Phonegap build you require only the assets folder of your application to be packaged. Well you might be wondering that what that is actually? It is actually the “www” folder into your project (it lies in the root directory of assets folder) which contain things like HTML, CSS, Js files, etc of your application.

We need to add these files only because phonegap build fails to compile native files like .h, .m, .java,etc of your application.

So as per below figure, copy the things selected in www folder. Now create a new folder on your desktop named “Phonegap” and copy that selected files into it.

phone2

Which unnecessary files you need to remove?

Once you are done with integrating the necessary assets of your application, remove the phonegap.js (cordova.js) file as during the Phonegap build the build will automatically include this js file during compilation process.

The below screenshot shows the Cordova file of my application. You’ll also find one in your window of the version of phonegap which you might have downloaded.

Now as per below figure remove/delete the cordova.js file, in my case it is cordova-2.6.0.js.

phone2

Well you might be thinking that why to do such stupid thing i.e. if build is already appending that file then what is the point of removing this file and letting the same file to be added into your zip through the Phonegap build?

SO here’s the answer to your question. Phonegap requires having different Javascript file for different platforms and using a single phonegap.js (which is incompatible) will result in a pool of errors while running your application.

Note: Make sure that after deleting your phonegap.js file you are still able to access the Phonegap API. To check this ensure the following reference is made into your index.html file.

2) How to upload?

Create a zip file for your folder “Phonegap” which lies on your desktop.

Now to upload the zip file on an Adobe account or a Github account. For this open this link and click on Sign-In from the top right corner into your Adobe Id https://build.phonegap.com/people/sign_in , if you do not hold an Adobe Id password Go and register a new account in Adobe.

After this click on “+ new app” and a window like this will appear where you need to upload a zip file of your “Phonegap” folder which you have created on your desktop in the “Private” section.

phone4

Step: Now you’ll get a screen in which you will be able to see the Phonegap build process for your application. Now download the “apk” file by clicking on it and saving on it.

phone4

After downloading this “apk” file, transfer this file into your Android device through bluetooth or any other means and can see it running it successfully.

Well, you might be wondering that why there is a red coloured button before the iOS? Well the answer is that Phonegap build for iOS requires a “Key file” which we need to generate on our own manually. Its a long process but don’t worry, my next tutorial is based on the same.

I hope this tutorial helps you out build your apps successfully.

In case you want to eat my head with your queries, you are most welcome for that. 🙂 😛 😉

See you next time with another tutorial. Till then “Happy Phonegap build” times. 🙂

Regards 🙂




There are 68 comments

Add yours
  1. Nwosu Desmond

    This is really a useful tutorial and i find it very informative, i have always wondered how .apk files are packed and you have just made it clear to me. I hope to read more of such tutorials.

    • Charmie

      Hey there,
      Thanks a lot for sparing time to have a look at my tutorial, read it and most importantly trying it out on your own. I hope that this tutorial proves out to be useful.
      I am waiting for your reply after you try it out. 🙂

      Regards
      Charmie

      • Abhishek

        Hello Charmie,

        I go through your steps it’s really helping for beginners, but the only think i don’t understand is why we need to modify .Java file.

        I mean if i want to create simple app with html,css and js then do you think i need to play with .JAVA file ??

        Thanks

  2. Nirmala

    Nice tutorial. Am unaware of these stuffs, but your guide is really helpful one as am having android phone.

    Will try to do as you told, keep sharing the useful information Charmie 🙂

    • Charmie Prajapati

      Hello ma’am,
      Thank you so much for your concerns. I am glad that besides this being an off-track article for you, you took the efforts to leave behind such beautiful complements.

      Thank you so much for this. I hope you try it out soon and reply me your feedback whether it proved to be helpful or not.

      Regards
      Charmie 🙂

  3. anis

    Nice tutorial which made many things clear on my mind
    keep sharing such awesome stuff
    shared your post
    and looking forward for the next stuff 😉

    • Charmie

      Hey Anis,
      Thanks a lot for stopping by. I am glad that the things infact your doubts got cleared after reading this tutorial.
      Thanks a lot for being here into the discussion.
      Stay connected. 🙂

      Regards

  4. Pawan

    Hey Charmie,

    Wonderful tutorial. I had Android smartphone about a month ago but I’ve already switched to windows phone now. However, I may find some testers over in my friend circle. Let me dive in to your first article about this and come back at this.

    Thanks.

    • Charmie

      Hey Pawan,
      Thanks a lot firstly for reading my article with keen interest. I just hope you find out the thing useful enough to get your things done.

      Thanks a lot for being here to drop your valuable concern.
      Regards 🙂

    • Charmie

      Hey, welcome to our blog. Wohoo you make me feel happy that my article is where you have ended up solving your query/doubt.

      Thanks a lot that you found us and dropped your valuable reply.
      Regards

  5. Cassie

    Interesting. People who are using android phone would probably love to read this one. Thank you for the tutorial and for sharing this very informative post.

    • Charmie

      Yes, the main purpose of mine was the same only i.e. to make people handy and acquainted with the technology which is new and efficient into the markets.

      Thanks a lot for complementing it. 🙂

  6. techcrot

    I blog frequently and I truly thank you for your information. Your article has truly peaked my interest. I will book mark your website and keep checking for new information about once per week. I subscribed to your Feed too.

  7. Bernard

    That is what i am looking for, but i have some difficult to understand java. i see from the previous tutorial that u use HTML, CSS and Javascript, yeah great cuz i am good at this point. thank you for you efforts.

  8. Siddharth Sharma

    Hey Charmie,

    Nice to see your another great post on Android . finally today i learnt more tips & tricks to build Android Apps .

    It is looking very useful and completely helpful , for new developers .

    Thanks to Share 🙂

  9. Nia

    Whoa..!! Really hard article to go through. Thanks to you for making it easier to understand. Anyway, cool site, adding another site in the roll. 🙂

  10. Rahul

    Thanks dear for sharing this post with us. i am looking for such post but i cant find such ultimate guide. It is very helpful for me and thank for making it so easy to understand

  11. Harshajyoti Das

    That’s a lot of information to consume. I have been reading this blog for quite some time. Everytime I come back to visit, I find another great article to read. Thanks, keep up the good work.

  12. Chetan

    Hi,
    Thanks for the useful article. Now I’m in need of a facebook login for cordova app. I read the installation steps from github and tried to develop. But it went wrong.(Got error FB.login is called before FB init() ) .

    So please help me to add a facebook login in my cordova app version 3.4.
    Please reply me.
    Any help would be appreciated.
    Thanks in advance !

  13. Michael

    Love the tutorial. Phonegap has so many different options and functionality for most platforms is pretty easy. Our app builder allows you to incorporate Phonegap directly into your projects. We are also running a “unlimited app” special for an amazing price.

  14. Mobiers

    Great Post !! Being a newbie to this app development platform, this content will definitely going to help me alot in an excellent manner. I will definitely going to bookmark this for my future reference.

  15. akshay naik

    I am sure that the informative you shared through your post is useful for people. I am impressed with the way of writing. It kept connected me all the time.Keep up the good work

  16. Sheshnath

    Hi Charmie,
    I have been developing android apps with Cordova framework with HTLM5, CSS and JavaScript, but I have never used PhoneGap.
    After reading your tutorial I tried it and now I can make Android iOS and Windows app with a single code.

    Thanks for sharing it 🙂 .

  17. mod

    Love the tutorial. Phonegap has so many different options and functionality for most platforms is pretty easy. Our app builder allows you to incorporate Phonegap directly into your projects. We are also running a “unlimited app” special for an amazing price.

  18. Roshan

    Hi
    This is really a useful tutorial and i find it very informative, i have always wondered how different types of .apk files are packed and you have just made it clear to me. I hope for feature to read more of suchtype of tutorials.

  19. mod

    Hi Charmie,
    I have been developing android apps with Cordova framework with HTLM5, CSS and JavaScript, but I have never used PhoneGap.
    After reading your tutorial I attempted it and now I can make Android iOS and Windows app with a single code.

    Thanks for sharing it 🙂 .
    Sheshnath not too long ago posted

  20. Zachery Smith

    This is my first visit, though not my last. I am just starting to learn android app programming and am constantly looking for ways to improve my understanding of the world around me. I am a civil engineering student and want to find ways to harness the amazing power of the smart phone … but need to learn to develop first 🙂 Thank you for your great content!

  21. Pankaj Bhatt

    To be true I really dont like reading the whole post, i just use to go through the headings and click on the cross, this was the first time i have given my time to post, well a big surprise for me but the, i would love to praise the way you educated us with the help of this post…thanx a lot CHARMIE…will wait for your next post…:)


Post a new comment