Projet : contribution à la plateforme OpenXum

F. LEPRETRE et E. RAMAT

Contribuer à OpenXum

● Adopter les normes (coding style, commits, ...) de la communauté

● Utiliser le framework (classes, protocoles, …)● Travail en groupe : 3 étudiants● Plusieurs dimensions :

○ Développement web (front) et objet (es6 et C++)○ Algorithmique avancé○ Intelligence artificielle○ Gestion de projets, qualité de code, ...

Le « framework » OpenXum● OpenXum est un logiciel libre sous licence GPL 3 ● Environnement de gestion de jeux tour à tour

○ Chaque joueur réalise un certain nombre d’actions○ Puis, c’est au tour de l’autre joueur○ Pas d’interaction « simultanée »

● Plusieurs modes :○ Connecté et non connecté○ Contre une IA (locale ou distante)○ GUI (Web)

● Plusieurs types d’épreuves :○ Partie à deux○ Tournoi

Environnement technique

● Plateforme VueJS/Vuetify + bootstrap + NodeJS (API REST) + MongoDB○ La couche serveur avec une API REST et la gestion de la base de données en

MongoDB○ La couche cliente en VueJS/Vuetify avec la notion de PWA (Progressive Web

Application)● Des jeux en HTML5● Des API REST en NodeJS, PHP et C++ pour les IA déportées

● Déploiement sur une plateforme Linux : http://openxum.org

Les jeux actuels

● La collection du projet Gipf de Kris Burm : dvonn, gipf, tzaar, yinsh, zertz et lyngk

● Abande, Dakapo, Invers, Hnefatafl, Manalath, Neutreeko, Kamisado, Ordo, Paletto, Pentago, Tintas et Mixtour

● Chaque jeu sera étiqueté avec un niveau de complexité de développement (*** = difficile)

Projet : Nouveaux jeux

● Sixth(*)

○ Construire une pile de 6 pions● Volo(***)

○ Réunir ensemble tous vos oiseaux en une seule nuée● Bug(**)

○ Développer ses bugs

Projet : Nouveaux jeux

● Lines of action(*)

○ Former un ensemble lié de vos pions● 9tka(*)

○ Occuper le plus de zones possibles● Morelli(**)

○ Conquérir le trône

Projet : Nouveaux jeux

● Yavalax(*)

○ Créer 2 lignes de 4 pierres● Lot(**)

○ Créer une ligne de 3 piles● Necnon(*)

○ Dominer les groupes de son adversaire

Projet : Nouveaux jeux

● *star(***)

○ Conquérir les pointes de l’étoile● Tailits(**)

○ Connecter le maximum de tétrominos● Rukuni(*)

○ Pousser la tour rouge

Projet : Nouveaux jeux

● Emergo (by C. Freeling)(**)

○ Contrôler toutes les piles● Kamon(*)

○ Relier les bords ou entourer une

zone vide ou adverse

● Splits (Battle sheep)(**)

○ Conquière le plus grand territoire

possible avec ta pile en la divisant

Environnement de travail

● IDE : Webstorm (pour le ES6 et nodejs) et Clion (C++/cmake)● Gestion de version : git● Dépôts de source :

� http://gitlab.com/openxum

� http://gitlab.com/openxum/openxum-es6-games

� http://gitlab.com/openxum/openxum-ws-cplusplus

● Respect de normes de codage� Lire le code existant !

Consignes

Consignes – Coding style

● Le nombre de lignes du corps d’une méthode doit être limité : 20 max !

● Le niveau d’imbrication doit être limité à 4● Interdiction de dupliquer du code (toutes les méthodes doivent

contenir du code totalement original)● Le code ne doit pas contenir de commentaire ; en contrepartie, il

est obligatoire de nommer les attributs, les variables locales, les méthodes, les classes, . . . de manière parlante !

Consignes – Coding style

● Tous les éléments du code seront nommés en anglais● Toutes les méthodes et variables seront conformes à la règle

suivante : tout en minuscule et les différents noms seront séparés par un souligné ; les méthodes et variables privées sont préfixées par _

● Les noms des classes commencent par une majuscule;● L’indentation du code est 2 espaces

Tests et tests unitaires

● Une page web qui intègre le canvas du jeu○ Ajouter son jeu dans

test/games/static/public/index-local.html● Un test avec le joueur aléatoire basé sur la méthode de calcul

des coups possibles○ Créer un script test_xxx_random.js dans test/games/AI

● Des tests unitaires :○ Utiliser le package Jest○ Créer un fichier test.js dans test/unittest/games/xxx où xxx

est le nom de votre jeu

Jest

● Jest est un framework de tests unitaires pour JS (et ES6)● Trois niveaux de description :

