FablabSU

Maquette du site de remontée des données II

Nous allons implémenter une api REST. Cela ce fait très facilement avec le module Express de nodeJS.

var pg = require('pg');
var express = require('express');
var bodyParser = require('body-parser');
 
var conStr = "postgres://opengeiger@localhost/opengeiger";
var app = express();
 
// Cette fonction est très importante, elle autorise un script
// situé ailleurs que sur le même serveur à envoyer des données
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
 
    next();
});
 
app.use(bodyParser.json({strict: true}));
 
app.put('/add', function(req, res, next) {
    console.log(req.body);
    res.send("ok");
});
 
app.get('/', function (req, res, next) {
    pg.connect(conStr, function(err, db, done) {
        if (err) {
           return console.error("Could not connect to PostgreSQL", err);
        }
        db.query("SELECT * FROM mesures_test", function(err, result) {
           done(); // Release db back to the pool
           if (err) {
               return console.error("Error while running query", err);
           }
           res.json(result.rows);
        });
    });
});
 
app.listen(process.env.PORT);

Une fois le serveur lancé, nous pouvons tester l'affichage de la base de donnée avec l'url : https://open_geiger-c9-chsimon.c9.io

Pour tester l'envoi de données au serveur, nous créons une page html/javascript qui nous permet d'envoyer de fausses données :

<!DOCTYPE html>
<html>
    <head>
        <script>
            var xmlHttp =  window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
 
            function sendJson() {
                xmlHttp.open('PUT', "https://open_geiger-c9-chsimon.c9.io/add", true);  // true : asynchrone false: synchrone  
                xmlHttp.setRequestHeader('Content-Type', "application/json");    
                xmlHttp.send(JSON.stringify({a:"a", b:"b"}));
            }
        </script>
    </head>
    <body>
        <button type="button" onclick="sendJson();">Send Json</button>
    </body>
</html>

Après ces tests concluants, il est temps d'intégrer tout ça à l'application. Tout d'abord, nous devons autoriser l'application à communiquer avec le domaine c9. Pour cela il suffit d'ajouter cette ligne au fichier config.xml :

<access origin="https://open_geiger-c9-chsimon.c9.io*"/>

Ensuite, le code a ajouter est quasiment le même que celui de notre testJSON.js :

onSendToServer: function(event) {
        app.xmlHttp.onreadystatechange = function() {
            //if (app.xmlHttp.readyState == 4 && (app.xmlHttp.status == 200 || app.xmlHttp.status == 0)) {
            //alert(app.xmlHttp.responseText);
            //}
        };
 
        app.xmlHttp.open('PUT', "https://open_geiger-c9-chsimon.c9.io/add", true);  // true : asynchrone false: synchrone  
        app.xmlHttp.setRequestHeader('Content-Type', "application/json");
        var msg = JSON.stringify({
            nb_coups:app.count,
            latitude:app.position.coords.latitude,
            longitude:app.position.coords.longitude,
            altitude:app.position.coords.altitude,
            timestamp:app.position.timestamp});
        app.xmlHttp.send(msg);
    },

La prochaine étape est d'améliorer le code côté application, pour avoir une gestion des erreurs et prendre la position gps avant chaque envoi. Coté serveur il faut modifier l'api pour pouvoir isoler les entrées de base de donnée appartenant à la même zone ou à la même plage horaire.

FablabSU

Outils pour utilisateurs

Outils du site

Maquette du site de remontée des données II

Outils de la page