Mémos

Aide-mémoire pour la réalisation de mes projets actuels et passés

Remarque: la suite de cette page a été écrite en markdown et est traduite par le module "marked"


TODO List

Jquery events

Bibliothèques à étudier:

jQuery Mobile

<head>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

Source: http://www.w3schools.com/jquerymobile/jquerymobile_get_started.asp

Utilisation:

http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp

Hammer.js

En ce qui concerne uniquement la gestion d'événements, le plus courant est d'utiliser la bibliothèque Hammer.js

source : https://github.com/hammerjs/hammer.js/wiki/Getting-Started

Sinon:

Evénement "touch" standard de javascript:

Keyboard virtuel: https://github.com/Mottie/Keyboard

Modules Installés

1. Modules Globaux

Pour pouvoir utiliser les commandes de ces modules 

npm install -g express

npm install -g express-generator

2. Modules propres au projet

Moteur de template utilisé (à indiquer lors de la création du projet avec express-generator)

npm install ejs

~Remarque~ Le moteur par défaut lors de la création d'un projet express-generator est le moteur "jade". Une page conseillait de passer à ejs en précisant que son avis était subjectif, jade ayant une syntaxe qu'il prend plus de temps d'apprendre peut-être, mais est vraiment très propre et n'affiche que peu de texte. C'est pourquoi je réfléchis à utiliser quand même jade dans mes prochains projets. Liens:

Convertisseur de code mardkown (code textuel simplifié pour des rendus propres en html)

npm install markdown

EDIT(octobre 2015): j'utilise actuellement la paire jade/bootstrap, au lieu de ejs.

Le module markdown posait quelques soucis, j'utilise actuellement le module marked

npm uninstall markdown --save
npm install marked --save

Création Projet Express

Génération d'un projet que l'on nomme "nom_du_Projet":

express nom_du_Projet

Des options sont possibles pour définir par exemple le moteur de template utilisé Exemple avec le moteur de template "ejs":

express --ejs nom_du_Projet

Pour les autres options du générateur de projet d'express, entrer:

express -h

si je ne veux pas utiliser le moteur de template jade, mais plutot mustache.js par exemple;

express nom_du_Projet --hogan

derniers ajouts: option -c ajoute un support de moteur de style css dans le projet..

donc au final (en utilisant less comme moteur de style):

express nom_du_Projet --hogan -c less

source: https://www.youtube.com/watch?v=FqMIyTH9wSg (auteur youtubeur: LearnCode.academy)

Arborescence du projet après génération: ( express --ejs nom_du_Projet )

\---nom_du_Projet
    |   package.json
    |   app.js
    |   
    +---public
    |   +---javascripts
    |   +---images
    |   \---stylesheets
    |           style.css
    |           
    +---routes
    |       index.js
    |       users.js
    |       
    +---views
    |       index.ejs
    |       error.ejs
    |       
    \---bin
            www

Heroku ( lien )

Hébergeur d'application/serveur gratuit, idéal pour Nodejs

1. Création d'un compte

Inscription pour une utilisation gratuite d'Heroku à la page suivante:

https://signup.heroku.com/www-header

2. Installation

Suivre le processus décrit sur ce lien: https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

Clonage depuis une de mes apps chez heroku :

Lancer une console (cmd.exe) puis exécuter la commande

heroku login

Renseigner avec compte/mot de passe heroku

puis entrer la commande:

heroku git:clone -a nom_de_mon_app_heroku

Ceci copie l'intégralité du contenu de mon app actuellement chez heroku en local chez moi dans le dossier courant.

3. Utilisation

Pour indiquer à Heroku comment exécuter mon serveur nodejs, il faut modifier/créer le fichier "Procfile" à la racine du dossier de mon app. Par défaut pour une application type, celui ci contenait:

web: node index.js

Mais pour une application express comme la mienne, je le remplace par:

web: node bin/www

Socket.io avec Express

Attacher socketio à un projet "express": il suffit d'ajouter cette ligne dans le fichier www :

var io = require('../lib/io')(server);

Puis après avoir créé le dossier lib et le fichier io.js dedans, remplir le fichier io.js comme ceci:

module.exports = function(server){
  var io = require('socket.io')(server);

  io.on('connection', function (socket) {  // ou:  io.sockets.on (dans mon cas)

    // mes lignes du script server concernant socket io

  });

  return io; // so it can be used in app.js ( if need be )
}

Arborescence après cela:

---nom_du_Projet
    |   package.json
    |   app.js
    |
    +---public
    |   +---javascripts
    |   +---images
    |   ---stylesheets
    |           style.css
    |
    +---routes
    |       index.js
    |       users.js
    |
    +---views
    |       index.ejs
    |       error.ejs
    |
    +---bin
    |       www
    |
    ---lib
            io.js

###Convention de l'école

####Nommage des fichiers

Prefixe Description
A Résumé de projet en format A4
C Contrôle de compétence, test
D Document descriptif, explicatif
H Cahier des charges de projet
I Informations (fichiers contenant des adresses de site web ou de la doc. pertinente pour des idées ou extensions du cours)
L Protocole d'installation, de dépannage
M Modèle de document (dotx, xltx, etc)
P Présentation, exposé
R Rapport de mesure
T Planification de projet, travaux, Journal de travail
X Solution d'exercice
Y Script, code source, etc.
Z Application (exe, fla, swf, xls, etc.) 
exemple: T-TPI-kongsuntjo-journalDeTravail.docx