Archives de
Étiquette : javascript

NodeJS fusionne avec iojs

NodeJS fusionne avec iojs

Et voilà, c’est fait : NodeJS fusionne avec iojs. L’annonce faite par Mikeal Rogers le 8 mai 2015 suivie d’un vote du Comité Technique 5 jours plus tard a permis de confirmer la rumeur qui courait depuis déjà un moment. Retour sur un événement historique pour notre cher internet et sur ses implications dans un futur proche et lointain.

NodeJS, kézako?

Pour les non-initiés, revenons-en aux définitions de base.

Node.js est ce qui permet, depuis 2009 / 2010, d’ utiliser JavaScript aussi hors du navigateur, comme des langages plus classiques, en lui donnant accès notamment à la manipulation de fichiers et aux interactions avec le réseau. Du fait de ses performances, et ses caractéristiques, il est surtout utilisé pour coder des serveurs web minimalistes, rapides, capables de répondre à de nombreuses requêtes en parallèle ou de faire du web temps-réel (chats / jeux multijoueurs…). Son développement et sa maintenance sont effectués par l’entreprise Joyent. Node.js est progressivement devenu populaire et est utilisé par Groupon, SAP, LinkedIn,Microsoft, Yahoo!, Walmart, Rakuten et PayPal entre autres. Nous l’utilisons également beaucoup chez Toxicode pour nos jeux multijoueurs et nos outils autour de l’apprentissage de la programmation.

Pourquoi iojs a changé la donne?

Il y quelque mois de cela, la v0.1 d’un  nouveau fork de Node, baptisé io.js, voyait le jour. Quand io.js a été lancé en janvier 2015, nombreux y ont vu une sorte de « Node amélioré », un fork plus agressif dans le développement et qui permettait d’implémenter des fonctions qui manquaient dans les v0.11 et 0.12 de NodeJS. (Pour les débutants comme moi, un fork est un projet ou logiciel issu d’une scission avec un projet initial unique, et qui partage avec lui une part de son code source).

Mais alors que Node.js avait déjà été forké auparavant, avec l’avènement de io.js, une vraie scission s’est produite : plusieurs contributeurs majeurs ont quitté Node.js et ont commencé à faire des pulls requests pour io.js. L’année 2014 avait déjà vu une diminution des suiveurs de Node.js, mais en 2015, la division s’est faite plus profonde également pour des raisons de gouvernance. En effet, la communauté des développeurs autour de Node.js s’agrandissant, certains des contributeurs trouvait qu’il était difficile de s’intégrer au projet et reprochaient aux chefs de projets un certain manque de transparence. Ils n’approuvaient pas de voir Node.js aux mains d’une compagnie privée, et d’avoir à passer du temps à faire accepter aux chefs de projets chacune des améliorations qu’ils voulaient apporter au code.

Au contraire, io.js a lancé dès janvier 2015 des cycles d’amélioration rapides, en suivant un modèle de gouvernance ouverte qui a attiré de nombreux contributeurs.

Naissance de la Node Foundation

Voyant l’évolution de la situation, Joyent a réagi rapidement, annonçant en février 2015 son intention de créer la Node Foundation, gérée par un Comité Technique, une initiative soutenue par IBM, Paypal, Microsoft et la Fondation Linux et qui permettrait de résoudre les problèmes de gouvernance qui s’étaient posés. Selon ioJS, les deux projets convergent donc sous l’appellation Fondation Node, « sous la tutelle conjointe des équipes techniques de Node.js et io.js ». Par ailleurs, la Node Foundation utilise le nom de Node.js et s’appuie sur un référentiel io.js

L’objectif principal est de réunifier la communauté divisée autour d’un modèle plus ouvert, transparent et proposant des updates très réguliers.

Souhaitons donc la bienvenue à cette nouvelle fondation  et gardons un oeil sur les prochains développements du projet !

 

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise

Apprendre à coder est un désir croissant chez de nombreuses personnes. Il vous suffit de regarder le succès de la Codeweek, la multiplication des ateliers autour de l’apprentissage de la programmation ou la volonté politique de l’instaurer à l’école pour mesurer cet engouement.

Chez Toxicode, notre ambition est de proposer des outils pour favoriser cet apprentissage et casser les barrières psychologiques que l’on peut avoir avant de commencer à apprendre à coder. C’est dans cet objectif que nous avons lancé Silent Teacher, un petit outil ludique qui permet de se familiariser avec le code informatique.

