Wie du aus einer WordPress-Webseite eine App generierst

Lesedauer 3 Minuten

Warum überhaupt eine App? Um es einfach zu beantworten: mehr Reichweite, mehr Nutzer-Tracking und mehr „treue Seelen“. Apps und mobile Webseiten stehen nicht wirklich in Konkurrenz zueinander, sondern ergänzen sich eher gegenseitig. Trotzdem zeigen Statistiken ganz klar, dass Nutzer 18x mehr Zeit in Apps als auf mobilen Webseiten verbringen. 

Und der Trend steigt auch weiterhin in Richtung App an. Ein paar der Gründe dafür sind:

• Apps können Push-Nachrichten senden, die Kunden mit dem E-Shop in Kontakt halten.
• App-Symbole sind sichtbar, wenn ein Nutzer mit seinem Handy agiert, wodurch die Markenbekanntheit steigt.
• Apps können Benutzerdaten speichern, um Ein-Klick-Checkouts zu ermöglichen und die Ladezeiten zu minimieren. 

2 Arten von Apps

Prinzipiell gibt es zwei Arten von Apps: 

1. Native App 

Die Native App wird als eigenständige App programmiert.
Vorteil: Sie kann auch offline funktionieren.
Nachteil: Es braucht eine doppelte Pflege, da die App nicht mit der Website verbunden ist. 

2. Hybrid App 

Die Hybrid App basiert auf einer vorher entstandenen Website.
Vorteil: Zeit- und Kosteneinsparungen bei der anfänglichen Entwicklung, aber auch bei der Wartung. Sie kann alles, was eine Native App auch kann.
Nachteil: Sie funktioniert nicht offline und braucht eine ständige Internetverbindung. 

Step by Step vom Web zur App (mit WordPress) 

1. Website aufsetzen, am besten mit WordPress (z.B. über easyname VPS)

Mit WordPress hat man den Vorteil einer unerschöpflichen Erweiterbarkeit, hier gibt es kaum noch Grenzen nach oben. 

2. Theme aufbauen

Bei WordPress hat man die Möglichkeit ein vorgefertigtes Theme zu wählen und dieses anzupassen oder man nutzt/baut sein eigenes Theme.
Wenn aus der Website eine App entstehen soll, sollte vor allem ein schlankes Theme/Design im Fokus stehen, da dies dann eine geringere Ladezeit benötigt. 

3. Responsive – Mobilfähigkeit

Hier ist wichtig zu wissen, welche Zielgeräte man am Ende hat, damit die Breakpoints richtig optimiert werden können. Es empfiehlt sich, die Optimierung für alle Geräte und Browser vorzunehmen, die einen Marktanteil von mind. 5% haben. 

4. Content

Nun wird die Website mit Inhalten (Texte, Bilder, Videos, etc.) befüllt.

Die Website ist fertig. Nun geht es an die App.
Hierfür gibt es zwei Möglichkeiten: 

A. Man gestaltet die App selbst mit Hilfe eines Plugins: 

5A. WordPress Plugin

Mit einem WordPress-Plugin wird aus einer Website eine hybride App. Hierfür gibt es je nachdem welche Art von Website (Blog, Zeitschrift, Onlineshop) verschiedene Möglichkeiten eines Plugins. Im Gegensatz zu einer Native App werden hier die Inhalte und Daten direkt in eine App umgewandelt. 

6A. Mögliche PlugIns und deren Eigenschaften

Androapp
– Für inhaltsorientierte Websites wie Blogs und Zeitschriften – Deep-Link-Unterstützung
– Benutzerdefinierte Designs

AppPresser
– Umfangreiche Anpassungen
– Erstellen von zusätzlichen Inhalten und benutzerdefinierten Seiten Blappsta
– Aus einem WordPress-Blog wird eine App
– Flexibilität bei der Organisation von Inhalten

MobiLoud
– Umwandlung von Blog- oder Nachrichtenseiten in Apps
– Erleichterung des Umstieg von stark frequentierten Websites Wapppress
– Website wird in ein Layout für mobile Apps integriert

Web2App
– Schnelle Verschiebung der responsive Website in eine native App – viele Anpassungsfunktionen 

Oder 

B. Man lässt sich die App von einer Agentur erstellen: 

WordPress kann als optimale Back-End-Plattform für die Erstellung einer nativen App dienen. Diese mobilen Apps werden durch die Kombination von WordPress und React Native programmiert. 

5B. WordPress für eine API konfigurieren

Zu der bereits bestehenden WordPress-Installation muss das WordPress REST API Plugin zusätzlich installiert werden.
Eine API (Application Program Interface) ist eine Reihe von Protokollen, die die Programmentwicklung erleichtert, indem sie alle erforderlichen Komponenten bereitstellt.
REST (Representational State Transfer) ist ein architektonischer Stil, der die Einschränkungen für die Art und Weise definiert, wie Programme erstellt werden. 

6B. React Native-Anwendung einrichten

Die Verwendung von React Native ermöglicht die bestmögliche Nutzung einer WordPress-Seite als native App für iOS sowie Android, da hierbei die Website in eine App „eingebettet“ wird und um zahlreiche Features ergänzt werden kann. React Native ermöglicht es Entwicklern, mit einer Code-Basis beide Systeme zu versorgen („write once, run everywhere“) und ist daher optimal zur Erstellung einer nativen App. Im Gegensatz zu sämtlichen WordPress-Plugins erlaubt die Umsetzung via React Native die volle Kontrolle über sämtliche Aspekte der Applikation, wodurch einerseits ein Maximum an Kundenwünschen umgesetzt werden kann sowie andererseits v.a. die langfristige Wartbarkeit garantiert ist – die Verfügbarkeit sämtlicher Plugins kann sich jederzeit ändern, eine eigene Code-Basis mittels React Native ist jedoch unabhängig und unter voller Kontrolle des Kunden, auch nach Jahren des initialen Releases.

Das Routing der App definieren

Die Nutzung von React Native erlaubt es, auch Ansichten zu implementieren, welche nicht in der WordPress-Seite vorhanden sind. Ein prominentes Beispiel wäre hier eine Dialog-Ansicht zur Aktivierung von Push Notifications oder der Standort-Freigabe. Ein anderes Beispiel wäre die Nutzung von speziellen Ansichten, welche nur für Mobile-User vorgesehen sind, z.B. Alerts für Promotions.

Native UI-Elemente

React Native ermöglicht die gezielte Nutzung sämtlicher UI-Elemente des Betriebssystems auch jener, welche in einer Web-App mitunter nicht vorhanden sind. Außerdem erlaubt die Nutzung nativer UI-Elemente das Abdecken eines Offline-Szenarios – obwohl die Website nicht erreichbar ist, können User mittels eigener Views über die fehlende Erreichbarkeit samt Alternativen informiert werden. 

Fazit

Mit Hilfe des WordPress REST API Plugins können WordPress-Daten in eine mobile App integriert werden, welche sowohl für iOS als auch Android bereitgestellt werden kann. Dank React Native ist der Mehraufwand einer Multi-Platform-Architektur auf ein notwendiges Minimum reduziert, wovon sowohl Entwicklungszeit als auch die Wartbarkeit der App profitieren.

Der Artikel „Wie du aus einer WordPress-Webseite eine App generierst“ wurde von WP-Stars in Kooperation mit expressFlow für easyname verfasst.