« STIC:STIC I - Atelier technique 2 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(IMPORTANT : remplacé avec ligne de commande / Git et GitHub)
Ligne 2 : Ligne 2 :
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>


== Programme ==
== Ligne de commande ==


Au programme (peut changer) :
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)


* Fonctionnement d'une page web dynamique côté serveur
=== Logiciel ===
* Installation serveur web en local avec Ampps
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 !
* Installation d'un ou plusieurs portails en local (e.g. Wordpress, MediaWiki, Moodle, ...)
* Démo Node.js (niveau intermédiaire/avancé)


== Fonctionnement d'une page web dynamic (server-side) ==
Logiciels :


Lorsqu'on parle d'une page web dynamique on peut se référer à deux types de dynamisme :
* Pour Windows utiliser [https://fr.wikipedia.org/wiki/Windows_PowerShell Windows PowerShell] ('''pas le prompt command''')
* Pour Mac utiliser le [http://www.osxfacile.com/terminal.html Terminal]
* Pour Linux utiliser l’une des lignes de commandes disponibles selon la version.


# Côté-serveur : la page est générée de manière dynamique, c'est-à-dire que son contenu peut varier de requête en requête selon certains conditions (e.g. des paramètres dans l'URL, le fait qu'un utilisateur ait le droit ou pas de voir la page, etc.)
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.
# Côté-client : la page présente certains fonctionnalités interactives une fois qu'elle est à disposition de l'utilisateur dans le navigateur web (e.g. drag&drop, slideshow, ...)


Par conséquent, on peut déterminer une sorte de tableau à double entrée qui catégorise les pages selon qu'elles soient statique ou dynamique sur les deux niveaux. En d'autres termes, on peut avoir des pages qui sont :
=== Position actuelle ===


* statiques au niveau serveur et client (e.g. vos rapports STIC)
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.
* statiques au niveau serveur mais dynamique au niveau client (e.g. vos exercices STIC I)
* dynamiques au niveau serveur mais (plutôt) statiques au niveau client (e.g. les pages de ce Wiki)
* dynamiques au niveau serveur et client (e.g. Google docs, jeux online, etc.)


Voici un tableau récapitulatif :
[[Fichier:Node.js command position actuelle.png|none|thumb|600x600px|Toujours bien vérifier la position actuelle (i.e. le path) lorsqu'on utilise la ligne de commande. ]]


[[Fichier:Webmaster statique vs dynamique.png|800px|vignette|néant|Comparaison pages statiques vs. dynamiques]]
Pour récupérer votre position actuelle si elle n'est pas visible, utilisez :


Pour éviter de faire confusion entre le type de dynamisme, au niveau client on parle souvent plutôt de pages web interactives. L'interactivité est déterminé par des scripts JavaScript qui sont téléchargés avec la page web et qui sont exécuté à l'intérieur du navigateur de l'utilisateur. Le dynamisme côté serveur, par contre, se produit avant que la page soit téléchargée par l'utilisateur et concerne donc comment la page est générée.
pwd


Voici un schéma qui montre le fonctionnement d'un serveur web avec une ressource (page) web statique ou dynamique :
C'est l'acronyme de "Print Working Directory".


[[Fichier:Express.js-normal-web-server.png|800px|vignette|néant|Fonctionnement d'une page web dynamic au niveau serveur]]
=== Commandes principales ===


La différence concerne le fait qu'une page web dynamique nécessite d'un langage de programmation qui est interprété par le serveur et qui sert pour générer du contenu de manière dynamique, par exemple à travers une base de données.
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 :


=== Anatomie d'une application web ===
;Changer de dossier


Une application web dynamique se compose généralement de trois éléments qui sont en lien l'un avec l'autre :
cd


# L'interface (l'application telle qu'elle est disponible aux utilisateur à travers le navigateur)
C'est l'acronyme de Change Directory. On utilise cette commande avec des chemins absolus ou relatifs à la position actuelle.
# Les fichiers
# La base de données


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


[[Fichier:AtelierWebmaster web application components.png|800px|vignette|néant|Les trois composantes d'une application web dynamique]]
* <code>./</code> fait référence au dossier actuel
** '''attention''' à ne pas confondre avec <code>/</code> (sans point) qui fait référence à la '''racine de votre système''' où se trouvent des fichiers importants !
* <code>../</code> fait référence à un niveau supérieur
* <code>../../</code> fait référence à deux niveaux supérieurs
* etc.
* <code>~</code> fait référence au dossier utilisateur (dont la position peut varier selon le système d'exploitation).


== Installation serveur web en local avec Ampps ==
Examples :


Lorsqu'on accède à une application web, elle est normalement hébergée sur un serveur que l'on qualifie de '''serveur distant'''. Par contre, en phase de développement, on utilise souvent un '''serveur local''' qui permet de simuler, à l'intérieur de la même machine (e.g. l'ordinateur du développeur), le fonctionnement de l'application. Une fois l'application développée, elle sera téléversée enfin sur un serveur distant pour qu'elle puisse être utilisée. Le schéma suivant illustre ce principe :
* <code>cd documents</code>
* <code>cd ../stic-1/ex1/</code>
* <code>cd ~/Documents</code>
* <code>cd /home</code>


[[Fichier:Distant vs Local server.png|800px|vignette|néant|Serveur distant vs. serveur local]]
Hint:  


Un serveur web se compose de plusieurs éléments et les installer, que ce soit en local ou sur un serveur distant, peut prendre beaucoup de temps. Pour cette raison on fait souvent appelle à :
* 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 <code>Ctrl + l</code> (comme lausanne) et tapez <code>powershell</code> dans la barre de l'adresse.  


* Un hébergeur externe pour une application sur un serveur distant.
; Lister les fichiers
* Un logiciel qui regroupe tous les éléments nécessaires dans le cas d'un serveur local.


=== Présentation de ampps ===
ls


Pour créer/tester des applications web côté-serveur, nous allons d'abord installer [http://www.ampps.com/ ampps], qui est un logiciel libre qui facilite l'installation de plus de 400 applications web parmi lesquelles :
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 :


* Wordpress
* Un chemin absolu ou relatif, e.g. <code>ls /home</code> va lister tous les éléments contenu dans le dossier home qui se trouve à la racine du système
* Moodle
* Un critère de selection, e.g. <code>ls *.png</code> va lister tous les fichiers qui terminent avec .png
* MediaWiki
* Chamilo
* Etc.


De plus, ampps installe et configure sur votre ordinateur :
; Créer un dossier


* Un serveur web de type Apache
mkdir nom-du-dossier
* Le langage de programmation côté-serveur PHP
* Une base de données de type MySQL


Le logiciel installe également d'autres éléments (Perl, MongoDB, etc.), mais ces trois sont les éléments le plus fréquemment utilisés, à présent (2016), dans des applications qui proposent les deux avantages suivants :
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).


# Elles sont considérées stables, car elles existent depuis plusieurs années et ont été mis à jour regulièrement
Examples :
# Elles disposent de zone d'administration et même parfois des scripts d'installation qui permettent de gérer une application avec des connaissances techniques limitées


Avant que ce type de logiciel étaient mis à disposition, pour obtenir un serveur web en local il fallait installer Apache, MySQL et PHP séparément, ainsi que les configurer selon le système d'exploitation. Ce passage était déjà très compliqué en soi, et en plus le résultat était souvent très différent par rapport à la configuration du serveur distant, sur lequel l'application était destinée en production.
* <code>mkdir my-new-folder</code>
* <code>mkdir ~/Documents/atelier-webmaster</code>


Grâce à des logiciels comme ampps, l'installation en local se fait de manière très simple et, en plus, la configuration de base est déjà prise en charge par le logiciel. De plus, il existe la possibilité de modifier facilement des paramètres par la suite (e.g. version de PHP, etc.)
; Copier un fichier/dossier


=== Installation du logiciel ===
cp chemin-du-fichier-existant chemin-de-la-nouvelle-copie


Pour installer ampps il faut tout simplement :
On utilise cette commande pour créer une copie d'un fichier existant et la placer dans un autre endroit.


# Télécharger le fichier d'installation depuis la [http://www.ampps.com/downloads section download du site officiel]
Examples :
# Choisir la version adaptée à son propre système d'exploitation (Win, Mac ou Linux). Choisir la version '''avec installer''' facilite le processus.
# Lancer le fichier d'installation et suivre les instructions


Dans le wiki du site officiel il existe un [http://www.ampps.com/wiki/Install '''tutoriel''' sur les étapes d'installation], une vidéo est également disponible.
* <code>cp documents documents-old</code>
* <code>cp file.txt /home/backup/file.txt</code>


Une fois l'installation achevée, vous devez obtenir un panel de contrôle similaire à celui ci :
; Déplacer un fichier/dossier


[[Fichier:Ampps control panel.png|cadre|néant|Panel de contrôle de Ampps]]
mv chemin-du-fichier-actuel nouveau-chemin-du-fichier


Si tout a marché correctement, vous devez obtenir les messages suivants en bas de la fenêtre du panel :
On utilise cette commande d'une manière similaire à <code>cp</code> avec la différence que le fichier lui-même sera déplacé à un nouveau endroit.


Apache Started
Examples :
MySql Started


Si ce n'est pas le cas, essayez de cliquer sur les deux boutons Start sous Apache et MySQL.
* <code>mv stic-1/ex12/ stic-2/ex12/</code>


==== Potentiels problèmes avec le logiciel ====
; Détruire des fichiers/dossiers


Si vous n'arrivez pas à faire démarrer Apache et/ou MySQL, il peut y avoir un problème avec les portes de votre ordinateur, notamment avec le serveur Apache.
Il existe des commandes également pour détruire des fichiers/dossiers mais on les verra pas ici. Ces commandes sont en effet irreversibles (i.e. les fichiers ne sont pas mis dans la corbeille).


En effet, le serveur Apache marche (ou écoute) la porte :80 de votre ordinateur qui peut être utilisée également par d'autres processus (e.g. Skype). Dans ce cas, il faudra résoudre le conflit : vous pouvez tout simplement fermer l'application. S'il s'agit de Skype, veuillez faire attention de bien fermer l'application (Sorti de Skype) et pas seulement la fenêtre.
=== Travailler avec un serveur linux distant ===


=== Installation des applications web ===
Pour se connecter en ligne de commande à un serveur distant, vous pouvez utiliser <code>SSH</code>. Voici la commande pour se connecter au serveur <code>tecfaetu.unige.ch</code> :


Pour installer les applications web il faudra utiliser l'interface web. Pour y acceder, cliquer tout simplement sur l'icône "HOME" du panel de contrôle. Votre navigateur web s'ouvre et pointe sur la page :
ssh tecfaetu.unige.ch -l ''votre-login-court''


* http://localhost/ampps
Une fois lancée la commande, le terminal va vous demander de confirmer la connexion. Vous pouvez accepter en saisissant <code>yes</code>.


La première fois que vous accédez à l'interface web, ampps vous demande si vous voulez sécurisez l'accès. Cette étape n'est pas fondamentale si vous ne partagez pas ampps dans un réseau local ou dans le web.  
À 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.


La page d'accueil de l'interface web se présente ainsi :
==== Pour windows si ssh ne marche pas ====


[[Fichier:Ampps interface web home.png|800px|vignette|néant|Homepage de l'interface web de ampps]]
Si la commande <code>ssh</code> ne marche pas sous Windows avec PowerShell, il faudra installer un autre logiciel :


L'interface présente :
* [https://putty.org/ Putty]


* Sur la gauche une liste de catégories parmi lesquelles vous pouvez trouver les applications à installer
Une fois installé
* Sur la droite des liens d'administration (configuration, bases de données, etc.)
# Ouvrir le logiciel et saisir <code>tecfaetu.unige.ch</code> dans le Host Name.
# Laissez la porte 22 et cliquez en bas sur '''Open'''
# Acceptez un éventuel message d'avertissement
# Mettre votre login court et mot de passe
# Vous êtes déjà connecté en SSH à ce moment, pas besoin de relancer la commande


Une fois choisi l'application qui nous intéresse parmi les choix disponibles, la page d'installation de l'application nous permet déjà de faire les configurations nécessaires pour installer l'application. Les paramètres de configuration dépendent de l'application choisie. Ici de suite vous avez un aperçu de la page d'installation de Moodle :
==== Activité ====


[[Fichier:Ampps Moodle install.png|800px|vignette|néant|Page d'installation de l'application Moodle via Ampps]]
# Commencez par vous informer sur la position actuelle avec la commande <code>pwd</code>
# Depuis cette position, déplacez-vous à l'aide de la commande <code>cd</code> pour arriver à votre espace travaux, par exemple :
#: <code>/web/etu-maltt/''volée''/''votre-login-court''</code>
#: Pour ce faire, vous avez différentes stratégies, par exemple utiliser <code>cd ../</code> pour remonter l'arborescence, etc.
# Utilisez la commande <code>pwd</code> pour contrôler que vous êtes au bon endroit !
# Listez tout le contenu du dossier avec la commande <code>ls</code>, qu'est-ce que vous voyez ?
# Créez un dossier qui s'appelle <code>atelier-technique</code> avec la commande <code>mkdir</code>
# '''Sur votre ordinateur''', créez un fichier qui s'appelle '''test.txt''', mettez un bref message à l'intérieur
# Téléversez ce fichier avec Cyberduck ou équivalent dans le dossier <code>atelier-technique</code> que vous venez de créer
# Déplacez-vous dans ce dossier avec la ligne de commande et contrôlez avec <code>ls</code> que le fichier soit au bon endroit


Les paramètres qui sont plus au moins commun à tout type d'application concerne :
Une fois que vous voulez vous déconnecter du serveur distant, vous avez deux options :


* La version de l'application (e.g. 3.1.2, 2.7.1, etc.)
# Fermez tout simplement le logiciel (PowerShell, terminal, ...)
* Le dossier dans lequel installer l'application. Ce paramètre est important parce qu'il détermine également l'URL pour accéder à l'application. Il faut choisir un nom de dossier qui n'existe pas dans votre système, et le dossier choisi représentera le path à ajouter après http://localhost/.
# Saisir la commande <code>exit</code>
** E.g. si vous saisissez <code>my-personal-moodle</code>, votre application moodle sera accessible via http://localhost/my-personal-moodle
** De cette manière vous pouvez installer plusieurs instances de la même application
* Le préfixe des tables dans la base de données (et en option avancée le nom de la base des données)


Certaines application, comme par exemple Moodle, vous permettent déjà en phase d'installation de choisir des paramètres tels que :
== Git/GitHub ==


* Le titre de votre site
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 :
* La description
 
* Le username, password, email, etc. de l'account administrateur
* Maintenir un site web
** voir [https://pages.github.com/ GitHub Pages]
* É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
** Voir par exemple [http://happygitwithr.com/ Happy Git and GitHub for the useR]
* Créer une classe virtuelle avec des devoirs qui prévoient du codage
** voir [https://education.github.com/ GitHub Education]
** voir [https://classroom.github.com/ GitHub Classroom]
* Découvrir des projets existants et créer des liens avec d'autres personnes actives dans les projets
** voir [https://help.github.com/articles/be-social/ Be Social]
** voir [https://github.community/ GitHub Community Forum]
* ...
 
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
* ...
* ...


Une fois déterminé les paramètres souhaitez, cliquez tout simplement sur le bouton '''Install''' en bas de la page. Le processus d'installation démarre et il exécute automatiquement les étapes suivantes :
=== Présentation ===
 
[[Fichier:Git et GitHub dans un projet open-source.png|800px|vignette|néant|Git et GitHub dans un projet open-source]]
 
; À retenir :
 
{{ bloc important | '''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
* ...
 
{{ bloc important | '''GitHub''' : plateform 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 travail juste avec l'interface du site)
* On peut utiliser Git avec d'autres services online, e.g. :
** {{ Goblock | [https://gitlab.unige.ch/ GitLab UNIGE] }}
** [https://bitbucket.org/ BitBucket]
** [https://www.visualstudio.com/fr/team-services/ Visual Studio Team Services]
* 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 de 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 la cache, etc.) - voir  [https://help.github.com/articles/removing-sensitive-data-from-a-repository/ Removing sensitive data from a repository]
 
=== Installation des logiciels ===
 
==== Git ====
 
# Installez le logiciel git depuis le site officiel : https://git-scm.com/
#* Suivre les instructions [[Git_et_Github#Installer_Git]]
# 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.
 
==== Optionnel : Git dans éditeur de texte ====
 
Il y a la possibilité d'ingérer git directement dans des éditeurs de texte, par exemple :
 
* Installer [https://github.com/zaggino/brackets-git extension pour utiliser Git] directement dans [[Brackets]] ('''ça marche mais pas idéal''')
* Installer [[Visual studio code]] qui a déjà Git intégré ('''préférable''' si vous comptez utiliser sérieusement Git)
** [https://code.visualstudio.com/Download Lien direct pour le download]
 
==== GitHub ====
 
# Créer un account sur le site https://github.com/ si pas fait lors de l'atelier [[MINIT]]
 
==== GitHub Desktop ====
 
# Installez GitHub Desktop https://desktop.github.com/
 
Documentation logiciel : https://help.github.com/desktop/guides/
 
=== Activités prévues ===
 
==== Création d'un projet sur GitHub et le cloner avec GitHub Desktop ====
 
Créer un répositoire sur GitHub.com qui simule un projet public/open-source, cela permet de voir :
 
* Utilisation du site [https://github.com GitHub.com]
* Utilisation de GitHub pour Desktop
 
Pour plus d'info voir


* Télécharger les fichiers de la version de l'application choisie
* {{Goblock|[https://guides.github.com/activities/hello-world/ Hello World example sur GitHub.com]}}
* Copier/dézipper les fichiers dans le dossier choisi
* Configuration des fichiers de système avec les paramètres nécessaires (base de donné, etc.)


L'avantage d'utiliser un système de type Ampps concerne également le fait qu'il peut vous avertir s'il y a des problèmes en phase d'installation.
; Première étape - Créer le projet sur GitHub.com
Suivre les étapes suivantes :


==== Problèmes avec l'installation d'une application ====
# Sur le site GitHub.com, lorsque vous avez fait le login, cliquez sur le <code>+</code> et choisissez <code>New repository</code>
# Saisissez les données requises (à vous de choisir des informations saillantes pour un potentiel projet open-source) en faisant attention à :
#* Cochez l'option '''Initialize this repository with a README'''
#* Choisir une option dans le menu déroulant '''Add a license''' (voir [https://choosealicense.com/ une page qui vous aide à choisir], si non vous pouvez mettre MIT pour cet exemple)
#*: [[Fichier:GitHub création d'un projet avec README et Licence.png|600px|vignette|néant|Création d'un projet avec README et Licence]]
# Cliquez sur <code>Create repository</code>, vous êtes redirigés sur la page de votre projet qui doit ressembler à celle-ci :
#: [[Fichier:GitHub page d'un projet créé.png|600px|vignette|néant|Page d'un projet créé à travers le site GitHub.com]]


S'il y un ou plusieurs problèmes en phase d'installation, Ampps arrête l’exécution et affiche les problèmes à l'écran. Vous trouvez ici de suite, par exemple, une erreur dans l'installation de Moodle qui concerne la version de PHP disponible :
Si vous cliquez sur le fichier LICENSE vous pouvez voir les détails des droits que vous avez spécifié pour votre projets.


[[Fichier:Ampps Moodle install error.png|800px|vignette|néant|Erreur dans l'installation de Moodle]]
; Deuxième étape - Cloner le projet sur votre ordinateur avec GitHub Desktop
Suivre les étapes suivantes :


Il s'agit d'une erreur assez commune qui peut être corrigé à travers le panel de contrôle de Ampps :
# Ouvrez le logiciel GitHub Desktop
# Si vous l'ouvrez pour la première fois, il vous faudra vous loguer et confirmer les informations pour Git (Nom et Email)
# Ensuite cliquez sur le bouton <code>Clone a repository</code> ou faites <code>File > Clone repository...</code> si vous ne l'avez pas
# Choisissez le projet que vous venez de créer, décidez à quel endroit le mettre sur votre ordinateur et cliquez sur <code>Clone</code>
#: [[Fichier:GitHub Desktop cloner un projet en local.png|600px|vignette|néant|Cloner un projet en local avec GitHub Desktop]]
# Ouvrez le dossier en local avec votre Gestionnaire de fichiers, vous devez voir :
#* Un dossier caché qui s'appelle .git (si vous ne le voyez pas cherchez sur internet comment afficher les fichiers cachés dans votre ordinateur)
#* Le fichier LICENSE
#* Le fichier README.md
# Créez un fichier quelconque à l'intérieur de ce dossier (par exemple un fichier qui s'appelle first-contribution.txt)
# Revenez dans GitHub Desktop, le fichier que vous venez d'ajouter doit figurer dans l'onglet '''Changes'''. Il faudra à ce moment faire un '''commit''' pour incorporer ce nouveau fichier dans votre projet
## Insérez un ''summary'' de votre commit, par exemple ''Added my first file''
## Insérez une description (optionnelle) qui permet de mieux comprendre en quoi consiste le changement
## Cliquez sur <code>Commit to master</code>
##: [[Fichier:GitHub Desktop commit.png|600px|vignette|néant|Commit avec GitHub Desktop]]
# Enfin, cliquez sur <code>Push origin</code> pour envoyer les changements à GitHub
#: [[Fichier:GitHub Desktop push origin.png|600px|vignette|néant|Push origin permet d'envoyer les changements au repository de GitHub]]
# Contrôlez sur la page du projet sur GitHub.com que le nouveau fichier apparaît dans le projet


# Menu PHP > Change PHP Version
==== Participer à un projet déjà existant ====
# Sélectionnez la version souhaitée


Ampps fait un restart automatique pour prendre en compte les changements, mais parfois il est plus sûr de rédemarrer une deuxième fois Apche et MySQL à travers les boutons du Control Center.
Petit hands-on sur comment on peut participer/contribuer à un projet déjà existant. En bref :


À ce point vous pouvez reprendre l'installation, le message d'erreur ne s'affichera plus.
* Fork du projet https://github.com/MALTT-STIC/stic-webmaster-test
* Créer un fichier VotreLoginCourt.md || VotreLoginGitHub.md dans la racine du projet
* Envoyer une pull request au projet initial pour incorporer le changement


==== Liste d'erreurs communs ====
Pour plus d'infos voir
 
* {{Goblock|[https://guides.github.com/activities/forking/ Forking projects sur GitHub.com]}}
 
; Suivre les étapes suivantes :
 
# Pointer à l'URL d'un repository/projet créé pour l'occasion https://github.com/MALTT-STIC/stic-webmaster-test
# Cliquez sur le bouton '''Fork''' en haut à gauche, cette opération vous permet de '''créer une copie du projet dans votre account'''
# 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'''
# Cliquez sur le bouton <code>Create new file</code>
# Dans l'éditeur en ligne qui s'ouvre :
## Ajoutez un nom du fichier du type '''''votre-username-github''.md'''
## Ajoutez du contenu, pas important quoi (si jamais c'est du contenu de type [https://guides.github.com/features/mastering-markdown/ Markdown], une notation de marquage similaire au code wiki)
## Insérez une labellisation à votre commit
## Insérez une description pour votre commit (optionnelle)
## Laissez l'option Commit directly to the master branch cochée
## Cliquez sur <code>Commit new file</code>
# Vous êtes redirigés sur la page principale de votre projet où le nouveau fichier apparaît avec les autres fichiers. Cliquez maintenant sur <code>New pull request</code>
# 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 <code>Create pull request</code>
#: [[Fichier:GitHub create pull request.png|600px|vignette|néant|Créer une "Pull request" au projet d'origine]]
## Encore une fois, choisissez une labellisation qui définit votre changement
## Ajoutez également une explication qui permette aux propriétaires du projet originale de savoir pourquoi vous proposez ce changement
## Cliquez à nouveau sur le bouton vert <code>Create pull request</code>
##: [[Fichier:GitHub envoyer la pull request.png|600px|vignette|néant|Envoyer la pull request avec une explication pour les propriétaires du projet original]]
# 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
 
==== Pour aller plus loin ====
 
Il existe beaucoup de commandes qui vous permettent de travailler à 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]
* ...


Parmi les erreurs les plus fréquents on trouve :
Pour plus d'infos voir [https://git-scm.com/docs Git - Reference sur le site officiel de Git]


* La version de PHP (voir plus haut)
== Ressources ==
* L'activation d'extensions de PHP (qui peuvent être activés toujours à travers le panel de contrôle)
* L'activation de modules Apache requis


=== Configuration des applications web installées ===
=== Ligne de commande ===


Une fois votre installation achevée, selon le type d'application que vous avez choisie, vous devez/pouvez configurer ultérieurement votre application. Cela peut se faire généralement de deux manières :
* [[Commandes Unix]]
* [[Commandes Windows]]
* [[Commandes Mac]]


# À travers une zone d'administration qui est propre à l'application et qu'il ne faut pas confondre avec l'interface web de Ampps. Par exemple, Moodle dispose de sa propre zone d'administration, c'est pour cela que pendant le processus d'installation vous avez dû choisir un account admin.
=== Git/GitHub ===
# À travers la modification manuelle de fichiers qui sont disponibles dans le dossier où vous avez installé votre application. Ces fichiers sont souvent des fichiers '''.php''' que vous pouvez ouvrir avec un éditeur de texte (e.g. [[Brackets]])
#* Ces fichiers se trouvent généralement dans le dossier <code>www</code> qui se trouve à l'intérieur du dossier où vous avez installé Ampps et que vous pouvez voir dans le panel de contrôle (voir image plus haut dans la page)


== Demo Node.js ==
* [[Git et Github]]
* [https://guides.github.com/ Guides sur le site officiel GitHub]
* [https://help.github.com/articles/github-glossary/ Glossaire sur le site officiel GitHub]
* [https://www.youtube.com/githubguides GitHub Training & Guides sur YouTube]
* [https://pages.github.com/ GitHub Pages]
* [https://git-scm.com/book/fr/v2 Pro Git] version online (traduite en français) du livre
* [http://swcarpentry.github.io/git-novice/ Tutoriel sur Software-Carpentery] pour novices


S'il reste du temps et s'il y a des intéressés ('''niveau intermédiaire/avancé''') :
=== GitHub Education & Classroom ===


* Installation [[Node.js]] depuis le [https://nodejs.org/fr/ site officiel]
* [https://education.github.com/ GitHub Education] : utilisation de GitHub dans l'éducation
* [[Node.js#Avertissement_de_s.C3.A9curit.C3.A9|'''Avertissement de sécurité''']]
** Voir notamment [https://classroom.github.com GitHub Classroom] pour créer des "assignments" à travers GitHub
* Démonstration Node REPL vs. Console du Browser
* [https://github.com/mafritz/stic-1-node-essentials Fichiers pour Workshop]


==Liens==
=== Open Source ===


* [http://www.ampps.com/ Site officiel ampps]
* [https://opensource.org/ Open Source Initiative]
* [http://www.ampps.com/wiki/Main_Page Documentation ampps]
* [https://choosealicense.com/ Choose an open source licence] (synthèse et suggestions des licences proposées par GitHub)
* [https://en.wikipedia.org/wiki/LAMP_(software_bundle) Architecture LAMP sur Wikipedia]
* [https://www.youtube.com/watch?v=0DL-MeAvWz4 Tutoriel vidéo sur phpMyAdmin] ('''Attention''', l'accès à phpMyAdmin dans le tutoriel est différent de Ampps)

Version du 8 décembre 2019 à 18:42

Cette page fait partie des cours STIC I et STIC II

STIC

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)

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 Windows PowerShell (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.

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".

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 les verra pas ici. Ces commandes sont en effet irreversibles (i.e. les fichiers ne sont pas mis dans la corbeille).

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 lancée la commande, 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.

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

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
  6. Sur votre ordinateur, créez un fichier qui s'appelle test.txt, mettez un bref message à l'intérieur
  7. Téléversez ce fichier avec Cyberduck ou équivalent dans le dossier atelier-technique que vous venez de créer
  8. Déplacez-vous dans ce dossier avec la ligne de commande et contrôlez avec ls que le fichier soit au bon endroit

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

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
  • ...

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 : plateform 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 travail 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 de 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 la cache, etc.) - voir Removing sensitive data from a repository

Installation des logiciels

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.

Optionnel : Git dans éditeur de texte

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

GitHub

  1. Créer un account sur le site https://github.com/ si pas fait lors de l'atelier MINIT

GitHub Desktop

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

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

Activités prévues

Création d'un projet sur GitHub et le cloner avec GitHub Desktop

Créer un répositoire sur GitHub.com qui simule un projet public/open-source, cela permet de voir :

  • Utilisation du site GitHub.com
  • Utilisation de GitHub pour Desktop

Pour plus d'info voir

Première étape - Créer le projet sur GitHub.com

Suivre les étapes suivantes :

  1. Sur le site GitHub.com, lorsque vous avez fait le login, cliquez sur le + et choisissez New repository
  2. Saisissez les données requises (à vous de choisir des informations saillantes pour un potentiel projet open-source) en faisant attention à :
    • Cochez l'option Initialize this repository with a README
    • Choisir une option dans le menu déroulant Add a license (voir une page qui vous aide à choisir, si non vous pouvez mettre MIT pour cet exemple)
      Création d'un projet avec README et Licence
  3. Cliquez sur Create repository, vous êtes redirigés sur la page de votre projet qui doit ressembler à celle-ci :
    Page d'un projet créé à travers le site GitHub.com

Si vous cliquez sur le fichier LICENSE vous pouvez voir les détails des droits que vous avez spécifié pour votre projets.

Deuxième étape - Cloner le projet sur votre ordinateur avec GitHub Desktop

Suivre les étapes suivantes :

  1. Ouvrez le logiciel GitHub Desktop
  2. Si vous l'ouvrez pour la première fois, il vous faudra vous loguer et confirmer les informations pour Git (Nom et Email)
  3. Ensuite cliquez sur le bouton Clone a repository ou faites File > Clone repository... si vous ne l'avez pas
  4. Choisissez le projet que vous venez de créer, décidez à quel endroit le mettre sur votre ordinateur et cliquez sur Clone
    Cloner un projet en local avec GitHub Desktop
  5. Ouvrez le dossier en local avec votre Gestionnaire de fichiers, vous devez voir :
    • Un dossier caché qui s'appelle .git (si vous ne le voyez pas cherchez sur internet comment afficher les fichiers cachés dans votre ordinateur)
    • Le fichier LICENSE
    • Le fichier README.md
  6. Créez un fichier quelconque à l'intérieur de ce dossier (par exemple un fichier qui s'appelle first-contribution.txt)
  7. Revenez dans GitHub Desktop, le fichier que vous venez d'ajouter doit figurer dans l'onglet Changes. Il faudra à ce moment faire un commit pour incorporer ce nouveau fichier dans votre projet
    1. Insérez un summary de votre commit, par exemple Added my first file
    2. Insérez une description (optionnelle) qui permet de mieux comprendre en quoi consiste le changement
    3. Cliquez sur Commit to master
      Commit avec GitHub Desktop
  8. Enfin, cliquez sur Push origin pour envoyer les changements à GitHub
    Push origin permet d'envoyer les changements au repository de GitHub
  9. Contrôlez sur la page du projet sur GitHub.com que le nouveau fichier apparaît dans le projet

Participer à 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

Pour aller plus loin

Il existe beaucoup de commandes qui vous permettent de travailler à 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

Ressources

Ligne de commande

Git/GitHub

GitHub Education & Classroom

Open Source

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_Atelier_technique_2&oldid=119318 »