[Ressources Web] Bases de Données – Ressources Magic Makers

Bases de Données

Notre Web App a besoin d’information, pour cela on va utiliser les Bases de Données.

Une base de données, permet de stocker et de retrouver l’intégralité des données en rapport avec un thème ou une activité. On utilise les bases de données pour avoir un moyen d’ordonner et de stocker les informations qu’on souhaite garder.

Les bases de données avec Meteor sont sous MongoDB. MongoDB est un système de gestion de base de données.

Une table de MongoDB prend la forme d’un grand tableau avec des clés et des valeurs.

Bien structurer une base de donnée

Pour que l’utilisation d’une base de donnée soit simple d’utilisation il y a une bonne manière de les créer.

On va voir comment créer une base de donnée qui soit pratique d’utilisation pour nous. Il faut prendre en compte que c’est une partie très importante dans notre Web App.

Dans un premier temps il faut penser à quelles informations on veut stocker. On veut éviter d’avoir des données en doubles dans nos Bases de Données, mais on veut éviter aussi d’avoir des champs vides.

Pour ça on va bien séparer l’intention de chaque donnée qu’on veut stocker.

Par exemple : On veut avoir un système de message entre nos utilisateurs. Chaque utilisateur peut envoyer un message à un autre utilisateur et ils peuvent avoir différentes conversations avec des sujets différents. On veut donc avoir trois choses différentes : les utilisateurs, les conversations et les messages. Les trois n’ont pas la même structure et ne sont pas la même chose, on va donc les stocker dans trois Bases de Données différentes. La conversation sera le chapeau qui permet de définir le sujet, la liste des utilisateurs, la date de création. Les messages seront l’étape d’en dessous qui contiendra le lien vers la conversation, la personne qui a envoyé le message, le texte et la date. Les utilisateurs eux auront simplement un e-mail et/ou un nom d’utilisateur et un mot de passe.

Il faut bien faire la différence entre les informations et les liens entre les Bases de Données.

Déclarer et créer une base de données

Maintenant qu’on a vu comment structurer une base de donnée on peut enfin la déclarer et la créer.

Imaginons on veut pouvoir poster des articles sur notre site, on veut mettre un titre, un texte, mais aussi sauvegarder la date de quand il a été créé, l’utilisateur qui l’a créé…

On va créer un fichier dans notre arborescence « imports/bdd/annonces.js » :

1
2
3

import { Mongo } from 'meteor/mongo';

export const Annonces = new Mongo.Collection('annonces');

Une fois qu’on a créé ce fichier et ajouté cette ligne il suffit juste de ne pas oublier d’import ce fichier à deux endroits !

Le premier : le fichier où on utilisera la base de données, dans notre cas imports/ui/body.js

//import utiles
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

//Import des bases de données
import { Annonces } from '../bdd/annonce.js';

Et le second très important ! Dans server/main.js :

import { Meteor } from 'meteor/meteor';
import '../imports/bdd/annonce.js';

Meteor.startup(() => {

  // code to run on server at startup
});

Insérer dans une Base de Données

Une fois que l’on a créé une base de donnée, on veut ajouter des informations à l’intérieur. Pour faire ça il faut d’abord récupérer les informations que notre utilisateur veut mettre dedans. On ferra ça à l’aide d’un formulaire la plus part du temps.

Par exemple pour une annonce :

//Import des bases de données
import { Annonces } from '../bdd/annonce.js';

Template.body.events({
    //envoyer une nouvelle annonce en appuyant sur la touche entrée
    'submit .new-annonce'(event) {
        event.preventDefault();

        //on récupère les informations nécessaires
        var target = event.target;
        var text = target.text.value;
        var date = new Date();

        //on insert les informations dans la base de donnée
        Annonces.insert({
            text,
            createdAt: date,
            owner: Meteor.userId(),
            username: Meteor.user().username,
        });
    },
});

Récupérer des informations

On a ajouté des informations à notre base de données maintenant on veut les récupérer, pour ce faire on va utiliser la fonction find(), (ou findOne() si on ne veut qu’une seule sortie).

