Build a Desktop app using Vue.js, Electron and Vite (Electron-Vite) | Calculator Desktop app

hi everyone welcome back to my YouTube channel in this video we'll be basically building a calculator desktop app using vue.js electron and white so the main goal of this video is for you to get started with building electron apps or you can say desktop apps using electron and any other framework like vanilla JavaScript react and View and we're doing this video using vue.js the previous video was done using vanilla and I think the next video will be coming up we'll be using react so you can check out using all the three different ways of doing about it going about it so let me first give a demo by the way let me do eight plus six equal to 15 14 plus I can do from UI also from keyboard I'm doing now okay so that's it this is what we'll be building by the end of this video okay and for this uh like I told you I want to keep it like uh make it more easy for you to start so that's why I'll be using electron White which gives us a lot of uh stuff by default okay so we don't need to configure a lot of stuff okay I would suggest you check it out it has a lot more functionality which will be not be exploring in this video and let me know in the comments if you'd like me to go more deep down on electron or using electron white to build electron applications basically okay anyway we'll be just copying this line let me come here no no no let us install in the meantime that does explore what we have okay so I'll be deleting a lot of stuff which we don't need let me first come to components I don't need versions okay and where is it I think it will open that one app dot we also I don't need anything here okay and I don't need to use any preprocessor or any other processors okay and let me remove make it CSS okay and index.html I'll be converting it to calculator to you okay and for the Styles let me just copy it from the previous one which I had already done okay I don't want to focus much on the Styles but in this video it's just some basic Styles which I've done okay so I'll just copy paste whatever I've already done previously it's just I'm giving some reset adding zero margins epoxizing border box height width container is basically the container it represents this whole container of our calculator app user container represents this white area and result contained result represents basically the result class represents the span time okay and we have a row for each row of buttons and the buttons for just for patterns okay so this is it and let me now clearly close this off okay so now let me do npm uh first of all let me do two yeah I think it's correct on the npm Run Def let's see what is coming up as you can see we have in a calculator view I think I need to create index and make it calculator.view and it's gonna update it automatically and one more thing I'll be doing a minimals stuff here with the main.js which is more on the render side so what is browser window is going to be is like um it represents our window like you can see our vs code we have we have minimized maximize we have width and height and we can resize and whatnot we can do with the window that's what we can configure from here so I would be giving it some basic values because I don't want to touch it a lot okay I'll be manipulating the width uh height as well as adding one property here so for width I'll be using 350. for height it's going to be 410 and one more property I'm going to add it which is resizable false okay just to show you now if you open it here you can resize it for now you can minimize maximize you can do it now what I'll do is restart it as you can see it has come up this one and you can resize it now and you can mix minimize or maximize it okay so that is it and now I will not be touching it much okay so now let us come to app.view we'll create our own component which is nothing which is going to be just a basic component which is going to have all our stuff with regards to calculated let me write calculator.view and just some basic stuff set up I don't need any Styles I don't know why vs code complaint but LF div tag okay so now we can write start any setup part so first of all uh yeah so we'll be having expression okay which is gonna be reactive variable with the initial value of empty string let me see if it's coming yeah it's coming up and we are going to have some allowed values array which is gonna take basically we are telling on that we are going to be only observing this allowed values only from the keyboard not anything else we are going to observe okay for a lot values I'll just copy this okay and I don't want it to be reactive because it's just going to be constant and we're just going to be checking it using includes it will become clear what I mean if you have not watched my previous video okay anyway let alarm values I'm doing zero one two three four five seven eight nine plus minus multiply into divide equals dot C entered backspace Etc okay some basic stuff and then let me then yeah let me create a function after this function calculate expression let me give it value and give some enter here okay and we're going to check if value if we are getting some value then we are going to check if value require equal see okay if it is then we are going to basically revert our expression to just an empty string else if value equal equal is equal or we have got a keystroke from the keyboard which is nothing but enter okay if it is then we would like to evaluate it I'll be using eval it's not the best way but I'll just be keeping it simple that's why I'm using a value even expression dot value okay and then we'll be adding some more one more condition couple of more conditions one is like value equal either backspace or delete then again we are gonna remove the last character okay expression dot value Dot substring zero expression sorry expression dot value dot length minus 1 okay and the last case is basically the default case wherever we are basically typing anything numbers or operators we would like it to concaten it with the string like basically in one way it's like one plus two three whatever quarter Panic is expression.value equal to expression Dot Value Plus value okay so this is the basic function okay now what you have to do is like uh let me write some template here also I think we I think I should start writing in case okay anyway let me write it now div class equal to container uh instead of writing it completely I'll just uh walk you through what you have already done in my calculator Js okay let me copy what I've already done [Music] so we have a container class which represents the whole container like I told you previously let me do one thing I think when you see we should reload okay I did not import it let me import it to become very clear okay calculated [Music] okay as you can see it has come up I'll just walk you through the code uh this is we have the container class which represents the whole class okay and where the result container is uh this section okay and it has a class of result which is nothing but if you type it here I'll just show you anyway we'll be seeing that then we have a row which represents each row as you can see see um modulo I think the main area whatever backspace and then divide then we have seven eight nine multiply four five six plus etc etc some basic stuff okay which I've just copied from HTML that's it now we'll be doing the view stuff okay which makes it here okay anyway so by default I would like to call a function which is going to be handle button click okay handle button click let me copy this and come here and write the function for it function handle button click okay and this function is gonna get the event and it's basically gonna get the value out of it e Target dot data set dot value and I'm gonna call calculate expression with the value if I have a value is so what it's going to do is like uh let me come here and just show it to you let me reload it what happened yeah uh let me cancel log also console.log B I don't think I need to reload anywhere let me write 9 as you can see I'm getting the pointer event here also I'm getting see the thing is like uh if you let me I should I'll just break it down if you see we have e dot Target dot data set okay so as you can see whenever I'm typing which I'm when I'm clipping on these edges and all these don't have what should I say the values okay let me again commentary to you target data set where is it yeah yeah as you can see there is nothing but now if I click on the button Target data set as you can see we have the value nine So to avoid those edge cases I'm just cut checking whether the value is there or not if the value is there then only will be calculating expression otherwise we're not going to calculate it okay now let us see the whatever we have done till now okay let me reload it to another safe side when you do nine plus six okay nothing is coming okay we forgot to do something I guess oh yeah we have to do expression okay now let us see yeah nine plus six uh now one thing you'll be noticing one issue let me open the dev tools nine plus six equal to as you can see saying refuse to Value testing a JavaScript because unsafe UI is not enough this is basically the contention capacity is throwing an error uh as I told you this is mainly for our learning so obviously it's not production gate so I'll be doing the ncv value also here let me come where is it index.html here I need to do come here as script SRC self then is unsafe even okay let's see now everything or not uh you can ignore the issue refresh nine plus six 15 plus 6 21 okay it's looking fine now we need to do the for the window keyboard listeners also okay so for that what I can do is like let me come down here we'll be creating one more function which is going to be function uh you can ignore the terminal for now because it's reloading I guess without iTunes anyway that you can see and then key down event e that value equal to e dot key I'm going to check whether the value is what enter if it is enter I will just prevent default this is to avoid some edge cases like which comes because of enter okay I'm not going too much on detail on that side but just to avoid edge cases but other than that the champion default anyway default behavior for the browser any allowed values dot includes value if it is then I just do calculate expression value so now what you have to do is like I'll be registering this event listeners or basically a key keyboardless keyboard listeners for this handle key down using on mounted and I'll be unregistering it using on unmounted basically I'll be adding an event list on the mounted lifecycle and I'll be removing it on the unmounted lifecycle okay uh so on mounted window dot add a conditioner key down and it's going to be handled key down okay the code is very simple so I'm purpose I'm not focusing much on the edge cases you know which you might encounter just because it's mainly for development purposes and learning purposes so it's not for production anyway after I started using email okay uh so yeah anyway so add event listener key down I think I just typed it should we remove okay so unwanted window dot additional key down handle key down and on and render this one okay let's see if you're getting any issues [Music] let us first ignore this it's re rear ending a DOT now I'll type it nine plus six enter plus 555 backspace delete everything's looking fine clear also I can type as well as do some stuff with keyboard also four six equal so as you can it's working fine okay uh yeah I think we can do a build also of it now okay so for build what you have to do is that you have to come to package.json as you can see there's a command breadwinn I'll be doing for Windows you can check out for others also okay and let me open git Bash CD calculator View npm run third win I'll be coming out when it's done okay okay it's done now as you can see the output anyway let me come back here from the list revealing File Explorer let me come here I'm not touching anything else I'm just exploring the setup calculator view setup let me enter this it's installing yeah we got it now so let us see again enter six enter 15 minus minus let us close it try to open it from here calculator View okay as you can see it has been installed in our system okay after us running the setup okay I think that is for this video okay let uh let me know in the comments should I go more deep down on electron side of things or if you have any suggestions for any kind of applications which we can explore using how to build about how to go about building it using electron let me know in the comments okay and I think that's it for this video and hope to see you in other videos as well bye

Channel: Mohit Kumar Toshniwal

Views: 2,634

Keywords: electon, electon-vite, desktop application, calculator app, vite, vue, vue 3, vue.js, vuejs

Id: SwDcjBdBSjg

Length: 19min 9sec (1149 seconds)

Published: Sat Sep 16 2023