Hogyan hozzunk létre egy Electron alkalmazást az Angular és az SQLite3 használatával.

Nemrégiben kísérleteztem az egyik Angular webalkalmazás átalakításával asztali alkalmazássá az Electron segítségével. Út közben néhány akadályba ütköztem, és úgy döntöttem, hogy írásban átadom a tapasztalataimat, hogy ez segítsen másoknak. Ha hasonló tervei vannak a projekttel kapcsolatban, remélem, hogy ez hasznos lehet. Az útmutató forráskódja itt található.

I. rész: Szögletes

Hozza létre a kazánlemezt.

Az útmutató érdekében egy új Angular alkalmazást hozunk létre a semmiből. Az Electron-Forge segítségével fogom elkészíteni a kazántáblát. Az Electron-Forge számos sablont kínál a kazánlapkód létrehozásához, köztük egyet a Angular 2-hez. Először telepítse az Electron-Forge CLI-t.

$ npm i -g electron-forge

Most a CLI segítségével hozza létre az Angular alkalmazás kazántáblát.

$ electron-forge init electron-angular-sqlite3 --template=angular2$ cd electron-angular-sqlite3

A hamis CLI hozzáadja az alkalmazás futtatásához szükséges alapvető elemeket. Adjunk hozzá néhány további könyvtárat az adatbázisfájljaink tárolásához. Adjon hozzá egy eszközkönyvtárat az src alá, és tegye alá az adat- és modellkönyvtárakat.

$ mkdir ./src/assets/data ./src/assets/model

A könyvtárfának most így kell kinéznie:

.+-node_modules+-src| || +-assets| | || | +-data| | +-model| || +-app.component.ts| +-bootstrap.ts| +-index.html| +-index.ts|+-.compilerc+-.gitignore+-package-lock.json+-package.json+-tsconfig.json+-tslint.json

Írj valamilyen kódot.

Első lépésként adjunk hozzá egy modellfájlt, amely megfelel az adatbázis-sémánknak. Ehhez az egyszerű példához hozzunk létre egy Item nevű osztályt. Minden elem tartalmazni fog egy azonosítót és egy név tulajdonságot. Mentse a fájlt a projektbe a címen src/assets/model/item.schema.ts.

Az objektum relációs leképezéséhez a TypeORM-ot fogjuk használni. Először telepítse a TypeORM-ot.

$ npm install typeorm --save

A séma létrehozásához itt a TypeORM útmutatót fogjuk követni. Ha elkészült, a fájlnak így kell kinéznie:

A TypeORM gépírókészítőket használ. Az Entity dekorátort használjuk arra, hogy a Tétel osztályunkat táblává nyilvánítsuk. A @PrimaryGeneratedColumn()dekoratőr idegyedi azonosítónknak nyilvánítja magát, és megmondja az adatbázisnak, hogy automatikusan generálja azt. A későbbiekben aggódni fogunk egy adatbázis összekapcsolása miatt.

Hozza létre a Szolgáltatást.

A következő valószínű akciónk egy olyan alkalmazásszolgáltatás létrehozása lenne, amely kezeli a kommunikációt az elejétől a háttérig. Az Electron IpcRenderercsak erre a célra teszi elérhetővé az osztályt. IpcRendereraz Electron folyamatközi kommunikációs osztálya, amelyet a renderelési folyamatban használnak. Alapvetõen azt akarjuk használni IpcRenderer, hogy üzeneteket küldjünk az Electron fõ folyamatához. Ezek az üzenetek továbbítják az információkat a fő folyamatnak, hogy az kezelni tudja az adatbázis interakcióit.

Az IpcRendererelső lépés megvalósításával találkozunk. Az Electron az window.require () módszerre támaszkodik, amely csak az Electron renderelő folyamatában érhető el. Ez egy jól dokumentált kérdés. Ennek megkerüléséhez használhatjuk a ThornstonHans ngx-elektron csomagját, amely egyetlen, a renderelő folyamatnak kitett Electron API-t egyetlen Electron szolgáltatásba csomagolja. Erről bővebben itt olvashat.

Használat előtt ngx-electrontelepítenünk kell.

$ npm install ngx-electron --save

Most hozzunk létre egy szolgáltatást a IpcRendererkommunikációnk kezelésére . Hozzon létre src/app.service.ts.

A app.service.tshozunk létre egy osztályt hívott AppService, és adjuk hozzá a @Injectable()lakberendező. Ez lehetővé teszi számunkra a szögletes beépített függőségi injektálás (DI) használatát. Konstruktorunkban létrehozunk egy lokális _electronServicetípusú változót ElectronService. Az ElectronServiceórát számunkra biztosítja ngrx-electron. Ez lehetővé teszi számunkra az Electron IpcRenderosztályának használatát a fent említett kérdések nélkül.

