Netapsys Blog

Devoxx France : HTML5 et ElasticSearch au programme

Romain Guefveneu — Thu, 19 Apr 2012 23:50:00 +0200

L'événement a été l'occasion de revenir sur les dernières bonnes pratiques en matière de développement HTML5, ainsi que sur la modélisation d'applications.

Voici un résumé des conférences auxquelles j'ai assisté lors de la journée du 19 avril 2012 à Devoxx France.

ElasticSearch - "Your data, your search"

Le principal problème de la recherche textuelle aujourd'hui est le temps : Comment lancer une recherche sur une énorme quantité de données, sans attendre 10 minutes ? Aujourd'hui, on se contente d'indexer notre base relationnelle, de configurer Hibernate pour améliorer les performances, mais le problème persiste (...), car les SGBD ne sont pas fait pour la recherche. C'est là qu'intervient les moteurs de recherches, dont ElasticSearch fait partie. Fondé sur un couple NoSQL/Apache Lucene, il permet d'indexer une énorme quantité de données (Twitter par exemple), tout en concervant des temps de réponse plus que corrects : 20ms pour une recherche sur 500 000 éléments. Son installation est d'une simplicité enfantine, il n'y a aucune configuration. Il se branche via un connecteur à la base de données de votre application, pour mettre à jour sa base NoSQL. La notion de facettes (grossièrement l'équivalent des group by en SQL), permet de spécifier ses recherches, et permettra par la suite de proposer une interface riche à l'utilisateur final. Celui-ci pourra naviguer entre différents graphiques ou tableaux, en fonction des référentiels de son choix, et ainsi obtenir la meilleure recherche possible sans que le développeur ai à penser toutes les solutions possibles. ElasticSearch peut facilement indexer jusqu'à 5 milliards d'éléments, et est actuellement utilisé et/ou soutenu par Fotolia, JBoss, Mozilla, Yfrog, Sony, Klout, ...

HTML5 + Spring + NoSQL + Mobile

Julien Dubois nous présente l'application web Tatami, un Twitter interne conçu à titre de test pour ces différentes technologies. La problématique était la suivante: "Avec l'abandon de Flash, Silverlight ou Air, comment construire des applications Web riches et dynamique ?" Pour cela, l'approche du site web change. Où avant l'idée était : Un page = un contrôleur, les pages des nouvelles applications web invoquent plusieurs sources via des appels REST. On a donc une séparation totale entre le front et le back-end. Le HTML5 se trouve être une très bonne alternative aux technologies en déclins sus-citées, puisqu'il intègre des nouvelles fonctionnalités qui simplifient le développement, que nous aurions du "bidouiller" (champs numériques, validation de formulaire, prise en compte des terminaux mobiles...). Pour sa part, le NoSQL a de l'intérêt dès que la montée en charge vous fait peur. Par exemple Cassandra, un moteur NoSQL, est beaucoup plus performant pour tout ce qui est écriture qu'une base de données traditionnelle.

Client/Serveur Apps with HTML5 & Java

Suite directe de la conférence précédente, James Ward présente ici sa vision d'une bonne application Web HTML5, qui pourrait se décrire simplement comme ceci : Stateless, pour des raisons d'extensibilité (scalablility), de facilité de mise à jour et de respect du mode de navigation (retour, rafraichissement, etc.) ; Mise à jour et notifications en temps réel (Facebook, Twitter, etc.) "The browser as an application plateform" L'exemple phare étant l'application web Trello qui permet à différents protagonistes de gérer des tâches sous forme de board collaboratif. Les changements étant bien évidemment instantanés.

Sencha

Vient ensuite la présentation de Sancha, un framework HTML5/Javascript permettant de créer simplement en Wysiwyg des interfaces mobiles riches. Il répond directement au problème de fragmentation de l'écosystème mobile : Android, iOS, Blackberry, Windows Phone, Nokia, etc. En effet, le point commun entre les 3 grands du mobile est le navigateur basé sur WebKit (on ne parle pas ici de Windows Phone et son IE...). L'idée est donc de ne plus coder des applications natives en Java ou Objective-C, mais de créer des applications Web Mobiles (Responsive Design). Sencha propose un environnement de développement propriétaire et payant pour créer ses interfaces en Wysiwyg, mais le framework est lui-même gratuit et Open-Source. Pour ma part je reste sceptique sur ce genre de framework généralement lourd et qui ne résout pas le problème des différentes UI et UX entre les plateformes.

Il n'y a pas de bon modèle métier

Grégory Weinbach nous livre son analyse sur la modélisation des applications. Il part du constat que nos applications ne répondent généralement pas suffisamment aux besoins des clients. Une question de complexité accrue ou de mauvaise expression du besoin. Il est donc plus que jamais nécessaire de concevoir *pour* et *avec* l'utilisateur, chose généralement faite avec les méthodes Agiles et le Domain-driven Design. Il faut avoir un langage commun entre tous les acteurs du projet, ainsi que peu d'intermédiaires entre le client et le développeur. Parlons maintenant de modélisation, voire de Modélisme. Comme quelqu'un a dit un jour : "Tout est relatif". Et ça s'applique à, eh bien, à tout. A la modélisation aussi. Prenons l'exemple d'un livre. Un livre, pour un auteur, peut se réduire à un fichier Word. Un titre, un contenu et c'est tout. Pour l'informatique, un livre c'est un ISBN. Pour un graphiste, c'est une mise en page particulière. Pour un commerçant, c'est un prix. Bref, un livre c'est tout cela à la fois, ça dépend du contexte. En voulant répondre à tous les besoins, on obtient une "chimère", un modèle difficile à implémenter et impossible à maintenir. Pour résoudre ce problème, changeons notre vision des choses, et commençons par la fin : l'utilisateur, car au final c'est quand même lui qui utilisera notre application. L'utilisateur à des cas d'utilisations bien spécifiques. Eh bien au lieu de construire les actions à partir du modèle, construisons le modèle à partir des actions. Grégory parle de Behavior Driven Development, et encourage à ne pas essayer de modéliser le Réel, mais de rester dans une vision informatique du réel.

Cette présentation à provoqué beaucoup de contestations et d'interrogations, car elle remet en cause tout un mode de pensée ;)

Ces conférences terminées, nous avons fini la journée par l'Android PodCast avec Romain Guy et Nicolas Roard de Google, et par un massage Anma enfin de nous reposer un peu, en attendant la suite demain !

Retour sur l'open data à Nantes

Romain Guefveneu — Fri, 29 Apr 2011 21:35:00 +0200

Présent lors de la journée de lancement de l'open data nantais organisée par Libertic, je vous fais ici un petit retour sur cet évènement.

Open Data, c'est quoi ?

On m'a posé plusieurs fois cette question : "Mais, l'open data c'est quoi ?". Et bien, comme le nom l'indique, il s'agit de données libres. L'idée est de libérer les données publiques afin qu'elles puissent être exploitées par des journalistes — on parle alors de "data-journalisme" (1) — ou bien dans mon cas, des développeurs.

Mais quelles données ?

Horaires d'ouvertures des lieux publics, commerces, transports en commun ou bien budgets des communes sont autant de données qui peuvent être utilisées par le grand public.
Rennes propose par exemple sur sa plate-forme Open data (2) les catégories suivantes :

Accessiblité
Actualités
Citoyenneté
Données budgétaires
Environnement
Equipements
Logement
Référentiel géographique
Sports et loisirs
Stationnement
Transports
Urbanisme

Et pour quoi faire ?

Des applications pour consulter les horaires de bus par exemple ;) Ou bien encore, des statistiques croisées sur tout et n’importe quoi, comme par exemple recouper les horaires d’ouvertures des commerces de proximités et les périodes d’affluence d’utilisation des bicloos...

