Après un rapide survol de l’architecture, nous vous montrerons comment :
-    Créer la classe Employee,
-    Créer une page html permettant d’afficher une liste d‘employés,
-    Créer de nouveaux employés depuis le navigateur,
-    Créer une classe Company, avec sa page HTML,
-    Créer un attribut de type "relation" entre Employee et Company.
-    Importer des données dans le datastore, et
-    Améliorer les pages d’interface pour afficher les employés avec leurs sociétés et vice versa.

À la fin de ce guide, vous aurez appris les fondamentaux de Wakanda. À tout moment, vous trouverez également de nombreuses informations dans le Wakanda Doc Center et dans le Learning Center.

Note : Wakanda évolue très vite. Il se peut que certaines copies d’écran ne correspondent pas exactement aux interfaces que vous observerez. D’autant que Wakanda est distribué sur plusieurs canaux de diffusion , notamment le canal de production et le canal de développement.

• Wakanda Server : application sans interface (faceless) avec un serveur http tournant au dessus d’une base de données objet (le datastore). L’accès aux données s’effectue via des classes spécifiques (les datastore class) et JavaScript (Server-Side JavaScript, ou SSJS).
• Wakanda Application Framework (« WAF ») : framework applicatif contenant des API AJAX côté client (navigateur) et des API sur le serveur (accès aux fichiers, …). Dans le navigateur, WAF casse, littéralement, la barrière qui existe usuellement entre des données sur un serveur et  leur affichage dans des widgets d’interface sur le client.
• Wakanda Studio : application desktop comprenant un IDE (Integrated Development Environment) et des éditeurs WYSIWYG. Le Studio est un outil complet vous permettant de créer vos applications métier intuitivement.

Installation

L’installation de Wakanda est extrêmement simple : après avoir téléchargé les produits, vous les placez où vous voulez sur votre disque. Généralement dans le dossier stockant les applications, mais cela n’est pas obligatoire.

Quand Wakanda Studio et Wakanda Server sont côte à côte, le studio peut lancer le serveur automatiquement. Si vous placez le studio et le serveur dans des endroits différents, le studio vous demandera de localiser le serveur à utiliser.

Dans Wakanda, vous créez un projet  pour regrouper les différents fichiers (.js, .html, .css, .jpg, etc.) utilisés par votre application. Wakanda peut regrouper plusieurs projets ensemble pour constituer une solution. L’architecture de base peut être schématisée ainsi :

Wakanda Studio

                Solution

                               Projet A

                               Projet B

                               . . .

Note : à ce jour Wakanda ne permet d’ouvrir qu’une solution à la fois

Chaque projet est constitué d’un certain nombre de fichiers rangés dans des répertoires : fichiers textes (HTML, JavaScript, logs, …) et fichiers binaires (gérés par Wakanda, comme le fichier de données, ou gérés par le développeur, comme les images du site web). Certains fichiers ont des extensions propriétaires mais sont en fait des fichiers texte, généralement XML (.waSettings ou .waModel par exemple).

Dans le cadre de ce guide, nous souhaitons afficher des données de type Employés/Sociétés sur un site web. Nous devons donc créer des classes correspondantes, des datastore class. Nous parlerons plus en détail de ces classes un peu plus loin. La description de ces classes est stockée dans le modèle, le datastore model.

Lors de l’exécution, lorsque nous accèderons aux données nous parlerons :

• D’entité (entity), qui représente une entrée dans la classe, comme un enregistrement dans une base de données classique. Par exemple, la société « 4D ».
• De collection d’entités (entity collection), qui est une liste d’entités (par exemple « toutes les sociétés françaises »).

Pour créer un nouveau projet :

• Choisir « File » -> « New » -> « Project », ou cliquez sur le bouton « New Project… »
• Dans le dialogue qui s’ouvre (« New Project From Template »), choisir « Blank » et cliquer sur le bouton « Create ».

• Lorsque le dialogue standard de création de document de votre système s’ouvre, choisissez l’emplacement du stockage, donnez le nom « Contacts » au projet, puis cliquez sur le bouton « Create ».

Comme il n’y a pas encore de solution, Wakanda en crée une du même nom. Nous avons ainsi la solution « Contacts », qui contient le projet « Contacts ». Un nouvel onglet vient s’ajouter à côté de « Home » : 

