Forum

Programmieren für Einsteiger - Auf dem Weg zur eigenen App  

  RSS
Benski
(@benski)
Famed Member

Unser Communitymitglied Julian will das Projekt wieder aufnehmen, euch bei WindowsUnited eine Anleitung zu stellen, wie ihr eure eigene App für das Windows-Ökosystem programmieren könnt. Da die Windows Gemeinschaft neue Programmierer braucht, kommt sie gerade zur rechten Zeit.

Es spielt keine Rolle, ob ihr bereits Erfahrungen beim programmieren habt, oder absolute Neueinsteiger seid.
Diese und alle folgenden Anleitungen sind an alle gerichtet, die Spaß an den Apps sowie deren Erstellung für Windows 10 haben. In diesem Thread sammeln wir alle Anleitungen, welche Julian Schritt für Schritt bei uns, auf unserem Blog, nieder schreibt.

Eigentlicher Gedanke dieses Threads ist es, Fragen und Probleme zur Anleitung hier stellen zu können, damit euch Julian oder andere erfahrene User unter die Arme greifen können.

Ich hoffe ihr habt Spaß beim Lesen und fühlt euch davon inspiriert.

AntwortZitat
Veröffentlicht : 18. Mai 2016 14:55
Benski
(@benski)
Famed Member

Teil 1: Los geht´s!

 

Um loszulegen braucht ihr einen Zugang zum Windows App Studio. Dies kann z.B. euer Windows-Konto sein. Um die App später im Windows Store zu veröffentlichen, braucht ihr dort ein Entwicklerkonto. Dies kann im Microsoft Dev Center eröffnet werden (Entwicklerkonto anfordern). Die damit verbundenen Kosten sind gering. Zusammen habt ihr anschließend die Möglichkeit, eigene Apps im Windows Store zu veröffentlichen.

Bis zur nächsten Ausgabe sind also dies eure Hausaufgaben:

  1. Konto im Windows App Studio eröffnen
  2. Entwicklerkonto im Microsoft Dev Center eröffnen
  3. Sich Gedanken über eine App machen, die vorhandene Informationen, z.B. eines Vereins, einer Institution o.Ä., zugänglich machen soll.

Den ausführlichen Artikel zum ersten Teil "Los gesht's", findet ihr auf unserem Blog.

AntwortZitat
Veröffentlicht : 18. Mai 2016 16:04
Benski
(@benski)
Famed Member

Teil 2: Die App entsteht

 

Zum Beginn der Arbeit an einer App sollte man diese im Windows Store anmelden:

  • Einloggen im Dev Center
  • Dashboard anwählen und dann Neue App erstellen
  • Name der App eintragen
    • bei der Namensgebung dürfen keine Namensrechte verletzt werden
    • Zusätze wie „Fan-„ oder „Info-„ o.Ä. sind ganz sinnvoll
  • für die Veröffentlichung der App im Windows Store kann man Stichwörter angeben
  • Nach Anmeldung und Registrierung des App-Namens wartet der Store auf das Hochladen der ganzen Daten (Übermittlung)
  • Dev Center nicht schließen --> Daten abrufen
    • in einem zweiten Tab im Browser das App Studio öffnen
    • anmelden
    • Start new auswählen --> Windows10
    • Vorlage Empty App W10

Apps, die mit App Studio erstellt werden, sind in Sections aufgeteilt.
Jede davon zeigt bestimmte Inhalte an, z.B. Rss-Feeds, YouTube-Videos usw.

Rss-Feed
das sind Kurznachrichten, die frei verfügbar sind und von vielen Institutionen angeboten werden, z.B. Zeitungen, Radiostationen, Vereinen usw. Jeder Rss-Feed hat eine bestimmt URL, die wir finden und kopieren müssen.

  • im App Studio auf Rss klicken
  • kopiert im folgenden Fenster die URL des Feeds ein
  • gebt dem Feed einen Namen
    • Fehlerhafte URLs werden bemängelt
  • mit Confirm übernehmen
  • im rechten Vorschaufenster wird der Content angezeigt
  • Änderungen immer mit Save (oben rechts) speichern

Das ist auch schon das Grundprinzip von App Studio.
Man schreibt keinen Code, sondern füttert die App mit Informationen, woher Content geholt werden soll, der mit Hilfe der App dann angezeigt wird. Ein Blick auf Add sections zeigt, woher eine App Content beziehen kann; die Auswahl ist recht groß.

Nachster Schritt:
unsere App mit Daten aus dem Windows Store bzw. dem Dev Center versorgen, um die App mit dem Store zu verknüpfen

  • im App Studio Setting öffnen
  • im Dev Center die App-Verwaltung öffnen und dort App-Identität wählen
    --> Das Dev Center hat nämlich Codes vorbereitet, die wir im App Studio eintragen müssen, um die Identität und Herkunft der App sicherzustellen.
  • der angezeigte Code Name, Herausgeber und PublisherDisplayName muss Stück für Stück in den entsprechenden Feldern in den Setting im App Studio eintragen werden (Copy&Paste)
  • zusätzlich App Display Name (=angemeldeter Name der App), die Sprache und eine Kurzbeschreibung der App

