shifteo-cli

Client RAPIDE pour créer ou mettre à jour un projet Shifteo. Ce package est un ensemble de commande permettant d'automatiser les développements et d'avoir une structure similaire pour tous les projets. A quick taste:

System requirement:

• NodeJS version 6 minimum
• NPM version 3 minimum
• Git Cli version 2 minimum
• Environement Windows / Linux / Mac Os
• Php Cli version 5.5 minimum
• Code d'accès Développeurs aux différents projets BitBuckets
• Connaissance du framework SLIM 3
• Connaissance de l’ES6

Voir http://www.shifteo.com/dev pour avoir la documentation complète.

Installation

1. Checker si node est installer

2. npm install -g shifteo-cli

   Note: La commande va installer la version actuelle du dépôt de façon globale sur votre machine.

Test installation

shifteo test

Vous devriez avoir un retour de la commande indiquant ##### ok ##### ,

License

MIT.

SHIFTEO-CLI structure, architecture et nomenclature

Structure

Votre projet se décomposera en 2 parties :

• La partie API REST dans le répertoire API
• La partie applicatif ES6 dans le répertoire WEBPACK

A la racine de votre projet se trouvera :

• Folder API
• Folder WEBPACK
• Folder node_modules : Tous les packages nécessaires au fonctionnement de votre application
• Folder lib : Package nécessaire au fonctionnement du client shifteo (Ne doit pas être modifié)
• File package.json : fichier de configuration général de votre projet avec les dépendances principales
• File shifteo-cli.json: fichier de configuration de votre client shifteo

architecture

L'api Rest est basé sur le framework Slim3 et se décompose de la façon suivante :

• Le dossier vendor qui contient toutes les dépendances de votre API Rest géré par composer (Sous dépendance GIT)
• Le dossier src qui contient toutes les classes internet à l'API Rest (Sous dépendance GIT)
• Le dossier public qui contient les modules de fonctionnement de l'API Rest (Le sous module présent dans ce dossier est le dossier access)
• L'application ES6 est basé sur la technologie Webpack et l'ES6 et se décompose de la façon suivante :
• Le dossier Build qui contient toutes les application ES6 de chaque module compiler pour le déploiement en prod ou en recette
• Le dossier Dist contenant tous les assets et les plugins globaux communes à toutes les plateformes (Sous module GIT)
• Le dossier Inclure contenant les fichiers SPIP nécessaire au fonctionnement de toutes les plateformes (Sous module GIT)
• Le dossier Local contenant les fichiers de traductions communes à toutes les plateformes (Sous module GIT)
• Le dossier shifteo_modules contenant toutes les dépendances communes à toutes les plateformes ES6
• Le fichier webpack_local.json qui permet de compiler les applications de chaque module grâce à Webpack
• Le fichier webpack_commun.json permettant de compiler les applications communes à tous les projets

nomenclature

Définition d'un module : Un module est un ensemble de package Définition d'un package : Un package est un ensemble de fichiers ES6 compilés pour obtenir une application

Nomenclature d'un package : [NOM MODULE]_[NOM APPLICATIF] egg: testance_essai Le package se trouvera donc dans le dossier webpack/src/testance/testance_essai. Un application appartien obligatoirement à un module et dans ce dossier testance_essai, on pourra trouver :

