Github and Git…and refactoring

Cet article (et tous ceux qui vont suivre) explique la progression du projet « Constellations ».

  • Le résultat peut être trouvé ici.
  • Le user manuel ici.

Comme je le disais dans le précédent billet, je ne travaillais qu’avec des tableaux et des index. Cela devenait impossible à s’y retrouver. L’objet s’imposa. Je n’en avais pas besoin de beaucoup, seulement de quelques-uns, mais cela devenait urgent.

Un peu d’architecture logiciel. À la base, il y avait des données, beaucoup de données, cent vingt mille étoiles sous forme d’un Array. Je devais les transformer en constellations (à l’aide du fichier que j’avais créé). Puis il y avait l’affichage qui se basait sur les constellations, et enfin les menus qui me permettraient de naviguer entre les constellations. En clair, le coeur du programme, c’était les constellations, donc il me fallait un objet constellation :-D.

Un petit dessin est toujours mieux qu’un grand texte :

Untitled

Pour faire simple, la classe Constellation contenait trois tableaux :

  • Un avec toutes les étoiles qui se trouvaient dans la constellation. (c’est-à-dire toutes celles qui avaient été répertoriées dans cette région de l’espace) ;
  • Un avec seulement les étoiles de la constellation (le dessin dans le ciel) ;
  • Et enfin, un tableau de triplés (from, to, lines) qui contenait les connexions à dessiner. Ce tableau était initialisé via le fichier fo_t_path.js.

Après 8 heures de refactoring et de casse-tête Javascript

btelem.onclick = function(j) { return function() { cameraOn(j); }; }(constel.shortname);

(pt de foncteur…), j’avais un code praticable et améliorable (yes !)

Et puis, il y avait Git

La refactorisation, c’est toujours problématique, on y fait des changements énormes sans nouvelles fonctionnalités, et là, les doutes s’installent. Est-ce que cela marchera encore ? Pourrais-je revenir en arrière, etc.

Il me fallait un version control, un moyen pour gérer les changements dans le code. Car faire des copier-coller de dossier, cela devenait aussi problématique que des variables et des fonctions. Et au-delà de cela, même en écrivant (autre chose que du code), ce serait tellement plus simple d’avoir un gestionnaire de versioning.

Étant de la vieille génération, je connaissais svn et csv, mais la tendance aujourd’hui, c’était le décentralisé et the best, c’était  Git. J’aurais voulu l’essayer sur mon Raspberry, mais le package bugge un peu, sniff…

Puis, un jour, je m’y suis mis. Pourquoi ? À cause d’un site (GitHub) et d’une fonctionnalité, mais j’y reviendrai.

Pourquoi ne pas y aller plus tôt, me direz-vous ? Ben… j’y comprenais rien.  Venant d’Svn, pour moi, un Commit, c’était un Commit sur le serveur. Et tout le monde avait accès. Alors qu’avec Git, non ! Un Commit commité en local, mais rien n’était envoyé sur le serveur, il fallait faire un push pour cela (et cela, c’était pas simple).

Ici, le serveur où tout serait envoyé, c’était GitHub. Ce serait le dépôt. Mais bref, si je devais résumer mon utilisation de Git (et GitHub), voici ce que j’en faisais (avec l’aide de CE livre et de ce site)

Création du projet (faire une fois)

A chaque changement de code…

Une fois les changements faits, en console, faire :

  1. git status pour voir les fichiers à rajouter ;
  2. git add… (tous les fichiers modifiés) ;
  3. git commit pour commiter les modifications en local ;
  4. git push -u origin master pour tout envoyer sur GitHub.

En clair, ça, c’était l’utilisation à la svn: -D. Ça marchait bien, mais cela ne Git pas :-D. La force de Git, c’étaient les « branches », car en Git, chaque changement, chaque nouvelle fonctionnalité devrait être dans une nouvelle « branche ». C’est, en gros, un copier-coller du projet, mais en mode balaise (comme moi qui faisais un copier-coller du dossier).

À chaque nouvelle fonctionnalité

En console, faire (avant modification) :

  1. git branch BRANCH_NAME (créer la branche)
  2. git checkout BRANCH_NAME (permet de travailler sur la branche)
  3. git log –oneline –decorate –graph –all (pour être sûr qu’on est sur la bonne branche)
  4. Faire les changements
  5. git status (pour voir les changements)
  6. git add fichier1 fichier 2  (rajoute les fichiers – comme d’hab’, quoi)
  7. git commit -m «  » (pour commiter les fichiers sur la branche BRANCH_NAME)
  8. git checkout master (pour revenir à la branche principale)
  9. git merge BRANCH_NAME (pour merger BRANCH_NAME à la branche principale)
  10. git branch -d BRANCH_NAME (pour supprimer la branche secondaire…)
  11. git push -u origin master (pour tout envoyer sur GitHub).

Voilà. ALORS :

  1. C’est long … Pt, y en a des commandes juste pour cela (bien que tout soit logique) ;
  2. Je n’ai pas encore tout compris, dont : pourquoi, une fois la branche supprimée (ligne 10), je ne retrouve pas la branche dans GitHub ??
  3. Il y a encore une autre façon de travailler avec Git et GitHub, c’est avec un clone et un “merge” directement dans GitHub (pull request)… J’ai toujours pas compris. Mais pour l’instant, tant pis.

 Et puis il y avait GitHub

En regardant des tutoriaux GitHub, j’avais découvert par hasard ce tutorial.  Cela expliquait un truc très bête. Si le code sur le serveur n’était composé que de Javascript, de css et de l’html, GitHub pouvait l’héberger en mode site web. Et c’était mon cas. Tout était statique, tout était figé. Pas de serveur php, pas de web 2.0, ni de Python-Django, rien de tout cela.

Pour cela, il suffisait de l’activer (comme dans le tutoriel), d’attendre 10 minutes (pourquoi, je ne sais pas), et hop, un nouveau site est créé sur github.io.

Ça, c’était la raison de Javascript, de Git et d’aller sur GitHub.

 

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s