WAT-App Design

Apps sollten die Vorteile der Plattform-Funktionen nutzen und nicht nur eine bestehende Website anzeigen. Nutzen Sie daher Windows-App-Funktionen, um Ihre App von reinem Web-Inhalt zu unterscheiden. Verwenden Sie mindestens eine der Funktionen aus dem „What can you do with WAT?“ Abschnitt.

Duplizieren Sie nicht die Navigation in der WAT-App-Navigationsleiste und im Web-Inhalt. Verwenden Sie den Styles-Abschnitt der JSON-Konfigurationsdatei, um CSS-Overrides hinzuzufügen und HTML-Abschnitte auszublenden.

Segmentieren Sie Ihre Webinhalte und verwenden Sie Links zu anderen Seiten. Nutzen Sie die WAT-URL-Umleitungen, um Links zu URLs außerhalb der App in einem Browser zu öffnen.

Stellen Sie benutzerdefinierte Bilder für jede Kachelgröße und den Begrüßungsbildschirm bereit.

Liefern Sie Ihre Web-Inhalte über HTTPS, um das erweiterte Caching im WAT zu nutzen.

Website Design

Verwenden Sie Responsive-Design-Prinzipien, um mehrere Bildschirmgrößen und Orientierungen von 320px Breite und mehr zu unterstützen. Bootstrap ist ein ausgezeichnetes Responsive-Framework. Bootstrap wurde zum Beispiel für die WAT-Website benutzt. Bootstrap ist außerdem das Standard-Framework für neue Web-Anwendungen in Visual Studio 2013.

Unterstützen Sie Touch-Interaktionen und Multi-Touch wenn möglich.

Plugins werden in der App-Umgebung nicht unterstützt. Deshalb sollten Sie keine Webseiten mit Plugins wie Adobe Flash oder Microsoft Silverlight ohne eine Fallback-Funktion verwenden.

Verwenden Sie wenn möglich die UX-Richtlinien für Windows Store Apps in Ihren Webinhalten.

Sie sollten der Besitzer oder Administrator der Website sein, die Sie als Grundlage Ihrer App verwenden.

Das Web App Template für Visual Studio 2013 gibt es auf Codeplex zum Herunterladen.

Dieser Blogeintrag ist ein Teil von meiner Blog-Serie zu Web App Templates. Hier sind die Links zu den anderen Einträgen:

• Hybride Windows Apps mit dem Web App Template – Teil 1
• Hybride Windows Apps mit dem Web App Template – Teil 2
• Erste Schritte mit dem Web App Template

Eine JSON-basierte Konfigurationsdatei (config.json) steuert die App und kontrolliert, welche Funktionen aktiviert sind und wie sie sich verhalten. Auf der WAT-Docs Website gibt es eine erste Schritte (Get Started)-Seite mit Information rund um das Web App Template. Das ist ein hervorragender Startpunkt für alle, die mit dem Web App Template arbeiten möchten. In diesem Blogeintrag werde ich auch zeigen, wie man schnell und einfach eine WAT-App konfigurieren kann.

Nach dem ich die Vorlage installiert habe, erstelle ich ein neues „Web App Template for Universal Apps“ Projekt in Visual Studio 2013 und nenne es WATTest. Die Vorlage für die WAT-Universelle-App befindet sich auf der linken Seite unter Installiert->Vorlagen->JavaScript.

(Klicken Sie auf die Bilder, um eine größere Version zu sehen.)

Seit Ende Oktober gibt es eine neue Version (2.2) von dem Web App Template. Mit dieser Version sind einige Änderungen dazu gekommen. Prüfen Sie auf Codeplex regelmäßig nach, ob Sie die aktuellste WAT-Version haben.

In dem WATTest.Shared Projekt finde ich den config Ordner mit der Konfiguration-Dateien. Ich offene die config.json Datei und sehe oben "start_url": https://wat-docs.azurewebsites.net/. Ich kann die URL von meiner Website mit diese URL austauschen. Als Beispiel für diesen Blogeintrag werde ich eine WAT-App für meine MSDN-Blog erstellen. Die URL dafür ist: https://blogs.msdn.com/lorigros

Nachdem ich die „start_url“ festgelegt habe, mache ich einen rechten Maus-Klick auf das WATTest(Windows 8.1) Projekt in der Projektmappe und lege es als Startprojekt fest. Ich kann auch das WATTest.WindowsPhone(Windows Phone 8.1) Projekt als Startprojekt festlegen, wenn ich die WindowsPhone Debug Version starten möchten. Ich drücke F5 um Debugging zu starten und schon ist meine Website in eine einfache Windows 8.1 WAT-App umgewandelt.

Jetzt möchte ich die Share-Charm-Konfiguration-Info eingeben. Um einen Beispieleintrag zu finden, suche ich in der config.sample.json Datei nach „wat_share“.

Ich kopiere das Objekt und füge es in meiner config.json Datei ein. Ich passe den Titel von „WAT Documentation“ zu „ Lori’s Blog-o-matic“ an. Um mehr über die andere Share-Eigenschaften zu lernen, kann ich die JSON-Dokumentation auf WAT-Docs lesen: https://wat-docs.azurewebsites.net/JsonWindows#share

Ich starte wieder Debugging mit F5 und jetzt kann ich die aktuelle URL meines Blog über das Share-Charm teilen.

Als nächstes möchte ich Nav-Bar Funktionalität in meiner App hinzufügen. Die Nav-Bar ist eine obere Navigationsleiste mit Links. In der config.sample.json suche ich nach „wat_navBar“ und kopiere das ganze Objekt aus.

