Blog-Serie zu Projekt Siena, Teil 5: Eine Siena App mit einem Windows Azure Mobile Service

In dieser Blog Serie dreht sich alles um Microsoft Projekt Siena (Beta). Im ersten Teil habe ich einen Überblick über Siena gegeben, im zweiten Teil dann aufgezeigt, wie eine Siena App erstellt und im dritten Teil dann wie diese App Verteilt werden kann. Im vierten Teil habe ich dann eine Überblick über bereits exemplarisch implementierte Siena Apps gegeben.

Bislang war die primäre Datenquelle der gezeigten Apps immer ein Excel-Dokument. Dies hatte den Vorteil, dass Excel sehr einfach verfügbar ist (Voraussetzung ist lediglich, das Excel auf dem betreffenden Entwicklungs-PC installiert ist). Für einfache Szenarien ist dies sicherlich ausreichend. Insbesondere dann, wenn die Daten aus Excel in die App importiert und dann komplett mit der App verteilt werden sollen.

In größeren Anwendungen werden die Daten, die in der App angezeigt werden sollen, in der Regel zentral über ein Server-System bereitgestellt. Neben RSS-Feeds, RESTful Services und SharePoint Listen besteht insbesondere die Möglichkeiten, Daten über einen Windows Azure Mobile Service verfügbar zu machen. Mobile Services erlauben es, schnell einfache Backend-Dienste für mobile Anwendungen umzusetzen. Die folgende Anleitung führt Schritt für Schritt durch die Einführung eines Mobile Service, der dann in einer (sehr einfachen) Siena App als Daten-Backend dienen soll. Die Anleitung setzt dabei voraus, dass Sie bereits über einen Windows Azure Entwickleraccount verfügen. Sofern Sie noch keinen Account haben, können Sie auch sehr leicht einen zeitlich begrenzten, kostenlosen Entwickleraccount anlegen.

Einrichten eines Mobile Service

In den folgenden Schritten soll nun ein Mobile Service angelegt werden.

1. Rufen Sie das Windows Azure Entwicklerportal auf und wechseln Sie in den Bereich Mobile Services.

2. Klicken Sie unten links auf die Schaltfläche NEW. Der Dialog zum Anlegen eines Mobile Service erscheint.

   
    

3. Wählen Sie einen eindeutigen (d.h. noch nicht vergebenen) Namen für den Mobile Service aus. Sofern Sie bereits über eine SQL Database verfügen, können Sie diese auswählen oder eine neue Datenbank anlegen. Wechseln Sie auf die nächste Seite.

   
    

4. Geben Sie dort die Anmeldedaten für die SQL Database ein und bestätigen Sie Ihre Eingabe. Azure legt nun einen Mobile Service an.

5. Wechseln Sie auf das Dashboard im Mobile Service.

Sie sehen nun die Administrations-Oberfläche des Mobile Service.

Erstellen einer Daten-Tabelle

Legen Sie nun eine oder mehrere neue Tabellen für Ihr Siena Projekt an.

1. Wählen Sie in der Oberfläche den Tab Data.

2. Siena weist Sie ggf. darauf hin, dass Ihr Mobile Service noch über keine Tabelle verfügt.

3. Legen Sie eine neue Tabelle Customers an. Achten Sie darauf, dass bei den Zugriffsberechtigungen für Clients in allen Feldern die Voreinstellung Anybody with the Application Key steht.

   
    

4. Bestätigen Sie Ihre Eingabe.

5. Wechseln Sie in die Detailansicht der Tabelle und dort in den Tab Columns.

6. Fügen Sie zwei Spalten hinzu: Name und Email.

Für das Beispiel reichen diese Tabelle mit diesen beiden Spalten aus. Bei Bedarf können Sie auch noch weitere Tabellen und Spalten einfügen.

Anlegen einer Steuertabelle ‘zz_config’

