Grand finalé

We decided to do our presentation live instead of video as to show off how our deliveries worked and played together live.
01

When we arrived at Voksenåsen the first day this was our vision:
02

Because of an extremely busy schedule, we hadn’t been able to prepare for the challenge at all, even though we had planned on planning it 🙂 . So the first few hours went into creating a vision and finally we managed to drum out a nice one.

Whithout going into all the details here is the scenario:

We have a busy ScrumMaster who needs to go all over town and attend different standup meetings.
03

His scrum teams are made up of scrum puritanists!

04

Who want to use a physical scrumboard on the wall and move the cards from column to column by hand.

05

That is quite fine, but we also have remote members of the teams (some f.ex who get snowed in at certain airports and can’t attend meetings physically). They also have a need to access the scrumboard digitally.
06

This creates alot of double work and time lost for our beloved ScrumMaster
07

How to combine the two and solve the ScrumMasters problems ?

How about making a solution where… when you move the cards on the scrumboard… they move automatically in the digitized version of the scrumboard as well ?
08

Doing this would meet everyones requirements without spending extra time in or between standups !
09

First, we thought about some hardware solution for the scrumboard, but that is to expensive and unportable.

Then we thought about having QR codes on each column and card, but that needs some high resolution camera gear and alot of image processing. And as we had nothing with us to the challenge, we came up with using something all our PCs have… a microphone…

So the solution is based on voice recognition when moving the cards between columns on the digitized scrumboard. The ScrumMaster or a teammember simply speaks out what he is doing when he moves the card on the wall, and the digitized HTML5 scrumboard captures the keywords and moves the tickets accordingly.
10

In addition, our ScrumMaster needs to be on the move, so the solution is to use bootstrap for responsive design, enabling him to easily access the solution from his mobile phone. There, he can easily get an overview of the scrumboard, of the design template taskboard with visual progress bars and the list of projects he is… well, mastering.

11

He should also be able to get legacy projects from outside SharePoint through OData and browse them in the same way. As this is all about the user experience and ease of use, he should be able to click on a “take me there” button on any given project which will map out the quickest route to the given project location through public REST services, be it with collective transport or by car, factoring in traffic jams etc.
12

This video shows some of the features we showed off in the live demo:

In retrospect, we definitely needed more (some) time to prepare and we also definitely needed some gadgets!! Computas’s LeapMotion would be pixelperfect for our project and we bet on getting us sum-o-dat soon 😀

Thanks for an amazing event everyone!!!
itera iTerroristas.

Giving your consultants an easy way to report potential business in the field

This submission targets the following badges:

  • Native
  • Glossy pixels
  • Doh x2
  • Dirty hacker

How many times have you been in the field, and seen an excellent opportunity to sell some “pharmaceutical”, or maybe seen a mess that needs cleanup (or someone just pissed you off), or someone just needs to connect with your dating service? And of course, you are far away from the office, and all the lines to the family is busy due to the recent “conflict of interest” between the other gentlemen  (f*ing thugs) in New York?

We got the solution for you: The Cosa Nova Field Kit, a windows phone 8 native app.
myleadsdepartmentsnewlead

 

This app lets you login to your domain, get the status of your leads, and then send new leads back to the CRM manager in the Family. You also have a quick status of how many leads are circulating in the system. Its a panorama app, and flows sweet back and forth between pages. The services that we use are all ASYC based, so the user will never be bothered with slow network.

MVVM – almost all the way!

The app is build around the Model-View-ViewModel pattern. At least for the most part, there is one fundamentally flawed with this pattern and Microsoft Xaml: Binding to commands If you want to go about this the “mvvm true way”, you need a ton of boilerplate code, or a library that already supports this feature (like Galasofts MVVM-Light [which is awesome btw]). Again laziness prevailed, and I did the quick and dirty way:

First I wire up the VIewModel to the PhoneApplicationPage, which uses my CoreContainer (an extended ViewLocator)

    public partial class MainView : PhoneApplicationPage
    {
        public MainViewModel ViewModel
        {
            get { return (MainViewModel)DataContext; }
        }
...
}

