Windows App Studio Step-By-Step – App erstellen und YouTube-Inhalt hinzufügen


In den ersten Teile von der Step-By-Step Anleitung habe ich Windows App Studio vorgestellt und wir haben die Meine Projekte Seite und Vorlagen von Windows App Studio kennengelernt. In diesem Teil, verwende ich die leere App Vorlage und fülle sie mit YouTube-Inhalt

Ich starte Windows App Studio in meinem Browser unter http://appstudio.windows.com. Wenn ich eingeloggt bin, klicke ich oben rechts auf „Start new project“.

image

Wie ich in dem letzten Blogbeitrag erklärt habe, gibt es viele Vorlagen, die ich als Grundlage für meine App benutzen kann. Für dieses Video werde ich eine neue App erstellen und wähle dafür eine leere Vorlage – „Empty App“ - aus.

image

Die Vorschau ist nicht so aufregend, weil wir unsere App mit Inhalt noch nicht gefüllt haben. Ich klicke auf „Create“, um meine App zu erstellen.

image

Wir sehen jetzt mein Dashboard mit vier Registerkarten, wo ich meine App gestalten kann und ich kann hin und her zwischen die Registerkarten wechseln.

image

Ich möchte jetzt eine App mit Microsoft Nachrichten und Information für Entwicklern erstellen. Oben links kann ich meine App-Information setzten. Meine App heißt: MSFT News für Geeks

image

Ich brauche auch eine PNG-Datei als Logo für meine App. Um diese Datei zu setzen, klicke ich auf dem Windows Bild oben Links neben der App-Titel. Ich kann eine Datei von meinem Rechner oder mein OneDrive auswählen. Ich habe auch die Möglichkeit ein Bild von App Studio (App Studio resources) auszuwählen. Allerdings wird es empfohlen, ein einzigartiges Bild für jede App zu benutzen.

image

Sie können auch ein Logo mit einem kostenlosen Programm wie Paint selbst erstellen oder es gibt kostenfreie Icons auf Websites wie…

Ich habe selbst ein Logo erstellt und ich wähle das Bild aus. Obwohl ich ein PNG-Bild verwende, können Sie auch JPEG-Bilder hochladen und App Studio konvertiert sie in dem PNG-Format.

image

Während ich die Änderungen mache, wird das Vorschaubild aktualisiert. Dadurch können Sie sicherstellen, dass Ihre Daten korrekt angezeigt werden, wenn die App auf ein echtes Gerät installiert wird. Die Vorschau ist nicht perfekt, aber Sie bekommen eine gute Idee, wie Ihre App aussehen wird.

Als nächstes möchte ich Datenquellen zu meiner App hinzufügen. Eine Datenquelle ist einfach die Inhalt, die in einem Bereich in meiner App angezeigt wird. Hier im Dashboard kann ich mein App-Inhalt definieren.

image

Eine App, die mit App-Studio erstellt worden ist, ist in Sections oder Bereiche organisiert: wo jeder Bereich eine bestimmte Art von Daten enthält. Benutzer Ihrer Anwendung können durch die Bereiche navigieren, indem Sie auf der Hauptseite nach links und rechts wischen.

Ich kann einen neuen Bereich erstellen, indem ich auf die Datenquellen – entweder „Basic“ oder „Advanced“, die ich für den Bereich verwenden möchte klicke. Beachten Sie, dass eine App auf insgesamt sechs Bereiche beschränkt ist, so dass es eine gute Idee ist, im Voraus zu planen, was Ihre Bereiche sein werden (obwohl Sie können zurückkommen und Bereiche hinzufügen oder entfernen).

Unten gibt es die Standard-Datenquellen, die Inhalte wie Bilder, Videos und News-Artikel zeigen.

Jetzt werde ich einen Bereich hinzufügen, der eine Sammlung von Videos von YouTube enthält. Ich klicke auf dem Plus-Zeichen, um die YouTube-Datenquelle in die App zu bringen.

image

Ich gebe dem neuen Bereich einen Name ein „Videos“ und trage einen YouTube-Benutzernamen oder einen Suchbegriff ein. Ich will MSDNOnlineGermany benutzen. In diesem Fall klicke ich auf „Confirm“ zu bestätigen.

image 

Wenn ich fertig bin, dann klicke ich auf „Save" auf der Hauptseite, um meine Änderung zu speichern.

image

Wenn ich auf „Edit“ klicke, kann ich den Bereich bearbeiten und weiter anpassen.

image

Auf der “Edit Section” Seite kann ich wählen, wie die Layouts für die Liste und Detail Seiten im Bereich aussehen sollten. Für die Liste-Seite wähle ich das Layout mit dem etwas größeren Thumbnail aus.

image

Und für die Detailseite wähle ich ein Layout mit einem Bild und kleineren Titel aus.

image

Jetzt muss ich die „Bindings“ auf der Detailseite setzten. Binding bedeutet Bindung und es verbindet einen Teil von einer Datenquelle zu einem bestimmten Teil von einer Seite. Sie können sehen, welche Optionen verfügbar sind, wenn Sie auf dem Binding-Icon klicken.

image

Für “Title” wähle ich Title aus und für “Description” wähle ich Summary aus. Oben von den möglichen Layouts gibt es einen weiteren Feld “Page Titel”. Hier kann ich ein “Fixed Text” eingeben und nennen es einfach “Videos”

image

Unten rechts habe ich die Möglichkeit “Page extras” oder zusätzliche Funktionalität in der App Bar, wie „Share“, „Text to Speech“ oder „Pin to Start“ zu aktivieren oder deaktivieren. Wenn die Extras aktiviert sind, gibt es die Optionen „Read“, „Pin“ und „Share“ in der App Bar. Wenn man auf „Read“ druckt, wird das Gerät den Inhalt laut lesen. Mit „Pin“ wird einer Link zu dieser Seite auf dem Start-Bildschirm angeheftet und „Share“ bietet die Möglichkeit die Seite zum Teilen. Für die TextToSpeech-Option kann man eingeben, welches Element auf der Seite das Gerät laut lesen sollte.

image

Ich kann auch die Kriterien für mein YouTube-Datenquelle ändern, in diesem Fall die Suche-Eingabe oder Benutzername, wenn ich auf „Data“ gehe.

image

Wenn ich mit dem Ergebnis zufrieden bin, klicke ich auf Save zu speichern und klicke auf dem Pfeil, um zurück zu das Dashboard zu kommen.

Wir sehen die Änderungen, die wir gemacht haben auf dem Phone Vorschaubild. Wenn ich möchte ein Preview von der Windows App sehen, klicke ich auf dem “Windows Preview” Button.

image

Mit dem Windows Preview kann ich interagieren genau wie mit dem Windows Phone Preview.

image

In dem nächsten Blogeintrag, zeige ich wie wir weitere Basic-Datenquellen in der App hinzufügen 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
Skip to main content