Mercredi 14 janvier, nous avons été, avec Pierre Lancien, animer deux ateliers pour apprendre à coder à la Cantine Numérique de Rennes. Nous avons fait le choix de faire deux sessions sur deux plages horaires différentes et nous avons eu deux publics totalement différents !

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise
Nicolas Leludez avec sa fille jouant aux jeux réalisés lors de la session

La première session était de 14h30 à 18h00, les participants étaient essentiellement des adolescents venus apprendre à coder un petit jeu. Mais nous avons aussi accueilli deux retraités et des adultes attirés par ce monde qu’ils voulaient découvrir. La seconde session était de 18h30 à 22h30, ce sont des adultes de divers horizons qui étaient présents (étudiants, salariés, etc). Malgré les idées reçues, il y avait une part non négligeable de femmes intéressées par l’apprentissage de code.

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise
Pierre Lancien expliquant comment utiliser l’outil de Toxicode Code n’ Slash

Cet atelier avait pour objectif d’initier chacun à l’apprentissage du code et, pour y parvenir, nous avons développé un outil intitulé « Code n’ Slash ». Pour le moment, il n’est pas encore disponible en ligne mais il le sera dans les prochains mois via notre portail. L’objectif était de permettre à chacun de construire le niveau de son jeu, à sa manière, grâce à des fonctionnalités regroupées dans une documentation. Ainsi, on peut être initié à apprendre à coder tout en s’amusant. Code n’ Slash permet de se familiariser avec la syntaxe de la programmation web, et ce, même sans avoir de notions en programmation ! De nombreux participants à cet atelier n’avaient jamais fait de code de leur vie.

A la fin de l’atelier, chacun pouvait retrouver les niveaux du jeu réalisés par les autres pour les comparer et y jouer. Ce qui est amusant, c’est que chaque personne a utilisé Code n’ Slash à sa manière pour en faire un jeu singulier. J’ai été impressionné par le calme qui régnait pendant la réalisation des niveaux tellement la concentration des « codeurs » était forte !

Je tenais à remercier la Cantine Numérique Rennaise pour nous avoir ouvert ses portes et Nicolas Ledez pour son aide précieuse dans l’animation de cet atelier d’apprentissage du code.

Plus d’informations sur le site de la ville de Rennes : http://metropole.rennes.fr/actualites/les-themes/loisirs/savoir-coder-l-autonomie-dans-un-monde-connecte/

Google Analytics pour les jeux JavaScript

Google Analytics pour les jeux JavaScript

Lorsque l’on crée son jeu HTML5, on ajoute souvent le script de Google Analytics sur sa page web, afin de savoir combien de personnes jouent à notre jeu, et d’autres infos utiles comme leurs pays, leurs langues et leurs navigateurs. Mais si on utilise l’API Google Analytics, on peut faire bien plus que ça.

Vous aussi, devenez de véritables big brothers grâce à cet article qui vous expliquera toutes les ficelles de l’espionnage de vos joueurs.

toxicode_blog01

Que pouvez-vous enregistrer ?

Virtuellement tout ce pour quoi vous pouvez donner une valeur sous forme de chaîne de caractères à votre utilisateur. Par exemple : le niveau actuel, le nombre de Game Over, le nombre de clics, en combien de temps il passe sur le tutoriel, le niveau de difficulté choisie, est-ce qu’il a désactivé le son…

Cependant, gardez le tout le plus simple possible. Google Analytics ne vient pas remplacer votre base de données, et il n’est pas intéressant de mettre par exemple l’ensemble de l’inventaire dans une variable que vous sauvegarderez. En faisant ça, vous perdrez la possibilité de trier via les valeurs comme vous pourriez le faire avec des valeurs simples.

Il est également possible d’enregistrer des évènements (le joueur bat un boss, finit une partie etc.). Les fonctionnalités du site Google Analytics vous permettront ensuite de visualiser la fréquence des évènements sous forme de statistiques. Vous pourrez ainsi observer si l’ajout d’un nouveau boss dans le jeu le jeudi 30 février augmente le nombre de Game Over, ou autre…

Enfin, vous pouvez segmenter vos joueurs en leur donnant des tags particuliers. Typiquement, vous pouvez ainsi dire à Google que le visiteur a payé son abonnement, a déjà acheté un contenu In-Game, que c’est un nouveau joueur. Ou alors que c’est un joueur qui n’est pas venu depuis plus d’un mois.

Grâce à ces segmentations, vous pourrez ensuite trier les joueurs sur l’interface de Google Analytics. Vous pourrez ainsi voir l’effet de l’ajout de votre nouveau boss sur les nouveaux venus VS sur les joueurs vétérans.