Ich passe die navBar-Eigenschaften für meine App in der Datei an. Wenn ich die „label“ Eigenschaft ändere, wird den Text in dem NavBar angepasst (z.B. home, JSON Reference, About WAT). Die „icon“ Eigenschaft ändert das Symbol für den Menupunkt. Eine Liste mit verfügbaren Icons finden Sie auf dev.windows.com. Sie können es auch leer lassen, um das Symbol komplett wegzulassen. Die „action“ Eigenschaft ist die URL, wohin der User navigiert, wenn der Knopf ausgewählt wird.

Ich habe meine Menupunkte zu “Back”, “Startseite”, „Beliebte Tags“ und „Kontakt“ gesetzt. „Beliebte Tags“ hat untergeordnete Menupunkte mit beliebten Tags (Windows App Studio, Web App Template, App Entwicklung).

Jetzt möchte ich Live-Kacheln zu meiner App hinzufügen und kopiere das „wat_livetile“ Objekt aus der config.sample.json Datei und füge es in meiner config.jason Datei ein.

Die „periodicUpdate“ Eigenschaft definiert wie häufig die Kacheln aktualisiert werden. Gültige Werte sind 0, 1, 2, 3 oder 4. 0 ist am häufigsten mit jede halbe Stunde und 4 ist täglich. Die „tilePollFeed“ ist die URL für die RSS-Feed, die die Live-Kacheln aktualisieren. Dies kann jeder RSS-Feed sein. Ich ändere den Eintrag für „tilePollFeed“ zu https://blogs.msdn.com/b/lorigros/rss.aspx. Jetzt habe ich Live-Kacheln für meine App bereitgestellt.

In wenigen Schritten habe ich Share-Charm, NavBar und Live-Kacheln Funktionalität zu meiner App hinzugefügt. Es gibt weitere Möglichkeiten meine App mit nativen Windows-Funktionen anzupassen – z.B. AppBars, weitere Charm-Integration, Pushbenachrichtigungen und CSS-Injection und mehr. Info dazu finden Sie auf der WAT-Docs Website: https://wat-docs.azurewebsites.net/

Dieser Blogeintrag ist ein Teil von meiner Blog-Serie zu Web App Templates. Hier sind die Links zu den anderen Einträgen:

• Hybride Windows Apps mit dem Web App Template – Teil 1
• Hybride Windows Apps mit dem Web App Template – Teil 2
• Designhinweise für die Nutzung des Web App Template

• Hybride Windows Apps mit dem Web App Template – Teil 1
• Erste Schritte mit dem Web App Template
• Designhinweise für die Nutzung des Web App Template

Das Web App Template (WAT) ist ein Open-Source-Projekt von Microsoft, die schnelle Erstellung von Hybrid-Apps für Windows 8.1/Windows Phone 8.1 und Windows Phone 8 ermöglicht. Die Visual Studio-2013 Vorlage gibt es auf https://wat.codeplex.com zum Herunterladen.

Es gibt einige Apps bereit im Windows-App-Store, die auf dem Web App Template basieren, z.B. River Island Clothing und Zoopla Property Search haben WAT-Apps auf Windows 8.1 und Zoopla Property Search auf Windows Phone.

Eine Webseite muss die folgenden Kriterien erfüllen, um als eine Grundlage für eine WAT-App zu dienen:

• Funktioniert gut in Internet Explorer 11
• Verwendet kein Flash oder Silverlight

Wenn die Webseite diese Kriterien erfüllt, sollte es technisch in WAT funktionieren. Allerdings werden die folgenden Richtlinien empfohlen, um ein tolles Erlebnis für den Benutzer zu liefern:

• Mobile oder Responsive-Webseiten, die genauso gut bei einer Breite von 300px als auch bei 1920px funktionieren
• Konzipiert für Touch-Eingabe
• Gut organisiertes Mark-Up mit Verwendung von ID-Attributen und CSS-Klassen
• Haben einen RSS-feed für die Live-Kachel (Blogs oder sozialen Netzwerken wie Twitter oder Pinterest sind möglich)

Um eine WAT Basis-App zu erstellen, müssen Sie nur ein bisschen über Windows App-Funktionen wissen und haben die Fähigkeit, eine JSON-Datei zu bearbeiten. Grundkenntnisse in CSS sind auch hilfreich.

In den meisten Fällen benötigen kein JavaScript oder C#. Nur JSON und CSS müssen Sie vielleicht anpassen. Die WAT-Vorlage hat die wichtigste Funktionalität bereits vorgefertigt und Sie müssen nur die config.json anpassen, um die App zu konfigurieren.

WAT-Apps sind vollständige Native-Apps unter der Haube und umhüllen jede Menge vorgefertigte Funktionen rund um die Webseiten. Das bedeutet, dass Sie eine WAT-App wie jede Native-App erweitern können. Die meisten beginnen mit einem standardmäßigen Config-App und fügen dann sukzessive native Funktionen hinzu. Die häufigsten native Erweiterungen sind:

• Dynamische Navigation
• Custom Live-Kacheln
• Warenkorb
• Verwendung von Hardware wie Webcams usw.

Hier sind die 2 wichtigen Ressourcen, um mit WAT-Apps anzufangen:

• https://wat.codeplex.com: Hier können Sie den Quellcode und Installer herunterladen, an der Community rund um WAT teilnehmen, Anregungen abgeben oder Hilfe erhalten.
• https://wat-docs.azurewebsites.net: Sie finden hier mehr detaillierte Info rund um WAT und wie Sie es verwenden können. Sie finden auch Dokumentation zu der Config.json-Datei und eine ausführliche Beschreibung der Funktionen und Info rund um hilfreiche Tools, um Bilder und Kacheln für die App zu erstellen.

Sowohl Native- als auch Hybride-Apps haben ihre Stärken und Schwächen und es gibt keinen richtigen oder falschen Weg eine App zu bauen. Sie müssen sich nur entscheiden, was richtig für das Projekt oder die Kunden ist.

