View
7
Download
0
Category
Preview:
Citation preview
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);
Recommended