Programmieren f√ľr Einsteiger - Auf dem Weg zur eigenen App | Windows Entwickler Forum | Forum

Avatar

Denke √ľber eine Registrierung nach
Gast

sp_LogInOut Login sp_Registration Registrieren

Registrieren | Passwort vergessen?
Erweiterte Suche

— Forumbereich —




— √úbereinstimmung —





— Forum Optionen —





Minimale Suchwortlänge beträgt 3 Zeichen - die maximale 84

sp_Feed Sprechblase-Icon-gr
Programmieren f√ľr Einsteiger - Auf dem Weg zur eigenen App
Keine Berechtigung um zu posten
18. Mai 2016
12:55
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

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.

18. Mai 2016
14:04
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

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.

28. Mai 2016
16:39
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

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.

28. Mai 2016
17:20
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

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.

30. Mai 2016
21:29
Avatar
Benski
Administrator
Forenbeiträge: 655
Mitglied seit:
21. Oktober 2015
sp_UserOfflineSmall Offline

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.

1. Juni 2016
16:06
Avatar
shb
Neues Mitglied
Mitglied
Forenbeiträge: 1
Mitglied seit:
29. Mai 2016
sp_UserOfflineSmall Offline
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

7. Juni 2016
8:46
Avatar
affeldt
Neues Mitglied
Mitglied
Forenbeiträge: 2
Mitglied seit:
6. März 2016
sp_UserOfflineSmall Offline

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 

Die folgenden User sagen Danke an affeldt f√ľr seinen Post:

Benski
9. Juni 2016
13:02
Avatar
carrabelloy
Mitglied
Mitglied
Forenbeiträge: 3
Mitglied seit:
25. März 2016
sp_UserOfflineSmall Offline

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

Die folgenden User sagen Danke an carrabelloy f√ľr seinen Post:

Benski
Zeitzone des Forums: Europe/Berlin

Am meisten Mitglieder online: 388

Zurzeit Online:
18 Gast/Gäste

Momentan betrachten diese Seite:
1 Gast/Gäste

Top Autoren:

D3f3kt: 294

STP: 68

LinusWP: 65

MichaG: 58

Morbus86: 50

Abdullah: 48

Lightspeed: 43

Marcel: 42

Elektroenchen: 39

Tobias: 39

Mitgliederstatistiken

Gastbeiträge: 4

Mitglieder: 6934

Moderatoren: 3

Administratoren: 3

Forumsstatistiken

Gruppen: 4

Foren: 23

Themen: 1142

Beiträge: 4640

Neuste Mitglieder:

heri68, hinok1, duderino, hanno47, portboy, nfriderici, redniwo, bellacampen, hotte2018, jolee

Moderatoren: Leonard Klint: 53, Sigi: 560, Ulrich B.: 204

Administratoren: : 142, Königsstein: 48, Benski: 655