I want to convert my app into a hybrid app using phonegap build.
How do I do that?
I see different setups in basically every tutorial.
In this one, there is not a single platform folder, just the usual img/css folders, plus the config.xml
In many other tutorials I see a folder structure like www, platforms, etc. with the andorid and ios platform code.
How do I setup my phonegap project??? Do I need the platform, do I not need the platform, do I need the cordova.js, do I not need it??
It seems information about this is somewhat contradictory and often outdated.
E. g. I created my app using these steps.
Which does create all those folders like www and platform, however, the app doesnt install correctly after I built it with phonegap build. So something must be configured wrongly... I mean, it's there OWN site and it fails!
What is the correct folder structure that I need to convert my app into a hybrid app that will run on iOS, android and windows phone, using phonegap build?
It depends on whether you plan to use PhoneGap to develop or only to compile (Phonegap Build).
I will show how I used until a little time ago.
I used to develop an Ionic project and made all the development with it. When I needed to test something on the phone, I was using the Phonegap Build.
Both projects have the folder "www". To use Phonegap Build site, I was replacing the folder "www" of Phonegap project with the "www" folder of Ionic project. Then just send the Phonegap project ZIP to Phonegap Build site. This always worked for me.
After creating the project (phonegap create my-app), basically you do the project at "www" folder and configures preferences in config.xml (fullscreen, plashScreen, android-minSdkVersion, etc).
If you use Phonegap Build site you don´t need to add platforms (platform phonegap add) and not need to run "phonegap run android"
PhoneGap Build's only requirement for your application structure is that the config.xml and index.html is in the top level of your application.
Make test:
- phonegap create my-app
- configure config.xml (If necessary, not required)
- config.xml and index.html in the same folder (preferably in www)
- ZIP
- Upload ZIP on Phonegap Build
Related
I have created an ios app using Xcode .Now I have to make it run on android also.So I downloaded phonegap 2.0 and create an xcode project using commandLine(./create ~/Desktop/newfolder com.companyname.projectname projectname).After that I added all the required classes and storyboard file of allready created ios project to this new one(created by using Phonegap utilities).
And now I can run this project.What I want to know is ,
Is this the correct way to make my ios app cross platform?
Is there any rule that only app created using CSS html5 and
javascript can be made crossplatform using Phonegap?
If my steps are wrong do I need to create the same project using CSS html5 and javascript again for making it cross platform.
You can't achieve such functionality using PhoneGap, here is the wikipage for PhoneGap
It says that it enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS.
PhoneGap has different builds for different architectures, so once you've written your entire app using HTML5, CSS and JavaScript you can make build for every different platform available.
If you want to port iOS project into android it is not possible but if you want to port a HTML5 application you can do it using PhoneGap.
Create a PhoneGap project for android using command-line interface. Have a look at the Cordova Command-Line Interface.
Add the CSS, Javascript, HTML, image files inside respective folders. Also, add plugins required for the application using the command-line interface.
Hope it helps you.
First off the bat, if you're looking to port an existing Objective-C based iOS project then it is not possible to do so with PhoneGap.
PhoneGap or Apache Cordova as it is known now is not the only framework that can be used to write cross platform apps. I personally think it is one of the more well supported ones (being an open platform) and yes it is based on familiar web technologies i.e. HTML + CSS + Javascript and you are limited to using only this combination but then web frameworks are good enough for most development requirements these days. This is a good place to start off with Cordova development.
Cordova 3.x.x onward has matured well as a framework and post creation of a project one can add platforms using the command line interface (CLI). This is the common structure of a Cordova project :
/hooks /merges /platforms /plugins /www config.xml
The /www folder contains the web app that you're developing, typically :
/img /css /js index.html
The /platforms folder contains the projects for the various platforms that you've requested, typically :
/android /ios
It is these folders that contain the projects that need to be imported by the IDE that you're using. Say, for Android, import the contents of the android folder as an Existing Android Code Into WorkSpace and build it normally as an Android project. That is all.
Nonetheless, it has many limitations like the lack of support for in app billing, 3D graphics etc. I would like to suggest that you consider making native apps for all platforms you intend to support.
Right so i know that PhoneGap originates in the Apache Cordova project.
This becomes apparent when one looks at the PhoneGap documentation.
When I build a PhoneGap app through the console phonegap build android I get an Apk with one type of icons, no startup splash and overall better performance.
If i go through http://build.phonegap.com I get a very different app. Splash-screen, wrong permissions and a different icon-set.
Can anyone explain why this is?
Ok, I was myself wondering why for a phonegap local project the changes in www/res folder were not reported in the platforms folders. So here are my conclusions...
Cordova projects are always local projects. When you create a cordova project (cordova create ...), there are no icons and no splash added in the project.
icons for a specific platform are added when you add that platform to the project : cordova platform add android will add the cordova icon for each dpi in platforms/android/res and not add any splash. It's then up to the developper to put icons and splash in the platforms folders and customize the specific platform configuration files.
That makes sense because files resolutions for icons and splash are quite different for android, windows phone or ios and someone doing a project only for android will not want to provide images in a resolution that will only be necessary for an ios build.
Most of the phonegap commands are just a copy of cordova commands, some of them are customised to allow specific needs for phonegap build.
So phonegap create creates a project with a config.xml following a different schema than the one of config.xml in cordova.xml
cordova:
<widget id="com.test.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Phonegap:
<widget id="com.test.test" version="1.4.7" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
This allows for configuration of splashscreens, icons, plugins with the <gap: /> nodes.
The config.xml file created by phonegap create contains configuration for a splash screen and an icon stored in www/res. And phonegap create also creates the www/res folder with the phonegap logo (so different from the cordova logo) as default splash and icon.
Where things start to be puzzling is that each phonegap platform add are unmodified copies of the corresponding cordova platform add commands and therefore do not take in account phonegap specificities.
phonegap create command will download platform icons instead of using the ones already in www/res and phonegap build command will not report changes in www/res to the platforms bitmaps.
I think it would be better (or at least less confusing) if phonegap create and phonegap build commands were modified to use the same structure as phonegap build project, but maybe it would be too much maintenance for phonegap teams at each new release.
I am developing a cross-platform app with Phone Gap, Jquery Mobile in Android using eclipse. I am not at all using any PhoneGap functions in my app. My purpose with PhoneGap is to build native apps for ios, Android, windows etc from Adobe PhoneGap build service. Under android assest/www/ folder I created multiple sub folders like css,js,html etc, where I put my jquery mobile html,css,js files and my custom js,html,css. Note under www directory I have cordova.js and index.html, cordova jar also included in build path. My app is working fine, when I run it in eclipse + Android emulator. It is generating valid apk and opening my app root page welcome.html, which is under www/html/welcome.html. The problem is when I generated android build by uploading my code to Adobe PhoneGap Build service, it is giving valid apk, which after installing opening index.html, which is under www/index.html. I my DroidGap actvity, i am loading welcome.html only.
super.loadUrl("file:///android_asset/www/html/welcome.html");
any suggestions plz. I need to have multiple html pages and folders under www directory because some design restrictions.
I am not sure if I uderstood what you mean.
Perhaps you could try:
$.mobile.changePage('./html/welcome.html');
Add this to your javascript event's listener, it should work.
For Phonegap Build to work, all your generic src files need to be in www of the base directory. Any Android specific files go in /www/res/android or /merge. See phonegap and/or codrova documentation.
One of the problems with using Eclipse and Phonegap together is that if you imported your project as an existing Android project, then all work you do is in the Android platform directories, not www.
Main reason why I now use Netbeans with Phonegap 3.0 CLI:
In terminal:
phonegap create [project dir name]
cd [project dir name]
phonegap local build android
add plugins
replace generic phonegap /www files with your project specific files & dirs
In netbeans IDE:
new project -> html5 -> use current src code
tweak /www/context.xml app name, ......
.......
In terminal:
adb connect 192.168.1.??? [Android-X86 in VB guest]
adb devices [are devices showing?]
phonegap local run android [build and installs to VB Android-X86 guest]
debug ....
phonegap remote build android [use Adobe Phonegap Build]
.......
Note: new Netbeans 7.4 RC2/Development includes Cordova development. Tried, but while has some interesting features, seemed to include the kitchen sink when doing initial build. Very slow to compile. Disabled feature. Also background scanning chokes. Turned off with plugin, but remember to manually rescan project files, especially if did work outside IDE. Couldn't set up Android-X86 in VB as my emulator. Why I use the above workflow.
Peter
By default the index.html, or in this case, welcome.html, should be located in the root of the www directory. Since it is not the case, you could try to add the following tag in your phonegap/cordova config.xml file
<content src="html/welcome.html" />
my suggestion is that you copy all the contents of welcome.html to www/index.html and let the default super.loadUrl("file:///android_asset/www/index.html"); as it is. you can later switch views using window.location.href='html/anypage.html';
i have the same kind of problem. i am converting my html website files in android studio. so, under the assets i paste my website folder.. how can i run all the html files i imported? i used the code webView.loadUrl("file:///android_asset/anamayyy/main.html");
and it only shows the main html. the links that i used as button doesnt work..
the links as buttn for next page doesnt show(webpage not available
Today i wrote a simple PhoneGap app on Eclipse.And I became interested, is it posible to write one App on Java and all other platform versions to by generated automaticly,or for every platform I must create dev enviromnent and create a separate app .
Regards.
PhoneGap Build takes the files you include in the WWW folder in a PhoneGap project and then builds apps for multiple paltforms so you don't need to have a build environment for each platform you wish to target. iOS is a special case though.
I have been investigating Phonegap as a method of deploying an app to both Android and iOS. However, it seems like depending on what device you are programming for, there is a different set of instructions.
How do I set up something where the 'project' for both Xcode and ant are in separate directories but they both point to the same set of common assets? And how do I version control this...what should I .hgignore and what is necessary to keep around?
We generally have a www folder with the html, js, css etc for your app and a folder next to it that contains the xcode project and android project then write a simple script to copy the www code into the platform specific projects ... some of this is made more simple with tools like github.com/brianleroux/cordova
You could also check out build.phonegap.com