Michael Könings Blog

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 7)

admin — Sat, 04 Jun 2011 15:14:00 GMT

Im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

Im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

Im dritten Teil haben wir angeschaut, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

Im vierten Teil haben wir mit einer ASP.NET MVC Seite die OData-Daten als Webservice aufgerufen und als kleine Fotos auf eine Bing Map gezeichnet.

Im fünften Teil werden haben wir mit AJAX CRUD Operationen gegen unseren Azure OData Service ausgeführt.

Im sechsten Teil haben wir die Spatial Features von SQL Server verwendet, um Entfernungen zwischen uns und unseren Kollegen zu berechnen.

Endlich komme ich dazu, den siebten Teil dieser kleinen Serie zu schreiben. Wir wollen heute die gleiche Anwendung, die wir schon in den vorangegangenen Beiträgen als ASP.NET MVC Lösung realisiert haben, auf das Windows Phone 7 bringen! Eigentlich heißt es ja nur noch “Windows Phone”, gemeint ist aber die neue Generation, die Silverlight und XNA unterstützt, nicht die “alte” Plattform (die nach wie vor von MS unterstützt wird) die bis Version 6.5 hochgezählt wurde.

Diese Beispiel-App hat massgeblich mein großartiger Trivadis-Kollege Thomas Huber geschrieben, der auch der Autor von 2 hervorragenden Büchern über WPF und Silverlight ist!

ein Hinweis: Diese App wird es sicher nicht in den Zune Marketplace schaffen, dazu fehlen ein paar wichtige Dinge. Vor allem eine verlässliche Security Infrastruktur. Hier bieten sich die Azure AppFabric Komponenten an, die es ermöglichen einen Service mit den benötigten security features auszustatten.

Diese App soll in erster Linie Ihre Fantasie anregen, um dann vielleicht irgendwann eine eigene App Idee zu verwirklichen. In Zukunft wird MS (hoffentlich) Business Applikationen für geschlossene Benutzerkreise für das Windows Phone ermöglichen. Gerüchte im Umfeld des großen Mango Updates (angekündigt für Q4 2011) lassen darauf hoffen. Der Marketplace Deployment Mechanismus muss also um die Fähigkeit erweitert werden, eine App z.B. nur innerhalb einer Firma zu verteilen. Erst dann macht eine solche App richtigen Sinn.

Hier ein paar Screenshots von unserer Beispiel-App:

Hier kann man Daten eingeben, für Ort und Zeit des geplanten Mittagessens und anschliessend an den Server übertragen.

Aus dem Menü kann man die Kartenansicht und die Telefonliste auswählen:

interaktive Kartenansicht mit den Bildchen der Kollegen

Telefonliste der Kollegen in der Nähe.

Was wird benötigt ?

Alles was man für die Entwicklung einer Windows Phone App braucht kann bei MSDN kostenlos heruntergeladen werden.

Das beinhaltet :

Visual Studio 2010 Express for Windows Phone
Windows Phone Emulator Resources
Silverlight 4 Tools für Visual Studio
XNA Game Studio 4.0
Microsoft Expression Blend for Windows Phone

Wir benötigen für unsere App “nur” Visual Studio und den Emulator. Wer nicht mit SQL Azure arbeiten will, kann selbstverständlich den Datenzugriff (SQL Server, OData Web Service) auch lokal betreiben. dazu wird dann noch SQL Server Express benötigt, ebenfalls kostenlos bei MS erhältlich.

Für den OData Zugriff brauchen wir noch das OData Client API für Windows Phone. Das gibt es auf Codeplex, ebenfalls gratis. (Open Source Projekt)

Und dann ?

Ich werde hier nicht im Einzelnen erklären, wie man Window Phone Apps programmiert, dazu gibt es jede Menge guter Informationen im Internet (angefangen bei MSDN) sowie hervorragende Bücher. In diesem Beitrag wollen wir bei unserem Thema bleiben und eine App erzeugen, die OData Services verwendet, und diese mit einem Bing Map Control visualisiert.

Wir wollen im Code in der gewohnt bequemen Weise auf unsere OData Services zugreifen. Dazu brauchen wir ein Tool, das uns für die bereitgestellten Web Services eine C# Client Library generiert. So können wir komfortabel auf Objektebene programmieren, ohne uns über die zu Grunde liegenden Protokolle den Kopf zerbrechen zu müssen. Dafür nehmen wir das command line tool datasvcutil, das in diesem Zip enthalten ist.

Bei der ersten Anwendung hatte ich eine Menge Spass, da die Dokumentation nicht sehr eindeutig ist: Für unsere Zwecke muss der Parameter Version auf 2.0 gesetzt sein:

datasvcutil /uri:http://localhost:{port}/WcfDS.svc /out:.\TVDLunchEntities.cs /DataServiceCollection /Version:2.0

als Ergebnis wird eine C# Klasse generiert, die wir in unserem Windows Phone Projekt einbinden. Leider werden dabei unsere 2 Stored Procedures FindColleguesNearMe und FindColleguesNearPoint nicht berücksichtigt, nur der Datentyp ColleguesNearMe wird behandelt. Wir können diese aber leicht über eine weitere Service Referenz einbinden.

Dazu fügen wir einen neuen WCF Data Service in unser Web Projekt ein.

public class TVDLunchAPI : ITVDLunchAPI
    {
        public List<ColleguesNearMe> FindColleguesNearMe(string nickName, string howFar)
        {
            TVDLunchEntities tvde = new TVDLunchEntities();
            return tvde.FindColleguesNearMe(nickName, long.Parse(howFar)).ToList();
        }

        public List<ColleguesNearMe> FindColleguesNearPoint(string point, string howFar, string nickName)
        {
            TVDLunchEntities tvde = new TVDLunchEntities();
            return tvde.FindColleguesNearPoint(point, long.Parse(howFar), nickName).ToList();
        }
    }

der Code sieht zugegebenermassen ein bisschen “smelly” aus: der Grund ist, dass ich erst durch try und error lernen musste, das Web Services am besten List<> Objekte exponieren und String Parameter übernehmen. das können Sie sicher besser!

Jetzt haben wir alle benötigten Bausteine zusammen und können die App zusammenfügen:

Best practice: MVVM pattern

Wir kapseln die Kommunikation mit dem OData Service in einer Klasse. die Logik für die asynchronen Zugriffe auf die Daten wird dadurch zentral abgehandelt, und bläht nicht den eigentlichen Code der App unnötig auf.

Ich habe hier 1:1 das Code Beispiel von der Beispiel Applikation des WP Odata API Projekts übernommen. Dort wird mit Hilfe der allseits bekannten Northwind Datenbank der OData Zugriff gezeigt. ODataClient_WinPhone7SampleApp.zip . Sehr Empfehlenswert!

In unserem Falle geht es nicht um Customer sondern um TVDLunch, sonst ist alles gleich:

using System;
using System.ComponentModel;
using System.Data.Services.Client;
using System.Windows;
using TVDLunchPhone.TVDLunchEntitiesReference;


namespace TVDLunchPhone
{
    public class MainViewModel : INotifyPropertyChanged
    {
        static readonly Uri serviceUri = new Uri("http://localhost:57811/WcfDS.svc");
        static readonly Uri TVDLunchsUri = new Uri("/TVDLunch", UriKind.Relative);

        DataServiceCollection<TVDLunchEntitiesReference.TVDLunch> tVDLunchs;

        public TVDLunchEntities Context { get; private set; }

        public DataServiceCollection<TVDLunch> TVDLunchs
        {
            get { return this.tVDLunchs; }

            private set
            {
                this.tVDLunchs = value;

                this.tVDLunchs.LoadCompleted += this.OnTVDLunchsLoaded;
                this.tVDLunchs.CollectionChanged += (o, e) => { this.NotifyPropertyChanged("TVDLunchsTitle"); };

                this.NotifyPropertyChanged("TVDLunchs");
                this.NotifyPropertyChanged("TVDLunchsTitle");
            }
        }

…

Das MainViewModel verankern wir an zentraler Stelle (App.xaml.cs), indem wir es als statisches member an das App Object hängen.

static MainViewModel viewModel = null;