App-Icon

  • nach einem Bild oder einer Bildgrafik suchen, die frei von Rechten Dritter ist
  • am besten man nutzt eine selbst erstellte Grafik, Bild oder Foto
  • im App Studio auf den Platzhalter unter My projects klicken
  • nun auf Select a new image
  • Icon hochladen und ggf. zuschneiden
  • alles speichern (Save)

Fertig! Eure erste Mini-App ist fertig.

Wer mag, kann an dieser Stelle im App Studio auf Finish und Generate klicken und selber probieren.

 

An dieser Stelle wieder vielen Dank an Julian, für dieses Tutorial.
Eine noch ausführlichere Beschreibung mit den dazu passenden Screenshots findet ihr in seinem Artikel auf unserem Blog.

AntwortZitat
Veröffentlicht : 28. Mai 2016 18:39
Benski
(@benski)
Famed Member

Teil 3: Die App vervollständigen

 

Das Hinzufügen von Rss-Feeds zu unserer App war der erste Schritt Content zu generieren, der später in der fertigen App abgerufen werden kann. Ebenso einfach kann man z.B. Suchergebnisse von Bing hinzufügen.

  • Bing als nächste Section auswählen
  • vergibt einen Namen für die Section
  • wählt das betreffende Land aus (hier: Germany)
  • gibt den gewünschten Suchbegriff (z.B. Umweltbundesamt) ein
  • Anschließend Confirm und Save
  • es erscheint der nächste Bereich in der Vorschau
  • es kann sinnvoll sein, dem Bereich eine Hintergrundfarbe zu geben
  • diverse Einstellungen kann man im Config-Bereich der Section vornehmen

soll ein Hintergrundbild angezeigt werden, stellt ihr das im Bereich Themes ein

  • Rechte der jeweiligen Bildinhaber beachten
  • Lesbarkeit beachten (die leidet schnell unter Hintergrundbildern)
  • mit den verwendeten Farben experimentieren, bis man das optimale Ergebnis gefunden hat
  • unter More previews im Microsoft App Studio können die Ansichten auf dem Smartphone, dem Tablet und dem Desktop getestet werden

Videomaterial aus YouTube hinzufügen

  • Section YouTube auswählen
  • es müssen spezielle Zugangsdaten generiert werden
    man solltet dazu einen eigenen YouTube-Account bzw. Google-Account haben
    die App wird sich damit bei YouTube identifizieren und den Content in die App holen
  • Klickt auf Create new API Key
  • anschließend Create and maintain YouTube API Key
    man wird zur Google API Console geleitet, wo ihr euch mit eurem Account anmeldet
  • klickt auf Projekt erstellen
  • Namen vergeben
  • nach ein paar Sekunden (warten!) öffnet sich die Übersicht des Google API Managers
  • YouTube Data API auswählen

Zugangsdaten für Eure App erstellen

  • Aktivieren wählen und zu den Anmeldedaten
  • im ersten Absatz auf den Link API-Schlüssel klicken
  • Browser-Schlüssel wählen und erneut einen Namen für diesen Schlüssel vergeben
  • im nächsten Fenster wird der API-Schlüssel angezeigt, diesen markieren und kopieren
  • zum vorherigen Tab zurückkehren
  • den Schlüssel in das betreffende Feld einfügen und dann Validate auswählen
  • zum Tab zurück wechseln, von dem die API-Schlüssel-Erstellung gestartet wurde
  • Refresh anklicken
    Das Fenster wechselt und ihr könnt nun die noch fehlenden Angaben zum Content machen, z.B. den YouTube-Nutzernamen.
  • jetzt speichern und schon erscheint die YouTube-Section in der App

Es würde den Rahmen hier sprengen, für alle anderen Content-Module die genaue Vorgehensweise Schritt-für-Schritt zu erklären, zudem ändern sich ab und zu auch die Inhalte und die Vorgehensweise. Das Grundprinzip sollte hoffentlich klar geworden sein. Bitte probiert euch aus – auch ich habe das geschafft…und ich bin echt kein Profi!

 

die App generieren und aufs Handy zu bringen

  • Installer-App installieren
  • im App Studio auf Finish und Generate klicken
  • im darauf folgenden Fenster aktiviert ihr Installable packages
  • gebt einen Kommentar ein (z.B. erste Version)
  • kurze Zeit später wird die App erstellt (der echte Source-Code zur App wird generiert)
  • in der Zwischenzeit die Installer-App auf dem Handy starten
    • aus dem Menü die QR-Reader-Option auswählen
  • sobald die App generiert wurde, Get QR-Code anklicken
  • Code scannen, der Rest läuft automatisch

Anschließend könnt ihr eure App auf dem Handy starten. Glückwunsch!

Wieder vielen Dank an Julian, für dieses Tutorial.
Eine noch ausführlichere Beschreibung mit den dazu passenden Screenshots findet ihr in seinem Artikel auf unserem Blog.

AntwortZitat
Veröffentlicht : 28. Mai 2016 19:20
Benski
(@benski)
Famed Member

Im vierten und letzten Teil zur App-Erstellung mit Windows App Studio wollen wir die App noch mit einem LiveTile aufpeppen und die fertige App in den Windows Store übertragen.

Beginnen wir mit dem LiveTile:

  • wählt oben den Reiter Tiles
  • im nächsten Fenster wählt Live, Dynamic, eure Section und dann noch Peek
    --> Mit den verschiedenen Einstellungen kann man spielen. Peek finde ich am besten, da sich damit später auf dem Startscreen am meisten tut (Bilder und Texte wechseln sich ab).
  • nun muss man App Studio mitteilen, was genau im LiveTile angezeigt werden soll
  • unter Branding Name auswählen
  • bei Display Name den gewünschten App-Titel eintragen
    Tipp: Die Hintergrundfarbe der Tiles stellt ihr dort ein, wo man auch das App-Icon hochgeladen hat. Auch ein transparenter Hintergrund ist möglich.

  • zum Schluß abspeichern
  • App erneut generieren
  • nicht nur das Installable Package, sondern auch das Publish Package erstellen lassen
    --> In dem befinden sich dann die eigentlichen Apps (x86- und ARM-Paket) für Desktop und Mobile, sowie automatisch generierte Screenshots für den Store.
  • nach dem Download der Dateien diese in einem leeren Ordner speichern
  • im Browser das Dev Center öffnen und dort anmelden
    Hinweis:
    Während die Apps generiert werden, habt ihr Zeit, die alte Version vom Handy zu deinstallieren. Und ihr solltet unbedingt alles auf dem Handy nochmal alles prüfen, z.B. die Farbgestaltung, damit auch alles gut lesbar und stimmig ist.

  • Dashboard öffnen und auf die angemeldete App klicken
  • nun die Übermittlung starten
  • einzelne Formularpunkte ausfüllen
    --> Ganz wichtig ist der Punkt Beschreibung; hier gebt ihr die App-Beschreibung und die zur App gehörenden Suchbegriffe ein
  • Screenshots befinden sich bei den generierten Dateien
  • für die rechtlichen Hinweise ggf. auf eine existierende Webseite verlinken
  • die unterschiedlichen Icons kann man weglassen oder nachträglich hochladen
  • im Bereich Pakete ladet das x86- und das ARM-Paket hochladen, die vorher generiert wurden
    --> Nach dem Hochladen werden die Pakete analysiert und auf Stimmigkeit geprüft (Name, Herausgeber usw.).
  • der letzte Punkt (Hinweise zur Zertifizierung) kann frei gelassen werden
  • auf "An Store übermitteln" klicken
  • FERTIG

Die Prüfung und Einstellung der App in den Store dauert rund 16 Stunden und ihr werdet anschließend per Mail informiert.

 

So, ich hoffe, Ihr hattet ein wenig Freude und Spaß an diesem Mini-Workshop.

 

Und wieder ein mal vielen Dank an Julian, für dieses Tutorial.
Eine noch ausführlichere Beschreibung mit den dazu passenden Screenshots findet ihr in seinem Artikel auf unserem Blog.

AntwortZitat
Veröffentlicht : 30. Mai 2016 23:29
shb
 shb
(@shb)
Neues Mitglied
Ah, hier gibt es ja auch einen Thread zu dem Thema. Vielen Dank für deine tolle Anleitung.

Kann ich per App Studio auch irgendwie Zugriff auf den NFC Reader realisieren?

 

Lg

AntwortZitat
Veröffentlicht : 1. Juni 2016 18:06
affeldt
(@affeldt)
Neues Mitglied

Soweit ich weis, leider nein. Ich empfehle dir aber, dass du dich an den Support wendest, die reagieren meist innerhalb weniger Stunden (Zeitverschiebung nach USA) beachten: [email protected]

Julian 

AntwortZitat
Veröffentlicht : 7. Juni 2016 10:46
carrabelloy
(@carrabelloy)
Mitglied

Ich finde deine Ausführungen hier toll zumal das ich es verstehe und nachlesen kann. Doch die Seiten von Microsoft sind alle English was in der Programmierung wohl immer schon so ist. Doch ein wenig mehr an Kopiermöglichkeiten fehlen hier. Von Englischen Texten die ich mir dann übersetzen kann. Von daher mache weiter so Benski du gefällst mir. Wink

AntwortZitat
Veröffentlicht : 9. Juni 2016 15:02
Share:

Melde dich hier mit deinen Benutzerdaten an

Registriere dich hier für WindowsUnited

Passwort zurücksetzen

Bitte gebe Email oder Nutzername ein, um dein Passwort zurückzusetzen.

  
Arbeitet

Bitte Anmelden oder Registrieren