Dokumentation: Erstellung einer Blog App für Windows 8 Kentaro Wakayama, medialesson GmbH 2.4.2013
Table of Contents 1. Einführung... 2 2. Voraussetzung... 2 2.1 Allgemeine Informationen... 2 2.2 Wordpress... 2 2.3 Microsoft Advertising SDK... 2 2.4 Bilder... 2 2.5 Compass... 2 3. Vorgehensweise... 3 3.1 package.appxmanifest... 3 3.2 SCSS... 3 3.3. resources.resjson... 3 3.4 data.js... 3 3.5 About... 4 4. Test... 4 5. Storepackage... 4
1. Einführung Einfache Dokumentation zum Erstellen einer Windows 8 Applikation mit dem BlogApp Framework. 2. Voraussetzung 2.1 Allgemeine Informationen Für die Windows-App sind folgende Informationen erforderlich: 1. App-Name 2. Herausgeber 2.2 Wordpress Wordpress Blog mit installierter JSON API http://wordpress.org/extend/plugins/json-api/ 2.3 Microsoft Advertising SDK Falls in der Anwendung Werbung angezeigt werden soll, muss das Microsoft Advertising SDK installiert werden (http://advertising.microsoft.com/ads-in-apps). Die Werbung wird im Format 250 x 250 px erstellt. Für die App sind folgende zwei IDs notwendig: 1. adunitid 2. applicationid 2.4 Bilder Erstellen Sie mit einer Bildbearbeitungssoftware folgende Grafiken unter Beachtung der Abmessungen. Bezeichnung Dateiname Größe (Breite x Höhe) Square Tile Logo logo_150x150.png 150 x 150 px Wide Tile Logo widelogo_310x150.png 310 x 150 px Store Logo storelogo_50x50.png 50 x 50 px Small Logo smalllogo_30x30.png 30 x 30 px Splashscreen splashscreen_620x300.png 620 x 300 px Main Hub Image mainhublogo_62xx.png 62 x X px About Image about.png 250 x 250 px Es ist wichtig, dass alle Bilder wie in den Vorrausetzungen benannt sind. So müssen die Namen nicht im Programmcode verändert werden. 2.5 Compass Um später Design-Anpassungen schnell zu bewerkstelligen, wurden verschiedene Variablen für das CSS erstellt. Diese werden in SCSS gesetzt und mit Hilfe von Compass in CSS-Dateien umgesetzt.
Eine Installationsanleitung für Compass unter Windows finden Sie unter: http://www.impressivewebs.com/sass-on-windows/ 3. Vorgehensweise 3.1 package.appxmanifest Öffnen Sie die Datei package.appxmanifest und navigieren Sie zu dem Reiter Application UI. Tragen Sie den Namen der App in Display name und Short name ein. Unter dem Abschnitt Splash Screen tragen Sie im Feld Background color die Hintergrundfarbe (Hex-Format) des Splashscreens ein. Wechseln Sie nun zum Reiter Packaging. Erstellen Sie in Visual Studio eine neue GUID (TOOLS->Create GUID) geben Sie diese unter Package name ein. Füllen Sie in Publisher display name mit dem Namen des Herausgebers und Package display name mit dem Namen der Anwendung aus. 3.2 SCSS Die SCSS Dateien befinden sich im sass -Ordner. Um die Farben anzupassen öffnen Sie die _base.scss -Datei. Sie sehen nun die verschiedenen Variablen die später in das CSS übersetzt werden. Damit die Dateien später zu CSS werden, müssen Sie per Kommandozeile in den Projekt-Ordner navigieren und Compass mit compass watch starten. Wollen Sie nun beispielsweise den Hintergrund der Anwendung weiß einstellen, so ändern Sie den Wert der Variable $bg_color zu #ffffff. Wenn Sie die Datei speichern, bemerkt dies Compass und generiert Ihnen die neuen CSS-Dateien in den css -Ordner. Wichtig: Wenn Sie Compass verwenden werden Ihnen bei jeder Änderung einer SCSS -Datei alle CSS -Dateien ersetzt. Damit werden auch Änderungen, welche Sie in den CSS -Dateien gemacht haben überschrieben. D.h.: Änderungen müssen immer in der entsprechenden SCSS -Datei vorgenommen werden. 3.3. resources.resjson Die resources.rejson -Datei befindet sich in strings/de/. Hier ist es wichtig unter wordpressurl Ihre URL einzutragen mit der Sie die API aufrufen. Des Weiteren müssen Sie unter privacypolicy Ihre Adresse zur Datenschutzerklärung und unter sitenote Ihren Link zu Ihrem Impressum eintragen. Falls Sie Werbung in Ihre App einbinden möchten, füllen Sie die Werte für adunitid sowie applicationid aus. 3.4 data.js Die Datei data.js finden Sie unter js/. Diese müssen Sie nur öffnen, wenn Sie Werbung einbinden möchten. Ist dies der Fall Ändern Sie den Wert der Variable noad (Zeile 8) in false um.
3.5 About Ersetzten Sie die about.png mit Ihrem About-Bild. Um den Text zu ändern müssen sie unter pages/home/ die home.html -Datei öffnen den geänderten Text an zwei Stellen eintragen ( Full-/Snap-View ). Suchen Sie die div -Elemente mit der Klasse about-big. Diese beinhalten jeweils ein Paragraph ( <p> ). Ersetzen Sie den Inhalt dieser Paragraphen mit Ihrem Text. 4. Test Starten Sie Ihre Anwendung aus Visual Studio heraus mit der Taste F5. Nun können Sie die App entsprechend testen. 5. Storepackage Wenn Sie Ihre Anwendung erfolgreich starten konnten, soll diese natürlich auch dem Windows Store hinzugefügt werden. Die folgenden Schritte setzen einen Store Account und einen reservierten Appnamen voraus. (Weitere Informationen, siehe hier: http://msdn.microsoft.com/dede/library/windows/apps/jj657972.aspx#individual_checklist ) Ändern Sie zunächst die Build-Configuration von Debug auf Release. Klicken Sie in Visual Studio mit der rechten Maustaste auf Ihre Projektdatei. Wählen Sie in dem geöffneten Kontextmenü den Punkt Store an. Selektieren Sie den Punkt Create App Packages In der darauffolgenden Maske melden Sie sich mit den Ihnen bekannten Zugangsdaten an. Nach erfolgter Anmeldung wird eine Liste mit den von Ihnen reservierten App-Namen geladen. Selektieren Sie den richtigen Namen und folgen Sie mit einem Klick auf Next zum nächsten Schritt.
Behalten Sie die vorausgewählten Einstellungen bei und erstellen Sie das AppPackage mit einem Klick auf Create. Im anschließenden Prozess werden Sie gefragt, ob Sie das Package für den Store verifizieren möchten. Führen Sie auch diesen Schritt durch. Wenn das Testergebnis in Ordnung ist, können Sie das erstellte Package über den AppStore bereitstellen.