• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Julien Boulevart

Développeur Full stack - Javascript Aficionados
IoT

SIdO : Le Showroom de l’Internet des Objets

SIdO : Le Showroom de l’Internet des Objets

Un showroom qui voit les choses en grand

En 2016 le SIdO – pour Showroom de l’Internet des Objets – s’installe au Cente des Congrès à Lyon, et cette nouvelle édition voit les choses en très grand : près de 150 exposants, 50 startups, un hackhathon et près de 60 conférences, bref, il y a de quoi s’occuper.

Mais qu’est ce que le SIdO ? C’est le Showroom de l’Internet des Objets, un espace immense dédié à l’IoT. Les plus grands groupes internationaux comme Veolia, Thales, Orange ou encore Cisco sont présents afin d’exposer leurs avancées dans ce domaine, et on retrouve également des startups, qui voient ici une opportunité de présenter leurs produits.
Mais pas seulement ! C’est aussi un espace d’entraide pour les entreprises désirant se lancer sur le marché mais craignant de ne pas comprendre les enjeux qu’il représente.

Et d’ailleurs quels sont-ils, ces enjeux ?

Avec les objets connectés, c’est une nouvelle ère et de nouveaux modes de vie qui s’ouvrent à nous, notre environnement digitalisé sera capable de s’adapter à nos besoins.
D’ici 2020, le marché de l’Internet des Objets représentera environ 30 milliards d’objets connectés (source : Gartner Group), et l’immense richesse que représente les datas qui en découleront, sont une source incroyable pour les entreprises capables de proposer des nouveaux services tirant pleinement profit de ces datas.

Mais on y apprend quoi ?

Sur le showroom, on apprend beaucoup de choses, mais celle qui revient le plus souvent est sans aucun doute la suivante : l’humain sera au centre de cette révolution. En effet si la révolution industrielle plaçait la machine au centre des innovations, celle des objets connectées, replace l’être humain comme point majeur de l’attention. Son nouvel environnement personnalisé se pliera à ses envies, lui fera faire des économies, l’incitera à faire du sport, à mieux manger, prendra soin de sa santé et de son confort…en un mot : nous rendra la vie plus simple.

Et concrètement ?

Sur place on trouve de tout :

  • la layette connectée, qui permet d’ajuster la pièce où se trouve votre bébé selon sa température corporelle pour qu’il se sente toujours bien ;
  • le détecteur de poudreuse qui une fois installé sur votre chalet en station, vous enverra une notification pour vous avertir si de la neige fraîche est tombée dans la nuit ;
  • l’incontournable domotique avec des serrures qui sont dévérouillables grâce à votre smartphone ;
  • le frigo connecté, qui vous permet d’ajouter un article à une liste d’achat en le scannant et de programmer l’achat une date précise ou manuellement depuis votre smartphone…

Le(s) mot(s) de la fin

Ainsi, que ce soit grâce à ses exposants ou à ses conférences dont les speakers maitrisent parfaitement leur sujet, le showroom nous permet de mieux comprendre de quoi notre avenir sera fait, et comment les entreprises réfléchissent à exploiter les données, afin de nous proposer un environnement parfait pour chaque individu.

Car c’est bien de cela qu’il s’agit, mettre en avant l’individu.  
Quelque part l’Internet des Objets, ou Internet of Objects en anglais, c’est surtout l’Internet of Me.

LIRE LA SUITE
13/04/2016 TAGS: #iot, dev, Internet des Objets, Objets connectés, Techno BY: Julien Boulevart
SHARE
LIRE LA SUITE
Frontend

Code me, I’m Famo.us, 2/3

Code me, I’m Famo.us, 2/3

Previously, in Code me, I’m Famo.us

LIRE LA SUITE
03/08/2015 BY: Julien Boulevart
SHARE
LIRE LA SUITE
Frontend

Code me, I’m Famo.us, 1/3

Code me, I’m Famo.us, 1/3

Famo.us a récemment sorti une nouvelle version de son FamousEngine, au programme des nouveautés :

  • Le mixed mode
  • La compatibilité ES2015
  • Une façon de structurer une application
  • …

Je vous propose donc à travers une série de trois posts de prendre en main cette nouvelle version et de réaliser cette petite démo que nous appellerons Flog ( Famo.us + blog ). Entrons sans plus attendre dans le vif du sujet.

Installation

Pour installer FamousEngine, il suffit de suivre les instructions décrites ici. Une fois que tout est bien installé et que le serveur est lancé, il suffit de se rendre sur http://localhost:1618, afin de vérifier que tout fonctionne. Si tel est le cas, vous devriez voir le logo Famo.us apparaître.

Avant de continuer plus loin, je vous conseille de lire cet article pour comprendre les principes de FamousEngine, car j’utiliserai souvent des termes comme noeuds (node) ou composants (component).

Et bien codons maintenant

Ouvrez maintenant le projet dans un IDE, les fichiers javascript iront dans le dossier src/ et les assets et feuilles de styles dans public/.

Notez que nous utiliserons ici la notation ES2015, pour plus d’informations à ce propos, vous pouvez aller là.

index.js

Nous allons commencer par modifier ce fichier.

// Famous dependencies
import FamousEngine from 'famous/core/FamousEngine'

// Our dependencies
import Flog from './Flog'

// Initialize the FamousEngine to start the rendering process
FamousEngine.init()

// Create a scene for the FamousEngine to render and add a child in it
var scene = FamousEngine.createScene().addChild(new Flog())

Ici rien de bien complexe, les commentaires parlent d’eux même : )

