Meilleures pratiques de développement d&rsquo;applications multiplateformes

Table des matières

ArticlesA lire

Revue Atomicrops – SUPERJUMP – Moyen

Un moyen super facile de faire des validations EditText dans Android

Messagerie cloud Firebase – Satya Pavan Kantamani

Génération de DeepLinks au moment de la compilation Android

Meilleures pratiques de développement d’applications multiplateformes

Qu’est-ce qui rend une application commercialisable? Une application doit répondre à de nombreuses exigences pour réussir. Dans cet article, vous pouvez découvrir les meilleures pratiques de développement d’applications réussies avec Qt sur des appareils mobiles.

Remarque: Cet article est un récapitulatif de la session présentée par notre PDG et co-fondateur, Chris, à Qt Virtual Tech Con 20. Dans son discours, il a partagé ses connaissances approfondies sur les meilleures pratiques des applications optimisées pour les mobiles et comment surmonter les défis de l’optimisation mobile sur les appareils iOS et Android. Vous pouvez regarder la session complète en cliquant sur la vidéo ci-dessous:

En tant que première meilleure pratique pour le développement mobile – et cela s’applique en général, pas seulement pour Qt – veuillez vous poser cette question simple: pourquoi voulez-vous réellement créer une application mobile? Cette question du «pourquoi» est vraiment importante, car de nombreuses applications affichent simplement des informations simples, mais les utilisateurs ne veulent pas télécharger des applications uniquement pour obtenir des informations qui pourraient tout aussi bien être disponibles sur un site Web.

Les utilisateurs veulent vraiment tirer le meilleur parti des applications mobiles. Comment peux-tu faire ça? Vous pouvez apporter de la valeur en utilisant les fonctionnalités uniques des téléphones mobiles. Vous pouvez le faire, par exemple, en rendant l’application beaucoup plus simple à utiliser. Vous pouvez ajouter de la valeur à votre application en utilisant l’un des éléments ci-dessous caractéristiques uniques:

gestes

contrôle tactile
capteurs et modules de localisation
notifications push

capteurs
caméra
réalité augmentée au-dessus de la caméra

Après avoir obtenu la bonne valeur, vous devez viser à impressionner et à impressionner vos utilisateurs avec une excellente interface utilisateur (UI) et une expérience utilisateur (UX) pour vraiment avoir la chance de se démarquer parmi toutes les autres applications mobiles.

Actuellement, il y a plus de 3 millions d’applications mobiles sur Google Play et environ le même montant sur l’App Store iOS. Donc, pour se démarquer de la foule, l’objectif devrait être de vraiment améliorer quelque chose.

La partie principale est de fournir une expérience utilisateur native. Natif signifie qu’il est conforme aux directives de conception avec les plates-formes sous-jacentes comme iOS ou Android.

Pour vous donner quelques exemples, commençons par la navigation. La navigation est assez différente sur iOS et Android.

Les utilisateurs iOS sont habitués à utiliser un geste de balayage pour naviguer entre les différentes pages. Cela a beaucoup de sens, car sur Android, vous avez un bouton de retour sur lequel vous pouvez appuyer en bas, mais sur iOS, il n’y a pas de bouton intégré pour revenir en arrière.

Si vous n’avez que le bouton de retour en haut de la page, cela signifierait que les utilisateurs devraient toujours revenir en haut du téléphone mobile. Cela pourrait être un peu délicat car les téléphones deviennent de plus en plus gros. Cela signifierait également que les utilisateurs devront utiliser leurs deux mains pour contrôler l’application. C’est la raison pour laquelle il est vraiment préférable d’utiliser la navigation par balayage arrière sur iOS. Sinon, les utilisateurs pourraient trouver cela étrange, ce qui peut conduire les utilisateurs à abandonner l’application.

Sur Android, en revanche, vous avez un bouton de navigation arrière avec un bouton de retour «physique» sur l’appareil. De plus, vous avez généralement un tiroir de navigation, contrairement à iOS. Sur les smartphones Apple, la barre de navigation des onglets est en bas la plupart du temps.

En plus de la navigation, d’autres différences peuvent être subtiles mais peuvent faire une énorme différence si vous les résumez toutes entre les deux plates-formes, telles que:

Défilement: l’aspect et la convivialité du défilement d’une liste sont différents en raison de la vitesse, de la vitesse et de l’accélération du défilement réel