Tout ceci vous permettra de rendre votre jeu plus fun, plus addictif, ou même plus rentable selon vos aspirations personnelles.

toxicode_blog02a

Rentrons dans la technique

Avant toute choses, il faut savoir qu’il existe deux versions de l’API Google Analytics : ga.js et analytics.js. La seconde (plus récente) sera utilisée dans cet article.

Elle permet entre autre de déclarer des évènements et variables à la volée (il fallait auparavant les déclarer depuis l’interface web), et se charge de manière asynchrone.

Voici un exemple du script à inclure dans la page.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

La première partie très condensée est un peu de magie vaudou made in Google, qui permet de déclarer la fonction ga, et de commencer à charger le script de Google Analytics. Une fois le script chargé, il remplace ga, tout en lançant la série de méthodes que l’on aurait pu appeler entre temps. De cette façon, il n’y a pas besoin de faire de callback une fois le fichier chargé, tout est transparent.

Ensuite, la première ligne du deuxième bloc initialise l’analytics avec votre compte utilisateur (il faut mettre son identifiant à la place du UA-XXXX-Y qui n’est qu’un placeholder). Le troisième paramètre, ‘auto’, se réfère au paramètres que vous pouvez donner à votre Tracker Analytics.

Par exemple, vous pouvez interdire d’envoyer des données si le domaine n’est pas le bon (pour empêcher d’envoyer des données sur votre serveur de développement par exemple). Plus d’infos sur les possibilités ici. Mais sachez que vous pouvez par exemple y autoriser les envois de données depuis localhost, si vous souhaitez tester le fonctionnement de Google Analytics.

La deuxième ligne du second bloc envoie une page vue. C’est par défaut le seul comportement de Google Analytics. Elle peut également prendre un troisième paramètre, qui configure les propriétés de la page vue.

Vous pouvez l’utiliser par exemple pour overrider l’url que vous envoyez, afin de savoir si le joueur est dans le menu de votre jeu, ou dans les options, ou sur l’inventaire…. Pensez à rappeler cette commande à chaque fois que vous voudrez envoyer une valeur de pageview.

Envoyer des events

Pour envoyer des events, il suffit d’utiliser la méthode send :

ga('send', 'event', 'playerGotItem', 'diamondSword', 5);

Le premier paramètre, « send« , est commun avec la méthode pour envoyer une pageview. C’est en réalité le nom de la méthode commune à tout envoie de donnée sur votre Tracker Analytics.

Le second paramètre, « event« , permet de dire que vous envoyez un évènement, par opposition à une pageview par exemple.

Le troisième paramètre, « playerGotItem » ici, est le nom de la catégorie d’évènement. Dans le cas d’un jeu, considérez le comme le nom de l’event. Sentez vous libre de le remplacer par ce que bon vous semble.

Le quatrième paramètre est normalement le nom de l’event. Dans le cadre d’un jeu, il est plus intéressant de le considérer comme une valeur. Par exemple, je dis ici que le joueur a obtenu l’épée en diamant. Ce paramètre est optionnel.

Enfin, le dernier paramètre est normalement la valeur numérique de l’évènement. Utilisez la (ou non, elle est optionnelle), pour stocker des informations complémentaires. Par exemple, lors d’un Game Over, vous pouvez y stocker le niveau actuel du joueur. L’intérêt est que cette valeur étant numérique, vous pouvez utilisez Google Analytics pour faire des graphs l’utilisant.

toxicode_blog02b

Segmentez vos utilisateurs avec les dimensions

Pour segmenter vos utilisateurs (premium / non premiums par exemple), il est d’usage d’utiliser les dimensions. Dans notre cas, ça peut être premium, non-premium, beginner-user, advanced-user…

Vous devez définir pour chaque dimension un index entre 1 et 20 (entre 1 et 200 si vous êtes un utilisateur Google Analytics payant). Vous pouvez ensuite déclarer votre dimension en utilisant :

ga('set', 'dimension5', 'premium-user);

Dans cet exemple, vous dites que l’utilisateur est un utilisateur premium, ce qui le place dans la dimension numéro 5.

Vous pourrez ensuite trier vos utilisateur dans l’interface Google Analytics en fonction de ces différents critères.

C’est tout pour aujourd’hui. N’hésitez pas à poster vos astuces, questions, corrections en commentaire.

Illustrations par Lou Pine (www.loupine.fr)