Három funkciót hozunk létre: egyet, amely az összes elemet megkapja az adatbázisban, egyet egy elem hozzáadásához az adatbázisba, egyet pedig egy elem törléséhez. Minden funkció egy Megfigyelhetőt ad vissza.

A megfigyelhető elemek az RxJs könyvtár részét képezik, és jó módszert kínálnak az adatbázis-interakciók aszinkron kezelésére. A Megfigyelhetőkről itt olvashat bővebben. Vegye figyelembe az Observable operátor használatát ofannak jelzésére, hogy a válaszunkat this._electronService.ipcRenderer.sendSync()Observable értékként csomagoljuk .

Szolgáltatások és komponensek regisztrálása.

Ha teljes a szolgáltatásunk, menjünk be src/app.component.tsés regisztráljuk a DI-re. Amíg bent vagyunk, hozzáadunk egy egyszerű HTML-sablont és funkciókat a gombesemények kezeléséhez.

Győződjön meg arról, hogy AppServiceszolgáltatóként adja meg a @NgModuledekorátor argumentumokban, és magánváltozóként is hozzáadja a AppComponentkonstruktorhoz. Szolgáltatóként is hozzá kell adnunk ElectronService.

A komponens inicializálásakor be akarjuk tölteni az adatbázisunk összes tartalmát és meg akarjuk jeleníteni. Ehhez feliratkozunk az addItem()általunk létrehozott szolgáltatás funkciójára. Ha emlékszel, minden szolgáltatási funkciónk megadja a Megfigyelhetőket. Ahhoz, hogy adatokat kapjunk megfigyelhető eredményeinkből, feliratkozunk azokra, átadva egy visszahívási funkciót, amely az adatok fogadásakor fut. A fenti példában az (items) => (this.itemList = items) le itemLaz adatbázis lekérdezésével feltölti osztályváltozónkat az adatbázis tartalmával.

Hasonló taktikát követünk az elemek hozzáadásához és törléséhez az adatbázisból. Minden alkalommal, amikor újra feltölti itemListaz adatbázis frissített tartalmát.

II. Rész: Elektron

Az SQLite3 telepítése.

Most, hogy befejeztük a kezelőfelületünket, létre kell hoznunk az Electron háttérrendszert. Az Electron háttérkezelő kezeli és feldolgozza az előlről küldött üzeneteket, és kezeli az sqlite3 adatbázist.

Az sqlite3-at fogjuk használni az adatbázisunkhoz, és telepítenünk kell.

$ npm install sqlite3 --save

Az egyik akadály, amellyel az sqlite3-mal és az Electronnal kezdetben dolgoztam, az volt, hogy az sqlite natív bináris fájljait újra össze kell állítani az Electron használatához. Az Electron-Forge gondoskodik erről az Ön számára. Egy dolgot érdemes megjegyezni, hogy az Electron-Forge a node-gyp-t használja a bináris fájlok összeállításához. Előfordulhat, hogy használat előtt megfelelően telepítenie és konfigurálnia kell, ideértve a Python telepítését is. Mostantól a node-gyp a Python 2-t használja. Ha több verziója van a gépén, győződjön meg arról, hogy az aktuális összeállítás a megfelelőt használja.

Csatlakozás az adatbázishoz.

Now let’s open our src/index.ts file and add some code to connect to the database. The two things we need to do are, connect to the database, and add functions to handle our requests from the renderer process. The finished file looks like this:

An in depth explanation of TypeORM and Electron is beyond the scope of this

guide, so I will only briefly discuss the above file. First we need to import the createConnection class from the TypeORM library. We also need to import or Item schema.

As expected, the createConnection class will create a connection to our database. We pass it a constructor with parameters such as type, database, and entities. Type is a string that describes what type of database we are using. Database is a string that points to the database location. Entities is where we tell TypeORM what schemas to expect. For our purpose: type is ‘sqlite’, Database is ‘./src/assets/data/database.sqlite’, and Entities is our imported Item class.

TypeORM allows you two options when working with database transactions: EntityManager and Repository. Both will give you access to functions for querying the database, without writing the SQL. We create a Repository object with the line itemRepo = connection.getRepository(Item) . This gives us access to transaction methods for our Item table.

The last step is to create functions to handle the messages being sent from the IpcRenderer. Each function will use the itemRepo object we created to access the database. After successful completion of each transaction, the functions will pass the new state of the database back to the renderer.

Part III: Run it!

With everything complete, we can now run the app. Electron-Forge handles this process for us. All we need to do is run the command:

$ npm run start

If everything is correct, Electron will open your app and you can test it out.

Thanks for reading!