Skip to main content

Express.js වලින් වැඩ ගන්න


කොහොමද අපේ වැඩ්ඩො ටික…. අද මං මෙ ලිපියෙන් ගේන්නේ server side වැඩ කරන්න පුළුවන් framework එකක් ගැන. ඒ Express Js. නමින්ම එක Express. ඒ බව මේ Framework එකෙන් වැඩ කරද්දි ඔයාට තේරෙයි. Express වලින් වැඩ ගන්න නම් ඔයා මිට කලින් NodeJs ගැනයි JavaScript ගැනයි දැනගෙන ඉන්න ඕනේ…


මොකක්ද මේ Express කියන්නේ?

Express හදලා තියෙන්නේ server side එහෙමත් නැතිනම් back end එකේ implementation වලට. Back-end, Front-end ගැන අපි කලින් කතා කරලා තියෙනවා. Express වලින් පුළුවන් ඔයාගේ computer එකේ port එකක් http සදහා open කරන්න. එහෙම කරලා ඔයාට පුළුවන් ඔයාගේ computer එකේ වෙබ් අඩවියක් උනත් publish  කරන්න.

  • ●       Web application නිර්මාණය කිරීමට සහ API නිර්මාණය කිරීමට
  • ●       බොහෝ විශේෂාංග සහිත වීම (available via plugins)
  • ●       පැමිනෙණ requests දිෂාගත කළ හැකි වීම (routing)
  • ●       ඉහළ කාර්යක්ෂමතාවය (High performance)
  • ●       සේවාවන් පුළුල් කළ හැකි වීම (Extensible)
  • ●       නැවත නැවත්තත් ප්‍රයෝජනයට ගත හැකි වීම (Reusable)


මොනවද මේ framework එකෙන් කරන්න පුළුවන්?

Express use කරන්නේ බොහෝ දුරට Rapid Application Development සදහා. ඒක මෙහෙමයි වෙන්නේ. අපි Express use කරන්නෙ NodeJs කියන Development Environment එක මත. අපි Node මත Express app එකක් හදලා code කරන ගමන් output බලන්න පුළුවන් නැවත නැවත server එක restart කරන්නේ නැතුව. Express environment එක හදාගත්තට පස්සේ Express app එකක් localhost එකේ publish කරන්න ඔනේ පොඩිම පොඩි code ටිකක් විතරයි. එහෙම කරාට පස්සෙ ඔයාට පුළුවන් web service එකක් එහෙමත් නතිනම් වෙබ් සේවාවක් සදහා API එකක් හදන්න. ඒ කියන්නේ JavaScript වලින් ඔයාට server side programming කරන්න express ඉඩ දීලා තියෙනවා.
  • Uniform interface: - GET, POST වැනි http request භාවිතා වේ
  • Stateless: - clientගේ state එක server එක නොදනී.
  •  Cacheable: - REST services cacheලෙස යම්කිසි කාලයක් මතකයේ තබාගනී
  •  Client-Server: - සේවා යෝජිත සහ සේවා ලාභී සම්බන්දයක් පවතී
  •  Layered System: - ලේයර ආකෘතියකින් සමන්විත වේ
  • Code on demand: - clientට js යවා browser එක තුළ execute කරගන්නට කියයි


මොකක්ද මේ API එකක් කියන්නේ?

API එකක් කියන්නේ Application Programming Interface කියන එක. ඒ කියන්නේ අපි server එකක් හරහා දෙන සේවාව ලබා ගන්නා අනෙකුත් developersලාට පෙනෙන අතුරුමුහුණතක් වගේ එකක්. මෙහෙම හිතන්න. ඔයා හරි අමාරුවෙන් යම්කිසි සේවාවක් code කරලා යම්කිසි server එකකට දාලා ඕනෑම කෙනෙකුට පාවිච්චි කරන්න ඉඩ සලසනවා කියලා. ඔයාගේ code එක open source නෙවේ නම් ඔයාට ඕනේ වෙනවා ඒ code එකේ implementation එක hide කරන්න. ඒකට interface use කරන්න පුළුවන්. API එකක් හරියට මේ වගේ:
ලිංක් එකක් තියෙනවා :- https://ideamart.dialog.lk/v2/sms/moregister ඒ link එකට GET, POST, PUT, DELETE වගේ HTTP request යවල එහි සේවාවන් පාවිච්චි කරන්න  පුළුවන්. Request එකට JSON, XML වගේ response එකක් ආවට ඇතුලේ මොකද වෙන්නේ කියලා ඔයාට පේන්නේ නෑ. ඒකයි API එකක් තියෙන විශේෂත්වය.
API ගොඩක් ප්‍රයෝජනවත්. උදාහරණයක් විදිහට Dialog Ideamart කට්ටිය use කරන්නේ hSenid API එක. hSenid එකෙන් එයාලා SMS, USSD වගේ gateway APIs මිලදී අරන අයෙත් developersලාට Ideamart හරහා API වශයෙන් ලබා දෙනවා. ගොඩක් කෝටිපති ව්‍යාපාර පවා අද මේ හරහා බිහි වෙලා තියෙනවා

Express වලින් server එකක් හදන්න මොනවද ඕනේ?

  • 1.      Node Js ඔයාගේ පරිගණකයේ install කරල තියෙන්න ඕනේ
  • 2.      Web Development IDE එකක්: මම පාවිච්චි කරන්නේ JetBrains WebStorm
  • 3.      Web browser එකක් සහ එය තුළට install කළ REST plugin එකක්. (මම නම් පාවිච්චි කරන්නේ Opera browser එකයි Simple REST කියන plugin එකයි)
  • 4.      Javascript, HTML මූලික දැනුම.
  • 5.      250Mb විතර ඩේටා (dependency install කරගන්න)
  • 6.      තව Monitor එකක් අරන් Dual Screen දාලා වැඩේ කරගන්න පුළුවන් නම් නියමයි! (Optional)

කොහොමද server එකක් හදාගන්නේ?

මුලින්ම WebStorm වගේ web development environment එකක් install කරගන්න. ඔයා university එකක ශිෂ්‍යයෙක් නම් university email එකෙන් ඔයාට අවුරුද්දක license key එකක් ගන්න පුළුවන්.
ඔයගේ computer එකේ NodeJs install කරල තියෙනවද කියලා බලන්න ඕන. ඒ සදහා පහත code එක WebStorm console එකෙ run කරලා බලන්න.


node –version

ඉන් පස්සේ Empty project එකක් හදලා NodeJs environment එක හදාගන්න. මොකද අපි මේ ඔක්කොම වැඩ කරන්නේ NodeJs environment  එක උඩ නිසා. Webstorm console එකේ පහත code එක run කරලා චුට්ටක් වෙලා ඉන්න. node_modules කියන folder එකට 200Mb විතර Dependency Modules ඩවුන්ලෝඩ් වේයි. ඒවා නැතුව අපට Node වලින් වැඩ ගන්න බැහැ.
මෙහිදී package.json නමින් file එකක් create වෙනවා. එකේ අපේ project එකට අදාල dependencies, project එකේ නම, version එක ආදී වැදගත් තොරතුරු තියෙනවා. මේක automatically හදෙන්න ඕනේ. මකන්න නම් එපා. edit කරන්න පුළුවන් ඒත් පරිස්සමෙන්…
දැන් Express app එකක් හදන්න පටන්ගමු. මේ සදහා කලින් හදපු project template  එහෙමත් නත්තම් artifacts තියෙනවා. එහෙම එකක් ගන්නවා නම් මේ code එක run  කරලා ගන්න. නැත්තම් ඉවසන්න. මුළ ඉදන් හදන්න කියලා දෙන්නම්.

NodeJs ප්‍රො එකක් හදාගත්තට පස්සේ ExpressJs modules ටික NodeJs project එකට අතුළත් කරගන්න ඕනේ.


npm install express –save
ඉන් පසුව Server.js නමින් js file එකක් හදාගෙන පහත code එක යොදන්න.



'use strict'; 
const express = require('express'); 
const app = express(); 
app.use(express.static(__dirname)); 

app.get('/', (req, res, next) => { 
res.sendFile('index.html'); 
}); 

app.listen(3000, err => { 
if (err) { 
console.error(err); 
return; 
} 
console.log('app listening on port 3000'); 
});
දන් ඔයාගේ HTML දැනුම උපයෝගී කරගෙන සරල “Hello World” .html file එකක් හදාගන්න.


 
  My first app
 
 
   

Hello World!
Save කර වම්පස ඇති project directory එක තුලින් server.js file එක මත right click කර run කරන්න. එසෙත් නොමැති නම් පහත ආකාරයට console එක මගින් Server.js run කරගන්න.


Start server.js


Webstorm console එකෙ 'app listening on port 3000' ලෙසින් දිස් වේවි.
දැන් web browser එකේ http://localhost:3000 ලිපිනයට ගිහින් බලන්න. ඔයාගේ “Hello World!” html file එක  ඔබට පෙනේවි.

localhost කියන්න ඔයාගේ පරිගණකය කියන එක. 3000 කියන්නේ open http port number එක.
දැන් ඉතින් වැඩේ හරි. තවත් දියුනු කරලා එක එක වෙනස්කම් කරලා බලන්න. ඔයා code එක වෙනස් කරලා save කරද්දි server එක auto refresh වෙන හැටි ඔබට පෙනේවි. ඒ තමා Express වල විශේශත්වය! ගැටළු, අඩුපාඩු තියෙනවා නම් comment කරන්න. තවත් ලිපියකින් REST API එකක් හදාගන්න ආකාරය කියලා දෙන්නම්.


Pro Tip: 

WiFi Router එකකින් ඔයාගේ පරිගණකය network එකකට සම්බන්ධ වෙලා ඉන්නවා නම් router එකේ control pannel එකෙන් ඔයාගේ computer එකේ IP address එක හොයාගන්න. ඉන් පසුව ඔයාගේ WiFi network එකට සම්බන්ධ වෙලා ඉන්න mobile phone එකක්, tab එකක් අරන් එකේ web browser එකේ localhost වෙනුවට අර IP address එක එක යොදලා බලන්න. උදා: http://192.168.1.1:3000


Labels:

Comments

Post a Comment

Popular posts from this blog

Introducing props

React alloıs us to send data to a component in the same syntax as HTML, using attributes or properties on a component. This is akin to passing the src attribute to an image tag. We can think about the property of the  < img /> tag as a prop we're setting on a component called img . We can access these properties inside a component as this.props . Let's see props in action. Recall, we defined the  < Header /> component as:   When we use the < Header /> component, we placed it in our component as like so: We can pass in our title as a prop as an attribute on the < Header / > by updating the usage of the component setting the attribute called title to some string, like so:  Inside of our component, we can access this title prop from the this.props property in the Header class. Instead of setting the title statically as Timeline in the template, we can replace it with the property passed in.  Now our  < Header />  compone
Post a Comment
Read more

Science Animated - Chemistry, Physics Experiments On Android Mobile

  " Science Animated " is an educational app that will allow you to conduct physics and chemistry experiments in an easy and really entertaining way within your classroom and beyond. With "Science Animated", you will be able to create engaging experiments utilizing the accelerator, the pH scale and other scientific instruments. You will also find pre-designed educational games that have been especially created for you! "Science Animated" is transforming physics and chemistry from theoretically intense to intensely fun!   ############## Features ############## * Earn more points while you learn. * Use your points to activate all premium content for free. * Share and redeem points. * Login with google to save your points and use across all Asia Cloud Apps. ################ Labs ############### * pH Scale * pH Scale: Basics * Arithmetic * Molecular shapes * Shapes of the molecules: basic points * Acid solvents * Light reflex * Oh's law * Resistance of wir
Post a Comment
Read more

GIT & GitHub A to Z

Concept of Version Controlling.  Version control  is a system that records changes to a file or set of files over time. Then you can recall specific  versions  later. For the examples in this blog, you will use my source code on GitHub as the files being  version  controlled. There are three types of Version Control Systems. 1. Local Version Control System ( maintains track of files within the local system ) 2. Centralized Version Control System (   files are tracked under the centralized server ) 3. Distributed Version Control System ( clients completely clone the repository including its full history ) Those version control systems are  broken down into two main categories,  centralized  and  decentralized  ( distributed ). The GIT terminology Most version control systems involve the following concepts. Popular Version Control Systems: SVN:  https://subversion.apache.org/ Git:  https://git-scm.com/ Mercurial:  https://www.mercurial-scm.org/
Post a Comment
Read more