Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

20 juillet 2011

Suivre la demande pour les technos

Lorsqu'on que vient le temps de choisir un framework, ou outil, ou un langage, c'est toujours utile de voir comment le marché les adoptes.

Je me sert entre autre de indeed.com, un site d'emplois qui offre une fonction de recherche qui montre le pourcentage d'offre qui demande un mot clé que vous spécifiez. On peu ainsi comparer nos choix.

Le diagramme suivant montre une exemple, comparant Spring core, Grails et Wicket, trois framework que nous utilisons.

 

Il y a aussi Google Trends, voir par exemple:
On peut aussi voir ce qui se passe sur Twitter avec Trendistic. Le diagramme ici montre l'effet de l'annonce de Google Plus le 28 juin 2011.

29 juin 2011

Web app Mobile, une nouvelle vague d'applications pour l'entreprise

Pierre Damien Tremblay, un collègue dans mon équipe, présente un retour d'expérience sur le développement d'une application mobile pour faire le suivi sur les chantiers de construction.

La nouvelle plateforme technologique HTML5 ouvre la voie à la réalisation d'applications web mobiles. Imaginez un instant tout ces formulaires d'entreprise qui doivent être remplis sur la route. Jusqu'à maintenant, l'architecture typique consistait à réaliser une application cliente qu'il fallait déployer sur les postes. Avec la nouvelle web app mobile, on peut réaliser une application web centralisée qui accomplit le travail.

Rien de tel que de tenter de réaliser une telle application pour en comprendre les rouages. Il s'agit d'une web app mobile de formulaires d'inspections de santé/sécurité en chantier. Les données des formulaires créés en mode déconnecté sont synchronisés lorsque la connexion au réseau est disponbile. Les inspecteurs peuvent donc saisir les données du formulaire d'inspection à partir de leur ordinateur portatif au fur et à mesure qu'ils se déplacent sur le chantier. Une fois rendu au site principal ou la connexion réseau est disponible, ils peuvent alors synchroniser les données de formulaires créés.

Le vidéo suivant présente le réalisation d'une application web qui fonctionne en mode déconnecté : l'architecture, le démo de l'application, les technologies utilisés et les défis rencontrés.

Développement application mobile, retour expérience from jean desbiens on Vimeo.

17 juin 2011

Développer une application mobile simple en HTML5, CSS3 et javascript

Le développement d'applications mobile ("there is an app for that™") en entreprise à tout avantage à miser sur l'expérience acquise au fil du temps dans la création d'application web. Avec un excellent support pour le HTML5, les CSS3 et le javascript ces appareils permettent de développer des solutions qui fonctionnent sur iPhone, iPad, android, ou même nos bons vieux ordinateurs.

Le vidéo suivant montre comment développer une application simple et introduit quelques aspects particulier du développement web.

Il s'agit d'un prototype d'une application qui met en valeur un contenu existant sur internet (site Hydro-Québec).

La valeur de l'application vient du fait que l'utilisateur peut consulter l'information même s'il n'a pas de connexion réseau (s'il visite sa pépinière favorite), qu'il peut interagir avec le contenu (trouver les arbres et arbustes qui répondent à un critère) et finalement qui indique à l'utilisateur la zone de rusticité dans laquelle il se trouve en fonction de sa localisation.

Le vidéo suivant présente le développement du code.

 

Web app mobile en HTML (introduction) from jean desbiens on Vimeo.

Le vidéo suivant montre une version légèrement plus avancée, qui supporte les gestes sur le mobile (notamment le "swipe" pour revenir en arrière).

 

Démo d'une web application mobile HTML5 sur iPad (arbres) from jean desbiens on Vimeo.

Finalement voici le code de la page. Le backend est une application grails, d'où l'utilisation de page gsp.

 

<%@ page import="arbr.Arbre" %>
<!DOCTYPE html><%-- indique au fureteur de traiter la page en HTML5--%>
<html manifest="../arbre/manifest/"><%-- permet à l'application de fonctionner offline --%>
<head>
<title>Arbres HQ</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8" />
<link rel="icon" type="image/ico" href="../images/logo.png">
<%-- les applications natives ne zoom pas, en général --%>
<meta name="viewport"
    content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%-- ces tags, propre a iOS permettent un look and feel plus natif--%>
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <!--this is buggy?? !!-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="../images/splash.png" />
<link rel="apple-touch-icon" href="../images/logo.png">
 
<style type="text/css">
/* feuille de style pour le formattage de la page */
body {
    /* Helvetica est la police par défaut des applications sur iOS*/
    font-family: helvetica, trebuchet MS, arial, sans serif;
    margin: 4px;}
header {
    border-bottom:1px solid #999;
    margin-bottom:2px;
    background-color:silver;}
#content {
    padding-top: 10px;}
#searchInput {
    font-size: 1.3em; /* une police plus grande facilite la saisie sur les mobiles*/}
 
.list {
    padding:2px;
    margin-bottom:12px;
    border:1px solid black;
    /* coins arrondis*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    /* fond dégradé de coleur*/
    background: #b4e391; /* Old browsers */
    background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
    }
 
#zone {
    padding:10px;}
p {
    margin:0;}
 
/* fin des styles communs  */
@media all and (orientation:landscape) {
    #content {
        -webkit-column-count: 3;
    }
} /* landscape */
 
@media(orientation:portrait) {
    #content {
        -webkit-column-count: 2;
        }
} /*portrait */
</style>
 