L’aspect de la barre de défilement
Boutons
Types et tailles de police

Dialogues: comme le dialogue natif et le partage
Sélecteurs de date et d’heure

Voici une démo rapide des dialogues natifs sur Android et iOS:

Commandes rapides Qt 2 vous offre une grande flexibilité pour améliorer la conception des commandes individuelles. Cependant, obtenir tous ces détails natifs pour Android et iOS sera une tâche énorme. Mais sans cela, votre application ne ressemblera tout simplement pas à une application mobile native.

C’est une des raisons pour lesquelles Felgo SDK a été créé il y a près de dix ans. Felgo étend Qt avec plus de 200 API supplémentaires pour simplifier particulièrement le développement mobile. Initialement, l’accent était mis sur le mobile, mais au cours des dernières années, les meilleures pratiques, en termes d’UX à partir du mobile, se sont également répandues sur d’autres plateformes. Surtout dans les applications embarquées, où un UX de type smartphone devient récemment une meilleure pratique.

De plus, si vous regardez les applications de bureau, vous obtiendrez de plus en plus d’influence en termes d’expérience utilisateur du monde mobile. Si vous le comparez à il y a dix ans, beaucoup de choses ont changé dans un sens positif.

Il y a une tendance positive en ce qui concerne les API que vous pouvez utiliser car vous n’êtes pas limité aux plates-formes mobiles. Maintenant, vous pouvez également l’utiliser sur des appareils intégrés et de bureau.

Outre le SDK, Felgo propose également des services professionnels et aide les équipes à développer des applications pour toutes les plateformes telles que mobile, embarqué et web. Felgo organise également des formations sur site ainsi qu’à distance, ce qui est plus courant de nos jours.

Les 200+ API Felgo sont ajoutés par Felgo au-dessus de Qt, ce qui signifie que vous pouvez utiliser la gamme complète des API QML en plus de celles marquées en orange dans le tableau ci-dessous. Comme vous pouvez le voir, il existe différentes fonctionnalités et fonctionnalités disponibles non seulement pour l’interface utilisateur et les contrôles, mais elles tournent également autour de la logique, des fonctionnalités natives et plus encore. Les API et les composants qui offrent le plus de valeur pour vous et votre projet dépendent des cas d’utilisation.

Voici un aperçu rapide des API et des composants les plus courants pour les plates-formes mobiles:

Commençons avec mise en page adaptative ou également appelé mise en page réactive. Cela signifie que votre application s’adapte / répond à la taille de l’écran, pour utiliser tout l’espace disponible. Par exemple, sur une tablette, vous pouvez afficher une interface utilisateur différente de celle d’un smartphone, car il y a beaucoup plus d’espace disponible. Ce ne serait pas une bonne idée de simplement l’intensifier.

Les composants Felgo feront les ajustements automatiquement. Ils changent automatiquement lorsque l’écran s’agrandit, par exemple afficher du contenu supplémentaire côte à côte. Le véritable avantage est que vous pouvez l’utiliser comme base et personnaliser davantage à votre guise, sans prendre soin de tout cela dès le début.

Vous pouvez également modifier la plate-forme cible et la taille de l’écran sur le bureau à des fins de simulation.

Un autre sujet qui est souvent négligé, mais qui est un élément clé de l’UX, est le encoche ou découpe d’affichage. L’encoche / découpe de l’affichage est la zone en haut et en bas où une partie de l’écran est partiellement recouverte par le cadre. Étant donné qu’un nombre croissant d’appareils mobiles sont livrés avec une telle conception, cela devient plus important.

Vous devez éviter d’afficher tout contenu critique dans cette zone, car il pourrait être chevauché par ces zones supérieure et inférieure, à la fois en mode portrait et paysage.

Avec le SDK Felgo, vous obtenez des composants qui prennent entièrement en charge cette conception sur iOS et Android. Vous avez un contrôle total sur la zone de sécurité et sur ce que vous choisissez d’y rendre ou non.

Pour de nombreuses fonctionnalités et services, il est logique ou même nécessaire d’intégrer un service tiers, comme pour les publicités, les analyses et plus encore.

Plugins Felgo proposer des intégrations de services tiers prêtes à l’emploi, telles que:

Voici un exemple de l’intégration d’un plug-in pour la notification push à distance avec OneSignal:

Une difficulté courante avec les services tiers est de s’assurer qu’ils fonctionnent avec les dernières versions de Qt, iOS, Android et Android SDK & NDK. Cela peut prendre beaucoup de temps. Felgo s’en charge pour vous et s’occupe de la maintenance et de la mise à jour des plugins.

Si vous avez besoin d’aide pour intégrer l’un des plugins existants ou pour intégrer un autre service tiers avec Qt ou Felgo, vous pouvez contacter l’équipe Felgo Professional Services.

Une réalité plus avancée, mais de plus en plus importante, est la réalité augmentée. Avec Felgo, vous pouvez utiliser cette fonctionnalité prête à l’emploi avec un plugin AR.

Vous pouvez trouver des exemples et des guides d’intégration pour des sujets tels que AR, ML et 3D dans la documentation.

Un autre prospectus clé pour créer une excellente application est de tester souvent, en particulier sur votre appareil mobile. Les développeurs Qt ont souvent tendance à développer et à tester principalement sur le bureau et à se déployer uniquement sur des appareils mobiles sporadiques.

Tout d’abord, vous écrivez votre code, appuyez sur enregistrer, compilez-le, déployez-le, puis testez sur votre mobile. La principale différence est que cela prend beaucoup plus de temps sur mobile que sur ordinateur. Sur le bureau, selon votre projet, cela peut prendre entre quelques secondes et quelques minutes.

Sur mobile, en fonction de votre projet, cela peut rapidement prendre plusieurs minutes. Si vous considérez que vous testerez probablement sur plusieurs appareils comme les smartphones et les tablettes ou Android et iOS, cela se résume très rapidement.

Vous testerez très probablement votre code des dizaines ou des centaines de fois par jour. Il y a beaucoup de temps lorsque vous attendez le déploiement de votre application et que vous perdez votre concentration du codage lui-même.

C’est pourquoi Felgo a créé une solution à ce problème qui s’appelle QML Live Roload. La solution de Felgo réduit le processus de déploiement et de test à une seconde.

Comment cela marche-t-il? QML Live Reload est une application autonome qui est ajoutée en plus de votre environnement Qt Creator comme vous pouvez le voir ci-dessous. Il est intégré directement avec Qt Creator. Lorsque des modifications sont détectées, tous les clients connectés sont mis à jour simultanément. Le code est transféré sur ces appareils et se recharge immédiatement. Cela ne se produit pas seulement sur les applications de bureau, mais également sur les appareils iOS et Android connectés. C’est un énorme gain de temps car il vous suffit d’attendre une seconde au lieu de plusieurs minutes.

Le déploiement normal et QML Live Reload ont un problème en commun: vous commencerez toujours à la racine de l’application et devrez naviguer jusqu’à la page que vous souhaitez actuellement tester.

Felgo a résolu ce problème avec la prochaine génération de rechargement de code appelée Rechargement à chaud QML.

Le rechargement à chaud QML avec Felgo Live vous permet de modifier votre code source QML et JavaScript et d’afficher le résultat en temps réel. Il applique QML, JavaScript et les modifications des actifs instantanément sur chaque appareil connecté, immédiatement après l’enregistrement.

QML Hot Reload applique des modifications dans votre code source sans perdre l’état de votre application. Si vous travaillez actuellement sur une sous-page, vous n’aurez pas à y revenir après chaque modification, vous resterez exactement où vous en êtes dans votre application.

Cela change la façon dont vous codez avec Qt. Certains des principaux avantages de l’utilisation de QML Hot Reload sont que vous pouvez:

enregistrez votre code beaucoup plus souvent
faire des intégrations plus petites

construire l’interface utilisateur de manière plus incrémentielle
non seulement tester des choses simples et changer les propriétés
changer la gamme complète: ajoutez de nouveaux fichiers QML et modifiez plusieurs changements à la fois

Pour résumer, QML Hot Reload est un outil autonome qui fonctionne sur Qt Creator, Qt Design Studio, Qt 3D Studio, Visual Studio, d’autres IDE Text Editor et fonctionne parfaitement avec tous les projets Qt et Qml. Vous n’avez pas besoin d’utiliser d’API Felgo car cela fonctionne avec n’importe quelle application Qt stock juste sortie de la boîte. QML Hot Reload fonctionne sur les applications mobiles de bureau, intégrées et Web.

