Nowadays is the time when people expect both web UI and mobile client application in their phones for almost every project. And it’s actually pretty tough and time consuming problem to ship all of this stuff at the same time. In this tutorial we’re going to build backend, web UI and hybrid mobile application using AllcountJS and ionic in less than a hour.

Let’s start with backend and web UI. For this example I’ll use twenty two lines hello world application template. If you haven’t set up AllcountJS develeopment environment yet please visit our Getting Started or watch Video tutorial from one of our previous blog posts.

Let’s init our backend project repository with

$ allcountjs init

I’m using default name helloworld-app for my project. The next step is to install dependencies as CLI suggests:

$ cd helloworld-app && npm install

And to get our server up and running we should execute following command at the project dir (don’t forget to startup your local MongoDB instance)

$ allcountjs run

If all went ok we should see something like

Using db url: mongodb://localhost:27017/helloworld-app Failed to fetch "app-config". Trying to use as regular directory. Application server for "app-config" listening on port 9080

So when you open http://localhost:9080/ you’d see your application up and running.

First part is finished here and we’re going to create mobile application as our next.

If you haven’t installed ionic it’s time to do that: Getting Started. Actually it’s as simple as

$ npm install -g cordova ionic

Now let’s change directory to parent of our helloworld-app and run init for ionic:

$ ionic start helloworld-app-mobile blank

Now let’s change current directory to newly created ionic app’s directory and run ionic serve in order to check what we have now:

$ cd helloworld-app-mobile && ionic serve

If all went nice you’d see blank ionic starter app. Now let’s install allcountjs-ionic with (if you haven’t installed bower yet please run npm install -g bower )

$ bower install allcountjs-ionic --save

Then open helloworld-app-mobile/www/index.html and add AllcountJS dependencies just right after ionic.bundle.js declaration

<script src="lib/underscore/underscore.js"></script> <script src="lib/jquery/dist/jquery.js"></script> <script src="lib/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="lib/allcountjs-angular-base/allcount-base.js"></script> <script src="lib/allcountjs-ionic/allcount-mobile.js"></script>

And also replace contents of <body ng-app="starter"></body> with

<ion-nav-view></ion-nav-view>

So we should get something like in our index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/underscore/underscore.js"></script> <script src="lib/jquery/dist/jquery.js"></script> <script src="lib/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="lib/allcountjs-angular-base/allcount-base.js"></script> <script src="lib/allcountjs-ionic/allcount-mobile.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html>

Then let’s change helloworld-app-mobile/www/js/app.js . First we need to add allcount-mobile module dependency using

angular.module('starter', ['ionic', 'allcount-mobile'])

Then we need to setup our server url by requiring lcApiConfig dependency in module run() and setting url as following

.run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); ... })

The last one thing is to add standard AllcountJS routes by adding config() call

.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); });

Final app.js should look like

angular.module('starter', ['ionic', 'allcount-mobile']) .run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); });

Let’s check our result by running ionic serve from helloworld-app-mobile directory. You should see login dialog where you could just enter admin/admin. After login you’d see your app menu described in AllcountJS app config.

Cool! But let’s go further and build and run native iOS application then. In order to do this we’d need to add cordova ios platform

$ ionic platform add ios

But before you’ll run app on emulator you should change your app server url to something accessible for it. For myself I used my IP on local network. Let’s change it in helloworld-app-mobile/www/js/app.js

lcApiConfig.setServerUrl('http://192.168.0.16:9080');

Then run

$ ionic build ios $ ionic emulate ios

Another one thing I definitely need to mention is the new Apple security policy for iOS 9. So in order to use insecure http endpoints you should add this to your platforms/ios/helloworld-app-mobile/helloworld-app-mobile-Info.plist just after first <dict> tag before run (see http://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9 for details):

<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

After all you would see something like:

Pretty same list of operations are required to build and emulate on android as well

$ ionic platform add android $ ionic build android $ ionic emulate android

Questions? Opinions? Suggestions? We’re happy to hear all of that in comments below and in our Gitter chat.