इस पाठ में हम सीखेंगे कि एक साधारण वेब (html) एप्लीकेशन कैसे शुरू करें Node.js पैकेज - express.js का उपयोग करके। हम उपयोग करेंगे Sublime कोड एडिटर लेकिन आप अपनी पसंद के किसी का भी उपयोग कर सकते हैं।
Step 0: एक नया फ़ोल्डर बनाएं- mweb3waves और इस फोल्डर में Sublime एडिटर खोलें।
Step 1: कोई नया HTML फ़ाइल बनाएं - index.html फ़ाइल mweb3waves फोल्डर में।
Step 2: इंस्टॉल करें Node.js सॉफ्टवेयर जैसा कि इस वेबसाइट में वर्णित है।
Step 3: टर्मिनल / कमांड लाइन खोलें और node.js और उसके पैकेज मैनेजमेंट टूल एन-पी-एम (npm) के वर्शन की जांच करें |
Step 4: एक package.json फ़ाइल बनाएँ। इस फ़ाइल में हमारे एप्लीकेशन में उपयोग किए जाने वाले सभी node.js packages पैकेज हैं।
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"dependencies": {
"express": "^4.16.4"
}
}
Step 5: चले इस express.js पैकेज को इंस्टॉल करें। टर्मिनल खोलें और mweb3waves फ़ोल्डर में "npm install" चलाएं |
Step 6: हम अपना पहला सरल सर्वर "वन पेज" एप्लिकेशन बनाने के लिए तैयार हैं। एक server.js फ़ाइल बनाएँ। उपयोगकर्ता द्वारा वेब-साइट पेज खोलने के बाद हमारे सर्वर में केवल एक ही कार्यक्षमता होती है - सूचकांक(index.html)।
const express = require('express');>
const app = express();id="3b41" class="qm gr cn bd qn b ch qu qv qw qx qy qp s qq" data-selectable-paragraph="">app.get('/', (req, res) => {
res.sendFile('index.html', { root : __dirname});
});
let port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(__dirname);
console.log("Listening Port " + port);
});
Step 7: चले "node server.js" कमांड से अपना सर्वर Node.js एप्लिकेशन चलाएं |
Step 0: चले प्रारंभिक संरचना बनाते हैं। फ़ाइलें बनाएँ: {webpack.config.js, .babelrc, main.js, app.js} और फ़ोल्डर्स: {src, Components}
Step 1: उपयोगकर्ता इंटरफ़ेस (UI) कम्पोनेंट्स को ठीक से बनाने के लिए, नए पैकेजों को "package.json" में जोड़ा जाना चाहिए और "npm install" के साथ स्थापित किया जाना चाहिए।
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"express": "^4.16.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/runtime-corejs2": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.2.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
}
}
Step 2: आइए UI और असेंबली लॉजिक कॉम्पोनेन्ट का हिस्सेा बनाते हैं।webpack.config.js
module.exports = {
entry: [
'./src/main.js'
],
output: {
filename: 'build.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step 3: आइए एप्लीकेशन में कुछ तर्क जोड़ें।app.js
import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div className="container">
<input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
</div>
)
}
}
import './components/app';
Step 4: चले कमांड का उपयोग करके जावास्क्रिप्ट मॉड्यूल का निर्माण करते हैं - "npm run build".
Step 5: अब, हमें मुख्य HTML- पृष्ठ में इकट्ठे build.js तर्क को एकीकृत करना चाहिए।
Step 6: सर्वर चलाएं और http://localhost:5000/, खोलें, बटन पर क्लिक करें। Enjoy
Step 0: Git इंस्टॉल करें और git वर्जन चेक करें |
Step 1: GitHub पर एक नया रिपॉजिटरी बनाएँ।
Step 2: फ़ोल्डर का नाम बदलें और इस रिपॉजिटरी को क्लोन करें |
mv mweb3waves/ mweb3waves_/
git clone https://github.com/AlekseiPupyshev/mweb3waves.git
mv mweb3waves_/dist/ mweb3waves/dist/;
mv mweb3waves_/node_modules/ mweb3waves/node_modules/;
mv mweb3waves_/src/ mweb3waves/src/;
mv mweb3waves_/index.html mweb3waves/index.html;
mv mweb3waves_/package.json mweb3waves/package.json;
mv mweb3waves_/package-lock.json mweb3waves/package-lock.json;
mv mweb3waves_/server.js mweb3waves/server.js;
mv mweb3waves_/webpack.config.js mweb3waves/webpack.config.js;
mv mweb3waves_/.babelrc mweb3waves/.babelrc;
Step 3: रिपॉजिटरी फोल्डर की रूट में .gitignore फ़ाइल बनाएँ
package-lock.json
node_modules/
Step 4: गिट ट्रैक करने के लिए फ़ाइलों को जोड़ने और दूरस्थ GitHub सर्वर के लिए प्रतिबद्ध पुश करे |
git add -A;
git commit -m 'add project files';
git push origin master;
Step 1: रजिस्टर और डैशबोर्ड खोलें, एक नया प्रोजेक्ट बनाएं। सेलेक्ट "import from GitHub".
Step 2: क्लिक डेप्लॉय फ्रॉम मास्टर ब्रांच . Click on "View".
Done!
Step 0: वेव्स कीपर स्थापित करें और एक खाता बनाएं या इम्पोर्ट करें
Step 1: app.js फ़ाइल में कोड परिवर्तन जोड़ें। जब उपयोगकर्ता ऑथेंटिकेशन बटन दबाएगा तो हम ऑथेंटिकेशन के लिए वेव्स कीपर को बुलाएंगे।
import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
this.authFunc = this.authFunc.bind(this);
}
authFunc() {
const authData = { data: "Auth on my site" };
if (WavesKeeper) {
WavesKeeper.auth( authData )
.then(auth => {
console.log( auth ); //displaying the result on the console
/*...processing data */
}).catch(error => {
console.error( error ); // displaying the result on the console
/*...processing errors */
})
} else {
alert("To Auth WavesKeeper should be installed.");
}
}
render() {
return (
<div className="container">
<input className="btn btn-primary" type="submit" value="Auth" onClick={this.authFunc}/>
</div>
)
}
}const app = document.getElementById('app');
if(app){
ReactDOM.render(<App/>, app);
}
Step 2: Git ट्रैकर में परिवर्तन जोड़ें, मॉड्यूल 1.3 पर रिमोट GitHub रिपॉजिटरी में कमिट और पुश करें। हरोकू खोलें और फिर से मास्टर ब्रांच से "डेप्लॉय" पर क्लिक करें। वेब एप्लिकेशन खोलें।
git add -A;
git commit -m 'Waves Keeper Auth integrated';
git push origin master;
Step 3: कीपर गोपनीयता सेटिंग्स में विश्वसनीय संसाधनों के लिए हेरोकू डोमेन जोड़ें "अस्वीकृत" -एरर's को रोकने के लिए |
कोंग्रटुएशन्स !
यह इस पाठ्यक्रम पर आपकी पहली ऑनलाइन चुनौती है: "पिछले पाठों के अनुसार कृपया एक" बॉयलरप्लेट "वेब एप्लिकेशन बनाएं, इसे गीथहब पर पुश करें , इसे हरोकू पर डेप्लॉय करें और अपने गीथहॉब रिपॉजिटरी और हरोकू डेप्लॉयड के लिंक साझा करें।
Good luck!"
https://ipfs.busy.org/ipfs/QmNzVUBSixi5XqD7kJmxaWVf8zCXQoXNzx6XWTrT6uPfsL