• testance_essai.js (code global de votre applicatif)
• table.js (code de gestion des datatable)
• select.js (code de gestion des select)
• template.html (template html importation es6/angular)
• string.js (variable d'insertion dans le template)

SHIFTEO-CLI Commandes

Initialisation d'un nouveau projet

shifteo init || i

Permet d'initialiser un nouveau projet SHIFTEO. Vous devez posséder un compte BitBucket associé à la structure Shifteo

Génération de nouveau module

shifteo generate || g || add <args --module MODULE_NAME> <args --file PACKAGE_NAME>

Permet de créer un nouveau module/package au sein de votre projet.

• L'argument --module permet de définir le nom du module
• L'argument --file permet de définir le nom de l'applicatif (vous pouvez mettre ou ne pas mettre l'extension du fichier JS la commande la traitera en conséquence

Lancement du serveur local

shifteo serve opt[<args --port NUMERO_PORT> <args --php NUMERO_PORT>]

Cette commande vous permettra de lancer les deux serveurs nécessaires au fonctionement de votre plateforme :

• Un serveur Webpack
• Un serveur PHP Cette commande contient deux args optionnels :
• L'argument --port permet de définir le port du server Webpack (par défaut 8181)
• L'argument --php permet de définir le port de server PHP (par défaut 8200)

Compilation des applicatifs pour le déploiement serveur et push GIT

shifteo prepare || p || compile || build opt[<args --module MODULE_NAME> <args --file PACKAGE_NAME>]

Cette commande vous permettra de compiler vos différents applicatifs pour la production, le déploiement et la synchronisation du dépot distant BitBuckets. Vous pouvez compiler de 3 manières possible:

• une compilation globale qui compilera tous vos packages (sans argument)
• une compilation par module qui compilera tous les packages présent dans ce module (args --module)
• une compilation par package (args --file)

Supprimer des applicatifs de votre projet

shifteo remove || r opt[<args --module MODULE_NAME> <args --file PACKAGE_NAME>]

Cette commande vous permettra de supprimer différents applicatifs de votre projet. Vous pouvez supprimer de 2 manières possible:

• une suppression par module qui supprimera tous vos packages présent dans ce module (args --module)
• une suppression par package (args --module et args --file obligatoire)

Télécharger un projet déjà exitant

shifteo projet || p || clone || download

Cette commande vous permettra de télécharger un projet qui a déjà été créé sur le réseau shifteo/Bitbuckets

SHIFTEO-CLI Explication Framework

Prérequis

• IDE supportant ES6
• Node JS environnement
• Webpack environnement
• Compte BitBucket
• Clé SSH pour les sous-modules de dépôts
• SourceTree Software & manipulation
• Console CLI environement npm/node
• Connaissance du framework SLIM 3
• Connaissance de l’ES6

Introduction

Le principe du framework SHIFTEO est de développer localement chaque projet synchroniser avec les dépôts GIT Bitbuckets. De cette manière très peu de manipulation sont faite directement sur le serveur et chaque développement est répertorié par Branch afin d’avoir une sécurité totale lors de période de recette et/ou de production. Le développement local se résume de la façon suivante :

• Création/modification/suppression des packages ES6 pour chaque controller de SPIP
• Simulation des Controller de SPIP en local.
• Synchronisation avec les dépôts GIT distants
• Déploiements automatique des dépôt GIT distant lors de Push de branch (eg :: SI push sur la branch master alors déploiement dans le répertoire production du projet sur le serveur, SI push sur la branch recette alors déploiement dans le répertoire Recette)

Pour faire fonctionner l’environnement local le développeur doit posséder NODE.JS installé de façon globale sur sa machine de développement ainsi que les dépendances globales nécessaire pour le fonctionnement des projets.

Les dépôts GIT et Bitbuckets

Chaque projet de développement est découpé en plusieurs parties afin d’automatiser le développement : Exemple d’un projet sur Bitbucket pour un Projet [domaine].shifteo.com :

• [domaine].shifteo.com[API] : Contient l’API Rest du projet sélectionné
• [domaine].shifteo.com[GLOBAL] : contient l’environnement principal du projet

Un projet est lié au dépôt Master : master.shifteo.com => Il contient tous les développements communs à tous les projets de Shifteo :

• master.shifteo.com[DIST] : Tous les répertoires du thème de SHIFTEO (JS-PLUGINS-CSS-IMG-FONT)
• master.shifteo.com[SHIFTEO_NODE] : Tous les fichiers JS centraux permettant de compiler nos applications JS pour les Controller SPIP
• master.shifteo.com[SPIP] : Tous les fichiers HTML d'inclusion dans les Controller SPIP
• master.shifteo.com[API-CLASS] : Dossier contenant toutes les class de tous les projets
• master.shifteo.com[API-VENDOR] : Dossier contenant toutes les dépendances de composer
• master.shifteo.com[API-JWT] : Dossier contenant le modèle de connexion JWT API Rest
• master.shifteo.com[LOCAL] : Dossier contenant toutes les traductions de tous les projets

Environnement local et explications :###

[domaine].shifteo.com – GOBAL : Dépôt du projet contenant tous les fichiers, toutes les dépendances et tous les sous-modules de dépôt centraux :

Les répertoires

• Répertoire [build] : Ce répertoire est la compilation des applications JS générées dans le répertoire [src] grâce à l’environnement WEBPACK. Il est synchronisé directement avec le serveur à chaque Push sur le dépôt centrale du [domaine].shifteo.com
• Répertoire [api] : Ce répertoire provient du dépôt GIT [domaine].shifteo.com[API], il contient l’API Rest du projet.
• Il est synchronisé indirectement.Lors de travaux sur ce répertoire et après Push sur le dépôt GIT Distant, DeployBot synchronise directement son propre dépôt et pas le dépôt Global du projet
• Répertoire [dist] : Provient du dépôt central Master.shifteo.com[DIST]. Considéré comme sous-module dans le dépôt du projet [domaine].shifteo.com[GLOBAL]. Il est synchronisé sur le serveur automatiquement à chaque Push sur le dépôt distant
• Répertoire [local] : Provient du dépôt [domaine].shifteo.com[LOCAL] et synchroniser avec la plateforme CLOUD POEditor, il est synchronisé sur le serveur du projet automatiquement à chaque Push sur le dépôt distant (cf : Voir Chapitre sur POEditor). C’est un sous-module
• Répertoire [src] : Ce répertoire contient toutes les applications JS à compiler qui sont ensuite envoyées dans le répertoire [build]. Dans ce dossier, il y a un sous répertoire [shifteo_module]. Ce répertoire est un sous-module appartenant au dépôt Master.shifteo.com[NODE]. Il contient tous les fichiers JS centraux permettant de compiler chaque applications JS pour ensuite envoyer le tous sur un fichier global dans le répertoire [build]. C’est donc un sous-module. Ces deux répertoires ne se synchronise pas avec le serveur

Les fichiers racines

• Fichier [favicon.ico] : icône du projet synchronisé automatiquement sur le serveur lors de modification
• Fichier [*.php] : Tous les fichiers PHP présent à la racine du dépôt sont des simulations des controller HTML SPIP. ils ne se synchronise pas avec le serveur

Les dépôts GIT et SourceTree

Synchronisation du dépôt distant

Pour gérer les dépôts GIT entre les dépôts distants et les dépôts locaux, SourceTree est nécessaire. Pour télécharger un projet sur l'environnement local, ouvrir le logiciel SourceTree > Cloner/Nouveau > indiquer l'URL SSH du projet hébergé sur BitBucket > Indiquer le répertoire de destination où seront téléchargé les fichiers du dépôt distant. Lors de la validation du formulaire SourceTree téléchargera et synchronisera le dépôt Distant avec votre dossier indiqué.

Gestion du dépôt GIT Local

Une fois télécharger, vous avez accès aux différentes branches ainsi qu'aux sous-modules (cf: Les répertoires). Un projet global est synchronisé avec les mises à jour des sous-modules. Exemple : Lorsque le développeur travail dans le répertoire [api], il faut qu'il fasse deux actions dans sourceTree pour mettre à jour son dépôt local GLOBAL. Il doit pusher les modifications du dépôt distant API et pusher les modifications du sous-module dans le dépôt global.

Chaque Push sur les branch Master ou Recette, synchronisera les développements sur le serveur correspondant. Attention : Pour que les applications JS soient bien synchroniser il faut utiliser l'environnement WEBPACK en mode production.

Clé SSH

Pour avoir accès aux différents sous-module du dépôt GIT Global, le développeur devra configurer des clés SSH privées et public

Liens utiles

• Les nouvelles fonctionnalités de l'ES6 : http://es6-features.org
• Gestion des clés SSH :

• https://www.youtube.com/watch?v=pVpjmoDluK8
• https://git-scm.com/book/fr/v1/Git-sur-le-serveur-G%C3%A9n%C3%A9ration-des-cl%C3%A9s-publiques-SSH
• https://help.github.com/articles/generating-an-ssh-key/

• NODE JS : https://nodejs.org/en/
• Webpack : https://webpack.github.io/