        /// <summary>
        /// A static ViewModel used by the views to bind against.
        /// </summary>
        /// <returns>The MainViewModel object.</returns>
        public static MainViewModel ViewModel
        {
            get
            {
                // Delay creation of the view model until necessary
                if (viewModel == null)
                    viewModel = new MainViewModel();

                return viewModel;
            }
        }

Interessant ist auch noch der Code für die App Events Application_Activated und Application_Deactivated: wenn die App auf dem Phone verlassen wird (durch Drücken eines der Hardware Buttons), und danach mit dem “Zurück” Button wieder aktiviert wird, kann man einen (teuren und möglicherweise langsamen) Aufruf des Services sparen, in dem man eine Version der Daten im State Cache des Phones speichert und bei Bedarf reaktiviert. Wen das interessiert: auch hier ist der Code aus dem genannten Beispiel-Projekt übernommen.

Wie funktioniert der Datenzugriff ?

Alle Zugriffe geschehen asynchron. Es gibt also immer eine Aktion die Daten anfordern, löschen, einfügen oder aktualisieren möchte und dem Service Context diesen Wunsch mitteilt. Ob es funktioniert hat, erfährt man erst in einer zuvor angegebenen Callback Methode, nur dort kann auf das Ergebnis der Aktion Bezug genommen werden.

Hier als Beispiel die Methode für das Speichern der eigenen Lokation:

private void btnSetLocation_Click(object sender, RoutedEventArgs e)
{
    
    var center = bingMap.Center;

    // Update database
    TVDLunchEntities ctx = App.ViewModel.Context;

    var mangiare = App.ViewModel.TVDLunchs;


    var myLunch = (from l in mangiare
                   where l.Nickname == _loggedInNick
                   select l).FirstOrDefault();

    if (myLunch == null) // insert
    {
        myLunch = TVDLunch.CreateTVDLunch(-1, _loggedInNick, DateTime.Now);
        ctx.AddToTVDLunch(myLunch);
    }
    else // update
    {
        ctx.UpdateObject(myLunch);
    }

    // Set the new GeoPoint
    myLunch.GeoPoint = CoordinateHelper.GeoPointFromLocation(center);

    // Set the lunchText
    if (_lunchText != null)
        myLunch.LocationText = _lunchText;
    _lunchText = myLunch.LocationText;

        ctx.BeginSaveChanges(OnSaveCompleted, ctx);

    
}

jetzt folgt die Callback Methode, in der wir die aktualisierten Daten verwenden können:


private void OnSaveCompleted(IAsyncResult result)
{
    try
    {
        var ctx = result.AsyncState as TVDLunchEntities;
        ctx.EndSaveChanges(result);

        RefreshAllLunchesInCard();
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

Ab hier ist die Applikation eigentlich “straight forward”, die visuellen Controls (Silverlight) “sehen” die Daten als normale Collections. Wir können das Silverlight Data Binding verwenden, um z.B. eine Liste zu füllen (z.B die Telefonliste) , oder aber auch Linq, um einen bestimmten TVDLunch Eintrag zu finden. Dazu verfeinern wir das einfache Daten Objekt ein bisschen, um das Binding noch einfacher zu machen:

public class ImageTrivadian
    {
        public ImageTrivadian(ColleguesNearMe trivadian)
        {
            Trivadian = trivadian;
            ImagePath = string.Format("http://yourimageserver.com/ma_photos/{0}.jpg", trivadian.Nickname);
            Distance = Math.Round(((double)trivadian.Distance / 1000), 1).ToString() + " km entfernt";
        }

        public ColleguesNearMe Trivadian { get; set; }
        public string ImagePath { get; set; }
        public string Distance { get; set; }
    }

Jetzt können wir es leicht an eine List Control binden:

<ListBox x:Name="lsbCollegues">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding ImagePath}" Width="50" Height="50" Margin="5"/>
                            <TextBlock Text="{Binding Trivadian.Nickname}"/>
                            <TextBlock Text=" ("/>
                            <TextBlock Text="{Binding Distance}"/>
                            <TextBlock Text=")"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Die Daten werden geholt, wenn der Standort des Benutzers gesetzt ist:

private void LoadColleguesNearMyLunch()
       {
           if (_myLunchLocation == null)
           {
               MessageBox.Show("Bitte erst die Location in der Karte setzen");
               return;
           }

           string pointString = CoordinateHelper.GeoPointFromLocation(_myLunchLocation);

           lsbCollegues.Items.Clear();
           TVDLunchAPIClient client = new TVDLunchAPIClient();
           client.FindColleguesNearPointCompleted += (s, e) =>
               {
                   foreach (LunchApi.ColleguesNearMe trivadianer in e.Result)
                   {
                       lsbCollegues.Items.Add(new ImageTrivadian(trivadianer));
                   }
               };
           client.FindColleguesNearPointAsync(pointString, "10000", _loggedInNick);
       }

hier nochmals die Listenansicht. Der “Call” Button startet direkt einen Anruf:

private void ButtonCall_Click(object sender, RoutedEventArgs e)
        {
            var trivadianer = lsbCollegues.SelectedItem as ImageTrivadian;
            if (trivadianer == null)
            {
                MessageBox.Show("Please select a person from the list");
                return;
            }
            Microsoft.Phone.Tasks.PhoneCallTask call = new Microsoft.Phone.Tasks.PhoneCallTask();
            call.PhoneNumber = trivadianer.Trivadian.Phone;
            call.Show();
        }

ok, das soll für heute mal reichen, im nächsten Beitrag werden wir das Bing Maps Control anschauen und ein Custom PushPin Object erzeugen. Bis dahin freue ich mich über Feedback!

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 6)

admin — Mon, 21 Mar 2011 16:00:00 GMT

Im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

Im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

Im dritten Teil haben wir angeschaut, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

Im vierten Teil haben wir mit einer ASP.NET MVC Seite die OData-Daten als Webservice aufgerufen und als kleine Fotos auf eine Bing Map gezeichnet.

Im fünften Teil werden haben wir mit AJAX CRUD Operationen gegen unseren Azure OData Service ausgeführt.

Jetzt wollen wir zeigen, wie wir in der Datenbank Entfernungen zwischen den Kollegen berechnen können!

Dazu verwenden wir eine Tabelle mit einer Spalte vom Typ “geography”:

In diesem Feld können wir eine Positions-Infomation (einen Punkt) speichern, die sich jeweils aus der Latitude und Longitude Information zusammensetzt. Dieser Datentyp wird binär gespeichert, deshalb habe ich zur Verdeutlichung noch das Feld GeoPoint als Varchar(255) angelegt, das eine textuelle Entsprechung des Wertes enthält.

Beispiel:

GeoLocation   und GeoPoint:
0xE6100000010CA31FB98C53B7474091976E726B1F2140    POINT(9.552612304687494 49.01265386395501)
0xE6100000010CC0791DC832B7474004000060E81E2140    POINT(8.562847139546658, 47.45562644775183)

Woher kommen die Werte ?

Wir lassen das Bing Maps Control diese Arbeit erledigen. Vom Control bekommen wir eine genaue Geo-Position eines Punktes auf der Karte. Wir erreichen das, indem wir das Klick-Event abfangen und die Position auslesen (siehe Teil 4) .

Die beiden Dezimal-Werte bauen wir zu einen String zusammen, mit dem oben gezeigten Format.

Diesen Punkt müssen wir jetzt noch in einen geography Wert umwandeln, das geht am besten über eine Trigger auf der TVDLunch Tabelle:

CREATE TRIGGER [dbo].[TVDLunch_Ins_Upd] 
   ON  [dbo].[TVDLunch] 
   AFTER INSERT,UPDATE
AS 
BEGIN
    SET NOCOUNT ON;

    Update dbo.TVDLunch
    set geoLocation = geography::STGeomFromText(coalesce(i.GeoPoint,t.GeoPoint), 4326)
    from dbo.TVDLunch t inner join inserted as i
    on t.id = i.Id;
     

END

Hier sehen wir jetzt die Spatial-Funktionen von SQL Server im Einsatz. Die Funktion geography::STGeomFromText wandelt unseren String im Feld GeoPoint in einen geography Wert um!

So können wir jetzt auch weitere Spatial-Funktionen verwenden, um die Distanz zwischen den Kollegen auszurechnen. Dafür habe ich eine Stored Procedure erstellt, die alle Kollegen in der Nähe eines einzelnen Kollegen auflistet:

CREATE PROCEDURE [dbo].[FindColleguesNearMe]
    @NickName Varchar(50) , 
    @HowFar bigint = 10000
AS
BEGIN
    SET NOCOUNT ON;

    Declare @Center geography;
    Select @center = GeoLocation from dbo.TVDLunch where Nickname = @NickName;
    
     

select  @center.STDistance(a.geoLocation) as Distance, 
a.Nickname, a.LunchTime, a.LocationText, 
a.GeoLocation.STAsText() as geoPoint
from dbo.TVDLunch a 
where @center.STDistance(a.geoLocation) <= @HowFar
and Nickname <> @NickName

END

Diese SP selektiert alle hungrigen Kollegen in der Nähe, im Umkreis von 10000 Metern, falls nichts anderes als Distanz übergeben wurde.

Hierzu verwenden wir die Spatial-Funktion STDistance(a.geoLocation), die direkt vom Datentyp geography bereitgestellt wird.

Die Stored Procedure wird im OData Web-Service veröffentlicht, so das der Ajax-Client (und alle anderen Odata Clients) diese komfortabel aufrufen kann.

So können wir die Positionen “live” im Browser anzeigen, z. B. wenn der Anwender seine eigene Position verändert.

Der Mitarbeiter kann dann direkt mit seinen Kollegen in der Nähe Kontakt aufnehmen und braucht nicht alleine zu essen!

Mission accomplished!

hier noch der Code für den ADO.NET Data Service:

[WebGet]
        public IQueryable<ColleguesNearMe> FindColleguesNearMe(string nickName, string howFar)
        {
            return this.CurrentDataSource.FindColleguesNearMe(nickName, long.Parse(howFar)).AsQueryable();
          
        }

jetzt haben wir alle Bausteine zusammen, um eine Location-based Cloud-Applikation zu bauen.

Als nächstes wollen wir das Frontend auf dem Windows Phone 7 programmieren.

Hier wird uns wieder das Bing Map Control helfen, diesmal als Silverlight Ausfühung.

Die Geo-Location Information des Anwenders bekommen wir direkt von Telefon, das mit seinem GPS Sensor eine sehr genaue Ortsbestimmung erlaubt.

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 5)

admin — Fri, 11 Mar 2011 16:14:55 GMT

im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

Im dritten Teil haben wir angeschaut, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

im vierten Teil haben wir mit einer ASP.NET MVC Seite die OData-Daten als Webservice aufgerufen und als kleine Photos auf eine Bing Map gezeichnet.

In diesem Beitrag wollen wir aus der ASP.NET MVC Web-Seite heraus die Daten unseres Azure-basierten Odata Services bearbeiten (CRUD Operiationen).

Dazu werden wir nicht den klassischen MVC-Controller/Model Weg gehen ( das würde natürlich auch funktionieren). Ich möchte vielmehr zeigen, wie wir die OData Schnittstelle per Ajax ansprechen können. So wird der Mashup-Charakter unserer Applikation mehr betont: eine HTML Seite dient als Hülle für eine AJAX Anwendung, die Daten aus verschiedenen Cloud-Datenquellen kombiniert: hier sind es Azure und Bing Maps.

Wir könnten unsere Applikation noch mit weiteren öffentlichen APIs erweitern , um z.B. Restaurants in der Nähe (z.B. Foursquare API) anzuzeigen, Schnäppchen zu machen (z.B. Groupon API ), oder um uns zu den Social Networks (Facebook Places, Google Latitude) zu verbinden. Alles was wir brauchen sind Longitude und Latitude Werte, damit können wir auf der Bing Map die entsprechende Information in unserer Nähe einzeichnen ( siehe letzter Beitrag) . Wenn man als Geo-Information “nur” eine postalische Adresse zur Verfügung hat, kann man über das Bing Services REST API dazu die Longitude/Latitude-Daten abfragen!

z.B. die Adresse von Microsoft in Redmond:

http://dev.virtualearth.net/REST/v1/Locations/US/WA/98052/Redmond/1 Microsoft Way?o=xml&key=BingMapsKey

Noch einfacher geht es direkt über das Map Control mit der .find(Suchadresse) Methode.

CRUD mit OData und Ajax Data-Binding

Als alter WinForms Programmierer träume ich immer noch den Traum, dass so etwas Banales wie Data-Binding eigentlich rein deklarativ, also ohne zusätzlichen, selbstgeschriebenen Code funktionieren sollte. Dies gilt ( bei einfachen Anwendungen) soweit auch bei .NET Client Programmierung, aber wie sieht es damit bei Web-Applikationen aus ?

Es gibt(gab?) aus dem Hause Microsoft eine Lösung dafür, die aber wohl eher als experimentell zu bezeichnen ist:

Data Binding in ASP.NET AJAX 4.0

Dino Esposito hat hier einen einführenden Artikel geschrieben, der mittlerweile überarbeitet wurde. Ich konnte leider nicht viel weiterführendes Material finden.

Das hat zum Einen damit zu tun, dass das damalige Produkt “ADO.NET Data Services” jetzt als “freies” Projekt OData auf OData.org lebt, und MS der jungen Technologie einige Libraries als “Mitgift” spendiert hat. Dabei haben sich auch die Namespaces entsprechend geändert! Die ehemalige ADO.NET Ajax Client Library ist jetzt bei den OData APIs zu finden.

Möglicherweise ist diese Technologie (ASP.NET Ajax Data Binding) aber auch an einem Punkt angekommen, wo es sich mit dem großen Erfolg von JQuery überholt hat. Im JQuery Umfeld wird an dem Data Link Plugin gearbeitet (Microsoft trägt auch zu dem Projekt bei). Diese Library ist generell für Binding zu verwenden (ähnlich dem Silverlight Property Binding), ist aber nicht unbedingt geeignet, um schnell eine Datenquelle an ein paar Input Controls zu binden. Deshalb hatte ich mich bei unserem Beispiel für die OData AJAX Variante entschieden. Der Zugriff auf OData Webservices funktioniert einwandfrei und das Databinding kann zumindest beispielhaft angewendet werden.

Wie funktioniert das ?

Zunächst müssen die AJAX Script Libraries referenziert werden:

<script src="../../Scripts/Start.debug.js" type="text/javascript"></script>

jetzt brauchen wir den initialen Aufruf der Library (lädt benötigte Komponenten nach) :

Sys.require([Sys.components.dataView, Sys.components.openDataContext]);

und wenn alles geladen ist:

Sys.onReady(function () {
            dataContext = Sys.create.openDataContext(
               {
                   serviceUri: "/WcfDS.svc",
                   mergeOption: Sys.Data.MergeOption.appendOnly
               });

            dataContext.initialize();
            oDataProxy = new Sys.Data.OpenDataServiceProxy('/WcfDS.svc');
            GetMap();
            AddMyLayer(VEDataType.GeoRSS);

        });

wir initialisieren ein dataContext Objekt auf unseren OData Service.

Dazu noch ein OpenDataServiceProxy, das brauchen wir für eine separate Abfrage (später im Text).

Aber wo ist das deklarative Data-Binding ?

Hier, bitteschön:

<div id='dataform' style="margin-left: 15px; float:left">
       