In der Beta-Version von Siena benötigt Siena neben den Datentabellen noch eine Konfigurationstabelle. Diese Tabelle enthält (neben den Pflichtfeldern) noch die Spalten Key und Value. Für jede Datentabelle muss in die Tabelle ein Eintrag (Key=”table”, Value=”<Tabelle>”) eingefügt werden. Fügen Sie nun analog zu den Datentabellen eine Tabelle zz_config hinzu und erstellen Sie in dieser Tabelle die Spalten Key und Value.

Leider gibt es in dem Windows Azure Portal ein kleines Problem, was die Konfigurationstabelle nicht sofort einsetzbar macht: Das Azure-Portal konvertiert alle Spaltennamen in ein Pendant bestehend aus Kleinbuchstaben. Siena später benötigt aber tatsächlich die Spaltennamen Key und Value in der Schreibweise mit großem Anfangsbuchstaben. Um dieses Problem zu lösen wird nun das SQL Management Studio benötigt. Starten Sie dieses und Verbinden Sie sich mit der SQL Database, die Sie oben als Datenbank für den Mobile Service ausgewählt haben.

Öffnen Sie ein neues Query-Fenster und führen Sie folgendes SQL Skript aus:

    1: USE [hsirtlDB]
    2: GO
    3:  
    4: ALTER TABLE [sienabackend].[zz_config] DROP CONSTRAINT [DF_zz_config___createdAt]
    5: GO
    6:  
    7: ALTER TABLE [sienabackend].[zz_config] DROP CONSTRAINT [DF_zz_config_id]
    8: GO
    9:  
   10: /****** Object:  Table [sienabackend].[zz_config]    Script Date: 19.01.2014 14:22:02 ******/
   11: DROP TABLE [sienabackend].[zz_config]
   12: GO
   13:  
   14: /****** Object:  Table [sienabackend].[zz_config]    Script Date: 19.01.2014 14:22:02 ******/
   15: SET ANSI_NULLS ON
   16: GO
   17:  
   18: SET QUOTED_IDENTIFIER ON
   19: GO
   20:  
   21: CREATE TABLE [sienabackend].[zz_config](
   22:     [id] [nvarchar](255) NOT NULL,
   23:     [__createdAt] [datetimeoffset](3) NOT NULL,
   24:     [__updatedAt] [datetimeoffset](3) NULL,
   25:     [__version] [timestamp] NOT NULL,
   26:     [Key] [nvarchar](max) NULL,
   27:     [Value] [nvarchar](max) NULL,
   28: PRIMARY KEY CLUSTERED 
   29: (
   30:     [id] ASC
   31: )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
   32: )
   33:  
   34: GO
   35:  
   36: ALTER TABLE [sienabackend].[zz_config] ADD  CONSTRAINT [DF_zz_config_id]  DEFAULT (CONVERT([nvarchar](255),newid(),(0))) FOR [id]
   37: GO
   38:  
   39: ALTER TABLE [sienabackend].[zz_config] ADD  CONSTRAINT [DF_zz_config___createdAt]  DEFAULT (CONVERT([datetimeoffset](3),sysutcdatetime(),(0))) FOR [__createdAt]
   40: GO

Dieses Skript löscht die zuvor angelegte Tabelle und legt sie neu mit korrigierten Spaltennamen an.

Fügen Sie nun der Tabelle zz_config einen Eintrag hinzu:

    1: USE [hsirtlDB]
    2: GO
    3:  
    4: INSERT INTO [sienabackend].[zz_config]
    5:            ([Key],[Value])
    6:      VALUES
    7:            ('table','Customers')
    8: GO

Dieser Eintrag ist notwendig, dass Siena später auf die Customers-Tabelle zugreifen kann.

Zugriff auf den Mobile Service aus Projekt Siena