En France, ça donne quoi ?

Pour l'instant, Rennes et Paris ont libéré leurs données. D'autres villes suivent, mais 2011 sera l'année Open data nantaise. En effet, la mairie travaille actuellement sur le sujet, et devrait annoncer en juin quelles données seront disponibles (ce que j'attends avec impatience !).

Mais le marché des données privées n'est-il pas en danger ?

Actuellement, les données s'achètent, soit, mais l'Open data ne va pas tout changer du jour au lendemain : les données seront certes accessibles, mais pas forcement exploitables. Format PDF illisibles, Excel mal conçus, pages HTML générées par Word 97, j'en passe et des meilleures :)
Un second marché s'ouvre ici alors : la mise en forme de ces données ; qui est le secteur d'activité, par exemple, de la société Data Publica (3).

Retrouvez ici la présentation de la mairie de nantes sur l'open data :
http://www.slideshare.net/libertic/presentation-opendata-de-la-ville-de-nantes

(1) http://owni.fr/2010/07/07/donnees-publiques-et-journalisme-une-mine-de-richesses/
(2) http://www.data.rennes-metropole.fr/les-donnees/catalogue/
(3) http://www.data-publica.com/

Crédit photo : Simon Robic (http://www.flickr.com/photos/simonrobic)

Module Magento : Ajouter un commentaire à une commande

Romain Guefveneu — Tue, 12 Apr 2011 12:00:00 +0200

Pour mon premier billet sur ce blog, je vais aborder un sujet qui revient souvent sur les forums Magento, mais restant cependant sans réponse satisfaisante :

Comment permettre aux clients d'ajouter un commentaire (ou tout autre information) à une commande ?

Pour cela, il y a trois étapes :

Stocker l'information en base de données (et la récupérer...) ;
Ajouter une étape dans le processus de validation de la commande (checkout) ;
Ajouter un onglet dans la visualisation de la commande, côté administration.

Création d'un module

Les sources sont disponibles à la fin de cette article sous licence WTFPL.

Stocker l'information en base de données

Notre module utilise une table, "netapsys_ordercom", dans la base de données. Cette table est créée via le fichier d'installation mysql4-install-0.1.0.php dans "sql/ordercom_setup".

$installer = $this;
$installer->startSetup();

$installer->run("
-- DROP TABLE IF EXISTS {$this->getTable('netapsys_ordercom')};
CREATE TABLE {$this->getTable('netapsys_ordercom')} (
  `order_id` int(10) unsigned NOT NULL,
  `content` text NOT NULL default '',
  PRIMARY KEY (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
");

$installer->endSetup();

Modifiez ce script sql si vous voulez ajouter d'autres informations à votre commande.
Pour forcer la réinstallation d'un module, supprimer la ligne correspondante dans la table "core_resource".

On doit ensuite définir notre modèle dans "Model/Mysql4/Ordercom.php". Dans cette classe, on indique quelle est la table à utiliser (définie dans le config.xml), et la clé primaire (ici "order_id");

class Netapsys_Ordercom_Model_Mysql4_Ordercom extends Mage_Core_Model_Mysql4_Abstract {
	public function _construct(){
		$this->_init('ordercom/ordercom', 'order_id');
		$this->_isPkAutoIncrement = false;		
	}
}

L'attribut "isPkAutoIncrement" est ici essentiel, car nous voulons nous même définir la valeur de cette clé, à savoir l'id de la commande. Cette attribut doit donc être défini à "false".

Ajouter une étape dans le checkout

Notre étape est définie dans "Block/Onepage/Ordercom.php". C'est dans cette classe que l'id et le nom de l'étape est indiqué ("ordercom" et "Commentaire").

class Netapsys_Ordercom_Block_Onepage_Ordercom extends Mage_Checkout_Block_Onepage_Abstract
{
    protected function _construct()
    {    	
        $this->getCheckout()->setStepData('ordercom', array(
            'label'     => Mage::helper('checkout')->__('Commentaire'),
            'is_show'   => true
        ));
        
        parent::_construct();
    }
}

Une fois l'étape créée, il faut encore l'insérer dans le checkout. On surcharge donc la classe "Mage_Checkout_Block_Onepage" dans le fichier "Block/Onepage.php"

class Netapsys_Ordercom_Block_Onepage extends Mage_Checkout_Block_Onepage
{
    public function getSteps()
    {
        $steps = array();

        if (!$this->isCustomerLoggedIn()) {
            $steps['login'] = $this->getCheckout()->getStepData('login');
        }
		
        //Ajouter notre étape 'ordercom'
        $stepCodes = array('billing', 'shipping', 'shipping_method', 'payment', 'ordercom', 'review');

        foreach ($stepCodes as $step) {
            $steps[$step] = $this->getCheckout()->getStepData($step);
        }
        
        return $steps;
    }
}

Nous allons maintenant surcharger le controleur de cette page checkout pour deux raisons :

rediriger vers notre étape après "Informations de paiement" ;
sauvegarder nos informations en sessions.

Notre nouveau contrôleur se situe dans le fichier "Ordercom/Block/controllers/OnepageController.php".

La redirection se fait via la méthode savePaymentAction :

public function savePaymentAction()
{
  parent::savePaymentAction();

  //Rediriger vers notre étape Ordercom
  $redirectUrl = $this->getOnePage()->getQuote()->getPayment()->getCheckoutRedirectUrl();

  if (empty($result['error']) && !$redirectUrl) {
    $this->loadLayout('checkout_onepage_ordercom');
    $result['goto_section'] = 'ordercom';
  }
  if ($redirectUrl) {
    $result['redirect'] = $redirectUrl;
  }
  $this->getResponse()->setBody(Zend_Json::encode($result));
}

Pour la sauvegarde, avec le Onepage Checkout, les données de chaque étape sont stockées en session via ajax. Nous allons donc créer une méthode "saveOrdercomAction", qui récupère les données envoyées en POST :

public function saveOrdercomAction()
{
		$this->_expireAjax();
		if ($this->getRequest()->isPost()) {

			//Récuprer la valeur du formulaire
			$orderComment = $this->getRequest()->getPost('comment');
			Mage::getSingleton('core/session')->setNetapsysOrdercom(trim($orderComment));

			$result = array();

			$redirectUrl = $this->getOnePage()->getQuote()->getPayment()->getCheckoutRedirectUrl();
			if (!$redirectUrl) {
				$this->loadLayout('checkout_onepage_review');

				$result['goto_section'] = 'review';
				$result['update_section'] = array(
                    'name' => 'review',
                    'html' => $this->_getReviewHtml()
				);

			}

			if ($redirectUrl) {
				$result['redirect'] = $redirectUrl;
			}

			$this->getResponse()->setBody(Zend_Json::encode($result));
		}
}

Les données maintenant en session, il ne reste plus qu'à les sauvegarder dans la table une fois la commande validée ! Nous allons créer un hook lors de l'enregistrement de la commande.

public function hookToOrderSaveEvent()
{
  //Récupérer l'id de la commande
  $orderId = Mage::getSingleton('checkout/session')->getLastOrderId();

  //Lire nos données depuis la session
  $content = Mage::getSingleton('core/session')->getNetapsysOrdercom();
  $code = Mage::getSingleton('core/session')->getNetapsysOrdercode();

  if (($content != '') || ($code != '')){
    // Enregistrer tout le toutim en base
    $orderCom = Mage::getModel('ordercom/ordercom');
    $orderCom->setId($orderId);
    $orderCom->setData('content', $content );
    $orderCom->save();
  }
}

C'est presque fini, il faut encore créer le front de notre étape. Pour cela, je vous laisse regarder les fichiers "/design/frontend/default/default/layout/ordercom.xml" et "/design/frontend/default/default/template/checkout/onepage/ordercom.phtml".

Enfin, une étape très importante pour que tout ça fonctionne ensemble : la configuration du fichier "etc/config.xml". Vous devez définir le modèle, les blocks, la surchage du checkout, etc. Le fichier étant assez long, je ne le décris pas ici.

Passons maintenant à l'affichage de ces données dans le back office.

Ajouter un onglet dans la visualisation de la commande, côté administration.

Pour gérer le back office de notre module, nous avons besoin de 3 fichiers :

Le layout

Nous décrivons ici l'emplacement de notre onglet et le block le définissant :
"/app/design/adminhtml/default/default/layout/ordercom.xml"

<?xml version="1.0"?>
<layout version="0.1.0">

	<adminhtml_sales_order_view>
		<reference name="sales_order_tabs">
			<action method="addTab">
				<name>order_coms</name>
				<block>ordercom/adminhtml_sales_order_view_tab_view</block>
			</action>
		</reference>
	</adminhtml_sales_order_view>

</layout>

Le block

Ce block va récupérer la commande en cours de visualisation et permettre à la vue d'afficher le commentaire correspondant.
"/app/code/local/Netapsys/Ordercom/Block/Adminhtml/Sales/Order/View/Tab/View.php"

class Netapsys_Ordercom_Block_Adminhtml_Sales_Order_View_Tab_View
extends Mage_Adminhtml_Block_Template
implements Mage_Adminhtml_Block_Widget_Tab_Interface
{
	private $_orderCom = null;
	private $_order = null;

	protected function _construct()
	{
		parent::_construct();
		$this->setTemplate('sales/order/view/tab/ordercom.phtml');

		//Récupérer la commande en cours
		$this->_order = Mage::getModel('sales/order')->load($this->getRequest()->getParam('order_id'));

		//Récupérer les données de notre table selon l'id de la commande en cours
		$this->_orderCom = Mage::getModel('ordercom/ordercom')->load( $this->_order->getId() )->getData();
	}

	/**
	 * Récupérer le commentaire de la commande en cours
	 */
	public function getComment(){
		$comment = null;
		if ($this->_orderCom != null){
			$comment = $this->_orderCom["content"];
		}
		return  $comment;
	}

	/**
	 * ######################## TAB settings #################################
	 */
	public function getTabLabel(){return Mage::helper('sales')->__('Commentaire');}
	public function getTabTitle(){return Mage::helper('sales')->__('Commentaire');}
	public function canShowTab(){	return true;}
	public function isHidden(){return false;}
}

La vue

Notre vue va tout simplement afficher le commentaire donné par notre block.
"/app/design/adminhtml/default/default/template/sales/order/view/tab/ordercom.phtml"

<div class="entry-edit">
	<div class="entry-edit-head">
		<h4 class="icon-head head-edit-form fieldset-legend">
		<?php echo $this->getTabLabel() ?>
		</h4>
	</div>

	<div id="group_fields4" class="fieldset fieldset-wide">
		<div class="hor-scroll">
			<table class="form-list" cellspacing="0">
				<tbody>
					<tr>
						<td class="label"><label>Commentaire :</label></td>
						<td class="value"><textarea id="order_comment" style="height: 20em; width: 99%;" cols="5" rows="10" name="order[comment]" readonly="readonly"><?php echo $this->getComment(); ?></textarea>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
	</div>
</div>

Vous avez maintenant le commentaire dans votre commande !