I'm looking for a way to build a cordova app completely automatically, based on a existing web project. All I have found so far is to create a new cordova project and drag and drop my existing application in the www folder. The thing is, I don't want to do this step.
Therefore, I'm looking for one of these two possible solutions.
1. Privately hosted phonegap build alternative
Is there an open source project similar to phonegap build? One that I can host on my private servers. All I have to do in this case is zipping my project, upload it to the server and get the built application back.
What I have found is cordova-build (https://www.npmjs.com/package/cordova-build), but it seams quite out-dated and not well maintained.
2. Create a local build process
For the building process I'm using webpack. So what I would like to do is setting up a build process where I can just say
npm mobileBuild -- --platform="ios"
and it builds a new cordova project with my web application included. Later I would just have to run the cordova cli commands to build the application.
Do you have any idea how to accomplish one of these two approaches?
Thanks!
The existing web project must consider cordova related HTML like
<script src="cordova.js"></script>
But it will be missing on the already developed project... even the HTML/CSS will have to be different for every case.
I don't really see this as a way to follow, not automatically.
Related
We're working in an app for Android/IOS and the team has at least 3 people working in the app code and who need to have the app running locally in their particular env, someone is developing over Mac OS to eventually build to iOS and the others are on Windows machines.
We've been experiencing problems with the Ionic project after installing ngCordova, some cordova plugins and the ionic-platform-web-client, the mac machine had the app running beautifully and the windows instances were broken complaining that: Module 'ionic.service.core' is not available!
We don't know which particular step caused the code inconsistency and after several hours of looking around to fix it we decided just to create a new Ionic project and copy our specific www code inside. Since we don't want that to happen again we need to figure a reliable method of keeping all platforms working right after we install a plugin or add an Ionic service.
Could this be accomplished only by gitignoring www/lib folder and platforms, and then running bower install in each dev machine after a new module have been added to the project? or is it more complex than that and we're omitting some important steps to allow the project collaboration without these kind of issues?
Yes, you can put platforms in your .gitignore. I personally wouldn't be putting www/lib folder there, though.
Also, I would strongly advise that on all the machines where you're building the apps locally you have the same version of Ionic and Node.
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
I have a Sencha Touch application and I would now like to package it with Cordova for Android, iOS and browser.
I am trying for about a day now to make the two work together. I can get a version onto my device, but anytime I try to update it with new code something doesn't work. "Something doesn't work" means one of the following: device shows the "3 dots of death" (blinking 3 white dots on blue background) forever OR a browser-style alert saying app.js was updated and should I reload (with cancel/reload buttons) OR a sencha-style alert saying the application finished upgrading and do I want to reload.
I think the root of the problem is the way Sencha (Cmd?) works or the way I fail to comprehend what I'm doing wrong. I seem in misunderstand what the difference between "production", "package" and "native" is. I can understand why "over-the-air" updates can be good, but since this is a local application, I don't need any of that. I don't want/need to have an "archive" folder in my output dir, nor a "deltas" folder. And why does the "archive" folder have extra copies of all my CSSs? ripping out hair
So, I guess my basic question is: how do I make Sencha Touch just build a complete application, without over-the-air updates, deltas, archives, confusing prompts upon launch or the 3-dots-of-death?
While waiting for a discussion to start I'm going to go ahead and keep trying stuff out and report back here with anything I may find.
Final notes:
I am using my own cordova, not Sencha's "sencha cordova" commands. I am confused enough as it is, but maybe I need to try that?
Part of the reason I want a "normal" build with one big Js file without deltas or archives is that I want to send it after compilation to an obfuscation service (jscrambler). Don't know if that's important.
This may be unrelated, but when I'm upgrading an existing installation of my app on an android device, I get the old version of my Javascript (even though the android application itself was updated, I can tell by the version number). I read somewhere that I should remove and add the android platform from my cordova project before compiling... why?
Thanks for your attention, I hope this thread will help any other miserable programmers out there :)
Versions:
Cordova -v = 5.3.3, Sencha Touch (zip) = 2.4.2, Sencha Cmd = 5.1.3.61, Android API level = 22, Mac OS X 10.10.5
The best way to handle this is to just let Sencha CMD do it's thing. It can be done other ways but I'd recommend that after figuring out the basics of Sencha Touch and Cordova
Basically you have a ST project that you can create in CMD.
sencha -sdk ~/path/to/touch-0.0.0 generate app MyApp ~/path/to/create/my-app
Then you do some dev work and you want to do a build in Cordova
sencha cordova init com.mydomain.myapp MyApp
The Cordova directory is added to your project and contains..
cordova
|_ hooks/
|_ platforms/
|_ plugins/
|_ www/
|_ config.xml
So just to explain a little before moving forward -- when you run
sencha app build production
you get a minified version of you app the (compiled to my-app/build/production/MyApp) is deployable to a web server intended to work well as a mobile website/web app.
When you run
sencha app build native
you get almost that same minified codebase but it is compiled to my-app/cordova/www/.
Sencha's build completes completes with putting code into the www folder it triggers a cordova build. Then contents of the www folder are copied to each platform/[os]/www directory.
If you make any changes to your project specific to the cordova build you would want to do that in the cordova/www folder (be careful as you might get changes wiped out)
Sencha CMD's Native build does do some custom things to the index.html to cooperate with Sencha better, but a good deal of it is pretty normal to Cordova. If you CD into cordova you can actually run the normal cordova [options] commands. The difference there is the any changes to your Sencha project is not copied into the Cordova project.
#1
I would recommend using the Sencha CMD route as it will make life easier.
#2
You shouldn't need to use a third party tool to do anything with your JS as it is done through uglification in the build.
#3
I could be wrong but my first guess is in a stand alone Cordova project the platforms code does not update unless you run
cordova build
I think this might cover your issues but if not I can try to clarify anything.
EDIT I am using iOS in my examples but swap that with android. Habit :/
The workflow I normally use is to have a build script (or you could use a Cordova build hook) to package the Sencha Touch JS app code with Sencha cmd and copy the results of that into the Cordova project's www folder, prior to running cordova build.
I'd recommend using your own Cordova not the one tied to the Sencha tooling, it's easier to stay up to date with the rapidly moving Cordova project like that.
I am a beginner in developing with phonegap. For about 12 hours I have been trying to connect an AngularJS application with phonegap, in order to develope a mobile app for android. Unfrotunately, AngularJS does not seem to work for me. This is a link to my github repository, where I have pushed all the code from the www folder of the phonegap project. Basically I have everything linked to my index.html file, routes and controllers seem to look ok. I have done several angular.js applications before, but always with node.js, so this thing is really new for me. Sorry for posting the whole project, but I have been working on this long enough to have absolutely no idea where the problem is. I really tried everything I could...
Angularjs is definitely the best framework which gives us the facility to develop client application using great MVC framework.
Here is some links i have referred while i was developing phonegap app using angularjs first time.
divgirl 2013
divgirl 2014
coenraets 2013
coenraets 2014
These are the best for reference if you are talking about phonegap & angularjs
I was looking for the same thing a few days ago and I found this grunt project:
https://github.com/dsimard/grunt-angular-phonegap
I am assuming you have:
installed phonegap, generator-angular, grunt
made a phonegap project
added angular in your project by doing 'yo angular'
did a 'cordova platform add android'
Here is what you need to do next:
npm install grunt-angular-phonegap --save-dev
npm install (both 1. and 2. should be done once inside project directory)
grunt phonegap:check
(it checks if it can build in your system.
checkAdb will probably fail if you are using windows but you don't have to worry about that)
grunt phonegap:build
P.S.the regular command is grunt phonegap:command[:platform] but by default it does android.
That's it.
Thanks to https://github.com/dsimard for the awesome tool.
I'm new to developing apps with Cordova but I've got a lot working well. I just successfully implemented the 'phonegap-facebook-plugin'.
However, following the instructions, I put many files (from the facebook SDK and plugin) directly into the /platform/ios/ directory - which means instead of working in the root /www/ directory and building both platforms at once, my code is now less 'flexible' and is platform specific.
Is there a better way to do structure my files and/or workflow? Am I missing a step or a trick?
I appreciate any help.
Starting with Cordova 3.x, there is a new cordova command-line interface that will greatly help you organize code for multiple operating systems. You will use the CLI to create a project and then do all of your development in the main /www/ folder. You can then use the CLI to run commands that will copy your /www/ code into the appropriate place for web assets for each platform (like /myApp/assets/www/ for Android.)
Check out my answer here: Should a phonegap plugin be declared in the config.xml file?
I talk about how the directory structure that gets created, how you should version control /www/ and /merges/ folders, and how you can think about anything in /platforms/ as a build artifact. (The things in this folder aren't necessarily build artifacts but it's helpful to think about it that way if you are doing cross-platform work.)
If you are only developing for a single platform, or are hacking on the native pieces of the platform, then you will be inside these folders changing things. I don't recommend this approach for most people though because the vast majority of use cases are creating cross-platform apps with HTML5.
I have been working on the documentation to make this more clear. The new overview guide should help you: https://github.com/mbillau/cordova-docs/blob/30fb71d11b4db5d34b3ff1c48a16443d5fed1be3/docs/en/edge/guide/overview/index.md (If you read it and still have questions, please let me know so I can address those questions in the documentation and everyone will benefit.)
EDIT: I did not see that most of your question was about plugins. What should happen is that if you have a plugin updated for Cordova 3.x, then you should be able to install it with cordova plugin add .... This should copy the native and .js files into the /plugins/ folder for you. Then when you do cordova prepare it will copy the specific platform files for that plugin into the specific platform folder. So you shouldn't have to copy files all over the place. I'm pretty sure that the plugin you are using is not supported with 3.x though, in which case...I'm not really sure what to tell you. Running prepare should just copy over files, not erase files already there...but I'm not positive.