Fügen Sie nun noch ein paar Einträge in die Customers Tabelle hinzu. Beispielsweise wie folgt:

    1: USE [hsirtlDB]
    2: GO
    3:  
    4: INSERT INTO [sienabackend].[Customers] ([name],[email]) VALUES ('Max Mustermann','maxm@mail.com')
    5: INSERT INTO [sienabackend].[Customers] ([name],[email]) VALUES ('Tina Testfrau','tinat@mail.com')
    6: INSERT INTO [sienabackend].[Customers] ([name],[email]) VALUES ('Daniel Demo','demd@mail.com')
    7: GO

Wechseln Sie nun nach Siena. Rufen Sie die Entwicklungs-App über den Startbildschirm auf. Konfigurieren Sie den Mobile Service als Datenquelle in Siena:

1. Wählen Sie in Siena den Menüpunkt File/Data Sources.

2. Konfigurieren Sie in Siena den Mobile Service. Fügen Sie als URL den URL aus dem Azure Portal ein ( .azure-mobile.net/">https://<IhrMobileService>.azure-mobile.net/ ). Fügen Sie als App Key den Schlüssel ein, den Sie ebenfalls über das Mobile Service Portal unten über die Schaltfläche Manage Keys ermitteln können.

   

    

3. Klicken Sie auf die Lupe. Siena sollte dann, wenn alles in Ordnung ist, die Customers-Tabelle als Datentabelle anbieten.

   

    

4. Wählen Sie die Schaltfläche Import data. Siena importiert daraufhin die Einträge aus der Customers-Tabelle.

5. Kehren Sie in Siena zum Startbildschirm zurück. Fügen Sie eine Gallery ein und wählen Sie als Datenquelle die Customers-Tabelle. Das Ergebnis sollte dann wie folgt aussehen:

   

    

6. Sie können nun noch die einzelnen Felder umkonfigurieren (z.B. so, dass die Hauptüberschrift den Namen, die Unterschrift die ID und der Text die E-Mail-Adresse anzeigt. Auch können Sie noch die Höhe des Gallery-Item-Templates anpassen. Das Ergebnis ist dann wie folgt:

   

    

Damit ist die App fertig!!!

Weitere Informationen

• Teil 1 der Blog-Serie: Überblick über Siena
• Teil 2 der Blog-Serie: Entwicklung einer ersten Siena App
• Teil 3 der Blog-Serie: Publikation einer Siena App
• Teil 4 der Blog-Serie: Beispiele für Siena Apps
• Windows Azure Mobile Services

Comments

• Anonymous
  July 29, 2014
  Hallo, zunächst einmal Danke für diese Beschreibung. Damit habe auch ich es als absoluter Neuling bei Siena geschafft Daten aus Windows Azure zu integrieren. Jetzt würde ich gern noch wissen ob es eine Möglichkeit gibt, die Daten die ich als "Admin" ja online auf dem neusten Stand halten kann automatisch von der App bei jedem Start synchronisieren zu lassen. Bisher zeigt mir die App immer nur die Daten an, die zum Zeitpunkt des Publishings bei Azure gespeichert waren. Muss ich hier noch eine spezielle Funktion beim Start der App einfügen? Danke und Gruß Sebastian

• Anonymous
  July 29, 2014
  Hallo Sebastian, vielen Dank zurück :) Zu Deiner Frage: Ja, es gibt in der neuesten Version von Siena (Beta3) eine neue Funktion: Refresh(<data_source>). Die müsstest Du aufrufen, damit Siena die Daten neu lädt. Du kannst diese Funktion entweder in das OnSelect-Event z.B. eines Buttons legen (dann können Benutzer jederzeit die Daten neu laden), oder Du fügst die Funktion in das OnVisible-Event des Start-Screens (der erste Screen, der bei Deiner App angezeigt wird) ein. Dieses Event wird beim Starten der App ausgelöst. Sollte eigentlich funktionieren. Viele Grüße, Holger

• Anonymous
  July 29, 2014
  The comment has been removed

• Anonymous
  August 05, 2014
  The comment has been removed