Eine wachsende Zahl von Unternehmen investieren in ihre Webseiten, weil sie für den deutlichen Anstieg mobiler Geräten optimieren wollen. Diese Investitionen umfassen wichtige Design-Prinzipien wie Responsive- oder Adaptive-Design, das es Websites ermöglicht, die Darstellung auf dem Bildschirm optimal anzupassen. Viele Unternehmen sehen das Web als den kleinsten gemeinsamen Nenner, auf den Sie von fast jedem Gerät zugreifen können. In vielerlei Hinsicht ist das Web die ultimative Cross-Plattform-App.

Das Web über einen Browser hat seine eigenen Schwächen – z.B. die begrenzte Fähigkeit, eine direkte Schnittstelle mit dem Betriebssystem oder der Hardware zu verbinden, eingeschränkte Fähigkeit außerhalb des Browsers zu funktionieren, fehlende Offline-Unterstützung, usw. Hier können Hybrid-Apps helfen. Sie können das Beste aus der Web-Plattform herausholen und verbessern das Erlebnis durch die Nutzung von Hybrid-App-Funktionen. Ein weiterer wichtiger Vorteil für Hybrid-Apps sind die Kosten. Die Kosten für die Entwicklung und Aktualisierung einer Hybrid-App kann deutlich billiger als eine volle Native-App sein, weil der Großteil die Funktionen bereits auf der Website existieren.

Das Web App Template (WAT) ist ein Open-Source-Projekt von Microsoft, die schnelle Erstellung von Hybrid-Apps für Windows 8.1/Windows Phone 8.1 und Windows Phone 8 ermöglicht. Die Visual Studio-2013 Vorlage gibt es auf https://wat.codeplex.com zum Herunterladen.

