Kuinka luoda Electron-sovellus käyttämällä Angular- ja SQLite3-sovelluksia.

Kokeilin äskettäin yhden Angular-verkkosovellukseni muuntamista työpöytäsovellukseksi Electronin avulla. Kohtasin muutamia esteitä matkan varrella ja päätin laittaa kokemukseni kirjallisesti, jotta se voisi auttaa muita. Jos sinulla on samanlaisia ​​suunnitelmia projektiisi, toivon, että siitä voi olla hyötyä. Tämän oppaan lähdekoodi löytyy täältä.

Osa I: Kulma

Luo kattilalevy.

Tämän oppaan vuoksi luomme uuden Angular-sovelluksen tyhjästä. Käytän Electron-Forgeä kattilalevyn luomiseen. Electron-Forge tarjoaa useita malleja kattilakoodin luomiseen, mukaan lukien yksi Angular 2: lle. Asenna ensin Electron-Forge CLI.

$ npm i -g electron-forge

Luo nyt kulmikasovelluksen kattolevy CLI: n avulla.

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

Forge CLI lisää paljaat olennaiset osat, joita tarvitsemme sovelluksemme ajamiseksi. Lisätään muutama ylimääräinen hakemisto tietokantatiedostoihimme. Lisää omaisuushakemisto src: n alle ja laita sen alle data- ja mallihakemistot.

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

Hakemistopuun pitäisi nyt näyttää tältä:

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

Kirjoita jonkin verran koodia.

Ensimmäisenä askeleena lisätään mallitiedosto, joka sovitetaan yhteen tietokantamallimme kanssa. Tässä yksinkertaisessa esimerkissä luodaan luokka nimeltä Tuote. Jokainen kohde sisältää id- ja name-ominaisuuden. Tallenna tiedosto projektiisi osoitteessa src/assets/model/item.schema.ts.

Käytämme TypeORM-objektien relaatiokartoitusta. Asenna ensin TypeORM.

$ npm install typeorm --save

Seuraamme TypeORM-ohjetta luodaksesi skeeman täällä. Kun tiedosto on valmis, sen pitäisi näyttää tältä:

TypeORM käyttää konekirjoittajia. Käytämme Entity-sisustajaa julistamaan Tuoteryhmämme taulukoksi. @PrimaryGeneratedColumn()Sisustusarkkitehti julistaa idmeidän tunnisteet, ja kertoo tietokannan automaattisesti sitä. Huolehdimme myöhemmin linkittämisestä tietokantaan.

Luo palvelu.

Seuraava todennäköinen toimintamme olisi luoda sovelluspalvelu, joka käsittelee viestintää edestä takapäähän. Electron asettaa IpcRendererluokan saataville juuri tähän asiaan. IpcRendereron Electronin prosessien välinen viestintäluokka, jota käytetään renderöintiprosessissa. Pohjimmiltaan haluamme käyttää IpcRendererviestien lähettämistä Electronin pääprosessiin. Nämä viestit välittävät tietoja pääprosessille, jotta se pystyy käsittelemään tietokannan vuorovaikutusta.

Toteuttamalla IpcRendererkohtaamme ensimmäisen esteen. Electron luottaa window.require () -menetelmään, joka on käytettävissä vain Electronin renderöintiprosessin sisällä. Tämä on hyvin dokumentoitu asia. Tämän kiertämiseksi voimme käyttää ThornstonHansin ngx-elektronipakettia, joka kääri kaikki renderöintiprosessille altistuneet Electron-sovellusliittymät yhdeksi Electron-palveluksi. Voit lukea lisää täältä.

Ennen kuin voimme käyttää ngx-electron, meidän on asennettava se.

$ npm install ngx-electron --save

Luodaan nyt palvelu IpcRendererviestinnän käsittelemiseksi. Luo src/app.service.ts.

Sisään app.service.tsluomme luokan nimeltä AppServiceja lisätään @Injectable()sisustaja. Tämän avulla voimme käyttää kulmien sisäänrakennettua riippuvuusinjektiota (DI). Konstruktorissamme luomme _electronServicetyypin paikallisen muuttujan ElectronService. ElectronServiceLuokka on antanut meille ngrx-electron. Sen avulla voimme käyttää Electronin IpcRenderluokkaa ilman mitään edellä mainituista ongelmista.

