Nous avions un événement destiné aux clients, dont le thème était basé sur un certain grand tournoi de basket-ball universitaire qui a lieu chaque année en mars (nom non divulgué en raison de restrictions de licence). Pourrions-nous créer une expérience utilisateur convaincante dans Mendix, en quelques jours seulement, avec uniquement les données de cette API Sports Feed ??

La prémisse

Quatre matchs de basket-ball se dérouleraient au cours de l'événement. Tous les participants seraient en mesure de prédire qui gagnerait le match et quelle serait la marge de victoire. Un score parfait serait de 100 si vous choisissiez le vainqueur et la marge exacte pour chaque match. Choisir le mauvais vainqueur ne rapporterait aucun point, et choisir le vainqueur mais avec la mauvaise marge générerait un pourcentage de 25 points, en fonction de la distance à laquelle vous étiez.

L'application comprendrait les fonctions suivantes :

1. La possibilité de s'inscrire avec une adresse e-mail et de télécharger un selfie.
2. Une liste de jeux et le score actuel.
3. La possibilité de faire une prédiction sur chaque match.
4. Une vue du classement en direct, qui se met à jour chaque fois que le score d'un match change.
5. La possibilité de voir la répartition des points gagnés par jeu pour chaque participant.

L'événement se déroulait dans un pub local et personne n'avait d'ordinateur portable à portée de main. Une expérience mobile était donc la voie à suivre. Nous savions également que l'application ne serait utilisée que très brièvement. Personne ne veut télécharger une application que vous n'utilisez que pendant quelques heures. De plus, comme nous n'avions que quelques jours pour terminer l'application, une application native qui aurait dû être publiée sur un App Store était hors de question.

Cela nous a conduit à une approche Progressive Web App (PWA). Vous pouvez tout lire sur how Mendix vous permet de créer des PWA ici.

…et plein Documentation PWA ici.

Une autre nouveauté intéressante a été la suggestion d'avoir un classement animé qui déplacerait dynamiquement les leaders vers le haut en temps réel. Bien qu'il n'existe pas de widget prêt à l'emploi pour cela, l'extensibilité de MendixLe framework basé sur React nous a permis d'en créer un.

Pendant que je travaillais sur l'interface utilisateur de l'application, mon collègue Tyler a établi le classement.

Voici la description de Tyler concernant le développement du classement animé :

En utilisant le générateur de widgets enfichables, il n'a pas été difficile de mettre en place le widget de classement pour ce projet. Mendix Les widgets s'appuient sur le framework React, il est possible d'incorporer n'importe lequel des milliers et milliers de composants React qui sont facilement disponibles. Dans ce cas, sachant que nous voulions que le classement s'anime lorsque les scores changeaient, nous avons opté pour le Boîte à outils React Flip pour effectuer le gros du travail à notre place.

Pour générer l'effet souhaité, il nous a suffi de connecter les composants Flipper et Flipped de la boîte à outils Flip au modèle de widget fourni par le générateur de widgets enfichables, et nous étions prêts à commencer. Ajoutez un petit xml pour spécifier les propriétés que nous voulions exposer Mendix Studio Pro, et c’est tout : un widget de classement animé personnalisé était prêt à être déployé avec un minimum d’effort.

Vous pouvez lire tous les détails sur créer des widgets enfichables ici.

L'utilisation de Mendix Team Server, Tyler et moi-même devions collaborer au développement, soumettre des idées de retour et suivre tous nos changements tout en déployant de manière transparente dans nos environnements d'acceptation et de production. Vous pouvez en savoir plus sur Team Server ici.

la construction

Hormis le widget Leaderboard, l'application entière a été créée sans aucun code. Tout a commencé avec l'API Sports Feed. Nous aurions besoin d'un moyen de l'invoquer à intervalles réguliers. Pour ce faire, un événement programmé (TriggerSport_REST) ​​a appelé un microflow EVT_Sport_REST (Figure 2) une fois par minute.

Ce microflux (Figure 2) détermine si l'application est en mode Simulation (nous y reviendrons plus tard), et si ce n'est pas le cas, le flux sportif est-il actif ? Si tel est le cas, un autre microflux (Figure 3) a été appelé pour exécuter l'appel REST du flux sportif. La réponse est également utilisée pour mettre à jour les scores des jeux et pour calculer les scores des prédictions des participants.

Le plaisir

Très tôt, nous avons appris qu'il était nécessaire de pouvoir simuler l'activité de jeu pour tester correctement l'application. Un microflux rapide pour générer des scores de jeu aléatoires a été utilisé. Si l'application est en mode Simulation (défini à partir d'un écran d'administration), ce microflux est appelé à la place de l'API Sports Feed.

L'application

Voici l'écran principal où un utilisateur peut s'inscrire, faire des prédictions sur les jeux, afficher l'état du jeu ainsi que voir le classement des scores des participants.

Voici la vue des parties en cours, des scores et de l'état du jeu :

Il s'agit du classement des participants et de leurs scores cumulés.

Nous pouvons également visualiser toutes les prédictions de jeu qui ont contribué au score du participant.

Réflexions finales

Il s'agissait d'un excellent projet qui a contribué à l'événement client pour le plaisir et la participation. Si vous souhaitez l'explorer vous-même et apprendre comment vous pouvez mettre une application exploitable sur une API dont vous disposez, téléchargez le fichier du projet ici.