This Document i would like to create a one page App for CRUD operations on MongoDB using UI5 as Front end. This would be MEAN stack app and instead of Angular Js will use SAP UI5 as front end. So it would be MEUI5N stack

Tools required.

    • Git (for Code Repo)
    • Mongo DB (No SQL DB)
    • Express Js (Framework for Web and Mobile Applications based on Node JS)
    • SAPUI5 (HTML5 based UI)
    • Node js (Application Server– JavaScript based Server side Engine)

There are tons of examples from web for installing the above tools

But would present the main configuration steps for the above  tools after installing with the default settings.

MongoDB : create data/db folder in the installation folder of MongoDB and use mongod in cmd prompt to start the server and mongo  in other cmd window to start mongo DB client

 use empdb 

In mongoDB  we will create the empdb database using above command in mongo client shell.

So For running this app there should be a empdb database and under it a empdata collection should be created

Since this application runs on the Node js server the UI5 libraries folder need to be downloaded from https://openui5.org/download.html

Extract the UI5 library and copy the resource folder in unzipped folder  to the project folder location.The project structure would be  as below

The most important files are server.js and package.json . create a package.json file and Paste the below  code in package.json file


 { "name": "SAP-UI5", "version": "0.1.1", "private": true, "dependencies": {     "express": "3.x",     "mongodb": "^2.2.5",     "node-inspector": "0.7.x" } } 

Create a file server.js and add the following code


 var express = require('express'), emp = require('./routes/employee'); var app = express(); app.use(express.static(__dirname)); app.configure(function () {     app.use(express.logger('dev'));    /* 'default', 'short', 'tiny', 'dev' */     app.use(express.bodyParser()); }); app.get('/employees', emp.findAll); app.post('/employee', emp.addEmp); app.put('/employee/:id', emp.updateEmp); app.get('/employee/:id', emp.findById); app.delete('/employee/:id', emp.deleteEmp); app.listen(3000); console.log('Listening on port 3000...'); var mongo = require('mongodb'); var Server = mongo.Server,     Db = mongo.Db,     BSON = mongo.BSONPure; var server = new Server('localhost', 27017, {auto_reconnect: true}); db = new Db('empdb', server); db.open(function(err, db) {     if(!err) {         console.log("Connected to 'empdb' database");         db.collection('empdata', {strict:true}, function(err, collection) {             if (err) {                 console.log("The 'empdata' collection doesn't exist. Creating it with sample data...");               populateDB();             }         });     } }); var populateDB = function() {   var employees = [     {         id: "1",         name: "John",         dob: "08/06/1977",         gender: "Male",         designation: "Consultant"     },       {         id: "2",         name: "Robert",         dob: "09/08/1977",         gender: "Male",         designation: "Sr.Consultant"     }     ];   db.collection('empdata', function(err, collection) {         collection.insert(employees, {safe:true}, function(err, result) {});     }); }; 

The above server.js is calling  another js file in routes folder which is employee.js so Create a js file called employee in route folder and add the below code in the js file.

 exports.findAll = function(req, res) {     db.collection('empdata', function(err, collection) {         collection.find().toArray(function(err, items) {             res.send(items);         });     }); }; exports.addEmp = function(req, res) {     var emp = req.body;     console.log('Adding Employee: ' + JSON.stringify(emp));     db.collection('empdata', function(err, collection) {         collection.insert(emp, {safe:true}, function(err, result) {             if (err) {                 res.send({'error':'An error has occurred'});             } else {                 console.log('Success: ' + JSON.stringify(result[0]));                 res.send(result[0]);             }         });     }); } exports.deleteEmp = function(req, res) { var empToDelete = req.params.id; db.collection('empdata',function(err,collection){ collection.remove({'id':empToDelete},function(err){   res.send((err === null) ? { msg: '' } : { msg:'error: ' + err }); }) }) } exports.updateEmp = function(req, res) {   var id = req.params.id;     var emp = req.body;   db.collection('empdata', function(err, collection) {         collection.update({'id':id},emp,function(err, result) {             if (err) {                 res.send({'error':'An error has occurred'});             } else {                 console.log('Success: ' + JSON.stringify(result[0]));                 res.send(result[0]);             }         });     }); } exports.findById= function (req,res) { var empId = req.params.id; db.collection('empdata',function (err,collection) {     collection.find( { id: empId } ).toArray(function(err, items) {             res.send(items);         });   }) } 

The main crux of this Document would be Enabling the REST API for MongoDB  CRUD calls . we can actually perform the REST calls from the same browser.




The functionality in our UI5 app would actually using this REST calls to CRUD our MongoDB database installed locally.


complete project including ui5 app  can be  found on github  link  GitHub – prasadvsrk/meui5n 

node_modules can be created by using npm install command in project folder and resources folder from UI5 SDK site.


just extract the file and copy the web app in your project location .

So from Server side our main things would Node js with node modules folder, Mongo db should be up and running with required db and collection.

Node server.js command  in the same path will start the server.

Run the app using the URL https://localhost:3000/webapp/index.html


Here are some of the screen shot of app The screen shows the Create and Get operation . clicking on the row in the table will enable the Update and Delete Operation




Thanks

Prasad VSRK


New NetWeaver Information at SAP.com

Very Helpfull

User Rating: Be the first one !