Semaine 6 : POO et JSON - SimplonSt-Gaudens/programme-web-dev-promo-2 GitHub Wiki

Semaine 6

Objectifs

Revoir les bases de Js
Aborder la Programmation Orientée Objet

Mardi

Présentation Fil Rouge + Flex/Grid

Débriefing

Travailler en équipe, c'est une vraie compétence :
- Savoir écouter, prendre sur soi,
- Reconnaître ses erreurs,
- Gérer les désaccords et les conflits
- On ne choisit pas ses collègues
Les méthodes de travail sont là pour trouver un point d'entente
- Méthode impartiale, pas basée sur les "intuitions" de l'un et de l'autre sur lesquelles on peut se replier quand on est perdu : des repères avec de bonnes méthodes et une bonne organisation, on peut travailler avec n'importe qui
- Ne pas rejeter la faute sur les autres
- Remettre en question sa propre organisation : si une erreur a été commise,c'est qu'elle a eu l'opportunité de se produire. La méthode n'a pas limité suffisamment le périmètre. Ex : le dév junior qui casse la prod.
Une communication claire et régulière mitige ces effets :
- On sait on où va
- On sait qui fait quoi
- On connaît les responsabilités et le périmètre de chacun => Scrum!
Dans un travail d'équipe, à la fin, il n'y a pas de réussite personnelle :
- On gagne tous ou on perd tous
- Le "mais c'est la faute de ..." n'a aucune valeur, le client s'en moque
Le système éducatif n'apprend pas la collaboration, mais entretient l'individualisation et la réussite personnelle. Tout le contraire de la vie professionnelle (à laquelle l'éducation nationale est censée préparer...).
Pour en savoir plus :

Restitution de la semaine : Qui? Quoi?

Les bases de Js

Au cas où, on reprend du début.

Programmation Orientée Objet :

Définition extraite de wikipédia sur la POO

Il consiste en la définition et l'interaction de briques logicielles appelées objets ; un objet représente un concept, une idée ou toute entité du monde physique, comme une voiture, une personne ou encore une page d'un livre. Il possède une structure interne et un comportement, et il sait interagir avec ses pairs. Il s'agit donc de représenter ces objets et leurs relations ; l'interaction entre les objets via leurs relations permet de concevoir et réaliser les fonctionnalités attendues, de mieux résoudre le ou les problèmes. Dès lors, l'étape de modélisation revêt une importance majeure et nécessaire pour la POO. C'est elle qui permet de transcrire les éléments du réel sous forme virtuelle.

Un facteur fait sa tournée...

Vous allez découvrir la notion de POO à travers un didacticiel concret se terminant par un exercice. La question de la POO s'aborde sur deux axes :

La conception : rechercher une correspondance entre les objets du monde réel (sujet de l'exercice) et les objets à créer dans le programme (le virtuel). On parle également de design, de modélisation.
La technique : création, manipulation des objets dans le code du langage de programmation choisi.

Le facteur fait sa tournée. Comment représenter cette problématique dans du code ? Dans un premier temps il faut chercher à identifier les acteurs (tout types d'acteurs : personnes, choses, concepts...) et les actions qui ont une place importante dans la réalisation de sa tournée c'est à dire sans lesquelles la tâche à effectuer ne pourrait être réalisable. Lors de sa tournée le facteur dépose les courriers dans des boîtes aux lettres.

Commençons par modéliser un des acteurs objets découverts : la boîte aux lettres

let bal = {}

Voilà on a créé un objet en Javascript ! Mais vu d'ici il ne semble pas faire grand chose... A quoi sert notre boîte aux lettres ?

A y déposer du courrier
A le stocker en attendant qu'on le retire après la dure journée de formation ! 😉
Et évidemment à le retirer

Comment cela se représente t-il ?

let bal = {
    courriers: [],
    deposerCourrier: function(courrier){...},
    retirerCourrier: function(){...}
}

Mais vous allez dire : "ce n'est pas du Javascript ça ??" Et bien oui et non.. Nous avons utilisé un littéral initialisateur au format Json (Javascript Objet Notation). Ce qu'il faut savoir c'est qu'en Javascript il y a plusieurs façons de créer un objet. Bien que nous utiliserons principalement les initialisateurs voici comment peut également s'écrire l'exemple ci-dessus.

let bal = new Object();
bal.courriers = [];
bal.deposerCourrier = function(courrier){...};
bal.retirerCourrier = function(){...};

Vous ferez votre choix entre l'une et l'autre façon d'écrire. Comment utilise t-on un objet ? Comment accède t-on a ses propriétés ? Comment appelle t-on ses méthodes ?

bal.courriers
bal.deposerCourrier(courrierx)

Utiliser les objets.

Premier exercice : en TDD compléter le code ci-dessus pour déposer et retirer le courrier de la boîte aux lettres. Maintenant que nous avons modélisé notre premier objet, revenons à la conception. Le facteur doit délivrer un courrier à une adresse mais ce n'est pas la boîte aux lettres qui a une adresse, c'est l'habitation. Le facteur dépose le courrier dans la boîte aux lettres d'une habitation sise à une adresse. Un nouvel objet vient d'apparaître, modélisons le :

let habitation = {
    adresse:"Chemin des développeurs",
    bal: {
        courriers: [],
        deposerCourrier: function(courrier){...},
        retirerCourrier: function(){...}
         }
}

Le problème maintenant est que si devons modéliser les maisons d'un village, il faudrait dupliquer 200 fois ce code en changeant l'adresse. Le développeur étant un fénéant devant l'éternel (dixit Laurent 😉 ) il a inventé un système pour créer plus simplement les objets à partir d'un modèle.

function Habitation(adresse){
    this.adresse = adresse;
    this.bal = {
        courriers: [],
        deposerCourrier: function(courrier){...},
        retirerCourrier: function(){...}
    }
}
maison1 = new Habitation("Chemin des développeurs");
maison2 = new Habitation("Route de St go");
[...]

De cette manière lorsque l'on instancie une maison à partir du modèle Habitation cette maison possède une boîte aux lettres.

Maintenant que vous savez tout (ou presque) sur la POO il ne vous reste plus qu'à aider le facteur à terminer sa tournée pour vendredi en TDD bien entendu ! 🥇

Le plein de liens

Exercices

Exercice 1 : chrono

Créez une classe Chrono avec :

une méthode start()
une méthode pause()
une méthode stop()
une propriété currentTime
Indices :
- setTimeout
- setInterval
Bonus : Mesurer le temps que met le chrono pour écouler 5 min. Même chose pour 10 min. Comment réduire l'écart entre le temps affiché et le temps réel?

Exercice 2 : bonjour madame la marchande

Créez une classe Produit :

nom
prix

Créez une classe Panier avec :

une méthode ajoute( produit )
une méthode retire( produit )
une proprieté totalHT
une proprieté totalTTC

Utilisation : ajouter ce qu'il faut à ce code de base pour qu'il fonctionne.

var baguette = new Produit( 'Baguette', 0.85); // prix HT
var croissant = new Produit( 'Croissant', 0.80);

var panier = new Panier();
panier.ajoute(baguette);
panier.ajoute(croissant);

console.log(panier.totalHT);
console.log(panier.totalTTC);

Bonus : reprendre cet exemple en ajoutant une classe Viennoiserie qui hérite de la classe Produit en lui ajoutant l'attribut booléen frais.

Kata : développer un nombre

Rédigez une fonction expandedForm qui écrive un nombre sous sa forme développée.

**Exemple **:

  expandedForm(12); // Should return '10 + 2*1'
  expandedForm(42); // Should return '4*10 + 2*1'
  expandedForm(70304); // Should return '7*10000 + 3*100 + 4*1'

Quelques vidéos pour se changer les idées

Il est de retour!

Killer tomatoes

Développez une appli pour gérer votre Pomodoro.

Screencap

décider de la tâche à effectuer ;
démarrer le minuteur (25 minutes) ;
travailler sur la tâche jusqu'à ce que le minuteur sonne et la noter comme faite ;
prendre une courte pause (5 minutes) ;
tous les quatre pomodori prendre une pause un peu plus longue (15-20 minutes).
Bonus : utilisez la méthode Pomodoro pour travailler sur ce projet.

Mercredi

Révisions

Le scope en javascript

Exercice live

 # scope1.js
 var x = "hello";

 function l(){
     console.log(x);
 }
 l();

 # Que donne "node scope1.js"?

 # scope2.js
 var x = "hello";

 function l(){
     x = "bye";
     console.log(x);
 }

 l();

 # Que donne "node scope2.js"?

 # scope3.js
 var x = "hello";

 function l(){
     x = "bye";
 }

 console.log(x);
 l();
 console.log(x);

 # Que donne "node scope3.js"?

Jeudi

Randori : Presque Minuit!

Ecrivez une fonction minutesTillMidnight(heure), où heure est sous la forme "HH:MM".
Cette fonction renvoie le nombre de minutes qui séparent heure de minuit.

JSON, comment ça marche?

Jason? Non, pas lui.

JSON est une syntaxe pour sérialiser des données. En français, ça permet de stocker des données dans un fichier qui ressemble à du texte. Ainsi, fini de caler vos données en dur dans le Js (youpi!). L'indentation est facultative mais c'est mieux quand c'est lisible. Exemple :
```
  {
    "name": "test",
    "description": "Ici, on teste JSON",
    "keywords": ["JSON", "test"],
    "memo": {
      "day": "23012017",
        "lieu": "salle de formation"
    }
  }
```
Dans javascript, on a même un objet spécialement pour ça : JSON (hé oui). Dans celui-ci, deux méthodes principalement vont nous intéresser :
- JSON.parse() : transforme du JSON en éléments lisibles par javascript.
- JSON.stringify() : convertit depuis javascript en JSON.
Et pour l'instant, c'est tout ce dont vous aurez besoin.

Quelques liens pour la forme

Mise en application

Diaporama sans POO

Dans un fichier texte (JSON), décrivez une liste de photos ( titre et url), puis chargez le, et utilisez le pour faire défiler automatiquement les photos dans une img.

Diaporama en POO

Même chose mais en créant des objets Diaporama

var diaporama1 = new Diaporama("photos1.txt", "idElementImg" );

Vendredi

Ergonomie & accessibilité

:memo: Design principles

:newspaper: In defense of eye candy

Trends

UI Design Guidelines

Inspiration

Dribbble : réseau social / portfolio pour designers
Behance : réseau social / portfolio pour designers ( racheté par Adobe )

UI, Ergonomie, UX

:book: 52 weeks of UX

Un premier tour chez OpQuast (avant la certification)

Accessibilité checklist 1

Accessibilité checklist 2