MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 02)

Danushka Herath

2 months ago

Reading Time: 6 minutes

අපි කලින් ලිපියෙන් කතා කලා කොහොමද FrontEnd එක angular වලින් Design කරගන්නේ කියලා. ඇත්තටම අපි නිකත් Structure එකක් විතරයිනෙ හැදුවේ. දැනට ඒ ඇති. මේ ලිපියෙන් කතා කරන්නේ Node වලින් Backend එක හදා ගන්න විදිය ගැන. බලමු හදා ගන්නේ කොහොමද කියලා.

මුලින්ම අපි කලින් fontEnd කියලා අලුත් Project එකක් හැදුව තැනම අලුත් folder එකක් හදනවා Backend කියලා මේ විදියට.

mkdir backend

දැන් මම ඉන්න Directory එක වෙනස් කර ගන්නවා අලුතින් හදපු Folder එකට

cd backend

දැන් අලුත් project එකක් initialise කරගන්නවා මේ විදියට npm command එකෙන්.

 npm init -y

අපේ project එකේ ES6 Features යොද ගන්න නම් අපිට Babel compiler එක use කරන්න වෙනවා. ඒකට babel-cli එක සහ babel-preset-env එක මේ විදියට install කරගන්න පුළුවන්.

 npm install --save-dev babel-cli babel-preset-env

මේක install වෙලා ඉවර වුණාට පස්සේ අපි කරන්නේ Babel config file එක හදා ගන්න එක. ඒකට .babelrc නමින් අලුත් file එකක් හදලා ඒකේ content එක විදියට මේක දාගන්න.

{
  "presets": ["env"]
}

හරි දැන් Babel compiler එක use කරන්න අපිට පුළුවන්

Installing babel-watch

මේක අපි යොදා ගන්නේ code එකේ change එකක් වෙනකොට autoම server එක restart කර ගන්න. ඒක ගොඩක් ලේසියි Manual restart කරනවට වඩා. මේක Install කරගන්නේ මෙහෙමයි.

 npm install babel-watch --save-dev

ඊට පස්සේ අපි කරන්න ඕන Package.json එකට මේක add කරගන්න එක. ඒකට package.json file එක open කරගෙන මේක paste කරගන්න scripts කියලා තියෙන කොටස ඇතුලෙ.

 
"scripts": {
    "dev": "babel-watch server.js"
  }

මේක අපි add කරේ මේ ලිපියේ අන්තිමට අපි server එක start කරන්න මේ command එක use කරන නිසා.

Installing Express

අපි දැන් Express Framework එක add කරගන්න යන්නේ. මේ steps ටික follow කරන්න

 npm install express

අපි database එකක් විදියට යොදා ගන්න mogodb driver එකත් මේ විදියට install කරගන්න.

 npm install mongoose

ඒ වගේම මේකෙදි අපි backend එකේ ඉදන් frontend එකට data යවනවා. ඒක නිසා අපිට ඕන වෙනවා cors package එකත්.

 npm install cors

මේ cors කියන package එක Express server එකට middleware එකක් විදියට වැඩ කරනවා. ඒ කියන්නේ Cross-Origin Resource Sharing මේකෙදි වෙන්නේ මොකක් හරි request එකක header එකේ අපි allow කරලා තියෙන content එකක් තියෙනවද කියලා බලනවා Domain එකෙන් පිටින් එන requests වලට.

Implementing The Server

අපෙ Baisc Packages Installation එක ඉවර වුණාට පස්සේ අපි දැන් බලන්න හදන්නේ Server එක implement කරගන්න විදිය.

Implementing A Basics Node.js/Express Server

මුලින්ම අපි බලමු Baisc server එකක් හදා ගන්න විදිය.. මේකට project එකට අලුතින් file එකක් add කරන්න ඕන server.js කියලා. ඒකේ content එක මේ වගේ හදා ගන්න.


import express from 'express';
const app = express();
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(4000, () => console.log(`Express server running on port 4000`));

දැන් අපි මේක run කරලා බලමු. ඒකට මේ command එක use කරන්න.

npm run dev

මේ dev කියන වචනේ භිවිතා කරන්න පුළුවන් වුණේ අපි කලින් package.json එකට add කරපු නිසා. දැන් මේ url එක ( http://localhost:4000 ) web browser එකක් දැම්මොත් අපිට hello wold කියලා output එකක් බලා ගන්න පුළුවන්.

මොනවා හරි error එකක් ආවොත් fix කරගන්න try එකක් දීලා බැරි වුනොත් node_modules කියන folder එක backend එකේන delete කරලා package.json එක මේ විදියට හදාගෙන npm install කියන command එක run කරගන්න.

{
  "name": "backEnd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "babel-watch server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-watch": "^2.0.8"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.13"
  }
}

Extending The Server Implementation

දැන් අපි කරන්න යන්නේ මේ server එක අපිට ඕන විදියට වැඩි දියුණු කරගන්න එක. මේකෙදි අපි ප්‍රධාන Task 5ක් කරන්න යනවා. ඒවා තමයි

GET request එකකින් list එක retrieve කරගන්න එක
GET request එකකින් issue id එකකට අදාල record එකක් ගන්න එක
POST request එකකින් අලුත් issue එකක් insert කරගන්න එක
POST request එකකින් දැනට තියෙන record එකක් update කරගන්න එක
GET request එකකින් issue එකක් delete කරගන්න එක

මුලින් අපි හදපු server.js එක මේ විදියට හදා ගන්න.

const app = express();
 const router = express.Router();

 app.use(cors());
 app.use(bodyParser.json());

 mongoose.connect('mongodb://[server]/issues');
 const connection = mongoose.connection;

 connection.once('open', () => {
     console.log('MongoDB database connection established successfully!');
 });

 app.use('/', router);
 app.listen(4000, () => console.log(Express server running on port 4000));

මේකෙ mongoose.connect එක ඇතුලෙ තියෙන server එක වෙනුවට ඔයගෙ තියෙන remote server එකක් නැත්නම් local mongo server එක දාගන්න. local server එකක් නම් server වෙනුවට local කියලා දාගන්න. ඒ වගේම ඔයාගෙ mongo server එක ඇතුලේ issues කියලා අලුත් collection එකකුත් හදා ගන්න.

අපිට හැම තිස්සෙම issues refer කරන්න වෙන නිසා දැන් කරන්න හදන්නේ අලුතින් issue කියලා model එකක් හදා ගන්න එක. ඒකට ඔයාගෙ backend folder එක ඇතුලේ අලුතින් models කියලා folder එකක් හදාගෙන ඒක ඇතුලේ Issue.js කියලා file එකක් create කරගන්න. ඒකේ content එකට මේක paste කරගන්න. මෙකෙ අපි ලියන්නේ අපේ issue එකට ඕන කරන properties ටික.

 import mongoose from 'mongoose';
 const Schema = mongoose.Schema;
 let Issue = new Schema({
     title: {
         type: String
     },
     responsible: {
         type: String 
     },
     description: {
         type: String
     },
     severity: {
         type: String
     },
     status: {
         type: String,
         default: 'Open'
     }
 });
 export default mongoose.model('Issue', Issue);

දැන් අපි මේ හදා ගත්ත අලුත් model එක server.js එකට import කරගන්න ඕන. ඒකට Server.js එකේ මේ විදියට import command එකක් උඩින් ලියා ගන්න

import Issue from './models/Issue';

Retrieving All Issues

අපි දැන් කරන්න යන්නේ අපෙ පළවෙනි task එක. ඒ කියන්නේ issues list එකම retrieve කරගන්න එක. ඒකට මේ Code එක server.js එකේ ලියා ගන්න.

 router.route('/issues').get((req, res) => {
     Issue.find((err, issues) => {
         if (err)
             console.log(err);
         else
             res.json(issues);
     });
 });

මේකෙ වෙන වැඩේ සරලවම කිවුවොත් router එකට ‘/issues’ කියලා get request එකක් ආවොත් එයා Issue කියන Schema එකේ තියෙන records ඔක්කොම අරගෙන json response එකක් විදියට එළියට දෙනවා. ඕන නම් ඔයාලට පුළුවන් මේ Code එක වෙනස් කර කර බලන්න මොන වගේ දේවල්ද කරන්න පුුළුවන් කියලා.

මම මේ වගේ Methods ඔක්කොම ලියන විදිය කියලා අන්තිමට server.js එකේ තියෙන්න ඕන content එක දාන්නම්

Retrieving An Issue By ID

මේකෙදි කරන්නේ අපි issue එකේ id එක දුන්නාම ඒ ID එකට අදාල record එක විතරක් අරගෙන දෙන ඒක. ඒක ලියන්නේ මෙහෙමයි.

router.route('/issues/:id').get((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (err)
             console.log(err);
         else
             res.json(issue);
     })
 });

:id එකෙන් කියන්නේ අපිට හොයා ගන්න ඕන කරන id එක router parameter එකක් විදියට දෙනවා කියල. එතකොට අපි කලින් කතා කලා වගේ Schema එකට කියනවා අදාල id එක තියෙන record එක json object එකක් විදියට එලියට දෙන්න කියල.

Adding New Issues

අපි කලින් ක්‍රම දෙකේදිම කතා කලේ GET method එකෙන් data එකක් ගන්න විදිය. හැබැයි දැන් අපිට ඕන වෙනවා අලුතින් data එකක් නැත්නම් issue එකක් store කරගන්න. ඒකට අපිට data එක යවන්න වෙන නිසා අපිට post method එක යොදා ගන්න සිද්ධ වෙනවා. ඒක කරන්නේ මෙහෙමයි

router.route('/issues/add').post((req, res) => {
     let issue = new Issue(req.body);
     issue.save()
         .then(issue => {
             res.status(200).json({'issue': 'Added successfully'});
         })
         .catch(err => {
             res.status(400).send('Failed to create new record');
         });
 });

මේ විදියට එක post request එකේ body එකේ තියෙන data ටිකෙන් අපි අලුත් issue object එකක් හදලා ඒක db එකේ save කරගන්නවා.

Updating Issues

මේකෙදි අපිට වැඩ දෙකක් කරන්න වෙනවා. මුලින් අපි දෙන ID එකට අදාල record එක හොයා ගන්න වෙනවාත ඊට පස්සේ ඒකෙ තියෙන Data වෙනුවට අපි අලුතින් එවන ඒවා දාලා ඒක save කරන්න වෙනවා. මේ වැඩේ කරගන්නේ කොහොමද කියලා බලමු.

router.route('/issues/update/:id').post((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (!issue)
             return next(new Error('Could not load Document'));
         else {
             issue.title = req.body.title;
             issue.responsible = req.body.responsible;
             issue.description = req.body.description;
             issue.severity = req.body.severity;
             issue.status = req.body.status;
             issue.save().then(issue => {
                 res.json('Update done');
             }).catch(err => {
                 res.status(400).send('Update failed');
             });
         }
     });
 });

ඔයාලට පේනවා ඇති අපි මුලින්ම දෙන ID එකට අදාල records තියෙනවද කියලා check කරලා හම්බ වුණේ නැත්නම් error එකක් දෙනවා. හම්බවුණොත් අපි එකින් එක replace කරගෙන යනවා අපි දෙන අලුත් data set එක්ත් එක්ක.

Deleting Issues

මේක ගොඩක් සරලයි. සාමාන්‍ය විදියට id එකකින් අදාල issue එක හොයාගෙන delete කරලා දාන්න තියෙන්නේ. අපි data එවන්නේ නැති නිසා සාමාන්‍ය get request එකක් මේකට භවිතා කරන්න පුළුවන්.

router.route('/issues/delete/:id').get((req, res) => {
     Issue.findByIdAndRemove({_id: req.params.id}, (err, issue) => {
         if (err)
             res.json(err);
         else
             res.json('Removed successfully');
     });
 });

මේක ඉවර වුණාම අපේ Basic task ටික ඉවර වෙනවා. දැන් අපි බලමු අන්තිමට අපිට හැදිලා තියෙන server.js එක මොන වගේ එකක්ද කියලා. මේක දිහා බලලා ඔයාලගේ code එකේ අඩුපාඩු තිබුණොත් හදාගන්න.

 import express from 'express';
 import cors from 'cors';
 import bodyParser from 'body-parser';
 import mongoose from 'mongoose';
 import Issue from './models/Issue';
 const app = express();
 const router = express.Router();
 app.use(cors());
 app.use(bodyParser.json());
 mongoose.connect('mongodb://[server]/issues');
 const connection = mongoose.connection;
 connection.once('open', () => {
     console.log('MongoDB database connection established successfully!');
 });
 router.route('/issues/add').post((req, res) => {
     let issue = new Issue(req.body);
     issue.save()
         .then(issue => {
             res.status(200).json({'issue': 'Added successfully'});
         })
         .catch(err => {
             res.status(400).send('Failed to create new record');
         });
 });
 router.route('/issues').get((req, res) => {
     Issue.find((err, issues) => {
         if (err)
             console.log(err);
         else
             res.json(issues);
     });
 });
 router.route('/issues/:id').get((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (err)
             console.log(err);
         else
             res.json(issue);
     })
 });
 router.route('/issues/update/:id').post((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (!issue)
             return next(new Error('Could not load Document'));
         else {
             issue.title = req.body.title;
             issue.responsible = req.body.responsible;
             issue.description = req.body.description;
             issue.severity = req.body.severity;
             issue.status = req.body.status;
             issue.save().then(issue => {
                 res.json('Update done');
             }).catch(err => {
                 res.status(400).send('Update failed');
             });
         }
     });
 });
 router.route('/issues/delete/:id').get((req, res) => {
     Issue.findByIdAndRemove({_id: req.params.id}, (err, issue) => {
         if (err)
             res.json(err);
         else
             res.json('Removed successfully');
     });
 });
 app.use('/', router);
 app.listen(4000, () => console.log(Express server running on port 4000));

Testing The Server With Postman

Node වලින් backend එක හදා ගත්තට පස්සේ අපිට test කරගන්න පුළුවන් tool එකක් තමයි PostMan කියන්නේ. ඒක නැත්නම් මෙතනින් Download කරගන්න. ඒකෙන් අපේ backend එකෙන් එලියට Data ගන්න පුළුවන්ද කියලා check කරගන්න පුළුවන්.

Install කරගෙන ඉවර වුණාට පස්සේ node server එක run කරලා මේ වගේ request ගහලා බලන්න අපි හදපු routes වලට data එනවද කියලා

හරි මේ ලිපියෙන් අපි කතා කලේ Backend එක Nodejs වලින් Design කරගන්නේ කොහොමද කියලා. තේරුණේ නැති තැනක් තියෙනවා නම් Message එකක් දාන්න. ඊළඟ ලිපියෙන් කතා කරන්නේ අපි හදා ගත්ත Front එකයි Back එකයි Connect කරගන්න විදිය ගැන…