4

2016-03-17 16:30:05 +02:00 · 2016-03-17 16:30:05 +02:00 · ed4ca38457
parent 5eb4b329aa
commit ed4ca38457
4 changed files with 118 additions and 0 deletions
--- a/_posts/2016-03-15-Reisekosten-App-Frontend.md
+++ b/_posts/2016-03-15-Reisekosten-App-Frontend.md
@ -26,3 +26,121 @@ Beside frontend development I mainly do my daily job using Microsoft technologie
 {:.center}
 ![Reisekosten App Frontend - Visual Studio Tools for Apache Cordova]( /images/reisekosten-app/visualstudioupdate7.jpg){:style="margin:auto"}
 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 :
 http://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/
 ### Front-End requirements
 In a few words we needed:
 - a login page
 - a list of trips
 - the possibility to create/edit a trip
 - add/edit receipts assigned to a trip
 - 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}
 ![Reisekosten App Frontend - Visual Studio Tools for Apache Cordova]( /images/reisekosten-app/projectstructure.jpg){: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:  
 ```HTML5
 <!doctype html>
 <html ng-app="travelExpensesApp" ng-csp>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-additions.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet"/>
    <!-- Cordova reference, this is added to the app when it's built. -->
    <link href="css/overrides.css" rel="stylesheet"/>
    <!-- Angular JS -->
    <script src="scripts/frameworks/angular.js"></script>
    <script src="scripts/frameworks/angular-resource.js"></script>
    <script src="scripts/frameworks/angular-route.js"></script>
    <script src="scripts/frameworks/angular-strap.js"></script>
    <script src="scripts/frameworks/angular-strap.tpl.js"></script>
    <script src="scripts/frameworks/angular-input-masks-standalone.min.js"></script>
    <!-- Cordova reference, this is added to the app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <!-- Initialize all the modules -->
    <script src="scripts/index.js"></script>
    <!-- Services -->
    <script src="scripts/services/cordova.js"></script>
    <script src="scripts/services/global.js"></script>
    <script src="scripts/services/httpInterceptor.js"></script>
    <!-- Controllers -->
    <script src="scripts/controllers/loginController.js"></script>
    <script src="scripts/controllers/tripsController.js"></script>
    <script src="scripts/controllers/tripDetailsController.js"></script>
    <script src="scripts/controllers/receiptsController.js"></script>
    <script src="scripts/controllers/receiptDetailsController.js"></script>
 </head>
 <body >
    <div ng-view></div>
 </body>
 </html>
 ```
 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"]);
    angular.module("travelExpensesControllers", []);
    angular.module("travelExpensesApp.services", ["ngResource"]);
    travelExpensesApp.config([
        "$routeProvider",
        function($routeProvider) {
            $routeProvider.
                when("/", {
                    templateUrl: "partials/login.html",
                    controller: "LoginControl"
                }).
                when("/companies/:companyId/employees/:employeeId/trips", {
                    templateUrl: "partials/trips.html",
                    controller: "TripsControl"
                }).
                when("/companies/:companyId/employees/:employeeId/trips/:tripId", {
                    templateUrl: "partials/tripDetails.html",
                    controller: "TripDetailsControl"
                }).
                when("/companies/:companyId/employees/:employeeId/trips/:tripId/receipts/:receiptId", {
                    templateUrl: "partials/receiptDetails.html",
                    controller: "ReceiptDetailsControl"
                }).
                otherwise({
                    redirectTo: "/"
                });
        }
    ]);
 ```
 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.
--- a/images/reisekosten-app/index.jpg
+++ b/images/reisekosten-app/index.jpg
--- a/images/reisekosten-app/indexjs.jpg
+++ b/images/reisekosten-app/indexjs.jpg
--- a/images/reisekosten-app/projectstructure.jpg
+++ b/images/reisekosten-app/projectstructure.jpg