{"id":1177,"date":"2016-07-06T16:14:03","date_gmt":"2016-07-06T16:14:03","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1177"},"modified":"2017-04-03T19:50:50","modified_gmt":"2017-04-03T19:50:50","slug":"advanced-workflows-for-building-rock-solid-ionic-apps-part-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/advanced-workflows-for-building-rock-solid-ionic-apps-part-2","title":{"rendered":"Advanced Workflows for Building Rock-Solid Ionic Apps, Part 2"},"content":{"rendered":"

Jonathan Grupp<\/a> is a software engineer at M-Way Solutions<\/a>, the owner and maintainer of Generator-M-Ionic, and a frequent contributor to Ionic. He has written a three-part series on advanced workflows for building rock-solid Ionic apps. This is Part 2.<\/em><\/p>\n

\"blog-02\"

In the second part of our series on developing enterprise-level Ionic apps, you’ll be learning about wonderful ingredients like testing, sub-generators, plugins, and ecosystem integration into the Ionic Platform<\/a>. We are building on top of the project we created in Part 1 of this series<\/a>. Time to climb the development mountain!
\n<\/p>\n

Quality assurance<\/h3>\n

You’ve set up your project, created your first commit, and are now ready to start coding. Whether you are coding alone or in a team, as a developer worried about professional development, you’ll want to take some measures to ensure the quality of your code. We’ve got you covered on this one!<\/p>\n

Linting<\/h4>\n

Your Generator-M-Ionic project comes with established coding guidelines and workflows already baked in using ESLint<\/a>. On every iteration of gulp watch<\/code>, Gulp will check all your application JavaScript files for guideline violations.<\/p>\n

\"eslint\"

To additionally get linting notifications as you develop in your editor or to learn how to configure the default set of rules, check out our ESLint Guide<\/a>. If you are working with JSON files in your app\/<\/code> folder -for instance to handle translations- the generator’s linting will validate those too! This keeps your development trouble free.<\/p>\n

Testing<\/h4>\n

Another area where you just don’t have to deal with the hassle of setting up and configuring everything yourself is unit testing with karma and end-to-end testing with protractor. Your sample app even comes with a ready-to-use test-suite that you can try out right now by running:<\/p>\n

gulp karma\n# and\ngulp protractor\n<\/code><\/pre>\n
The relevant files for the test setup are these:<\/p>\n
test\/\n  \u2514\u2500\u2500 karma\/\n  \u2514\u2500\u2500 protractor\/\nkarma.conf.js\nprotractor.conf.js\n<\/code><\/pre>\n
Our Testing Guide<\/a> can help you get started with writing your own unit and end-to-end tests for your app. Once you have that mastered, the Husky Hooks Guide<\/a> explains how you can run linting and tests automatically before you git commit<\/code> or git push<\/code>.<\/p>\n
Coding<\/h3>\n
Ok, ok, enough already! You want to finally start coding and develop your very own app? Say no more. You’ll probably want to:
\n– add your own Angular components using our subgenerators<\/a>
\n  – controllers, templates, directives, services, filters, constants, … or even whole modules
\n– add some Sass<\/a> to spice up your app’s styling
\n– add Cordova Plugins<\/a> to use with ngCordova<\/a> for that real app-feeling
\n– and maybe add some additional bower packages<\/a> for special tasks<\/p>\n
We will go through each of these tasks briefly to give you a general idea of how things work. For more detailed explanations, visit our Documentation<\/a>.<\/p>\n
Adding Angular components<\/h4>\n
Our array of subgenerators<\/a> allows you to create the most important Angular components very easily. If applicable, they also generate sample test files so you can start testing right away.<\/p>\n
For instance, we use the pair-subgenerator a lot. It creates a controller, with a test file and a template with the same name.<\/p>\n
yo m-ionic:pair phone\n<\/code><\/pre>\n
\"sub_generator\"
Now, we only need to add a state to the main.js<\/code>:<\/p>\n
.state('main.phone', {\n  url: '\/phone',\n  views: {\n    'tab-phone': {\n      templateUrl: 'main\/templates\/phone.html',\n      controller: 'PhoneCtrl as ctrl'\n    }\n  }\n})\n<\/code><\/pre>\n
Then add a navigation item in our tabs.html<\/code> file, which you’ll find in app\/main\/templates\/<\/code>, to bring it all together:<\/p>\n
<!-- List Tab -->\n<ion-tab title="Phone" icon-off="ion-ios-telephone-outline"\n  icon-on="ion-ios-telephone"\n  ui-sref="main.phone">\n  <ion-nav-view name="tab-phone"><\/ion-nav-view>\n<\/ion-tab>\n<\/code><\/pre>\n
That’s it. A new navigation item, a new route, controller, test file, and template in about two minutes. Here’s the result:<\/p>\n
\"nav_phone\"
Adding Sass<\/h4>\n
This is an even easier task. Every module you generate comes with a default Sass file. For your main module, this would be main.scss<\/code>, and it’s located in app\/main\/styles\/<\/code>. Open it and add some Sass:<\/p>\n
ion-list {\n  ion-item {\n    color:red;\n  }\n}\n<\/code><\/pre>\n
Upon saving, your gulp watch<\/code> task will automatically compile and inject the resulting CSS, even reload your browser. Not sassy enough? As your project grows larger, you may want to split your Sass into multiple files. Find out how in our Sass integration Guide<\/a>.<\/p>\n
Adding plugins<\/h4>\n
We’ve got to add some nice Cordova Plugins<\/a> to our app, to make it a real hybrid app. Let’s do it!<\/p>\n
Your project comes with a local installation of the latest version of the Cordova CLI<\/a>, which you can invoke through Gulp. We install it locally, so you don’t have to worry about which project you set up with which version. It’s always the one it got set up with. The syntax is almost exactly the same as using a global CLI installation. To install the Cordova camera plugin, run:<\/p>\n
gulp --cordova "plugin add cordova-plugin-camera --save"\n<\/code><\/pre>\n
You want to develop for Windows, as well? Install the appropriate Cordova Platform requirements<\/a> and type:<\/p>\n
gulp --cordova "platform add windows --save"\n<\/code><\/pre>\n
Don’t forget to call --save<\/code>, in order to persist new plugins and platforms in the config.xml<\/code>! Our Development Introduction has a dedicated part on using the Cordova CLI wrapper<\/a>.<\/p>\n
Now that we’ve installed a new plugin, we want to use it! ngCordova<\/a> is declared as a dependency for every module you create using the generator, so you can just start using the plugins right away. Refer to the main module declaration in your main.js<\/code> to see how it’s done. So in my PhoneCtrl<\/code>, I’ll only have to inject the $cordovaCamera<\/code> service<\/a> in order to access the plugin:<\/p>\n
angular.module('main')\n.controller('PhoneCtrl', function ($cordovaCamera) {\n\n  var options = {\n    destinationType: Camera.DestinationType.FILE_URI,\n    sourceType: Camera.PictureSourceType.CAMERA,\n  };\n\n  $cordovaCamera.getPicture(options)\n  .then(function(imageURI) {\n    console.log(imageURI);\n  });\n});\n<\/code><\/pre>\n
Adding new plugins has never been so simple!<\/p>\n
In some cases, you need to extend your ESLint configuration because some plugins expose JavaScript globals that you might want to use (like Camera<\/code> in the example above). Or you might prefer to access your plugins through the cordova<\/code> global, because ngCordova is not always up to date with the latest plugin versions or may not support the plugin you want to use. In order to use those globals without ESLint complaining, augment the globals<\/code> section of your app\/.eslintrc<\/code>:<\/p>\n
\/\/..\n"globals": {\n  "angular": true,\n  "ionic": true,\n  "localforage": true,\n  \/\/ add those\n  "cordova": true,\n  "Camera": true\n},\n\/\/..\n<\/code><\/pre>\n
Bower packages<\/h4>\n
And last but not least, you’ll probably want some more bower packages<\/a> that go with your app. Maybe your app needs to support different languages. You can use angular-translate<\/a> for that. Install it by running:<\/p>\n
bower install angular-translate --save\n<\/code><\/pre>\n
The --save<\/code> flag will persist that package in the bower.json<\/code>. Sometimes, for all changes to take effect, it is necessary to restart gulp watch<\/code>. Then, the only thing left to do is to mark the module as a dependency in your main.js<\/code> module declaration:<\/p>\n
'use strict';\nangular.module('main', [\n  'ionic',\n  'ngCordova',\n  'ui.router',\n  \/\/ add this one\n  'pascalprecht.translate'\n])\n<\/code><\/pre>\n
Translations? You’ve got them now! Refer to the documentation<\/a> to learn more.<\/p>\n
Browser or device?<\/h3>\n
Up until now, we’ve only seen our app in the browser using gulp watch<\/code>. But at least when you’re working with plugins, you may want to test your app on a device or emulator. If you have your system correctly set up according to the Cordova Platform Guides<\/a>, this should be easy:<\/p>\n
    \n
  1. connect your device to your machine<\/li>\n
  2. make sure they’re both on the same network<\/li>\n
  3. start the livereload command and keep it running:<\/li>\n<\/ol>\n
    # run on a connected device with livereload\ngulp --livereload "run ios"\n# run on an emulator with livereload\ngulp --livereload "run --emulate android"\n<\/code><\/pre>\n
    The best part about using livereload is that you can make changes to your code and see the changes immediately on the device. If you make changes to the Cordova files (config.xml<\/code>, Platforms, Plugins) you’ll have to run the command again.<\/p>\n
    Your app is ready to be tested on your device!<\/p>\n
    \"device\"
    If you don’t want to rely on your development machine to keep the livereload command running, you can run a full build of your app, which is then pushed onto your device.<\/p>\n
    gulp --cordova "run ios"\n# or\ngulp --cordova "run android"\n<\/code><\/pre>\n
    Two things happen when you run this command:<\/p>\n
      \n
    1. Gulp will build your app using gulp build<\/code>\n