<%--  filtre de la liste des arbres--%>
<script  type="text/javascript">
    function Filtrer(idOfSearchField) {
        var arr = new Array();
        arr = document.getElementsByClassName('list');
        for ( var i = 0; i < arr.length; i++) {
            var obj = document.getElementsByClassName('list').item(i);
            if (obj.textContent
                    .indexOf(document.getElementById(idOfSearchField).value) == -1) {
                obj.style.display = "none";
            } else {
                obj.style.display = "block";
            }
        }
    } // filtrer()
</script>
 
<%-- géolocalisation--%>
<script  type="text/javascript">
    function UpdateZone() {
        if (window.navigator.geolocation){
        window.navigator.geolocation.getCurrentPosition(successCallback);
 
        function successCallback(position){
            alert("Position : "+position.coords.longitude + ", " + position.coords.latitude );
            }
        }
    } // UpdateZone()
</script>
</head>
 
<body>
<header><%-- header est une tag HTML5 sémantique --%>
     <input id=searchInput type="search"
        placeholder="Rechercher..." onkeyup="Filtrer(this.id);"  /> 
        <%-- HTML5 supporte des nouveaux types et attributs --%>
    <span id=zone onClick="UpdateZone();">Ma Zone</span>
</header>
 
<section id=content><%-- section est une tag HTML5 sémantique --%>
    <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
    <%-- on cré un DIV pour chacun des arbres --%>
        <div id=${fieldValue(bean: arbreInstance, field: "id")} class="list" tabindex="1">
            <img src="${fieldValue(bean: arbreInstance, field: "vignetteURL")}" />
            <p class="fr">${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
            <p class="lt">${fieldValue(bean: arbreInstance, field: "nomLatin")}</p>
            <p class="en">${fieldValue(bean: arbreInstance, field: "nomAnglais")}</p>
            <p class="zone">${fieldValue(bean: arbreInstance, field: "zone")}</p>
            <p class="distance" >${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
        </div>
    </g:each>
</section>
 
</body>
</html>

16 février 2011

Démarrage d'un projet mobile et agile en Grails

Nous avons démarré un petit projet d'une centaine de jours-personnes afin de livrer une première version d'une application de suivi lié à la santé et sécurité sur les chantiers.

 

Le défi est de montrer rapidement que nous sommes en mesure de livrer cette première version. Notre stratégie consiste à utiliser une approche agile, nommément Scrum, pour impliquer le client et bâtir l'application de façon itérative et incrémentale. Cette approche se prête bien au contexte du projet, puisqu'il y a un assez haut niveau d'incertitude : 1) sur les besoins fonctionnels, 2) sur la technologie, (développement HTML5 sur iPad) et 3) par rapport aux deux personnes assignées au projet, qui ne maîtrise pas le langage, framework, plate-forme d'hébergement, ni, 4) l'approche agile.

 

Nous sommes deux personnes, pour supporter l'équipe de réalisation.

 

Pour la première semaine, alors qu'on attend la rencontre de démarrage officiel du projet, nous nous sommes fixé un objectif démontrable (notre user story):

 

L'équipe démontre qu'elle est en mesure de coder une page HTML5 simple, sur un iPad, et parler à un backend Grails, développer en mode agile et utilisant le TDD.

 

On estime que cette story peut se faire en 5 jours. Et c'est notre priorité 1, car la rencontre initiale avec le client à lieu le lundi suivant. Comme coach, j'étais moi-même en mesure de démontrer que je pouvais réaliser cet objectif. Ici, il s'agissait de transférer les rudiments à l'équipe.

 

Nous avons donc déterminé les tâches à réaliser pour accomplir l'objectif de notre unique user story. Ce sont:

 

  • Mettre à jour le kit d'installation des outils de développement (SpringToolSuite)
  • Installer les outils sur les postes de l'équipe (4 personnes)
  • Vue d'ensemble de l'architecture de l'application et principaux scénario applicatif
  • Formation de base du framework Grails, dans l'action
  • Formation de base au TDD en Grails, dans l'action
  • Formation de base au HTML5/CSS3 (théorique avec démos)
  • Formation d'introduction aux approches agile (scrum)
  • Développement d'un gabarit de base pour application iPad

 

À la fin de la semaine, nous avons été en mesure de démontrer que l'équipe était effectivement en mesure de faire un développement hypersimple en HTML5, en Grails, de façon agile et en utilisant le Test Driven Development.

 

Nous étions tous dans le même espace physique, soit à mon bureau ou dans une salle de conférence.

 

L'approche a très bien fonctionné et je réutiliserais cette base pour le démarrage d'un nouveau projet similaire. Elle permet d'obtenir le maximum de ce que l'équipe peut faire tout en permettant une adaptation aux nombreuses contraintes qu'on rencontre au départ.

 

Juste pour vous donner une idée du travail qui reste à faire, nous avions aussi identifié d'autres tâches que nous avons gardées dans le backlog.

 

  • Former au BDD (Behavior Driven Development)
  • Déployer l'application sur notre serveur de développement
  • Obtenir les accès au gestionnaire de source
  • Mettre en place l'intégration continue
  • Simplifier la synchronisation entre le iPad et le serveur
  • Spike pour la gestion de la sécurité avec le iPad

13:20 Publié dans Grails, Scrum | Lien permanent | Commentaires (0)