Unfortunately this didn’t work for me. I couldn’t initialize a PhoneGap (or Cordova) project in a non-empty folder. So I ended up with a slightly different approach to do the same thing and extended it by pulling the Android & iOS build commands into grunt.
##Start your engines I’ve only tested the following on Mac OS X. For those on windows or linux, you might need some different syntax.
If you already installed Yeoman and Cordova, you can skip this section and go directly to “Release the clutch”. For the rest of us mortals I’ll give a quick overview of the “engines” we’re going to use.
After you’ve installed node you can use the node command in your terminal. To be sure everything is installed you can try it yourself.
$ node -v //v0.10.29 $ npm -v //1.4.9
Second Gear: Yeoman
Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, Yeoman provides a generator ecosystem. A generator is basically a plugin that can be ran with the
yocommand to scaffold complete projects or useful parts. [yeoman website]
$ sudo npm install -g grunt $ sudo npm install -g bower $ sudo npm install -g yo $ sudo npm install -g generator-angular
You might have noticed the -g (or –global). This is because we want to install these node modules globally and not only for this project.
Again you can check if everything is installed correctly with the -v (–version) option.
$ grunt -v // 0.4 $ bower -v //1.3.7 $ yo -v //1.2.0
Third Gear: Ionic framework
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.
Fourth Gear: PhoneGap / Cordova
PhoneGap & Cordova are almost the same, PhoneGap is Cordova but owned by Adobe. Cordova is the open source version of almost the same thing.
To install Cordova we’ll repeat the same thing again
sudo npm install -g cordova
And once again you can check if everything is installed correctly with the -v (–version) option.
$ cordova -v // 3.5.0-0.2.6
TL;DR: You can install all these in one command npm install -g cordova yo generator-angular bower grunt
Release the clutch
We’ve now installed all the needed “engines” and fitted all the parts. So let’s start the actual scaffolding of our application. This is pretty straightforward if you respect the order of scaffolding the different layers. This is due to the fact
cordova create . "com.example.app" "demo" doesn’t want to sit in a non-empty folder. (F.Y.I. I had the same problem with the Phonegap variant).
Finding a Campingspot
Before we continue, it seems like a good idea to tell you what we’re trying to achieve.
If you generate a Yeoman angular project, you’ll have a “development” folder, and a “distribution” folder. The first one is used for development and the other is the “clean and lean” version with minified scripts, optimized images, etc. to deploy online.
The ‘app/’ directory is the development version, and the ‘dist/’ directory is the distribution version.
If we use Cordova (or PhoneGap), the ‘native’ applications are generated from the ‘www’ directory, which will end up in the platforms folder.
We can’t change the fact that Cordova needs the ‘www/’ directory for deploying applications, but we can change the name of the Yeoman distribution folder.
Hence we’ll change the ‘distribution’ folder name to ‘www’ instead of ‘dist’. (don’t worry to much about this right now, we’ll handle it later on).
Let’s start by creating a folder for our application and change our working directory to it.
$ mkdir ionic-demo $ cd ionic-demo
After we’ve created our application folder and moved in to it, we can scaffold a Cordova project inside of it.
$ cordova create . "com.example.app" "ionic-demo"
Now that the foundation for a mobile application is laid out, we can add a new layer on top of it. This would be the AngularJS layer. We can simply add this by running the Yo Angular-generator
$ yo angular
Yeoman will ask a few questions, the only thing you need to remember is say ‘Yes’ to using Sass and ‘no’ to using bootstrap. After this Yeoman will ask us if we want to install some additional angular modules. You can select the ones you need (or think you’re going to need).
Now we’ve scaffolded an Angular-Cordova (or Cordova-Angular) project.
Riding in a straight line.
In order to make our application build to the ‘www’ folder instead of the ‘dist’ folder. We’ll change the destination of the appConfig.dist property in our Gruntfile.js.
Make sure we keep in our lane
We can make some changes in our config.xml file to optimize our application.
- Add the DisallowOverscroll preference to prevent the application from overscrolling
<preference name="DisallowOverscroll" value="true"/>
- Add the UIWebViewBounce preference to prevent the bouncing animation in your application
<preference name="UIWebViewBounce" value="false" />
We don’t want to slow down
We need to add a
<script> tag for our Cordova script, which is needed by our application to include and use the Cordova magic.
We could also remove the conditional tags for older browsers because this isn’t need for mobile applications (unless you’ll find a IE6 phone or something like that)
Let’s ignore the flies on the windshield
Because we want to create a Git repository of our application, we’ll try to keep it as clean as possible for others to find their way in our “frankenstein” scaffold.
echo 'www/' >> .gitignore (Add directory www to .gitignore) echo 'npm-debug.log' >> .gitignore (Add file npm-debug.log to .gitignore) echo '.*' >> .gitignore (Add hidden files to .gitignore but you should force add bower and co configuration files to git) echo 'platforms/' >> .gitignore (Add directory platformsto .gitignore) echo 'plugins/' >> .gitignore (Add directory plugins to.gitignore)
We don’t need no dead weight
We’ve already removed the references to our old-browser-shims. But we don’t want them to pop up again. So we can remove the following lines from our bower.json file.
Finally something with Ionic in it.
Now our project is cleaned up, we can add something extra to it. And not a small extra but a full blown HTML5 mobile application framework: Ionic!
We need to add following lines to our bower.json file. These will add angular-ui-router (needed by Ionic) and Ionic itself.
I’ve tried to use
"ionic":"latest" but this keeps installing the 0.9 version, and to be honest the 1.0 beta version works a bit better.
After we’ve added above lines to our bower.json file, we’ll need to run the following command to actually add these dependencies to our application.
$ bower install $ grunt wiredep
Let’s add the blinking engine light
This is one of the reasons why we wanted to combine Yeoman scaffolding, Cordova and Ionic in the first place. To have an easy testing environment, to enable our testing environment we need to update the dependencies in the test/karma.conf.js file too.
This kinda depends on the modules you’ve chosen when you ran
To make sure everything is OK, I would advise to run
grunt test until it gives no significant errors anymore.
$ grunt Test
Almost at the coffeestop!
“Can somebody please tell me why we’re doing this in the first place? “
Because we want to set up an automatic build for our applications so we don’t need to type commands in our terminal all day.
What if I told you, there’s a Grunt Cordova module too and Yeoman uses Grunt, so we can use it? And what if I told you that you can run the whole process with just one command?
“Right, that would be awesome.”
Let’s build a rocket!
To install the Grunt Cordova Command line interface, we need to install and save it to our package.json file (this can be done by adding –save-dev to it)
npm install grunt-cordovacli —-save-dev
By adding it to our package.json file, other developers will know they’ll need this file, and also (this setup of) grunt will know that it needs to load it.
To add a task to our Gruntfile, we need to define an object into
Cordovacli.options.path is set to ‘/’ because we use the rootfolder as base for our Cordova application.
Cordovacli.add_platforms can be used to add platforms to our project (in this case iOS & Android)
Cordovacli.add_plugins can be used to add additional plugings to our project.
Cordovacli.build_xxx is the task that actually builds the application for iOS or Android.
Cordovacli.run_xxx is the task that can be run to emulate the application in an emulator or on a device.
We can now use these tasks by running
But we want more and actually need more now that we’ve come this far. As I mentioned before, Cordova uses the ‘www’ folder for building the ‘native’ applications. But if you run
grunt cordovacli:build:ios without
grunt build your latest changes sometimes aren’t included.
So to be sure this doesn’t happen, we’ll transform the
grunt build command to a
grunt build:ios and a
grunt build:android command, like shown below.
Now, when we run
grunt build still only ‘www’ will be updated, but when we would run
grunt build:ios or
grunt build:android ‘www’ gets updated and Cordova will build a “native” iOS or “native” android app, from your latest changes.
In addition to our
grunt serve task, we can register a
grunt run:ios and
grunt run:android task to emulate what we’ve build on an iOS emulator or Android emulator or device.