Ausbildung und erste Schritte: Entwickeln von Windows-Apps

Einleitung

Seit dem Release des Betriebssystems Windows 8 gibt es einen neuen App Store aus dem Hause Microsoft. Kantig, bunt und schlicht. So sehen die modernen Apps aus. Die Apps, welche nach diesem Konzept entwickelt werden bringen Fortschritte und im Gegensatz zu den bisherigen Windows-Versionen steht die Bedienung mittels Touchscreen im Vordergrund. Damit auch wir auf dem neusten Stand der Entwicklung sind, habe ich eine Windows Store App programmiert, welche für interne Zwecke genutzt werden kann. Das Ziel war es, den ganzen Ablauf der Entwicklung kennenzulernen und herauszufinden, wo die Schwierigkeiten liegen könnten.

Entwicklungsumgebung

Die Apps werden im Visual Studio 2013 entwickelt und es ist erforderlich, dass man das Betriebssystem Windows 8.1 installiert hat. Zusätzlich benötigt man zum Entwickeln und Testen von Windows-Store-Apps eine Entwicklerlizenz. Bevor man mit der Entwicklung beginnt muss man sich für eine Programmiersprache entscheiden. Die Windows Store Apps bieten eine Vielzahl von möglichen Programmiersprachen zur Entwicklung an, darunter Visual Basic, C# oder C++ mit XAML, C++ mit DirectX und JavaScript mit HTML/CSS. Ich habe mich für JavaScript mit HTML/CSS entschieden, da ich diese Umgebung bestens kenne und XAML nicht zukunftssicher ist. Ausserdem ist die Einarbeitung in XAML ein grosser Aufwand, der nicht unbedingt nötig ist. Unter Neues Projekt und der gewählten Programmiersprache JavaScript habe ich dann unter den Projektvorlagen eine neue „Leere App“ erstellt. Es stehen aber noch weitere Projektvorlagen zur Auswahl. Die „Leere App“ beinhaltet im Gegensatz zu den weiteren Vorlagen keinen fertigen Inhalt, bis auf eine Standard-Projektstruktur, die für eine Windows Store-App benötigt wird. Die Hub-App dagegen beinhaltet ein fertiges Layout, welches sich an der Nachrichten- App von Windows anlehnt. Bei der nächsten Raster-App-Vorlage handelt es sich ebenfalls um eine schlichte App, in der Kacheln mit Beispieldaten hinterlegt sind. Diese Kacheln sind zu Detailseiten verlinkt. Bei der vierten Vorlage Split App wird ebenfalls ein Projektbeispiel mit Kacheln angeboten, nur mit einer anderen Darstellung. Dann zum Schluss gibt es noch die Navigation App, welche bereits integrierte Controls für die Navigation enthält.

Erste Schritte

Nachdem ich mit JavaScript ein neues Projekt erstellt habe musste ich einige Eigenschaften der App ändern. Für dieses Beispiel, welches intern genutzt werden soll,  musste im „appxmanifest“ die Funktion Internet (Client) ausgewählt sein. Falls die App als Client eine Verbindung mit Webdiensten in einem Heim- oder Arbeitsplatznetzwerk herstellen können muss, ist außerdem die Funktion Private Netzwerke (Client und Server) erforderlich, was hier der Fall ist. Danach musste ich mir überlegen, wie ich nun Zugriff auf unsere DB erhalte und die Prozeduren ansprechen will. Schnell wusste ich, dass ich einen Webservice als Schnittstellte benutzen werde. Dieser wurde dann in unserem internen Portal eingebunden, um so mit VB-Klassen die Funktionen zu definieren und den Zugriff zu gewähren.  So haben wir einen getrennten Frontend- und Backendbereich. Nachfolgend ein Beispiel, wie ich mit einem Webservice eine Get-Funktion ausführe, welche mir im Anschluss ein String zurückgibt, welcher dann angezeigt wird. REST-Webservice erstellen:

<%@ ServiceHost Language="VB" Debug="true" Service="testService" CodeBehind="~/App_Code/testService.vb" %>