Étant donné que seuls les codes QML et JS peuvent être rechargés à chaud sans étape de compilation, il est recommandé d’utiliser QML autant que possible dans votre application. Il est parfaitement possible d’utiliser QML et JS non seulement pour l’interface utilisateur, mais également pour la logique d’application qui n’est pas vraiment critique en termes de temps.

Bien sûr, cela ne signifie pas que vous devez démissionner sur C ++, vous pouvez toujours l’utiliser avec QML et utiliser QML Hot Reload pour les parties QML.

Ce qui est cool, c’est que vous pouvez utiliser cette technologie pour les mises à jour OTA afin que vous puissiez publier de nouvelles mises à jour d’application pour mobile, ordinateur de bureau et intégré. Vous pouvez avoir ces applications en direct mises à jour avec la même technologie en direct tant qu’il y a une connexion Internet. OTA travaille également sur intégré.

La dernière pratique pour mobile est le processus de publication proprement dit sur les app stores. Le processus habituel est qu’un membre de votre équipe, généralement le DevOp ou l’ingénieur de construction, est responsable de la configuration d’un PC de construction et du processus de construction proprement dit. La publication sur l’App Store est alors un processus manuel.

Cependant, le projet se poursuit et les problèmes vont commencer. Que se passe-t-il lorsque la version Qt, Android, iOS ou Android NDK change? Que faites-vous lorsque les versions ne fonctionnent pas ensemble? Que se passe-t-il lorsque l’exigence Android ou le SDK change? Il existe de nombreux scénarios qui pourraient être moins bénéfiques pour le produit.

Pour résoudre ce problème, Felgo Cloud Builds a été créé. Fondamentalement, vous connectez votre référentiel Git au serveur Felgo Cloud Builds. Ils peuvent tous deux s’exécuter sur le Web ou sur votre propre serveur.

Ensuite, vous pouvez créer votre application pour votre plate-forme cible directement dans le cloud.

Cloud Builds vous permet de créer automatiquement l’application réelle. Vous pouvez ensuite distribuer ces binaires. Il est également possible de télécharger automatiquement vos fichiers binaires directement sur l’iOS App Store et le Google Play Store. À l’étape suivante, vous pouvez le connecter à Apple Test Flight pour distribuer votre version bêta aux utilisateurs de test Apple ou la distribuer au Google Play Store pour les tests bêta. Si vous le souhaitez, vous pouvez également le faire vivre instantanément.

Un grand avantage de Cloud Builds est qu’une fois configuré, tout est automatisé et facile à utiliser.

Cloud Builds vous permet également d’intégrer des étapes de construction, de test ou de déploiement personnalisées.

Vous pouvez également publier votre application pour le Web via Felgo pour l’assemblage Web à partir du même code source.

Felgo pour WebAssembly vous aide à rationaliser votre processus de développement et à maintenir une base de code universelle unique pour toutes vos cibles de déploiement, y compris le Web.

Avec Felgo pour WebAssembly, vous pouvez mettre sur le Web des applications Felgo et Qt prêtes pour la production!

Vous pouvez également utiliser QML Hot Reload avec WebAssembly directement à partir de Qt Creator:

Pour résumer les meilleures pratiques les plus importantes, voici un aperçu rapide:

Offrez une réelle valeur ajoutée à vos utilisateurs. Assurez-vous d’avoir la bonne proposition de valeur.
Impressionnez vos utilisateurs avec une excellente interface utilisateur et UX qui respectent les normes de la plate-forme.

Testez souvent votre application pendant le développement pour obtenir l’intégralité de l’interface utilisateur et de l’expérience utilisateur.
Communiquez fréquemment les mises à jour. Malheureusement, l’importance des mises à jour fréquentes est souvent négligée. Un CI / CD automatisé peut vous aider à raccourcir le cycle de publication.
Analysez ce que les utilisateurs font de vos produits afin d’améliorer votre application en fonction des commentaires.

Optimisez votre entrée dans l’App Store.

le Felgo SDK et professionnel Services de développement Felgo et formations peut vous aider à n’importe quelle étape du développement d’une application avec Qt et / ou Felgo.

Les ajouts les plus importants du SDK Felgo en plus de Qt sont: