எலக்ட்ரான் அடிப்படைகள்: கோண எலக்ட்ரான் பயன்பாட்டை எவ்வாறு கட்டமைப்பது மற்றும் இயக்குவது

விண்டோஸ், மேக் மற்றும் லினக்ஸிற்கான டெஸ்க்டாப் பயன்பாடுகளை உருவாக்க எலக்ட்ரான் உங்களை அனுமதிக்கிறது. எலக்ட்ரானைப் பயன்படுத்தி பயன்பாட்டை உருவாக்கும்போது, டெஸ்க்டாப் பயன்பாட்டு சாளரத்தின் மூலம் பயன்பாட்டை முன்னோட்டமிட்டு இயக்கலாம்.

வழக்கமான இணைய உலாவிக்குப் பதிலாக டெஸ்க்டாப் சாளரத்தில் தொடங்குவதற்கு கோண பயன்பாட்டை உள்ளமைக்க எலக்ட்ரானைப் பயன்படுத்தலாம். பயன்பாட்டிலேயே ஜாவாஸ்கிரிப்ட் கோப்பைப் பயன்படுத்தி இதைச் செய்யலாம்.

நீங்கள் எலக்ட்ரானை உள்ளமைத்தவுடன், வழக்கமான கோணப் பயன்பாட்டில் நீங்கள் உருவாக்குவதைப் போலவே நீங்கள் தொடர்ந்து உருவாக்கலாம். பயன்பாட்டின் முக்கிய பகுதிகள் இன்னும் அதே நிலையான கோண அமைப்பைப் பின்பற்றும்.

நீங்கள் எந்த கடைகளில் பேபால் கிரெடிட்டைப் பயன்படுத்தலாம்?

உங்கள் பயன்பாட்டின் ஒரு பகுதியாக எலக்ட்ரானை எவ்வாறு நிறுவுவது

எலக்ட்ரானைப் பயன்படுத்த, நீங்கள் 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 கோப்பு பொதுவாக இப்படி இருக்கும்:

227708B36FB8AAAB74294C742BC6F1E707F2AFF29

உடல் குறிச்சொல்லின் உள்ளே ஒரு குறிச்சொல் உள்ளது. இது கோண பயன்பாட்டிற்கான முக்கிய பயன்பாட்டு கூறுகளைக் காண்பிக்கும். முக்கிய பயன்பாட்டு கூறுகளை நீங்கள் இதில் காணலாம் 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="./">
```
இல் pack.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; 
}
```

எலக்ட்ரான் பயன்பாட்டை எவ்வாறு இயக்குவது

உங்கள் பயன்பாட்டை ஒரு சாளரத்தில் இயக்க, தொகுப்பு.json இன் ஸ்கிரிப்ட் வரிசையில் ஒரு கட்டளையை உள்ளமைக்கவும். பின்னர், டெர்மினலில் உள்ள கட்டளையைப் பயன்படுத்தி உங்கள் பயன்பாட்டை இயக்கவும்.

இல் pack.json , ஸ்கிரிப்ட் வரிசையின் உள்ளே, கோண பயன்பாட்டை உருவாக்க மற்றும் எலக்ட்ரானை இயக்க ஒரு கட்டளையைச் சேர்க்கவும். ஸ்கிரிப்ட் வரிசையில் முந்தைய உள்ளீட்டிற்குப் பிறகு காற்புள்ளியைச் சேர்ப்பதை உறுதிசெய்யவும்.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
உங்கள் புதிய கோண பயன்பாட்டை டெஸ்க்டாப் சாளரத்தில் இயக்க, பின்வரும் கட்டளை வரியில், உங்கள் திட்டத்தின் ரூட் கோப்புறையில் இயக்கவும்:
```
npm run electron
```
உங்கள் விண்ணப்பம் தொகுக்க காத்திருக்கவும். முடிந்ததும், இணைய உலாவியில் உங்கள் கோணப் பயன்பாடு திறப்பதற்குப் பதிலாக, டெஸ்க்டாப் சாளரம் திறக்கும். டெஸ்க்டாப் சாளரம் உங்கள் கோண பயன்பாட்டின் உள்ளடக்கங்களைக் காண்பிக்கும்.
இணைய உலாவியில் உங்கள் விண்ணப்பத்தைப் பார்க்க விரும்பினால், நீங்கள் ng serve கட்டளையை இயக்கலாம்.
```
ng serve
```
நீங்கள் பயன்படுத்தினால் சேவை கட்டளை, உங்கள் பயன்பாட்டின் உள்ளடக்கங்கள் இன்னும் இணைய உலாவியில் காட்டப்படும் லோக்கல் ஹோஸ்ட்:4200.

எலக்ட்ரானுடன் டெஸ்க்டாப் பயன்பாடுகளை உருவாக்குதல்

விண்டோஸ், மேக் மற்றும் லினக்ஸில் டெஸ்க்டாப் பயன்பாடுகளை உருவாக்க எலக்ட்ரானைப் பயன்படுத்தலாம். இயல்பாக, ng serve கட்டளை மூலம் இணைய உலாவியைப் பயன்படுத்தி கோண பயன்பாட்டைச் சோதிக்கலாம். இணைய உலாவிக்குப் பதிலாக டெஸ்க்டாப் சாளரத்திலும் திறக்க உங்கள் கோண பயன்பாட்டை உள்ளமைக்கலாம்.

ஜாவாஸ்கிரிப்ட் கோப்பைப் பயன்படுத்தி இதைச் செய்யலாம். உங்கள் index.html மற்றும் package.json கோப்புகளையும் நீங்கள் கட்டமைக்க வேண்டும். ஒட்டுமொத்தப் பயன்பாடும் வழக்கமான கோணப் பயன்பாட்டின் அதே அமைப்பைப் பின்பற்றும்.

டெஸ்க்டாப் பயன்பாடுகளை எவ்வாறு உருவாக்குவது என்பது பற்றி மேலும் அறிய விரும்பினால், நீங்கள் Windows Forms பயன்பாடுகளையும் ஆராயலாம். C# கோப்புகளில் எந்த குறியீட்டு தர்க்கத்தையும் சேர்க்கும்போது, UI உறுப்புகளை கேன்வாஸில் கிளிக் செய்து இழுக்க Windows Forms பயன்பாடுகள் உங்களை அனுமதிக்கின்றன.