5. TP-0

Travaux pratiques - Configuration des environnements de travail

5. Travaux pratiques - TP-0

1.1 - Compléter le billet d'entrée (OBLIGATOIRE)

1.2 - Organiser le poste de travail

Principe : développer le Web sur le disque dur de l'ordinateur (PAS dans le nuage)

Sur Mac :

  • Créer à la racine du dossier de l'utilisateur (icône de maison), un dossier Sites
  • Ce dossier se retrouvera donc au même niveau que les dossiers Documents et Images

Sur Windows :

  • Faire de même mais placer ce dossier dans Documents

Créer ensuite un dossier integration2 (pas d'accent sur le é) dans le dossier Sites.

Les dossiers des exercices, travaux pratiques et projets seront placés dans le dossier integration2.

1.3 - Restructurer votre répertoire sur Timunix3

Pour cette étape, vous allez utiliser FileZilla.

Faire une connexion SFTP au serveur Timunix3

Pour faire la connexion FTP ou SFTP au serveur Timunix3, vous aurez besoin de votre nom d'utilisateur et de votre mot de passe.

Peut-être avez-vous oublié l'un ou l'autre ? Le nom d'utilisateur sur Timunix3 n'est pas votre matricule !

La nomenclature des comptes utilisateurs est NomsDeFamilleinitialesPrenoms.

Vérifier le nom d'utilisateur en le testant dans un navigateur comme ceci :

http://timunix3.csfoy.ca/~NomUtilisateur/

Vérifier le mot de passe

Utiliser Filezilla pour vérifier votre mot de passe.

  1. Commencer par aller chercher le Gestionnaire de sites dans le menu Fichier (Ctrl + S)
  2. Choisir le protocole SFTP
  3. Entrer le nom de l'hôte : timunix3.csfoy.ca

Attention

C'est maximum 2 essais pour le mot de passe avant de se faire barrer pour 24h !

Adapter la structure de répertoire personnel sur timunix3

Commencer par créer des dossiers pour les cours integration1, integration2 et pwem1.

Noter l'importance d'avoir un nom de dossier qui :

  • Ne commence pas par une majuscule
  • Ne possède ni accents, ni espaces, ni caractères spéciaux

Ajuster ou compléter la mise en ligne du TP long de Intégration I

Une fois les dossiers créés, si vous aviez déposé votre projet final du cours Intégration I, vous pourrez sélectionner tous les fichiers et dossiers de ce projet dans Filezilla et les déplacer vers le dossier integration1 ou vers un sous-dossier du dossier integration1 si vous aviez mis plus d'un projet en ligne à la session d'automne.

Le projet doit être accessible à l'URL :

http://timunix3.csfoy.ca/~utilisateur/integration1/

Si vous n'aviez pas mis en ligne le projet, faites-le maintenant.

Au besoin, demandez de l'aide au professeur ou à un collègue pour compléter la mise en ligne.

Vérifier la mise en ligne :

  • Est-ce que les pages HTML s'affichent correctement ?
  • Faites afficher l'inspecteur de code (clic droit sur la page et « afficher l'inspecteur » ou encore CMD+ALT+I sur mac ou CTRL+SHIFT+I sur Windows)
  • Puis, la console JavaScript dans le navigateur pour voir s'il y a des erreurs 404

1.4 - Réviser les commandes Unix et comment utiliser le terminal

Faire une connexion SSH pour supprimer le dossier « Travail » qui se trouve au même niveau que le dossier public_html.

Connexion SSH sur Mac

Cette vidéo explique comment faire la connexion SSH dans le terminal sur MAC et fait un rappel des principales commandes Unix.

Connexion SSH sur Windows 10

Pour se connecter en SSH depuis l'invite de commandes :

  1. Sur votre clavier, appuyez sur la touche Windows + R
  2. Ensuite saisissez cmd puis OK
  3. Utilisez la syntaxe suivante :
ssh <user>@<host>

Ainsi pour se connecter à une machine distante timunix3 avec l'utilisateur joeBine :

ssh joeBine@timunix3.csfoy.ca
  1. Puis ajoutez le serveur SSH dans la liste, en appuyant sur Y (pour Yes)
  2. Saisissez le mot de passe du compte utilisateur distant
  3. La session SSH s'établit et vous avez la main à distance sur votre machine

Commandes Unix de base :

Commande Explication
cd <chemin> (Change Directory) : Se déplacer d'un répertoire à l'autre
cd .. Reculer d'un répertoire
pwd Affiche votre chemin en partant de la racine (/)
ls (LiSt) : Lister le nom des fichiers et des sous-répertoires
ls -l (LiSt -au format long) : Lister avec les informations au long
exit Terminer une session sur un serveur (toujours faire exit avant de fermer votre session SSH)

En savoir plus : Consulter les notes du cours de Profession intégrateur dans le document « notes-annexe-professionIntegrateur.pdf »

1.5 - Inscription à GitHub (si ce n'est pas déjà fait)

Voir la section GitHub pour les instructions détaillées.

1.6 - Installer des extensions à VSCode et à Chrome

Dans VSCode, installer ou vérifier l'installation des extensions suivantes :

  • French Language Pack for Visual Studio
  • Live Preview
  • Live Server
  • GitLens, Git supercharged
  • Markdown Preview Enhanced
  • Prettier - Code formatter
  • ESLint
  • Live Share

Dans le navigateur Chrome, assurez-vous d'avoir installé :

1.7 - Pour préparer le prochain cours, réviser les bases HTML

1.8 - Regarder cette vidéo d'introduction de GitHub