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

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:

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.

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.

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".

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');

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')
                } 
        }
    ]
    
});

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

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.