Flog.js

Maintenant créons le composant qui sera notre noeud principal, tous les autres composants seront ajoutés dans ce dernier.

import Node from 'famous/core/Node'
import Author from './Author'

// The array containing the authors
let authors = [
    { id : 0, name : 'Julien Boulevart', image : 'julien.jpg' },
    { id : 1, name : 'Nicolas Labbé', image : 'nico.jpg' },
    { id : 2, name : 'Fabrice Labbé', image : 'fabrice.jpg' },
    { id : 3, name : 'Fabien Logarinho', image : 'fabien.jpg' },
    { id : 4, name : 'John Doe', image : 'julien.jpg' },
    { id : 5, name : 'Eric Apple', image : 'nico.jpg' },
    { id : 6, name : 'Cindy Schmidt', image : 'fabrice.jpg' },
    { id : 7, name : 'Oli Sykes', image : 'fabien.jpg' }
]

class Flog extends Node {
  constructor() {
    super()
    this.createAuthors()
  }

  // When the size of the node change, emit an event
  onSizeChange() {
    this.emit('window:resize', { width : window.innerWidth, countAuthors : authors.length })
  }
  
  // Add the bubbles into the dom
  createAuthors() {
    for(var i = 0; i < authors.length; i++) {
      this.addChild(new Author(authors[i]))
    }
  }
}

export default Flog;

Ici rien de compliqué si ce n’est la méthode onSizeChange, qui en fait est héritée de Node car c’est le composant que Flog étends  : class Flog extends Node . Ainsi lorsque la taille de notre noeud change, ce dernier envoie un évènement à tous ses noeuds enfants.

Author.js

Créons maintenant le fichier Author.js dans src/.

Ce fichier gérera l’affichage de la bulle représentant un auteur, sa position ainsi que son animation.

import Node from 'famous/core/Node'
import DOMElement from 'famous/dom-renderables/DOMElement'
import Transitionable from 'famous/transitions/Transitionable'

var currentWidth = window.innerWidth

class Author extends Node {
  constructor(options) {
    super()
    this.options = options

    // Creating the DOM element
    // with some properties
    var element = new DOMElement(this, {
      classes : ['author'],
      properties : {
        'border-radius' : radius + 'px',
        'background-image' : 'url(images/' + options.image + ')',
        'background-size' : 'cover'
      }
    })

    // We set a size for the node, a mount point and an alignment
    this
      .setSizeMode('absolute', 'absolute')
      .setAbsoluteSize(radius, radius)
      .setMountPoint(0.5, 0.5)
      .setAlign(null, 0.5)
  }
  
  // When we receive an event, we catch it and do some actions depending on the event
  onReceive(event, payload) {
    if(event === 'window:resize') {
      currentWidth = payload.width
      var countAuthors = payload.countAuthors
      var start = currentWidth/countAuthors
      var posX = (start * this.options.id) + (start/2) 
      this.setPosition(posX, null)
    }
  }

Wow, ça en fait du code, pas de panique je vous explique en détails :

var element = new DOMElement(this, {
      classes : ['author'],
      properties : {
        'border-radius' : radius + 'px',
        'background-image' : 'url(images/' + options.image + ')',
        'background-size' : 'cover'
      }
    })

Ici on crée un élément qui sera ajouté dans le DOM, par défaut l’élément est un DIV, mais il est tout à fait possible d’ajouter n’importe quel tag HTML. Je vous invite à consulter l’article suivant afin de comprendre comment fonctionne la création d’élément DOM.

this
      .setSizeMode('absolute', 'absolute')
      .setAbsoluteSize(radius, radius)
      .setMountPoint(0.5, 0.5)
      .setAlign(null, 0.5)

Famous permet de spécifier différents paramètres sur un noeud comme l’alignement ou encore le point d’origine. Pour en apprendre plus, vous pouvez vous rendre ici.

Il est important de noter qu’ici nous agissons sur le noeud et non sur l’élément du DOM que nous avons crée avant.

onReceive(event, payload) {
    if(event === 'window:resize') {
      currentWidth = payload.width
      var countAuthors = payload.countAuthors
      var start = currentWidth/countAuthors
      var posX = (start * this.options.id) + (start/2) 
      this.setPosition(posX, null)
    }

La méthode onReceive est héritée de la classe Node, souvenez-vous dans notre composant Flog il y avait une méthode onSizeChange, qui émettait un évènement ainsi que des données. Flog étant notre composant parent, il permet d’émettre des évènements à tous ses enfants.

Ici grâce à la méthode onReceive, on récupère tous les évènements (émis par le parent, mais aussi les clics, …), on vérifie quel est l’évènement reçu et on réparti nos bulles sur la largeur de l’écran.


Voilà c’est tout ce que nous allons voir pour le moment. Vous pouvez déjà constater que les bulles s’affichent comme il faut.

Dans le prochain post, nous verrons comment animer les bulles et déclencher l’apparition de l’article au clic.

LIRE LA SUITE
15/07/2015 BY: Julien Boulevart
SHARE
LIRE LA SUITE
Outils

Addy Osmani : Tooling for the modern webapp developper

Addy Osmani : Tooling for the modern webapp developper

Aujourd’hui nous sommes certains d’une chose, le web tel que nous le connaissons ne sera bientôt plus. Les applications vont prendre une place grandissante et deviendra un secteur très important. Il faut dés à présent comprendre cela et anticiper pour ne être dépasser.

LIRE LA SUITE
10/12/2012 BY: Julien Boulevart
SHARE
LIRE LA SUITE

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect