Developing ElectronJS applications with SQLite3

hello everyone this is our CUNY and we'll come to my electron tutorial in this video I will try to explain how you can use electron j/s with a sequel Lite database if you don't know what the doctrine J's is it is a new technology or a relatively new technology that allows you to develop applications desktop applications on four different platforms and that is really actually a cross-platform technology that you can develop desktop applications with especially if your web developer you will really appreciate what electron j/s offers it allows you to write desktop applications with JavaScript CSS and HTML and it uses the we ate Java Runtime Java Runtime and not Jas and so on you can visit the electron dot atom IO to find out more information about this technology so so let's let's go ahead and start with our tutorial but first if you go to if I let's say LS you'll see a sequel Lite database that I created already and it looks like something like this so I'm using the sequel database browser for sequel Lite you can download it from Internet and it's free and it's a very lightweight application that helps you to manage your sequel Lite databases and I have a user table here with two records in it so let's go ahead and actually let's move this over here so alright let's go ahead and start with NPM so I'm going to say NPM in it and yes so we'll create an empty empty yet an NPM package JSON that I can use to download some well I'm basically to keep my dependencies in and so on so let's go ahead and start with the you can use install or I for shortcut to install packages and I'm just going to go with the electron and I want to save it so let's actually say say it's going to be a save not save dependent I saved F because it will be part of the production as well so and that's just it's not a dependency only so let's go ahead and download it and install it and also I didn't pass G flag so it will be a local library so if I let's say LS and if I go in to look at not modules you'll see what I'm talking about and you'll see a bunch of packages downloaded along with the electron J s and that actually downloaded its dependencies as well so you can find where the electron is somewhere I guess see if you yeah here okay so let's clear and the second package dump got downloaded is NPM install save it's called next next is I hope I'm pronouncing it right but it's another little third part of the part of the library that you can use to abstract the database layer from your application so let me actually go ahead and show you that website real quick next jazz and that's a sequel builder a library that you can use here so you can use it with those databases listed here and the good thing is though when you need to change your database you don't have to change your code you can just point to a different database that underlying database technology and this time I will be used in C code light of course it um it offers you like a pure JavaScript to create sequel queries also manage your database schema and so on it's very it's very nice it also gives you a methods and stuff so that you can use some like you can use this because promises and so on to easily query your database and see the results and so on it's very it's very nice one so I'll just move this over here okay so we download that so and this by the way if you look at the packet that JSON file JSON you'll see that we have next version dot 13 and electron version one point six point six so let's go ahead and download the rest of the packages that we need and the other package is going to be NPM I say course I collect and we're choosing sigil at three okay so it's I guess almost done okay so all so far it's good but of course if you run this like this I mean if you develop your code and run it you'll you will see some problems so in order to fix that we need to take a small approach small fix here and what I'm gonna do well let's I'll download another package called electron and rebuild so let's go ahead and download it and that's going to be a save dependency and let's select wrong rebuild now let's look at the package JSON real quick and we'll see that our electron rebuild that dependency is there but we're not really done yet so what we're going to do is to update the package JSON with that ohm you can use any text editor you like but this time what I'm going to do I'm going to a couple new settings here so the first one will be under scripts we're going to add sort and that will actually do like electron to electron so when I say NPM start it will run and the dot means use main script so the main setting gear which is index.js and it will use index yes to start so the second one under the right same location I'm just going to say rebuild and that reveal means we'll have will actually have to rebuild our project so that it will it works with sequel light properly so just use the same settings same options and stuff I used here and you will find of course I haven't tried this on Windows you may not have to you may not have to do this on Windows but on my I'm using Mac and the latest Mac OS which is OS Sierra and I had to do this but yeah go ahead and check it out on the windows and see if you need it so let's save this since we're done here now what I'm going to do is let's run the NPM rebuild all right so it'll take a while well it was quick so that's great all right so I think we're pretty much done here so let's clear this out and now we can write our code so let's say touch guess and that's going to be our main think and I'm going to use code editor which is a Microsoft Visual Studio code a very alternative to for writing codes and stuff and we will turn up to sublime text and it's very nice though you'll like it when you use it so let's say index actually I'm going to open this entire Factory in code so I may need to make things a little bit bigger for you to see properly so I guess it's pretty much good so let me make this bigger all right so my index step jazz is here by the way a quick tip if you don't see your icons here you can install icon so I'm what I'm going to do say install actually I should have used it here so if you say yes icons or something yes we asked owed icon so you can just install this and that will help you to that will help you to enable icons for folders and whatnot so let's go to this and Appell about the window you know series but I see it I can say file icon theme and I'm going to use we as icons and now I consider icons here and that makes it visually more appealing and better to see you know since you can see what did you know the I you did the extension or the type of the file with the icons alright so let's go back actually let's let's go back and I'm just going to copy a piece of code here that I developed it for so that we don't have it don't spend too much time writing and typing things so I'm just going to copy this code here okay so this is our this is first code that lets basically let me make it a little bit bigger so as you see I'm using IPC main browser window and app objects from the injected electron library and I'm also using next module so electron module and next module and the next module already turns of a function that you can pass in a some configuration object and I say I say you know you see Clyde 3 and then the connection is file lament this is the connection it's pretty very simple configuration that returns an object that you can use in the next variable so here one our app well one our application is ready it looks like you know same concept really I mean if you if you if you have worked with browsers and jQuery or any JavaScript on browsers you probably know what I'm talking about here so the application when the application is ready I'm I'm passing a callback and this this time I'm passing an arrow function which is a new thing in dekma script 6 and am using left keyword again it which is a new thing in the main script 6 and that helps me to minimize the scope of the variables that are there variables so we create a new browser window with browser windows are good so that we can you know so here in electron JSU have that two processes the first process is called main process and it doesn't have any UI and its second process it's called renderer process and that has a UI so when you when you want to show something to your users you have to use the render process and one way to activate that is to use browser window what that allows you to basically you know show it like you know initiate maybe know the show you can say okay this is my window where sound there that there will be some GUI like graphical user interface on top about so I say Lord URL you can use any type of URLs here in this time I'm in this case I'm using a local file which is called main HTML and that will have my UI related code with it which is like HTML and CSS and so on as I've told you before doctor on Jes allows you to use like you know you Millie ER web technologies like JavaScript and CSS and HTML and you see you're seeing what I'm talking about so also I'm told I'm telling it like the which URL su load and I also say if it was ready to show something that means like it's you know like you know it's ready to to render so that we don't we don't have that gap between so if you don't have this event if you don't use this event when you open the window you may see a blank like a widescreen for a while which may be a couple seconds and then everything will just pop up I don't want that you wanna you want to just like it give a truly and native that desktop experience to your customers or to your users and when I say and I say advanced ready to show go ahead and run this code which is main window that show and that will just you know show the our window without any gap in between and I so here let's actually go ahead and before we explain this guy over here let's go ahead and copy our another file and that will be our of course main HTML so what I'm going to do I'll just create a new file and gets called name dot HTML already have the code I wrote before so I'm just going to use the same code let's say roll so let's paste it over here alright so I have this code and that so what we see here I'll just say this and so what's happening here and let me explain this first so we basically you know once when the windows ready we basically show this main that HTML file and that made in the HTML has some script and in its script tag and that says okay so we basically get the required electron object module and from the electron module we use the IPC renderer so the IPC render an IPC main are two important objects that allows us to pass information between different processes processes and simply IPC sense for inter-process communication so when we say when the dome is ready that means like I can access to every tag in the document without any null argument exception or object not found object exceptions type of things I'm saying go ahead and send an event so I simply like fire a new event which is a custom event I just created and it says main window loaded that means my my window is ready to you know render things and then what I'm doing here is I'm listening to that event and when it's been the event is fired I say okay go ahead and get the first name from database but from which table and that is the user table and as you see it's pretty like a fluent API I can say select I want to select this and from where from users great and there are turns a query and I need to so what i'm doing here is i'm using promises and stuff and I say promises as the and I say okay when it's done go ahead and get the you know I'm passing out a callback function so that I can pass you know the actual data which is the roles here and when I say and what I say here is okay and get the send another I'm sending another event or simply firing another if and event and that's results sent results sent event you can you can give whatever name you like and so I'm listening to same event in our main HTML and right here so this is first goes from the event architecture if you look at this from this example it first goes from the render process or let's say main HTML to the main file or index file and from index file to back to main HTML and I'm listening to that the same event results if results and then you if you see if you you know you see that I'm using IPS and both sides there's different things like here eyes IPS may I PC main and here just IP IP surrender that's the difference and they they do have they know what contact some in because they're different objects really okay so and here I'm getting the document get element by ID is very familiar JavaScript code on browsers and I'm getting the this tag over here and I also like add put the console the result to the console and the simple loop I'm just saying you know get me whatever luckily that's actually models a little bit right and say inner HTML am accessing the HTML property of the results element which is this tag over here and I'm saying the first name and the results is the roles that came from this and that's just an array object array and I'm simply accessing the each items in the array and they return an object and the object has the first name because this is you know what I used in my table and the first name I X has the first name and get the says it's a string to convert it to a string and now I use a panda PBR so that I can put a break between different you know different data on the UI of course you can use like jQuery or any other or angularjs any other view related JavaScript library make things easier for you but in this example I didn't need that so since everything is done let's go ahead and run this project and what I'm going to do let's say NPM start and that will do it do everything for me okay so we got an exception here and that says okay so let's go ahead and fix it it says let's go ahead and say NPM install for some reason it didn't it failed install save and that's what we did I guess we superlight three and say I know I should have been working properly let's say this first and then I will say rebuild again to make sure that we are it's working properly okay so let's say NPM rebuild but before that doe let's make sure that we uses proper code let's see package the JSON rebuild actually let me really quick let me check less JSON Antron rebuild we have this revealed here electron for build fw and sequel light i think it's pretty much correct okay so let's say left on p.m. run repealed I think I should have said a npm run rebuild my previously asset npm rebuild and that it failed some now it should be working fine yeah I'll take a short while it's not going to be long even though it doesn't really update the progress okay now it's done and now it and by the way that was the error that you were going to see when you when you didn't do what I just did like when you didn't rebuild your electron again so that's the error you'll see which is good though I mean I I'm I'm glad that it failed so that you could see the the actual error that they would the one that I'm talking about all right so let's go ahead and say NPM sort this time and let's see if it let's hope that will work this time and yes so as you see I'm getting the she's my wife and I'm getting those two names from the database I think I didn't update a database properly so I'm still getting the old data I actually changed the data but anyways so this is what it is and you see if I do this of course I'll just have this I also see in some warnings here but that's all right so quickly let's apply a really small CSS here to make it look better so I'm going to use inline CSS so I'm going to use style and as you see you have this code completion on visual studio code and when I say like font size so let's make it a little bigger let's say 17 exhales and color when I use it say red and then that's pretty much all and so let's try it again and see how that looks and so that will show you how you can use CSS in your oh I should have let's go back and see what was the problem style didn't I save it okay now we see the change and you can I'm gonna make it you can make it a bit bigger so I'm just gonna use something like so make it a little bigger and and you can also change the background color so if you look at the body you for instance if you say style and I'll say background color right and let's make it I don't know really light say I think that looks good so I've saved this this time and let's go back and start it and as you say it looks great I think that's pretty much all so that's how you use a electron and sequel light together and you can also you see more information about the next library which is an awesome one awesome library that I'm sure that you'll like it you can also see different you know we can like combine you can create create queries easily using the JavaScript without really using any sequel sequel queries here and for instance you can say next table insert and that type of objects or data you want to insert returning and stuff like that and you can also say you know how you can say how you can in he gets specific columns you can also use aggregate functions and pretty much everything really and you can his work allows us and the good thing is that query builder is you can create a build your query as you go so for instance like if you look here say next where and select sequel and if you go for instance you can have like have different where clauses here and I think that's pretty much oh that I want to show you today all right guys I hope it's a it's a useful tutorial for you and go ahead and you know like it or subscribe to my channel and if you have any questions just drop them on the comment section below and see you next time

Channel: Tarik Guney

Views: 70,051

Keywords: electronjs, electron.atom.io, sqlite, sqlite3, javascript

Id: c76FTxLRwAw

Length: 26min 4sec (1564 seconds)

Published: Tue May 02 2017