STIC:STIC I - Atelier technique 3

De EduTech Wiki
Aller à : navigation, rechercher

Cette page fait partie des cours STIC I et STIC II

STIC


1 Programme

Partie commune 
  • 09:00 - 09:30 -> Présentation du Projet Webmaster
  • 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...
Projet 1 (salle S01) 
  • 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

2 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)

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

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

3 Activités P1

3.1 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

3.1.1 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)

3.1.2 Installation via interface

À controller si cela marche!

3.2 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

4 Activités P2

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

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

4.3 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

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

Proposition:

Atelier 4
Atelier 5