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

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 :

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.

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.

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.

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.

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. 🙂

Author

I am Charmie Prajapati, co-founder of Movzio. I am an android developer, Phonegap app builder and is currently polishing my skills for the same. I am an avid reader. An entrepreneur. A consistent thinker. An optimist. An introvert. I can help you run a better blog with each day. Add me on
Google+

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. 🙂

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.

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.

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.

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 !

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.

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.

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.

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.

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.

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.

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!

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…:)

Tweets

About Techno Tactics

The basic stratagem on which TechnoTactics work is to serve you hot and fresh buzz happening around you in the world of Information Technology through famously known as “http protocol” and “I-N-T-E-R-N-E-T”.

We believe in giving optimal acknowledgment to our most valuable asset and that is “YOU- Our Users” through web in the form of our thoughts.