WordPress in eine App verwandeln – kostenlos (appyet.com)

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.

Demo-App (appyet) (1738 Downloads)

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_1 app_2 app_3 app_4 app_5

App auf dem Tablet

Die App sieht auch auf dem Tablet gut aus und passt sich den größeren Bildschirmen an.

Tablet_app

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.

Featured Images in RSS w/ Size and Position (24 Downloads)

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

Back To Top

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).

appyet_themes

[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

Back To Top

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.

appyet_monetize

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

Back To Top

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.

appyet_login

Nachdem Sie sich eingeloggt haben, klicken Sie rechts oben auf Create App um mit dem Erstellen der App zu beginnen.

appyet_create

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]

appyet_create2

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

Back To Top

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ß.

appyet_build

  • 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

Back To Top

Einstellungen

Einstellungen

Nun könnt Ihr die App noch unter Settings einstellen.

appyet_settings

  • 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)

appyet_settings2

  • 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

Back To Top

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

Back To Top

Die App konfigurieren

Die App konfigurieren

appyet_general

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.

appyet_menu

Wechselt dazu auf den Bereich Moduels.

appyet_modules

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.

appyet_disable

Der Rest kann so belassen werden, außer Ihr wollt zum Beispiel die Favoriten deaktivieren usw.

Eigene Module erstellen

appyet_new_modules

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.

appyet_create_module

  • 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.

appyet_create_module_feed

  • 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]

appyet_icons

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.

appyet_web

Stellt nun bei Type auf Web Link um. Fügt nun euren Link ein und wählt, wie der Link behandelt werden soll.

appyet_web_link

  • 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

Back To Top

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)

appyet_unbekannte_herkunft

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

Back To Top

Google Play Store

Der letzte Schritt ist die Veröffentlichung der App im Google Play Store. Dazu benötigt Ihr folgendes

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).

google_play_developer_console_1

Sie werden folgend gebeten Ihre Kreditinformationen anzugeben. Halten Sie aus diesem Grund Ihre Kreditkarte bereit.

google_play_developer_console_2

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.

developer_console_new_app

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.

developer_console_new_app_2

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.

[row][col_half]

developer_console_new_app_3

[/col_half][col_half]

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.

[/col_half][/row]

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

developer_console_new_app_4

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: http://board.ausbildung-elektrotechnik.de/privacypolicy/

Ihr Store Seite

Hier zeige ich Ihnen noch, wo die obigen Punkte in der Store Seite zu finden sind.

Kopfbereich

[row][col_half]

developer_console_store_header

[/col_half][col_half]

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

[/col_half][/row]

Screenshots & Werbevideo

developer_console_store_screenshots

Unterhalb des Kopfbereiches folgen die Screenshots, mit dem Werbevideo beginnend.

Beschreibung & Bewertung

Ihre Beschreibung folgt nun nach den Screenshots.

developer_console_store_description developer_console_store_review

Changelog

Hier werden Ihre angegebenen Änderungen angezeigt (Changelog). Hier ist keine HTML Eingabe möglich!

developer_console_store_changelog

Weitere Informationen

Zum Schluss folgen noch die sonstigen Informationen, wie Größe, Downloads, Link zu eurer Webseite & Datenschutz usw.

developer_console_store_info

1

0

Back To Top

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.

developer_console_apk_upload

[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]

developer_console_apk_upload2

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.

developer_console_apk_publish

[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

Back To Top

War dieser Artikel hilfreich?

Ähnliche Artikel

Hinterlasse einen Kommentar!