        <table sys:attach="dataview" id="Editor" class="sys-template" dataview:dataprovider="{{ dataContext }}"
            dataview:autofetch="true"
            dataview:onfetchsucceeded="{{ onFetchSucceededEditor }}"
            dataview:fetchoperation="TVDLunch?%24filter=Nickname%20eq%20'<%: Page.User.Identity.Name %>'">
            <tr>
                <td>
                    your short name:</td>
                <td>
                    <%= Html.SysTextBox("NickName", "{binding Nickname, mode=twoWay}")%>
                </td>
            </tr>
            <tr>
                <td>
                    Id
                </td>
                <td>
                    <%= Html.SysTextBox("Id", "{binding Id, mode=twoWay}")%>
                </td>
            </tr>
   … usw.

Man kann erkennen, dass die Zellen der HTML Tabelle direkt an Felder aus der Datenquelle verknüpft werden.

Die Datenquelle (dataContext) ist ein Objekt, das wir in derSys. onReady Funktion initialisiert haben.

Es kennt die URI zu Web-Service, deshalb kann der String im Property dataview:fetchoperation als Abfrage direkt ausgeführt werden. Hier rufen wir die TVDLunchTabelle ab, mit dem Filter auf dem Nickname des angemeldeten Benutzers. Alle Input Felder in der HTML-Table sind an die Felder der Tabelle gebunden. Die Abfrage wird automatisch beim Laden der Seite ausgeführt ( autofetch = true) .

Ganz einfach, oder ?

Nun ja, den “bösen” Code habe ich noch nicht gezeigt. Alle “Sonder”-Fälle müssen selbst behandelt werden, z.B. wenn kein Datensatz gefunden wurde…

Und wie geht Insert, Update und Delete ?

Eigentlich ganz einfach.

function SaveLoc() {
            var pendingChanges = dataContext.get_hasChanges();
            if (pendingChanges !== true) {
                alert("No pending changes to save.");
                return;
            }

            var changes = dataContext.get_changes();
           
            if (confirm(buffer))
                dataContext.saveChanges(saveSucceeded, null, dataContext);


        }

        function DeleteLoc() {

            dv = $find("Editor");
            var data = dv.get_data()[0];

            dataContext.removeEntity(data);
            DeleteShape();
            dataContext.saveChanges(deleteSucceeded, null, dataContext);
           
         }

Es gibt noch ein bisschen mehr Code, z.B. um ein neues Datenobjekt zu erzeugen und dem dataContext anzuhängen (Insert). Außerdem muss die Bing Map nach jeder Aktion synchronisiert werden um die eigene Position anzuzeigen. Als alter Spaghetti-Programmierer hatte ich meine liebe Mühe mit dem asynchronen Programmiermodell ( was kommt nach was ? Welcher Code wird wann ausgeführt?) Das Ergebnis meiner Bemühungen zeige ich hier lieber nicht :-)

Wer sich ernsthaft dafür interessiert, möge mir bitte schreiben (Kontakt-Link im Menü).

Für die Liste der Kollegen in der Nähe habe ich das gleiche Prinzip angewendet:

Eine HTML Tabelle (der Body) ist an den dataContext gebunden.

…

 <tbody sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}"
                    id="tbodycollegues">
                    <tr>
                        <td>
                            {{ Nickname }}
                        </td>
                        <td>
                            {{ LocationText }}
                        </td>
                        <td>
                            {{ Distance }}
                        </td>
                        <td>
                           <a href="mailto: {{ Email }}"> {{ Email }} </a>
                        </td>
                        <td>
                            {{ Phone }}
                        </td>
                    </tr>
                </tbody>

…

Beim erfolgreichen Ausführen der ersten Query (siehe oben) wird im Callback die Query für diese Tabelle ausgeführt.

function UpdateColleguesListPoint(LatLong) {

       var pointstring = LatLongToPoint(LatLong);

       var querystring = "FindColleguesNearPoint?Point="

           + "'" + pointstring + "'" + "&howFar='10000'"

           + "&nickName='<%: Page.User.Identity.Name %>'";
       oDataProxy.query(querystring, querySuceededCallback, queryFailedCallback);
   }


function querySuceededCallback(result, context, operation) {

       if (result.toString() == "")
           $get("infotext").innerHTML = "no collegues found within 10km!";
       else
           $get("infotext").innerHTML = result.length.toString() + " collegues found within 10km!";

       $find("tbodycollegues").set_data(result);

   }

Hier sehen wir wieder einen Querystring, diesmal für eine Stored Procedure:

FindColleguesNearPoint?Point='POINT(7.5888276100158745 47.5491527235811)'&howFar='10000'

Wie kann unsere OData SP mit diesen Angaben die Distanz zum angemeldeten Benutzer berechnen ?

das Zauberwort heißt Spatial Data und ist ein Feature von SQL Server. Im nächsten Beitrag sehen wir wie das funktioniert!

Danach werden wir die ganze Funktionalität (Bing Map Darstellung, OData CRUD) entsprechend auf dem Windows Phone 7 implementieren.

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 4)

admin — Fri, 11 Mar 2011 15:15:00 GMT

im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

Im dritten Teil haben wir angeschaut, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

In diesen Beitrag werden wir die auf SQL Azure gespeicherten Daten in einer ASP.NET MVC Applikation anzeigen und editieren. Außerdem werden wir das Bing Maps Ajax Control verwenden, um die Lokations-Daten der Kollegen auf der Karte anzuzeigen! Keine Angst, das geht alles ganz einfach, die APIs für Bing Maps sind gut dokumentiert und können hier live ausprobiert werden.

Unsere kleine Web Applikation soll natürlich auch auf Azure laufen, dafür können wir das Web Projekt (für die ADO.NET Data Services) aus dem letzten Beitrag gut weiterverwenden.

Wir brauchen nur die Basisfunktionalität aus ASP.NET MVC. Wir werden genau eine Seite erstellen, die gesamte Datenverarbeitung im Zusammenspiel mit dem Service machen wir per Ajax.

Als Goodie können wir die Standard-Zugriffsverwaltung von ASP.NET verwenden, dadurch können wir den Zugriff auf Kollegen beschränken und wissen innerhalb der Applikation immer wer angemeldet ist.

(Für eine “echte” Unternehmensanwendung wäre natürlich eine Integration mit Active Directory sinnvoll. Das ist mit Hilfe von Azure Appfabric Access Control technisch relativ einfach zu realisieren.)

Hier ist ein Screenshot, der zeigt, wie die fertige Applikation aussehen soll:

Der angemeldete Benutzer sieht eine Karte, auf der alle Kollegen in seiner Nähe in Form von kleinen Images abgebildet sind.

dazu kann er seine aktuelle Position eingehen (Rechtsklick auf die karte) , und ein paar Infos eingeben, z.B. Uhrzeit und Restaurantvorschläge, etc..

Wie funktioniert das ?

Bing Maps stellt ein Ajax Control zur Verfügung, dass mit wenigen Zeilen Code für eigene Anwendungen verwendet werden kann.

das Control ist vollständig in Javascript realisiert, es gibt keine ASP.NET Servercontrols oder ähnliches. es ist wird über eine Script-Referenz in unsere HTML Seite integriert.

    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>

Für die Darstellung in der Webseite wird das Control an ein ganz normales <div> gebunden, unseres heisst 'myMap'.

Das geschieht per Javascript, siehe Function “GetMap()” weiter unten.

Wie passen wir das Bing Maps Control für unsere Applikation an?

In unseren Beispiel möchten wir “Pushpins” auf der Karte abbilden, jeweils an den Koordinaten die der Mitarbeiter als seinen Standort angeklickt hat. Es sollen kleine Icons mit dem Foto des Mitarbeiters angezeigt werden, damit man gleich sieht, mit wem man es zu tun hat !

Dazu benutzen wir 2 Fähigkeiten de Controls:

1. Die Koordinaten eines Mausklicks auf der Karte auszulesen

2. eine Liste von Objekten auf der Karte anzuzeigen ( per GeoRSS)

hierfür brauchen wir ein bisschen Javascript, um mit dem API des Bing Maps Controls zu interagieren.

hier fängt wie immer alles an (wir verwenden die ASP.NET Ajax Library) :

Sys.onReady(function () {
           
           GetMap();
           AddMyLayer(VEDataType.GeoRSS);
        
       });

jetzt wird das Map Control geladen und auf eine beliebige Startposition (Mittelpunkt der Karte) initialisiert.

function GetMap() {
           map = new VEMap('myMap');
           map.LoadMap(new VELatLong(47.4312372344898, 8.5603666305542063), 12);
           map.AttachEvent("onmousedown", MouseHandler);
       }

diese Funktion liest einen GeoRSS feed mit den Koordinaten unserer Kollegen, und setzt sie als Mini-Bilder auf die Karte:

var layer = new VEShapeLayer();

function AddMyLayer(type) {

           layer .DeleteAllShapes();

           layer .SetClusteringConfiguration(VEClusteringType.Grid); // determines how clusters of pushpins are displayed
            var veLayerSpec = new VEShapeSourceSpecification(type, 'GeoFeed.svc', l);
            map.ImportShapeLayerData(veLayerSpec, onFeedLoad);

        }

