Récemment, nous avons eu le privilège de travailler sur un projet amusant et amusant pour créer une application Web Django qui mesure la chance, baptisée Luckometrics. Cette application utilise un ensemble de nombres générés par les utilisateurs pour calculer leur score de chance. Il fait également apparaître un message divertissant en plus de la partition. Le concept est assez simple et est au final une tentative de combler un créneau et de capitaliser sur toutes les recherches Google sur ce sujet. Cela faisait un moment que nous avions l’idée, mais qui peut se permettre de créer des applications pour le plaisir ? Les applications gamifiées peuvent rapporter de l’argent, mais c’est une discussion pour une autre fois. Cette fois, nous partagerons nos leçons apprises lors de la création de l’application.
Concept initial de l’application Web
Convertir une idée en une application à part entière nécessite un plan solide et le meilleur endroit pour commencer est de créer les wireframes. Tout d’abord, cela vous permettra d’auto-valider votre idée – mettre les choses sur papier apporte de la clarté. Deuxièmement, vous pourrez transmettre et vendre votre idée à vos coéquipiers, développeurs et graphistes beaucoup plus facilement, car vous aurez quelque chose de tangible à montrer.
Vous pouvez vous armer d’un stylo et du papier et noter des schémas, mais si vous travaillez avec des développeurs tiers, les notes manuscrites ne sont généralement pas la meilleure solution. Les wireframes doivent être clairs, cohérents et comporter un certain niveau de familiarité. Par conséquent, vous avez besoin d’un outil largement utilisé dans l’industrie. Nous utilisons du balsamique. C’est l’un des meilleurs outils de wireframing. Vous assemblez rapidement divers objets, les déplacez, alignez et redimensionnez facilement. C’est amusant et fait couler votre créativité tout en vous gardant concentré en même temps. C’est très facile à apprendre et à utiliser, mais cela permet également de partager avec des tiers, ce qui s’avère précieux lorsque vous travaillez avec une équipe de développeurs UI et back-end, souvent situés à la moitié du monde. Vous pouvez partager des wireframes, obtenir leurs retours, commentaires ou leur demander de proposer des améliorations. Il donne également un niveau de clarté nécessaire pour transmettre des concepts complexes. Il supprime les peluches graphiques inutiles et vous permet de percer rapidement et efficacement la conception fonctionnelle.
Si vous voulez développer une application réussie, vous devez être capable de voir la situation dans son ensemble. De nombreux développeurs se perdent dans les mauvaises herbes de la programmation et oublient la chose la plus importante – comprendre votre utilisateur. Une application peut faire beaucoup de choses incroyables en arrière-plan, mais si vous ne pouvez pas les transmettre à l’utilisateur, vous allez échouer. C’est pourquoi il est si important de se concentrer sur l’architecture de l’information/la navigation, le contenu et les mécanismes de rétroaction.
L’IA doit être centrée sur l’utilisateur et orientée vers les tâches. Pour y parvenir, vous souhaiterez peut-être effectuer des tests utilisateur avant de créer l’application. Quelques outils utiles existent pour valider votre IA – Treejack, observation modérée, focus groups. Si vous n’avez pas le temps de faire des tests utilisateurs formels, passez au moins du temps à discuter avec vos amis et collègues de la façon dont votre application pourrait fonctionner et comment ils interagiraient avec elle.
Votre contenu doit être écrit pour votre public. Utilisez des outils tels que Google Keyword Planner pour savoir ce que les gens recherchent. Concentrez-vous sur le ton, le style d’écriture et assurez-vous que votre contenu est exempt d’erreurs. Si la rédaction n’est pas votre point fort, engagez un rédacteur de contenu et un relecteur – oui, vous aurez peut-être besoin des deux, car de nombreux écrivains talentueux ne sont souvent pas les meilleurs relecteurs.
Fournir des mécanismes de rétroaction directs et indirects tels qu’un formulaire de contact, Google Analytics et les outils Google Webmaster. L’intégration du feedback doit être continue. Vous voudrez peut-être l’organiser en sprints et en releases. Si vous essayez de rendre votre application parfaite dès le départ, vous échouerez très certainement. Concentrez-vous plutôt sur les fonctionnalités de base et l’expérience utilisateur, puis continuez à ajouter des fonctions en fonction des commentaires des utilisateurs.
Enfin, élaborez une stratégie marketing. Vous devez savoir comment et quand vous lancez l’application. Le timing est primordial pour un lancement réussi. Écrivez vos extraits Twitter et Facebook, configurez des comptes sociaux et rédigez des e-mails promotionnels. Vous pouvez envisager d’utiliser la publicité au paiement par clic pour obtenir ce premier coup de pouce SEO. Assurez-vous que les fichiers robots.txt et sitemap.xml sont configurés et que toutes vos métadonnées sont en place. L’utilisation de Google Keyword Planner vous aidera à vous concentrer sur les métadonnées essentielles et à vous assurer que votre application Web dispose de tous les crochets de référencement. Vous devez augmenter rapidement dès la sortie de la porte. Notez tout cela et créez un calendrier de marketing – vous en aurez besoin pour rester concentré.
Construction de l’interface utilisateur et gestion de projet
Une fois vos wireframes prêts, vous devrez commencer à travailler dans deux directions : l’interface utilisateur graphique et le back-end. Ici, vous avez besoin d’un plan de projet solide et pas seulement dans votre tête. Nous trouvons que cela aide à créer une structure de répartition du travail (WBS) divisée en deux compartiments – l’interface utilisateur et le backend. Cette séparation fonctionnelle vous permettra de travailler sur ces deux composants en parallèle puis de bien les réunir au final. Nous utilisons Mavenlink pour suivre les tâches et les activités de notre gestion de projet. Nous apprécions particulièrement une fonctionnalité Gantt très fonctionnelle qu’ils fournissent dans leur package payant. Il donne une vue plongeante sur l’ensemble du projet. Nous avons utilisé de nombreux outils de gestion de projet dans le passé et Mavelink offre le meilleur équilibre entre valeur et coût. Si vous voulez un suivi du temps, alors ils deviennent chers.
Les wireframes jettent les bases du travail de l’interface utilisateur, mais ce n’est que la première étape. Ensuite, vous avez besoin de la conception graphique. De nombreuses décisions importantes devront être prises au cours de cette étape, telles que la sélection de votre style, de vos couleurs et de vos polices. L’attrait visuel est primordial dans les applications gamifiées, car c’est ce qui attire l’utilisateur. Vous pouvez choisir de faire la conception graphique vous-même et passer de nombreuses heures à lutter avec Photoshop. Nous croyons en la spécialisation et trouvons un spécialiste fonctionnel pour chaque compétence requise. Oui, vous devrez payer… mais le temps, c’est de l’argent. Un expert connaîtra beaucoup mieux son domaine et produira des résultats meilleurs et moins chers au final.
Assurez-vous que votre conception graphique est finale et que vous couvrez tous les détails. Il est beaucoup moins coûteux de résoudre les problèmes de convivialité maintenant que plus tard. Une fois que vous êtes satisfait de la conception globale, vous devrez choisir la technologie frontale. Dans la plupart des cas, il s’agira d’un framework JS tel que Angular JS, Backbone JS, Amber JS. La grande multitude de technologies est probablement le plus grand défi. Vous pouvez passer un temps démesuré à les rechercher sans prendre de décision fiable. Notre conseil est d’en choisir un avec un grand soutien derrière lui (Google, Twitter) et de tirer parti de vos connaissances et de votre expérience existantes. Pour les petites applications, un framework JS peut être excessif, mais gardez à l’esprit l’évolutivité. Un jour, votre application devra peut-être grandir.
Ensuite, vous devrez convertir votre conception en un package HTML/CSS/JS fonctionnel. Construisez d’abord pour le mobile. Au moins 50% de nos utilisateurs accèdent à notre application via mobile, et ce nombre n’a cessé de croître. Concentrez-vous sur la convivialité mobile et assurez-vous de tester sur de vrais appareils, pas seulement sur des émulateurs de taille d’écran. Par exemple, Flash ne fonctionnera pas sur les appareils Apple. Testez également les dernières versions de tous les principaux navigateurs. Certains navigateurs ne sont toujours pas très à l’aise avec HTML 5, et vous voudrez peut-être vous en tenir à XHTML Strict pour le moment. Passez du temps sur des tests approfondis de l’interface utilisateur maintenant pour éviter des coûts supplémentaires et des problèmes à la fin.
Construire le backend
Maintenant, un peu sur les composants backend. Votre technologie backend pilotera les interactions avec la base de données et la logique derrière votre application. Il y a quelques questions auxquelles vous devrez répondre ici, et aucune d’entre elles ne s’avère facile. Le plus grand défi est d’avoir à votre disposition un grand nombre de technologies concurrentes et tout aussi excellentes. Faut-il utiliser Django ou PHP ? Que gérez-vous côté serveur et côté client ? Quelle technologie de base de données doit être utilisée ? Vous devez répondre à toutes ces questions avant de poursuivre la mise en œuvre de votre idée.
Soyez prêt à passer beaucoup de temps sur vos recherches et, surtout, à faire des compromis et à éviter le placage d’or. Concentrez-vous sur ce dont vous avez besoin maintenant, pas sur ce que vous pensez être bon à l’avenir. Notez vos exigences et attentes fondamentales sur papier et restez concentré. Les technologies largement adoptées bénéficieront d’un meilleur support et d’un écosystème qui réduira vos coûts de développement. Si vous n’avez pas à choisir un langage de programmation obscur, optez pour le plus populaire. Enfin, vous devez tirer parti de vos investissements antérieurs. Si vous avez beaucoup d’expérience avec Ruby, utilisez-le. Ne commencez pas avec une nouvelle langue juste pour le plaisir, à moins que vous ne vouliez expérimenter et apprendre de nouvelles choses. Tous les langages de programmation sont presque également capables. Plus vous vous éloignez de votre pile typique, plus la courbe d’apprentissage et les coûts seront élevés.
Hébergement de votre application
Maintenant sur l’hébergement. Il existe une multitude d’options d’hébergement, mais plus une option est chère, plus elle nécessitera de travail, de temps et de maintenance. Pendant le processus de développement, vous pouvez créer un serveur local. Cependant, nous ne recommanderions pas cette approche. Plus vous êtes proche de votre environnement d’hébergement réel, moins vous aurez de problèmes de post-déploiement. Il existe de nombreuses options d’hébergement à faible coût, notamment Linode, Digital Ocean, Vultr, où vous pouvez héberger pour 10 $ par mois et plus. Ils offrent tous une variété de systèmes d’exploitation. Construire un serveur pour une application avec toutes les dépendances nécessaires peut devenir une tâche fastidieuse, encore une fois grâce à l’abondance de technologies de serveur.
Fedora serait probablement le plus simple à installer car il est livré avec de nombreuses dépendances mises à jour. Si vous recherchez une solution de niveau entreprise gratuite, CentOS est probablement votre meilleur choix. Nous avons choisi Heroku pour nos projets car nous apprécions la simplicité et la rapidité de provisionnement de nouveaux environnements et de déploiement qu’il offre. Heroku est optimisé pour exécuter des applications et vous propose une sélection des langages de programmation les plus populaires. Vous pouvez héberger votre application gratuitement pendant le développement et si vous n’avez pas besoin d’une latence élevée. Dans leur forfait gratuit, votre application expirera après avoir été inactive pendant une période, et il faut 5 à 7 secondes pour la réveiller. Heroku s’intègre très bien à Github, et il faut environ 30 secondes pour déployer votre application en appuyant sur un seul bouton – nous apprécions cette commodité.
Conclusion
Eh bien, nous pensons avoir touché à tous les points les plus importants. Beaucoup trouvent que la création d’une application finit par être beaucoup plus difficile qu’ils ne le pensaient au départ. Il y a tellement plus dans une application que la simple écriture du code. Malheureusement, de nombreux développeurs ne parviennent pas à sortir de la mentalité de « développeur » et à mettre leur chapeau stratégique. Réfléchissez à chaque détail avant de commencer. Le contenu, l’architecture de l’information et la stratégie de promotion doivent être aussi importants que le choix du bon langage de programmation ou d’une solution d’hébergement.
