dupontL3: 2022

Préparation à l'examen

Le pays le plus peuplé par zone.👍

See the Pen reduce Europe le plus peuplé by dupont (@dupontcodepen) on CodePen.
Bilan
Tab
reduce/JS
Object.entries(zones)/DOM
const Europe = [
    { nom: "Allemagne", zone: "O", population: 83 },
    { nom: "Belgique", zone: "O", population: 2 },
    { nom: "Autriche", zone: "O", population: 20 },
    { nom: "Bulgarie", zone: "E", population: 1 },
    { nom: "Chypre", zone: "S", population: 1 },
    { nom: "Croatie", zone: "S", population: 2 },
    { nom: "Danemark", zone: "N", population: 12 },
    { nom: "Espagne", zone: "S", population: 22 },
    { nom: "Estonie", zone: "N", population: 2 },

...
"{
  'O': {
    'nom': 'Allemagne',
    'zone': 'O',
    'population': 83
  },
  'E': {
    'nom': 'Pologne',
    'zone': 'E',
    'population': 45
  },
  'S': {
    'nom': 'Italie',
    'zone': 'S',
    'population': 55
  },
  'N': {
    'nom': 'Irlande',
    'zone': 'N',
    'population': 35
  }
}"

<section class="europe">
   <h1 data-cat="O">O</h1>
   <p data-cat="O">Allemagne: 83 </p>

   <h1 data-cat="E">E</h1>
   <p data-cat="E">Pologne: 45 </p>

<h1 data-cat="S">S</h1>
   <p data-cat="S">Italie: 55 </p>

<h1 data-cat="N">N</h1>
   <p data-cat="N">Irlande: 35 </p>
</section>

🌍Les deux pays les plus peuplés par zone (structure tableau)

See the Pen reduce Europe les deux plus peuplé by dupont (@dupontcodepen) on CodePen.

🌍Deux pays par zone (Structure Map)

See the Pen reduce Europe 2 pays max by dupont (@dupontcodepen) on CodePen.

Bilan

Map

reduce

Object.entries(zones)

const mapEurope = new Map()

.set("Allemagne","O")

.set("Belgique","O")

.set("Autriche","O")

.set("Bulgarie","E")

.set("Chypre","S")

.set("Croatie","S")

.set("Danemark","N")

.set("Espagne","S")

.set("Estonie","N")

{

'O': [

'Allemagne',

'Belgique'

'E': [

'Bulgarie',

'Hongrie'

'S': [

'Chypre',

'Croatie'

'N': [

'Danemark',

'Estonie'

]

<p data-cat="O">Allemagne</p>

<p data-cat="O">Belgique</p>

<p data-cat="E">Bulgarie</p>

<p data-cat="E">Hongrie</p>

Explication : L'Europe

Préparation à l'examen

https://azure-todo-appdd.azurewebsites.net/

http://todolist-dd.azurewebsites.net/

Etude d'un grand classique !

https://github.com/dupontdenis/todoList.git

Notez :

Lors du developpement, ajouter deux fichiers

.env

.gitignore

# dotenv environment variables file
.env

.env

ENVIRONMENT=development
DATABASE_NAME=Dupont
DATABASE_URL=mongodb://127.0.0.1:27017/
KEY_VAULT_SECRET_NAME_DATABASE_URL=DATABASE-URL 
PORT=8080

Azure deploiement !

Exemple :

https://ghiblifilms.azurewebsites.net/films

API + mongodb

Tutorial

Le code est disponible : https://github.com/dupontdenis/create-courses-mongodb.git

node index.js

>DEBUG=app_api,app_server node index.js

EJS versu PUG

En action : https://github.com/dupontdenis/EJS-enaction.git

Niveau souhaité

Simuler les recherches de BD

// Insert a few documents into the sales collection.
db.sales.insertMany([
  { '_id': 1, 'item': 'abc', 'price': 10, 'quantity': 2, 'date': new Date('2022-03-01T08:00:00Z') },
  { '_id': 2, 'item': 'jkl', 'price': 20, 'quantity': 1, 'date': new Date('2022-03-01T09:00:00Z') },
  { '_id': 3, 'item': 'xyz', 'price': 5, 'quantity': 10, 'date': new Date('2022-03-15T09:00:00Z') },
  { '_id': 4, 'item': 'xyz', 'price': 5, 'quantity':  20, 'date': new Date('2022-04-04T11:21:39.736Z') },
  { '_id': 5, 'item': 'abc', 'price': 10, 'quantity': 10, 'date': new Date('2022-04-04T21:23:13.331Z') },
  { '_id': 6, 'item': 'def', 'price': 7.5, 'quantity': 5, 'date': new Date('2022-08-04T05:08:13Z') },
  { '_id': 7, 'item': 'def', 'price': 7.5, 'quantity': 10, 'date': new Date('2022-09-10T08:43:00Z') },
  { '_id': 8, 'item': 'abc', 'price': 10, 'quantity': 5, 'date': new Date('2023-02-06T20:20:13Z') },
]);

// Build an aggregation to view total sales for each product in 2022.
const aggregation = [
  { $match: { date: { $gte: new Date('2022-01-01'), $lt: new Date('2022-07-01') } } },
  { $group: { _id: '$item', totalSaleAmount: { $sum: { $multiply: [ '$price', '$quantity' ] } } } }
];

Résult :
[
  {
    "_id": "xyz",
    "totalSaleAmount": 150
  },
  {
    "_id": "jkl",
    "totalSaleAmount": 20
  },
  {
    "_id": "abc",
    "totalSaleAmount": 120
  }
]

Programme de Rentrée

Mongodb

installation on your machine

MongoDB cloud

Mongodb in VS

https://docs.google.com/document/d/1kLzN2NGjEw41hrfv58XdbAJpCA25sCU264BWtekhB10/edit?usp=sharing

The ultimate experiment

Créer un compte mongo Atlas !

https://github.com/dupontdenis/express-locallibrary-Supertutorial.git

Vous devez installer les modules et indiquer dans le fichier app.js votre BD

var dev_db_url = 'mongodb+srv://nom_pass@cluster0.kkmmj.mongodb.net/?retryWrites=true&w=majority';

Exemple de Fetch !

Pictures of you

Clonez https://github.com/dupontdenis/takepicture.git

Lancez dans un terminal le serveur avec la commande :

node app

Dans votre navigateur allez http://localhost:3000/

Single Page Application

Projet : Ma banque en ligne

Calculette

Class :

https://github.com/dupontdenis/Vanilla-JavaScript-Calculator-all

MVC :

Début de structuration / https://github.com/dupontdenis/MVC-calculette.git

Clique sur 1 et 2

Dialogue entre V et M passe par le contrôleur

Clique sur un opérateur.

Promise/async :

Asynchrone : Caractéristique de la programmtion WEB

L'asynchrone est partout

promise : https://dupontdenis.github.io/asyn-promise-asyn/promise.html

async : https://dupontdenis.github.io/asyn-promise-asyn/await.html

Accès aux BDs

asynchrone exemple

ℹ️ (sqlite node)

Cours

Cours : callback-promise-async

TD-callback

TD- wait

TD-accès github asyn.

La force de JS

Puissance de JS

let A = [2,0,2,0,2,3];
let B = [0,2,3,4];

Tenter de trouver un code équivalent à l'intersection de deux tableaux !

let v = [...new Set([...A, ...B])];