Application web progressive sur Symfony et Angular

31.10.2018

Training Realm propose des programmes d'entraînement physique uniques. Ils nous ont demandé de développer une application pour leurs utilisateurs. Jusqu'à présent, les programmes d'entraînement étaient publiés sous forme de pages statiques et les utilisateurs devaient calculer eux-mêmes les jours d'entraînement et se souvenir des résultats. L'objectif de l'application était de faciliter pour tout le monde la planification des jours d'entraînement et le suivi du progrès automatiquement sans avoir à se souvenir des programmes par eux-mêmes.

Collecte des exigences

Nous avons commencé le projet par la phase de collecte des exigences. C'est la phase où nous prenons connaissance des plans et des attentes des clients. Plus nous connaissons les besoins des clients, mieux nous les aidons dans la conception et la mise en œuvre des solutions. Souvent, nous pouvons aussi aider à identifier des exigences que le client n'avait pas prises en compte, évitant ainsi des surprises et des frais inutiles par la suite.

L'équipe de Training Realm connaissait déjà très bien ses utilisateurs et avait une très bonne compréhension de ce qu'elle voulait construire. Grâce à cela, la phase de collecte des exigences a été très rapide. Un point qui a pris un peu plus de temps a été l'examen des options de collecte des paiements et des conséquences fiscales en résultant. Nous les avons aidés à choisir un fournisseur de paiement qui aide également à traiter les taxes lorsque vous collectez des paiements du monde entier. Fastspring.com a été choisi pour son API bien documentée et son support rapide.

Training Realm-1

UX/design

Après la phase de collecte des exigences, notre équipe de conception a créé des maquettes UX décrivant tous les différents écrans et interactions.

Typiquement, nous créons des maquettes UX de tous les écrans principaux et les discutons avec le client. L'accent est toujours mis sur la perspective de l'utilisateur final. Selon les types d'utilisateurs et leurs objectifs et les objectifs des sites web ou des applications, ce processus peut être assez simple ou très complexe. Il peut, par exemple, inclure des tests sur un groupe d'utilisateurs pour identifier les éventuels éléments non intuitifs ou obstacles. Pour trainingrealm.com, les écrans principaux sont l'écran d'accueil et l'écran d'entraînement. C'est là que les utilisateurs passent la majeure partie de leur temps et donc - c'est là que nous avons mis le plus d'efforts.

Lorsque les wireframes sont prêts, les transformer en designs réels est une expérience enrichissante, tant pour nous que pour les clients. Trainingrealm.com gère déjà une grande flotte de sites web. Nous devions nous assurer de rester dans les schémas et les couleurs de la marque, bien que nous ayons modernisé et étendu légèrement.

Training Realm-01

Implémentation

Symfony & Angular

Après la phase de conception, il était temps de construire. Nous avons choisi Symfony pour le backend en raison de sa rapidité et de la facilité de son implémentation. De plus, nous aimons PHP, donc un framework basé sur PHP était un choix naturel.

Trainingrealm.com nécessite une expérience frontale vraiment fluide. Pour y parvenir et garder le code gérable, nous avons choisi Angular pour le framework frontend.

Progressive Web Application

Parce que la majorité des utilisateurs visitent l'application sur des appareils mobiles, le design web réactif était crucial et nous avons minutieusement testé l'application sur divers appareils et largeurs d'écran.

De plus, pour améliorer l'expérience des utilisateurs réguliers, nous avons transformé trainingrealm.com en une Progressive Web App (PWA). Les utilisateurs peuvent sauvegarder son icône sur l'écran d'accueil de leurs téléphones et tablettes et l'utiliser comme une application classique. Les visites depuis des icônes d'écran d'accueil représentent 30 % de toutes les visites.

Intégration Continue

Comme d'habitude, pour faciliter la construction et le test, nous avons utilisé le contrôle de version et mis en place une intégration continue avec l'aide de Jenkins et docker. Chaque fois qu'un développeur soumet un nouveau code, une version mise à jour de l'application est mise en scène sur un serveur de test et des tests automatisés vérifient si tout fonctionne correctement. C'est également excellent pour les clients qui peuvent voir l'avancement du travail jour après jour et pourraient facilement nous aider en intégrant leurs suggestions dans le projet.

Hébergement

L'application est hébergée sur Amazon Web Services. Elle peut rapidement monter en puissance ou se réduire en fonction du nombre d'utilisateurs. Grâce à notre configuration d'intégration continue, de nouvelles fonctionnalités peuvent être déployées rapidement et de manière fiable sans impacter les utilisateurs.

Parce que les utilisateurs de l'application viennent du monde entier, nos mécanismes de surveillance garantissent que le service fonctionne sans interruption 24/7.

Comme beaucoup d'applications web, pour séparer la fonctionnalité principale des pages marketing, le site principal trainingrealm.com a été construit séparément de app.trainingrealm.com où le site est localisé. Pour le constructeur de page de destination, nous avons utilisé Droopler - une distribution Drupal que nous utilisons souvent pour construire des sites web d'entreprise.

Résultats

L'application était un MVP et s'est avérée être un grand succès. Des milliers d'utilisateurs créent des comptes sur le service chaque mois. De nouvelles fonctionnalités et phases pour le projet sont déjà en cours de planification.

Le client est ravi et nous en sommes fiers :)

Training Realm-02