Immer auf den laufenden bleiben? Das geht am besten mit einer App, vor allem, wenn diese zu erstellen nur wenige Minuten dauert und kostenlos ist, oder? Hier zeige ich Ihnen, wie Sie aus jedem WordPress Blog / Webseite eine interactive App mit Benachrichtigung bei neuen Beiträgen erstellen können.
Die App ist nicht limitiert und erzeugt keine Kosten oder Folgekosten. Es gibt eine Pro-Option, welche jedoch nicht notwendig ist, dass die App folgende Features nutzen kann.
Screenshots und Live-Demo
Bilder sagen ja bekanntlich mehr wie Worte, deswegen hier ein paar Screenshots von der App, welche wir mit dieser Anleitung erstellt haben. Ihr könnt euch auch einfach diese kostenlose Demo-App herunterladen und das ganze Live anschauen. Dort sind auch unsere Icons verwendet worden.
Jetzt auch im Google PlayStore verfügbar und verifiziert!
Zeigt uns eure Apps mit Appyet!
Zeigen Sie uns Ihre Apps, welche Sie mit Hilfe von Appyet erstellt haben. Nutzen Sie dazu einfach die Kommentarfunktion.
Beschreiben Sie dort Ihre App mit wenigen Worten (am besten mit Screenshots) und geben Sie den Link zum Google Play Store an!
App auf dem Tablet
Die App sieht auch auf dem Tablet gut aus und passt sich den größeren Bildschirmen an.
Was kann die App?
- Benachrichtigung bei neuen Artikeln / Beiträgen
- Tablet-Kompatibel
- Facebook-Feed von Facebook Seiten auslesen
- Analyse durch Google Analytics (Anleitung hier)
- Werbung durch Admob (Anleitung hier)
- Kann im Google Play Store veröffentlicht werden (kostenlos oder kostenpflichtig)
- Theme-Switcher (mehrere Designs können erstellt und vom Nutzer gewechselt werden)
- Verschiedene Module (Youtube, Facebook, Web, RSS, usw.)
- Auto-Updater (Nur wenn über Google Play veröffentlicht)
- Splash-Screen mit Logo
- Tapatalk API Unterstützung (Beta)
- uvm.
Troubleshooting
Troubleshooting
Bekannte Probleme mit Lösungen.
Feature Image wird nicht angezeigt
Ladet euch dazu folgenden Plugin herunter. Dort könnt Ihr das Feature Image in den RSS Feed integrieren. Dieses wird dann auch von der App als Bild verwendet.
Es werden nur 3 Feeds angezeigt
Dies kann unter Ihrem Dashboard – Einstellungen – Lesen geändert werden. Ändert dort den Wert für Feeds nach belieben ab (max. 200 Einträge).
2
0
Themes (Designs)
Themes (Designs)
Die App kommt mit zwei Standard-Designs, ein Helles & ein Dunkles. Diese sind im Normalfall ausreichend, wer jedoch ein eigenes erstellen will, kann das durch das klicken auf New Theme tun (sehr simpel).
[alert style=”info”]Wenn Ihr unsere Icons benutzt, solltet Ihr das helle Theme als Standard setzen bzw. auch ein neues helles Theme erstellen. Dort wirken die Icons am besten.[/alert]
2
0
Monetize
Monetize
Wer Werbeanzeigen einblenden will (nur bei den Feeds unten), kann das hier tun. Klicken Sie auf den Tab Monetize und wählen Sie AdMob. Wie Sie eine Anzeige in AdMob erstellen können, finden Sie hier.
Wer Werbungen ausstellen will, wählt Remove Ad. Ansonsten wählt Ihr Admob Ad. Nun fügt die Anzeigenblock-ID eurer erstellten Anzeige ein (Format: ca-app-pub-1234567890123456/1234567890) und speichert ab. Nun sollten die Ads in eurer App angezeigt werden.
2
0
Die App erstellen
Die App erstellen
Zu erst müssen Sie sich bei dem Anbieter registrieren, was ebenfalls kostenlos ist.
[button size=”smalli” color=”blue” url=”http://appyet.com/SignUp.aspx” ]appyet.com[/button]
Nach erfolgreicher Registrierung loggen Sie sich mit Ihrem eben erstellten Account ein (bestätigen Sie Ihren Account vorher, falls das verlangt wird). Hier können Sie sich einloggen.
Nachdem Sie sich eingeloggt haben, klicken Sie rechts oben auf Create App um mit dem Erstellen der App zu beginnen.
Nun müssen Sie einen Application Name eingeben, am besten nutzt hier den eurer Webseite oder Blog, wie in unserem Fall Ausbildung-Elektrotechnik. Der Package-Name wird dann aus diesem Titel generiert. Ihr könnt diesen so belassen oder abändern. Wir haben das com. auf de. geändert.
[alert style=”info”]Der Package Name muss einmalig sein, da dieser später auch für den Google Play Store notwendig ist, falls Sie Ihre App veröffentlichen wollen.[/alert]
Als Template wählt ihr Demo Template, dann werden 2 vorkonfigurierte Designs eingebaut (können später jederzeit deaktiviert werden). Abschließend auf Create App klicken. Im nächsten Schritt könnt Ihr die App konfigurieren.
5
0
App erstellen
App erstellen (build)
Wenn Ihr nun alles angepasst habt, könnt Ihr eure app binnen wenigen Sekunden erstellen lassen. Sie erhalten dann eine Mail mit der .apk Datei. Diese ist im Durchschnitt ca. 2,2 – 2,5 MB groß.
- What’s New: Hier könnt Ihr eine Meldung einstellen, welche nach dem Update (beim ersten Start) dem Nutzer angezeigt wird. Empfohlen wird hier der Changelog. Ist jedoch jedem selbst überlassen.
- Auto Upgrade: Erkennt, dass eine neue Version verfügbar ist und bietet das Update an (nur wenn im Google Play Store veröffentlicht)
Nun klickt auf Submit to Build und überprüft euer Postfach. Kopiert nun die heruntergeladene App-Datei auf euer Handy und installiert diese. Solltet Ihr noch unzufrieden mit dem Design oder der Anordnung sein, einfach ändern und nochmals per Build erstellen, bis Ihr zufrieden seit. Dann könnt Ihr die App im Play Store oder nur auf eurer Webseite anbieten.
0
0
Einstellungen
Einstellungen
Nun könnt Ihr die App noch unter Settings einstellen.
- String Resources: Hier könnt Ihre die Strings (Variablen für die Sprache) anpassen. [tools] wird angezeigt als Werkzeuge.
- Splash Screen: Ist ein Startbildschirm, welcher beim starten der App kurz angezeigt wird.
- Splash Image: Sollte das Logo eures Blogs / Webseite sein (muss aber nicht)
- Default Theme: Ist das Design, welches beim ersten starten der App genutzt wird
- Update Interval: Wie oft die App die Feeds auf neue Inhalte überprüft
- Sync on startup: Synchronisiert, wenn App gestartet wird (empfohlen)
- Feedback Email: Mail welche bei klicken auf Feedback genutzt wird
- Help Link: Link welcher bei klicken auf Hilfe geöffnet wird
- Google Analytics: Tracking ID für Google Analytics. Anleitung zum Erstellen finden Sie hier.
Mit klicken auf Save abspeichern.
1
0
Pro
Pro (nicht notwendig)
Sie erhalten durch das Upgrade auf Pro einige Vorteile, welche jedoch nicht von Bedeutung sind, meiner Meinung nach. Hier finden Sie Preise und Leistungen.
0
0
Die App konfigurieren
Die App konfigurieren
Unter General könnt Ihr die Allgemeinen Einstellungen für eure App festlegen. Alle Werte in den weißen Textfelder können jeder Zeit geändert werden, wie auch das Icon.
- Version: Legt eure Version fest. Solltet Ihr die App überarbeiten und neu veröffentlichen, ändert die Version (höher als vorher). So erkennt der Store, dass es eine neue Version gibt und zeigt ein Update an.
- Version Code: Wird automatisch aus der obigen Version generiert
- Icon: Ist das Icon, welches später auf dem Homescreen eures Smartphones angezeigt wird.
- Content Rating: Hier müssen Sie Ihren Inhalt bewerten, ob dieser Jugendfrei (für alle zugänglich ist) oder eingeschränkt geeignet ist. Wählt hier everyone.
Diese Einstellungen mit Save Changes abspeichern.
Module bearbeiten / erstellen
Ihr findet oben ein Navigationsmenü, wo Ihr die einzelnen Elemente bearbeiten könnt.
Wechselt dazu auf den Bereich Moduels.
Das Programm erstellt euch schon die grundlegenden Elemente und ein paar Beispiel-Elemente.
- Module Type: Der Typ des Moduls (Feed, Weblink, Systemtools, usw.)
- Group Name: Der Name der Gruppe (Überschrift in der App für die einzelnen Elemente)
- Name: Name des jeweiligen Elements
- Sort Order: Legt die Reihenfolge fest, wie diese in der App angezeigt werden.
- Enable: Ob dieses Element aktiv ist oder versteckt ist.
- Details: Durch klicken auf Details, können diese bearbeitet werden.
Wichtige Elemente sind alle, welche mit [tools] (die Klammern bedeuten nur, das diese Name in der string.xml hinterlegt und übersetzt wird. Eigene Angaben von Namen müssen ohne diese Klammern sein.) gekennzeichnet sind, außer Downloads. Diese sind nicht notwendig. Die fünf Beispiel-Feeds könnt Ihr deaktivieren oder löschen. Diese dienen nur dem besseren Verständnis, wie der Aufbau funktioniert.
Beispiel-Feeds deaktivieren
Klickt dazu auf Details bei dem jeweiligen Element und setzt den Hacken bei Hidden und entfernt diesen bei Enabled um das Element zu deaktivieren oder klickt auf Delete this module um es zu löschen.
Der Rest kann so belassen werden, außer Ihr wollt zum Beispiel die Favoriten deaktivieren usw.
Eigene Module erstellen
Unterhalb dieser Liste finden Sie neue Module. Klicken Sie einfach auf das gewünschte Element.
- Feed (RSS/Atom): Herkömmlicher Feed einer Webseite
- Web: Öffnet Link zu Webseite oder ermöglicht es Ihnen eigenen HTML Inhalt zu integrieren
- Facebook: Lest Facebook-Feed aus
- Blogger: Lest Blogger Feed aus
- Flickr: Lest Flickr Feed aus usw.
- WordPress: Lest Blog Feed aus
- YouTube: Lest Video Feed aus
Wir wollen jetzt einen Blog-Feed von WordPress erstellen. Dazu klicken wir auf WordPress.
- Menu Name: So wird das Element im Menü angezeigt
- Menu Group Name: Ist die Überschrift für diese Elemente
- Menu Order: An welcher Stelle das Element stehen soll (Zweier Schritte)
- WordPress url: Der link zu Ihrer WordPress-Seite, ohne /feed
Mit Save Änderungen speichern. Ihr werdet automatisch zu den Feed-Einstellungen weitergeleitet.
- Der Feed URL wird automatisch erkannt
- Die anderen Einstellungen können so belassen werden
- DisQus Comment: Solltet Ihr das Plugin Disqus benutzen, aktiviert diese Option
Durch Update abspeichern. Durch klicken auf Back to moduels gelangt Ihr wieder zur Übersicht. Sucht nun das eben erstellte Element und klickt auf Details. Dort könnt Ihr eure eigenen Icons hochladen oder das Anzeigeformat ändern (Grid = Kacheln; List = Liste). Wir ändern nun alle von allen Element das Icon ab (nicht notwendig, sieht aber besser aus). Klickt dazu auf Change Icon, wartet bis das Datei hochladen Feld erscheint, wählt die Datei aus und klickt auf Save.
[alert style=”success”]Wir bieten unsere Icons zum Download an. Diese haben bereits alle die Maße 72×72 px. Diese können hier heruntergeladen werden.[/alert]
Sieht doch gleich besser aus. Kleiner Tipp, diese Icons sehn super mit dem hellen Standard Theme aus. Am Ende seht Ihr einen fertigen Screenshot.
Web Modul erstellen
Nun wollen wir noch auf unsere Webseite und unsere Facebook- & Twitterseite verlinken. Erstellt dazu ein Web Modul.
Stellt nun bei Type auf Web Link um. Fügt nun euren Link ein und wählt, wie der Link behandelt werden soll.
- Existing Window with In-App Browser: Öffnet den Link direkt in der App und überschreibt einen bereits geöffneten Link (falls vorhanden)
- New Window with In-App Browser: Öffnet ein neues Fenster direkt in der App
- Nutzt den auf dem Smartphone eingestellten Standard Browser (App wird minimiert)
Ich persönlich nutze die erste Option. Nun könnt Ihr wieder über die Modul-Übersicht das Icon ändern. Das gleiche macht Ihr mit jeden weiteren Link, welchen Ihr hinzufügen wollt. Der Menu Name sollte dem Link Ziel entsprechen (Twitter usw.) und der Group Name sollte immer der selbe bei allen Link-Elementen sein, dann werden diese im Menü gruppiert angezeigt (nicht vergessen die Reihenfolge hintereinander zu legen).
1
0
Veröffentlichen
App testen
Sie sollten Ihre App natürlich vor dem Hochladen in den Google Play Store (oder auf Ihre eigene Webseite) testen, ob alles wie gewünscht funktioniert oder optisch gut aussieht und angepasst ist. Ihr habt dazu zwei Möglichkeiten, welche Ich Ihnen folgend aufzeige.
Auf eigenen Smartphone / Tablet installieren
Dies ist meiner Meinung nach die beste Möglichkeit seine Apps schnell und einfach zu testen, den ein Smartphone hat vermutlich jeder, wer eine Applikation dafür entwickelt. Noch besser ist es, wenn Sie die App auf mehreren verschiedenen Smartphones testen (vor allem verschiedene Android Versionen). Auch nützlich ist ein Tablet, damit man sieht, wie sich die App auf einem solchen Gerät verhält.
[alert style=”success”]Sie besitzen kein Tablet? Kein Problem! Sie können Ihre App bei uns im Forum vorstellen und bewerben. Wenn Sie das getan haben, geben Sie mir einfach per Kontaktseite bescheid und ich installiere Ihre App auf meinem Tablet und sende Ihnen gerne gewünschte Screenshots zu.[/alert]
Vorbereitung
- Gerät per USB (nicht Bluetooth! Android verbietet das versenden von .apk Dateien per Bluetooth!) an dem PC anschließen
- .apk-Datei erstellen mit appyet und herunterladen
- Gerät erlauben Apps aus unbekannter Herkunft zu installieren
- Ihr solltet einen Dateimanager installiert haben (z.B. ES Datei Explorer)
Die ersten beiden Schritten sollten bereits bekannt und durch geführt sein. Nun müsst Ihr noch euer Gerät anpassen. Besucht dazu
Einstellungen -> Sicherheit (kann variieren) -> Unbekannte Herkunft (kann variieren) -> erlauben! (Siehe Screenshot)
Nun kopiert Ihr die .apk Datei auf euer Smartphone (am besten direkt ins Rootverzeichnis und nicht auf die SD-Karte). Sucht diese mit Hilfe des Dateimanagers und öffnet die .apk Datei. Die Installation sollte nun geöffnet werden und die App kann installiert und getestet werden.
Auf virtuellen Geräten testen
Ihr könnt eure Apps auch mit virtuellen Geräten testen, jedoch benötigen diese jede Menge Ressourcen und laufen nur sehr instabil. Deshalb entfehle ich, dass Ihr eure Apps auf richtigen Smartphones austestet.
Für all die, die das aus welchen Gründen auch immer, nicht wollen/können, können sich Android SDK Manager herunterladen. Dort befindet sich der AVD Manager (Android Virtual Device) und Ihr könnt damit eure virtuellen Geräte erstellen. Das laden der App funktioniert aber nur über eine Kommandozeile und ist sehr aufwendig.
0
0
Google Play Store
Der letzte Schritt ist die Veröffentlichung der App im Google Play Store. Dazu benötigt Ihr folgendes
- Eine Kreditkarte (muss nicht zwangsläufig auf euren Namen laufe, ist aber empfohlen) (Prepaid Kreditkarte Kalixa – Interesse an so einer Karte? Melden Sie sich bei mir und lade Sie ein. Sie erhalten dann 5€ geschenkt!)
- Ein Google Wallet Konto (Hier einloggen mit Ihrem Google Konto)
- 25$ Guthaben auf Ihrer Kreditkarte (ca. 18-20€ je nach Kurs)
Die Google Play Developer Console
Sind die obigen Bedingungen von Ihnen erfüllt, können Sie einen Account für das Veröffentlichen von Apps im Play Store erstellen. Dies nennt sich die Google Play Developer Console (Anmeldung auch als Privatperson möglich, jedoch nur mit kostenlosen Apps).
Link: Google Play Developer Console
Benutzen Sie auch hier ihr herkömmliches Google Konto um sich einzuloggen (empfohlen ist alle Service, wie AdSense, Admob, Analytics usw. mit dem selben Konto zu nutzen).
Sie werden folgend gebeten Ihre Kreditinformationen anzugeben. Halten Sie aus diesem Grund Ihre Kreditkarte bereit.
Sie erhalten nach erfolgreichen Bezahlen sofortigen Zugriff zu Ihrer Developer Console, wo Sie Ihre App hochladen können. Falls Sie nicht automatisch weitergeleitet werden können Sie sich hier einloggen.
Link: Google Play Developer Console
App veröffentlichen
Ihr findet in eurer Developer Console unterhalb des Suchfeldes den Button “Neue App hinzufügen“. Klicken Sie nun auf diesen Button.
Es öffnet sich dann ein kleines modales Fenster, wo Ihr den Titel eurer App angeben müsst. Nutzt hier am besten den Namen eurer Webseite oder eures Blogs.
Sie können nun wählen ob Sie sofort Ihre APK Datei hochladen wollen oder zuerst den Store Eintrag erstellen wollen. Die Reihenfolge wie Sie das machen ist Ihnen selbst überlassen. Ich beginne immer gerne mit dem Store Eintrag.
Sie finden auf der linken Seite eine Navigationsleiste, welche Ihnen die jeweiligen Punkte anzeigt, die Sie noch ausfüllen müssen. Sind alle Informationen für das jeweilige Feld eingegeben, wird der aktuell grau hinterlegte Hacken grün. Ganz oben unter APK können Sie am Schluss Ihre .apk Datei, die Sie von Appyet erhalten, hochladen.
Der Store Eintrag
Hier können Sie Ihre App beschreiben, Ihren Changelog angeben und die App mit Screenshots präsentieren. Dies ist auch die Seite, die Ihre Nutzer sehen, wenn Sie die App herunterladen wollen. Darunter fallen folgende Punkte.
- Titel: Ist der Name Ihrer Applikation, welcher als Überschrift im Store angezeigt wird
- Beschreibung: Hier können Sie Ihre App mit wenigen Worten beschreiben (HTML möglich)
- Werbetext: Werbeslogan für Ihre App (muss nicht ausgefüllt werden)
- Letzte Änderungen: Dies ist der Ort für Ihre Changelogs
- Grafik Inhalte: Hier können Sie Screenshots von Ihrer App hochladen (am besten von einem Smartphone, 7-Tablet und einem 10-Tablet)
- Hochauflösende Symbol: Dieses Symbol wird in der Suche und im Store-Eintrag angezeigt
- Funktionsgrafik: Dient als Titelbild des Storeeintrages
- Werbegrafik: Selbsterklärend
- Werbevideo: Hier kann ein Video-URL (YouTube) angegeben werden. Das Video erscheint vor den Screenshots.
- Kontaktinformationen: Hier müssen Sie Ihre Daten angeben
Information zu den Kontaktinformationen
Wählen Sie die Kategorie so präzise wie nur möglich und geben Sie bei Einstufung des Inhaltes “Alle” an. Damit ist Ihre App uneingeschränkt für alle nutzbar (Sie sollten dies natürlich auch erfüllen, sprich keine Jugendgefährdenden Inhalte, usw.) Apps mit solchen Inhalten werden schnell wieder gelöscht und kann zur Ausschließung aus der Developer Console führen.
Datenschutzlink
Dieser muss noch nicht sofort angegeben werden, aber es empfiehlt sich, das gleich zu tun. Wenn Sie nicht genau wissen, wie der Datenschutz aussehen soll, können Sie unserer einsehen. Dort finden Sie auch einen Link wo Sie Ihre eigene Datenschutzseite kostenlos erstellen lassen können.
Datenschutz: Datenschutzerklärung erstellen
Ihr Store Seite
Hier zeige ich Ihnen noch, wo die obigen Punkte in der Store Seite zu finden sind.
Kopfbereich
Hier sehen Sie, wie der Kopf der Storeseite später aussieht.
- Titel: Ausbildung-Elektrotechnik
- Entwickler: wdbase (wird unter dem Appname angezeigt)
- Kategorie: Kommunikation (hier wird die gewählte Kategorie angezeigt)
- Bewertung: Darunter folgt die Bewertung der Nutzer
Screenshots & Werbevideo
Unterhalb des Kopfbereiches folgen die Screenshots, mit dem Werbevideo beginnend.
Beschreibung & Bewertung
Ihre Beschreibung folgt nun nach den Screenshots.
Changelog
Hier werden Ihre angegebenen Änderungen angezeigt (Changelog). Hier ist keine HTML Eingabe möglich!
Weitere Informationen
Zum Schluss folgen noch die sonstigen Informationen, wie Größe, Downloads, Link zu eurer Webseite & Datenschutz usw.
1
0
App hochladen
Nun können Sie Ihre Applikation in den Google Play Store hochladen. Wechseln Sie dazu in der linken Navigationsleiste auf APK und wählen Sie Erste APK-Datei in Produktphase hochladen.
[alert style=”success”]Sie können die APK genau so hochladen, wie Sie diese von appyet bekommen! Es sind keine weiteren Schritte zwischen dem Build von appyet und dem hochladen in den Play Store nötig.[/alert]
Wählen sie nun Ihre APK in folgenden Format de.example.apk (wichtig ist die Endung auf .apk, keine Archive oder sonstiges). Hier müssen Sie später auch Updates der App hochladen (vergessen Sie dabei nicht, die Version in Appyet zu erhöhen!)
Preisgestaltung & Vertrieb
Wenn Ihre App hochgeladen ist, wählen Sie in der linken Navigationsleiste den Punkt Preisgestaltung & Vertrieb. Als Privatperson können Sie Ihre App nur kostenlos anbieten, alles andere würde für eine WordPress App keinen Sinn machen.
Länderwahl
Wichtiger Hinweis: Sie müssen für jedes gewählte Land sich im klaren sein, welche Rechte dort gelten, im Hinblick auf Datenschutz usw (vor allem für kostenpflichtige Apps relevant). Wählen deshalb nur Länder, welche Sinn machen (DACH, da deutschsprachig).
Ich habe die Schweiz, Österreich und Deutschland gewählt. Weitere Möglichkeiten wären noch Tschechien, Niederlande, Belgien usw. (dort wo teilweise noch Deutsch gesprochen wird)
Zustimmungen
Sie müssen die letzten zwei Richtlinien zustimmen, auch wenn Ihre App in der USA gar nicht verfügbar ist.
Veröffentlichen
Sind nun alle drei Häkchen grün hinterlegt können Sie rechts oben, wo aktuell Entwurf steht, Ihre App veröffentlichen.
[alert style=”info”]Beachten Sie, dass es zwischen 3-12 Stunden dauern kann, bis Ihre App im Play Store erscheint. Auch Änderungen an dem Store Eintrag werden erst nach einem ähnlichen Zeitfenster sichtbar.[/alert]
Glückwunsch zur ersten App im Play Store!
1
0
Leave A Comment?