○ Describe : un groupe de tests unitaires○ Test : un test unitaire○ Except : l’expression de la condition à vérifier

● Execution : dans le répertoire test/unittest/, “npm run test” ● Référence :

○ Describe : https://jestjs.io/docs/en/api#describename-fn○ Except : https://jestjs.io/docs/en/expect

describe('Coordinates', () => {

test('to string', () => {

const coordinates = new OpenXum.Kikotsoka.Coordinates(0,0);

const str = coordinates.to_string();

expect(str).toEqual(expect.any(String));

expect(str).toBe('A1');

});

});

JestGroupe de tests

Test unitaire

Conditions

Tutoriel

● Le tutoriel d’intégration d’un nouveau jeu : https://gitlab.com/openxum/openxum-es6-games/wikis/Guide-d'int%C3%A9gration-%5BFR%5D○ 1ère étape - Ajouter un script de test○ 2ème étape - Ajouter le jeu dans la page Web de test○ 3ème étape - Le moteur○ 4ème étape - La couche graphique

● Lisez le code des jeux disponibles

Présentation finale

● durée : 10 minutes + 5 minutes de questions● une démonstration de 5 minutes max avec un bilan des besoins

fonctionnels couverts (à l'aide de la démo)● comparatif des IA : random vs A*-alpha/beta et A*-alpha/beta

vs MCTS/C++● bilan du versionning git : stratégie utilisée● bilan de la gestion de projets : répartition des tâches, planning, …

Présentation finale

● quelques indicateurs de productivité : nombre de lignes de code écrites, nombre de tâches réalisées par contributeur, nombre de commits, …

● qui a progressé et dans quel(s) domaine(s) (organisationnel, technique, ...) ?

● qu'est ce qui est améliorable dans la méthode, dans les pratiques et dans les outils/frameworks ?

● si c'était à refaire, que changeriez-vous ?

Critères d’évaluation● Réalisation (30 points) :

○ Moteur du jeu (5 points)○ Interface (5 points)○ Liste des coups possibles (2 points)○ IA (fonction d’évaluation) (3 points)○ Tests unitaires (3 points)○ Respect des règles (coding style) (2 points)○ Gestion de projets (git, tâches, ...) (5 points)○ Moteur du jeu en C++ (5 points)

● Présentation finale (10 points) :○ Qualité des slides (2 points)○ Clarté des explications (2 points)○ Réponses aux questions (2 points)○ Prise de recul (2 points)○ Forme (élocution, prise de parole, débit et niveau de langage) (1 point)○ Gestion du temps (1 point)

Guide de survie pour l’ecmascript 6

Pour qui et pourquoi ?

● Vous êtes développeur C++ ou Java● Vous voulez connaître les différences syntaxiques et

conceptuelles entre Java et Javascript● Vous voulez développer en Javascript avec de bonnes pratiques● Vous voulez utiliser les dernières avancées en JS : ES6

Types simples

● En java : char, boolean, byte, short, int, long, float, double● En javascript :

○ Pas de représentation objet des types simples○ Moins de types simples

Valeurs non mutables● Java :

○ String (codage 16 bits), ○ Character, ○ Boolean, ○ Byte, Short, Integer, Long, Float, Double, BigDecimal, BigInteger

● JavaScript : ○ String (codage 16 bits – utilisation des simples et doubles quotes), ○ Number (double, 64bit floating point), ○ Boolean, ○ RegExp

Booléen

● Java : ○ Vrai : true○ Faux : false

● Javascript :○ Faux : false, null, undefined, ”, 0, NaN○ Vrai : true et tout le reste !

Déclaration de variable

● Java : ○ Typé○ Prédéclaré avant l'utilisation○ La portée est limitée au bloc

● Javascript :○ Prédéclaré avant l'utilisation○ Pas de déclaration de type○ Typage dynamique = par la valeur○ La portée est limitée au bloc en ES6○ (à la fonction pour JS < ES6)

var a = new Number(5);var b = 5 ;

function f (x) { let y ;

if (x > 0) { y = 1; } return y;}

Déclaration de variable

● Javascript :○ En ES6, possibilité de définir des constantes○ Uniquement accessible en lecture

const PI = 3.14;

console.log(PI);

Enumération

● En JS, une énumération peut être déclarée à l’aide d’un objet constant

const Color = {NONE: -1, RED: 0, YELLOW: 1};

let c = Color.RED ;

Opérateurs

● Java : ○ postfix : expr++ expr--, ○ unaire : ++expr --expr +expr -expr ~ !, ○ multiplication : * / %, ○ addition : + -, ○ décalage : >> << >>>, ○ relationel : = instanceof, ○ égalité : == !=, ○ Logique : &,^, |, &&, ||○ Test : ?:○ Affectation : = += -= *= /= %= &= ^= |= <>= >>>=

Opérateurs● JavaScript :

○ Création / destruction d'objets : new / delete, ○ appel de fonction : (), ○ unaire : +expr -expr ~ !, ○ typeof, ○ multiplication : * / %, ○ addition : + -, ○ décalage : >> << >>>, ○ relationel : = in instanceof,○ postfix : expr++ expr--,○ égalité : == != === !== ○ logique : &,^, |, &&, ||○ test : ?:○ affectation : = += -= *= /= %= &= ^= |= <>= >>>=

=== : même type et même valeur

5 === 5 // => true5 === 5.0 // => true'a' === "a" // => true5 === '5' // => false[5] === [5] // => falsenew Number(5) === new Number(5) // => falsevar a = new Number(5);a === a // => truefalse === false // => true

Tableaux● Java : un type spécial à base de templates …● Javascript :

○ Un type intégré au langage○ Plusieurs façons de créer :

■ Par new■ Par un simple [ ]

○ Ajout :■ Par une simple affectation■ Par la fonction push

○ Retrait :■ Comme une pile : pop■ splice

○ Taille : length

// créationvar empty = new Array(2); // an empty array with length 2var array = ["1", "2"]; // lectureempty[0]; // => undefinedempty[5]; // => undefined // écritureempty[0] = "Test"; // empty is now ["Test", undefined]empty[2] = "Test"; // empty is now ["Test", undefined, "Test"]

Instructions de contrôle

● Java :○ conditionnel : switch, if/else, ○ itération : while, do/while, for, ○ branchement : return, break, continue, ○ exception : throw, try/catch/finally

● JavaScript :○ Idem○ + for in○ + with

const a = [ 3, 8, 7 ];let s = 0;

for (let i in a) { s += a[i] ;}

with (object) { a = b}

Fonctions

● Pas de type de retour● Pas de typage des paramètres● Pas de contrôle du nombre de paramètre

○ Si appel avec insuffisamment de valeur, alors paramètre = undefined

○ Si appel avec trop de valeurs, alors ignoré● Retourne une valeur à l'aide de « return »

Fonctions

● Deux formes :○ Déclaration d'une fonction○ Définition via une variable

● Invocation identique quelle que soit la déclaration

function myFunction(a, b) { return a * b;}

const x = function (a, b) {return a * b};

r = myFunction(2, 2) ;

u = x(2, 2) ;

Fonctions fléchées

● Déclaration simplifiée d’une fonction● Plusieurs syntaxes selon le nombre de paramètres et

d’instructions● Avantages :

○ Simplification du code○ Accès au this à l’intérieur○ de la fonction (utilisé pour les ○ événements en HTML5 ou les○ timers)

([parametre] [, parametre]) => { // code}

([parametre] [, parametre]) => valeur ou expression

parametre => { // code}

parametre => valeur ou expression

Classes et objets

● Java :○ Mot clé : class○ Notion de méthodes et d'attributs publiques et privés○ Instantiation à l'aide de new○ Le constructeur est une fonction spéciale

● Javascript (ES6) :○ Mot clé : class○ Notion de constructor via une méthode spéciale : constructor○ Notion de méthodes, getter, setter et statique○ Instantiation à l'aide de new

Classes et objets

● Gestion de l’héritage avec extends et super()○ class NomClasse extends ClasseParent

● Gestion des getters et setters avec les mot-clés get et set○ get propriete() {}

● Gestion des méthodes statiques avec le mot-clé static○ static method() {}

Classes et objets

● Toutes les méthodes et attributs sont publiques● Pas de notion de visibilité● Par convention, les méthodes et attributs privés sont

préfixés par _

this

● Java :○ Auto-référence○ La référence sur l'objet courant

● Javascript :○ Référence le « propriétaire » de la fonction○ Dans le cas des fonctions d'un objet, this désigne l'objet○ Dans un contexte de Javascript embarqué dans de l'HTML, this désigne

l'élément dans lequel est le code (par exemple, un formulaire)

Modules● Programmation modulaire permettant d’isoler des composants dans des

fichiers● Opérations export / import entre les modules● Modèle asynchrone : aucun code n’est exécuté tant que le module n’est pas

chargé et exécuté

● Export default : un seul élément exporté (une fonction, une classe ou un objet)

// lib/math.js

export const PI = 3.14;

// index.jsimport * as math from "lib/math";console.log(math.PI);

// lib/math.jsexport default { PI : 3.14, PIsur2 : 1.57};

// index.jsimport math from "lib/math";console.log(math.PI);