අපි කලින් ලිපි 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.

Database Commands

ඉතින් මෙහෙම mongo DB server එක on කරගත්තට පස්සේ අලුත් console එකක් open කරගෙන mongo කියල type කරන්න එතකොට ඔයාට ඔයගේ තියෙන mongo DB version එක මොකක්ද කියල  බලාගන්න පුලුවන්,ඒ console එකේ තමයි අපි command කරන්නේ.

දැනට තියෙන database මොනවද කියලා බලාගන්නා ඕනිනම් show dbs කියලා type කරන්න​.එතකොට දැනට තියෙන database ටික මෙන්න මේ විදියට පෙන්නනවා.

config කියල තියෙන්නෙ මම හදපු database එකක්.අපි බලමු mongo DB වල අලුතින් database එකක් හදාගන්නේ කොහොමද කියලා.mysql වල නම් create database ගැහුවම database එක හැදෙනවා,හැබැයි ඒ database එක ඇතුලට යන්න අපිට ආයිමත් use databse කියල type කරන්න වෙනවා,mongo වල එහෙම ඕනි වෙන්නේ නැ,use කියල ගහලා database එකේ නම ගැහුවහම database එක create වෙලා auto ම switch වෙනවා.

දැන් මම customer කියලා database එකක් හදන හැටි පෙන්වන්නම්.

මම හිතනවා දැන් ඔයලට පැහැදිලි වෙන්න ඇති කියලා.දැන් මම කියලා දෙන්නම් mongo වල data save වෙන්නේ කොහොමද කියලා,මම කලින් ලිපියේ කිව්වා document එහෙම නැත්තම් json syntax (java script object) විදියට තමයි මේ data save වෙන්නේ කියලා.මම පෙන්වන්නම් කොහොමද ඒක කරන්නේ කියලා.

1.අපිට පුලුවන් key එකයි value එකයි විදියට data insert කරන්න​.

2.Array එකක් විදියට insert කරන්න 

3.object එකක් විදියට insert කරන්න

4.Array object එකක් විදියට insert කරන්න

ඉතින් මම මේ ඔයාලට පැහැදිලි කලේ mongo  වල​ data insert කරන්න පුලුවන් විදි නැත්තම් ආකාර​ ගැනයි.

දැන් අපි බලමු අපි හදාගත්ත customer database එක ඇතුලේ table එකක්  හදාගෙන ඒකට data insert කරන්නේ කොහොමද කියලා,table එක හදගන්න කලින් බලන්න database එක හරියට switch වෙලා තියෙනවද කියලා.එකේ error එකක් නැතිනම් මෙන්න මේ db.createCollection(‘table name’)  command  එක type  කරලා අලුතින් table එකක් ඒ කියන්නේ collection එකක් හදාගන්න.

(මේ හැම දේකදිම mongo  server එක on වෙලා mongo shell  එකක් open වෙලා තියෙන්න ඕනි)​

ඉතින් මේ collection එක හරියට generate වුනාද කියලා show collections command එක type කරලා ඔයාලට බලන්න පුලුවන්.

දැන් ඔයාලට පේනවා ඇති table එක හැදිලා තියෙනවා.දැන් table එකට data insert කරමු.

මුලින්ම db.user.insert({first:”kamal”,last:”silva”}) type කරන්න​.ඊට පස්සේ ඔයාට හරියට insert වුනාද කියලා බලාගන්න ඕනිනම් db.user.find() command එක type කරන්න​.

මොකක්ද මේ ObjectId එක කියන්නේ,my sql වල නම්  table එකක් හදනකොට අපි id කියලා field එකක් හදලා ඒක Auto Increment දෙනවා අපේ primary key එක විදියට​,mongo වල එහෙම ඕනි වෙන්නෙ නැ,එයාම Auto Id එකක් හදගන්නවා,මම ඒක කරලම පෙන්වන්නම්.ඒකට මම තව data set එකක් enter කරන්නම්.

