This is a follow-up blog-post about a proof-of-concept project I have worked on together with my colleague Robert Fitch to find out what it takes to access on-premise data from an internet client. Robert have created the server side API and my role was to create a mobile app which consumes the methods exposed by this API. The technologies used in order to create the app were HTML5, AngularJS, Bootstrap css and Apache Cordova.
Apache Cordova targets multiple platforms with one code base, it is open source and for the apps you can use html, css and javascript. There are many pros and cons using this stack of technology but in this case we needed to address the app to a wide range of users with as little effort as possible. That is why we didn't use a pure native approach and for the proof of concept app we have targeted Android and iOS devices as potential consumers.
### What else do we need?
Apache Cordova is offering a good way to organize your project. It assured OS specific customizations and the OS specific mobile app builds. These being set up once are for good or very little modified during the lifetime of the project. For the effective development we have used AngularJS and Bootstrap.css.
Maybe it is interesting to know that when I have started to work on this project I had no experience with the above mentioned technologies: neither Apache Cordova , nor AngularJS or Bootstrap.css. I am a pretty experienced web developer who have worked before mainly on jquery based projects. Starting to learn about AngularJS I have discovered a new way of thinking about web development, that is how to develop a web application avoiding to use jquery , use two way bindings etc.
Beside frontend development I mainly do my daily job using Microsoft technologies like C#. I do this using Visual Studio as IDE. That is why a good choice to set up this project was to use Visual Studio Tools for Apache Cordova. By the time I have started to work on the project the Update 2 of these tools were available, now after a couple of months Update 7 can be downloaded with a lot of improvements.
This being installed you have what you need to start the work. It installs Android SDK and a lot of other dependent stuff you might need when you start working. I will not detail this since this has been done before by others. If you want to read about you have a lot of resources available like :
- the receipts form needed visibility rules of some fields(depending on a category)
### The project
Knowing the above here is a screenshot of how I ended up structuring the project:
{:.center}
{:style="margin:auto"}
In the upper part of the solution we can see some folders where OS specific things are kept. For instance merges folder has android and ios subfolders each of them containing a css folder where resides a file called overrides.css. Of course these files have different content depending on the OS. What is cool with this is that at build time this Visual Studio project knows where to place automatically these files so that specific overrides actually happen in the apps.
The plugins folder is cool too , here will reside the plugins which helps to extend the web application with native app abilities. For instance we can install here a plugin which will be able to access the device camera.
The res folder contains OS specific icons (e.g. rounded icons for IOS and square icons for Android) and screens. Finally in the upper part of the soulution there is a test folder where the unit and integration tests will reside.
The next folder www contains the project itself, the common code base. We see here a bunch of files which for me seems nicely and clearly organized, maybe not for you yet, but hopefully things become more clear with the next screenshot of the index.html where the whole app is running:
Being a SPA everything runs in one place. All the necessary files are included in the header : first the app specific css files, then the css override file which is replaced with OS specific one at build time. Next are included the AngularJS and AnfularJS specific libraries and then comes the platform specific javascript overrides. Until now we have included only libraries and overrides, what comes from now is the base of the app the index.js.
A code snippet from here helps to understand the AngularJS application:
```javascript
(function () {
"use strict";
var travelExpensesApp = angular.module("travelExpensesApp", ["ngRoute", "mgcrea.ngStrap", "ui.utils.masks", "travelExpensesControllers", "travelExpensesApp.services"]);
The AngularJS application is organized using modules. We can think of modules as containers for controllers , services, directives, etc. These modules are reusable and testable. What we can see above is that I have declared an application level module (travelExpensesApp) which depends on other modules .
I have created a separate module for controllers(travelExpensesControllers) and one for services(travelExpensesApp.services). I have also used some libraries as modules like : ngRoute (from angular-route.js), mgCrea.ngStrap (from angular-strap.js) and ui.utils.masks (from angular-input-masks-standalone.min.js). The module declarations links everything together and creates the base of the app.
Beside modules the above screenshot contains the configuration of routing. Using ngRoute lets us use routing which helps us a lot to define a nice and clear structure for the frontend app. AngularJS routing permits a good separation of concerns. GUI resides in html templates defined by the templateUrls and the logic behind is separated in the controller javascript files.
<trng-repeat="trip in trips | orderBy : departure_date : reverse"ng-click="editTravel(trip.id)">
<td>
{{ trip.departure_date | date : 'dd.MM.yyyy'}}
</td>
<td>
{{ trip.departure }}
</td>
<td>
{{ trip.destination }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
```
The above html contains a navbar and a simple list of trips. What we notice from the start are the double bracelets (e.g. '{{ trip.departure }}') and directives starting with "ng" prefix. These are the main ways how the template interacts with the controller :
Above we can see how the TripsControl is defined . To expose something usable in the template we just exetend/add a new property or function to the $scope variable. For example we get the list of trips if we have a successfull answer for a $http request defined by js var tripsRequest.
In a nutshell this is how angular works and used in this POC.
### What else ?
Since the most of the time during this POC I have worked with AngularJS you might wondering if I had to implement something else which is worth mentioning.