Hinter dem Geofeed steckt eine Stored Procedure die wir über die ADO.NET Data Services exponieren.

Den T_SQL Code sowie die Deklaration des Services zeige ich im nächsten Beitrag.

das Map Control zentriert die Karte danach automatisch, so dass alle Punkte der Liste sichtbar sind.

wenn der GeoRSS Feed geladen wurde, wird diese callback function aufgerufen, welche die Icons platziert:

function onFeedLoad(feed) {
            //alert('RSS or Collection loaded. There are ' + feed.GetShapeCount() + ' items in this list.');
            var icon_org = '<img src="https://Picturesite.com/ma_photos/$.jpg" alt="£" width=25 />';
            var icon = icon_org;
            for (var i = 0; i < l.GetShapeCount(); i++) {
                var shape = layer.GetShapeByIndex(i);
                icon = icon.replace('$', shape.GetTitle());
                icon = icon.replace('£', shape.GetDescription());
                shape.SetCustomIcon(icon);
                icon = icon_org;
            }
        }

jetzt haben wir alle Mitarbeiter als kleine Mini-Bildchen auf der Karte platziert.

Als nächstes wollen wir unsere eigene Position festlegen:

Der Mousehandler gibt uns (beim Rechtsklick) die aktuelle Position als Latitude/Longitude Kombination.

Wir setzen dann ein Pushpin (Shape), das auf der Karte anzeigt, wo wir selbst uns befinden.

function MouseHandler(e) {

     if (e.rightMouseButton) {
         pixel = new VEPixel(e.mapX, e.mapY);

         // this magic function calculates the geo position from the pixel that was clicked on the control!
         var LatLong = map.PixelToLatLong(pixel);

         //...later we will update our data here with the new geolocation

         // clear current shape
         DeleteShape();
         // set new pushpin at mouse position
         AddPushpin(LatLong);

         // we reload the list of geopoints with collegues near to us
         UpdateColleguesListPoint(LatLong);

     }
 }

function AddPushpin(LatLong) {
            shape = new VEShape(VEShapeType.Pushpin, LatLong);
            map.ClearInfoBoxStyles();
            shape.SetTitle("<h2>Ich!</h2>");
            shape.SetDescription('hier bin ich.');

            //Add the shape to the map         
            map.AddShape(shape);

        }

function DeleteShape() {
            if (shape != null) {
                map.DeleteShape(shape);
                shape = null;
            }
        }

Das ist eigentlich alles was man für die Integration einer Bing Maps Karte in eine Web Applikation braucht!

Zu sagen bleibt noch, das wir die gleiche serverseitige Funktionalität (GeoRSS Feed) auch für die Windows Phone 7 Applikation verwenden werden!

Al nächstes wollen wir die Distanz zu unseren Kollegen in Metern auf der Webseite anzeigen, und zwar synchronisiert mit dem Mausklick auf der Karte. Wie das geht, erfahrt Ihr im nächsten Beitrag . Außerdem werden wir unseren OData Service per Ajax Data Binding an unsere Seite anbinden, und so CRUD Funktionalität für die TVDLunch Tabelle bereitstellen.

Technorati-Tags: Odata,Azure,Ajax,Bing Maps,Windows Phone 7,ASP.NET MVC

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 3)

admin — Tue, 04 Jan 2011 08:37:00 GMT

Passend zur Markteinführung des neuen Windows Phone 7 (WP7) haben wir uns überlegt, wie wir für einen Vortrag die aktuellen Technologien von Microsoft auf eine interessante und „präsentionstaugliche“ Art kombinieren können. Was dabei herausgekommen ist, möchte ich in den folgenden Beiträgen vorstellen.

im ersten Teil habe ich eine groben Überblick über das Projekt gegeben.

im zweiten Schritt haben wir Windows Azure Cloud Services einbezogen.

jetzt wollen wir untersuchen, was uns OData und WCF Data Services und das Entity Framework 4 (EF4) bringen können.

Warum OData ?

OData ist ein neuer Standard für den einfachen Austausch von Daten über das Internet. Einfach heißt: es ist ein ein Format gewählt worden, das es möglichst vielen Technologien und Plattformen ermöglicht diese Daten zu beziehen und zu verstehen. Interoperabilität ist damit endlich zur Realität geworden. Dafür hat man auf das bereits existierende AtomPub Protokoll aufgesetzt, und es um einige Features erweitert, die es für den Einsatz mit Datenobjekten optimieren.

OData ist zwar von Microsoft entworfen und unterstützt, es wird aber nicht durch Patente und Lizenzpolitik zum Risiko für langfristige Investitionen durch Drittanbieter (siehe Java: Oracle vs. Google) . Microsoft garantiert das in diesem Dokument Microsoft Open Specification Promise (OSP).

Der wichtigste Punkt im OData Standard ist jedoch die URL-basierte Abfragemöglichkeit. Es wurde eine einfache Syntax geschaffen, die es ermöglicht, über die URL SQL-ähnliche Filter zu konstruieren. Dieses Feature sowie die Möglichkeit Daten per REST zu verarbeiten, ermöglicht es praktisch jeder technischen Plattform die über HTTP kommunizieren kann, OData Daten zu verwenden.

Durch das einfache XML/JSON Format sowie die einfache Abfragemöglichkeit ist OData prädestiniert für die Verwendung in offenen Internet Szenarien.

OData Services stellen Daten typischerweise generell zur Verfügung, die Art der Verwendung ist nicht festgelegt. Ein Beispiel sind öffentliche APIs von großen Anbietern wie z.B. Netflix. Einige interessante Beispiele findet man hier.

Hier kann jeder Entwickler mit “seiner” Technologie auf den gesamten Katalog des Online Video Anbieters zugreifen um Applikationen zu bauen, z.B. für Smartphones oder das Web (Mashups)

Ein anderes, ebenso interessantes Szenario findet man bei einigen amerikanischen Behörden: für den einfachen Datenaustausch zwischen verschiedenen Einrichtungen hat sich OData als bestens geeignet erwiesen.

Microsoft verwendet OData auch in seinen eigenen Produkten, wichtig zu nennen sind hier z.B. Sharepoint, Reporting Services, sowie das Ad Hoc BI Tool PowerPivot. Dieser Tatsache haben wir es wohl zu verdanken, dass auch auf der Tool Seite (.NET) gute Unterstützung vorhanden ist. So können wir mit wenigen Zeilen Code eine Datenbank per OData “veröffentlichen”.

Dazu verwenden wir in unseren Beispiel Entity Framework 4 und WCF Data Services (a.k.a. ADO.NET Data Services a.k.a. Astoria)

Das Entity Framework erklären wir hier nicht, wer mehr wissen will findet alle Infos hier.

Unser Datenmodell ist schnell beschrieben :-)

Wir haben eine Tabelle TVDEmp, hier werden alle teilnehmenden Trivadis Mitarbeiter hinterlegt. In der Tabelle TVDLunch werden die aktuellen Daten für das Mittagessen gespeichert: Zeit, Ort und Mitarbeiter Kurzname (Nickname). Zu den Details kommen wir noch. Wir haben bewusst keine “echte” Relation (Foreign Key Constraint) modelliert, um die Dinge einfach zu halten. Somit kann jede Entität für sich allein verwendet werden, ohne Joins. In einer “echten” Applikation könnte man als zusätzliche Abstraktionsschicht in der Datenbank einen View Layer definieren, der nach verschiedenen Kriterien optimiert werden kann ( Performance, Zugriffsberechtigung, etc.). Objektorientierte Zeitgenossen können das Gleiche mit einem verfeinerten Entity Model erzielen, oder mit Hilfe von LINQ.

Wie kommen Die Daten ins Internet ?

Das geht ziemlich einfach: wir brauchen ein Visual Studio Projekt, das eine WCF Data Services Komponente aufnehmen kann. ich empfehle hier ein ASP.NET MVC Projekt zu erzeugen, damit geht es perfekt.

einen WCF Data Service hinzufügen:

mit dem Hinzufügen dieser Komponente ist eigentlich schon fast alles erledigt. Wir müssen der Komponente nur noch erklären , wo das EF Model ist, und welche Objekte mit welchen Rechten aufgerufen werden können. Dazu modifizieren wir den Code geringfügig:

