Jak vytvořit svou první aplikaci pro stolní počítač pomocí JavaScriptu

Přemýšleli jste někdy, zda můžete vytvářet platformy pro více platforem pro stolní počítače s HTML, CSS a JavaScript?

To je možné s Electronem.

Tento článek vám pomůže pochopit některé základní pojmy společnosti Electron.

Na konci tohoto příspěvku budete znát proces vytváření aplikací napříč platformami pro počítače s programy Electron, HTML a CSS.

Než začneme, můžete si předem vyzkoušet aplikaci, kterou v tomto tutoriálu sestavíme.

Hear Me Type bude mít jednoduchou, ale přímou funkci. Každá klávesa stisknutá na klávesnici přehraje konkrétní zvuk. Pokud tedy stisknu tlačítko „A“, aplikace přehraje konkrétní zvuk pro písmeno A.

K dispozici jsou dvě verze ke stažení. Zdrojový kód tohoto tutoriálu a pokročilá verze aplikace, doporučená pro zkušenější uživatele Electronu.

Kód se od chvíle, kdy přidávám nové funkce a vylepšení, změní. Nezapomeňte zkontrolovat, zda jsou nové.

Bez dalšího povyku pojďme zjistit více o Electronu a vytvořit naši první aplikaci!

Co je Electron?

Electron je framework pro multiplatformové desktopové aplikace využívající Chromium a Node.js.

Vytváření aplikací napříč platformami je snadné pomocí HTML, CSS a JavaScript. Vaše aplikace bude ihned po vybalení kompatibilní s operačními systémy Mac, Windows a Linux.

Další vestavěné funkce jsou:

  • Automatické aktualizace - umožní aplikacím automaticky se aktualizovat
  • Nativní nabídky a oznámení - vytváří nativní nabídky aplikací a kontextové nabídky
  • Hlášení selhání aplikace - můžete odeslat zprávy o selhání na vzdálený server
  • Ladění a profilování - Modul obsahu Chromium najde překážky ve výkonu a pomalé operace. V aplikaci můžete také použít své oblíbené vývojářské nástroje Chrome.
  • Instalační služba systému Windows - můžete vytvářet instalační balíčky. Rychlé a jednoduché.

Pokud jste spokojeni s tím, co Electron nabízí, pojďme se ponořit hlouběji a vytvořte jednoduchou aplikaci Electron.

Než si zašpiníme ruce, budete muset nainstalovat Node.js. K ukládání a aktualizaci aplikace byste také měli mít účet GitHub. Přestože účet není nutný, je velmi doporučován. GitHub je průmyslovým standardem a je důležité vědět, jak jej používat.

V tomto tutoriálu budeme používat GitHub.

Začínáme

Po nastavení otevřete okno terminálu pro svůj operační systém.

Klonujte úložiště Electron Quick Start Git do počítače podle pokynů níže.

Náš software postavíme na základě Electron Quick Start.

# Klonování úložiště Quick Start
git clone https://github.com/electron/electron-quick-start
# Jděte do úložiště
cd elektronový rychlý start
# Nainstalujte závislosti a spusťte
instalace npm && npm start

Po dokončení výše uvedených kroků byste měli vidět aplikaci otevřenou v okně prohlížeče. A je to skutečně okno prohlížeče!

Styl okna se mění v závislosti na operačním systému. Rozhodl jsem se použít klasický vzhled Windows. Báječný!

Hlavní okno naší aplikace Quick-Start Electron.

Jak jsem říkal dříve, v aplikaci můžete používat Nástroje pro vývojáře Chrome. Co můžete dělat s vývojářskými nástroji svého prohlížeče, můžete také dělat uvnitř aplikace. Vynikající!

Elektronická aplikační architektura

Pojďme se podívat na zdrojový kód a strukturu souborů naší aplikace. Otevřete projekt ve svém oblíbeném textovém editoru nebo IDE. Budu používat Atom, který je postaven na ... uhodli jste to ... Electron!

Struktura složek a souborů naší nově vytvořené aplikace.

Máme základní strukturu souborů:

elektronický rychlý start

- index.html
 - main.js
 - package.json
 - render.js

Struktura souboru je podobná struktuře, kterou používáme při vytváření webových stránek.

My máme:

  • index.html, což je webová stránka HTML5 sloužící jednomu velkému účelu: naše plátno
  • main.js vytváří okna a zpracovává systémové události
  • package.json je spouštěcí skript pro naši aplikaci. Bude spuštěn v hlavním procesu a obsahuje informace o naší aplikaci
  • render.js zpracovává procesy vykreslování aplikace

Můžete mít několik otázek ohledně hlavního procesu a vykreslení procesních věcí. Co to sakra jsou a jak se s nimi mohu vyrovnat?