Wakanda Studio crée tous les fichiers nécessaires au fonctionnement du projet. Nous reviendrons sur certains de ces fichiers plus tard.

Après avoir créé notre classe Employee, nous pouvons utiliser le GUI Designer pour créer la page d’interface – une page HTML – qui contiendra des widgets Wakanda afin d’afficher les données.

Depuis le Solution Explorer, sectionnez votre projet, et cliquez le bouton New Page, puis sélectionnez « For desktop » dans le menu qui s’affiche : 

Note : si vous ne voyez pas ce bouton dans la barre d’outils, cliquez sur le bouton « Display » et son popup menu local, puis choisissez « New Page » dans le sous-menu « Toolbar Content ».

Entrez « employees » dans le dialogue qui s’ouvre alors. Inutile d’ajouter le suffixe « .html », Wakanda Studio le fait pour vous. Une fois le dialogue validé, le fichier est créé puis ouvert dans le GUI Designer, dans un nouvel onglet.

Note : Vous pouvez nommer vos pages comme bon vous semble, tant que le nom est valide une fois utilisé dans une URL

Le fichier « employees.html » créé est placé dans le dossier « WebFolder » du projet : 

Si vous faites un clic droit sur votre fichier et choisissez « open Enclosing Folder », le Studio affiche alors le document dans l’Explorateur (Windows) ou le Finder (Mac) : 

Aperçu du GUI Designer

Le GUI Designer permet d’éditer les pages d’interface, dans lesquelles vous pouvez ajouter de puissants widgets. Une des principales forces de Wakanda est que, grâce au WAF (Wakanda Application Framework), la barrière qui existe entre un navigateur et les données sur le serveur est supprimée.

Nous allons maintenant ajouter un widget de type grille (Grid), et le lier à la datasource Employee (nous définirons plus loin le concept de datasource).

Le GUI Designer contient quatre grandes parties :

1. En haut, une barre d’outils. À gauche, les boutons Design et Source permettent de basculer d’un mode à l’autre. Source affiche le code HTML dans l’éditeur de code, alors que Design vous permet de construire votre page graphiquement.
2. Sur la gauche, vous trouvez :
   1. Les widgets disponibles, que vous glissez-déposez dans la zone de dessin
   2. Les datastore class de votre modèle, et les datasources créées pour cette page
   3. Au milieu se trouve la zone de dessin dans laquelle vous allez créer votre interface
   4. Enfin, à droite vous trouvez des listes de propriétés, dont le contenu change en fonction de l’objet sélectionné. 

Pour ajouter un widget à la page :

• Sélectionnez le widget voulu,
• Placez-le dans la zone de dessin par glisser-déposer,
• Puis, éventuellement, associez-le à une datasource.

Vous pouvez modifier les propriétés du widget sélectionné, ajouter du JavaScript (par exemple, pour réagir au clic sur un bouton), et définir le look & feel de votre page.

Formatage de la page

Nous allons créer une page simple, affichant une liste d’employés, et contenant une petite mise en forme.

Glissez-déposez un widget Grid dans la zone de dessin 

• Glissez-déposez la datastore class Employee sur cette Grid. 

Par défaut, le GUI Designer charge le modèle de données de votre projet, de telle sorte que les classes définies soient disponibles en tant que datasources.

Une datasource est, comme son nom l’indique, une source de données. Une datasource est utilisée pour définir le contenu d’un widget d’interface. Pour remplir notre Grid avec une liste d’employés, nous avons besoin d‘une datasource liée à la datastore class Employee. Le GUI Designer crée la datasource liée à la datastore class lorsque vous glissez la classe depuis l’onglet Model. Par défaut, le nom de la datasource est le même que celui de la classe à laquelle elle est liée, mais la première lettre est automatiquement passée en minuscule (Employee -> employee, UserAccount -> userAccount, etc.).

Note : une datasource représente ici des données stockées sur le serveur, mais les datasources peuvent aussi être liées à des objets JavaScript « locaux » (déclarés uniquement sur le navigateur) : variables scalaires, objets, tableaux. Par exemple, vous pouvez afficher le contenu d’un tableau JavaScript dans une Grid.

Après avoir déposé la datastore class Employee sur la Grid :

• Pour chaque attribut de la classe, une colonne est ajoutée à la Grid.