Luomme kolme toimintoa: yhden, joka saa kaikki tietokannan kohteet, yhden kohteen lisäämiseksi tietokantaan ja yhden kohteen poistamiseksi. Jokainen toiminto palauttaa havainnoitavan.

Havaittavat ovat osa RxJs-kirjastoa ja tarjoavat hyvän tavan käsitellä tietokanta-vuorovaikutuksiamme asynkronisesti. Voit lukea lisää havaittavista täältä. Huomaa Observable-operaattorin ofkäyttö ilmaisemaan, että this._electronService.ipcRenderer.sendSync()käärimme vastauksemme havainnoitavaksi arvoksi.

Palvelujen rekisteröinti ja komponenttien kirjoittaminen.

Kun palvelumme on valmis, src/app.component.tsrekisteröidään se DI: lle. Siellä ollessamme lisätään yksinkertainen html-malli ja toiminnot painikkeen tapahtumien käsittelemiseksi.

Muista lisätä AppServicepalveluntarjoajana @NgModulesisustajan argumenteissa ja myös yksityisenä muuttujana AppComponentkonstruktorissa. Meidän on myös lisättävä ElectronServicepalveluntarjoajana.

Alustamalla komponenttimme haluamme ladata kaikki tietokantamme sisällöt ja näyttää ne. Tätä varten tilaamme luomamme addItem()palvelun toiminnon. Jos muistat, kaikki palvelumme palauttavat havaittavissa olevat. Saadaksesi tietoja havainnoitavastamme tilaamme ne, välittämällä takaisinsoittotoiminnon, joka toimii, kun tiedot vastaanotetaan. Yllä olevassa esimerkissä (items) => (this.itemList = items) täyttää luokkamuuttujamme le itemLtietokannan sisällöllä, kun se on haettu.

Noudatamme samanlaista taktiikkaa kohteiden lisäämiseen ja poistamiseen tietokannasta. Joka kerta, kun uudelleensijoitetaan itemListtietokannan päivitetyllä sisällöllä.

Osa II: Elektroni

Asennetaan SQLite3.

Nyt kun olemme suorittaneet käyttöliittymämme, meidän on luotava Electron-taustakuva. Electron-taustakortti käsittelee ja käsittelee edestä lähetettyjä viestejä ja hallinnoi sqlite3-tietokantaa.

Käytämme sqlite3-tietokantaamme ja meidän on asennettava se.

$ npm install sqlite3 --save

Este, jonka törmäsin työskennellessäni aluksi sqlite3: n ja Electronin kanssa, oli se, että sqliten alkuperäiset binäärit on koottava uudelleen käytettäväksi Electronin kanssa. Electron-Forgen tulisi huolehtia tästä puolestasi. Yksi asia on huomata, että Electron-Forge käyttää node-gyp: tä binäärien kokoamiseen. Saatat joutua asentamaan ja konfiguroimaan sen oikein ennen käyttöä, joka sisältää myös Pythonin asentamisen. Tästä lähtien node-gyp käyttää python 2. Jos koneellasi on useita versioita, sinun on varmistettava, että nykyinen koontiversio käyttää oikeaa versiota.

Yhdistetään tietokantaan.

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.

Viimeinen vaihe on luoda toimintoja, jotka käsittelevät IpcRenderer. Kukin funktio käyttää itemRepoluomamme objektia pääsemään tietokantaan. Jokaisen tapahtuman onnistuneen suorittamisen jälkeen toiminnot siirtävät tietokannan uuden tilan takaisin renderöijälle.

Osa III: Suorita se!

Kun kaikki on valmis, voimme nyt käyttää sovellusta. Electron-Forge hoitaa tämän prosessin meille. Meidän on vain suoritettava komento:

$ npm run start

Jos kaikki on oikein, Electron avaa sovelluksesi ja voit testata sitä.

Kiitos lukemisesta!