O tutorial completo do PWA do MongoDB Node.js Express.js

Now every time a new visitor joins our page, they will be asked to share geolocation. Once they press "Allow" button, it will be collected and stored in lat, lon, x and y vars. We can then create a Fetch API call to send it to our back-end server.

API End-point Round Trip

Below are sections: Front-End, Back-End and Front-End again. Developing an API end-point (/api/user/get for example) you will often follow this pattern. First we need to call Fetch API to trigger an HTTP request to an end-point.

Front-End API

Here is the simple code that gives us two Fetch API requests. At this time we only need these two actions to build our geolocation API. Later in this article I'll show you how they connect to Mongo on the back-end.

    class User {
        constructor() {
            /* Currently unused */
            this.array = [];
        }
    }

    // Make JSON payload
    let make = function(payload) {
        return { method: 'post',
                 headers: { 'Accept': 'application/json',
                      'Content-Type': 'application/json' },
                                body: JSON.stringify(payload) };
    }

    /* /api/add/user
       Send user's geolocation to mongo
       payload = { x : 0, y : 0, lat: 0.0, lon: 0.0 } */
    User.add = function(payload) {
        fetch("/api/add/user", make(payload))
        .then(promise => promise.json()).then(json => {
            if (json.success)
                console.log(`Location data was entered.`);
            else
                console.warn(`Location could not be entered!`);
        });
    }

    /* /api/get/users
        Get geolocations of all users who shared it */
    User.get = function(payload) {
        fetch("/api/get/users", make(payload))
        .then(promise => promise.json())
        .then(json => {
            if (json.success)
                console.log(`Location data was successfully fetched.`);
            else
                console.warn(`Users could not be fetched!`);
        });
    }
We can now use static User functions to make Fetch API calls. Of course, nothing is stopping you from simply calling fetch function anywhere in your code where it makes sense. It's just putting everything into User object helps us organize code.





Back-End
This tutorial assumes you have Node and Express running. Showing how to set that up would take a whole another tutorial. But here are the core API commands coded in Express. It's quite simple.
The code below is from express.js file - the complete SSL server. The only thing you need to change if you plan on implementing this on your remote host is generating your own SSL certificates with certbot and LetsEncrypt.
Express, Multer and Mongo Init Shenanigans
First we need to initialize everything:





/* include commonplace server packages... */
const express = require('express');
const https = require('https');
const fs = require('fs');
const path = require('path');

/* multer is a module for uploading images */
const multer = require('multer');

/* sharp works together with multer to resize images */
const sharp = require('sharp');

/* instantiate the express app... */
const app = express();
const port = 443;

// Create Mongo client
const MongoClient = require('mongodb').MongoClient;

// Multer middleware setup
const storage = multer.diskStorage({
    destination: function (req, file, cb) {cb(null, './sunsets')},
    filename: function (req, file, cb) {cb(null, file.fieldname + '-' + Date.now())}
});

// Multer will automatically create upload folder ('./sunsets')
const upload = multer( { storage : storage } );

// body-parser is middleware included with express installation. The following 3 lines are required to send POST body; if you don't include them, your POST body will be empty.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

// Create some static directories. A static folder on your site doesn't actually exist. It's just an alias to another folder. But you *can also map it to the same name. Here we're simply exposing some folders to the front end.
app.use('/static', express.static('images'));
app.use('/sunsets', express.static('sunsets'));
app.use('/api', express.static('api'));
app.use('/static', express.static('css'));
app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/index.html')); });

// General use respond function -- send json object back to the browser in response to a request
function respond( response, content ) {
    const jsontype = "{ 'Content-Type': 'application/json' }";
    response.writeHead(200, jsontype);
    response.end(content, 'utf-8');
}

// Utility function...convert buffer to JSON object
function json( chunks ) { return JSON.parse( Buffer.concat( chunks ).toString() ) }

We still need to add end points to express.js file. The code below is assumed to go into the same file just underneath what we've written above.
Setting up API end-points
Creating POST API end-points with Express is a breeze. The code below will be triggered on the server when we use fetch calls we talked about earlier (using the User object and its static methods) from client-side.






API End-point 1 /api/add/user
This server side end-point will add geolocation data to Mongo database. 

// End-point: api/add/user
// POST method route - Add geolocation to Mongo's Photographer collection
app.post('/api/add/user', function(req, res, next) {
  const ip = req.connection.remoteAddress;
  const { x, y, lat, lon } = req.body;  
  
  // Connect to mongo and insert this user if doesn't already exist
  MongoClient.connect(`mongodb://localhost/`, function(err, db) {
    const Photographer = db.collection('Photographer');
    
    // Check if this user already exists in collection
    Photographer.count({ip:ip}).then(count => {
        if (count == 1) {
            console.log(`User with ${ip} already exists in mongo.`);
            db.close();
        } else {
            console.log(`User with ${ip} does not exist in mongo...inserting...`);
            let user = { ip: ip, x: x, y: y, lat: lat, lon: lon };
            
            // Insert geolocation data!
            Photographer.insertOne(user, (erro, result) => {
                if (erro)
                    throw erro;
                    
                // console.log("insertedCount = ", result.insertedCount);
                // console.log("ops = ", result.ops);
                db.close();
            });
        }
    });
    res.end('ok');
  });
});






API End-point 2 /api/get/users
This server side end-point will grab a list in JSON format of all currently stored geolocations in the Mongo database.