• L’onglet Model bascule sur Datasources et une nouvelle datasource est créée, nommée employee.

Lorsque la Grid est sélectionnée, l’onglet Properties (sur la droite) est rempli avec ses propriétés. Nous voulons d’abord formater la page elle-même (nous nous occuperons de la Grid un peu plus tard). La zone des propriétés est constituée d’onglets : Properties, Events, Skins et Styles. Ils permettent d’ajouter un titre à la page, de modifier le thème, de modifier la couleur de fond, ajouter une image en fond de page, … Dans ce document nous allons voir comment modifier le titre de la page.

Cliquez sur une zone vide (afin de désélectionner la Grid). L’onglet Properties affiche maintenant les propriétés générales de la page. Modifiez le titre en « The Employees » (par défaut, le nom est celui de la page). Pour le moment, vous pouvez ignorer les autres propriétés. 

Dans l’onglet Skins, vous pouvez définir une classe (au sens CSS du terme), un thème, et une palette de couleur à utiliser pour votre page. Des valeurs par défaut ont été présélectionnées. N’hésitez pas à tester différents thèmes et couleurs pour voir comment la page et la Grid sont modifiées. 

Dans l’onglet Styles, vous pouvez modifier l’aspect de la page, changer l’image de fond, … Cliquez sur le bouton « Color » pour afficher le sélecteur de couleurs et choisir une couleur de fond qui vous convient. 

Pour afficher une image comme fond de page, vous pouvez simplement glisser déposer une image depuis votre disque vers le champ Image de la section Background : 

Dans cet exemple, après avoir déposé l’image, la page apparaît ainsi : 

Wakanda crée automatiquement un dossier « Images » (s’il n’existait pas déjà) dans le « WebFolder », et y recopie les images. Vous pouvez le constater depuis le Solution Explorer : 

Création de la classe

Revenez à présent à votre modèle. S’il n’est pas déjà ouvert, double-cliquez sur le fichier « Contacts.waModel », ou cliquez sur le bouton Model de la barre d’outils.

Pour créer la datastore class Company, suivez les mêmes étapes que celles utilisées pour créer la classe Employee, avec les différences suivantes :

• Saisissez « Company » dans le champ Class Name, et gardez « CompanyCollection » comme nom de collection 

• Créez un seul attribut : « name », de type « string » 

Enregistrez les modifications en cliquant le bouton Save de la barre d’outils. Puis, cliquez sur le bouton Reload Model, pour indiquer à Wakanda Server que le modèle a été modifié et qu’il doit le recharger.

Nous allons maintenant créer un attribut de type Relation entre les classes Employee et Company. Jusqu’à présent, nous avons créé des attributs de type Storage. Un attribut Relation est une déclaration qui indique à Wakanda : « Lors de l’exécution, cet employé peut – si besoin – être chargé avec des informations sur la société pour laquelle il travaille ». Il y a deux types d’attributs Relation:

• N->1 : dans notre cas, cela signifie que « plusieurs employés travaillent pour une société »
• 1->N : dans notre cas, cela signifie que « une société a plusieurs employés »

Note : en fait, il est tout à fait possible qu’une société n’ait aucun employé, et qu’un employé ne travaille pour aucune société. Si vous êtes familiers de la pattern ActiveRecord, vous avez probablement déjà reconnu les classiques belongs_to et has_many.

Pour créer la relation N->1, suivez ces étapes :

• Ouvrez le modèle. S’il n’est pas déjà ouvert, cliquez le bouton Model de la barre d’outils
• Déplacez vos deux classes de telle sorte qu’elles soient côte à côte : 

• Ajoutez un nouvel attribut à la classe Employee, nommez le « company » 

• Dans la colonne du type de l’attribut, tapez la lettre « c ». Comme vous pouvez le constater, les noms de classe et de collection (Company et CompanyCollection) sont à présent disponibles en tant que types d’attributs : 

• Puisque nous voulons créer une relation vers une seule société, nous choisissons « Company », et validons ce choix en utilisant la touche Return (ou Enter) 

Vous pouvez noter que :

• Wakanda dessine une relation entre les deux classes
• Note : si vous ne voyez pas cette relation, utilisez le bouton Relations et choisissez See all dans son pop-up menu 

• L’attribut company a bien été créé dans la classe Employee, et Wakanda lui donne le type N->1 : 

