Beyond Coder Machine coder
Sommaire Le réseau...............................................................................................................................2 Le Core...................................................................................................................................3 Description.........................................................................................................................3 Modèles de données.........................................................................................................3 Les Générateurs....................................................................................................................5 Description.........................................................................................................................5 Modèles de données.........................................................................................................5 Learning IAs...........................................................................................................................7 Description.........................................................................................................................7 IA d’apprentissage des models..........................................................................................7 IA d’apprentissage des vues..............................................................................................7 Le Studio................................................................................................................................8 Description.........................................................................................................................8 Données sur-mesure (BDD)..............................................................................................8 Vues sur-mesure (formulaires)..........................................................................................9 Générateur sur-mesure (utilisateurs expérimentés)..........................................................9 La preview............................................................................................................................10 Description.......................................................................................................................10 Vision....................................................................................................................................11 Description.......................................................................................................................11 Réseau neuronal..............................................................................................................11
1
Le réseau Preview Studio
« Model » Learning IA
Vision
BDD Editor
Generator Editor Views Editor
Core
Neural Network
« View » Learning IA
Generator(s) ….
Nœuds du réseau : • Le Core : Connecte ensemble les différentes parties du système et gère les projets. •
Les Générateurs : Un générateur s’inscrit auprès du Core et reçois des commandes de génération.
•
Learning IAs : Ces deux IA étudie les projets généré afin de trouver des schémas récurent et améliorer les modèles de base.
•
Le Studio : Présente aux utilisateurs une interface leur permettant de configurer leurs projets (tables, vues, voir un générateur sur-mesure).
•
La preview : Permet aux utilisateurs de visualiser en temps réel et avec un maximum de fidélité, le rendu de son projet.
•
Vision : Offre à l’utilisateur la possibilité d’initialiser son projet le plus fidèlement possible à l’aide d’une simple image scanné, traité par un réseau neural et mis en concordance avec des modèles existant ou non afin de présenter une solution la pertinente possible. 2
Le Core Description Le Serveur Core est le noyau du système, son rôle est d’interconnecter tous les modules. Pour cela, il héberge un serveur de socket que les différents modules utiliserons afin de s’enregistrer auprès du Core et permettre d’avoir une connexion active double sens. Le 2ème rôle du Serveur Core est de gérer les projets et features utilisateur afin de pouvoir améliorer le modèle de données des projets et des features en ayant l’impacte minimal sur l’ensemble du système : « Il traduit » le modèle de stockage en un modèle normalisé dit « d’échange » (modèle échangé avec les autres nœuds du réseau) Un 3ème rôle du Core, est de gérer une répartition de la charge. Actuellement celle-ci est déjà supporté pour la génération des projets via les générateurs. A terme, il serais aussi possible d’installer une répartition de la charge sur de multiples Serveur Core interconnecté.
Modèles de données Le modèle « Project » : • • • • • •
Ce modèle contiens les informations général d’un projet : Nom du projet Compte utilisateur associé (email, mot de passe de la preview) Panier : Ce que l’utilisateur souhaite généré (API, Backend) Liste des fonctionnalités lié au projet Statut : Brouillon, Généré/Envoyé Autres config
3
Le modèle « Feature » : • • •
• • • •
Ce modèle décrit entièrement une table d’une base de données : Nom du modèle (pour être facilement identifié via un backend Administrateur) Nom de la table Rôles de la table : Permet de signaler qu’une table à un rôle spécifique. Par exemple : la table « Account » dispose du rôle « auth:local » qui signale au générateur que dans un processus de connexion local (à la différence d’une connexion facebook) il doit utilisé cette table en particulier. Modules à connecter. Par exemple, un module « timestamp » ou « google-map » Liste des colonnes (cf. modèle « Field ») Liste des relations étrangère avec d’autres tables (cf. modèle « Relationship ») Liste des dépendances : liste exhaustive des tables en relations avec celle-ci ainsi que des tables en relations avec ces tables, etc. Ceci permet de connaître instantanément tous les modèles qu’il faut automatiquement inclure afin qu’un modèle en particulier puisse être correctement généré. Le sous-modèle « Field » :
• • • • • • • •
Ce modèle décrit une colonne en base de données : Nom du champ Rôle du champ : Même objectif que son homologue du modèle « Feature ». Par exemple : Le champs « act_password » dispose du rôle « auth:password ». Type de champ. Ex : « Id d’objet », « Entier », « Chaîne de caractère », « E-mail ». Précisions sur le champ. Ex : « 255 caractères », « Liste des valeurs d’un Enum » Valeur par défaut Index. Ex : « Clé primaire », « Colonne à valeurs unique » Nom d’index. Principalement utile en cas d’index multicolonne. Autres propriétés. Ex : « Valeur requise », « Visible dans un formulaire » Le sous-modèle « Relationship » :
• • • • • •
Ce modèle décrit une relation entre deux tables : Type de relation. Ex : « A pour parent », « A comme enfants » Identifiant de la table en relations Nom de la relation Clé étrangère : Nom de la colonne du modèle enfant qui pointe sur le parent Clé cible : Nom de la colonne du modèle parent qui est pointé par l’enfant Clé affiché : Nom de la colonne à affiché en lieu est place des ids. (ex : email)
Pour les relations du type « A comme frères » : • Identifiant de la table intermédiaire (modèle parent) • Clé étrangère devient : Nom de la colonne du modèle parent qui pointe « sur moi » • Clé 2ndaire qui remplace la clé cible : Nom de la colonne du modèle parent qui pointe sur « mon frère ».
4
Les Générateurs Description Les générateurs s’enregistre auprès du Serveur Core, afin que celui-ci puisse leurs transmettre des commandes. Pour cela, le Core envoie simplement à l’un des générateurs un événement « generate:project » avec l’id du projet à générer. La 1ère étape de traitement d’une commande de génération, consiste à récupérer : Les informations général (email du compte, panier, etc.) et la liste des features du projet, auprès du Core. • Pour chaque produit du panier (Backend, API), le schéma de génération et les templates de génération associé. •
Dans une 2nd étape, les modèles normalisé (récupérés par Core, par exemple) sont convertis en modèle « de traitement » (modèle interne, enrichie). Enfin, le générateur suit le schéma de génération et les templates, qu’il met en corrélation avec les données du projet afin de générer les fichiers source qui seront par la suite envoyé au client.
Modèles de données Le modèle « Generator » : Ce modèle décrit un schéma de génération, il permet de dire « Quels fichiers doivent être créer, comment, et où les placer dans le dossier de destination » : • Description du générateur : API ou Backend, Langage (JS, PHP), etc. • Archives à déployer : Archives zip qui contiens des fichiers qui n’ont pas besoin d’être interprétés et qui doivent simplement être déployés dans le dossier de destination afin d’initialiser un projet. • Fichiers à générer : Liste des templates à utiliser pour générer chacun des fichiers sur-mesure du projet. Chaque élément de la liste décrit le path et le nom que le fichier doit avoir, ainsi que les données d’entrées que le générateur doit injecter pour pouvoir correctement interpréter le template associé. • Path du dossier thème : informe sur le dossier dans lequel les fichiers du thème choisi doivent être déployés.
5
Le modèle « Template » : Ce modèle contiens un modèle exécutable qui permet de générer un fichier. Il décrit aussi comment ce modèle doit être utilisé (données d’entrées) et si il contiens des dépendances (Un modèle peut utiliser d’autres modèles, à la manière des poupées russe). Exemple : T1 T2 T3 T4 • •
T1 utilise T2 et T4 T2 utilise T3
Ce template pourrais correspondre à une page (T1) qui contiens un corps de texte (T2) et un pied de page (T4). Dans le corps de texte, il pourrait y avoir plusieurs boutons (T3 est un bouton et T2 utilise T3 à plusieurs reprises mais avec des paramètres différent) • • • • • •
Pour cela, un template contiens les données : Nom du template : Pour être facilement identifié Code du template : Code utilisé pour l’imbrication de templates Code exécutable : Contenu du template en format ejs Description des données d’entré (nom de la donnée => description) Identifiant des templates requis (ex : T2 et T4 dans le template T1) Identifiant des templates dépendant (ex : T2 ET T3 et T4 dans le template T1)
6
Learning IAs Description Les projets sont généré a partir de modèles de données et de templates de rendu. Dans un premier temps, le générateur n’utilisait que des modèles de données et il était possible de créer un modèle de données de 2 manières : 1. A partir d’un modèle existant (sample), que l’on pouvais ensuite personnalisé afin de l’adapter à notre projet ; 2. De toute pièces, car le modèle désiré n’existait pas ; Avec cette solution, il est ressortie un problème majeur : Si un utilisateur (admin) ne gardait pas à jour les modèles de base (ce que n’était pratiquement jamais le cas, car cela prenais « trop de temps »), les utilisateurs se retrouvaient à faire continuellement les même modifications d’un projet à l’autre, y perdant ainsi l’intérêt d’un générateur censé automatiser ce genre te tache récursive et chronophage. • •
C’est pour répondre à ce problème récurent, qu’interviennent de concert deux IA : Une IA d’apprentissage des modèles de données Une IA d’apprentissage des templates de rendu
IA d’apprentissage des models Cette IA a pour rôle d’étudier les projets généré, afin de reconnaître des schémas récurent sur des modèles de données proche afin de détecter les modifications et, le cas échéant, les incorporer dans un modèle de base existant ou créer un nouveau modèle de base. Afin de pouvoir développer cette IA, les modèles de données ont été conçu dès le début, pour être « compréhensible » par une IA : Lors de la lecture d’un modèle, l’IA dispose de toutes les informations utile pour ce modèle, il ne lui reste plus qu’à comparer 2 modèles entre eux afin de détecter les différences et donner une « plus grande valeur » à une différence « plus récente ».
IA d’apprentissage des vues La nouvelle version du générateur, permet de concevoir chaque fichier de code comme un ensemble de « brique élémentaire ». Il est donc possible de personnaliser une vue ou d’en créer de nouvelles, simplement en modifiant les briques qui la compose. Ces briques on été standardisé afin de pouvoir les traiter de la même manière, quelque soit le rôle de la brique en question. Cette propriété offre aussi comme possibilité l’étude d’un « schéma de construction d’une vue » (ensemble des briques qui la compose) par une IA afin de mémoriser de nouveaux schémas et de les présenter ultérieurement. 7
Le Studio Description Le studio est une interface conçu pour offrir aux utilisateurs un maximum des possibilités de paramétrages sur-mesure de leur projet, tout en restant le plus accessible possible au plus grand nombre. • • •
Le studio dispose de 3 principaux modules : Un module d’édition des modèles de données (tables en base de données) Un module d’édition des vues (formulaires, listes, etc.) Un module expérimental afin de pouvoir concevoir son propre générateur
Données sur-mesure (BDD) Ce module permet à un utilisateur de paramétrer les données de base de son projet, en décrivant les tables dont il aura besoin et le produit qu’il souhaite obtenir (cf. Core). Afin d’aider des utilisateurs ne disposant pas de compétences technique en base de données, des modèles de tables sont disponible et présentées selon 2 niveaux de détails : • Un premier niveau présente des fonctionnalités, chacune lié à une table de données et incluant les fonctionnalités pré-requises. Exemple : La fonctionnalité « Adresse » nécessite la fonctionnalité « Pays ». • Le second niveau réunis un groupe de fonctionnalités sous un intitulé, afin de présenté l’ensemble comme un module. Exemple : Le module « e-commerce » regroupe 12 tables, dont les tables « Produit » et « Panier ». Le modèles de bases peuvent ensuite être personnalisé afin de correspondre parfaitement aux besoins du projet (en ajoutant ou supprimant des fields par exemple).
8
Vues sur-mesure (formulaires) A l’image des modèles de données, chaque formulaires associé à chacune des tables, peuvent être personnalisé. Cela est rendu possible grâce à une schématisation des vues en plusieurs pièces qui peuvent s’imbriquer à la manière d’un jeu de légo. Pour cela, l’utilisateur dispose d’une interface s’approchant d’un CMS où il suffit de glisser-déposer un block dans la page en constituant ainsi un « mock-up » définissant un template de génération utilisable par le système. Mise en page Panels
Panel - Basic Basic
2 colonnes
Tabs
Wizard
XXXX
XXXX
XXXX
XXXX
Formulaire
XXXX
Générateur sur-mesure (utilisateurs expérimentés) La dernière version du générateur offre la possibilité aux utilisateurs de créer leur propre générateur sur-mesure, de toute pièces ou a partir d’un générateur existant. Cela peut leur permettre de simplement demander au générateur de générer un fichier en plus à partir d’un template, ou d’apprendre au générateur toute une série de nouveaux templates compatible pour d’autres langages de destination. Cette interface est la plus complexe à mettre en place et s’adresse à des utilisateurs expérimentés, mais elle offre la possibilité de mettre à disposition un système à l’image des modules WorldPress développé par des développeurs indépendant. Sinon, à défaut d’être ouvert aux développeurs extérieur, cette interface peut être utilisé en interne afin d’enregistrer de nouveaux générateurs ou de mettre à jour.
9
La preview Description La preview est une interface permettant de simuler en temps réel le produit que l’utilisateur obtiendrait à l’arrivé. A défaut d’être exacte (pas de possibilité de changer le thème, rendu limité en cas d’édition sur-mesure des formulaires, etc), elle serait connecté au backend et prendrait en charge instantanément toutes modifications du projet : par exemple, un ajout de fields et le formulaire correspondant afficherais les nouveaux fields sans que l’utilisateur ait besoin de rafraîchir la vue. Un autre avantage de ce système, est la possibilité de visualiser le rendu sur plusieurs périphériques et plusieurs tailles d’écran différent simultanément. Ainsi l’utilisateur peut regarder l’effet de son changement instantanément et en même temps sur : un mobile, une tablette et un écran d’ordinateur. Ce qui peut lui faire gagner beaucoup de temps pour le développement d’un projet responsive design.
Mobile
Tablette
Ordinateur
10
Vision Description
Réseau neuronal
11