public class WcfDS : DataService< TVDLunchWeb.Models.TVDLunchEntities>
 {
     // This method is called only once to initialize service-wide policies.

     public static void InitializeService(DataServiceConfiguration config)
     {
        
         config.SetEntitySetAccessRule("TVDEmp", EntitySetRights.All);
         config.SetEntitySetAccessRule("TVDLunch", EntitySetRights.All);
                     
         // Make the remaining entity sets read-only.
         config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);

         config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
         
         

     }
     protected override void HandleException(HandleExceptionArgs args)
     {
         // need this to create a breakpoint and debug errors
         base.HandleException(args);
     }

 }

Den Exceptionhandler empfehle ich dringend, hier kann man zur Laufzeit einen breakpoint für das Debuggen setzen. So erleichtert man sich das Finden von Fehlern ungemein, da man das HandleExceptionArgs args Objekt komfortabel in Visual Studio untersuchen kann.

jetzt können wir das Projekt kompilieren und aus VS heraus testen. Im Browser geben wir dazu folgende URL ein:

http://localhost:4332/MyService.svc/

die Portnummer und den Namen des Services bitte entsprechend anpassen.

dann sollte etwas in dieser Art erscheinen:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<service xml:base="http://localhost:4332/WcfDS.svc/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns="http://www.w3.org/2007/app">
<workspace>
    <atom:title>Default</atom:title>
    <collection href="TVDEmp">
      <atom:title>TVDEmp</atom:title>
    </collection>
    <collection href="TVDLunch">
      <atom:title>TVDLunch</atom:title>
    </collection>
</workspace>
</service>

Das ist eine einfache strukturelle Beschreibung unseres Services.

Ein kleiner Test zeigt uns, ob wir auch Daten aus der Datenbank laden können. Dazu geben wie den Namen einer Entität in der URL an:

http://localhost:4332/MyService.svc/TVDLunch

IE zeigt Odata Daten als Feed an.

hier ist das XML dazu (Testdaten) :

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://localhost:4332/WcfDS.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
  <title type="text">TVDLunch</title>
  <id>http://localhost:4332/WcfDS.svc/TVDLunch</id>
  <updated>2011-01-03T13:32:41Z</updated>
  <link rel="self" title="TVDLunch" href="TVDLunch" />
  <entry>
    <id>http://localhost:4332/WcfDS.svc/TVDLunch(0)</id>
    <title type="text"></title>
    <updated>2011-01-03T13:32:41Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="TVDLunch" href="TVDLunch(0)" />
    <category term="TVDLunchModel.TVDLunch" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:Id m:type="Edm.Int32">0</d:Id>
        <d:Nickname>mik</d:Nickname>
        <d:LunchTime m:type="Edm.DateTime">2010-08-31T12:00:00</d:LunchTime>
        <d:LocationText>Pianissimo</d:LocationText>
        <d:Comment>I’m really hungry!</d:Comment>
        <d:GeoPoint>POINT(8.86871337890625, 50.84410451978965)</d:GeoPoint>
      </m:properties>
    </content>
  </entry>
…

…

…

  </feed>

Man kann schön sehen, dass die Daten tatsächlich als fortlaufender Feed geliefert werden. die “…” habe ich eingefügt, um Platz auf dieser Seite zu sparen.

Die Felder innerhalb des <entry> Tags beinhalten die Daten aus unserer Tabelle. Zu den einzelnen Feldern (speziell das GeoPoint Feld) erkläre ich später mehr.

Der WCF Data Service ist damit bereit! Er kann übrigens uch per REST auch Daten einfügen, updaten und löschen.

Für unsere App haben wir noch 2 Stores Procedures in das System integriert. Diese können ebenfalls per URL aufgerufen werden und somit z.B. von einer Ajax Routine in JavaScript verwendet werden.

das machen wir im nächsten Beitrag.

Geht das auch mit Azure ?

Selbstredend. Wir brauchen eine Visual Studio Azure Solution, in das wir das Web Projekt (als Web Role) einhängen.

(Keine Ahnung wie das geht ? hier ist ein guter Startpunkt für Tutorials und Dokumentation) .

In dieses Projekt fügen wir einen WCF Data Service ein , siehe oben. Das ist schon alles.

Es macht natürlich Sinn, ab hier auch eine SQL Azure Datenbank zu verwenden. Dazu muss nur noch der Connectionstring in der Web.config Datei geändert werden.

Nach dem Deployment können wir die Daten von der Azure Webadresse herunterladen. Wilkommen in der Cloud!

Möglichweise wird es mit Azure noch einfacher werden, einen OData Web Service zu erstellen.

Dazu gibt es einen Versuch auf der Seite https://www.sqlazurelabs.com/ConfigOData.aspx. Ich habe es aber leider bis jetzt nicht zum Laufen gebracht.

Und wie geht’s weiter?

Als nächstes bauen wir ein mit ASP.NET MVC ein Frontend, das die OData Daten per Ajax abruft und zurückschreibt.

Hier werden wir auch das Bing Maps API kennenlernen.

Im darauffolgenden Beitrag werden wir dann “endlich” zur Windows Phone 7 App kommen.

Bis dahin: beste Wünsche für 2011!

TVDLunch: nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 2)

admin — Tue, 28 Dec 2010 17:00:00 GMT

Fangen wir also an mit

Windows Azure Cloud Services

Mit Microsofts Cloud Angebot Azure nutzen wir die Möglichkeit, eine Anwendung hochskalierbar zu machen und die Kapazität bedarfsgesteuert regulieren zu können. Natürlich ist das ein bisschen übertrieben für eine kleine Anwendung wie TVDLunch. Das Beispiel kann aber die prinzipiellen Vorteile einer Cloud Lösung verdeutlichen. Ich möchte hier versuchen, mit einfachen Worten die Vorteile zu beschreiben:

1. Bedarfsgesteuert

Warum soll man Server-Kapazität für 24h bezahlen wenn man sie effektiv nur 3h am Tag benötigt ?

Mit Azure ist es leicht, die Anwendung z.B. nach 15 Uhr auf „Standby“ zu schalten, dadurch sinken die Kosten auf ein Minimum. Dieses Prinzip kann auf viele Anwendungen übertragen werden. Wer dann noch Hunger hat, muss leider alleine Essen gehen...

2. Skalierbar

TVDLunch hat logischerweise gegen 12:00 einen Peak in der Auslastung, wenn traditionell die meisten Menschen zum Essen gehen möchten. Damit keine gefährlichen Stress-Situationen durch Unterzuckerung entstehen (ausgelöst durch schlechte Performance des Web Services durch Überlastung und die damit verbundenen Wartezeiten) können bei Bedarf weitere Instanzen des Services gestartet werden. Sind alle Lunch-Verabredungen getätigt, kann man diese wieder abschalten.

3. Managed

Für ein „Nicht-Line-Of-Business“System wie dieses (Ihr Magen sieht das vielleicht anders :-)) soll der Aufwand für Wartung und Betrieb so gering wie möglich sein. Es bietet sich also an, auf die preiswerten Cloud Services zu setzen. Extra-Kosten für die interne Betreuung des Systems, sowie für Leitungskapazität, Backup, Ausfallsicherung etc. fallen somit nicht an. Azure bietet hier ein Cent/Rappen genaues Abrechnungssystem für die bezogenen Leistungen, das die Kosten transparent macht.

4. Verfügbar

Microsoft Azure nimmt uns das Problem ab, die Daten zu den Kollegen zu bringen, egal wo sich diese befinden (weltweit :-)). Grundsätzlich profitiert eine Cloud basierte Applikation von den „unendlich“ verfügbaren Kapazitäten der Grossanbieter. Das gilt z.B. auch für das Netzwerk: Auch eine kleine Anwendung wie TVDLunch muss in der Cloud nicht befürchten, auf der Datenleitung mit anderen Systemen zu konkurrieren. Das ist bei selbstbetriebenen Diensten nicht selbstverständlich, wenn die zentrale Internet-Anbindung des Unternehmens für viele Anwendungen gleichzeitig genutzt wird.

Wie bringt man eine Applikation in die Azure Cloud ?

