ఎలక్ట్రాన్ బేసిక్స్: కోణీయ ఎలక్ట్రాన్ యాప్‌ను ఎలా కాన్ఫిగర్ చేయాలి మరియు రన్ చేయాలి

ఎలక్ట్రాన్ బేసిక్స్: కోణీయ ఎలక్ట్రాన్ యాప్‌ను ఎలా కాన్ఫిగర్ చేయాలి మరియు రన్ చేయాలి

Windows, Mac మరియు Linux కోసం డెస్క్‌టాప్ అప్లికేషన్‌లను రూపొందించడానికి ఎలక్ట్రాన్ మిమ్మల్ని అనుమతిస్తుంది. మీరు ఎలక్ట్రాన్‌ని ఉపయోగించి యాప్‌ను రూపొందించినప్పుడు, మీరు డెస్క్‌టాప్ అప్లికేషన్ విండో ద్వారా యాప్‌ను ప్రివ్యూ చేసి రన్ చేయవచ్చు.





మీరు సాధారణ వెబ్ బ్రౌజర్‌కు బదులుగా డెస్క్‌టాప్ విండోలో లాంచ్ చేయడానికి కోణీయ యాప్‌ను కాన్ఫిగర్ చేయడానికి ఎలక్ట్రాన్‌ని ఉపయోగించవచ్చు. మీరు యాప్‌లోనే JavaScript ఫైల్‌ని ఉపయోగించి దీన్ని చేయవచ్చు.





మీరు ఎలక్ట్రాన్‌ని కాన్ఫిగర్ చేసిన తర్వాత, మీరు సాధారణ కోణీయ యాప్‌లో చేసే విధంగా అభివృద్ధిని కొనసాగించవచ్చు. అప్లికేషన్ యొక్క ప్రధాన భాగాలు ఇప్పటికీ అదే ప్రామాణిక కోణీయ నిర్మాణాన్ని అనుసరిస్తాయి.





మీ అప్లికేషన్‌లో భాగంగా ఎలక్ట్రాన్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి

Electronని ఉపయోగించడానికి, మీరు node.jsని డౌన్‌లోడ్ చేసి, ఇన్‌స్టాల్ చేయాలి మరియు మీ యాప్‌కి ఎలక్ట్రాన్‌ని జోడించడానికి npm ఇన్‌స్టాల్‌ని ఉపయోగించాలి.

  1. డౌన్‌లోడ్ చేసి ఇన్‌స్టాల్ చేయండి node.js . మీరు సంస్కరణను తనిఖీ చేయడం ద్వారా దీన్ని సరిగ్గా ఇన్‌స్టాల్ చేసినట్లు నిర్ధారించుకోవచ్చు:
    node -v
    నోడ్ కూడా కలిగి ఉంటుంది npm, జావాస్క్రిప్ట్ ప్యాకేజీ మేనేజర్ . మీరు npm వెర్షన్‌ని తనిఖీ చేయడం ద్వారా npm ఇన్‌స్టాల్ చేసినట్లు నిర్ధారించుకోవచ్చు:
    npm -v
  2. ఉపయోగించి కొత్త కోణీయ అప్లికేషన్‌ను సృష్టించండి కొత్తది ఆదేశం. ఇది అవసరమైన అన్నింటిని కలిగి ఉన్న ఫోల్డర్‌ను సృష్టిస్తుంది కోణీయ ప్రాజెక్ట్ కోసం అవసరమైన ఫైల్‌లు పని చేయడానికి.
    ng new electron-app
  3. మీ అప్లికేషన్ యొక్క రూట్ ఫోల్డర్‌లో, ఉపయోగించండి npm Electron.
    npm install --save-dev electronని ఇన్‌స్టాల్ చేయడానికి
  4. ఇది యాప్‌లోని node_modules ఫోల్డర్‌లో Electron కోసం కొత్త ఫోల్డర్‌ను సృష్టిస్తుంది.   ప్రాజెక్ట్ లోపల ప్రధాన JS ఫైల్ స్థానం
  5. మీరు మీ కంప్యూటర్‌లో ప్రపంచవ్యాప్తంగా ఎలక్ట్రాన్‌ని కూడా ఇన్‌స్టాల్ చేసుకోవచ్చు.
    npm install -g electron 

కోణీయ ఎలక్ట్రాన్ అప్లికేషన్ యొక్క ఫైల్ నిర్మాణం

డెస్క్‌టాప్ విండోను సృష్టించడానికి మరియు నిర్వహించడానికి ఎలక్ట్రాన్‌కు ప్రధాన జావాస్క్రిప్ట్ ఫైల్ అవసరం. ఈ విండో మీ యాప్‌లోని కంటెంట్‌లను దానిలో ప్రదర్శిస్తుంది. JavaScript ఫైల్ వినియోగదారు విండోను మూసివేస్తే, సంభవించే ఇతర ఈవెంట్‌లను కూడా కలిగి ఉంటుంది.



