Kā izveidot Electron lietotni, izmantojot Angular un SQLite3.

Nesen eksperimentēju, pārveidojot vienu no savām Angular tīmekļa lietotnēm par darbvirsmas lietojumprogrammām, izmantojot Electron. Es savā ceļā saskāros ar dažiem šķēršļiem un nolēmu savu pieredzi nodot rakstiski, lai tas varētu palīdzēt citiem. Ja jums ir līdzīgi plāni attiecībā uz jūsu projektu, es ceru, ka tas varētu būt noderīgs. Šīs rokasgrāmatas avota kodu var atrast šeit.

I daļa: Stūraina

Izveidojiet katlu.

Šīs rokasgrāmatas labad mēs izveidosim jaunu Angular lietotni no jauna. Lai izveidotu katlu, es izmantošu Electron-Forge. Electron-Forge piedāvā vairākas veidnes katlu koda izveidei, ieskaitot vienu Angular 2. Vispirms instalējiet Electron-Forge CLI.

$ npm i -g electron-forge

Tagad izmantojiet CLI, lai izveidotu lietotnes Angular boilplate.

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

Viltojuma CLI pievienos nepieciešamos elementus, kas nepieciešami mūsu lietotnes darbināšanai. Pievienosim dažus papildu direktorijus, lai izvietotu mūsu datu bāzes failus. Pievienojiet aktīvu direktoriju zem src un zem tā ievietojiet datu un modeļu direktorijus.

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

Direktoriju kokam tagad vajadzētu izskatīties šādi:

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

Uzrakstiet kādu kodu.

Kā pirmo soli pievienosim modeļa failu, kas saskaņos mūsu datubāzes shēmu. Šim vienkāršajam piemēram izveidosim klasi ar nosaukumu Item. Katrā vienumā būs ID un nosaukuma rekvizīti. Saglabājiet failu savā projektā vietnē src/assets/model/item.schema.ts.

Objektu relāciju kartēšanai mēs izmantosim TypeORM. Vispirms instalējiet TypeORM.

$ npm install typeorm --save

Mēs šeit sekosim TypeORM vadlīnijām, lai izveidotu shēmu. Kad esat pabeidzis, failam vajadzētu izskatīties šādi:

TypeORM izmanto mašīnrakstu dekoratorus. Mēs izmantojam Entity dekoratoru, lai mūsu priekšmetu klasi pasludinātu par tabulu. @PrimaryGeneratedColumn()Dekorators paziņo idpar mūsu unikālo identifikāciju un stāsta datu bāzi, lai automātiski ģenerētu to. Mēs vēlāk uztraucamies par saiti ar datu bāzi.

Izveidojiet pakalpojumu.

Mūsu nākamā iespējamā darbība būtu izveidot lietotņu pakalpojumu, kas apstrādā komunikāciju no priekšpuses līdz aizmugurējai daļai. Electron padara IpcRendererklasi pieejamu tikai šai lietai. IpcRendererir Electron starpprocesu komunikācijas klase, kas tiek izmantota renderēšanas procesā. Būtībā mēs vēlamies izmantot IpcRendererziņojumu sūtīšanai uz Electron galveno procesu. Šie ziņojumi nodos informāciju galvenajam procesam, lai tas varētu apstrādāt datu bāzes mijiedarbību.

Īstenojot to, IpcRendererkur mēs sastopamies ar savu pirmo šķērsli. Electron paļaujas uz metodi window.require (), kas ir pieejama tikai Electron renderētāja procesā. Tas ir labi dokumentēts jautājums. Lai to apietu, mēs varam izmantot ThornstonHans paketi ngx-electron, kas visus Electron API, kas pakļauti renderēšanas procesam, iesaiņo vienā Electron Service. Vairāk par to varat izlasīt šeit.

Pirms mēs varam to izmantot ngx-electron, mums tas ir jāinstalē.

$ npm install ngx-electron --save

Tagad izveidosim pakalpojumu, lai apstrādātu mūsu IpcRenderersaziņu. Izveidot src/app.service.ts.

Jo app.service.tsmēs izveidot klasi sauc AppServiceun pievienojiet @Injectable()dekorators. Tas ļauj mums izmantot leņķa iebūvēto atkarības iesmidzināšanu (DI). Mūsu konstruktorā mēs izveidojam lokālu _electronServicetipa mainīgo ElectronService. ElectronServiceKlase ir, mums nodrošināja ngrx-electron. Tas ļauj mums izmantot Electron IpcRenderklasi bez neviena no iepriekšminētajām problēmām.

