Πώς να δημιουργήσετε μια εφαρμογή Electron χρησιμοποιώντας Angular και SQLite3.

Πρόσφατα πειραματιζόμουν με τη μετατροπή μίας από τις εφαρμογές web του Angular σε εφαρμογή επιτραπέζιου υπολογιστή χρησιμοποιώντας το Electron. Συνάντησα μερικά εμπόδια στην πορεία, και αποφάσισα να βάλω την εμπειρία μου γραπτώς, ώστε να βοηθήσει άλλους. Εάν έχετε παρόμοια σχέδια για το έργο σας, ελπίζω ότι αυτό μπορεί να είναι χρήσιμο. Ο πηγαίος κώδικας για αυτόν τον οδηγό βρίσκεται εδώ.

Μέρος Ι: Γωνιακό

Δημιουργήστε το Boilerplate.

Για χάρη αυτού του οδηγού, θα δημιουργήσουμε μια νέα εφαρμογή Angular από το μηδέν. Θα χρησιμοποιήσω το Electron-Forge για να δημιουργήσω το boilerplate. Το Electron-Forge προσφέρει διάφορα πρότυπα για τη δημιουργία κωδικού πλακέτας boiler, συμπεριλαμβανομένου ενός για το Angular 2. Πρώτα εγκαταστήστε το Electron-Forge CLI.

$ npm i -g electron-forge

Τώρα χρησιμοποιήστε το CLI για να δημιουργήσετε το βραχίονα γωνιακής εφαρμογής.

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

Το forge CLI θα προσθέσει τα γυμνά βασικά που χρειαζόμαστε για να τρέξουμε την εφαρμογή μας. Ας προσθέσουμε μερικούς επιπλέον καταλόγους για να φιλοξενήσουμε τα αρχεία βάσης δεδομένων μας. Προσθέστε έναν κατάλογο στοιχείων στο src και τοποθετήστε τους καταλόγους δεδομένων και μοντέλων κάτω από αυτόν.

$ 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

Γράψτε κάποιο κωδικό.

Ως πρώτο βήμα, ας προσθέσουμε ένα μοντέλο αρχείου που θα ταιριάζει με το σχήμα βάσης δεδομένων μας. Για αυτό το απλό παράδειγμα, ας δημιουργήσουμε μια κλάση που ονομάζεται Item. Κάθε στοιχείο περιέχει μια ιδιότητα id και όνομα. Αποθηκεύστε το αρχείο στο έργο σας στη διεύθυνση src/assets/model/item.schema.ts.

Θα χρησιμοποιήσουμε το TypeORM για τη σχεσιακή αντιστοίχιση αντικειμένων. Πρώτη εγκατάσταση TypeORM.

$ npm install typeorm --save

Θα ακολουθήσουμε τον οδηγό TypeORM για τη δημιουργία σχήματος εδώ. Όταν τελειώσετε το αρχείο θα πρέπει να έχει την εξής μορφή:

Η TypeORM κάνει χρήση διακοσμητών γραφής. Χρησιμοποιούμε τον Διακοσμητή οντοτήτων για να δηλώσουμε την κατηγορία αντικειμένων μας ως πίνακα. Ο @PrimaryGeneratedColumn()διακοσμητής δηλώνει idως μοναδική ταυτότητά μας και λέει στη βάση δεδομένων να την δημιουργήσει αυτόματα. Θα ανησυχούμε για τη σύνδεση σε μια βάση δεδομένων αργότερα.

Δημιουργήστε την υπηρεσία.

Η επόμενη πιθανή δράση μας θα ήταν να δημιουργήσουμε μια υπηρεσία εφαρμογών που χειρίζεται την επικοινωνία από το μπροστινό έως το πίσω μέρος. Το Electron καθιστά διαθέσιμη την IpcRendererτάξη για αυτό το πράγμα. IpcRendererείναι η κλάση επικοινωνίας μεταξύ διεργασιών της Electron που χρησιμοποιείται στη διαδικασία απόδοσης. Βασικά, θέλουμε να χρησιμοποιήσουμε το IpcRendererγια να στείλουμε μηνύματα στην κύρια διαδικασία της Electron. Αυτά τα μηνύματα θα μεταφέρουν πληροφορίες στην κύρια διαδικασία έτσι ώστε να μπορεί να χειρίζεται τις αλληλεπιδράσεις της βάσης δεδομένων.

Η εφαρμογή του IpcRendererείναι εκεί που συναντάμε το πρώτο μας εμπόδιο. Το Electron βασίζεται στη μέθοδο window.require (), η οποία είναι διαθέσιμη μόνο εντός της διαδικασίας απόδοσης του Electron. Αυτό είναι ένα καλά τεκμηριωμένο ζήτημα. Για να το ξεπεράσουμε αυτό, μπορούμε να χρησιμοποιήσουμε το πακέτο ngx-electron του ThornstonHans, το οποίο τυλίγει όλα τα API του Electron που είναι εκτεθειμένα στη διαδικασία απόδοσης σε μια ενιαία υπηρεσία ηλεκτρονίων. Μπορείτε να διαβάσετε περισσότερα για αυτό εδώ.

Πριν μπορέσουμε να το χρησιμοποιήσουμε ngx-electron, πρέπει να το εγκαταστήσουμε.

$ npm install ngx-electron --save

Τώρα ας δημιουργήσουμε μια υπηρεσία για τη διαχείριση της IpcRendererεπικοινωνίας μας . Δημιουργήστε src/app.service.ts.

