Configuration de webstorm

Procédure de configuration de webstorm pour le projet.

• Sommaire.
  • Introduction
  • I. Automatisation du script nodejs
    • 1ere methode.
    • 2eme methode.
  • II. Réinitialiser un fichiers graphiquement
  • III. Configurer des variables d’environnements pour coder en équipe.
  • IIII. Crée des graphiques (optionelle)

Intro

• Cette procédure nécessite d'avoir installer est configuré :
  • IDE Webstorm (jetbrain propose le logiciel pour les étudiants)
  • Git Logiciel de versioning.
  • Un accès au depo git du projet.

---

I Automatisation des scripts nodejs

1ere méthode.

1. Click droit sur le projet du fichiers ouvrir avec webstorm.

2. Allez dans le fichier de configuration nodejs(package.json).
3. Cliquer sur le bouton vert puis "edit start" et "edit serve".
4. Vous pouvez maintenant utilisez les boutons start et serve.

--

2eme méthode

1. Clickez sur le boutons "Add configurations" en haut à droite.
2. Sur la fenetre qui s'ouvre faire le "+" puis sélectionnez "npm" renseigner un nom par convention dev pour development et start pour le serveur. Sélectionnez le packaqge.json petit 4. Puis le logiciel vas automatiquement détecter les scripts du package.json, faire apply puis ok. --

• Stopper un procéssus.

Une fois le script lancé vous pouvez le stopper avec le bouton stop. Attention si vous quitez le logiciel stopper les script car sinon ils continuent de fonctionner.Dans se cas là utilisez la commande :

    taskill -F -IM node.exe 

Voir bug double service en cours.

---

II Réinitialiser un fichiers graphiquement

• Methode graphique via webstorm. La documentation git montre la façon par ligne de commande

1. Click droit sur le fichiers à reset.
2. Allez dans git puis rollback. --

III Configurer des variables d’environnements pour coder en équipe.

    var con = mysql.createConnection('mysql://uisomclwcgug5cj5:58Eg8vzqeQ4Rx0zxjhFw@bfgvnm6ajhbocjxbjmly-mysql.services.clever-cloud.com:3306/bfgvnm6ajhbocjxbjmly');

1. Ouvrez les options de webstorm comme sur le screenshot.
2. Sélectionnez le script de l’api puis environnement.
3. Enregistrez l’uri en lui donnant un nom.
4. Vous pouvez maintenant l’utilisez avec process.env. « val » comme l'exemple ci-dessous.

var con = mysql.createConnection(process.env.DATABASE_URL);

--

• Vérification de la modification du code avec git

📡Albert at DESKTOP-2RTE5PH in ~/Documents/Travail/Programmation/JavaScipt/NuxtJS/AlbertFoundation on  dev (29m) (*)
> git diff server/api.js
diff --git a/server/api.js b/server/api.js
index 71a52e7..e9fb57b 100644
--- a/server/api.js
+++ b/server/api.js
@@ -7,12 +7,12 @@ var GlobalVarFiltre = [];


 async function FullDataFromDB() {
-    var con = mysql.createConnection('mysql://uisomclwcgug5cj5:58Eg8vzqeQ4Rx0zxjhFw@bfgvnm6ajhbocjxbjmly-mysql.services.clever-cloud.c
+    var con = mysql.createConnection(process.env.DATABASE_URL);
     connection = con.connect(function (err) {
         if (err) throw err;
         console.log(" -- Connection réeussit! -- ");
         //Select all customers and return the result object:
-        con.query("SELECT * FROM `producttable`", function (err, result, fields) {
+        con.query("SELECT * FROM `albertfoundation`", function (err, result, fields) {
             if (err) throw err;
             GlobalVarData = result;
         });

Pourquoi ? https://www.theregister.co.uk/2015/01/06/dev_blunder_shows_github_crawling_with_keyslurping_bots/ https://securitytrails.com/blog/github-dorks https://www.google.com/search?q=bot+scan+github+for+aws+keys&rlz=1C1CHBF_frFR869FR869&oq=bot+scan+github+for+aws&aqs=chrome.1.69i57j33.6558j0j7&sourceid=chrome&ie=UTF-8

IIII Crée des graphiques (optionel)

• Webstorm propose une technologie qui crée des diagrammes avec le inclusions des différents fichiers. Cette technologie ne remplace pas les diagrammes de classe.

1. Pour utilisez cette options faite un clique droit sur le fichiers puis diagrams. --

• Evitez absolument de sélectionez le fichier node_modules car les dépendances sont nombreuse.

Auteur Lanne Albert