• Wakanda a également créé, automatiquement, l’attribut relationnel inverse, nommé employeeCollection, qui part d’une société et liste tous ses employés : 

Note : les noms peuvent varier selon la façon dont vous avez nommé vos classes et vos collections

Nous renommons, dans Company, « employeeCollection » en « allEmployees » : un double-clic sur le libellé « employeeCollection » permet de l’éditer et de le modifier : 

Deux attributs de type Relation viennent d’être créés : N->1 et 1->N. En utilisant la notation à point de JavaScript, nous pouvons accéder à n’importe quel attribut de la classe Company depuis un Widget dont la datasource est reliée à Employee.

Par exemple, si vous souhaitez afficher le nom de la société dans la Grid de la page « employees.html » :

• Double-cliquez sur « employees.html » pour l’ouvrir (ou cliquez sur son onglet s’il est déjà ouvert)
• Sélectionnez la Grid
• Dans l’onglet Properties, zone Columns, cliquez le bouton   pour ajouter une colonne
• Entrez « Works For » comme libellé
• Entrez « company.name » comme attribut.

Tout au long de la saisie de « company.name », le menu local de saisie prédictive vous aide à choisir l’attribut. Sitôt que vous tapez « . » après « company », vous accédez aux attributs de la classe reliée.

Dans l’exemple suivi jusqu’à présent :

• La classe Employee contient trois employés
• La classe Company contient deux sociétés

Nous voulons à présent lier, depuis un navigateur, chaque employé à une société pour arriver à ce résultat :

Créez une nouvelle page en cliquant le bouton New page et en choisissant « For desktop » dans son menu local. Nommez la page « bind-emp-comp ». Le Studio crée la page et l’ouvre dans un nouvel onglet du GUI Designer : 

Suivez ces étapes :

• Donnez à la page un titre qui vous convient et si vous le souhaitez, modifiez le thème, la palette de couleur et le fond de la page
• Glissez et déposez une Grid dans la page
• Depuis l’onglet Model, glissez et déposez Employee sur la Grid
• Mettez la Griden forme :
  
  • Supprimez les attributs « ID » et « Salary »
  • Modifiez les libellés
  • Ajoutez une colonne dont le libellé est « Works For » et l’attribut est « company.name »
  • Retaillez la Grid afin que toutes les colonnes soient visibles
  • Créez une autre Grid, glissez et déposez (depuis l’onglet Model) la classe Company sur la Grid, mettez-la en forme, supprimez son attribut « ID ».
  • Disposez la Grid des employés à gauche et celle des sociétés à droite, en laissant la place pour un bouton entre les deux

Note : le GUI Designer contient tous les outils d’alignement dont vous avez besoin pour aligner à gauche/droite/haut/bas/milieu, pour distribuer les widgets horizontalement ou verticalement. Sélectionnez deux widgets ou plus (ctrl-clic sur Windows, commande-clic sur Mac) et utilisez le bouton approprié : 

Voici à quoi ressemble notre page : 

Dans cette capture d’écran, la Grid des employés est sélectionnée. Vous pouvez noter que la colonne « Works For » est bien liée à company.name. Si vous publiez cette page dans votre navigateur (ici, Chrome sur Mac OS), elle apparaîtra comme ceci : 

Dans la mesure où aucun employé n’est lié à une société, la colonne “Works For” est bien entendu vide. Depuis le GUI Designer, glissez puis déposez un widget « Button » entre les deux Grids : 

Nous allons à présent importer des employés et des sociétés. Il y a plusieurs façons d’importer des données dans un datastore Wakanda. Dans notre exemple, nous allons utiliser du code Server-Side JavaScript pour importer un fichier texte. Le document est délimité par des tabulations et contient les colonnes suivantes :

Nom de société -> Nom -> Prénom

Pour chaque ligne, nous commencerons par chercher la société dans le datastore . Si elle n’est pas trouvée, nous la créons. Cet exemple se veut simple : nous ne gérons pas le fait que des sociétés différentes peuvent avoir le même nom.

Tout d’abord, sélectionnez le projet « Contacts » dans le Solution Explorer, puis cliquez le bouton New JS : 

Un dialogue vous demande de nommer votre fichier. Inutile d’ajouter l’extension « .js », le Studio le fera. Nommez le fichier « import ». Wakanda Studio crée le fichier, le place dans le dossier du projet, puis l’ouvre dans un nouvel onglet :

