Како се креира апликација Елецтрон користећи Ангулар и СКЛите3.

Недавно сам експериментисао са претварањем једне од својих веб апликација Ангулар у десктоп апликацију помоћу Елецтрон-а. Успут сам наишао на неколико препрека и одлучио сам да своје искуство писем како бих помогло другима. Ако имате сличне планове за свој пројекат, надам се да ће ово можда бити од користи. Изворни код за овај водич можете пронаћи овде.

Део И: Угаона

Направите бојлер.

Ради овог водича креираћемо нову апликацију Ангулар од нуле. Користићу Елецтрон-Форге за израду бојлера. Елецтрон-Форге нуди неколико шаблона за креирање кода, укључујући један за Ангулар 2. Прво инсталирајте Елецтрон-Форге ЦЛИ.

$ npm i -g electron-forge

Сада користите ЦЛИ за креирање узорка апликације Ангулар.

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

ЦЛИ форге ће додати основне ствари које су нам потребне за покретање наше апликације. Додајмо неколико додатних директоријума за смештај датотека наше базе података. Додајте директоријум средстава под срц, а испод ставите директоријуме података и модела.

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

Стабло директорија сада би требало да изгледа овако:

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

Напишите неки код.

Као наш први корак, додајмо датотеку модела која ће одговарати нашој шеми базе података. За овај једноставан пример, креирајмо класу под називом Итем. Свака ставка ће садржати својство ид и наме. Спремите датотеку у свој пројекат на src/assets/model/item.schema.ts.

Користићемо ТипеОРМ за наше релационо мапирање објеката. Прво инсталирајте ТипеОРМ.

$ npm install typeorm --save

Овде ћемо следити ТипеОРМ водич за креирање шеме. По завршетку датотека би требало да изгледа овако:

ТипеОРМ користи декораторе писаћег строја. Користимо Ентити декоратер да бисмо нашу класу предмета прогласили табелом. @PrimaryGeneratedColumn()Декоратер изјављује idкао наш јединствену идентификацију и говори података да је аутоматски генерише. Касније ћемо се бринути о повезивању са базом података.

Креирајте услугу.

Наша следећа вероватна акција била би стварање услуге апликација која управља комуникацијом од предњег до задњег дела. Елецтрон чини IpcRendererкласу доступном управо за ову ствар. IpcRendererје Елецтронова класа међупроцесне комуникације која се користи у процесу приказивања. У основи, желимо да користимо IpcRendererза слање порука главном Елецтроновом процесу. Ове поруке ће проследити информације главном процесу како би могао да обрађује интеракције са базом података.

Спровођење програма IpcRendererнаилазимо на нашу прву препреку. Елецтрон се ослања на методу виндов.рекуире (), која је доступна само у процесу приказивања Елецтрона. Ово је добро документовано питање. Да бисмо то заобишли, можемо користити ТхорнстонХанс-ов нгк-елецтрон пакет, који обједињује све Елецтрон АПИ-је изложене процесу приказивања у једну Елецтрон услугу. Више о овоме можете прочитати овде.

Пре него што почнемо да га користимо ngx-electron, морамо га инсталирати.

$ npm install ngx-electron --save

Хајде сада да креирамо услугу која ће управљати нашом IpcRendererкомуникацијом. Направи src/app.service.ts.

У app.service.tsкреирамо класу која се зове AppServiceи додамо @Injectable()декоратер. То нам омогућава да користимо уграђено убризгавање зависности (ДИ). У нашем конструктору креирамо локалну променљиву _electronServiceтипа ElectronService. ElectronServiceКласа обезбеђује нам је ngrx-electron. Омогућава нам да користимо IpcRenderкласу Елецтрон без иједног од горе поменутих проблема.

Креирамо три функције: једну која добија све ставке у бази података, једну за додавање ставке у базу података и једну за брисање ставке. Свака функција ће вратити Обсервабле.

Посматрани су део РкЈс библиотеке и пружају добар начин асинхроног руковања интеракцијама са базом података. Више о Обсерваблес можете прочитати овде. Обратите пажњу на употребу опажљивог оператора ofда означи да свој одговор this._electronService.ipcRenderer.sendSync()оматамо као опсервабилну вредност.

Регистровање услуга и писање компоненте.

Када је наша услуга завршена, идемо src/app.component.tsи региструјмо је за ДИ. Док смо тамо, додаћемо једноставан хтмл образац и функције за руковање догађајима са дугметима.

Обавезно додајте AppServiceкао добављача у @NgModuleаргументе декоратора, а такође и као приватну променљиву у AppComponentконструктору. Такође морамо додати ElectronServiceкао добављача.

При иницијализацији наше компоненте желимо да учитамо сав садржај наше базе података и прикажемо је. Да бисмо то урадили, претплаћујемо се на addItem()функцију услуге коју смо створили. Ако се сећате, све наше услужне функције враћају Обсерваблес. Да бисмо добили податке из нашег видљивог, претплаћујемо се на њих, прослеђујући функцију повратног позива која се покреће када су подаци примљени. У горњем примеру, (items) => (this.itemList = iteмс) ће попунити нашу променљиву класе le itemLсадржајем базе података када се преузме.

Следимо сличне тактике за додавање и брисање предмета из базе података. Сваки пут поновним попуњавањем itemListажурираним садржајем базе података.

Део ИИ: Електрон

Инсталирање СКЛите3.

Сада када смо завршили свој фронт енд, морамо да креирамо Елецтрон позадину. Заштита Елецтрон ће обрађивати и обрађивати поруке послате са предње стране и управљати склите3 базом података.

За нашу базу података користићемо склите3 и мораћемо да је инсталирамо.

$ npm install sqlite3 --save

Препрека на коју сам наишао док сам у почетку радио са склите3 и Елецтроном била је та да склитеове бинарне датотеке треба да се прекомпајлирају за употребу са Елецтроном. Елецтрон-Форге би требало да се побрине за ово уместо вас. Треба напоменути да ће Елецтрон-Форге користити ноде-гип за компајлирање бинарних датотека. Можда ће вам требати да га правилно инсталирате и конфигуришете пре употребе, што укључује и инсталирање Питхона. Од сада ноде-гип користи питхон 2. Ако на рачунару имате више верзија, морате осигурати да тренутна верзија користи одговарајућу.

Повезивање са базом података.

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.

Последњи корак је стварање функција за руковање порукама које се шаљу са IpcRenderer. Свака функција ће користити itemRepoобјекат који смо креирали за приступ бази података. Након успешног завршетка сваке трансакције, функције ће проследити ново стање базе података натраг приказивачу.

ИИИ део: Покрени!

Са свим завршеним, сада можемо да покренемо апликацију. Елецтрон-Форге води овај поступак уместо нас. Све што треба да урадимо је да покренемо наредбу:

$ npm run start

Ако је све тачно, Елецтрон ће отворити вашу апликацију и можете је тестирати.

Хвала за читање!