Jsem rád, že jste se zeptal. Vydržte na svém klobouku, protože to může být nové teritorium, pokud přicházíte z oblasti JavaScriptu z prohlížeče!

Co je to proces?

Když uvidíte „proces“, pomyslete na proces na úrovni operačního systému. Jedná se o instanci počítačového programu spuštěného v systému.

Pokud spustím aplikaci Electron a zkontroluji MacOS ve Správci úloh systému Windows nebo Monitoru aktivity, uvidím procesy spojené s mou aplikací.

Každý z těchto procesů probíhá paralelně. Ale paměť a zdroje přidělené pro každý proces jsou izolovány od ostatních.

Řekněme, že chci vytvořit smyčku for for, která něco zvyšuje v procesu vykreslování.

var a = 1;
pro (a = 1; a <10; a ++) {
 console.log ('Toto je pro smyčku');
}

Přírůstky jsou k dispozici pouze v procesu vykreslování. Na hlavní proces to nemá žádný vliv. Zpráva Toto je pro smyčku se objeví pouze na vykresleném modulu.

Hlavní proces

Hlavní proces řídí životnost aplikace. Má zabudované plné rozhraní Node.js API, otevírá dialogy a vytváří procesy vykreslování. Zpracovává také další interakce operačního systému a spouští a ukončuje aplikaci.

Obvykle je tento proces v souboru s názvem main.js. Ale může mít libovolné jméno.

Můžete také změnit hlavní procesní soubor úpravou v souboru package.json.

Pro účely testování otevřete package.json a změňte:

„Main“: „main.js“,

na

„Main“: „mainTest.js“,

Spusťte aplikaci a zkontrolujte, zda stále funguje.

Mějte na paměti, že může existovat pouze jeden hlavní proces.

Proces vykreslování

Proces vykreslování je okno prohlížeče ve vaší aplikaci. Na rozdíl od hlavního procesu může existovat mnoho renderovacích procesů a každý je nezávislý.

Protože každý proces vykreslování je oddělený, nehoda v jednom neovlivní další. Je to díky architektuře více procesů společnosti Chromium.

Tato okna prohlížeče lze také skrýt a přizpůsobit, protože jsou jako soubory HTML.
 
Ale v Electronu máme také kompletní Node.js API. To znamená, že můžeme otevírat dialogy a další interakce operačního systému.

Přemýšlejte o tom takto:

[Zdroj: Kristian Poslek]

Jedna otázka zůstává. Mohou být nějak propojeny?

Tyto procesy probíhají souběžně a nezávisle. Stále však musí nějakým způsobem komunikovat. Zejména proto, že jsou zodpovědní za různé úkoly.

K tomu existuje interprocesní komunikační systém nebo IPC. Pomocí IPC můžete předávat zprávy mezi hlavními a renderovacími procesy. Pro podrobnější vysvětlení tohoto systému si přečtěte článek Christian Engvall.

Toto jsou základy procesů pro vývoj aplikace Electron.

Nyní se vraťme k našemu kódu!

Ať je to osobní

Pojmenujme složku naší aplikace vlastní název.

Změňte název složky z elektronického rychlého spuštění na tutoriál pro slyšení typu.

Znovu otevřete složku pomocí svého oblíbeného textového editoru nebo IDE. Upravme si identitu naší aplikace otevřením souboru package.json.

package.json obsahuje důležité informace o naší aplikaci. Zde můžete definovat jméno, verzi, hlavní soubor, autora, licenci a mnohem více.

Pojďme trochu pyšní a dáme vás jako autora aplikace.

Vyhledejte parametr „autor“ a změňte hodnotu na své jméno. Mělo by to vypadat takto:

„Autor“: „Carol Pelu“,

Musíme také změnit zbývající parametry. Najděte jméno a popis níže a změňte je v souboru package.json:

Skvělý! Nyní má naše aplikace nové jméno a krátký, ale rovný popisu bodu.

Nezapomeňte, že v terminálu můžete vždy spustit npm start a spustit tak aplikaci a zobrazit provedené změny.

Pojďme dál a přidáme očekávanou funkčnost naší aplikace. Chceme hrát specifický zvuk pro každé stisknuté tlačítko klávesnice.

Oh, Functionalitee!

Co je aplikace bez zábavnosti? Nic moc…

Nyní se o to musíme postarat a poskytnout naší aplikaci funkčnost, po které touží.

Aby aplikace reagovala na náš vstup, musíme nejprve definovat prvek, ke kterému se připojíme, a poté spustit požadovanou akci.

Za tímto účelem vytvoříme zvukové prvky se specifickými ID pro klávesy klávesnice, které chceme. Poté vytvoříme příkaz switch, abychom zjistili, která klávesa byla stisknuta. Poté přehrajeme konkrétní zvuk přiřazený k této klávese.

Pokud se vám to teď zdá trochu složité, nebojte se. Provedu vás každým krokem.

Stáhněte si tento archiv obsahující všechny zvukové soubory, které budeme používat. Brzy je využijeme!

Otevřete soubor index.html a vytvořme prvky

Uvnitř prvku vytvořte prvek div se značkou zvukové třídy.

V rámci vytvořeného prvku div vytvořte prvek

Použijeme preload = ”auto”, abychom sdělili aplikaci, že by měla načíst celý zvukový soubor, když se stránka načte. index.html je hlavní soubor aplikace a všechny naše zvukové soubory se načtou, když se aplikace spustí.

Kód by měl vypadat takto:

Váš soubor index.html by měl vypadat takto.

Nyní

Skvělý! Jedinou důležitou věcí, která právě teď chybí, je kód JavaScript.

Vytvořte nový soubor s názvem function.js. Vyžádejte si to v souboru index.html, aby byl kód JS připraven k použití, když je aplikace spuštěna.

Podle příkladu požadavku (./ renderer.js ') přidejte tento řádek kódu přímo pod něj:

vyžadují ('./ function.js')

Váš projekt by měl vypadat takto:

Vynikající! Nyní, když máme vše sešité, je čas na okamžik pravdy.

Otevřete soubor function.js a do souboru přidejte následující kód JavaScript. Za chvíli vysvětlím, jak to funguje.

document.onkeydown = function (e) {
    switch (e.keyCode) {
        případ 65:
            document.getElementById ('A'). play ();
            přestávka;
        výchozí:
            console.log ("Klíč nebyl nalezen!");
    }
};

Kód by měl vypadat takto:

Otevřete okno bash nebo Terminal. Ujistěte se, že jste ve složce svého projektu, a zadejte npm start pro spuštění aplikace.

Nalaďte hlasitost reproduktorů a stiskněte tlačítko A na klávesnici.

#MindBlown

JS kód je docela jednoduchý a přímočarý.

Pomocí události onkeydown v objektu dokumentu zjistíme, ke kterému prvku HTML se přistupuje. Pamatujte, že objekt dokumentu je hlavním oknem naší aplikace.

V rámci anonymní funkce používáme příkaz switch. Jeho účelem je identifikovat hodnotu Unicode stisknuté klávesy klávesnice.

Pokud je hodnota Unicode stisknuté klávesy klávesnice správná, bude přehráván zvuk. V opačném případě je vyvolána chyba „nenalezeno“. Vyhledejte zprávu v konzole.

Jaká jízda!

Možná jste si všimli, že máme zvukové soubory, které pokrývají klíče A-Z a 0–9. Použijte je také, aby necítily hořkou chuť osamělosti.

Přejděte na index.html a vytvořte prvek

Kód by měl vypadat takto:

Ano, samozřejmě můžete kopírovat-vložit:



































Skvělý! Nyní udělejme to samé pro kód JS v rámci funkcí.js.

Kódy char (klíčové kódy) najdete na této webové stránce.

Ale ano, můžete to také zkopírovat a vložit:

document.onkeydown = function (e) {
    switch (e.keyCode) {
        případ 48:
            document.getElementById ('0'). play ();
            přestávka;
        případ 49:
            document.getElementById ('1'). play ();
            přestávka;
        případ 50:
            document.getElementById ('2'). play ();
            přestávka;
        případ 51:
            document.getElementById ('3'). play ();
            přestávka;
        případ 52:
            document.getElementById ('4'). play ();
            přestávka;
        případ 53:
            document.getElementById ('5'). play ();
            přestávka;
        případ 54:
            document.getElementById ('6'). play ();
            přestávka;
        případ 55:
            document.getElementById ('7'). play ();
            přestávka;
        případ 56:
            document.getElementById ('8'). play ();
            přestávka;
        případ 57:
            document.getElementById ('9'). play ();
            přestávka;
        případ 65:
            document.getElementById ('A'). play ();
            přestávka;
        případ 66:
            document.getElementById ('B'). play ();
            přestávka;
        případ 67:
            document.getElementById ('C'). play ();
            přestávka;
        případ 68:
            document.getElementById ('D'). play ();
            přestávka;
        případ 69:
            document.getElementById ('E'). play ();
            přestávka;
        případ 70:
            document.getElementById ('F'). play ();
            přestávka;
        případ 71:
            document.getElementById ('G'). play ();
            přestávka;
        případ 72:
            document.getElementById ('H'). play ();
            přestávka;
        případ 73:
            document.getElementById ('I'). play ();
            přestávka;
        případ 74:
            document.getElementById ('J'). play ();
            přestávka;
        případ 75:
            document.getElementById ('K'). play ();
            přestávka;
        případ 76:
            document.getElementById ('L'). play ();
            přestávka;
        případ 77:
            document.getElementById ('M'). play ();
            přestávka;
        případ 78:
            document.getElementById ('N'). play ();
            přestávka;
        případ 79:
            document.getElementById ('O'). play ();
            přestávka;
        případ 80:
            document.getElementById ('P'). play ();
            přestávka;
        případ 81:
            document.getElementById ('Q'). play ();
            přestávka;
        případ 82:
            document.getElementById ('R'). play ();
            přestávka;
        případ 83:
            document.getElementById ('S'). play ();
            přestávka;
        případ 84:
            document.getElementById ('T'). play ();
            přestávka;
        případ 85:
            document.getElementById ('U'). play ();
            přestávka;
        případ 86:
            document.getElementById ('V'). play ();
            přestávka;
        případ 87:
            document.getElementById ('W'). play ();
            přestávka;
        případ 88:
            document.getElementById ('X'). play ();
            přestávka;
        případ 89:
            document.getElementById ('Y'). play ();
            přestávka;
        případ 90:
            document.getElementById ('Z'). play ();
            přestávka;
        výchozí:
            console.log ("Klíč nebyl nalezen!");
    }
};

Naše aplikace je nyní kompletní! Gratuluji!

Hlavní funkčnost aplikace je dokončena, ale stále je třeba vykonat práci!

Polska ja! (Polsky mě!)

I když je aplikace funkční, stále jí chybí některé věci.

Například v souboru theindex.html můžete změnit název aplikace a obsah hlavního okna.

Kromě toho aplikace nemá design, žádné krásné barvy a žádné obrázky ani koček nebo psů.

Osvoboďte svou fantazii a najděte způsoby, jak vylepšit design aplikace.

Ani kód není dokonalý. Máme spoustu identických kódů, které lze optimalizovat a vylepšovat. Výsledkem bude méně řádků kódu a pro oči to bude méně bolestivé.

Duplicitní kód je špatný postup!

Vyzkoušejte to! Jen to vyzkoušejte!

Dobrý software musí být důkladně otestován.

Doporučuji začít stisknutím každé klávesy, abyste viděli, co se děje.

Nejlepší scénář je, že uslyšíte zvuk pro každou klávesu klávesnice, kterou jste zadali v kódu. Co se však stane, když stisknete mnoho kláves v řadě tak rychle, jak můžete? A co klávesy, které nemají být stisknuty jako tlačítka Home a NumLock?

Co když minimalizujete aplikaci a zkusíte stisknout klávesu? Slyšíte zvuk? A co se stane, když nemáte vybrané okno aplikace a stisknete klávesu klávesnice, slyšíte ještě nějaké zvuky?

Odpověď je bohužel ne.

Toto chování je způsobeno architekturou, na které byl postaven Electron. To vám umožní získat globální klíče, jako byste to mohli udělat s jazykem C #, ale nemůžete zaregistrovat jednotlivé úhozy. To je mimo oblast běžných případů použití pro elektronovou aplikaci.

Projděte kód po řádku a zkuste jej přerušit. Podívejte se, co se děje a jaké chyby Electron hází. Toto cvičení vám pomůže zlepšit ladění. Pokud znáte nedostatky své aplikace, pak víte, jak je opravit a vylepšit aplikaci.

V souboru function.js jsem úmyslně použil ukončenou událost JavaScriptu. Dokážete to najít?

Jakmile to zjistíte, rád bych přemýšlel o tom, jak jej nahradit beze změny funkce aplikace.

Používání zastaralého kódu je špatný postup a může vést k vážným chybám, o kterých byste možná ani nevěděli, že existují. Zůstaňte v kontaktu s dokumentací jazyka a podívejte se, co se mohlo změnit. Vždy zůstaňte v obraze.

Závěr

Chtěl bych vám poděkovat a poblahopřát vám k dosažení tohoto bodu!

Nyní máte znalosti k vytvoření jednoduché multiplatformní aplikace Electron.

Pokud se chcete ponořit hlouběji do Electronu a uvidíte, na čem pracuji, podívejte se na Hear Me Type a můj profil na GitHubu.

Nebojte se klonovat, rozvětvovat, hrát a přispívat k některým z mých veřejných projektů.

Vraťte se prosím a přečtěte si znovu tento článek čas od času. Upravím jej tak, aby byl aktuální s elektrónovými aktualizacemi.

Mockrát vám děkuji, že jste si udělali čas na přečtení mého článku.

Tento článek byl původně zveřejněn na NeutronDev.com.

Pokud si chcete užít podrobnější články / návody o společnosti Electron, klikněte níže na . Nebojte se zanechat komentář.