మైన్‌క్రాఫ్ట్ మోడ్‌ను ఎలా తయారు చేయాలి 1.12.2
  ప్రాజెక్ట్‌లో సూచిక HTML ఫైల్ స్థానం

రన్‌టైమ్‌లో, ప్రదర్శించబడే కంటెంట్ index.html ఫైల్ నుండి వస్తుంది. డిఫాల్ట్‌గా, మీరు లోపల index.html ఫైల్‌ను కనుగొనవచ్చు src ఫోల్డర్, మరియు రన్‌టైమ్‌లో దాని యొక్క బిల్ట్ కాపీ స్వయంచాలకంగా లోపల సృష్టించబడుతుంది జిల్లా ఫోల్డర్.

  ఫోల్డర్‌లో ప్రధాన యాప్ భాగం స్థానం

index.html ఫైల్ సాధారణంగా ఇలా కనిపిస్తుంది:





227708B36FB8AAAB74294C742BC6F1E707F2AFF29

శరీర ట్యాగ్ లోపల ట్యాగ్ ఉంటుంది. ఇది కోణీయ అనువర్తనం కోసం ప్రధాన అనువర్తన భాగాన్ని ప్రదర్శిస్తుంది. మీరు ప్రధాన అనువర్తన భాగాన్ని కనుగొనవచ్చు src/app ఫోల్డర్.

  బ్రౌజర్‌లో రన్‌టైమ్‌లో ఎలక్ట్రాన్

డెస్క్‌టాప్ విండోలో కోణీయ అప్లికేషన్‌ను తెరవడానికి ఎలక్ట్రాన్‌ను ఎలా ఉపయోగించాలి

main.js ఫైల్‌ని సృష్టించండి మరియు డెస్క్‌టాప్ విండోలో అప్లికేషన్ యొక్క కంటెంట్‌ను తెరవడానికి దాన్ని కాన్ఫిగర్ చేయండి.





  1. పేరు పెట్టబడిన మీ ప్రాజెక్ట్ యొక్క రూట్‌లో ఫైల్‌ను సృష్టించండి main.js . ఈ ఫైల్‌లో, ఎలక్ట్రాన్‌ని ప్రారంభించండి, తద్వారా మీరు అప్లికేషన్ విండోను సృష్టించడానికి దాన్ని ఉపయోగించవచ్చు.
    const { app, BrowserWindow } = require('electron');
  2. నిర్దిష్ట వెడల్పు మరియు ఎత్తుతో కొత్త డెస్క్‌టాప్ విండోను సృష్టించండి. విండోలో ప్రదర్శించడానికి ఇండెక్స్ ఫైల్‌ను కంటెంట్‌గా లోడ్ చేయండి. ఇండెక్స్ ఫైల్‌కి వెళ్లే మార్గం మీ యాప్ పేరుతో సరిపోలుతుందని నిర్ధారించుకోండి. ఉదాహరణకు, మీరు మీ యాప్‌కి 'ఎలక్ట్రాన్-యాప్' అని పేరు పెట్టినట్లయితే, మార్గం 'dist/electron-app/index.html'గా ఉంటుంది.
    function createWindow() { 
    win = new BrowserWindow({width: 800, height: 800});
    win.loadFile('dist/electron-app/index.html');
    }
  3. యాప్ సిద్ధంగా ఉన్నప్పుడు, createWindow() ఫంక్షన్‌కు కాల్ చేయండి. ఇది మీ యాప్ కోసం అప్లికేషన్ విండోను సృష్టిస్తుంది.963C031C059E24DDFEE756A5848DF0E0377EA98
  4. లో src/index.html ఫైల్, లో బేస్ ట్యాగ్, href లక్షణాన్ని './'కి మార్చండి.
    <base href="./">
  5. లో pack.json , a జోడించండి ప్రధాన ఫీల్డ్, మరియు main.js ఫైల్‌ని విలువగా చేర్చండి. ఇది యాప్‌కి ఎంట్రీ పాయింట్ అవుతుంది, తద్వారా యాప్‌ను ప్రారంభించినప్పుడు అప్లికేషన్ main.js ఫైల్‌ను అమలు చేస్తుంది.
    { 
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "main.js",
    ....
    }
  6. లో .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
  7. లో డిఫాల్ట్ కంటెంట్‌ను తొలగించండి src/app/app.component.html ఫైల్. కొంత కొత్త కంటెంట్‌తో భర్తీ చేయండి.
    <div class="content"> 
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. లో కంటెంట్ కోసం కొంత స్టైలింగ్ జోడించండి 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;
    }
  9. దీనికి కొంత మొత్తం స్టైలింగ్‌ని జోడించండి src/styles.css డిఫాల్ట్ మార్జిన్‌లు మరియు ప్యాడింగ్‌లను తీసివేయడానికి ఫైల్.
    html { 
    margin: 0;
    padding: 0;
    }

