avec HTML

reassigner

document.querySelector('#t1').textContent = 'Take pill';

• résultat:
  • Take pill

  supprimer

  document.querySelector('#t1').remove()

  créer des elements

  document.querySelector('#todo').innerHTML += `

• Book
`;

+= est important pour ajouter et ne pas remplace si on utilize juste =

• Go to

Cible plusiers éléments

document.querySelectorAll('li');

resultat: un tableau:

• Take pill
• Go to
ou undefined, si'l n'y a rien

.addEventListener()

• prendre un argument: signal
• example 'click'
• deuxieme function

Example

document.querySelector("#t1").addEventListener("click", function () {
  console.log("Click detected!");
  window.location.assign("index.html"); // <-- aller a un nouveau page
});

Fetch

GET

fetch("https://api.chucknorris.io/jokes/random")
    .then(reponse => reponse.json())
    .then(data => {
        console.log(data);
        return
    })
    .then(data=>{...});

POST

• POST entre le parenthese est different

var client_id = "[mon_client_id]";
var client_secret = "[mon_client_secret]";

fetch("https://accounts.spotify.com/api/token", {
  method: "POST",
  body: `grant_type=client_credentials&client_id=${client_id}&client_secret=${client_secret}`,
  headers: {
    "Content-Type": "application/json",
  },
})
  .then((reponse) => reponse.json())
  .then((data) => {
    console.log("--- accessed then(data => {} ----");
    console.log(data);
    return;
  });

checkbody function / module

function checkBody(body, keys) {
  let isValid = true;

  for (const field of keys) {
    if (!body[field] || body[field] === "") {
      isValid = false;
    }
  }

  return isValid;
}

module.exports = { checkBody };

MongoDB Atlas

• util de gestion
• creer un compte
• creer base de donnner
• creer un mot passe
• gratuite

enregistre dans Atlas

• utilise AWS

• username et password

  • username: admin (normalment)
  • mot pass: ne pas mettre caracter special
    • attention! stocker ce mot de passe quelque part special

• environment local

• Ajouter IP Address qui permetter: 0.0.0.0./0

• 0.0.0.0/0 permettre a tout le monde a acceder les base de donner

• telecharger MongoDB Compass

• ouvrir compass et ajouter le URI

  • connection string

Mongoose

communique avec le base de donnes BDD: base de donnes

🚨 necessaire connect string + "/[nom de vos projet]"

installer

yarn install mongoose

• ⚠️ yarn add il n'y a plus de install

connection de base de donnes

models/connection.js

const mongoose = require('mongoose');

const connectionString = 'mongodb+srv://.../todoapp';

mongoose.connect(connectionString, { connectTimeoutMS: 2000 })
    .then(() => console.log('Database connected'))
    .catch(error => console.error(error));

liée le BDD a le app.js

require("./models/connection")

• Exemple:

require("dotenv").config();
require("./models/connection");

var express = require("express");
// ...code
// ...code

app.use("/", indexRouter);

module.exports = app;

create a schema for documents in a collection

const mongoose = require("mongoose");

const todoSchema = mongoose.Schema({
  name: String,
  assignedTo: [String],
  priority: Number,
  done: Boolean,
  dateDue: Date,
});

const Todo = mongoose.model("todos", todoSchema);

module.exports = Todo; // <-- ça rendre disponible a tout le application

effectuer un recuperer

Récupérer toute une collection

db.find().then((data) => {
  console.log(data);
});

recupere tous les

db.find({ firstName: "John" }).then((data) => {
  console.log(data);
});

premier document

db.findOne({ firstName: "John" }).then((data) => {
  console.log(data);
});

db.findById("8ayasdtfsd...").then((data) => {
  console.log(data);
});

Si il ne renvoie rein il retourne: null (?? je suis pas sure, peut être [] basé sur un quiz reponse)

• null est falsy

db.updateOne(
    { firstName: 'John'},(criter de recherche)
    { lastName: 'Smith'} (modification)
).then(() =>{
    db.find().then(data=>{
        console.log(data);
    })
});

db.updateMany(
    { firstName: 'John'},(criter de recherche)
    { lastName: 'Awesome'} (modification)
).then(() =>{
    db.find().then(data=>{
        console.log(data);
    })
});

Delete

db.deleteMany(
    { firstName: 'John'}(criter de recherche)
).then(() =>{
    db.find().then(data=>{
        console.log(data);
    })
});

• si tu ne mettre pas une criter de recherche -- > le BDD est foutu
• si tu ne mettre pas le .then() le action ne commencer pas.

Creer un document

const newUser = new db({
    firstName: 'John',
    lastName: 'Awesome',
});

newUser.save().then(() => {
    db.find().then(data => {
        console.log(data);
    })
});

• marque bien le new
• newUser.save() , le then() ne pas neccessaire
• db c'est un nom qui on puex changer
  • ce represent le modele de collection dedans le BDD (ex. User's table)
  • ne pas le connection a le BDD, le BDD est deja connected

$push:

pour ajouter une element dans une properte de un document utilze

• { $push: {PROPERTE:OBJECT} }
• ex:

db.students.updateOne(
   { _id: 1 },
   { $push: { scores: 89 } }
)

for loops

for (let i=0;i=5;i++){
    console.log(i)
}

for(let element of array){
    console.(element)
}

To get properties from an object (also similar to enumerate the array)

for (let property in object){
    console.log(property)// <-- this is often a string value with the name of the property
}

Regex

regexr.com

create a search for bob

• find first "bob" const regex = /bob/
• find all "bob": const regex = /bob/g

OR operater |

• find Bob or Alice: const regex = /Bob|Alice/g

find consecutive digits \d+

Text example:

    location / {
       proxy_pass http://localhost:8000;
       include /etc/nginx/proxy_params;
       proxy_redirect off;
   }

Code to search text above:

const regexCode = /localhost:(\d+);/;
const object = data.match(regexCode);

• the parentheses will break the return into multiple elements in an array. So:
  • object[0] will return "localhost:"
  • object[1] will return "8000"

get not ; until the end in one group: ([^;]+)

• parentheses will make this an element in the return array
• brackets indicate one character
• ^ means not
• • indicates this pattern until the pattern stops
• in all this means get all characters that are not ";" until the end .i.e until a ";".

matches any whitespace characters: \s+

• i.e. space, tab, newline, etc.,

Ervy

Pour afficher graphs sur le console/terminal https://github.com/chunqiuyiyu/ervy Exemples de code: https://github.com/chunqiuyiyu/ervy/blob/master/demo/index.js

Pour voir tous les options de bullet: https://github.com/chunqiuyiyu/ervy/blob/master/lib/bullet.js

Express

1. NPM car on va installer globalment npm install express-generator -g sudo npm install express-generator -g
• yarn est just pour le projet
2. genere le structure backend express --no-view --git ./
• commence une project a zero avec c'est command

3. yarn install yarn install

4. cors yarn add cors cors: est le gatekeeper pour le backend un securitie - ajouter cors a ligne 10

const cors = require('cors');
app.use(cors());

NEXT.js

• un framework (au nievau de Express)
• React JS est un librarie dedans NEXT
  • Avec composants
• Angular est un autre libirarie dedans NEXT.js
  • puet-être il n'y a pas de composant

Boucles

.filter() .map() .some()(?)

Expo

Déploiement avec Expo

preview de application / demo

Expo offrir des utils pour diffuse application avec qr code ou url

veilluer Expo comme

GitHub et Vercel ensemble

Expo util

npm install eas-cli -g

-verfifie qui eas est insaller -which eas

pour Déploiement

dans le dossier de ton projet eas update

• suivi par quelques questions
• a la fin une nouveau lien avec

pour iOS

(peut-être il faut enregister email)

Il est possible d'éditer le ficher app.json pour personnaliser son application.