Mit einer Kreditkarte :-). Wer schon mal in einem Online Shop eingekauft hat, wird es auch ohne weiteres schaffen, einen Account bei Azure zu eröffnen. Kosten über eine Grundgebühr hinaus fallen grundsätzlich erst bei der ersten Nutzung an. Die aktuellen Preise finden Sie hier. Haben Sie einen MSDN Account ? dann können sie sofort loslegen. Haben Sie gerade ein Startup Unternehmen gegründet ? Dann ist BizSpark vielleicht interessant. Ein Förderprogramm für Gründer, das jetzt auch Cloud Dienste beinhaltet.

Und dann?

Microsoft Azure besteht aus 2 Angebotsbündeln:

1. Windows Azure

Compute, AppFabric, Queues und mehr.

2. SQL Azure

SQL Datenbank, Data Sync, Reporting, Appliance

Es würde den Rahmen diese Beitrages sprengen, wenn ich alle Komponenten hier einzeln erklären wollte. Wir haben für diese Projekt versucht, eine „klassische“ Web-Applikation in die Cloud (und dann aufs Handy) zu bringen. Dazu braucht man zunächst nur die Windows Azure Compute Dienste ( Laufzeitumgebung für ASP.NET Anwendungen) sowie die relationale Datenbank SQL Azure Database.

Was braucht man noch ?

Als nächstes wird Visual Studio Cloud-fähig gemacht: Laden Sie die das Azure SDK herunter und installieren Sie es. Auf der verlinkte Seite finden sie eine Reihe von Links zu Dokumentation, Tutorials weiteren Downloads usw.. Keine VS Lizenz ? mit Visual Studio Express geht es auch.

Als .NET Entwickler haben Sie es bereits geahnt: In Visual Studio stehen jetzt eine Reihe von Projekt-Templates zur Verfügung, um .NET Anwendungen für die Cloud zu erstellen. Das Beste daran: Sie können Ihren Code sofort lokal testen und debuggen, wie eine „normale“ Webapplikation. Visual Studio stellt eine lokale Emulation der Cloud Laufzeitumgebung zur Verfügung. Wenn Sie mit Ihrer Lösung zufrieden sind, können sie diese auf Azure hochladen. Auch das geschieht direkt aus Visual Studio heraus. Ich werde später noch ein bisschen konkreter erklären, wie wir TVDLunch auf diese Weise erstellt haben.

Mit dem neuen Silverlight Frontend kann man seine Azure Anwendungen im Browser verwalten. Man hat jeweils eine Test- sowie eine Produktivumgebung zur Verfügung, zwischen denen man die Anwendung einfach hin und her verschieben kann. Das dauert immer einige Minuten, man sollte diesen Schritt jeweils erst machen, wenn man ein neues Release lokal fertig getestet hat.
Mit dem gleiche Frontend stellt man auch die Anzahl der Instanzen ein (Skalierung), sowie weitere Parameter.

Und die Datenbank ?

Von hier sind es nur ein paar Mausklicks zur SQL Azure SQL Database. Hier legt man mit SQL Azure eine SQL Server 2008 Datenbank an, die sich aus Entwickler-Sicht wie eine „normale“ DB verhält. Man kann sich über SQL Server Management Studio damit verbinden, wie mit jeder anderen SQL Server Datenbank. (Voraussetzung ist, dass Sie eine Firewallregel eigerichtet haben). Eigentlich sehr unspektakulär.

Im Detail gibt es (systembedingt) natürlich Unterschiede, vor allem bezogen auf User Management und Storage Parameter. Wer es genau wissen will, findet hier alle Informationen.

Kann jetzt jeder auf die SQL Daten zugreifen ?

Wenn man es nicht will, selbstverständlich nicht. Die SQL Azure Datenbanken sind für die Verbindung mit anderen Systemen gedacht, nicht für den direkten Zugriff durch Endanwender. Dazu ist eine Firewall eingerichtet, die nur bestimmten IP-Adressen(Bereichen) Zugang erlaubt. Zusätzlich werden verschlüsselte Zugänge unterstützt. Wer zusätzlich noch die gespeicherten Daten verschlüsseln möchte, findet dazu Informationen hier.
Neben dem Security Aspekten wollen wir die Speicherungsschicht in der Anwendung abstrahieren können. Dieses architektonische Mittel erlaubt es uns, die technische Implementierung zu verändern, ohne die andere Teile der Applikation zu beeinflussen. So können wir das System z.B. später leicht skalieren, in dem wir die Daten horizontal partitionieren (auf mehrere Server verteilen).

Und wie geht es weiter?

jetzt haben wir gesehen, das Visual Studio auch im Cloud-Zeitalter der Dreh- und Angelpunkt für die .NET Applikationsentwicklung ist und bleibt. Das wird sich auch bei den nächsten Abschnitten des Projektes nicht ändern.

Im nächsten Schritt legen wir eine Service Schicht über die Datenbank legen (OData Web Services) um den Zugriff nach unseren Vorstellungen zu erlauben. Dann werden wir diese Daten “konsumieren”, mit einem Ajax Web-Frontend, sowie einer Windows Phone Applikation. Für die Visualierung von Geo-Location Daten werden wir das API von Bing Maps verwenden. Ich hoffe das ich die Beiträge zeitnah liefern kann!

TVDLunch: Nie mehr alleine Mittagessen dank einer Location Based Windows Phone 7 App, basierend auf Azure, OData und Bing Maps (Teil 1)

admin — Mon, 27 Dec 2010 15:43:00 GMT

Die Idee: eine Windows Phone 7 App, die es ermöglicht, sich einfach mit Kollegen zum Mittagessen zu verabreden.

Was steckt dahinter? Trivadis Consultants sind oft verstreut in kleinen Teams oder allein bei grossen Kunden „unterwegs“. So verbringt man seine Pausen oft allein, obwohl man ahnt, dass Kollegen in der Nähe sind. Aber wie soll man die finden ? Eine E-Mail an Alle ist eine Möglichkeit, aber bei über 500 Kollegen ein bisschen unübersichtlich, wenn alle die gleiche Idee haben. Social Media (z.B. Twitter) wäre eine andere Möglichkeit, aber längst nicht alle Kollegen nutzen diese Medien aktiv, schon gar nicht für solche Trivialitäten.

Es muss also eine Lösung her: TVDLunch!

Microsoft bietet uns alle benötigten „Legosteine“ um eine location-based Lösung zu bauen, die auch auf den neuen WP7 Smartphones funktioniert. „Location-based Service“ ist eine kurze Bezeichnung für einen Dienst, der positionsabhängige Daten, die zum Bespiel über die GPS-Empfänger der Handys empfangen werden, mit einbezieht. Mit dem Landkartendienst Bing Maps steht eine gute Möglichkeit zur Verfügung, um Geodaten auf Karten anzuzeigen, natürlich auch auf Smartphones.

Die mit Silverlight erstellte TVDLunch App nutzt diese Dienste, um mit wenigen Klicks (oder besser: touches und swipes) die Bereitschaft zum Mittagessen, sowie die aktuelle Position an einen zentralen Service zu senden. Zugleich kann man Kollegen in der Nähe auf einer Karte „sehen“ , um mit diesen direkt Kontakt aufnehmen zu können.

Damit der Dienst nicht nur WP7 Besitzern zur Verfügung steht , haben wir zusätzlich ein Web-Frontend realisiert, das die gleiche Funktionalität wie die App liefert, jedoch in klassischer HTML/Ajax Ausführung (ASP.NET MVC) . Diese Lösung könnte man zusätzlich noch IPhone und Android tauglich machen, indem man die Seiten auf die spezifische Bildschirmgrösse der Geräte optimiert.

Für die Umsetzung haben wir folgende Komponenten verwendet, die ich in einzelnen Beiträgen genauer beleuchten werde:

Windows Azure

OData

Bing Maps

Windows Phone 7 (Silverlight)

Hier ist ein Überblick, wie die Komponenten zusammenspielen:

Fangen wir also an mit

Windows Azure Cloud Services

Silverlight 3 Spinning 3D Tag Cloud!

admin — Sat, 18 Jul 2009 10:35:00 GMT

Here is a great tutorial on how to create a 3D Tag Cloud with Silverlight.