Exemple :

Template.home.helpers({

    //récupères les annonces et les renvoies
    annonces: function(){
        return Annonces.find({},{});
    }
});

On peut rajouter des paramètres entre les accolades. Pour les premières on va mettre les conditions sur quelles valeurs on veut récupérer. Les annonces d’un seul utilisateur ? Les annonces crées avant une date précise, etc.

Dans les deuxièmes accolades on va ajouter des options. Est ce qu’on veut trier nos données ou les changer pour les récupérer d’une certaine manière.

Lorsqu’on ne met aucune condition ou aucune option on va avoir toutes les données brutes qui sont dans la base de donnée.

Condition sur la sortie

Parfois dans des bases de données on cherche à récupérer que les informations nécessaires, par exemple si on veut afficher que les annonces d’un utilisateur en particulier on va utiliser des conditions à insérer dans la fonction find() (ou findOne()).

Template.home.helpers({

    //récupères les annonces et les renvoies
    annonces: function(){
        return Annonces.find({username :{$eq: Meteor.user().username}},{});
    }
});

Le mot clé « $eq » veut dire que les deux valeurs doivent être égales.

Trier la sortie

On peut avoir les informations que l’on souhaite maintenant mais on veut pouvoir les trier comme ça nous arrange. Par exemple par date :

Template.home.helpers({

    //récupères les annonces et les renvoies
    annonces: function(){
        return Annonces.find({},{ sort: { createdAt: -1 }});
    }
});

On utilise le « -1 » pour signifier qu’on veut le plus récent en premier. « 1 » signifie qu’on veut le plus ancien en premier.

Transformer les données

Pour l’instant nos données ressortent comment nous les avons rentrés, ce qui est une bonne chose. Sauf qu’il est donc difficile de les changer pour les afficher comme on le souhaite. On a donc besoin d’un moyen de changer les données lorsqu’on fait un accès à celles-ci sans pour autant changer la Base de Données.

Pour cela on va utiliser la fonction « transform » qui s’utilise de la manière suivante :

Template.home.helpers({
    //return tout les tweet classé en ordre croissant et mettre la date comme on veut
    annonces: function() {
        return Annonces.find({}, { transform: function(doc){
            doc.createdAt=doc.createdAt.getDate() + "/" + doc.createdAt.getMonth() + "/" + doc.createdAt.getFullYear();
            return doc;
        } });
    },
});

Information très importante : la fonction ne change les valeurs que du côté client, si on refait une demande aux serveurs pour avoir les mêmes informations on aura celle non changées

Fonctions supplémentaires

On va voir quelques fonctions complémentaires qui pourraient nous aider, notamment la fonction update, et celle remove.

Les deux ont la spécificité de changer la base de données, pour cela il faut soit donner le droit à cet utilisateur de faire un changement, insert, update, ou remove sur la base de données, ou ce qu’on va utiliser : utiliser l’id de la ligne qu’on veut supprimer.

Pour voir les fonctions supplémentaires : fonction bases de données Meteor

update

1	Info_user.update(id, { $set: {contact: nouveau_contact }});

Elle nous permet de faire un changement dans notre base de données, par exemple l’utilisateur qui voudrait changer son numéro de téléphone ou son adresse mail dans les informations qu’il a donné.

On a plusieurs manières de faire la mise à jour :

remove

1	Messages.remove(id);

La fonction remove permet de supprimer une ligne de notre base de données.

Il faut faire attention parce qu’il n’est pas possible de récupérer les informations une fois qu’on les a supprimés.

Accéder aux bases de données depuis Atom

Pour accéder aux bases de données il faut ouvrir un terminal depuis Atom et taper la commande :

meteor mongo

Une fois qu’on est dans mongo il faut qu’on sélectionne la base de donnée de meteor en faisant :

use meteor

Puis on peut ensuite avoir la liste des collections :

show collections

Puis pour avoir les informations dans une collection en particulier il suffit de faire :

db.nom_collection.find()

EXPERIMENTER

EXPERIMENTER

PARTAGER

PARTAGER

RAISONNER