STIC:STIC I - exercice 6 (Volt)

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncé de l'exercice 6

Cet exercice vous permet:

• L'application des concepts de la programmation avec JavaScript dans une application desktop
• L'introduction à un langage de programmation qui intéragit avec le système
• Les opérations de base sur les fichiers de manière automatisée (lecture, écriture, ...)
• Créer des interactions/manipulations qui "durent" dans le temps (i.e. ne disparaissent pas une fois fermée la fenêtre du browser)
• Approfondir la connaissance d'une approche évenementiel/asynchone

Tâche

Imaginez un design pédagogique qui peut être implementé sous forme de (simple!) logiciel desktop. Le logiciel doit au moins présenter :

• Une interface graphique HTML + CSS qui prévoit au moins un élément interactif (bouton, form, ...)
• Cet élément interactif doit impliquer une opération sur le système, par exemple :
  • Écrire le résultat d'une interaction dans un fichier
  • Lire des donnes depuis un fichier et faire quelque chose d'intéressant
  • Lire des données depuis le web et faire quelque chose d'intéressant

Il faut également contribuer au wiki (comme pour tous les exercices)

Outil

• Editeur de programmation
• Node.js installé sur votre ordinateur
• Le module Electron de Node.js

Contraintes

En gros on vous demande un exercice similaire à l'exercice 3 plus une simple opération sur le système comme par exemple :

• Écrire les scores obtenus à un quiz dans un fichier et permettre à l'utilisateur de consulter les anciens résultat
• Permettre à l'utilisateur d'ajouter des informations dans le temps et les présenter de manière intéressante (e.g. ajouter les notes dans un cours et afficher la moyenne)
• Créer un petit jeu contre l'ordinateur (e.g. jeu de dés pour insegner mathématique) qui tienne trace du score (e.g. vous avez gagne 12 match sur 25)
• Créer du matériel expérimental simple qui sauvegarde les résultats pour analyse statistique (e.g. temps réactions à une image sauvegardé dans fichier .csv)
• Créer un logiciel de traitement de texte/écriture qui possède déjà des fichiers utiles (e.g. fichiers .txt avec des morceaux d'histoire à compléter)

Contraintes minimales du logiciel à développer (keep it simple and safe !!)

• Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
• Le logiciel doit avoir une interface HTML + CSS
• Tous les fichiers liés à l'interface (CSS, JS, images, etc.) doivent être en local (pas de bibliothèques sur CDN http://...)
• L'interface doit présenter au moins un élément interactif (click d'un bouton, formulaire, etc.)
• L'action de l'utilisateur doit enchaîner une (simple!) opération de système (faites attention à ce que vous faites) :
• L'opération doit "laisser des traces" lors de l'utilisation suivante du logiciel (i.e. ne pas disparaître quand le logiciel est fermé)
• Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML et dans le rapport.

Contraintes maximales (keep it reasonable !!)

• Si vous utilisez des modules externes, utilisez des modules "self-sustaining" (e.g. pas besoin d'installer mysql ou autre technologie), le logiciel doit pouvoir s'utiliser "out of the box"

Le rapport:

• Titre, auteur et date
• Liens vers le résultat (fichier HTML) et indiquez avec quelle configuration on peut voir votre contenu.
• Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos propres objectifs d'apprentissage....)
• Discussion du design
• La production: bref résumé de la démarche
• Difficultés, auto-évaluation, remarques
• Ressources utilisées, bibliographie.

A rendre

Rapport (as usual)

Emplacement du rapport avec liens au logiciel (voir plus bas) :

/etu-maltt/volt/<login>/stic-1/ex6/

Logiciel

Vous avez deux alternatives :

1. Zipper les fichiers de votre logiciel SANS le dossier "node_modules" et insérer le lien au fichier .zip dans votre rapport
2. Utiliser votre account GitHub (créé lors de l'Atelier Webmaster). Dans ce cas également IGNORER le dossier "node_modules". Insérer le lien au répositoire dans votre rapport.

Délai

• à déterminer !!!

Autre exercice de la même période

• Exercice 5

Activité en salle de classe

Programme

• 09:00 - 09:30 : ...
• 09:30 - 10:30 : ...
• -- pause --
• 11:00 - 11:45 : ...
• 11:45 - 12:30 : ...

Contributions Wiki

C'est la première année qu'on aborde "sérieusement" JavaScript en STIC I, par conséquence les ressources wiki disponibles à présent sont limitées et créées en peu de temps, il manque par conséquent une structure des pages. Voici quelques conseils pour les contributions :

Contributions de "base"/minimalistes

Orthographe des pages suivantes (plus d'erreurs que d'habitude car peu de temps pour écrire...) :

• Node.js
• Express.js
• Electron

Contributions "intermédiaire"

Ligne de commande

Page/Tutoriel sur la ligne de commande :

• Page générale avec quelques informations de base
• Page dédiée à PowerShell (Windows)
• Page dédiée à Terminal (Mac + Linux)

Node.js

• Trouver des BONNES ressources online pour débutant (pas facile!) avec déjà version Node 4.x ou 5.x, pas de 0.x à mettre dans la section "Liens" de Node.js
• Créer page/tutoriel sur Bower pour gérér les bibliothèques CSS/JS frontend

HTTP

• Créer une page qui explique le fonctionnement du protocol HTTP (client/server et réponse/requête) de manière aussi conceptuelle, pas seulement technique (déjà ailleurs)
• Améliorer graphiquement les deux cartes conceptuelles sur le cycle requête/réponse dans la page Express.js

Contributions avancées

Git et/ou GitHub

• Création d'une ou deux pages pour Git et GitHub (à évaluer si séparés ou ensemble)
• Créer une page/tutoriel sur le formatage Markdown utilisé dans les fichiers textuels de GitHub

Node.js

Pour ce qui veulent aller plus loin (si temps et intérêt) :

• Trouver et documenter un module intéressant
• Créer et documenter un module intéressant

Autre technologies avancées

• Créer une page/tutoriel sur JSON (créer lien dans pages JavaScript et Tutoriel JavaScript de base
• Créer une page/tutoriel sur LessCSS ou SASS CSS

Autres possibilités

• Poursuivre page créée en P2
• Pages plus théoriques sur la programmation (e.g. programmation dans les écoles, etc.)

Liens

Technique

JavaScript

• Introduction à la programmation
• JavaScript
• Tutoriel JavaScript de base
• Il existe des dizaines de tutos sur le web et des livres