Manipuler une base de donnée sous Meteor JS

Meteor est un framework de développement permettant de mettre en place très rapidement un environnement de travail complet en évitant les tâches répétitives. Le tout fonctionne en JS, ce billet ayant pour objectif la manipulation des BDD sous Meteor, je vous invite à consulter un billet d’introduction à Meteor pour vous familiariser avec cet outil.
Sous meteor JS l’utilisation d’une BDD est différente d’un schéma SQL classique. On utilise d’autres thermes pour définir les éléments type, tables, rows, columns que l’on retrouve dans le SQL.

Ainsi on obtient en résumé ce schéma (trouvé au hasard sur google imgs) avec la correspondance de chacun.
sql mongodb comparatif

Dans ce billet je vais simuler une base de donnée de porte feuille et y effectuer des opérations simples afin de manipuler les éléments présent en bdd. Je pars du principe que vous avez deja quelques bases sous Meteor avec une bonne vision du côté client/server

Pour débuter la structure de mon projet est la suivante. Suivez la procédure ci-dessous afin de créer votre projet :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
meteor create meteorproject
cd meteorproject
rm *
meteor add iron:router
meteor add jquery
meteor remove autopublish insecure
mkdir collections
touch /collections/Posts.js
mkdir client
touch /client/client.js
mkdir client/views
touch /client/views/layout.html
mkdir /client/views/application
touch /client/views/application/calculator.html
touch /client/views/application/index.html
mkdir lib
touch /lib/Router.js
mkdir server

Pour détailler un peut plus le billet lisez les quelques lignes ci-dessous afin de comprendre le cheminement.

Le fichier Router.js est utilisé par iron:router ajouté ci-dessus à Meteor, pour simplifier au maximum c’est un plugin permettant de déclarer des routes au sein de votre application. Ainsi dans mon exemple lors de l’accès à http://localhost:3000/(le « Router.route(‘/’ » dans Router.js désigne l’index du site pour le client) on indique à Meteor que celui ci appel le template « index » et y ajoute la requête sur votre mongodb côté client.

Avec la suppression des paquets « remove autopublish insecure » on autorise plus les clients à faire des requtêtes directement sur la bdd, vous devez créer une requêtes sur le server (appelé « publication ») qui va ensuite la transmettre à votre client (celui-ci peut s’abonner à x publications). C’est dans la base « local » au client que celui-ci pourra y prendre les infos dont il a besoin.

Par rapport au SQL classique mongodb travail sur une « copie » local sur le client.

La partie « waitOn » permet d’indiquer à Meteor d’attendre que le serveur ait bien fourni les informations dans la bdd du client via le « Meteor.subscribe allPostHeaders » déclaré dans le fichier /server/server.js (donc côté server), auquel cas le client ferai une requête dans sa bdd local vide.

Editez le fichier /lib/Router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Router.configure({
    layoutTemplate: 'mainLayout'
});
Router.route('/', {
    name: "index",
    data: function(){
        var posts = WalletsList.find();
        return {
            WalletsList: posts
        };
    },
    waitOn: function(){
        return Meteor.subscribe("allPostHeaders");
    }
});
Router.route('/calculator', {
    name: 'calculator'
});

Editez le fichier /client/views/layout.html

1
2
3
4
5
6
7
8
9
10
11
12
<template name="mainLayout">
    <h1>Mes Wallets</h1>
    <div>
        <ul>
        <li><a href="{{pathFor route='index'}}">Accueil</a></li>
        <li><a href="{{pathFor route='calculator'}}">Calculateur</a></li>
        </ul>
    </div>
    <div>
        {{> yield}}
    </div>
</template>

Editez le fichier /client/views/application/index.html

1
2
3
4
5
6
7
8
<template name="index">
    <h2>index</h2>
    <ul>
    {{#each WalletsList}}
        <li><b>{{ nom }}</b> : <em>{{ montant }}</em> : <em>{{ user }}</em></li>
    {{/each}}
    </ul>
</template>

Editez le fichier /client/views/application/calculator.html

1
2
3
<template name="calculator">
    <h2>Mes calculs</h2>
</template>

A ce stade vous devriez obtenir ce résulat si ce n’est pas le cas vérifiez les quelques étapes cités ci-dessus

0 introduction mongodb affichage

On débute à présent le travail sur notre bdd de porte-feuilles

Editez le fichier /server/server.js

1
2
3
4
5
Meteor.publish("allPostHeaders", function(){
    return WalletsList.find({}, {
        fields: {content: 0}
    });
});

On déclare à présent une nouvelle bdd nomé « wallets »,
Editez le fichier /collections/Posts.js

1
WalletsList = new Mongo.Collection('wallets');

On peut observer via la console du navigateur en cas d’appel de la variable « WalletsList » la réponse

1 affichage bdd declaree mongodb

Ouvrez à présent un nouveau terminale sans fermer celui en cours, et ouvrez la version portable de mongodb, on ajoute en bdd deux entré

1
2
3
meteor mongo
db.wallets.insert({nom: "bitcoin", montant: "1", user: "user1"});
db.wallets.insert({nom: "ethereum", montant: "10", user: "user1"});

Si vous souhaitez vider la collection utilisez (equivalent drop data table en sql)

1
db.wallets.drop()

Si vous souhaitez afficher les entrés de la collection utilisez

1
db.wallets.find().pretty()

le index.html est deja configuré pour afficher le résultat dès l’insertion en bdd d’un nouvel élément, via le template « index » dans /client/views/application/index.html

1
2
3
4
5
<ul>
    {{#each WalletsList}}
        <li><b>{{ nom }}</b> : <em>{{ montant }}</em> : <em>{{ user }}</em></li>
    {{/each}}
</ul>

4 affichage wallets meteor mongodb

Nous allons maintenant ajouter un formulaire classique afin d’interagir avec notre bdd

Modifiez le le template « index » dans le fichier « /client/views/application/index.html » comme ci-dessous

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template name="index">
    <h3>Nouveau Wallets</h3>
    <form>
        <label>nom</label><input type="text" name="nom" value="euros" /><br />
        <label>montant</label><input type="text" name="montant" value="0" /><br />
        <label>user</label><input type="text"  name="user" value="user1" ><br />
        <button type="submit" >Envoyer</button>
    </form>
    <h2>Liste de mes wallets</h2>
    <ul>
    {{#each WalletsList}}
        <li><b>{{ nom }}</b> : <em>{{ montant }}</em> : <em>{{ user }}</em></li>
    {{/each}}
    </ul>
</template>

Si vous essayez de soumettre le formulaire vous devriez obtenir « insert failed: Access denied » en console client (f12), on va devoir autoriser les opérations d’insert, update et delete dans « /collections/Posts.js » on y ajoute .allow

1
2
3
4
5
6
7
WalletsList = new Mongo.Collection('wallets');

WalletsList.allow({
    'insert': function (userId,doc) {return true;},
    'update': function (userId,doc) {return true;},
    'remove': function (userId,doc) {return true;}
  });

Vous pouvez à présent utiliser le formulaire ajouté ci-dessus

Scan to Donate Bitcoin
Like this? Donate Bitcoin to at:
Bitcoin 17NmM8q9TC7f4eKczRzHFXTZd39S8K24dv
Donate

Laisser un commentaire

Assemblé dans la station orbitale WordPress