Il y a quatre zones dans l’éditeur de code (deux sont cachées par défaut)

• Une barre d’outils permettant d’exécuter le script, de déployer/contracter des blocs de code, de trouver du texte, …
• L’éditeur de code lui-même
• Sur la droite, vous pouvez afficher le squelette (outline) du code en cliquant sur le bouton .  Cela affiche la structure du code : fonctions, variables, etc. Un clic sur un élément de l’outline sélectionne l’élément dans l’éditeur.

• Quand vous exécutez le fichier, une zone de sortie (output) est ajoutée dans la partie inférieure de la fenêtre, affichant le résultat de l’exécution.

Note : tous les scripts ne peuvent pas être lancés directement depuis l’éditeur de code. Typiquement, un script associé à une page html ne peut pas être exécuté sur le serveur. Si vous cliquez sur le bouton Run pour un .js associé à une page html, le Studio ouvre la page dans le navigateur.

Voici le code d’importation. Il évite d’importer des doublons : si vous lancez le script plusieurs fois de suite, les données ne seront pas dupliquées.

Copiez-collez le code suivant. Juste après, nous expliquons son déroulement plus en détail.

Notes :

• La solution complète associée à ce document contient déjà les données, ainsi que le fichier à importer et le fichier « import.js ».
• Si vous suivez ce guide pas à pas, vous pouvez également télécharger le fichier à importer (Import-folder-to-paste-in-the-project.zip). Une fois décompacté, placez le dossier « Import » au premier niveau de votre projet (vous devez avoir : \Contacts\Contacts\Import\emps_comps.txt)

// A simple log for the output

var log = "Count employees-before: " + ds.Employee.length + ", Count companies-before: " + ds.Company.length;

  // Main function

 function doImportEmpsAndComps () {

     /*   The doc. to import is in the solution folder, in a subfolder

         named "Import". We load the full document in one shot  (loadText)

         and split it in an array (one line = one element).

     */

    var lines = loadText( ds.getModelFolder().path + "Import/emps_comps.txt" ).split("\n");

       /*   Declare the variable that will hold the columns of each line.

           We know the columns will be:

            columns[0]   Name of the company

            columns[1]   Last name of the employee

            columns[2]   First name

            columns[3]   Salary

     */

    var columns = [];

       // Now, loop for each entry in the array

    lines.forEach( function(oneLine) {

        // Get the columns for current line

        columns = oneLine.split("\t");    
        // Get the company. Create it if needed.

        var theComp = ds.Company.find("name = :1", columns[0]);

        if(theComp == null) { // Not found => create it

           theComp = new ds.Company({

            name : columns[0]

        });

        // Save it

        theComp.save();

           }

        // Get the employee. Create it if needed.

        var theEmp = ds.Employee.find("lastName = :1 and firstName = :2", columns[1], columns[2]);

        if(theEmp == null) {

             theEmp = new ds.Employee( {

                lastName  : columns[1],

                firstName : columns[2],

                salary    : columns[3],

                company   : theComp // This is how you bind two entities with Wakanda!

         });

      } else {

         theEmp.salary = columns[3],

         theEmp.company = theComp;

      }

        theEmp.save();

     });

 }

 // Call the function

doImportEmpsAndComps ();

 // Log result

log += " / Count employees-after: " + ds.Employee.length + ", Count companies-after: " + ds.Company.length;

Voici quelques explications sur ce code. Toutes les API utilisées sont documentées sur http://doc.wakanda.org.