Now I can bind to all the built in events form the page, and simply “bind” to my other events. Import part here is to make the method you are calling async (otherwise you might end up interfering with the float of the UI)

        private void SendNewLeadButton(object sender, System.Windows.RoutedEventArgs e)
        {
            ViewModel.SendNewLead();
        }

Remember me

When logging in, the app gathers the information stored in Active Directory, so you get a nice view of your account after you log in… [dirty-hack] However, I’m too lazy to type the username every single time, so I made a “remember me” button, and if you combine just a part of your username, and cross that button, the “remember me” feature is actually going to the user list and finds the first username that kinda matches what you entered in the username field. What about security? Well, let’s face it, if you’ve gotten a hold a one of the families devices, you are as good as dead anyway.

loginloggedin_dirty

[easter egg / DOH !] If you enter rick (or sahil) as the username, there is some extra processing involved, which is better described here: http://goo.gl/cYGfA

eastereggreallyegg

Registering a new Lead

The new lead view is really the core of the application. Here you can enter e description, and select what customer it relates to. You can also shoot some pictures and open a map to select the position of the lead. Pictures are stored on the Azure Blob storage,and we just send the urls to the service.

Personalization                                         

Of course, we tend to every mafiosos personal style, and the color of the buttons and subject heading will change according to your phones theme.

yellowgreenpink

 

 

The Killer App

This submission targets the following badges:

  • Appster
  • Doh
  • High five
  • Hipster (TypeScript 0.8.3 preview)

The Cosa Nova has a whole department of assassins. A common problem is disposal of the dead bodies and leftover body bags. To help the killers find an appropriate bridge to throw their victims off, the Cosa Nova IT department  have created a SharePoint-hosted app to simulate the fall of body bags from a bridge, taking into account the physics involved, like size, weight, air density, drag coefficient, object shapes etc.

speed-falling-object

Example of the physics involved: The speed of a falling object, taking air resistance into account.

To ensure reuse of the code, they implement the solution in an object-oriented style. Since the solution should run Client-Side to improve performance, TypeScript is selected as their preferred language. TypeScript provides type safety in JavaScript, and is very well suited for this task.

An example of a TypeScript class for calculating a free fall in air.

export class FreeFall implements IMovement {
    speed: number;
    airDensity: number;
    dt: number;

    constructor(initialSpeed: number, airDensity: number) {
        this.speed = initialSpeed;
        this.airDensity = airDensity;
        this.dt = 0;
    }

    move(shape: IObject, dt: number) {
        var moveTime = dt - this.dt;

        //Init values
        var t = dt / 1000;
        var g = 9.81;
        var m = shape.getMass();
        var A = shape.getCrossSection();
        var C = shape.getDragCoefficient();
        var rho = this.airDensity;

        //Calculate speed
        var v = Math.sqrt((2 * m * g) / (rho * A * C)) * tanh(t * Math.sqrt((g * rho * C * A) / (2 * m)));

        //Move object
        var dy = (v * moveTime) / 10;
        shape.nudge(0, dy);

        console.info("t: " + t);
        console.info("v: " + v);
        console.info("dy: " + dy);
        console.info("moveTime: " + moveTime);
        console.info(" ");

        //Prepare for next loop
        this.dt = dt;
    }
}

We apply the FreeFall class to our victims.

var guiseppe = new Shapes.DeadBody(200, 60, 50, 70000, "/Images/bodybag.png");
scene.addShape(guiseppe);
var guiseppeFalling = new Shapes.FreeFall(0, airDensity);
guiseppe.addMovement(guiseppeFalling);

var luca = new Shapes.DeadBody(300, 60, 50, 100000, "/Images/bodybag.png");
scene.addShape(luca);
var lucaFalling = new Shapes.FreeFall(0, airDensity);
luca.addMovement(lucaFalling);

var emptyBag = new Shapes.DeadBody(400, 60, 50, 100, "/Images/bodybag.png");
scene.addShape(emptyBag);
var emptyBagFalling = new Shapes.FreeFall(0, airDensity);
emptyBag.addMovement(emptyBagFalling);

The simulation is animated in an HTML5 canvas.

Demo – you can try for yourself!

This app is still in beta, so the only variable available to the user at the moment is time, measured in milliseconds. A good value for this would be 1200, as the height from the bridge to the water is approx. 13 meters.

