ইলেক্ট্রন বেসিকস: কীভাবে একটি কৌণিক ইলেক্ট্রন অ্যাপ কনফিগার এবং চালাতে হয়

ইলেক্ট্রন আপনাকে উইন্ডোজ, ম্যাক এবং লিনাক্সের জন্য ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে দেয়। আপনি যখন ইলেক্ট্রন ব্যবহার করে একটি অ্যাপ তৈরি করেন, আপনি একটি ডেস্কটপ অ্যাপ্লিকেশন উইন্ডোর মাধ্যমে অ্যাপটির পূর্বরূপ দেখতে এবং চালাতে পারেন।

আপনি সাধারণ ওয়েব ব্রাউজারের পরিবর্তে একটি ডেস্কটপ উইন্ডোতে লঞ্চ করার জন্য একটি কৌণিক অ্যাপ কনফিগার করতে ইলেকট্রন ব্যবহার করতে পারেন। আপনি অ্যাপের মধ্যে একটি জাভাস্ক্রিপ্ট ফাইল ব্যবহার করে এটি করতে পারেন।

ম্যাকবুক প্রো 2015 ব্যাটারি প্রতিস্থাপন খরচ

একবার আপনি ইলেক্ট্রন কনফিগার করলে, আপনি নিয়মিত কৌণিক অ্যাপের মতো বিকাশ চালিয়ে যেতে পারেন। অ্যাপ্লিকেশনের প্রধান অংশগুলি এখনও একই মানক কৌণিক কাঠামো অনুসরণ করবে।

আপনার অ্যাপ্লিকেশনের অংশ হিসাবে ইলেক্ট্রন কীভাবে ইনস্টল করবেন

ইলেক্ট্রন ব্যবহার করতে, আপনাকে node.js ডাউনলোড এবং ইনস্টল করতে হবে এবং আপনার অ্যাপে ইলেক্ট্রন যোগ করতে npm ইনস্টল ব্যবহার করতে হবে।

ডাউনলোড এবং ইন্সটল node.js . আপনি সংস্করণটি পরীক্ষা করে নিশ্চিত করতে পারেন যে আপনি এটি সঠিকভাবে ইনস্টল করেছেন:
```
node -v
```
নোড এছাড়াও অন্তর্ভুক্ত npm, জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার . আপনি npm সংস্করণ:
```
npm -v চেক করে নিশ্চিত করতে পারেন যে আপনি npm ইনস্টল করেছেন
```
ব্যবহার করে একটি নতুন কৌণিক অ্যাপ্লিকেশন তৈরি করুন নতুনের আদেশ এটি একটি ফোল্ডার তৈরি করবে যা সমস্ত প্রয়োজনীয় ধারণ করে একটি কৌণিক প্রকল্পের জন্য প্রয়োজনীয় ফাইল কাজ করতে।
```
ng new electron-app
```
আপনার অ্যাপ্লিকেশনের রুট ফোল্ডারে, ব্যবহার করুন npm ইলেক্ট্রন ইনস্টল করতে।
```
npm install --save-dev electron
```
এটি অ্যাপের node_modules ফোল্ডারে ইলেক্ট্রনের জন্য একটি নতুন ফোল্ডার তৈরি করবে।
এছাড়াও আপনি আপনার কম্পিউটারে বিশ্বব্যাপী ইলেক্ট্রন ইনস্টল করতে পারেন।
```
npm install -g electron 
```

কৌণিক ইলেকট্রন অ্যাপ্লিকেশনের ফাইলের কাঠামো

ডেস্কটপ উইন্ডো তৈরি এবং পরিচালনা করতে ইলেক্ট্রনের একটি প্রধান জাভাস্ক্রিপ্ট ফাইলের প্রয়োজন হবে। এই উইন্ডোটি এটির মধ্যে আপনার অ্যাপের বিষয়বস্তু প্রদর্শন করবে। JavaScript ফাইলটিতে অন্যান্য ইভেন্টও থাকবে যা ঘটতে পারে, যেমন ব্যবহারকারী যদি উইন্ডোটি বন্ধ করে দেয়।

রানটাইমে, প্রদর্শিত বিষয়বস্তু index.html ফাইল থেকে আসবে। ডিফল্টরূপে, আপনি index.html ফাইলটির ভিতরে খুঁজে পেতে পারেন src ফোল্ডার, এবং রানটাইমে এটির একটি বিল্ট কপি স্বয়ংক্রিয়ভাবে ভিতরে তৈরি হয় জেলা ফোল্ডার

index.html ফাইলটি সাধারণত এইরকম দেখায়:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

বডি ট্যাগের ভিতরে একটি ট্যাগ রয়েছে। এটি কৌণিক অ্যাপ্লিকেশনের জন্য প্রধান অ্যাপ উপাদান প্রদর্শন করবে। আপনি প্রধান অ্যাপ্লিকেশন উপাদান খুঁজে পেতে পারেন src/app ফোল্ডার

একটি ডেস্কটপ উইন্ডোতে একটি কৌণিক অ্যাপ্লিকেশন খুলতে কিভাবে ইলেকট্রন ব্যবহার করবেন

main.js ফাইলটি তৈরি করুন এবং একটি ডেস্কটপ উইন্ডোর ভিতরে অ্যাপ্লিকেশনের বিষয়বস্তু খুলতে এটি কনফিগার করুন।

আপনার প্রোজেক্টের নামে একটি ফাইল তৈরি করুন main.js . এই ফাইলটিতে, ইলেক্ট্রন শুরু করুন যাতে আপনি এটি অ্যাপ্লিকেশন উইন্ডো তৈরি করতে ব্যবহার করতে পারেন।
```
const { app, BrowserWindow } = require('electron');
```
একটি নির্দিষ্ট প্রস্থ এবং উচ্চতার একটি নতুন ডেস্কটপ উইন্ডো তৈরি করুন। উইন্ডোতে প্রদর্শিত বিষয়বস্তু হিসাবে সূচক ফাইলটি লোড করুন। নিশ্চিত করুন যে ইনডেক্স ফাইলের পাথ আপনার অ্যাপের নামের সাথে মেলে। উদাহরণস্বরূপ, আপনি যদি আপনার অ্যাপের নাম 'ইলেক্ট্রন-অ্যাপ' নাম দেন, তাহলে পথটি হবে 'dist/electron-app/index.html'।
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
অ্যাপটি প্রস্তুত হলে, createWindow() ফাংশনে কল করুন। এটি আপনার অ্যাপের জন্য অ্যাপ্লিকেশন উইন্ডো তৈরি করবে।
```
app.whenReady().then(() => { 
  createWindow() 
})
```
মধ্যে src/index.html ফাইল, মধ্যে ভিত্তি ট্যাগ করুন, href অ্যাট্রিবিউটকে './' এ পরিবর্তন করুন।
```
<base href="./">
```
ভিতরে package.json , যুক্ত কর একটি প্রধান ক্ষেত্র, এবং মান হিসাবে main.js ফাইল অন্তর্ভুক্ত করুন। এটি অ্যাপের জন্য এন্ট্রি পয়েন্ট হবে, যাতে অ্যাপটি চালু করার সাথে সাথে অ্যাপ্লিকেশনটি main.js ফাইল চালায়।
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
মধ্যে .browserslistrc ফাইল, iOS সাফারি সংস্করণ 15.2-15.3 সরাতে তালিকাটি পরিবর্তন করুন। এটি কম্পাইল করার সময় কনসোলে সামঞ্জস্যতা ত্রুটিগুলিকে রোধ করবে৷
```
last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3 
```
ডিফল্ট বিষয়বস্তু মুছুন src/app/app.component.html ফাইল এটিকে কিছু নতুন সামগ্রী দিয়ে প্রতিস্থাপন করুন৷
```
<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>
```

বিষয়বস্তুর জন্য কিছু স্টাইলিং যোগ করুন src/app/app.component.css ফাইল।

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

কিছু সামগ্রিক স্টাইলিং যোগ করুন src/styles.css ডিফল্ট মার্জিন এবং প্যাডিংগুলি সরাতে ফাইল৷
```
html { 
  margin: 0; 
  padding: 0; 
}
```

কিভাবে একটি ইলেক্ট্রন অ্যাপ্লিকেশন চালাতে হয়

একটি উইন্ডোতে আপনার অ্যাপ্লিকেশন চালানোর জন্য, package.json-এর স্ক্রিপ্ট অ্যারেতে একটি কমান্ড কনফিগার করুন। তারপর, টার্মিনালে কমান্ড ব্যবহার করে আপনার অ্যাপ চালান।

ভিতরে package.json , স্ক্রিপ্ট অ্যারের ভিতরে, কৌণিক অ্যাপ তৈরি করতে এবং ইলেক্ট্রন চালানোর জন্য একটি কমান্ড যোগ করুন। নিশ্চিত করুন যে আপনি স্ক্রিপ্ট অ্যারেতে পূর্ববর্তী এন্ট্রির পরে একটি কমা যোগ করেছেন।
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
একটি ডেস্কটপ উইন্ডোতে আপনার নতুন কৌণিক অ্যাপ্লিকেশন চালানোর জন্য, আপনার প্রকল্পের রুট ফোল্ডারে কমান্ড লাইনে নিম্নলিখিতটি চালান:
```
npm run electron
```
আপনার আবেদন কম্পাইল করার জন্য অপেক্ষা করুন. একবার সম্পূর্ণ হলে, ওয়েব ব্রাউজারে আপনার কৌণিক অ্যাপ খোলার পরিবর্তে, পরিবর্তে একটি ডেস্কটপ উইন্ডো খুলবে। ডেস্কটপ উইন্ডোটি আপনার কৌণিক অ্যাপের বিষয়বস্তু দেখাবে।
আপনি যদি এখনও ওয়েব ব্রাউজারে আপনার অ্যাপ্লিকেশন দেখতে চান, আপনি এখনও ng serve কমান্ড চালাতে পারেন৷
```
ng serve
```
আপনি যদি ব্যবহার করছেন পরিবেশন করা কমান্ড, আপনার অ্যাপের বিষয়বস্তু এখনও একটি ওয়েব ব্রাউজারে প্রদর্শিত হবে স্থানীয় হোস্ট: 4200।

ইলেক্ট্রন দিয়ে ডেস্কটপ অ্যাপ্লিকেশন তৈরি করা

আপনি উইন্ডোজ, ম্যাক এবং লিনাক্সে ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে ইলেক্ট্রন ব্যবহার করতে পারেন। ডিফল্টরূপে, আপনি ng serve কমান্ডের মাধ্যমে একটি ওয়েব ব্রাউজার ব্যবহার করে একটি কৌণিক অ্যাপ্লিকেশন পরীক্ষা করতে পারেন। আপনি ওয়েব ব্রাউজারের পরিবর্তে একটি ডেস্কটপ উইন্ডোতে খোলার জন্য আপনার কৌণিক অ্যাপ্লিকেশনটি কনফিগার করতে পারেন।

নতুন পিসিতে ডাউনলোড করার জিনিস

আপনি একটি JavaScript ফাইল ব্যবহার করে এটি করতে পারেন। এছাড়াও আপনাকে আপনার index.html এবং package.json ফাইলগুলি কনফিগার করতে হবে৷ সামগ্রিক অ্যাপ্লিকেশন এখনও একটি নিয়মিত কৌণিক অ্যাপ্লিকেশন হিসাবে একই কাঠামো অনুসরণ করবে।

আপনি যদি ডেস্কটপ অ্যাপ্লিকেশনগুলি কীভাবে তৈরি করবেন সে সম্পর্কে আরও জানতে চান, আপনি উইন্ডোজ ফর্ম অ্যাপগুলিও অন্বেষণ করতে পারেন৷ উইন্ডোজ ফর্ম অ্যাপগুলি আপনাকে C# ফাইলগুলিতে কোডিং লজিক যোগ করার সাথে সাথে একটি ক্যানভাসে UI উপাদানগুলিকে ক্লিক করতে এবং টেনে আনতে দেয়।