• Le code qui analyse le fichier attend un document encodé en UTF-8, utilisant un LineFeed (LF) comme fin de ligne. Pas CR ou CRLF, juste LF. Si vous modifiez le document à importer, ou si vous utilisez un document différent, prenez garde à ce que vos lignes se terminent bien par LF, ou modifiez le code pour qu’il utilise CR ou CRLF.
• loadText (http://doc.wakanda.org/Global-Application/Application/loadText.301-655198.en.html) est une API de haut niveau, qui remplit une variable chaine avec le contenu d’un document
• Pour Company et Employee, nous utilisons l’API find() et sa possibilité de substituer des critères de recherche. En pratique, au lieu d’écrire une ligne qui concatène columns[0] et columns[1], nous utilisons " :1" et " :2", ce qui indique à Wakanda Server d’‘utiliser les premier et second paramètres passés après la chaine de recherche. De cette façon, nous n’avons pas à nous préoccuper d’éventuels espaces dans les noms. Sans cette substitution, nous aurions dû utiliser un mélange de guillemets doubles et simples :

ds.company.find("name = '" + columns[0] + "'")

Note : cette technique est particulièrement intéressante lorsque vous manipulez des dates par exemple

• Dans la solution exemple accompagnant ce guide, nous utilisons l’API loadText()(http://doc.wakanda.org/Global-Application/Application/loadText.301-655198.en.html) . Si vous travaillez avec un fichier vraiment très lourd, vous pourriez avoir besoin d’utiliser plutôt un TextStream, (http://doc.wakanda.org/Global-Application/Application/TextStream.301-686651.en.html) pour éviter d’éventuels problèmes de mémoire.
• Si vous souhaitez importer beaucoup de données d’un coup, vous pouvez créer un index sur l’attribut lastName de Employee et sur l’attribut name de Company. La recherche sera alors bien plus rapide. Pour fixer un index dans le Datastore Model Designer, sélectionnez l’attribut et choisissez l’index « auto » dans ses propriétés.

Note : dans notre exemple, nous importons les sociétés par leur nom ce qui n’est pas la meilleure façon de faire puisque plusieurs sociétés peuvent avoir le même nom. La plupart du temps, vos données viendront d’une base de données avec généralement des clefs primaires et secondaires. Wakanda sait parfaitement importer ce genre de données, mais cela dépasse le cadre d’un guide de prise en main. Rapidement, disons que vous pouvez mettre dans l’attribut company de Employee l’ID de la société. Par exemple, si la société, dans la base de donnée originale, a l’ID 42, vous pourriez écrire theEmp.company = 42 afin d’associer l’employé courant à cette société.

Vous avez collé le code ci-dessus, vous pouvez cliquer le bouton Run : 

Si le serveur n’était pas encore lancé, il est démarré. Une fois le script exécuté, notre propre log s’affiche dans l’output : 

Note : notre fichier à importer contient 1 000 employés et 62 sociétés. Nous avons un total de 1 003 employés et 64 sociétés parce que nous avons créé des données dans les chapitres précédents.

Dans le chapitre « Création de la Page des Employés », nous avons créé une page très simple, affichant une liste d’employés. Nous allons maintenant améliorer cette page :

• Affichage des seuls noms
• Création d’une zone affichant toute l’information
• Ajout de boutons de navigation

Dans le Solution Explorer, déployez le « WebFolder » et double-cliquez sur le fichier « employees.html ». Une fois ouvert dans le GUI Designer, sélectionnez la Grid créée précédemment : 

Pour notre dernière page, nous voulons afficher une liste de sociétés avec leurs employés. Chaque fois que l’utilisateur cliquera sur une ligne des sociétés, nous voulons que la liste des employés soit mise à jour.

Créez une nouvelle page, nommée « comps-emps ». Dans cette page :

1. Ajoutez une Grid
2. Reliez-la à la dataclass company, comme nous l’avons fait plusieurs fois depuis le début de ce guide.
3. Retirez la colonne « ID » de la Grid

À présent, ajoutez une autre Grid. Dans cette Grid, nous voulons afficher la liste des employés de la société couramment sélectionnée. Nous ne devons pas lier la nouvelle Grid à la classe Employee, car cela créerait une datasource liée à tous les employés du datastore. À la place :

• Déployez la datasource company
• Glissez puis l’attribut Relation allEmployees et déposez-le dans la nouvelle Grid : 

 

Maintenant que la Grid est liée à company.allEmployees, nous la formatons comme vu précédemment, par exemple, en retirant l’attribut « ID », en modifiant les libellés, etc. Nous terminons en alignant la seconde Grid à côté de la première.

Dans ce guide de prise en main, vous avez découvert plusieurs fonctionnalités fondamentales de Wakanda. Vous pouvez en apprendre plus sur Wakanda, les datastore class, le Model Driven Development, la sécurité d’accès, le Wakanda Application Framework… au travers d’autres exemples et de la documentation.

La documentation : http://doc.wakanda.org/

Le Learning Center, avec notes techniques et vidéos : http://www.wakanda.org/learning-center