Σε app.service.tsδημιουργούμε μια τάξη που ονομάζεται AppServiceκαι προσθέτουμε τον @Injectable()διακοσμητή. Αυτό μας επιτρέπει να χρησιμοποιήσουμε την ενσωματωμένη έγχυση εξάρτησης της γωνίας (DI). Στον κατασκευαστή μας, δημιουργούμε μια τοπική μεταβλητή _electronServiceτύπου ElectronService. Το ElectronServiceμάθημα μας παρέχεται από ngrx-electron. Μας επιτρέπει να χρησιμοποιήσουμε την IpcRenderτάξη της Electron χωρίς κανένα από τα προαναφερθέντα ζητήματα.

Δημιουργούμε τρεις συναρτήσεις: μία που περιέχει όλα τα στοιχεία στη βάση δεδομένων, μία για να προσθέσετε ένα στοιχείο στη βάση δεδομένων και μία για να διαγράψετε ένα στοιχείο. Κάθε συνάρτηση θα επιστρέψει ένα παρατηρήσιμο.

Τα παρατηρήσιμα είναι μέρος της βιβλιοθήκης RxJs και παρέχουν έναν καλό τρόπο χειρισμού των αλληλεπιδράσεων βάσης δεδομένων μας ασύγχρονα. Μπορείτε να διαβάσετε περισσότερα για τα Παρατηρήσιμα εδώ. Σημειώστε τη χρήση του παρατηρήσιμου τελεστή ofγια να δηλώσετε ότι τυλίγουμε την απάντησή μας this._electronService.ipcRenderer.sendSync()ως παρατηρήσιμη τιμή.

Εγγραφή υπηρεσιών και συστατικών γραφής.

Με την ολοκλήρωση της υπηρεσίας μας, ας πάμε src/app.component.tsκαι καταχωρίστε την για DI. Ενώ βρίσκεστε εκεί, θα προσθέσουμε ένα απλό πρότυπο html και λειτουργίες για τον χειρισμό των συμβάντων με κουμπιά.

Βεβαιωθείτε ότι έχετε προσθέσει AppServiceως παροχέας στα @NgModuleορίσματα του διακοσμητή και επίσης ως ιδιωτική μεταβλητή στον AppComponentκατασκευαστή. Πρέπει επίσης να προσθέσουμε ElectronServiceως πάροχο.

Κατά την αρχικοποίηση του στοιχείου μας, θέλουμε να φορτώσουμε όλο το περιεχόμενο της βάσης δεδομένων μας και να το εμφανίσουμε. Για να γίνει αυτό, εγγραφούμε στη addItem()λειτουργία της υπηρεσίας που δημιουργήσαμε. Αν θυμάστε, όλες οι λειτουργίες υπηρεσίας επιστρέφουν παρατηρήσιμα. Για να λάβουμε δεδομένα από το παρατηρήσιμό μας, εγγραφούμε σε αυτό, περνώντας μια λειτουργία επιστροφής κλήσης που εκτελείται κατά τη λήψη των δεδομένων. Στο παραπάνω παράδειγμα, το (items) => (this.itemList = items) θα συμπληρώσει την μεταβλητή τάξης le itemLμε τα περιεχόμενα της βάσης δεδομένων μόλις ανακτηθεί.

Ακολουθούμε παρόμοιες τακτικές για την προσθήκη και τη διαγραφή στοιχείων από τη βάση δεδομένων. Κάθε φορά που επαναπληρώνεται itemListμε το ενημερωμένο περιεχόμενο της βάσης δεδομένων.

Μέρος II: Ηλεκτρόνιο

Εγκατάσταση SQLite3.

Τώρα που ολοκληρώσαμε το front end μας, πρέπει να δημιουργήσουμε το ηλεκτρονικό σύστημα υποστήριξης. Το ηλεκτρονικό σύστημα υποστήριξης θα χειρίζεται και θα επεξεργάζεται μηνύματα που αποστέλλονται από μπροστά και θα διαχειρίζεται τη βάση δεδομένων sqlite3.

Θα χρησιμοποιήσουμε το sqlite3 για τη βάση δεδομένων μας και θα πρέπει να το εγκαταστήσουμε.

$ npm install sqlite3 --save

Ένα εμπόδιο που αντιμετώπισα ενώ εργαζόμουν με το sqlite3 και το Electron αρχικά, ήταν ότι τα εγγενή δυαδικά αρχεία του sqlite πρέπει να μεταγλωττιστούν για χρήση με το Electron. Το Electron-Forge πρέπει να το φροντίσει για εσάς. Ένα πράγμα που πρέπει να σημειωθεί, το Electron-Forge θα χρησιμοποιήσει το node-gyp για να μεταγλωττίσει τα δυαδικά αρχεία. Ίσως χρειαστεί να το εγκαταστήσετε και να το ρυθμίσετε σωστά πριν από τη χρήση, το οποίο περιλαμβάνει την εγκατάσταση του Python. Από τώρα, το node-gyp χρησιμοποιεί το python 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αντικείμενο που δημιουργήσαμε για πρόσβαση στη βάση δεδομένων. Μετά την επιτυχή ολοκλήρωση κάθε συναλλαγής, οι συναρτήσεις θα μεταβιβάζουν τη νέα κατάσταση της βάσης δεδομένων στον renderer.

Μέρος III: Εκτελέστε το!

Με όλα τα πλήρη, μπορούμε τώρα να εκτελέσουμε την εφαρμογή. Η Electron-Forge χειρίζεται αυτήν τη διαδικασία για εμάς. Το μόνο που χρειάζεται να κάνουμε είναι να εκτελέσουμε την εντολή:

$ npm run start

Εάν όλα είναι σωστά, η Electron θα ανοίξει την εφαρμογή σας και μπορείτε να τη δοκιμάσετε.

Ευχαριστώ για την ανάγνωση!