Very Good Moment continue sa croissance avec son concept de Home Marketing proposant des événements funs et conviviaux à partager entre amis (découvrez ou redécouvrez le concept sur https://www.verygoodmoment.com).

A son lancement en 2012 nous avions créé pour notre client une interface d’administration en PHP basée sur les frameworks Zend Framework 1 et Backbone Marionnette essentiellement.

Depuis beaucoup d’eau a coulé sous les ponts et cette interface d’administration a du évoluer constamment pour effectuer de nombreuses migrations techniques et fonctionnelles.

Pour améliorer l’efficacité des salariés de la société nous avons initié au début de l’année une refonte complète de cette interface en choisissant des technologies très récentes.

Le socle de la nouvelle interface est construit autour du framework Angular 4 et de Twitter Bootstrap 4 (encore en version alpha). Le choix de technologies aussi récentes peut paraître risqué, cependant notre objectif est de proposer une solution limitant au maximum l’obsolescence technique. Et cela va permettre d’accélérer l’efficacité des équipes de développement sur le moyen / long terme.

Nous avons profité de cette refonte pour ajouter de nouvelles fonctionnalités et améliorer la rapidité d’utilisation par les administrateurs de Very Good Moment.

Voici quelques-une des fonctionnalités intéressantes que nous avons mis en place.

Plus de place à l’écran

L’interface est conçue pour prendre un maximum de place à l’écran pour améliorer le confort. Nous avons même suggéré à notre client l’achat d’écrans dédiés à certaines tâches, par exemple le travaille sur de longues listes verticales est particulièrement adapté à des écrans haute résolution 16/9 ème que l’on pivote à la verticale.

Impression écran avec sliding menu gauche non replié, dédié aux administrateurs novices ne connaissant pas encore bien les fonctionnalités de l’application.

Interface administration Very Good Moment - Menu gauche déplié

Impression écran avec sliding menu gauche replié, dédié aux administrateurs expérimentés connaissant parfaitement les fonctionnalités de l’application. Un maximum de place est donné au contenu de la page pour plus de confort d’utilisation.

Interface administration Very Good Moment - Menu gauche replié

Raccourcis claviers

Un des objectifs de la nouvelle interface d’administration est l’amélioration de l’efficacité des administrateurs expérimentés.

Pour accélérer au maximum les interractions nous avons ajouté des raccourcis clavier partout ou celà était possible. Le raccourci Ctrl + S est disponible sur toutes les sauvegardes et mises à jour et fera gagner quelques minutes chaque jour aux utilisateurs (multiplié par le nombre de jours dans l’année c’est un gain d’argent pour notre client).

Certaines pages clés offrent un grand nombres d’actions possibles. Afin que l’application soit simple à utiliser aussi bien par les utilisateurs débutants que par les utilisateurs experts un menu permet de rappeler les actions accessibles sur chacune des pages.

Interface administration Very Good Moment - Menu actions et raccourcis

Cette image est floutée pour raisons de confidentialité.

Gestion des langues

Very Good Moment a commencé à poursuivre sa croissance à l’étranger, il est aujourd’hui possible de créer et de publier des événements dans plusieurs pays.

La nouvelle interface d’administration propose la publication d’événements Very Good Moment en France ou à l’étranger, notamment en Belgique, aux Pays-Bas, en Allemagne ou en Angleterre.

Interface administration Very Good Moment -Edition multilingues

Comme vous pouvez le voir sur l’impression écran ci-dessus les interfaces multilingues que nous avons développées ont été peaufinées au maximum.

  • Un onglet permet l’édition des textes dans chacune des langues ;
  • Les erreurs de validation sont gérées à tous les niveaux ;
  • La barre d’états indique à l’utilisateur l’apparition d’erreurs sur la page ;
  • Les onglets disposant de traductions non complètes sont mis en évidence.

Listes évoluées

Logo Ag-Grid

Toutes les listes ont été retravaillées grâce à la librairie Ag-Grid. Elles permettent d’afficher un maximum d’informations et sont dotées de filtres sur pratiquement toutes les colonnes pour trier et filtrer efficacement les données.

Liste évoluée Ag-Grid

Pour permettre ces fonctions de tries et filtres nous avons aussi du améliorer l’API de Web Services REST Very Good Moment.

Editeur riche Medium

Les administrateurs de la plateforme doivent rédiger des textes riches de type postes de blogs. Afin de faciliter ce travail et pour que l’édition soit la plus naturelle possible nous avons intégré l’éditeur WYSIWIG yabwe/medium-editor.

Medium Editor

Medium Editor est inspiré de l’éditeur riche proposé par Medium.com, le gros avantage est que l’interface est très intuitive et sans fioriture. L’utilisateur édite ce qu’il voit et voit ce qu’il édite sans avoir besoin de basculer entre un mode preview et un mode d’édition.

En bonus, pour que le confort soit encore meilleur nous avons implémenté une fonctionnalité de mise en plein écran de l’éditeur en utilisant l’API HTML 5 Fullscreen.

Coûts serveurs quasi négligeables

Amazon S3

Grâce au fait que l’application soit 100% Javascript nous n’avons plus besoin de serveurs PHP.

Le déploiement à été fait sur un Bucket Amazon S3 placé derrière une distribution Cloud Front. Les conséquences sont que les temps de chargement des ressources sont extrêmement rapides et que le coût d’hébergement est quasi nul (moins de 1 euro par mois).

Vous avez une application Angular à développer ? Appelez nous !

Si comme Very Good Moment vous souhaitez faire développer votre interface d’administration pour rendre vos équipes plus réactives n’hésitez pas à nous contacter.

Nous étudierons vos besoins avec soin et attention et vous proposerons des solutions techniques efficaces, novatrices et évolutives (Angular 4 par exemple).

Publié le   11 Juillet 2017
par   Baptiste Gaillard