Interface erstellen mit der Funktion, welche die VB-Klasse implementieren muss:

Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports System.Runtime.Serialization
Imports System.Collections.Generic

<servicecontract()>
Public Interface IitestService

<operationcontract()> _
    Function GetBeispielDaten(Param As String) As List(Of BeispielList)
  
<datacontract()>
    Class Categories
         
        Public Property Param As String
    End Class

VB-Klasse, welche das Interface mit der Funktion implementiert:

Imports System.ServiceModel.Activation
Imports System.Collections.Generic
Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports i4PortalBusinesslayer.i4Portal
Imports Microsoft.VisualBasic.ApplicationServices

<servicebehavior(addressfiltermode:=addressfiltermode.any)> _
<aspnetcompatibilityrequirements(requirementsmode:=aspnetcompatibilityrequirementsmode.allowed)> _
Public Class i4KeymanagerApp
    Implements Ii4KeymanagerApp 
<webinvoke(method:="get", )="">
    Public Function GetBeispielDaten(ByVal Param As String) As List(Of IitestService.BeispielList) Implements IitestService.GetBeispielDaten


        Dim Daten As New List(Of IitestService.BeispielList)
        Dim paramDaten = New IitestService.BeispielList With {. Param = "Beispiel text"}
        Daten.Add(paramDaten)

        Return Daten

    End Function

Im web.config musste der neue Webservice ebenso hinzugefügt werden. Hier wird definiert, wie die Authentifizierung gehandhabt wird. In unserem Fall brauchen wir die Windows Authentifizierung.

Im Javascript habe ich den Webservice folgendermaßen aufgerufen und anschließend den String in einem Label dargestellt.

function getParam() {

        var Parameter = "Parameter";
        var divAusgabe = document.getElementById("Ausgabe");
        var webserviceurl = "http://localhost:55779/wse/i4testService.svc/getbeispieldaten/";


        WinJS.xhr({
            type: "GET",
            url: webserviceurl + Parameter,
            headers: { "Cache-Control": "no-cache", "If-Modified-Since": currentdate }
        }).done(
                    function (response) {
                        var x = response.responseText.length;
                        var json = JSON.parse(response.responseText);
                        
                        var beispieltext = json[0].Param;
                        

                        divAusgabe.innerText = beispieltext;
                        return json;
                    },
                    function (error) {
               var messagedialogpopup = new Windows.UI.Popups.MessageDialog(error.message, 'Es ist    ein Fehler aufgetreten');
                        messagedialogpopup.showAsync();
                    },
                    function (progress) {
                    }
                );
    }

WinJS stellt eine Reihe von neuen Steuerelementen bereit, die für Windows Store-Apps mit JavaScript entwickelt wurden und WinJS.xhr bietet eine einfache Möglichkeit zum Herunterladen von Webinhalten in Ihre App. Dieses Steuerelement benutzte ich für den Webservice Aufruf und sobald der Aufruf erfolgreich war, erhalte ich in der Funktion Response ein json, welches all meine geforderten Daten enthält. Diesen Wert habe ich dann einem div zugeordnet und wird als Innertext dargestellt. Dies war ein einfaches Beispiel, dass den Zugriff in den Backendbereich zeigen sollte. Die Entwicklung an sich ist dann in einer bekannten Umgebung. Im eigentlichen erstellten JavaScript-App Projekt arbeitet man mit Html, CSS und JavaScript. Hier wird der Content dargestellt und einige Funktionen auch mittels jQuery ausgeführt. Mithilfe von JavaScript werden Webservice aufgerufen, welche dann in der Klasse im Portal Funktionen ausführen. Dort kann man wie gehabt mit Visual Basic die Stored Procedures in der Datenbank ansprechen und Daten bearbeiten oder für die Anzeige zurückgeben. Die zurückgegebenen Daten werden im Json Format returniert.

Authentifizierung

Ein Problem, welches während der Entwicklung zum Vorschein kam war, dass man die Authentifizierung automatisieren muss. Bedeutet, dass zu Anfang jedes Mal beim Starten der App die Windowsauthentifizierung erforderlich war, und der Benutzer sein Passwort eingeben musste. Damit die Benutzerfreundlichkeit gegeben war, sollte diese Abfrage nur das erste Mal beim Starten erscheinen und nach einer erfolgreichen Eingabe auf dem Gerät nicht mehr abgefragt werden. Dazu muss man im Internet Explorer der dafür gebrauchte URL zum Webservice als vertrauenswürdig einstufen.

1. Den Internet Explorer öffnen und auf die „Internet Options“ wechseln.
2. Bei der Registerkarte muss man auf Security wechseln.
3. Danach bei den oberen vier auf „Local Intranet“ klicken und dann unterhalb auf den „Sites“ Button.
4. Anschliessend auf „Advanced“ klicken.
5. Hier muss man nun den Webservice Pfad eintragen

Zertifikat

Für die Verteilung der App wird ein Zertifikat benötigt. Dieses Zertifikat kann zum einen von Visual Studio selber generiert werden (Dauer: 1Jahr) oder man fordert und erstellt ein eigenes an. In unserem Fall werden wir ein eigenes anfordern. Zur Erstellung und des Imports des Zertifikats muss man dieser Anleitung folgen.

Querladen

Wenn man die App für Personen außerhalb des Unternehmens verfügbar machen möchte, sollte man die App im Windows Store eintragen. In diesem Fall führt man die normalen Schritte zum Übermitteln einer App aus. Wiederum gibt es Branchen-Apps, welche nur intern in der Firma bereitgestellt werden. Dieser Prozess zur Veröffentlichung wird Querladen genannt. Quergeladene Apps müssen nicht im Windows Store veröffentlicht werden. Dazu muss man folgende Schritte ausführen. Ich bin wie folgt vorgegangen. Als erstes muss man das App-Package erstellen, welches man unter Project > Store > Create App Packages machen kann. Damit das Querladen des Apps funktioniert, muss man dies in den Lokalen-Gruppen-Rechten erlauben. Dazu muss man folgendes machen:

1. Suche im Windows Start Screen nach „Run“ und öffne es.
2. Dann gib in der Box folgendes ein „gpedit.msc“
3. Vom Startbildschirm muss man dann in diesem Pfad folgen: Computer Configuration -> Administrative Templates -> Windows Component -> App Package Deployment
4. Mit einem Rechtsklick auf „Allow all trusted apps to install“
5. Danach muss man die Einstellung auf „Enabled“ ändern, übernehmen und bestätigen.

Um nun die Installation zu tätigen, muss man folgenden Befehl im Power Shell eingeben: add-appxpackage –Path Pfad Beispiel: Add-appxpackage –Path D:\Projects\Win8-App\ SearchProject_1.0.0.53_AnyCPU_Debug_Test\SearchProject_1.0.0.50_AnyCPU_Debug.appx

Fazit

Nachdem ich nun die App fertig entwickelt und intern in der IN4OUT verteilt habe fällt mir auf, dass die Entwicklung an sich nicht das Schwierigste daran ist. Neu war dabei nur das Zusammenspiel zwischen Frontend und Backend, wobei der Webservice als Schnittstelle fungierte. Es stellte sich heraus, dass einige andere Details aufkamen, welche noch zu erledigen waren und man nicht eingeplant hatte. Darunter fällt zum einen die Zertifizierung und Lizenzierung der App. Daraus entstehend war der Aufwand für die Verteilung der App groß. Ich musste mich zuerst erkundigen, wie der Prozess abläuft und was man dafür benötigt. Insbesondere durfte man den Sicherheitsaspekt nicht vergessen. Mit der Änderung des URLs zu HTTPS traten einige Probleme auf. Damit dies funktionierte, musste man die Definitionen des Webservices im web.config ändern. Aber wenn man diese Szenarien einmal durchgespielt hat erfolgt die Entwicklung einer weiteren App mit weniger Zeitaufwand in diesen Bereichen, da man die Lösungen dazu bereits hat.