Die Vorlage erstellt eine Native-App (HTML/JS für Windows 8.1 und Windows Phone 8.1 und C#/XAML für Windows Phone 8), die über eine Reihe vorgefertigter Funktionen verfügt, beispielsweise:

• Webseite auf dem Haupt-Canvas der App einbinden
• Live Kacheln mit Inhalt aus einem RSS-Feed
• CSS- und JavaScript-Injections, um das Aussehen der Webseite in der App zu ändern
• Native Nav-Bar und App-Bar für Navigation
• Integration mit nativer Suche, Teilen und Einstellungen über die Charms
• Redirect-Regeln steuern, welche URLs innerhalb der App bleiben und welche im Browser öffnen
• Sekundäre Kacheln anheften

Eine JSON-basierte Konfigurationsdatei (config.json) steuert die ganze App und kontrolliert, welche Funktionen aktiviert sind und wie sie sich verhalten. Sie können eine vollständige Auflistung der JSON Optionen auf der WAT-Dokumentation-Webseite finden: https://wat-docs.azurewebsites.net/Json

Dieser Blogeintrag ist ein Teil von meiner Blog-Serie zu Web App Templates. Hier sind die Links zu den anderen Einträgen:

Hybride Windows Apps mit dem Web App Template – Teil 2

Erste Schritte mit dem Web App Template

Designhinweise für die Nutzung des Web App Template

Ich starte Windows App Studio in meinem Browser unter https://appstudio.windows.com, logge ich mich ein und klicke auf “Edit” auf der “MSFT News für Geeks” App.

Ich befinde mich wieder auf meinem Dashboard für dieses Projekt. Wenn ich möchte, kann ich den Inhalt, das Aussehen oder die Kacheln für die App hier weiter bearbeiten und speichern. Wenn ich Änderungen in der App mache, muss ich allerdings danach eine neue App generieren, um die App zu veröffentlichen.

Bevor ich meine App veröffentliche, möchte ich die “PubishInfo” Registerkarte in dem Dashboard anschauen. Ich klicke darauf.

Hier kann ich wichtige Information in Vorbereitung für die Veröffentlichung meiner App in dem Store aktualisieren oder hinzufügen.

Ich kann meine App Icon oder App Titel oben links ändern.

Ich schreibe eine kurze Beschreibung für meine App unter „App Description“.

Ich kann die Sprache für meine App auswählen. Ich wähle „German (Germany)“ aus. Dieser Auswahl wird in dem Store unter „Unterstütze Sprachen“ gezeigt und entscheidet in welchen Markt die App veröffentlicht wird.

Optional kann ich eine About-Seite einfügen oder Werbung in meiner App einschalten. Eine Anleitung zu Werbung in der App steht auf der Windows App Studio “How To” Seite.

Wenn ich meine App in den Windows Store veröffentlichen möchten, gibt es ein paar extra Schritte, die ich machen muss. Ich muss meine App mit dem Windows Store assoziieren.

Eine Anleitung, wo man diese Info bekommt, findet man auf der App Studio „How To“ Seite.

Eine Privacy Statement (Datenschutzrichtlinie) URL ist auch notwendig, um in dem Windows Store zu veröffentlichen. Wenn Sie die Quellcode von Ihrer App bearbeiten, müssen Sie eine eigene Datenschutzrichtlinie erstellen und die URL dazu können Sie hier eingeben. Sonst wird eine standardisierte Datenschutzrichtlinie für Sie erstellt. Mehr Info über Datenschutzrichtlinie können Sie auf MSDN lesen.

Sie können auch Ressourcen zu Datenschutzerklärung im Internet finden. Ein Beispiel dafür ist Microsofts Privacy Policy: https://privacy.microsoft.com/en-us/fullnotice.mspx

Jetzt bin ich fertig und will meine App zur Veröffentlichung generieren. Ich klicke auch “Save” zu speichern und dann auf „Finish“.

Ich klicke auf “Generate” um meine App wieder zu generieren.

Um eine Windows Phone 8 App zu generieren, klicke ich auf dem “Windows Phone 8” Button und aktiviere den “Publish packages” Generation-Type. Ich klicke auf “Generate”, um die App zu generieren. In dem “Comments”-TextBox kann ich Kommentare eingeben, wenn ich mehrere generierte Versionen habe.

Wenn das Prozess fertig ist, finde ich mein Publish-Paket unter “Publish packages”. Information zu den verschiedene generierte Versionen finde ich auf der rechte Seite unter “Previous versions”.

Ich herunterlade die Zip-Datei und extrahiere sie. In dem Ordner gibt es mein Logo, 7 Screenshots und die XAP-Datei für meine App.

Wenn Sie kein Dev Center-Konto haben, registrieren Sie sich bei Windows Phone Dev Center oder Windows Dev Center. Es gibt eine Gebühr für die Registrierung (aktuell 14€ für ein Entwicklerkonto oder 75€ für einen Unternehmenskonto) aber mit der freigegebenen Registrierung haben Sie Zugriff auf beide Stores mit nur einem Konto.

Auf dev.windowsphone.com kann ich meine App einreichen.

Ich gebe meine App-Information ein und lade meine XAP-Paket mit Beschreibung hoch.

Ich kann meine Beschreibung für den Store eingeben und Schlüsselwörter für meine App eingeben.

Ich muss auch einige Bilder hochladen. Ein 300x300 Pixel Icon, um meine App darzustellen. Plus 1-8 Screenshots muss ich auch hochladen.

Wenn alles erfolgreich hochgeladen ist, kann ich meine App einreichen.

Wenn Sie Ihre App in dem Windows Phone Store veröffentlichen möchten, hier ein paar Tipps, um Ihre App die beste Chance zu geben, die Zertifizierung erfolgreich zu bestehen.

• Halten Sie die Zertifizierungsanforderungen für Windows Phone und Windows ein.
• Verwenden Sie keine Platzhaltertext ([Insert Name]) von den Vorlagen oder Inhalt von der Vorlage-App.
• Stellen Sie sicher, dass Sie Ihre eigenen einzigartige App-Titel, App-Logo, Kacheln und Langbeschreibung benutzen.
• Erstellen Sie eine einzigartige angepasste 300 x 300 PNG Kachel zur Darstellung Ihrer App.
• Erstellen von 1 bis 8 768 x 1280 oder 1280 x 768 PNG-Screenshots von Ihrem Windows Phone-App.
• Erstellen von 1 bis 8 1366 x 768 oder 768 x 1368 PNG Screenshot(s) Windows App.

Mehr Information rund um die Veröffentlichungsschritte für Windows Phone, finden Sie auf MSDN.

Wenn ich meine App in den Windows Store veröffentlichen möchte, gehe ich zurück auf der “Generate”-Seite in Windows App Studio und klicke noch mal auf “Generate”. Dieses Mal wähle ich die “Windows 8.1 / Windows Phone 8.1” Version aus.

Der Windows Store erfordert, dass Sie Ihre App-Namen reservieren, bevor Sie die App in den Store einreichen.

Sobald Sie einen Name reserviert haben, weist der Store eine Package-Identity an.

Um sicher zu stellen, dass die generierte Publish Packages gültig sind, muss Windows App Studio das Applikation Manifest aktualisieren.

Um das zu machen, gibt es das Feature “Associate the App with the Store” in der Publish Info Registerkarte in Windows App Studio.

Sie müssen ein Formular mit Information zu App Identity, App Display Name, Publisher ID und Publisher Name ausfüllen.

Mehr Information finden Sie auf MSDN: https://msdn.microsoft.com/de-de/windows/apps/br230836

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen

Ich starte Windows App Studio in meinem Browser unter https://appstudio.windows.com und logge mich ein.

Auf meiner Projekt-Seite sehe ich meine App, die wir erstellt haben “MSFT News für Geeks”. Ich möchte jetzt die App in dem Simulator testen und der Quellcode erweitern.

Da ich meine App schon generiert habe und kann ich einfach hier auf „Generate“ klicken, um auf die fertige App-Packages zu kommen.

Unten auf der Seite, finde ich die generierte Packages von meiner App. Dieses Mal möchte ich den Quellcode von meiner Windows 8.1 und Windows Phone 8.1 App runterladen und erweitern. Ich klicke auf “Visual Studio 2013 Universal Project you will need update 2” unter “Download Source Code”.

Um die App Quellcode zu bearbeiten, brauchen Sie Visual Studio auf Ihrem Computer. Visual Studio ist ein IDE, eine integrierte Entwicklungsumgebung, die das Erstellen, Debuggen und Bereitstellen von Anwendungen für Windows, Office, Windows Phone, das Web und die Cloud wesentlich einfacher macht.

Es gibt mehrere Versionen von Visual Studio, die Sie verwenden können, und mehrere Möglichkeiten, Visual Studio zu erhalten:

Wenn Sie ein Student oder Schüler sind, können Sie kostenlose Entwicklertools von dem DreamSpark Programm bekommen. DreamSpark ist ein Microsoft-Programm für Studenten, Lehrer und akademische Institutionen, die die technische Ausbildung unterstützen, indem sie Zugriff auf Microsoft-Software zu Lern-, Unterrichts- und Forschungszwecken bereitstellen.

Für eine voll funktionsfähige Version von Visual Studio können Sie Visual Studio Professional 2013 kaufen.

Wenn Sie ein MSDN-Abonnent haben, ist Visual Studio ein Teil von vielen Abo-Paketen enthalten.

Schließlich gibt es die Express-Versionen von Visual Studio, die eine kostenlose Basis-Version von Visual Studio sind. Mit Visual Studio Express 2013 mit Update 2 für Windows können Sie Windows Phone- und Windows Store-Apps unter Windows 8.1 erstellen. Zu den Tools gehören ein Code-Editor, ein Debugger, ein Profiler und eine umfangreiche Sprachunterstützung, die Sie zum Erstellen von in HTML5/JavaScript, C++, C# oder Visual Basic geschriebenen Apps nutzen können. Es hat außerdem einen Gerätesimulator, mit dem Sie Ihre Apps auf mehreren Gerätetypen testen können.

Mehr Information über Visual Studio finden Sie auf visualstudio.com.

Weil wir ein Universal Project bearbeiten wollen, müssen Sie Update 2 haben. Ich habe selbst Visual Studio Ulimate 2013 mit Update 2 auf meinem Rechner.

Ich klicke jetzt auf “Download”, um das Quellcode-Paket zu herunterladen.

Nur als Hinweis, Sie müssen einen PC mit Windows 8 haben sonst wird es nicht ausgeführt.

Jetzt muss ich die „App.zip" Datei auf meinem Computer speichern.

Ich öffne den Ordner und extrahiere die Zip-Datei. Ich öffne jetzt den Ordner „App“ und ich finde eine Datei Namens “AppStudio.sln”.

Diese Datei ist eine Visual Studio Projektmappe und wenn ich es doppelklicke, wird es in Visual Studio geladen. Ich bekomme eine Sicherheitswarnung aber möchte die App trotzdem öffnen. Um die Sicherheitswarnungen zu deaktivieren, klicke ich auf dem Kontrollkästchen und dann OK.

Visual Studio zeigt vielleicht auch eine weitere Warnung, dass Sie eine "Entwickler-Lizenz für Windows 8.1" auf diesem Computer dafür registrieren oder erneuern müssen. Akzeptieren Sie diese Aufforderung, um den Prozess zu starten. Danach müssen Sie Ihre Microsoft-Konto Username und Passwort eingeben. Sobald Ihre Entwickler-Lizenz erneuert worden ist, bekommen Sie eine Bestätigung.

Nun, dass Visual Studio geladen ist, müssen Sie zu das richtige Projekt navigieren. Klicken Sie in der Menüleiste auf Ansicht > Projektmappen-Explorer (oder Tastenkombination Strg + Alt + L). Dadurch wird den Bereich Projektmappen-Explorer geöffnet.

In Visual Studio ist eine Projektmappe, ein Container für ähnliche Projekte und andere Ressourcen.

In App-Studio erstellte Projektmappe gibt es vier Projekte: AppStudio.Windows, AppStudio.WindowsPhone, AppStudio.Shared und AppStudio.Data.

In den Windows und WindowsPhone Projekte steht im Views Ordner einige von den App UI Code. Viele von diesen Name sollen bekannt sein, weil sie von unseren Bereich Namen stammen.

Sonst gibt es ein Projekt für Shared Code – das ist Code, der für beide Windows und Windows Phone geteilt werden kann. Das vierte Projekt ist AppStudio.Data und enthält die Daten und die Definitionen von den verschiedenen Datenquellen für die App.

Der Code für diese Projekte sind C# und XAML

Es gibt auch einen Lib-Ordner. Der enthält die Bibliotheken, die von den Projekten verwendet und mit der Projektmappe gebündelt sind. NuGet ist für Paketvewaltung und während der Projektmappe erstellt wird, lädt es zusätzliche Bibliotheken, die verwendet werden runter.

Wenn ich ein bisschen in dem Projekt rumschaue, gibt es einige Dinge, die Sie aus meinem App Studio-Projekt wie die Bilder im Ordner "Assets\DataImages" erkennen können, wie z.B. mein App-Logo-Bild.

App Studio generiert Quellcode mit dem Entwurfsmuster (Design Pattern) Model-View-Ansicht-Modell (oder MVVM), um die App zu organisieren.

In MVVM repräsentiert das Model die Daten oder Inhalte, die die App verwendet. Dies wird in das AppStudio.Data-Projekt implementiert.

View repräsentiert die Benutzeroberfläche. Die Views sind definiert mit XAML Markup Language und wir können das hier in dem View Ordner und die DataTemplates Subordner hier.

Das View-Model vermittelt zwischen die View und Model Elemente. Es bindet die Daten in dem Model und die Benutzeroberfläche Elemente in dem View.

Sie haben gesehen, wie man die Bindings in App Studio auf dem Seitelayouts konfiguriert. Die View-Models sind in C# implementiert. Viele von diesen Namen kommen bestimmt bekannt vor.

Wir wollen jetzt unsere App in dem Simulator ausprobieren.

Rechtsklick auf "AppStudio.WindowsPhone (Windows Phone 8.1)" und wählen Sie "Als Startprojekt festlegen" aus.

In Visual Studio wählen Sie das Menü "Erstellen" und klicken Sie auf "Projektmappe erstellen". Dadurch wird Ihre App erstellt.

Sobald das Build abgeschlossen ist, sehen Sie eine Meldung im Ausgabefenster “Erstellen: 3 erfolgreich”.

Ich möchte jetzt die App ausprobieren und sehen, wie es sich verhält, und dafür kann ich den Windows Phone-Simulator verwenden. Der Simulator kommt mit alle Version von Visual Studio oder mit dem Windows Phone SDK. Der Simulator benutzt das gleiche Betriebssystem wie ein echtes Handy, damit kann ich testen, wie die App funktioniert ohne auf einem echten Gerät zu installieren.

Es gibt ein paar Simulatorkonfigurationen mit verschiedenen Bildschirmgrößen und Speicher zur Auswahl. Ich gehe mit dieser WVGA-Konfiguration.

Jetzt starten wir die App um zu sehen, wie es aussieht. Um das zu machen, wählen Sie "Debuggen" in dem Visual Studio-Menü und wählen "Starten ohne Debuggen".

Dadurch wird die App für Sie im Simulator gestartet.

Ich kann im Simulator navigieren, wenn ich nach Links und Rechts wische. Ich kann auf einer Detailseite klicken oder auf einem Menüpunkt “Hotline-Nummer” und testen, was passiert.

Wenn ich fertig mit testen bin, kann ich den Simulator schließen.

Jetzt möchte ich in Visual Studio das Windows 8.1 App mit Code anpassen.

Ich möchte eine weitere Kontaktmöglichkeit für die App-Hotline in dem Menü einbauen. Wir können auch die Hotline mit Skype anchatten. Um das zu machen, passen wir die “MSDNHotlineDataSource.cs” Datei an.

Ich gebe den folgenden Code unter “private readonly IEnumerable<MenuSchema> _data = new MenuSchema[]” ein.

Ich teste meine Änderungen in dem Simulator. Ich lege das Windows 8.1 Projekt als Standardprojekt fest und klicke auf Strg+F5. Ich navigiere zu dem MSDN Hotline-Menü und klicke auf “Skype”. Die Skype-App wird gestartet und die MSDN Hotline wird angerufen.

Jetzt möchte ich mehr Info über die MSDN Tech-Advisors anzeigen. Ich öffne die Datei “TechAdvisorsViews.xaml”.

Wir wollen jetzt das “<DataTemplate x:Key="TechAdvisorsItem">” Element bearbeiten.

Ich definiere ein weitere Reihe und setzte die Höhe auf “Auto”.

Ich möchte die Twitter-Handle von den Tech-Advisors zeigen. Die Daten gibt es schon in der Collection aber ich habe es nicht verwendet. Ich füge ein TextBlock in userem “TechAdvisorsItem” Data Template hinzu.

<TextBlock Grid.Row="3" Margin="10, 4" Style='{StaticResource ItemSubheaderText}' VerticalAlignment='Top' Text='{Binding Twitter, Converter={StaticResource TextPlainConverter}, ConverterParameter=280}' />

Jetzt prüfe ich, ob meine Änderungen funktioniert haben. Ich drücke noch mal auf Strg+F5. Mein Windows 8.1 Projekt wird erstellt und bereitgestellt.

Ich navigiere zu den Tech-Advisors Seite und schaue, ob die Twitter-Info auch angezeigt ist. Es ist da!

Jetzt ist die App fertig! In dem nächsten Blogeintrag erzähle ich, wie man App in den Stores veröffentlichen können.

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen

Ich starte Windows App Studio in meinem Browser unten https://appstudio.windows.com, logge ich mich ein und klicke “Generate” auf dem Projekt “MSFT News für Geeks”.

Die Information für meine Windows Phone 8 App steht momentan auf der “Generate” Seite. Um eine Windows 8.1 und Windows Phone 8.1 App zu generieren, klicke ich wieder auf „Generate“.

Ich wähle dieses Mal die Windows 8.1 und Windows Phone 8.1 Variante aus und aktiviere das “Installable packages” Kontrolle. Ich klicke auf “Generate”, um die App zu generieren.

Dieses Mal kann das Generieren ein bisschen länger dauern.

Wenn App Studio fertig ist, finde ich unten auf der Generate-Seite das installierbare Paket unter “Installable packages”.

Wenn ich der App auf einem Windows Phone 8.1 Handy live testen möchte, muss ich ein Handy mit Windows Phone 8.1 darauf haben. Allerdings funktioniert es aktuell nicht. Das Windows App Studio Team versucht das Problem zu finden und zu reparieren. In der Zwischenzeit können wir eine Windows Phone 8 Version von der App generieren und ausprobieren, wie wir es gerade gemacht haben oder wir können auch die Publish Package mit dem Windows Phone App Deployment Tool in der SDK installieren. Eine andere Option ist der Quellcode runterzuladen und in dem Simulator zu testen. Ich schreibe mehr Info rund um den Simulator in dem nächsten Blogeintrag.

Auch wenn Windows Phone 8.1 nicht funktioniert, kann ich die Windows 8.1 Version via Sideloading auf meinem Rechner live testen.

Bevor Sideloading eine Windows App Studio-App auf Ihrem Windows-Gerät, müssen Sie das Zertifikat bereitstellen. Genau wie mit dem Windows Phone 8 App, finde ich das Zertifikat auf dem Windows App Studio “Generate” Seite unter “Prerequisites”

Sonst bekomme ich einen Link zu dem Zertifikat in einer Email von Windows App Studio Team.

Dieser Prozess muss einmal auf jedem Gerät ausgeführt werden. Es gibt ein Powershell-Skript, um die Installation des Zertifikats zu erleichtern.

Zuerst müssen Sie die Add-RootCertificate.zip-Datei herunterladen.

Und auf dem Rechner lokal speichern.

Extrahieren Sie die Zip-Datei.

Machen Sie ein Rechtsklick auf der Datei Add-RootCertificate.ps1 und wählen Sie "Mit PowerShell ausführen". Ich klicke “Öffnen” auf der Sicherheitswarnung.

Danach folge ich die Anweisungen. Ich klicke auf die Eingabetaste, um den Vorgang fortzusetzen. Ich akzeptiere den UAC Eingabeaufforderung.

Ich gebe “M” ein, um die Skript ein mal auszuführen.

Ich gebe “Y” ein, um zu bestätigen, dass ich fortfahren möchte.

Das Zertifikat wird beim ersten Mal installiert. Danach bekommen Sie eine Nachricht, dass das Zertifikat schon installiert ist.

Dieses Skript funktioniert nicht auf Windows-RT Geräte und Sie müssen es manuell auf einem RT-Gerät installieren. Anweisungen dazu finden Sie auf der Windows App Studio How To Seite.

Sideloading auf einem Windows-Gerät erfordert, dass Sie das Zertifikat installiert haben und ein kostenloses Entwickler-Konto in Windows Store haben. Es gibt ein PowerShell-Skript, das diese Anforderungen für Sie überprüft.

Auf der Windows App Studio Generate-Seite klicke ich auf dem “Windows 8.1 installable package” Link unter “Installable packages”.

Ich speichere den StoreApp.zip Datei auf meinem Rechner.

Ich extrahiere die Zip-Datei.

Ich mache ein Rechtsklick auf der “Add-AppDevPackage.ps1” Datei und wähle “Mit PowerShell ausführen” aus.

Ich drücke auf “Öffnen”, um das PowerShell-Skript zu starten und folge die Anweisungen.

Das Skript prüft nach, ob Sie das Zertifikat installiert haben und Sie eine kostenlose Entwickler Lizenz haben.

Wenn Sie keine aktuelle Entwicklerlizenz haben, werden Sie aufgefordert, eine zu beantragen. Wenn alles OK ist, wird die App installiert.

Wenn das Skript fertig ist, schaue ich, ob meine App richtig installiert worden ist. Ich gehe zu meinem Startbildschirm und gucke unter alle Apps. Da ist sie – MSFT News für Geeks!

Ich kann meine App benutzen und testen.

In meinem nächsten Blogeintrag, zeige ich, wie wir den Quellcode für die App herunterladen können und in Visual Studio erweitern können.

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen

Ich starte Windows App Studio in meinem Browser unten https://appstudio.windows.com, logge ich mich ein und klicke “Edit” auf dem Projekt “MSFT News für Geeks”.

Als nächstes wollen wir die App generieren. Um das zu machen, klicke ich auf “Finish”.

Hier sehen wir noch Mal ein Preview von meiner App auf einem Handy und einem Tablet und ich kann mit der Vorschau interagieren.

Wenn ich meine App generiere, kann ich 3 verschiedene Pakete zum Herunterladen auswählen:

1. Download Package ist ein sofort installierbaren Paket für Windows Phone 8 oder Windows 8.1. Ich kann die App selbst auf einem echten Gerät testen oder die App mit Freunde oder Bekannte teilen.

2. Publish Package ist ein XAP-Datei für Windows Phone 8 oder ein APPX-Datei für Windows Store, die ich hier runterladen kann und in dem Store veröffentlichen.

3. Source Code Package ist der komplette Quellcode von der App, den wir in Visual Studio bearbeiten können.

In diesem Blogeintrag beschäftige ich mich mit dem Download Package.

Ich bin zufrieden mit meiner App und klicke auf „Generate“.

Jetzt muss ich mich entscheiden, was ich generieren möchte. Ich kann eine Windows Phone 8 App oder ein Windows 8.1 und Windows Phone 8.1 mit einem Universal-App-Projekt generieren. Mit beiden Optionen könnte ich die 3 Pakete zum Herunterladen generieren.

Ich möchte jetzt ein Windows Phone 8 App generieren und die App via Sideloading auf meinem Handy testen.

Ich aktiviere den “Installable packages” Generation-Typ und klicke auf dem “Windows Phone 8” Button. Danach drucke ich auf “Generate”.

Die App zu generieren dauert nur ein paar Minuten.

Wenn es fertig ist, sehe ich die Pakete unter „Windows Phone 8 Packages.“

Wenn die App generiert ist, bekommen ich eine Email von Windows App Studio.

Bevor ich meine App auf meinem Handy installieren kann, muss ich ein Zertifikat installieren. In der Email von dem Windows App Studio Team ist ein Link zu dem Zertifikat. Ich installiere jetzt das App Studio Zertifikat von der Email und klicke der Link „(click here)“ in der Email.

Sonst finden Sie das Zertifikat auf der Windows App Studio Generate-Seite unter “Prerequisites”.

Wenn ich auf dem Pfeil klicke, habe ich die Möglichkeit, das Zertifikat via QR-Code oder ein “Download” Link zum Herunterladen.

Ich muss mich jetzt mit meiner Microsoft Konto, die ich für Windows App Studio verwendet habe anmelden.

Dann klicke ich auf “Öffnen”, um die Datei zu öffnen.

Die Zertifikat-Datei wird heruntergeladen.

Jetzt muss ich ein Unternehmensbereichskonto hinzufügen und klicke auf “Hinzufügen”. Das Konto wird im Hintergrund hinzufügt.

Auf diesem Bildschirm, klicke ich ein mal darauf:

Hinweis - Ich bekomme keine Bestätigung, dass das Zertifikat installiert worden ist aber wenn ich kein Fehler bekomme, war die Installation erfolgreich. Ich muss nicht wieder ein Unternehmensbereichskonto hinzufügen.

Jetzt möchte ich die App auf meinem Handy installieren. Ich klicke auf dem Lupe-Symbol und starte die Bing Suche.

Ich klicke auf dem Auge-Icon hier unten.

Ich halte die Handy-Kamera in der Richtung von QR-Code auf der Windows App Studio “Generate” Seite. Bing scannt den QR-Code automatisch ein.

Wenn Bing dieser QR-Code erfasst hat, zeigt es einen Link, um die Installation zu starten.

Ich klicke auf “Installieren”.

Danach tippe ich auf dem Bildschirm, um die App-XAP zu öffnen.

WICHTIG! Wir bekommen keine Bestätigung, dass die App installiert worden ist aber ohne Fehlermeldung hat es geklappt. Sie müssen nicht noch Mal die App installieren. Um sicher zu sein, kann ich auf der App-Liste gehen und schauen, ob die App da steht.

Jetzt können wir die App starten und testen auf einem echten Gerät.

Diese Zertifikat und QR-Code kann ich nicht nur selber ausprobieren sondern ich kann sie an weitere Personen weitergeben.

In dem nächsten Blogeintrag, generiere ich Windows Phone 8.1/ Windows 8.1 App und teste sie auf einem Windows 8.1 Gerät.

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen

Ich starte Windows App Studio in meinem Browser unter https://appstudio.windows.com, logge mich ein und wähle das Projekt „MSFT News für Geeks“ aus.

Auf der Registerkarte „Tiles“ kann ich das Aussehen und Verhalten von Kacheln ändern. Eine Kachel ist ein Bild, das die App darstellt und fungiert als eine Verknüpfung auf dem Startbildschirm des Geräts.

App Studio bietet ein paar Vorlagen für Kacheln an:

Die Flip-Vorlage (Flip Template) hat eine Vorderseite und eine Rückseite und wechselt regelmäßig zwischen den beiden.

• Das kleine Bild ist ein 160 x 160 PNG und sollte das gleiche wie Ihr Application Icon sein.
• Das vordere Bild ist ein 340 x 340 PNG und kann eine größere Größe des kleinen Bildes sein oder ein anderes Bild, das zu der App passt.
• Das hintere Bild ist ein 715 x 340 PNG Panorama Stil Bild.

Die Zyklus-Vorlage (Cycle Template) wechselt durch bis zu neun Bilder aus einer eingegebenen Collection in der App. In meiner App habe ich eine Collection mit Fotos von den MSDN Tech Advisors. Ich wähle es aus, so dass wir sehen können, wie es aussehen würde.

Wenn Sie ein App Studio Data Service (Dynamic Resources) für den Collection verwendet haben, können Sie die Bilder des Datendiensts in App-Studio ändern und es wird automatisch bei allen Benutzer aktualisiert.

Die Iconic-Vorlage (Iconic Template) ist statisch und zeigt ein einzelnes Bild mit anpassbarem Text für drei verschiedene Größen der Kacheln.

Für meine App werde ich die Flip-Vorlage auswählen und es konfigurieren wie folgt.

Die letzte Konfiguration-Optionen für meine App Studio-App sind für Splash und Lock Screen Hintergrund Bilder. Diese können auf der “Splach & Lock” Registerkarte.

Der Splash-Screen wird zeigt, während die App geladen wird und der Lock Screen oder Sperre-Bildschirm wird angezeigt, wenn ein Benutzer des Gerätes sperrt. Wenn Sie Ihre eigenen benutzerdefinierten Bilder erstellen, sollten sie eine Große von 720 x 1280 Pixel für Windows Phone und 620 x 300 Pixel für Windows 8 haben. Sie können diese Bilder von Ihrem Computer oder von Ihrem OneDrive-Konto hochladen. Für den Windows 8 Splash Screen, haben Sie die Option, eine Hintergrundfarbe zu setzen.

Ich wähle jetzt die Bilder aus für mein Splash und Lock Screen und ich speichere die Änderungen.

In dem nächsten Blogeintrag, sehen wir, wie wir unsere App generieren und veröffentlichen können.

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen

Ich starte Windows App Studio in meinem Browser unter https://appstudio.windows.com, logge mich ein und wähle das Projekt „MSFT News für Geeks“ aus.

Alles was wir bis jetzt gemacht habe, war auf der “Content” Registerkarte. Jetzt klicke ich auf der „Themes“ Registerkarte, um die Farbgebung anzupassen.

Auf der Themes-Seite kann ich die Farben vom Text, Hintergrund, und Application Bar ändern oder ich kann ein Bild für den Hintergrund auswählen.

Ich kann entweder die Dark-Style oder Light-Style verwenden. Hier habe ich die Light-Style ausgewählt. Die Vorschauanzeige wird aktualisiert und reflektiert meine Auswahl.

Ich kann auch einen benutzerdefinierten Custom-Style auswählen, wo ich eigene Farben auswählen kann. 

Wenn Sie auf dem “Windows Preview” Button klicken, dann sehen Sie das Vorschaubild.

Wenn ich ein Bild als App Hintergrund verwenden möchte, wähle ich „Background Image“ aus.

Ich könnte ein App Studio integrierten Hintergründe verwenden. Hier sehen wir ein paar von den Bilder zum Auswahl.

Sonst kann ich meine eigene PNG-Bild mit der Größe 1280 x 800 Pixel vom meinen Rechner oder von meinem OneDrive hochladen.

Für dieser App möchte ich eine schwarze Hintergrund, eine lila Application Bar und weißer Text haben.

Wenn Sie den benutzerdefinierten Custom-Style auswählen, achten Sie darauf, dass Ihr Text lesbar bleibt. Wenn Sie ein dunkles Bild oder Hintergrundfarbe verwenden, wird ein heller Text empfohlen. Wenn Sie ein helles Bild oder Hintergrundfarbe auswählen, benutzen Sie dann lieber einen dunklen Text.

So einfach ist es meine Apps Aussehen anzupassen.

In dem nächsten Blogeintrag setzen wir die Kacheln für die App.

Dieser Blogeintrag ist ein Teil von der Windows App Studio Step-By-Step Anleitung:

1. Windows App Studio Überblick
2. Einloggen und Vorlagen
3. App erstellen und YouTube-Inhalt hinzufügen
4. Weitere Basic-Datenquellen
5. Menü hinzufügen
6. Collection
7. Themes
8. Tiles
9. Windows Phone 8 App generieren und auf einem Handy live testen
10. Windows 8.1 App generieren und auf einem Gerät live testen
11. Quellcode herunterladen und erweitern
12. Publish Info und im Store veröffentlichen