I combined it with a little routine (some regEx, too) that scrapes Links from a web page.

How do you like it ?

The only thing that holds me back from putting it on the front page of our site is the quite extreme CPU consumption.. (check your Taskmanager!). Therefore I put a simple timer routine in it, that stops the spinning after 3 secs when the mouse left the control.

It can probably be optimised, maybe with a lower "frame rate". If you want the code, just send me a mail!

move your mouse over it !

How To: Create Age Pyramid Charts in Reporting Services 2008

admin — Mon, 29 Jun 2009 08:40:00 GMT

I had to create charts for a HR department that show the distribution of age (or years of service) and gender in organization units. The customer wanted that typical Christmas tree look, which shows a symmetric bar chart in two directions, like shown in the example below.

There are two challenges here:

make the tree look symmetric, the left and right bars should be in line.
make the labels and axis show positive values, even on the left side of the graph.

How can you achieve that in Reporting Services ?

We use the Dundas chart control with the Bar Chart layout. A stacked bar chart did not work too well for me, it did not put the labels on the tip of the bars.

To have the values point in to directions multiply one set of data with -1. you can do that in your query or by editing the value expression.

The value expression for the data column might look like this:

=IIF(Fields!Gender.Value = "Male" , Sum(Fields!Head_Count.Value),Sum(Fields!Head_Count.Value)*-1)

Since we have gender on one axis, it will show the values in two different colours.

The default settings of the bar chart will draw the different bars with a little offset (side by side), so it would not look symmetrically. I found this parameter that sorts this one out:

the Custom Attribute DrawSidebySide of the Chart Series should be set to False. Now the two bars for each gender in one time period are in line nicely.

What's left to do?

We need to take care of the negative label values for the gender pointing to the left. You guessed how I did it:

change the series label Format property and the Axis LabelsFormat to your wish:

0;0 did the job for me.

That's it! Maybe you have a better way to do it ? Let us know! Put a comment!

Too brief ? ask questions!

Technorati-Tags: Reporting Services,HowTo,Charts,Age pyramid,RS2008

How To: get a RSS feed from BlogSpot filtered by a Tag

admin — Thu, 11 Jun 2009 12:30:00 GMT

by default Blogspot offers Atom feeds, which can not be digested by some systems (like our Community Server)

but there is help! try this syntax :

http://yourfantasticblog.blogspot.com/feeds/posts/default/-/TheTag?alt=rss

i put this here so I don't have to remember it next time I need it

Cloud Computing In Even Simpler Words

admin — Wed, 15 Apr 2009 07:55:00 GMT

I like this one too, it emphasizes the scalability of cloud computing a bit more.

A bit like "Sendung mit der Maus" style, but an excellent presentation! (check the feedback on youtube)

I hope you enjoy it, it's only about 5 minutes long.

Cloud Computing explained in simple words

admin — Tue, 14 Apr 2009 09:35:00 GMT

Ok, maybe a bit too simple for a geek like you...

Anyway, just watch it in your coffee break, and you'll have a basic understanding of what it's all about.

Oslo is here!

admin — Sun, 02 Nov 2008 13:53:00 GMT

at the PDC Douglas Purdy (together with Vijaye Raji) finally presented Oslo (quite entertaining, it's long but it's worth it)

Oslo comprises 3 things:

A language: "M" to model domain specific models and languages (grammars)

A tool: "Quadrant" to visualize models and to give it simple views (yes views , like in MVC).

A repository: (basically a SQL Server database) to store models and data

find more information here, the SDK is ready for download.

what's so special about Oslo?

Microsoft skipped the classic UML/MDA thing and started something completely new. Well, not that new, actually, people (outside the MS world) do use dynamic languages (especially Ruby) to create DSLs for quite some time now. But it's good to see that MS picks up good ideas [1].

It's all about better readability, less (better: no) plumbing code, low noise (less braces and brackets, semicolons, declarations, typing, initializations, castings etc.) . All this is intended to gain productivity: we can express our intent directly in simple code, whoever needs to read it will understand it better.

Microsoft takes these concepts and puts it on steroids: all dynamic, visual tools, Intellisense , all the goodness. The complexity of WCF, WF, EF and any other complex domain can now be expressed in domain specific code, we (the developers) do not have to deep dive into XML (XAML...)and APIs in all its flavors anymore (you can still do that if you need to, its all still there).

Check out the upcoming shows on this topic, they will explain the modeling language "M" in more detail.

That's the beginning of a new era for Microsoft. The post- "write to much code and deal with clumsy XML files" era. Very cool. ;-)

[1]

Check out RSpec (a language to describe expected behaviour for Behaviour Driven Development), HAML (a better MVC-View language for creating HTML) and SASS (same thing for CSS) to see what I mean (I forgot YAML, which is a human-friendly data format). BTW, All these great tools live in in Ruby on Rails. For me, DHHs (the creator of RoR) greatest achievement is that he opened our eyes: development should be as clear and simple like Danish Design.

Don opens the Box on Oslo

admin — Thu, 16 Oct 2008 19:33:21 GMT

Don Box and Doug Purdy where on Dot.Net Rocks. I was quite excited to listen to them this morning on my morning commute to Basle. But I'm still confused: what is Oslo ? They still where talking in riddles, not telling any details. There are some traces in the blogs, like Doug put it in 3 bullet points:

To that end, we have boiled down Oslo to three very simple things:

A tool that helps people define and interact with models in a rich and visual manner
A language that helps people create and use textual domain-specific languages and data models
A relational repository that makes models available to both tools and platform components

That is it. That is all Oslo is. Oslo is just the modeling platform.

On the DNR show Doug said things like: "the next big thing" ...

well, let's see what they will show on the PDC starting October 27th. There will be 6 sessions about Oslo.

How To Do a Scrum Project With Busy Consultants

admin — Fri, 15 Aug 2008 12:20:00 GMT

Inspired by the great interview on DotNetRocks with Stephen Forte, who leads Scrum style agile projects with teams distributed around the globe, I decided: it must be possible to do agile project management with tools that are reachable from everywhere through the Internet. The members of my current project team do not always work together at the same place, they all have tightly scheduled calendars, hopping from one customer project to the next. But almost everywhere they have their mobile phones and a computer in reach.

One rule in SCRUM is the daily stand-up meeting, where every team member tells what he or she was doing the last day , what is next and what impediments keep her or him from continuing the work.

Normally you will do that in in front of a board with index cards, where all your tasks of the current sprint are written on. The idea is to have a simple visual representation of your work items. The index cards and a simple spreadsheet (the "scrum sheet") that records the state of the tasks is all you need to do your meeting. But how can you do that when not everybody is in the same room ?

For backlog and sprint management we use the hosted VersionOne Team Edition

This is a free online tool (a V1 representative will call you back) to manage agile projects, it allows up to 5 team members. The clean Ajax-style UI makes it really easy to use.

it sports a very cool standup dashboard which emulates the index card/scrum sheet view in the browser.

this view is interactive, so every connected team member can move tasks around, change task information and so on. Changes will be reflected (after clicking an update button) on all browsers. This can be a great tool to do a "distributed" scrum meeting. I will tell you more about our experiences with it, when we used it for a while...

There are other tools out there, (you probably heard about basecamp from the RoR Company 37Signals). I decided to use V1 because it is really focusing to support scrum. Mingle from Fowler's ThoughtWorks was another candidate, but they don't offer a hosted version!

For team time management we use a simple google calendar. Its the easiest way to share information about the presence of the team members. you can access it from everywhere, even with smartphones and PDAs. you can integrate the google calendar with exchange and other systems to your desire.

stand-up meetings: a conference call is perfect for this. there a lots of providers to make it as simple as possible. all you need is a appointment time, a telephone and a pin number. Services like powwownow make that very easy. Or use Skype ! The biggest challenge is to get every person involved sitting in front of a computer at a certain time...

Code Management: my company has a subversion service running that can be accessed from the Internet. If you are not in this comfortable situation: try project services like assembla, they offer complete "team spaces" for free, including subversion and other helpful tools for collaboration.

Build management: our current project is about BI, so we don't need a classic build or even continuous integration environment to build our code base yet. But the next project will come soon... There is something coming up but I'm not supposed to talk about it yet . :-)

I will let you know how things worked out...