Electron 01. Sådan kommer du i gang med Electron Fiddle

Ron Brevstgaard
Ron Brevstgaard

Lad os starte ud med at skrive, at hvordan du bedst skal få begyndt på Electron er svær og dette er bare mit bud på, hvordan du kommer i gang. Evner eller ej... men vi skal starte et sted og Electron Fiddle er et fint start-sted. Bemærk at det er tiltænkt at hver publicering skal gå et trin "op", så du vil sikkert finde dette alt for kedeligt medmindre vi virkelig taler how-to-start og kan du intet kodning i forvejen, så er dette sikkert lige dig.

Og nårh´ja, hvorfor lave i Electron? Jo fordi så kan du lave til Win, Mac og Linux på samme tid. Smart. *Sikkerhedsmæssigt er det dog ikke altid smart men det skal vi slet ikke ind på nu.


Først, hvad er Electron / Electron Framework?

Electron er en gratis og open source softwareramme (framework) udviklet og vedligeholdt af GitHub som du sikkert er stødt på før. Electron giver mulighed for udvikling af desktop GUI-applikationer ved hjælp af webteknologierne Chromium og Node.js.

Hvad er Electron Fiddle så?

Electron Fiddle lader dig let lege rundt og skabe diverse små Electron-apps uden du faktisk skal tænke over hvordan og hvorledes du vil bære dig ad. Eller det passer så ikke helt for du skal stadig bruge hovedet men alt bliver mere eller mindre serveret på et sølvfad. Bl.a. får du her adgang til Microsofts fremragende Monaco Editor, den samme editor, der driver Visual Studio Code. Du får let adgang til type definitions, Github up/down-load mv. Det der også er utroligt tidsbesparende nu hvor du skal få lært noget nyt. At du ved brug af adresselinjen let kan indlæse diverse Fiddles og hurtigt prøve andres kode.


Lad os så se på hvordan Electron Fiddle ser ud.

Inden du fortsætter vil det være en god idé at hente Electron Fiddle hvilket kan gøres her: https://www.electronjs.org/fiddle *Lykkes installationen umiddelbart ikke, så prøv alligevel at søg efter f.eks. Fiddle og se om ikke, at en applikation kommer frem ved dette navn.

Når vi starter Electron Fiddle op, vil det se således ud:

Du kan med fordel forstørre dette screenshot så det er nemmere at se, hvad der er hvor i Electron Fiddle. Det er faktisk yderst let at gå til.

Og lad os så komme i gang med at se lidt nærmere på tingene...


01. Lad os først tage stilling til hvilken Electron-version vi ønsker vores "app" skal benytte. Dette kan sagtens ændres senere samme sted.

Vi tager bare en beta release. Så har vi da lidt spænding men ellers ville du nok vælge 16.0.7 som er seneste stable.

02. Nu skal vi tage stilling til, hvad det er for en slags fiddle-applikation vi egentligt ønsker at skabe og nu er dette jo første trin vi har sammen, så vi sletter simpelthen index.html under Editors.

Her fjernes index.html ved at højreklikke efterfulgt af klik på Delete.

03. Lad os nu tilføje electron-context-menu (højreklik menu) under modules (dependencies) da en context menu er et must-have for mange. *Vi gør dette trin nu, fordi vi skal have lavet noget demo-halløj til dette eksempel og fordi vi allerede befinder os i dette "område".

Indtast ("sæt ind") electron-context-menu og benyt dig af enter-tasten.

04. Lad os så kigge på main.js hvor du i Electron Fiddle kommer til at bruge 90% af din tid. Vi har nu fået electron-context-menu til at stå under moduler og under main.js skal vi vi have taget den i brug. Det gør vi ved at tilføje

const contextMenu = require('electron-context-menu');
Her tilføjes det som er nævnt i skridt 4. 

05. Lad os nu tilføje en simpel context menu (højreklik menu) og for at du ikke skal i gang med noget svært endnu, så indsæt dette så du har et godt "startsted".

