Ceci est la deuxième partie d'une série de blogs en quatre parties sur création d'applications mobiles hybrides au Mendix. La première partie concerne la préparation de vos logiciels, appareils et comptes. Lire la première partie iciDans cette partie, je vais aborder la création de l'application proprement dite.
L'image ci-dessous montre les étapes de haut niveau à suivre lors de la création d'une application mobile avec MendixJe vais discuter de ces étapes une par une et donner quelques conseils pratiques.
Je vais utiliser la Mendix Application mondiale comme exemple de création d'une application mobile. Il s'agit d'une application hors ligne qui affiche des informations sur le Mendix Monde événement. L'application vous permet de donner votre avis et dispose d'une fonctionnalité de vote.
Modèle
Du point de vue du modèle, la création d'une application mobile est identique à la création d'une application normale. Mendix application Web. Cependant, il y a quelques points dont vous devez être conscient.
Le Mendix Le front-end est réactif, ce qui signifie que la mise en page et les éléments s'ajusteront automatiquement à la taille de l'écran afin que les pages que vous modélisez puissent être rendues sur un appareil mobile. Cependant, l'utilisation d'un appareil mobile est très différente de celle d'un ordinateur de bureau car les utilisateurs utilisent des gestes à l'écran au lieu d'une souris, l'écran est plus petit, les utilisateurs s'attendent à une navigation différente, il existe un type de connexion différent (plus lent), etc.
De plus, l’objectif d’une application mobile est différent de celui d’une application Web normale, car elle a généralement un seul objectif, comme afficher des informations sur un événement ou effectuer des inspections, au lieu de plusieurs fonctions.
Pour offrir une meilleure expérience, utilisez le profil mobile/tablette (activé par défaut) qui peut être activé dans la navigation du projet. Cette navigation est utilisée par l'application mobile, donc à partir d'un modèle, vous pouvez créer un canal pour les ordinateurs de bureau, les téléphones et les tablettes.
Une exigence pour la Mendix L'application mondiale devait pouvoir fonctionner sans connexion Internet, ce qui est pris en charge par Mendix. Pour plus d'informations sur les applications mobiles hors ligne avec Mendix, voir la documentation hors ligne et la Création d'applications mobiles hors ligne avec Mendix séminaire en ligne.
Conseils de modélisation
Voici quelques conseils lorsque vous créez un modèle pour une application mobile :
- Gardez les pages simples pour une convivialité et des performances optimales
- Pour de meilleures performances, utilisez les boutons Fermer la page/Ouvrir la page/Nouvelle page au lieu des actions de microflux si possible
- Pour les téléphones, privilégiez les vues de liste ou les grilles de modèles, plus conviviales au toucher, plutôt que les grilles de données
- Limitez le nombre de champs sur une seule page afin que l'utilisateur n'ait pas à faire défiler
- Limitez l'utilisation de propriétés CSS transparentes car cela peut avoir un impact négatif sur les performances
- Utilisez un module séparé pour les pages mobiles et les microflux pour garder une meilleure vue d'ensemble de votre projet
- Lorsque vous utilisez le conteneur de mise en page pour une application téléphonique, ajoutez une classe col-xs-N, où N est la taille de la colonne.
Afficher et tester une application mobile en cours de développement
Pendant le développement, vous souhaitez également tester et prévisualiser votre application mobile. Mendix Web Modeler avec fonctionnalité WYSIWYG sera bientôt disponible, afin que vous puissiez voir directement à quoi ressemblera votre application mobile. Pour l'instant, il existe plusieurs façons de visualiser et de tester votre application, chacune avec ses propres avantages et inconvénients.
Pour afficher votre application directement dans votre navigateur, sélectionnez votre option d'affichage dans le menu Afficher l'application du modélisateur.
Vous pouvez facilement tester un Mendix projet sur votre téléphone comme une véritable application avec le Mendix Application pour développeurs. Téléchargez l'application Mendix Application pour développeurs ici :
Une autre approche rapide consiste à simuler un appareil dans Google Chrome en ouvrant les outils de développement (F12) et en sélectionnant l’icône de l’appareil dans le coin supérieur gauche.
Je discuterai plus tard de la manière de déployer des applications sur un appareil spécifique.
Notez que les tests d'une application mobile compatible hors ligne peuvent être en grande partie effectués dans le navigateur, car le modeleur vérifie les constructions non valides. Pour tester facilement votre application hors ligne dans le navigateur, utilisez la même page d'accueil dans le profil Téléphone (ou Tablette) que dans le profil hors ligne. Notez que vous devrez éventuellement également effectuer des tests sur des appareils réels.
Générer une application mobile hybride
Comme mentionné précédemment, Mendix les leviers Construction de PhoneGap pour créer une application mobile de votre Mendix Via l'onglet Publier de votre projet dans le portail des développeurs, vous pouvez cliquer sur Publier pour les magasins d'applications mobiles pour accéder aux paramètres de votre application hybride. Vous pouvez y saisir le nom, l'identifiant de l'application, la description, les écrans de démarrage et les icônes. Ensuite, via le bouton Publier pour les magasins d'applications mobiles, vous pouvez accéder à la page où vous pouvez générer l'application hybride. Avant de générer l'application hybride, vous pouvez spécifier à quel environnement votre application doit se connecter. Après cela, vous pouvez envoyer l'application directement à PhoneGap Build ou la télécharger et la charger manuellement plus tard.
Notez que PhoneGap Build propose un compte gratuit qui autorise une application à la fois.
Créer l'application
Une fois votre application envoyée ou téléchargée sur PhoneGap Build, la build démarre automatiquement.
Pour Android, cela fonctionnera immédiatement et après la compilation, vous pourrez télécharger directement le binaire Android (fichier APK) via un lien de téléchargement ou un code QR. Notez qu'il s'agit d'une version de débogage destinée uniquement à des fins de test et de développement.
Pour les builds iOS ou les builds de production, vous avez besoin d'un certificat de développeur. Pour plus d'informations sur l'obtention d'un certificat, consultez :
Publier l'application mobile sur les App Stores
Une fois vos certificats configurés et que vous pouvez créer une version de production de votre application, vous pouvez publier votre application sur une boutique d'applications telle que Google Play Store et Apple App Store.
Android
Pour publier une application Android sur le Google Play Store, vous pouvez télécharger l'APK signé depuis PhoneGap Build et le télécharger sur https://play.google.com/apps/publish/.
iOS
Pour publier sur l'App Store d'Apple, vous avez besoin d'Application Loader, qui fait partie de Xcode (via Xcode / Open Developer Tool / Application Loader), et qui peut être téléchargé depuis l'App Store. Lorsque vous démarrez Application Loader, vous pouvez ajouter le fichier IPA de PhoneGap Build et le télécharger sur Apple iTunes Connect.
Tests bêta et d'acceptation
Via PhoneGap Build, il est également possible de rendre le lien vers l'application accessible au public en activant Autoriser le partage public via l'onglet paramètres de l'application.
Les utilisateurs d'Android doivent activer le Sources inconnues (sous Paramètres – Sécurité) avant que l'application puisse être installée. Notez que pour les applications iOS, l'ID de votre appareil doit être ajouté au profil de provisionnement. Voir Exporter votre application pour la tester (iOS, tvOS, watchOS).
Pour les applications iOS, vous pouvez également utiliser TestFlight pour fournir des versions de test à un groupe d'utilisateurs. Cela est très utile lors des tests bêta/d'acceptation, car lorsque vous téléchargez une nouvelle version, elle est automatiquement envoyée aux utilisateurs de test. Pour plus d'informations sur TestFlight, consultez https://developer.apple.com/testflight/.
Cela couvre les bases du cycle de vie des applications mobiles avec Mendix. La semaine prochaine, je vous expliquerai plus en détail l'application Hybrid, son fonctionnement et comment vous pouvez créer votre propre widget mobile. Amusez-vous bien avec construire votre application mobile avec Mendix!