Dies ist Teil zwei einer vierteiligen Blogserie über Erstellen hybrider mobiler Apps und Mendix. Im ersten Teil geht es um die Vorbereitung Ihrer Software, Geräte und Konten. Lesen Sie den ersten Teil werden auf dieser Seite erläutert. In diesem Teil werde ich auf die Erstellung der eigentlichen App eingehen.
Das folgende Bild zeigt die wichtigsten Schritte beim Erstellen einer mobilen App mit Mendix. Ich werde diese Schritte einzeln besprechen und einige praktische Tipps geben.
Ich verwende die Mendix World App als Beispiel für die Erstellung einer mobilen App. Es handelt sich um eine offlinefähige App, die Informationen über die Mendix Weltausstellung Veranstaltung. Die App ermöglicht Ihnen, Feedback zu geben und verfügt über eine Abstimmungsfunktion.
Modell
Aus der Modellperspektive ist das Erstellen einer mobilen App dasselbe wie das Erstellen einer normalen Mendix Web-App. Es gibt jedoch ein paar Dinge, die Sie beachten müssen.
Der Mendix Das Frontend ist responsive, was bedeutet, dass sich das Layout und die Elemente automatisch an die Bildschirmgröße anpassen, sodass die von Ihnen modellierten Seiten auf einem Mobilgerät dargestellt werden können. Die Nutzung eines Mobilgeräts unterscheidet sich jedoch stark von der eines Desktops, da die Benutzer Bildschirmgesten anstelle einer Maus verwenden, der Bildschirm kleiner ist, die Benutzer eine andere Navigation erwarten, eine andere (langsamere) Art der Verbindung vorhanden ist und mehr.
Darüber hinaus ist das Ziel einer mobilen App ein anderes als das einer normalen Web-App, da sie in der Regel einen einzigen Zweck verfolgt, beispielsweise die Anzeige von Veranstaltungsinformationen oder die Durchführung von Inspektionen, und nicht mehrere Funktionen.
Um ein besseres Erlebnis zu bieten, verwenden Sie das Mobil-/Tablet-Profil (standardmäßig aktiviert), das in der Projektnavigation aktiviert werden kann. Diese Navigation wird von der mobilen App verwendet, sodass Sie aus einem Modell einen Kanal für Desktops, Telefone und Tablets erstellen können.
Voraussetzung für die Mendix World App war, dass sie ohne Internetverbindung funktionieren muss, was unterstützt wird durch MendixWeitere Informationen zu Offline-Mobil-Apps mit Mendix, siehe Offline-Dokumentation und die Erstellen von Offline-Mobil-Apps mit Mendix Webinar.
Modellierungstipps
Hier sind einige Tipps für die Erstellung eines Modells für eine mobile App:
- Halten Sie die Seiten einfach, um Benutzerfreundlichkeit und optimale Leistung zu gewährleisten
- Für eine bessere Leistung verwenden Sie wenn möglich die Schaltflächen „Seite schließen“/„Seite öffnen“/„Neu“ anstelle von Microflow-Aktionen.
- Bevorzugen Sie für Telefone Listenansichten oder Vorlagenraster, die berührungsfreundlicher sind, anstelle von Datenrastern
- Begrenzen Sie die Anzahl der Felder auf einer Seite, damit der Benutzer nicht scrollen muss
- Beschränken Sie die Verwendung transparenter CSS-Eigenschaften, da diese die Leistung beeinträchtigen können
- Verwenden Sie ein separates Modul für die mobilen Seiten und Mikroflüsse, um einen besseren Überblick über Ihr Projekt zu behalten
- Wenn Sie den Layoutcontainer für eine Telefon-App verwenden, fügen Sie eine Klasse col-xs-N hinzu, wobei N die Spaltengröße ist.
Anzeigen und Testen einer mobilen App in der Entwicklung
Während der Entwicklung möchten Sie Ihre mobile App auch testen und in der Vorschau anzeigen. Mendix Web Modeler mit WYSIWYG-Funktionalität wird in Kürze veröffentlicht, sodass Sie direkt sehen können, wie Ihre mobile App aussehen wird. Derzeit gibt es mehrere Möglichkeiten, Ihre App anzuzeigen und zu testen, jede mit ihren eigenen Vor- und Nachteilen.
Um Ihre App direkt in Ihrem Browser anzuzeigen, wählen Sie Ihre Anzeigeoption im Menü „App anzeigen“ des Modellierers.
Sie können ganz einfach testen, Mendix Projekt auf Ihrem Telefon als echte App mit dem Mendix Entwickler-App. Laden Sie die Mendix Entwickler-App hier:
Ein weiterer schneller Ansatz besteht darin, ein Gerät in Google Chrome zu simulieren, indem Sie die Entwicklertools (F12) öffnen und das Gerätesymbol in der oberen linken Ecke auswählen.
Wie man Apps auf einem bestimmten Gerät bereitstellt, erkläre ich später.
Beachten Sie, dass das Testen einer offlinefähigen mobilen App größtenteils im Browser erfolgen kann, da der Modeler auf ungültige Konstruktionen prüft. Um Ihre Offline-App einfach im Browser zu testen, verwenden Sie im Telefon- (oder Tablet-)Profil dieselbe Homepage wie im Offline-Profil. Beachten Sie, dass Sie eventuell auch auf realen Geräten testen sollten.
Generieren einer hybriden mobilen App
Wie bereits erwähnt, Mendix Hebelwirkungen PhoneGap-Build um eine mobile App Ihres Mendix App. Über die Registerkarte „Veröffentlichen“ in Ihrem Projekt im Entwicklerportal können Sie auf „Für mobile App Stores veröffentlichen“ klicken, um zu den Einstellungen Ihrer Hybrid-App zu gelangen. Hier können Sie den Namen, die App-ID, die Beschreibung, Begrüßungsbildschirme und Symbole eingeben. Über die Schaltfläche „Für mobile App Stores veröffentlichen“ gelangen Sie dann auf die Seite, auf der Sie die Hybrid-App generieren können. Bevor Sie die Hybrid-App generieren, können Sie angeben, mit welcher Umgebung Ihre App verbunden werden soll. Danach können Sie die App direkt an PhoneGap Build senden oder sie herunterladen und später manuell hochladen.
Beachten Sie, dass PhoneGap Build ein kostenloses Konto anbietet, das jeweils eine App zulässt.
Erstellen der App
Sobald Ihre App an PhoneGap Build gesendet oder hochgeladen wurde, wird der Build automatisch gestartet.
Unter Android funktioniert dies sofort und nach dem Build können Sie die Android-Binärdatei (APK-Datei) direkt über einen Download-Link oder einen QR-Code herunterladen. Beachten Sie, dass dies eine Debug-Version ist, die nur für Test- und Entwicklungszwecke gedacht ist.
Für iOS-Builds oder Produktions-Builds benötigen Sie ein Entwicklerzertifikat. Weitere Informationen zum Erhalt eines Zertifikats finden Sie unter:
Veröffentlichen Sie die mobile App in App Stores
Wenn Ihre Zertifikate eingerichtet sind und Sie eine Produktionsversion Ihrer App erstellen können, können Sie Ihre App in einem App Store wie dem Google Play Store und dem Apple App Store veröffentlichen.
Android
Um eine Android-App im Google Play Store zu veröffentlichen, können Sie die signierte APK von PhoneGap Build herunterladen und hochladen auf https://play.google.com/apps/publish/.
iOS
Zum Veröffentlichen im Apple App Store benötigen Sie den Application Loader, der Teil von Xcode ist (über Xcode / Open Developer Tool / Application Loader), der im App Store heruntergeladen werden kann. Wenn Sie den Application Loader starten, können Sie die PhoneGap Build IPA-Datei hinzufügen und sie auf Apple iTunes Connect hochladen.
Beta- und Abnahmetests
Über PhoneGap Build ist es auch möglich, den Link zur App öffentlich zugänglich zu machen, indem Sie Öffentliches Teilen zulassen über die Registerkarte „Einstellungen“ der Anwendung.
Android-Nutzer sollten die Unbekannte Quellen (unter Einstellungen – Sicherheit), bevor die App installiert werden kann. Beachten Sie, dass für iOS-Apps Ihre Geräte-ID zum Bereitstellungsprofil hinzugefügt werden muss. Siehe Exportieren Ihrer App zum Testen (iOS, tvOS, watchOS).
Für iOS-Apps können Sie TestFlight auch verwenden, um einer Gruppe von Benutzern Testversionen bereitzustellen. Dies ist sehr nützlich bei Beta-/Abnahmetests, da beim Hochladen einer neuen Version diese automatisch an die Testbenutzer gesendet wird. Weitere Informationen zu TestFlight finden Sie unter https://developer.apple.com/testflight/.
Dies umfasst die Grundlagen für den Lebenszyklus mobiler Anwendungen mit Mendix. Nächste Woche erkläre ich mehr über die Hybrid-App, wie sie funktioniert und wie Sie Ihr eigenes mobiles Widget erstellen können. Viel Spaß mit Erstellen Sie Ihre mobile App mit Mendix!