කෙටියෙන් කිව්වොත් flutter කියන්නේ 2017 මැයි මාසේ Google ලා හදුන්වා දුන්නු නවතම open – source mobile application development SDK එක. Mobile application development ලේසියෙන් වගේම ලස්සනට development කරන්න flutter වලින් පුලුවන්. Android App වගේම IOS App develop කරන්න flutter වලින් ඉඩ සලසා දීලා තියෙනවා.

අපි මුලින්ම බලමු flutter අපේ laptop වලට install කරගන්න විදිය.පහත link එකෙන් flutter download කරගන්න පුලුවන්.

https://flutter.io/docs/get-started/install

‌Flutter zip file එක උඩ link එකෙන් download කරගෙන zip file එක extract කරනකොට C:/src/flutter වගේ destination එකකට extract කරන එක තමයි හොදම C:/Programs Files/src/flutter වගේ destination එකකට extract කරනවානම් privileges හදන්න වෙනවා එ නිසා C:/src/flutter වගේ destination එකකට extract කරන එක තමයි හොදම.

Flutter install කලාට පස්සේ path එක set කරන්න ඔනී. Edit the system environment variable වල Environment Variable tab එකෙන් කරන්න පුලුවන්.

Flutter install කරගෙන editor එකක් setup කරගන්න ඔනේ. Flutter support කරන editors වෙන්නේ Android Studio, Visual Studio Code, IntelliJ IDEA Ultimat. මොන editor එකක් use කලත් laptop එකේ Android Studio install කරලම තියෙන්න ඔනේ.

Visual Studio Code editor එක විදියට configure කරන ආකාරය පහත link එකෙන් බලාගන්න පුලුවන්.

https://flutter.io/docs/get-started/editor?tab=vscode

‌Android Studio editor එක විදියට configure කරන ආකාරය පහත link එකෙන් බලාගන්න පුලුවන්.

https://flutter.io/docs/get-started/editor?tab=androidstudio

ඊලග blog එකෙන් login page එකක් create කරන හැටි ඉගෙන ගමු..

The post මොකක්ද මේ Flutter ? appeared first on The SIGMA.

අපි කලින් ලිපි 2න් කතා කලා fontend එක සහ backend එක Design කරගන්න විදිය. මේ ලිපියෙන් කතා කරන්නේ මේ වෙන වෙනම හදා ගත්ත fontend එකයි Backend එකයි එකට Connect කරගන්නේ කොහොමද කියලා. කලින් ලිපි 2 බැලුවේ නැත්නම් මෙතනින් බලන්න

Part 01
part 02

මුලින්ම frontend කියන folder එක ඇතුලට ගිහින් එතනින් command prompt එකක් open කරන්න. දැන් අපි කරන්න හදන්නේ font එකේ පොඩි වෙනස්කම් කිහිපයක් කරන්න.

cd frontend

දැන් අපි අලුතින් Issue Service එකක් හදා ගන්න ඕන. ඒ service එක හරහා තමයි අපි Backend එකෙන් අපිට ඕන Data ගන්න සහ දාන්න යන්නේ. මුලින්ම ඒක මේ විදියට Generate කරගමු.

ng g s services/Issue

මේ විදියට issue service එක generate කරගත්තාම services කියලා folder එකක් ඇතුලේ issue.service.ts කියන file එක generate වෙනවා. දැන් අපි මේ issue service එක app.module.ts එකට import කරගන්න ඕන.

 import { IssueService } from './services/issue.service'; 

ඒ වගේම providers array එක ඇතුලටත් මේක දාගන්න.

providers: [IssueService]

මේකෙත් මේ issue Service එක අපේ components ඇතුලේ use කරන්න පුළුවන් වෙනවා.

Implementing IssueService

කලින් කිවුවා වගේ මේ issue Service එකේ අරමුණ තමයි backend එකත් එක්ක ගනුදෙනු කිරීම. ඒකට අපි http requests යොදා ගන්නවා. ඒක නිසා මේ විදියට මුලින්ම issue.service.ts file එකට httpClient එක import කරගන්න.

import { HttpClient } from '@angular/common/http';

ඒ වගේම Constructor එකට මේ http service එක inject කරගන්න මේ විදියට

constructor(private http: HttpClient) {}

Retrieving Issues

අපි දැන් බලමු කොහොමද Database එකේ save වෙලා තියෙන issue එකක් හෝ කිහිපයක් Backend එක හරහා Retrieve කරන්නේ කොහොමද කියලා.

මේකෙ වර්ග 2ක් තියෙනවා. ඒ කියන්නේ අපි issue ID එකක් දුන්නාම අදාල issue එක ගන්න එකයි තියෙන ඔක්කොම Issues ටික ගන්න එකයි. මේ method 2 හදා ගන්න විදිය බලමු.

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

 @Injectable({
   providedIn: 'root'
 })

 export class IssueService {
   uri = 'http://localhost:4000/';
   constructor(private http: HttpClient) {
   }
   getIssues() {
     return this.http.get(${this.uri}/issues);
   }
   getIssueById(id) {
     return this.http.get(${this.uri}/issues/${id});
   }
 }

මේකෙදි අපි කරන්නේ http://localhost:4000/issues කියන backend එක response කරන url එකට get request එකක් යවලා json object එකක් විදියට result එකක් ගන්නවා. getIssueById method එකෙන් කරන්නෙත් ඒ වගේම issue id එක දුන්නම අදාල issue එක josn object එකක් විදියට එළියට ගන්නවා.

Adding Issues

මේකෙදි අපි post request එකක් විදියට අපිට add කරන්න ඕන issue එකේ Data ටික යවන්න ඕන. ඒක කරන්නේ මේ විදියට..

   addIssue(title, responsible, description, severity) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity
     };
     return this.http.post(${this.uri}/issues/add, issue);
   }

ඔයාලට පේනවා ඇති මෙතනදි අපි post request එකත් එක්ක issue කියලා අපි අලුතින් හදා ගත්ත object එකත් යවනවා. මේ request එක යැවුවට පස්සේ එතනින් එහාට Backend එක තමයි Database operations handle කරගන්නේ. මතක ඇති අපි කලින් මේ methods ටික backend එකේ implement කලා.

Updating Issues

කලින් කරපු addIssue එක වගේම post request එකක් යවනවා මේකෙත් Update වෙන්න ඕන dataත් එක්ක.

updateIssue(id, title, responsible, description, severity, status) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity,
       status: status
     };
     return this.http.post(${this.uri}/issues/update/${id}, issue);
   }

Deleting Issues

මේකෙදි අපි කරන්නේ අපිට Delete කරන්න ඕන issue එකේ id එක get request එකක් විදියට යනවනවා backend එකට

deleteIssue(id) {
   return this.http.get(${this.uri}/issues/delete/${id});
}

මේ පහලින් තියෙන්නේ සම්පූර්ණ issue service file එකේ තියෙන code එක.

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

 @Injectable({
   providedIn: 'root'
 })

 export class IssueService {
   uri = 'http://localhost:4000/';
   constructor(private http: HttpClient) {
   }
   addIssue(title, responsible, description, severity) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity
     };
     return this.http.post(${this.uri}/issues/add, issue);
   }
   getIssues() {
     return this.http.get(${this.uri}/issues);
   }
   getIssueById(id) {
     return this.http.get(${this.uri}/issues/${id});
   }
   updateIssue(id, title, responsible, description, severity, status) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity,
       status: status
     };
     return this.http.post(${this.uri}/issues/update/${id}, issue);
   }
   deleteIssue(id) {
     return this.http.get(${this.uri}/issues/delete/${id});
   }
 }

Injecting The Service

දැන් කරන්න තියෙන්නේ අපි හදපු issue Service එක inject කරගන්න එක. ඒකට අපි හදපු හැම component එකේම (list.component.ts, edit.component.ts and create.component.ts) මේ විදියට දාගෙන යන්න.

import { IssueService } from '../../services/issue.service';

ඒ වගේම මේ විදියට dependency injection එකක් කරන්නත් ඕන

 constructor(private issueService: IssueService, private router: Router) { }

හැම component එකේම මේ විදියට හදා ගත්තාම අපේ components Design කරගන්න එකේ මූලික පියවර ඉවරයි.

අපි මේ ලිපියෙදි ඉගෙන ගත්තේ angular service එකක් හරහා backend එකත් එක්ක fontend එක connect කරන්නේ කොහොමද කියලා. ඊළඟ ලිපියෙන් අපි කතා කරමු front-end එක complete කරගන්නේ කොහොමද කියලා. මේ දක්වා මොනවා හරි අවුලක් තිබුණොත් comment එකක් දාන්න.

The post MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 03) appeared first on The SIGMA.

අපි කලින් ලිපියෙන් කතා කලා කොහොමද 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 කරගන්න විදිය ගැන…

The post MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 02) appeared first on The SIGMA.