STIC:STIC I - Atelier technique 2

De EduTech Wiki
Aller à : navigation, rechercher

Cette page fait partie des cours STIC I et STIC II

STIC


1 Programme

2 Projet webmaster

Activité :

  • Créer un Elevator Pitch pour votre idée de projet webmaster en forme écrite (150 mots maximum)
  • Postez le texte en réponse à la discussion du forum Moodle du cours STIC I de votre volée
  • Votre idée peut changer par la suite

3 Ligne de commande

Pourquoi ?

  • Faire certaines opérations pas possibles avec une interface GUI
  • Comprendre les scripts, c.f. fichier de commande
  • Faire des opérations sur un serveur distant (notamment pour installer des portails)

3.1 Logiciel

Utilisation d'un logiciel pour accéder à la ligne de commande. Attention : l'utilisation de la ligne de commande peut générer des opérations irréversibles !

Logiciels :

  • Pour Windows utiliser le logiciel WIndows Terminal à installer depuis le Microsoft Store ou Windows PowerShell (N'utilisez pas le prompt command)
  • Pour Mac utiliser le Terminal
  • Pour Linux utiliser l’une des lignes de commandes disponibles selon la version.

Les commandes que nous allons voir par la suite fonctionnent sur toutes les plateformes, mais ce n'est pas toujours le cas, et même parmi les commandes illustrés par la suite il y a des différences entre Windows vs. Mac/Linux.

3.2 Position actuelle

Lorsque vous utilisez la ligne de commande, faites toujours attention à la position actuelle dans le système, que ce soit en local ou sur un serveur distant.

Toujours bien vérifier la position actuelle (i.e. le path) lorsqu'on utilise la ligne de commande.

Pour récupérer votre position actuelle si elle n'est pas visible, utilisez :

pwd

C'est l'acronyme de "Print Working Directory".

3.3 Commandes principales

Il y a eu un effort dans les dernières années pour uniformer certaines commandes dans les différentes plateforme (Win vs. Unix). Les commandes listées par la suite fonctionnent généralement sur tous les systèmes :

Changer de dossier
cd

C'est l'acronyme de Change Directory. On utilise cette commande avec des chemins absolus ou relatifs à la position actuelle.

Vous pouvez faire référence aux différents niveaux de l'arborescence par rapport à la position actuelle avec les notations suivantes :

  • ./ fait référence au dossier actuel
    • attention à ne pas confondre avec / (sans point) qui fait référence à la racine de votre système où se trouvent des fichiers importants !
  • ../ fait référence à un niveau supérieur
  • ../../ fait référence à deux niveaux supérieurs
  • etc.
  • ~ fait référence au dossier utilisateur (dont la position peut varier selon le système d'exploitation).

Examples :

  • cd documents
  • cd ../stic-1/ex1/
  • cd ~/Documents
  • cd /home

Hint:

  • vous pouvez vous aider avec la touche TAB pour complèter des noms des fichiers très longs. Cette pratique s'applique à toutes les commandes
  • vous pouvez trainer un dossier depuis votre gestionnaire de fichiers dans le terminal de commande pour faire apparaître son chemin
  • pour windows seulement : quand vous êtes au bon chemin dans votre gestionnaire de fichiers appuyez sur les touches Ctrl + l (comme lausanne) et tapez powershell dans la barre de l'adresse.
Lister les fichiers
ls

On utilise cette commande pour afficher une liste de dossiers/fichiers existants à un chemin donné. Si la commande n'a pas d'argument, la position actuelle sera prise en compte. Si non, il est possible de fournir :

  • Un chemin absolu ou relatif, e.g. ls /home va lister tous les éléments contenu dans le dossier home qui se trouve à la racine du système
  • Un critère de selection, e.g. ls *.png va lister tous les fichiers qui terminent avec .png
Créer un dossier
mkdir nom-du-dossier

C'est l'acronyme de Make Directory. On utilise cette commande pour créer un nouveau dossier à un chemin donné (dans la position actuelle si on spécifie juste le nom du nouveau dossier).

Examples :

  • mkdir my-new-folder
  • mkdir ~/Documents/atelier-webmaster
Copier un fichier/dossier
cp chemin-du-fichier-existant chemin-de-la-nouvelle-copie

On utilise cette commande pour créer une copie d'un fichier existant et la placer dans un autre endroit.

Examples :

  • cp documents documents-old
  • cp file.txt /home/backup/file.txt
Déplacer un fichier/dossier
mv chemin-du-fichier-actuel nouveau-chemin-du-fichier

On utilise cette commande d'une manière similaire à cp avec la différence que le fichier lui-même sera déplacé à un nouveau endroit.

Examples :

  • mv stic-1/ex12/ stic-2/ex12/
Détruire des fichiers/dossiers

Il existe des commandes également pour détruire des fichiers/dossiers mais on ne les verra pas ici. Ces commandes sont en effet irréversibles (i.e. les fichiers ne sont pas mis dans la corbeille).

3.4 Travailler avec un serveur linux distant

Pour se connecter en ligne de commande à un serveur distant, vous pouvez utiliser SSH. Voici la commande pour se connecter au serveur tecfaetu.unige.ch :

ssh tecfaetu.unige.ch -l votre-login-court

Une fois la commande lancée, le terminal va vous demander de confirmer la connexion. Vous pouvez accepter en saisissant yes.

À ce moment vous êtes connectés à la machine et vous pouvez donc bénéficier des commandes que nous avons vues plus haut dans la page.

3.4.1 Pour windows si ssh ne marche pas

Si la commande ssh ne marche pas sous Windows avec PowerShell, il faudra installer un autre logiciel :

Une fois installé

  1. Ouvrir le logiciel et saisir tecfaetu.unige.ch dans le Host Name.
  2. Laissez la porte 22 et cliquez en bas sur Open
  3. Acceptez un éventuel message d'avertissement
  4. Mettre votre login court et mot de passe
  5. Vous êtes déjà connecté en SSH à ce moment, pas besoin de relancer la commande

3.4.2 Activité

  1. Commencez par vous informer sur la position actuelle avec la commande pwd
  2. Depuis cette position, déplacez-vous à l'aide de la commande cd pour arriver à votre espace travaux, par exemple :
    /web/etu-maltt/volée/votre-login-court
    Pour ce faire, vous avez différentes stratégies, par exemple utiliser cd ../ pour remonter l'arborescence, etc.
  3. Utilisez la commande pwd pour contrôler que vous êtes au bon endroit !
  4. Listez tout le contenu du dossier avec la commande ls, qu'est-ce que vous voyez ?
  5. Créez un dossier qui s'appelle atelier-technique avec la commande mkdir atelier-technique
  6. Déplacez-vous dans ce nouveau dossier avec la commande cd atelier-technique
  7. Vous allez créer un fichier depuis la ligne de commande. Saisissez la commande touch test.txt
  8. Contrôlez que le fichier a bien été créé avec la commande ls. Son nom doit apparaître à l'écran
  9. Vous pouvez modifier directement le contenu du fichier avec un éditeur de texte disponible depuis la ligne de commande. Saisissez la commande nano test.txt
  10. Une interface très simple apparaît à l'écran qui vous permet d'écrire dans le fichier. Écrivez un texte, par exemple "Ce fichier a été créé depuis la ligne de commande". Utilisez les raccourcis clavier indiquées en bas pour enregistrer/écrire le contenu dans le fichier, en sachant que le caractère ^ équivaut à la touche Ctrl, donc ^X équivaut à Ctrl + X. Une fois le texte écrit dans le fichier, sortez de l'interface de l'éditeur de texte.
  11. Contrôlez que le contenu du fichier a été enregistré en saisissant la commande cat test.txt. Si vous avez suivi les étapes correctement, vous allez voir le message que vous avez écrit dans le fichier s'afficher dans la ligne de commande

Une fois que vous voulez vous déconnecter du serveur distant, vous avez deux options :

  1. Fermez tout simplement le logiciel (PowerShell, terminal, ...)
  2. Saisir la commande exit

4 Git/GitHub

Git (logiciel de gestion de version en local) et GitHub (extension online de Git) sont des outils qui sont très utilisés à présent et leur connaissance, au moins au niveau de base, peut être utile à plusieurs niveaux. En effet, ils ne sont pas utilisés exclusivement pour la programmation, mais également pour :

  • Maintenir un site web
  • Écrire/maintenir de la documentation online
  • Écrire des livres
  • Mettre à disposition du matériel d'un cours (online)
  • Mettre à disposition des données et des analyses d'un article de recherche
  • Créer une classe virtuelle avec des devoirs qui prévoient du codage
  • Découvrir des projets existants et créer des liens avec d'autres personnes actives dans les projets
  • ...

En plus, la participation dans des projets open-source disponibles sur GitHub ne se limite pas à l'écriture du code. Les projets recherchent souvent d'autres type de participation tels que :

  • La gestion du projet
  • Collecter/répondre aux "Issues" soulevées par les utilisateurs
  • Tester/débugger les projets
  • Corriger l'orthographe
  • ...

Pour plus d'informations voir :

4.1 Présentation

Git et GitHub dans un projet open-source
À retenir 
Git : système de version de fichiers en local

Vous pouvez travailler sur plusieurs versions de votre projets

  • Créer des "branches" pour tester des nouvelles fonctionnalités
  • Revenir à une version précédente si quelque chose ne marche pas correctement
  • ...
GitHub : plateforme de développement collaborative pour projets

Possibilités :

  • Vous pouvez travailler à plusieurs sur le même projet/repository
  • Les projets peuvent être publics (default) ou privés (versions payante)
  • Les projets peuvent être open-source ou pas
  • Attention à ne pas confondre public = open-source et privé = non open-source, c'est la licence qui détermine le type de projet
À savoir 
  • On peut utiliser Git sans GitHub, mais c'est difficile de pouvoir utiliser GitHub sans Git (quoi que possible si on travaille juste avec l'interface du site)
  • On peut utiliser Git avec d'autres services online, e.g. :
  • On peut utiliser Git et GitHub avec n'importe quel type de projet/fichier (pas que développement web)
À éviter 
  • Évitez de créer des projets/repository Git dans des dossiers locaux qui sont liés à un système de synchronisation de données (e.g. Dropbox, OneDrive, Google Drive)
  • Faites attention à ne pas publier des données sensibles. Par exemple si vous publiez par erreur un mot de passe, pensez à le modifier tout de suite, il ne suffit pas de le faire disparaître de GitHub (entretemps quelqu'un peut l'avoir vu ou il peut rester dans le cache, etc.) - voir Removing sensitive data from a repository

4.2 Activités prévues

Vous allez effectuer des activités sur le portail GitHub pour consolider certains concepts vus dans la présentation. Nous allons utiliser seulement GitHub, car l'utilisation de Git nécessite de l'installation sur votre ordinateur, ce qui nécessite un peu plus de temps. On verra Git de manière plus approfondie dans un prochain atelier.

4.2.1 Créer un compte GitHub

Si vous n'avez pas encore un account GitHub ou vous préférez en utiliser un différent par rapport à celui que vous avez déjà, il faudra créer un nouvea compte.

  1. Pointez vers le site https://github.com/
  2. Créez un nouveau compte.
    • Vous pouvez utiliser le username que vous voulez, sans nécessité qu'il soit reconnaissable
    • Si vous comptez utiliser GitHub par la suite, utilisez votre email personnel plutôt que l'email étudiant UNIGE

4.2.2 Création d'un projet sur GitHub

Vous allez suivre un tutoriel du site GitHub qui vous permet de créer un dépôt sur qui simule un projet public/open-source. Cela permet de voir :

  • Utilisation du site GitHub.com
  • L création d'un dépôt avec le choix d'une licence et un fichier d'information README
  • La notion de commit
  • La notion de branch
  • La notion de pull request

Pointez vers le tutoriel et suivez-le étape par étape :

Une fois terminé, répondez à la discussion dans le forum Moodle du cours STIC I en ajoutant le lien à votre dépôt.

4.2.3 Participer à un projet déjà existant

Si vous avez terminé le premier tutoriel, vous pouvez enchaîner avec la participation à un projet déjà existant. Petit hands-on sur comment on peut participer/contribuer à un projet déjà existant. En bref :

Pour plus d'infos voir

Suivre les étapes suivantes 
  1. Pointer à l'URL d'un repository/projet créé pour l'occasion https://github.com/MALTT-STIC/stic-webmaster-test
  2. Cliquez sur le bouton Fork en haut à gauche, cette opération vous permet de créer une copie du projet dans votre account
  3. Après le temps nécessaire, vous serez redirigés vers la page du fork du projet
    • Notez bien le nom du projet maintenant, il s'appelle votre-login-github/stic-webmaster-test
    • Notez également que au-dessous du nom du projet apparaît forked from MALTT-STIC/stic-webmaster-test
  4. Cliquez sur le bouton Create new file
  5. Dans l'éditeur en ligne qui s'ouvre :
    1. Ajoutez un nom du fichier du type votre-username-github.md
    2. Ajoutez du contenu, pas important quoi (si jamais c'est du contenu de type Markdown, une notation de marquage similaire au code wiki)
    3. Insérez une labellisation à votre commit
    4. Insérez une description pour votre commit (optionnelle)
    5. Laissez l'option Commit directly to the master branch cochée
    6. Cliquez sur Commit new file
  6. Vous êtes redirigés sur la page principale de votre projet où le nouveau fichier apparaît avec les autres fichiers. Cliquez maintenant sur New pull request
  7. Vous arrivez sur une page qui compare votre projet avec le projet original et vous informe que vous pouvez merge les deux sans conflits. Cliquez sur le bouton vert Create pull request
    Créer une "Pull request" au projet d'origine
    1. Encore une fois, choisissez une labellisation qui définit votre changement
    2. Ajoutez également une explication qui permette aux propriétaires du projet originale de savoir pourquoi vous proposez ce changement
    3. Cliquez à nouveau sur le bouton vert Create pull request
      Envoyer la pull request avec une explication pour les propriétaires du projet original
  8. Votre requête sera envoyée aux propriétaires du projet original qui pourront décider si l'accepter (et l'intégrer donc dans le projet) ou pas

4.3 Optionnel : Installation des logiciels

Si vous comptez utiliser Git/GitHub concrètement, il vous faudra installer les logiciels sur votre ordinateur.

4.3.1 Git

  1. Installez le logiciel git depuis le site officiel : https://git-scm.com/
  2. Il faudra configurer Git à travers la ligne de commande
    • Attention : utilisez le nom d'utilisateur et l'adresse email que vous avez utilisé pour créer votre account GitHub
Nom d'utilisateur
git config --global user.name "votre username GitHub"
Email
git config --global user.email votre-email-account-github@domain.com

Ces configurations vont permettre par la suite de reconnaître vos contributions, par exemple dans un projet commun.

4.3.2 Optionnel : Git dans éditeur de texte

Il y a la possibilité d'intégrer git directement dans des éditeurs de texte, par exemple :

4.3.3 GitHub Desktop

  1. Installez GitHub Desktop https://desktop.github.com/

Documentation logiciel : https://help.github.com/desktop/guides/

4.3.4 Pour aller plus loin

Il existe beaucoup de commandes qui vous permettent de travailler sur différentes versions de votre projet en local, comparer les différences, faire un merge entre deux branches, etc :

  • git init
  • git add [params]
  • git commit [params]
  • git branch [params]
  • git checkout [params]
  • ...

Pour plus d'infos voir Git - Reference sur le site officiel de Git

5 Ressources

5.1 Ligne de commande

5.2 Git/GitHub

5.3 GitHub Education & Classroom

5.4 Open Source