Site icon Blog Zenika

Créer son premier Playground sur Tech.io

  • Julien Landuré

    • Chez Zenika, durant le séminaire des nouveaux arrivants, nous participons à différents ateliers notamment un atelier “carpaccio programming”. J’ai trouvé qu’il serait intéressant de l’implémenter sur la plateforme Tech.io : voici mes premiers essais et mes retours sur cette plateforme.

    La plateforme Tech.io

    Tech.io est un site web propulsé par Codingame, une plateforme d’exercices de code en ligne très populaire au sein de Zenika :

    Revenons sur tech.io et sa description officielle :

    Tech.io is a collaborative platform to discover, share and experiment technologies directly from your browser. Craft hands-on tutorials, demos or articles on topics that matter to you.

    Tech.io est encore en beta et permet de créer des tutoriaux, des codelabs, des workshops, des exemples de code… Le “WHY” est très bien décrit dans un manifeste dédié.
    La plateforme offre des fonctionnalités intéressantes :

    Toutes ces fonctionnalités permettent de mélanger des phases théoriques (écrites en markdown) et des phases pratiques (écrites directement dans le navigateur web et compilé/testé/lancé dans un conteneur Docker)
    La plateforme s’adresse à deux types de population :

    Aujourd’hui, la plateforme compte environ 70 playgrounds avec notamment le cours “Advanced Python Features” très populaire avec plus 31 000 utilisations.

    Pour information, tout le contenu publié sur la plateforme sera sous la licence Creative Commons Attribution-ShareALike 4.0 International (CC BY-SA 4.0) Pour plus de détails sur l’aspect juridique, Tech.io possède une page dédiée.

    Créer son premier playground

    Pour créer un playground, il suffit de cliquer sur son compte et la plateforme nous donne une url GIT à utiliser. N’oubliez pas d’indiquer votre clé ssh pour pouvoir pusher vos commits comme indiqué sur le Getting Started
    Ensuite, nous allons créer un premier fichier Markdown appelé intro.md pour expliquer le but de notre tutorial.

    # Welcome to my first playground on Tech.io

    Pour indiquer les différentes étapes de notre tutorial, nous allons créer un fichier  techio.yml.

    title: Carpaccio programming JS
plan:
  - id: Intro
    title: Introduction
    statement: intro.md

    Le titre global « title” servira de titre pour notre playground et dans le plan, nous allons indiquer chaque section avec un “id” (sera affiché dans l’url), un “title” (sera affiché en haut et dans les menus) et un “statement’ (sera le contenu de notre page).
    Enfin, il suffit de commiter cela et de pousser ça sur leur git avec la commande  git push techio master.

    Faire un exercice de code

    Nous allons maintenant ajouter une section pour laisser l’utilisateur coder. L’exercice est simple : afficher “Hello World” dans la console Javascript. Pour cela, nous allons proposer 2 fichiers :

    Fichier  src/hello/hello.js

    // Hi, there
// use console.log to print something
module.exports = () => {
};

    Fichier  src/hello/hello.test.js

    const program = require("./hello.js");
let outputData = “”
const storeLog = inputs => (outputData += inputs);
test("console log Hello World", () => {
  console["log"] = jest.fn(storeLog);
  program();
  expect(console.log).toBeCalled();
  expect(outputData).toBe("Hello World");
});

    Nous utilisons Jest pour faire le test unitaire en JS. Rien de spécial dans ce code Jest même si l’avantage est qu’un bon framework de test va respecter les standards de développement :

    Automatiquement, la plateforme Tech.io affichera un joli “Success” si le code écrit est bon !
    Il ne nous reste plus qu’à mettre à jour le markdown intro.md et notre fichier techio.yml

    # Welcome to my first playground on Tech.io
@[Can you create an Hello World program?]({"stubs": ["/hello/hello.js"], "command": "npm test"})

    Ce bout de Markdown va créer une petite fenêtre de code directement dans notre page web.
    Nous voyons qu’il faut indiquer le squelette “stubs” et la commande (“command”) pour valider notre code.

    title: Carpaccio programming JS
plan:
  - id: Intro
    title: Introduction
    statement: intro.md
projects:
 node:
   root: /src
   runner: techio/node-npm-runner:1.1.0-node-7.4

    Là, pour notre projet NodeJS, nous spécifions quel “runner” (c’est-à-dire quelle image Docker) nous voulons utiliser. Je suis parti de celle préconisée par Tech.io pour faire du NodeJS. Le paramètre “root” permet d’indiquer quel répertoire sera ajouté dans notre conteneur.
    Déployons et testons maintenant notre premier playground. Voici ce que donne l’interface web côté créateur de contenu :


    Et voici la page web de l’utilisateur pour notre “Hello World” :
    Et en cas d’erreur, cela donnera :


    Pour information, voilà les limites techniques pour faire tourner nos conteneurs sur la plateforme Tech.io :

    Conclusion

    Une fois notre playground complété et testé sur Tech.io, il n’y a plus qu’à le publier et communiquer sur les réseaux sociaux !
    Tech.io publie les nouveaux playgrounds chaque semaine dans une “weekly newsletter” ainsi que sur leur twitter.
    Voilà quelques retours personnels sur la plateforme :

    Pour les besoins de Zenika, voilà quelques features manquantes et quelques réflexions sur la plateforme :

    Ressources :

    Auteur/Autrice

    • CTO de Zenika Nantes, Julien est aussi Google Developer Expert Cloud. Il a co-fondé en Janvier 2011 le GDG Nantes, une communauté de développeurs des technologies Google et organise chaque année le DevFest Nantes.

      Voir toutes les publications
    Quitter la version mobile