Skip to main content

Express Js - එක්ස්ප්‍රස් js වලින් වැඩ ගනිමු


යළුවනේ, අද ම්ං මේ කියන්න යන්නේ තවත් JavaScript Library එකක් ගැන. ඒ Express JS. මේක Node.Js වලටම හදපු Web Framework එකක්. Express කියන්නේ වෙබ් සහ ජංගම යෙදීම් සඳහා ශක්තිමත් විශේෂාංගයක් සපයන අවම හා නම්‍යශීලී Node.js Web Framework එකක්. (වෙබ් යෙදුම් රාමුවක්).
මේ Framework එකෙන් පරිශීලක අතුරු මුහුනතයි (User Interface) එකයි Back End එකයි එකතු කරන්න API (Application Programming Interface) එකක් හදාගන්න පුළුවන්. ඒ කියන්නේ අපි හදන වෙබ් ඇප්ලිකේශන් (Web Application) එකේ පරිශීලකයාට පෙනෙන UI එකයි Server එකේ තියෙන ප්‍රධානම බිස්නස් ලොජික් (Business Logic) එකයි සම්බන්ධ කරන්න පුලුවන් මේ Framework එකෙන්.

 Node JS : npm පාවිච්චි කරල හරිම පහසුවෙන් අපේ project එකට එකතු කරගන්න පුළුවන්. Project path එකේ console එකක් අරන් එකේ මේ code එක execute කරන්න මුළින්ම. මේකෙන් project එකට අවශ්‍ය Express node module එක ඔයාගේ project root එකේ node-modules එකට එකතු කරනවා.


$ npm install express --save

දැන් ඔයගේ ප්‍රොජෙක්ට් එකට Express dependencies එකතු වෙලා තියෙන්නේ. දැන් app එකක් හදන්න මෙන්න මේ විදිහට server.js කියල file එකක් open කරලා මෙ code එක ලියන්න. (මේ පියවර කරන්න කලින් Node Js ඔයාගේ computer/server එකෙ Install කරලා project එකටත් එකතු කරගෙන තියෙනවා කියලා හිතමු)


const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))


දැන් මේ කෝඩ් එක run කරන්න. const app = express() කොටසින් express app object එකක් ක්ෂණිකව හදාගන්න පුළුවන්. මේ app එක server එකක් ආරම්භ කරනවා. ඒ app එක අපි දීලා තියෙන ආකාරයට port 3000 එකට සම්බන්ධතාවයක් එන තුරු බලන් ඉන්නවා.

node server.js


දැන් web browser එකක් open කරලා http://localhost:3000 එකට යන්න. localhost කියන්නේ server එකේ නම. 3000 කියන්නේ server එකේ public open කරපු port එක. අවසානයේ web browser එකේ "Hello World!" කියල ඔබට දකින්න ලැබේවි. වරදක් ඇති නම් ප්‍රවේශමෙන් console එකේ ඇති errors කියවලා බලන්න.

Pro tip එකක්: ඔයා ඉන්නේ එකම network connection (Ex: wifi router) එකකට connect වෙලා නම් phone එකෙනුත් මේ app එක බලන්න පුලුවන්. කරන්න තියෙන්නේ localhost වෙනුවට ඔබේ පරිගණකයේ IP ලිපිනය යෙදීමයි. Ex: http://192.168.1.1:3000

 මේ තාක්ෂණික කරුණු හොදින් මතක තියාගන්න. දිගටම node and express එක්ක practice කරන්න. තවත් කරුණු අත්දැකීමෙන්ම ඔබට අවබෝධ වේවි. express වලින් ලොකු ලොකු වැඩ කරන්න පුළුවන්. Routers, Controllers සහ Models ගැනත් තව ගොඩක් කරුණු තියෙනවා. අපි ඒ ගැන ඉදිරියේදී කතා කරමු.
Labels:

Comments

Danny Danials said…
You will like it to enjoy our new app Score! Hero Mod Apk : which you could download and enjoy loose.
November 24, 2020 at 12:20 AM
Post a Comment

Popular posts from this blog

working with JSON

J avaScript O bject N otation is a schema-less, text-based representation of structured data, based on key-value pairs. JSON is derived from JavaScript and commonly, but not exclusively, used to exchange information between web clients and web servers through APIs..  Today JSON is the format of choice for almost every web service. Relational databases like PostgreSQL and MySQL now support for storing and querying JSON data. NoSQL databases like MongoDB and Neo4j also support JSON. Below I'll take a quick look at JSON. Let’s start with an example:  {   “firstName”: “Asiri”,   “lastName”: “Hewage”,   “loginCount”: 1,   “isOnline”: true,   “worksWith”: [“Pearson”, “Intern”],   “pets”: [     {       “name”: “Kalu”,       “type”: “Dog”     }   ] } Above structure clearly defines some attributes of an entity. It includes a first and last name ...etc. The structure may be passed from a server to a web browser or a mobile application, which will then perform some action such as
Post a Comment
Read more

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