ఎలక్ట్రాన్ అప్లికేషన్‌ను ఎలా రన్ చేయాలి

మీ అప్లికేషన్‌ను విండోలో అమలు చేయడానికి, package.json స్క్రిప్ట్‌ల శ్రేణిలో ఆదేశాన్ని కాన్ఫిగర్ చేయండి. అప్పుడు, టెర్మినల్‌లోని ఆదేశాన్ని ఉపయోగించి మీ అనువర్తనాన్ని అమలు చేయండి.

  1. లో pack.json , స్క్రిప్ట్‌ల శ్రేణి లోపల, కోణీయ అనువర్తనాన్ని రూపొందించడానికి మరియు ఎలక్ట్రాన్‌ను అమలు చేయడానికి ఆదేశాన్ని జోడించండి. స్క్రిప్ట్‌ల శ్రేణిలో మునుపటి నమోదు తర్వాత మీరు కామాను జోడించారని నిర్ధారించుకోండి.
    "scripts": { 
    ...
    "electron": "ng build && electron ."
    },
  2. డెస్క్‌టాప్ విండోలో మీ కొత్త కోణీయ అనువర్తనాన్ని అమలు చేయడానికి, కింది వాటిని మీ ప్రాజెక్ట్ యొక్క రూట్ ఫోల్డర్‌లో కమాండ్ లైన్‌లో అమలు చేయండి:
    npm run electron
  3. మీ అప్లికేషన్ కంపైల్ చేయడానికి వేచి ఉండండి. పూర్తయిన తర్వాత, వెబ్ బ్రౌజర్‌లో మీ కోణీయ యాప్ తెరవడానికి బదులుగా, బదులుగా డెస్క్‌టాప్ విండో తెరవబడుతుంది. డెస్క్‌టాప్ విండో మీ కోణీయ యాప్‌లోని కంటెంట్‌లను చూపుతుంది.
  4. మీరు ఇప్పటికీ వెబ్ బ్రౌజర్‌లో మీ అప్లికేషన్‌ను వీక్షించాలనుకుంటే, మీరు ఇప్పటికీ ng server కమాండ్‌ను అమలు చేయవచ్చు.
    ng serve
  5. మీరు ఉపయోగిస్తుంటే సర్వ్ ఆదేశం, మీ యాప్ యొక్క కంటెంట్‌లు ఇప్పటికీ వెబ్ బ్రౌజర్‌లో ప్రదర్శించబడతాయి స్థానిక హోస్ట్:4200.

ఎలక్ట్రాన్‌తో డెస్క్‌టాప్ అప్లికేషన్‌లను రూపొందించడం

మీరు Windows, Mac మరియు Linuxలో డెస్క్‌టాప్ అప్లికేషన్‌లను రూపొందించడానికి ఎలక్ట్రాన్‌ని ఉపయోగించవచ్చు. డిఫాల్ట్‌గా, మీరు ng serve కమాండ్ ద్వారా వెబ్ బ్రౌజర్‌ని ఉపయోగించి కోణీయ అప్లికేషన్‌ను పరీక్షించవచ్చు. వెబ్ బ్రౌజర్‌కు బదులుగా డెస్క్‌టాప్ విండోలో కూడా తెరవడానికి మీరు మీ కోణీయ అప్లికేషన్‌ను కాన్ఫిగర్ చేయవచ్చు.

మీరు దీన్ని JavaScript ఫైల్‌ని ఉపయోగించి చేయవచ్చు. మీరు మీ index.html మరియు package.json ఫైల్‌లను కూడా కాన్ఫిగర్ చేయాలి. మొత్తం అప్లికేషన్ ఇప్పటికీ సాధారణ కోణీయ అప్లికేషన్ వలె అదే నిర్మాణాన్ని అనుసరిస్తుంది.

మీరు డెస్క్‌టాప్ అప్లికేషన్‌లను ఎలా నిర్మించాలనే దాని గురించి మరింత తెలుసుకోవాలనుకుంటే, మీరు Windows ఫారమ్‌ల యాప్‌లను కూడా అన్వేషించవచ్చు. Windows ఫారమ్‌ల యాప్‌లు C# ఫైల్‌లలో ఏదైనా కోడింగ్ లాజిక్‌ను జోడించేటప్పుడు UI ఎలిమెంట్‌లను క్లిక్ చేసి, కాన్వాస్‌పైకి లాగడానికి మిమ్మల్ని అనుమతిస్తాయి.