Mēs izveidojam trīs funkcijas: vienu, kas iegūst visus vienumus datu bāzē, vienu, lai pievienotu vienumu datu bāzei, un vienu, lai izdzēstu vienumu. Katra funkcija atgriezīs novērojamo.

Novērojamie ir daļa no RxJs bibliotēkas un nodrošina labu veidu, kā asinhroni apstrādāt mūsu datu bāzes mijiedarbību. Vairāk par Observables varat izlasīt šeit. Ievērojiet operatora Observable lietojumu, oflai apzīmētu, ka mūsu atbilde tiek iesaiņota this._electronService.ipcRenderer.sendSync()kā novērojama vērtība.

Pakalpojumu reģistrēšana un komponentu rakstīšana.

Kad mūsu pakalpojums ir pabeigts, iedziļināsimies src/app.component.tsun reģistrēsim to DI. Atrodoties tur, mēs pievienosim vienkāršu HTML veidni un funkcijas, lai apstrādātu mūsu pogu notikumus.

Dekoratora argumentos noteikti pievienojiet AppServicekā nodrošinātāju @NgModuleun arī kā privātu mainīgo AppComponentkonstruktorā. Mums arī jāpievieno ElectronServicekā pakalpojumu sniedzējs.

Inicializējot mūsu komponentu, mēs vēlamies ielādēt visu mūsu datubāzes saturu un to parādīt. Lai to izdarītu, mēs abonējam addItem()mūsu izveidotā pakalpojuma funkciju. Ja atceraties, visas mūsu apkalpošanas funkcijas atgriež novērojamos objektus. Lai iegūtu datus no mūsu novērojamiem datiem, mēs tos abonējam, nododot atzvanīšanas funkciju, kas darbojas, kad tiek saņemti dati. Iepriekš minētajā piemērā (items) => (this.itemList = items) aizpildīs mūsu klases mainīgo le itemLar datu bāzes saturu, tiklīdz tas būs iegūts.

Mēs sekojam līdzīgai taktikai, lai pievienotu un dzēstu vienumus no datu bāzes. Katru reizi itemListatjauno datubāzes saturu.

II daļa: Elektrons

SQLite instalēšana3.

Tagad, kad esam pabeiguši savu priekšējo daļu, mums jāizveido Electron aizmugure. Electron aizmugure apstrādās un apstrādās ziņojumus, kas nosūtīti no priekšpuses, un pārvaldīs sqlite3 datu bāzi.

Mēs savai datu bāzei izmantosim sqlite3, un tā būs jāinstalē.

$ npm install sqlite3 --save

Sākotnēji strādājot ar sqlite3 un Electron, man radās šķērslis, ka sqlite vietējie binārie faili ir jāpārkompilē, lai tos varētu izmantot kopā ar Electron. Par to jārūpējas Electron-Forge. Jāatzīmē viena lieta: Electron-Forge bināro failu apkopošanai izmantos node-gyp. Jums var būt nepieciešams to pareizi instalēt un konfigurēt pirms lietošanas, kas ietver Python instalēšanu. Pašlaik mezgls-gyp izmanto 2. pitonu. Ja jūsu datorā ir vairākas versijas, jums jāpārliecinās, vai pašreizējā būvēšana tiek izmantota pareizā.

Savienojuma izveide ar datu bāzi.

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.

Pēdējais solis ir izveidot funkcijas, lai apstrādātu ziņojumus, kas tiek sūtīti no IpcRenderer. Katra funkcija izmantos itemRepomūsu izveidoto objektu, lai piekļūtu datu bāzei. Pēc katra darījuma veiksmīgas pabeigšanas funkcijas nodos jauno datu bāzes stāvokli renderētājam.

III daļa: Palaidiet to!

Kad viss ir pabeigts, tagad mēs varam palaist lietotni. Electron-Forge veic šo procesu mums. Viss, kas mums jādara, ir palaist komandu:

$ npm run start

Ja viss ir pareizi, Electron atvērs jūsu lietotni, un jūs varat to pārbaudīt.

Paldies, ka lasījāt!