contextMenu({
        prepend: (params, browserWindow) => [  
        {
            label: 'BETA v0.1 by Ron',
            click() { 
                    shell.openExternal('https://intet-link.dk')
                } 
        }
    ]
    
});
Her indsættes den lille kodestump som er at finde over denne gif.

06. Allerede nu, lad os afprøve vores Fiddle. Klik på knappen Run (Play-ikonet).

07. Lad os nu højreklikke og se hvad der sker. - Se, vores context menu kom faktisk frem. Fedt ikke!

08. Prøv nu at klikke på BETA v0.1 by Ron. *Har du omdøbt teksten så klikker du selvfølgelig bare på det som der står.

09. Hov der fik vi en fejl... Inden du går videre, så prøv lige at læs hvad fejlen fortælle dig, for det skal du have lært under alle omstændigheder... ((Tænk lige et minut inden du læser videre.)) Fejlen er: shell is not defined og det er korrekt. Når der klikkes som vi har gjort, forsøger denne at åbne et link men det kan den ikke, fordi det har vi ikke bedt den om, hvis vi skal skrive det på alm. klumpedumpe-sprog. Altså vi har skrevet hvilket link men ikke gjort så links virker. Det gør vi ved at:

Tilføje const shell til vores fiddle:

const shell = require('electron').shell
Kopiér og indsæt det, som fremgår over denne gif.

10. Som i trin 06. Kør nu din fiddle igen og prøv at benytte dig af højremenuen (context menuen) og se om ikke den åbner https://intet-link.dk

11. Sådan! Så har vi faktisk fået lavet lidt som kan noget. Lad os nu få åbnet en hjemmeside som vi kan "wrappe" ind i et vindue. Hvorfor? Jo fordi vi starter fra bunden og du kan sikkert finde på en hjemmeside hvor dette vil gøre det nemmere at tilgå denne, og så har du lavet din første applikation du selv eller nogle få kan få glæde af. - Lad os nu i main.js finde frem til mainWindow.loadFile.. og slet så denne linje.

12. Indsæt nu dette i stedet: *Husk at du let kan udskifte URL-adresse med en anden www-adresse.

mainWindow.loadURL('https://gitlab.com/users/sign_in')

13: Afprøv nu din Fiddle igen som i trin/skridt 6. Har du brugt den URL-adresse jeg har valgt skulle din Fiddle-applikation gerne loade GitLab´s login side.


Nu er du kommet så langt at du har forstået hvordan du laver en context menu (højreklik-menu) og du har fået den (din Fiddle) til at loade en web-adresse op. Dvs skal du f.eks. printe via en lokal IP-adresse+port så kan du let tilgå denne via en App nu.

Lav nu din Fiddle til en pakker el. en installer.

Electron

Ron Brevstgaard

IT-Supporter, Herning HF & VUC. + Tidligere Linux Sysadmin / Systemadministrator (5 års erfaring). +7 års erfaring med SEO og link building +10 års erfaring med udvikling af hjemmesider og webshops.


  1. Minimal og anonym sporing af brugeradfærd.
  2. Eneste brug af cookies er _cfduid og _cflb - WAF og Load Balancing.
  3. Ingen deling af data med f.eks. Google.
  4. Databehandlingsaftale lavet med Cloudflare.
  5. Databehandlingsaftale lavet med DigitalOcean(DO).
  6. Kontaktformular er tilknyttet ProtonMail.
  7. Automatisk sletning af mails efter 30 dage.
  8. Filer modtaget opbevares med AES256 i CFB-mode.
  1. Ansible Advanced - Hands-On - DevOps.
  2. Google IT Support Professional Certificate.
  3. The Complete Node.js Developer Course (3rd Edition).
  4. Certified Microsoft Innovative Educator (MIE).
  5. Hootsuite Social Marketing Certification.
  6. Google Fundamentals of Digital Marketing 2019.
  7. Google Analytics for Power Users.
  8. Google Shopping ads Certification.
  9. Google Ads Search Certification.
  10. Google Analytics for Power Users.
  11. Aruba Certified Network Security Associate (ACNSA).
  12. *For datoer mv. - Se LinkedIn.
  1. Introduktion til PowerShell (Teknologisk Institut).