Adobe Flex / AIR : exemples, tutoriels, veille sur les Nouvelles Applications Internet » E-commerce Flex

Quand il y a des clients riches dans l’Air (RIA et Adobe Flex)

Julien Lestel — Mon, 19 Jan 2009 00:05:32 +0000

Camille Roux a mis en ligne une présentation effectuée dans le cadre d’un cours d’IHM (Interface Homme-Machine) dans une école d’ingénieur à Nice.
Voici le contenu de cette présentation intitulée : “Quand il y a des clients riches dans l’Air (RIA et Adobe Flex)”.

Merci à lui

View SlideShare presentation or Upload your own. (tags: rsl module)

Source : Blog de Camille

API Magento pour une boutique en Flex !

Julien Lestel — Fri, 25 Jul 2008 14:24:17 +0000

Depuis le 7 Juillet, la solution OpenSource e-commerce Magento propose une API pour accéder au contenu des boutiques Magento. Cette API supporte SOAP et XML RPC et permet d’accéder directement aux clients, commandes et au catalogue de produits d’un site Magento.

Une introduction à l’API est disponible ici.

Cette API s’avère intéressante pour pouvoir intégrer Magentoavec toutes les applications tierces présentes dans les entreprises et qui doivent interagir avec un site ecommerce (ERP, CRM, Logistique, etc..)

Cette API permettra aussi de développer une interface pour un site e-commerce Full Flex ou de développer un BackOffice Flex pour Magento.

Mercedes et Adobe Flex

Julien Lestel — Wed, 16 Jul 2008 20:58:38 +0000

Mercedes Benz a lancé un nouveau site en Flex pour les USA. Ce site possède une interface agréable et une application de customisation pour élaborer la Mercedes de vos rêves.

Open Screen Project Adobe

Julien Lestel — Thu, 29 May 2008 23:40:02 +0000

L’Open Screen Project consiste à permettre une expérience riche de l’Internet grâce à aux televisions, ordinateurs, téléphones portables, et appareils électroménagers. Le projet Open Screen est supporté par les leaders de ces domaines : Adobe, ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics Inc., Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics Co., Sony Ericsson, Toshiba et Verizon Wireless, et des medias importants, comme la BBC, MTV Networks, et NBC Universal, qui veulent offrir un Web riche agrémenté d’expériences vidéos, de live et de “à la demande” à travers une multitude de terminaux.

Le projet Open Screen fonctionne avec un environnement et un runtime consistant – en gardant les avantages de Adobe® Flash® Player et, in dans un futur proche de Adobe AIR™ — cela va enlever des barrières aux développeurs et designers car publié du contenu et des applications à travers un bureau et des terminaux utilisateurs, comme les téléphone et les mobile internet devices (MIDs). L’Open Screen Project runtime permettra des performances optimales à travers une multitude d’OS et de devices, et finalement fournir la meilleur expérience possible au consommateur.

Spécifiquement, cela va inclure :

La suppression des restrictions de l’utilisation de SWF et FLV/F4.
La publication de layers portables sur les terminaux via des APIs pour Adobe Flash/Flex
La publication du protocole Adobe Flash Cast et du protocole AMF pour des webservices plus robustes.
La suppression des droits de licence

Tout cela sera compris dans la prochain release du Adobe Flash Player et de Adobe AIR pour tous vos terminaux.
Source : Open Screen Project

Comment promouvoir vos applis Flex et AIR ?

Julien Lestel — Wed, 28 May 2008 21:00:02 +0000

Il y a une semaine, au Flex Camp 2 à Toronto, Mike Portter a présenté une session pour nous aider à promouvoir nos appllications Flex et AIR. Il a parlé des tips pour soumettre des applications dans le Showcase Flex et des blogs comme Flex-info, soumettez votre contenu au developer center, et official Adobe programs pour vous permettre de mieux promouvoir vos application. Ces slides pourraient vous être très utiles si vous souhaitez voir les dernières applications innovantes Flex / AIR.

Un presentation similaire va avoir lieu au Flex 360 à San Jose et Mike essaie de programmer des session pour le MAX North America et le MAX Europe.

Source : RIApedia

Ajouter le paiement PayPal dans Flex / AIR

Julien Lestel — Wed, 19 Mar 2008 00:38:07 +0000

Voici un exemple de code pour ajouter le bouton PayPal “buy now” lors de vos développements Adobe Flex.

voir l’exemple

Ce code peut être améliorer pour faire un panier à envoyer à paypal en Flex. La méthode employée envoie les données à paypal avec une redirect du bouton “buy now” en utilisant flash.net.URL request. L’exemple est basique, et une gestion complète du panier est un travail plus long…

Voici maintenant les sources :

Du fichier HTML classique pour l’appel à PayPal :

Untitled Document

Et voici la partie Flex:

import flash.net.URLRequest
public function makePayment():void{
var url:String = “https://www.paypal.com/cgi-bin/webscr”;
var request:URLRequest = new URLRequest(url);
var variables:URLVariables = new URLVariables();
variables.cmd=”_xclick”;
variables.currency_code=”EUR”;
variables.business=”contact@flex-info.fr”;
variables.item_number = “001″;
variables.item_name = “Donation pour Flex-Info.fr”;
variables.amount= “1.00″;
variables.quantity = 1;
variables.tax = '';
request.data = variables;
request.method = URLRequestMethod.POST;
navigateToURL(request,”_parent”);
}
]]>

Pour intégrer ce bouton sur une liste de produits :

1) chargez les données des produits depuis un fichier xml et un appel avec HTTPService

2) utilisez le composant “repeater” pour créer vos boutons (et l’affichage des produits)

… et implémentez le tout dans votre panier pour payer avec PayPal !

En espérant que cela aide certains d’entre vous
Note : Cette manipulation est valable pour implémenter la plupart des paiements en ligne
Source : Flex Community

Tracking de la naviguation et des actions en Flex avec Google Analytics

Julien Lestel — Tue, 11 Dec 2007 10:26:56 +0000

L’analyse de la naviguation des utilisateurs et de leurs actions sur un site Internet est souvent indispensable pour améliorer un service. La plupart des sites Web utilisent cela. Si vous ne l’utilisez pas, Google fourni un service appelé Google Analytics (GA), qui permet de suivre les visiteurs de manière très simple. Vous pouvez en savoir plus et créer un compte ici : http://www.google.com/analytics/

Je contruis des applications Flex et l’analyse de la naviguation est tout aussi importante sur une appli Flex. Cependant, Google Analytics est fait pour fonctionner sur des sites traditionnel HTML, avec plein de termes barbares comme “body onLoad” et d’autres. Donc, faire fonctionner Analytics avec une appli Flex n’était pas possible à première vue, je vais donc vous montrer la marche à suivre si vous désirez utiliser Google Analytics dans Flex.
Tracking de la Navigation et des Actions en Flex :

1: Créer votre compte, un nouveau profil, et récupérer votre account id.
C’est très simple. A la fin du processus, vous voyez un bloc de JavaScript qui doit être mis dans le HTML Wrapper de votre application Flex.

2: Modifier le HTML Wrapper:
Si vous laissez Flex Builder généer le “Wrapper”, vous pouvez le modifier dans le fichier “index.template.html”, sinon il faut juste aller dans le Wrapper HTML. Coper et coller tout le bloc de JavaScriptdans le HTML Wrapper. Je met le mien juste sous la définition des styles et au dessus du bloc qui déifni les variables Globales. Le premier tag fait l’include du fichier JS, les tags suivants initialisent l’account id, et invoquent la fonction “urchinTracker()”, qui permet à Google de sauvegarder les visites avec Google Analytics. Le bloc de JavaScript ressemble à cela :

Maintenant, vous voulez en connaître plus sur la naviguation de vos visuteurs dans votre appli Flex. Pour cela, il faut utiliser une ExternalInterface dans Flex pour appeler la fonction “urchinTracker()”, mais en lui passant un argument… Cet argument ressemble à une URL. Dans mon cas, cela n’est pas un problème, depuis que la naviguation est représentée par un form:

/ApplicationName/MainNav/SubNav/OptionalAction.

J’ai implémenté une méthode publique dans le Main de mon appli Flex:

/** envoie l’usageID à GoogleAnalytics */
public function logUsage(sUsageId:String):void
{
ExternalInterface.call(”urchinTracker”,sUsageId);
}

Aux points de naviguation et dans les sous-applications si on le désire, on appelle la méthode :

_app.logUsage(”/” + _sAppName + “/SubAppName[/Action]” );

Le résultat est très intéressant puisque toute la naviguation des visiteurs dans mon application est enregistrée par Google Analytics. Google Analytics possède beaucoup de filtres et d’outils d’analyse pour pouvoir analyser les visites de votre application.

Tracking Ecommerce en Flex:

Google analytics vous permet aussi de tracker les ventes réalisées via votre application. Google utilise une fois de plus de termes étranges comme “submit form” and “receipt page”, que nous ne connaissons pas en Flex.
Mais si votre site Flex vend en ligne, c’est facile d’enregistrer les commandes dans GA.

1: Configurer GA pour le Tracking Ecommerce :
Logger vous avec votre compte.
Cliquez sur Editer sur le profile qui réalise des ventes en ligne.
Sur la page de configuration, cliquez sur editer à côté de Website Profile Information.
Changez le boutton radio de E-Commerce Website de Non à Oui.

2: Modifier le Html Wrapper:

Cela fonctionne en plaçant les données des transactions de vos ventes dans un formulaire caché dans le HTML Wrapper. Ce formulaire invisible doit être placé juste avant la fermeture du tag body. Voilà ce que ça donne, vous pouvez copier cela exactement :

Ensuite, on utilise encore ExternalInterface pour transmettre la transaction and et les produits commandés dans la fonction Wrapper :

/* appellé par ExternalInterface */
function logTransaction(sTransInfo)
{
document.getElementById(’utmtrans’).innerHTML = sTransInfo;
__utmSetTrans();
}

Vous voyez que la fonction prend la vente effectuée et mets les infos dans un formulaire caché. Ensuite, elle appelle la focntion “__utmSetTrans”, qui lit les valeurs du formulaire caché et les envoie à Google Analytics. La chaîne de caractères représentant la transaction est formatée et possède la forme suivante :

UTM:T|[order-id]|[affiliation]|[total]|[tax]|[shipping]|[city]|[state]|[country] UTM:I|[order-id]|[sku/code]|[productname]|[category]|[price]|[quantity]

Cela fonctionne grâce aux délimiteurs, “UTM” et “|”, les espaces et lignes vides ne sont pas pris en compte.Construisez maintenant cette chaîne dans votre page de panier comme vous le voulez.Vous pouvez avoir plusieurs articles (UTM:I) dans votre transaction.. Je pense que seul l’order-id est requis mais il faut tout de même inclure tous les delimiteurs “|”, même s’il n’y a pas de données entre eux.

Note : Cela prend environ 12 à 24 heures pour que les données soient visiblent dans les rapports Google Analytics. Il faut juste être patient.

Vous pouvez aller voir l’aide GA pour plus d’infos.

En utilisant le Javascript, votre appli n’est pas modifiée, et n’avez pas à vous en faire concernant les problèmes de crossdomain, etc…

J’espère que cet article vous a été utile !

Prestataire Adobe Flex Toulouse (e-commerce, RIA, et bien plus…)

Julien Lestel — Thu, 22 Nov 2007 16:38:45 +0000

Voici un lien vers une société toulousaine proposant la mise en place de sites e-commerce en Adobe Flex :Prestataire Flex Adobe Toulouse

Exemple de site ecommerce en Flex

Julien Lestel — Tue, 20 Nov 2007 17:22:18 +0000

J’ai découvert par le biais d’un ami un site ecommerce construit entièrement en Flex : http://frontoffice.matsiya.eu/FrontOffice.html

Pour toutes vos demandes de développement, vous pouvez demander ici : E-commerce Flex.