// End-point: api/get/users
// POST method route - Get all geolocations from Mongo's Photographer collection
app.post('/api/get/users', function(req, res, next) {

  // Connect to Mongo server
  MongoClient.connect(`mongodb://localhost/`, function(err, db) {
    const Photographer = db.collection('Photographer');
    Photographer.find({}, {}, function(err, cursor) {    
    
      // NOTE: You must apply limit() to the cursor
      // before retrieving any documents from the database.
      cursor.limit(1000);      
      let users = [];
      
      // console.log(cursor);
      cursor.each(function(error, result) {
          if (error) throw error;
          if (result) {          
            // console.log(result);
            let user = { x: result.x, y: result.y, lat: result.lat, lon: result.lon };
            // console.log("user["+users.length+"]=", user);
            users.push(user);
          }
        });

        // A more proper implementation: (WIP)
        (async function() {       
          const cursor = db.collection("Photographer").find({});
          while (await cursor.hasNext()) {
            const doc = await cursor.next();
            // process doc here
          }
        })();

        setTimeout(time => {
          const json = `{"success":true,"count":${users.length},"userList":${JSON.stringify(users)}}`;
          respond(res, json);
        }, 2000);
    }); 
  });
});






API End-point 3
This will upload an image from an HTML form via Node multer package.

// End-point: api/sunset/upload
// POST method route - Upload image from a form using multer
app.post('/api/sunset/upload', upload.single('file'), function(req, res, next) {
    if (req.file) {
      // console.log("req.file.mimetype", req.file.mimetype);
      // const { filename: image } = req.file.filename;
      let ext = req.file.mimetype.split('/')[1];
      let stamp = new Date().getTime();
      // console.log("ext=",ext);
      output = `./sunsets/sunset-${stamp}.${ext}`;
      output2 = `https://www.infinitesunset.app/sunsets/sunset-${stamp}.${ext}`;
      console.log("output=",output);
      // console.log("output2=",output2);
      sharp(req.file.path)
          .resize(200).toFile(output, (err, info) => {
            // console.log(err);
            // console.log(info.format); 
          });
      // fs.unlinkSync(req.file.path);
      res.end(`
Picture uploaded! Go Back
`,`utf-8`);
    }
    // req.file is the `avatar` file
    // req.body will hold the text fields, if there were any
    res.end(`Something went wrong.`,`utf-8`);
});






MongoDB Command Overview
Primarily we will use .insertOne and .find Mongo collection methods. When inserting a location entry, we will test if that entry already exists in the database. If it does, there is nothing to do. If it doesn't, we'll insert a new entry.
You can also use Mongo's .count method to count the number of entries in the document that match a particular document filter.
To do any Mongo operations we first need to connect to our Mongo server from within of our Node application! This is done using the .connect method.






.connect

MongoClient.connect(mongodb://localhost/, function(err, db) {
    /* mongo code */
};

db.close()
When we're done we need to close the database connection:







MongoClient.connect(mongodb://localhost/, function(err, db) {
    db.close();
};

.insertOne






Photographer.insertOne(user, (erro, result) => {
    if (error)
        throw error;
        
    // console.log("insertedCount = ", result.insertedCount);
    // console.log("ops = ", result.ops);
    
    Don't forget to close db
    db.close();
});

Here results.ops will display the object that was inserted.
.find
The find method produces something called a cursor in Mongo. This cursor is an object that you can call .each on to iterate over all found items. Per Mongo documentation you should always set a limit first with cursor.limit(1000);







Photographer.find({}, {}, function(err, cursor) {

      // NOTE: You must apply limit() to the cursor
      // before retrieving any documents from the database.
      cursor.limit(1000);
      
      let users = [];
      
      // console.log(cursor) is [Cursor object];
      cursor.each(function(error, result) {
      
          // check for errors
          if (error)
              throw error;
              
          // get data
          let x = result.x;
          let y = result.y;
          
          /* etc... */
      }
}
Front-End
Displaying the data.
Now that we have basic Mongo API running on our back-end, we can send data back to the front-end and the client side needs to visually display it on the screen.
I've chosen to use HTML5  to draw the coordinates as images. To draw images on canvas you first have to include them in your HTML document as regular images with IMG tag. To prepare images let's include to cache them in the browser:







 <-- your location -->
 <-- world map image  -->
 <-- generic location marker -->

And now the core of our front-end. This call will do a bunch of things: see if device browser supports HTML5 geolocation property, create a 2D canvas and draw world map image on it, get HTML5 geolocation data, send it to Mongo using Fetch API, make another call to get all previously inserted items into our mongo db on the back-end and animate canvas by drawing markers based on returned JSON object:






Nota...você não precisa renderizar seus dados exatamente dessa maneira. Se você estiver usando a biblioteca React, vá em frente e use componentes. Não importa. Aqui eu usei JavaScript vanilla apenas para este exemplo. O que importa são as solicitações de busca e que estamos processando o objeto JSON retornado contendo dados de localização na tela. Você não precisa usar a tela. Você poderia ter usado apenas os elementos DIV para cada marcador.
Abra o demonstração    deste tutorial em Eunfinitesunset.app    aplicativo de fotografia ao vivo.





Abri todo esse projeto no GitHub
Verifica código-fonte completo para este servidor Express.js SSL MongoDB. Este é um bom ponto de partida para alguém que está tentando fazer com que o Mongo trabalhe no host remoto. ⭐Star it, 🍴 bifurque-se, ⤵️baixe ou ✂️copiar e colar    isto.
Resultado final (veja também em execução ao vivo em www.InfiniteSunset.app )





Obrigado pela leitura, espero que você tenha achado este tutorial do Mongo esclarecedor.
Confira meu livro de codificação Gramática JavaScript para mais.
Verificação de saída meu livro JavaScript Grammar    para uso comum JavaScript.
Ou simplesmente Siga me no twitter    para codificar anúncios tutoriais etc.