2009 juin | Tangane - Solutions for Business Value
juin 23
Jamin-Puech
icon1 Victor Nicollet | icon2 Retour d'expérience | icon4 23 juin 2009 |  icon3Aucun commentaire »

Jamin-Puech fabrique et vend des sacs à mains, bijoux et accessoires partout dans le monde, de Tokyo à New York en passant, bien sûr, par Paris. Mais jusqu’à il y a peu, impossible d’acheter leurs sacs directement sur Internet.

small_2897_2236C’est désormais possible grâce au nouveau site e-commerce réalisé par Tangane sur la base d’une plateforme Magento. Vous pouvez également lire notre annonce officielle à ce sujet.

En soi, le site Jamin-Puech suit sans aucune surprise le schéma classique de l’adaptation de Magento aux besoins d’une entreprise bien établie :

  • Une phase d’accompagnement et de conseil de notre client, afin de le faire bénéficier de notre expérience dans le domaine de l’e-commerce acquise entre autres chez Carrefour et Ooshop, et de lui permettre de s’organiser et de prendre des décisions informées sur sa stratégie.
  • La conception et l’intégration d’une charte graphique représentative de l’univers et de la marque, ainsi que la traduction.
  • L’amélioration du comportement de Magento pour s’adapter aux spécificités des clients, pour permettre par exemple aux partenaires de passer par le site pour leurs achats en gros.
  • Une liaison de données automatique entre le site et le système logistique existant, afin de simplifier au maximum la tâche des administrateurs et de l’équipe commerciale.
  • La configuration d’un système de paiement choisi parmi les nombreux systèmes que Magento (ou Magento Connect) propose.
  • Un nouveau zoom, développé en Flex, pour remplacer celui proposé par défaut par Magento.
  • Bien entendu, une formation complète des administrateurs et un support technique présent après la livraison du site.

Au cours du développement, nous nous sommes heurtés à certaines limites de la solution Magento, problèmes qu’il nous a fallu contourner ou résoudre, par exemple:

  • Magento ne permet de gérer, à l’échelle du système, qu’un seul stock par produit. Dans le cadre d’une gestion logistique différenciée (par exemple, qui sépare stock de détail et stock de gros) cette restriction peut s’avérer gênante.
  • Le système de filtrage de l’administration Magento est très puissant mais il ne permet de filtrer que suivant des colonnes prédéterminées, ce qui réduit grandement son efficacité. Nous avons étendu le filtre pour inclure des colonnes supplémentaires suivant les besoins.

Cette expérience nous a permis de développer ce qui revient au final à une stratégie Magento, comprenant à la fois des best practices que nous appliquons pour gagner du temps et éviter les erreurs, et un framework de code réutilisable sur un certain nombre de problématiques.

En particulier, nous disposons maintenant d’un framework d’import/export extensible qui fonctionne comme une couche intermédiaire automatisée entre Magento (dont l’API interne complète est ainsi directement accessible pour une flexibilité maximale) et le système logistique du client. L’adaptation d’un nouveau système logistique se fait par l’intégration de briques d’import spécifiques à ce système, mais qui peuvent bien entendu étendre les briques existantes pour recycler un maximum de fonctionnalités. À partir du moment où le système logistique respecte quelques règles simples en matière d’export, notre framework peut s’y adapter très rapidement.

Bon nombre de ces problèmes ont été résolus soit par des développements internes, soit en adaptant des solutions disponibles gratuitement sur Magento Connect.

juin 4

Voici quelques astuces permettant d’optimiser et d’améliorer le rendu d’un plan 2D en Flex contenant de nombreux éléments (jusqu’à plusieurs milliers). Dans le cas présent, il s’agit d’un plan dynamique : les éléments sont chargées à la volée, le plan peut être agrandi, déplacé, etc. On se trouve donc dans un cas typique de cartographie.

Fluidité des déplacements

Lorsque l’on déplace ce plan (ou que l’on zoome dessus) en utilisant un effet Move ou Zoom, le Flash Player doit redessiner l’ensemble du plan à chaque itération de l’effet. Ce traitement peut devenir très lourd : plus il y a d’éléments et moins le mouvement sera fluide. Une méthode répandue dans beaucoup d’applications de cartographie réalisées en Flex est de diminuer la qualité de rendu lors de l’exécution de l’effet. Une fois l’exécution terminée, on peut remettre une qualité de rendu supérieure.
Une certaine perte de netteté sera visible lors de l’effet, mais celle-ci est minime comparée au gain de vitesse (et donc de fluidité du mouvement).
Voici le code a exécuter au début de l’effet pour diminuer la qualité de rendu de l’animation Flash :

Application.application.stage.quality = StageQuality.LOW;

Voici le code a exécuter à la fin de l’effet pour remettre la qualité de rendu élevée de l’animation Flash :

Application.application.stage.quality = StageQuality.HIGH;

Lissage des polices

Si sur ce plan il y a des éléments de types Label ou Text, on peut constater qu’en zoomant sur ces éléments, les polices ne sont pas lisses. Pour y remédier, il faut embarquer la police avec le fichier .swf, ce qui permettra d’avoir un texte lisse peu importe le niveau de zoom. Pour embarquer une police, il faut tout d’abord récupérer un fichier .swf contenant ces polices. Il est possible d’en faire soi-même avec le logiciel Flash, mais ceci n’est pas l’objet de cet article. L’intégration de ce fichier se fait via la déclaration CSS suivante :

@font-face
{
    src:                url('/assets/fonts/myriad.swf');
    font-family:        'Myriad Pro';
    font-weight:        bold;
}

Cette méthode n’est pas l’unique pour embarquer des polices dans une animation Flash, mais elle offre le meilleur compromis taille du fichier .swf / qualité de rendu.

Redimensionnement de textes

Une fois le code précédent inclus, les textes seront propres et lisses. Toutefois, il reste un souci à régler. Vous remarquerez peut-être que lorsque l’on zoome, les libellés “vibrent”, ou tout du moins se déplacent très rapidement de gauche à droite. Pour éviter ce désagrément, il existe un style de la classe Label assez méconnue : fontGridFitType. Ce style accepte trois valeurs : NONE, SUBPIXEL, PIXEL. Elle permet de spécifier la correspondance d’un TextField sur une grille.
Voici un exemple vous permettant de voir (et ainsi de mieux comprendre) le fonctionnement de cette propriété fontGridFitType.
On constate donc que pour éviter cette impression de “vibration”, il faut setter la propriété comme ceci (en MXML) :

<mx:Label text="Flex" fontGridFitType="none" />

Il existe bien évidemment d’autres types d’optimisations possibles dans ce contexte, comme par exemple l’utilisation d’un BitmapData généré à la volée pour afficher une miniature de la carte ou utiliser la solution Alchemy d’Adobe pour utiliser des algorithmes codés C ou C++ avec la machine virtuelle du Flash Player.