දැන් ඔයලට පේනවා ඇති ObjectId එක auto  හදාගන්නවා කියල.මේකෙදි මම තව දෙයක් කලා.ඒ තමයි table එකට තව feild එකක් add කරපු එක,මේකට තමයි scaling කියලා කියන්නේ,ඒ කියන්නේ අතරමැදදී අපේ table එකට අලුතින් feilds add කරගන්න පුලුවන් කියන එකයි.ඒකත් මේ mongo DB වල විශේශ දෙයක්.

db.user.find().pretty() command එක type කරල බලන්නකෝ,එතකොට insert කරපු data ටික වඩා පැහැදිලිව බලාගන්න පුලුවන්.

insert කරන එක දැනට නවත්තලා table එකක් update කරන්නෙ කොහොමද කියලා දැන් බලමු.

මේකට මම කලින් insert කරපු data set එකම යොදා ගන්නම්.db.user.update({match},{update data set}) මේක තමයි command එක,​

මෙහෙම කිව්වට සමහරවිට ඔයාලට තේරුනේ නැතිව ඇති,මම ඒක පැහැදිලි කරන්නම්.මම පලවෙනිපාර insert කරපු data set එකේ town කියලා feild එකක් තිබ්බේ නැ,මම ඒක අලුතින් update කරලා පෙන්වන්නම්.

db.user.update({first:”kamal”},{first:”kamal”,last:”silva”,town:”gampaha”})  command එක​ type කරලා enter කරන්න​.ඊට පස්සෙ db.user.find().pretty() type කරන්න​.දැන් ඔයාලට පේනවා පලවෙනියට insert කරපු  data set එක update වෙලා කියලා.

දැන් අපි බලමු delete function එක වැඩ​ කරන්නේ කොහොමද කියලා.db.user.remove({first:”kamal”}) මෙන්න මේ command එකෙන් first name එක “kamal” වෙන සියලුම data remove වෙලා යනවා.

ඉතින් අද අපි කතා කලේ මේ insert,delete,update function වලට අදාලවන මූලිකම කරුණු ටිකක්, මගේ ඊලග ලිපියෙන් මේ function කෙටියෙන් කරන්නේ කොහොමද​, ඒ වගේම එක සමාන data set එකක් තිබුනහම මේ function වැඩ කරන්නේ කොහොමද කියලා පැහැදිලි කරන්නම්.

The post MEAN Part 2 (Mongo DB) appeared first on The SIGMA.

web development application එකක​ front end එක ඒ කියන්නේ client side කොටස​ වගේම backend එක  ඒ කියන්නේ server side කොටස නිර්මණය කිරීමට විවිධ platform තියෙනවා. ඉතින් Mean වල,

data base system->Mongo DB

back end web framework->Express

front end framework->Anjular.js

back end run time environment->Node.js

ඉතින් මොනාද මේ platform ඒවයින් කොහොමද වැඩ කරන්නේ කියල මම මෙතැන් සිට ඉදිරියට පැහැදිලි කරන්නම්.

මුලින්ම මම MEAN STACK වලට අදාලව database system එක  වන Mongo DB ගැන පැහැදිලි කරන්නම්.

Mongo DB

මෙහිදී මම කොහොමද Mongo DB අපේ computer එකට​ install කරගන්නේ,කොහොමද Mongo DB වලින් insert,delete,update වගේ Fundamental කරන්නේ වගේම mongoose ගැනත් පොඩ්ඩක් කතාකරන්න බලපොරොත්තු වෙනවා.

Mongo DB කියල කියන්නේ No Sql ගනයට වැටෙන database එකක්.ඉතින් එතනම අදහස පැහැදිලි වෙනවනෙ.අපි සාමාන්‍යයන් පාවිච්චි කරන්නේ Relational Database,  මේවට​ හොදම උදහරණයක් නෙ My Sql කියල කියන්නේ.ඉතින් මේ Relational Database වලට වඩා advance data base එකක් තමයි no sql database කියල කියන්නේ.

Mongo DB වල තියෙන විශේෂත්වය තමයි document නැත්තම් json syntax විදියට තමයි data store කරගන්නේ.

(මේ json syntax කියන්නේ මොකක්ද කියල මම ඉදිරියට පැහැදිලි කරන්නම්)

Relational Data Base එකක අපිට මුලු database එකම map කරන්න වෙනවා.ඒ කියන්නේ අපි database එකක් හදනකොට අපිට එකේ fields,data types,tables ඔක්කොම හදන්න වෙනවා.කොටින්ම කිව්වොත් structure එකක් තියගන්න වෙනවා.හැබැයි mongo DB වල එහෙම ඕනි වෙන්නේ නැ.අපිට කෙලින්ම scale එකක් තියගන්න පුලුවන්.එක මේ no sql වල තියෙන ප්‍රධාන වාසියක්.

ඉතින් අපි data විශාල ප්‍රමාණයක් handle කරනවනම් වඩා හොද database system එක තමයි Mongo DB ,මේ data base වල තියෙන තව වාසියක් තමයි speed එක  Relational Database වලට වඩා වැඩි වීම​.

ඉතින් මම හිතනවා mongo DB ගැන පොඩි අදහසක් ගන්න ඇති කියල මේ පැහැදිලි කිරීමත් එක්ක​,

අපි ඊලගට බලමු කොහොමද මේ Mongo DB, computer එකට install කරගන්නේ කොහොමද​ කියලා.

mongo DB site(www.mongodb.com) එකට ගිහින් download කරන ආකාරය මම පියවර අකාරයෙන් දක්වන්නම්.

පියවර 1:

පියවර 2:

පියවර​ 3:

ඉතින් මම​ හිතනවා මම පැහැදිලි කරනවට වඩා මේ පියවර ටික බලලා ඔයලා තේරුම් ගන්න ඇති කියල කොහොමද mongo DB install කරන්නේ කියලා.

3 වෙනි පියවරේ platform එකට අදාලව​ msi file එක download කලාට පස්සේ ඒක open කරලා install කරන්න.mongo DB run කරන්න computer එකේ නිකන්ම install විතරක් කරල මදි,ඒකට variable path එක හදගන්න ඕනි.මම පැහැදිලි කරන්නම් කොහොමද ඒක කරන්නේ කියලා.

mongo DB install කරලා තියෙන තැන (සාමාන්‍යයෙන් c drive එකේ) open කරන්න​.ඊලගට ඒකේ තියෙන බින් file එකේ path එක copy කරගෙන​ Advanced System Setting යටතේ Environment variable වල User Variable එකේ​ path එක set කරගන්න​.

(මෙහෙම මම කිව්වට ඔයලට සමහරවිට තේරුණේ නැතිව ඇති,මම පෙන්වන්නම් කොහොමද path එක set කරගන්නේ කියලා)

ඉතින් මෙහෙම install කරල ඉවර වෙලා ඔයාගෙ cmd එක open කරල mongod කියල type කරන්න​.හරියට install උනානම් මෙන්න මෙහෙම details ටිකක් එන්න ඕනි.

mongod කියල command එක run කරලා අපි කරන්නෙ mongo DB server එක on කරන එකයි.

mongo DB  වල insert,delete,update කරන්නේ කොහොමද කියල කියන්න ඕනි වුනත් ලිපියේ මුලම mean stack ගැන විස්තර ටිකක් කතාකරපු හින්දා ලිපිය අවශය ප්‍රමනයට වඩා දිග වුනා.ඒක හින්දා ඒ කොටස මම ඊලග ලිපියෙන් කතාකරන්න බලාපොරොත්තු වෙනවා.

The post MEAN Part 1 (Mongo DB) appeared first on The SIGMA.