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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 6 : Ligne 6 :
;Partie commune :
;Partie commune :


* 09:00 - 09:30 -> Présentation du [[STIC:STIC II - projet webmaster | Projet Webmaster]]
* 09:00 - 09:30 -> Présentation des différents types d’hébergement possible
* 09:30 - 10:30 -> Configuration et installation d'un portail sur l'espace projets TECFA + discussion sur hébergement (options, sécurité, ...) - s'il reste du temps...
* 09:30 - 10:30 -> Configuration et installation d'un portail sur l'espace projets TECFA
 
* -- Pause --
;Projet 1 (salle S01) :
* 11:00 - 11:45 -> Démo installation de plugin/theme Wordpress + travail individuel sur son propre projet supervisé par Stéphane
 
* 11:45 - 12:30 -> Démo [[Express.js]]
* 11:00 - 12:30 -> Démo installation de plugin/theme Wordpress + travail individuel sur son propre projet supervisé par Stéphane
 
;Projet 2 (salle 501 5ème étage TECFA) :
 
* 11:00 - 12:30 -> Introduction à [[Node.js]]


== Demo installation serveur distant ==
== Demo installation serveur distant ==

Version du 4 décembre 2017 à 17:46

Cette page fait partie des cours STIC I et STIC II

Programme

Partie commune
  • 09:00 - 09:30 -> Présentation des différents types d’hébergement possible
  • 09:30 - 10:30 -> Configuration et installation d'un portail sur l'espace projets TECFA
  • -- Pause --
  • 11:00 - 11:45 -> Démo installation de plugin/theme Wordpress + travail individuel sur son propre projet supervisé par Stéphane
  • 11:45 - 12:30 -> Démo Express.js

Demo installation serveur distant

Bien que certains hébergeurs web mettent à disposition des solutions similaires à Ampps pour installer des applications (ce qu'on appelle souvent des solutions One-Click Install), le processus est plus compliqué lorsqu'il faut le faire manuellement. La démarche exacte peut varier selon l'application choisie, et souvent il existe des tutoriels spécifiques pour suivre des étapes, mais de manière générale on peut identifier les passages suivants :

  1. Télécharger (download) les fichiers qui composent l'application. Il s'agit souvent de fichier .zip ou .rar qui contiennent tous les fichiers nécessaires à l'application de manière comprimée.
    • Une erreur assez commune concerne le fait qu'ils s'attendent à télécharger un logiciel/executable, mais ce n'est pas le cas
  2. Uploader ces fichiers sur le serveur distant sur lequel l'application va tourner
    • Pour ce faire il faut disposer d'un account (S)FTP ou SSH avec les droits d'écriture/modification sur le fichier
  3. Préparer une base de données pour contenir les données de configuration et les contenus de l'application
    • Pour ce faire il faut disposer d'un account pour la base des données (e.g. MySQL) et souvent d'une interface pour éviter d'avoir à exécuter ces opérations en ligne de commande (e.g. phpMyAdmin)
  4. Lancer un script d'installation/configuration avec une interface web (ou modifier manuellement des fichiers de configuration qui ont été uploadés au point 2) pour insérez les informations sur la base de données créée. Parmi ces informations on retrouve souvent :
    • Le host de l'application : souvent c'est localhost mais cela peut être également un url du type mysql.mydomain.com
    • Le username de l'account qui a accès à la base de données
    • La password de l'account qui a accès à la base de données
    • Le nom de la base des données qui va contenir les données
    • Eventuellement un préfix du nom des tables pour les distinguer d'autres déjà présent dans la même base des données

Ce qui peut souvent créer de la confusion est le fait qu'on à souvent à faire avec trois accounts (et mots de pass) différents :

  1. L'account de type (S)FTP pour uploader/modifier les fichiers physiques de l'application
  2. L'account de la base de données (très souvent MySQL) qui permet d'intéragir avec les tables (ajouter, créer, effaces des tables ou des données dans les tables)
  3. Un account d'administrateur qui est créé par l'application elle-même (e.g. administrateur Moodle)

Repliquer une application local sur serveur distant

Si vous voulez obtenir exactement la même interface que vous avez en local sur votre serveur distant, il faudra répliquer exactement la même configuration, c'est-à-dire :

  • Exactement la même structure des fichiers
  • Exactement la même structure de la base de données

Attention #1 : cela n'est cependant pas suffisant. Il faudra également adapter votre configuration au serveur distant, car il se peut que vous n'avez pas exactement les mêmes accounts en local que sur le serveur distant. Exemple :

  • En local (ou sur un autre site) l'account pour accéder à la base de donnée s'appelle user_local123
  • Sur le serveur distant l'account s'appelle plutôt fh437g344r538

Il faudra donc modifier cette références dans tous les endroits où le nom de l'account pour accéder à la base de données est mentionné.

Attention #2 : selon le type d'application, il se peut que certaines références à l'intérieur des fichiers ou de la base des données fassent référence à des paramètres spécifiques de votre application en local, par exemple :

  • Wordpress utilise une référence dans la base de données pour déterminer l'URL du site. Donc cet URL dans votre site local ampps est très probablement http://localhost/votre-nom-de-dossier-wp, mais sur le serveur distant vous aurez plutôt http://tecfaetu.unige.ch/projets/votre-volée/nom-projet/etc
  • Certaines applications mémorisent le chemin absolu dans lequel elles ont été installées, donc en local vous pouvez avoir quelque chose du style "C://...", mais sur le serveur sera plutôt "/web/projets/..."

Configuration et installation d'un portail sur l'espace projets TECFA

Étapes nécessaires :

  1. Uploader les fichiers de l'application
  2. Configurer/créer une base de données avec phpMyAdmin
  3. Démarrer l'installation de l'application (via interface web ou modification des fichiers)

Outils nécessaires :

  1. Cyberduck pour accès SFTP au serveur tecfaetu.unige.ch
  2. Account + informations de connexion personnelles pour phpMyAdmin/MySQL (Stéphane va vous les donner)

Positionnement du portail

Le portail doit être installé à un endroit particulier

 /web/projets/wall-e/dupond/stic-2/votre-application/
 Ce qui donne l'URL http://tecfaetu.unige.ch/projets/wall-e/dupond/stic-2/votre-application/

Pour des raisons de sécurité, il sera uniquement accessible depuis l'université ou par VPN.

Accès à phpMyAdmin

Pour accéder à phpMyAdmin (gestion de la base de données), pointer vers :

http://tecfaetu.unige.ch/phpmyadmin/

Á l'heure actuelle (à voir si changer prochainement) il vous faudra une "double" authentification :

  1. Un username et mot de pass qui est le même pour tout le monde et qui doit être insérée dans le popup qui s'affiche
  2. Une fois que vous avez accès à la page, il y a un deuxième formulaire de login (cette fois-ci à l'intérieur de la page de phpMyAdmin). À ce point il faut utiliser le username et mot de pass personnels, chacun aura le sien.

Activités P1

Démo installation de plugin Wordpress

Il y a deux manières d'installer/mettre à jour des plugins Wordpress :

  1. De manière manuelle: télécharger et uploader les fichiers dans le répositoire wp-content/plugin
  2. À travers l'interface d'administration de Wordpress

Installation manuelle

Pour installer manuellement un plugin :

  1. Pointer sur la page https://wordpress.org/plugins/
  2. Choisir le plugin qui vous intéresse, par exemple https://wordpress.org/plugins/tinymce-advanced/
  3. Cliquez sur le bouton Download version X.X.X pour télécharger le .zip du plugin
  4. Extraire le contenu sur votre ordinateur (la position n'est pas très importante si vous ne comptez pas l'installer également en local)
  5. Utilisez Cyberduck (ou équivalent) pour uploader le fichier entier dans le répositoire wp-content/plugins qui se trouve à l'intérieur du dossier qui contient votre installation de Wordpress
    • e.g. /web/projects/wall-e/votre-login/stic-2/wordpress/wp-content/plugins
  6. Pointer dans la zone d'administration de votre Wordpress et choisissez le menu "Plugin", vous verrez la liste des plugins installés, parmi lesquelles vous devez voir celui que vous venez d'installer (dans l'example tinymce-advanced)
  7. Ce plugin est désactivé à la base, donc il faudra l'activer pour l'utiliser. Cliquez tout simplement sur le lien Activate (ou équivalent selon la langue de votre interface)

Installation via interface

À controller si cela marche!

Installation d'un thème Wordpress

Le même principe des plugins s'applique également aux thèmes, il faudra tout simplement :

  1. Pointer sur la page https://wordpress.org/themes/ pour choisir le thème qui vous intéresse
  2. Uploader le dossier dans le répositoire wp-content/themes au lieu de plugins.
  3. Activer le thème dans l'interface d'administration

Activités P2

Installation des outils nécessaires

  1. Installation de Node.js depuis le site officiel version 6.9.x. Suivre les instructions sur la page Node.js
  2. Installation extension Brackets Node.js bindings par Acconut (voir page Brackets)
  3. Installation Postman (extension Chrome)

Nous allons par la suite installer des modules Node.js à travers la ligne de commande.

Installation d'outils facultatifs

  1. Installation de Visual studio code via le site officiel. Cet éditeur présente des caractéristiques avancés par rapport à Brackets. Compatible avec tous les OS.

Introduction à Node.js

  1. Présentation de Node.js (similarité/différence avec JavaScript)
  2. Rappel avertissement de sécurité : ce n'est plus dans le "sandbox" du browser mais au niveau du système!
  3. Hands-on avec exemples et exercices https://github.com/mafritz/stic-1-node-essentials
    • Node scripts
    • Synch/Asynch programming
    • Built-in, third-party and personalized modules
    • npm

Aperçu de ce qu'on va voir lors des prochains ateliers

Proposition:

Atelier 4
Atelier 5