To try it out:

  1. Fill in a time value (ex. 1200)
  2. Press Init (twice, to see the setup)
  3. Press Start simulation

The body bags contain the following:

  • A man of 70kg (70000kg)
  • A man of 100kg (100000g)
  • An empty body bag (100g)

Skill Wizards – The Lynx Inc Deviation System (Main submission)

This is our main delivery, and the video is a demonstration on the complete Deviation System. 

Lynx Inc is large corporation, and they own a lot of offices in many locations. One of their real pains are getting track of deviations. Both registering and following up those have before been an informal process, and both mail, SMS, phone and personal contact have been used a lot. The management does not have any tools for following up the deviations.

The Lynx Inc Deviation System aims to solve some of these pains, and consists of several integrated components.

  • Windows 8 App with camera and geolocation for registering of events
  • Mobile Webapp for browsing deviations on mobile and desktop.
  • Dashboard in SharePoint 2013 for showing latest deviations, deviations per responsible – plotting all deviations in Bing Maps
  • Business Intelligence in SharePoint 2013 PowerView where the management can do reporting
  • SharePoint App utilizing Bing Maps which can be installed on another farm, binding SharePoint On Premises and Office 365 Together in a Hybrid solution

Windows 8 Application – Deviation Registration

ScreenShot1674

Mobile Webapplication – Browse Deviations

mobile webapp2

Dashboards in SharePoint

dashboard

Business Intelligence – SharePoint 2013 PowerView

powerview

SharePoint App utilizing Bing Maps

app

 

Craftmansship

Some notes about the craftmansship in our solution.

We’ve designed a few custom API’s that work well, and put quite a bit of effort into making it right. Here’s the code files for sending notifications. Notice amongst other things the custom exception types and code structure:

Untitled

 

We’re using our own attribute-driven API for data access, using factory methods for communicationg with SQL Azure. Example:

Another example; exerpt from custom task scheduling engine:

 

 

 

 

Netflix app now with movie trailer

The netflix app has now gotten some extra features. You can now see the trailer inside the app!

This is done by searching on youtube based on the movie title, then showing it by using the swfobject.js.

First do the search

 self.getYoutube = function () {
        // search url for youtube
        var queryURL = "http://gdata.youtube.com/feeds/api/videos?v=2&alt=json&q=" + self.name + "&callback=showVideo&max-results=3";
        $.ajax({
            dataType: 'jsonp',
            url: queryURL,
            jsonpCallback: 'showVideo',
            success: self.showVideo,
            timeout: 60000
        });

    };

Then handle the response

self.showVideo = function (data) {
        var feed = data.feed;
        var entries = feed.entry || [];
        //load the first result        
        if (entries.length > 0) {
            loadVideo(entries[0].media$group.media$content[0].url, false);
        }

    };

And load the player

function loadVideo(playerUrl, autoplay) {
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
        (autoplay ? 1 : 0), 'player', '290', '250', '9.0.0', false,
        false, { allowfullscreen: 'true' });
}

Cool? Yeah!!! It’s a killer app, or at least worth another appster badge

netflixwithtrailer

Deviation Dashboard

This submission targets the following badges:

  • Glossy Pixels

When Dexter wants a full overview of over Lynx inc. deviations, he goes to the Deviations Dashbord. This dashboard is build up by using reports, KPIs and incomming list items. Technologies used are Silverlight, Bing Maps, KPI list, PowerPivot and PowerView.

This video shows the solution:

Lynx Inc Employee Finder

The consultants at Lynx Inc are having a hard time locate their co-workers. To solve this problem, CEO Dexter decided to create an awesome app that displays all their employees current positions in a map. The app uses the Google Maps API to display map information.

The Application

Using the Javascript geolocation service, a SharePoint-list containing all users are automatically updated with the current user position. To update your position, just click the “Update my position” button and your browser will request access to your current position:

Request

Since users are required to click this button to update their position, employees can decide to leave their current position secret, for whatever reasons they may have.

When you hover over a position-pin, the employee name is automatically displayed:

An user at the Stavanger office

The app is deployed to Office 365 from Visual Studio 2012.

The magic behind this app is displayed below: