الیکٹران کی بنیادی باتیں: اینگولر الیکٹران ایپ کو کیسے ترتیب دیں اور چلائیں۔

الیکٹران آپ کو ونڈوز، میک اور لینکس کے لیے ڈیسک ٹاپ ایپلی کیشنز بنانے دیتا ہے۔ جب آپ الیکٹران کا استعمال کرتے ہوئے ایک ایپ بناتے ہیں، تو آپ ڈیسک ٹاپ ایپلیکیشن ونڈو کے ذریعے ایپ کا پیش نظارہ اور اسے چلا سکتے ہیں۔

آپ عام ویب براؤزر کے بجائے، ڈیسک ٹاپ ونڈو پر لانچ کرنے کے لیے انگولر ایپ کو ترتیب دینے کے لیے الیکٹران کا استعمال کر سکتے ہیں۔ آپ ایپ میں ہی JavaScript فائل کا استعمال کر کے یہ کر سکتے ہیں۔

ایک بار جب آپ الیکٹران کو کنفیگر کر لیتے ہیں، تو آپ ترقی جاری رکھ سکتے ہیں جیسا کہ آپ ایک عام کونیی ایپ پر کرتے ہیں۔ ایپلیکیشن کے اہم حصے اب بھی اسی معیاری کونیی ڈھانچے کی پیروی کریں گے۔

استعمال شدہ میک بک خریدنے کے لیے بہترین جگہ۔

اپنی درخواست کے حصے کے طور پر الیکٹران کو کیسے انسٹال کریں۔

Electron استعمال کرنے کے لیے، آپ کو node.js ڈاؤن لوڈ اور انسٹال کرنے کی ضرورت ہے، اور اپنی ایپ میں Electron کو شامل کرنے کے لیے npm install کا استعمال کریں۔

ڈاؤن لوڈ اور انسٹال کریں۔ node.js . آپ ورژن:

node -v چیک کرکے تصدیق کر سکتے ہیں کہ آپ نے اسے صحیح طریقے سے انسٹال کیا ہے۔

نوڈ بھی شامل ہے۔ npm، JavaScript پیکیج مینیجر . آپ npm ورژن:

npm -v کو چیک کر کے تصدیق کر سکتے ہیں کہ آپ نے npm انسٹال کر لیا ہے۔

کا استعمال کرتے ہوئے ایک نئی کونیی ایپلی کیشن بنائیں نئے کے کمانڈ. یہ ایک فولڈر بنائے گا جس میں تمام ضروری چیزیں شامل ہوں گی۔ Angular پروجیکٹ کے لیے فائلیں درکار ہیں۔ کام کرنے کے لیے۔
```
ng new electron-app
```
اپنی درخواست کے روٹ فولڈر میں، استعمال کریں۔ این پی ایم Electron.
```
npm install --save-dev electron انسٹال کرنے کے لیے
```
یہ ایپ کے node_modules فولڈر میں Electron کے لیے ایک نیا فولڈر بنائے گا۔
آپ اپنے کمپیوٹر پر عالمی سطح پر بھی الیکٹران انسٹال کر سکتے ہیں۔
```
npm install -g electron 
```

کونیی الیکٹران ایپلی کیشن کی فائل کا ڈھانچہ

الیکٹران کو ڈیسک ٹاپ ونڈو بنانے اور اس کا نظم کرنے کے لیے ایک اہم JavaScript فائل کی ضرورت ہوگی۔ یہ ونڈو آپ کے ایپ کے مواد کو اپنے اندر ظاہر کرے گی۔ JavaScript فائل میں دیگر واقعات بھی شامل ہوں گے جو ہو سکتے ہیں، جیسے کہ اگر صارف ونڈو کو بند کرتا ہے۔

میل نوٹیفکیشن ونڈوز 10 کو کیسے بند کریں۔

رن ٹائم پر، ڈسپلے ہونے والا مواد 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');
```
ایک مخصوص چوڑائی اور اونچائی کی ایک نئی ڈیسک ٹاپ ونڈو بنائیں۔ انڈیکس فائل کو ونڈو میں ڈسپلے کرنے کے لیے مواد کے طور پر لوڈ کریں۔ یقینی بنائیں کہ انڈیکس فائل کا راستہ آپ کی ایپ کے نام سے مماثل ہے۔ مثال کے طور پر، اگر آپ نے اپنی ایپ کو 'electron-app' کا نام دیا ہے، تو راستہ '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 file.

.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 کمانڈ کے ذریعے ویب براؤزر کا استعمال کرتے ہوئے انگولر ایپلیکیشن کی جانچ کر سکتے ہیں۔ آپ اپنی انگولر ایپلیکیشن کو ویب براؤزر کے بجائے ڈیسک ٹاپ ونڈو میں بھی کھولنے کے لیے کنفیگر کر سکتے ہیں۔

میک پر اسٹوریج کو کیسے بڑھایا جائے

آپ یہ جاوا اسکرپٹ فائل کا استعمال کر سکتے ہیں۔ آپ کو اپنی index.html اور package.json فائلوں کو بھی ترتیب دینے کی ضرورت ہوگی۔ مجموعی ایپلی کیشن اب بھی اسی ڈھانچے کی پیروی کرے گی جس طرح ایک باقاعدہ Angular ایپلی کیشن ہے۔

اگر آپ ڈیسک ٹاپ ایپلی کیشنز بنانے کے طریقے کے بارے میں مزید جاننا چاہتے ہیں، تو آپ Windows Forms ایپس کو بھی دریافت کر سکتے ہیں۔ ونڈوز فارمز ایپس آپ کو UI عناصر کو کینوس پر کلک کرنے اور گھسیٹنے کی اجازت دیتی ہیں جبکہ C# فائلوں میں کسی کوڈنگ منطق کو بھی شامل کرتی ہیں۔