New Course Alert - Electron From Scratch: Desktop Apps With JavaScript

Key Takeaways

[Music] hey what's going on guys so I just published my electron from scratch course on udemy and as usual pay no attention to this price right here I have a code in the description a five-day code for $9.99 and a 30 day code for I believe $13.99 so I created this course because electron is something that I've always been interested in I think it's fantastic that we can create desktop applications with JavaScript and I mean some of my favorite applications are actually built on electron like vias code slack discord so this is a project base hands-on course like most of my courses and we're going to build three different cross-platform applications we're going to build them from scratch and then package them up and I'm going to give you a demo of all three in this video all right and it's not it's not published yet it didn't you can't even see the content here just yet but by the time you're watching this video it will be available and I'll have the link in the description so the three applications will be building I already have packaged up and I have right on my desktop here so the first one is called image shrink and I'll go ahead and open it up so this is an application to shrink images to optimize images for websites when you upload an image that is quite large it really slows down your site so this is a nice little tool to have to just optimize them and make them smaller and you can basically just choose an image so I'm gonna grab this this test image that I have here this is on my desktop and just to check out the size so if we go to get info and we look at the size of this image it is right here 197 KB 197 kilobytes and I have it loaded here and then we can slide this to change the quality so 100 would be you know relatively the same size but we're gonna go down to let's say 25 and if I click resize what's going to happen you can see image resize to 25 percent we get a little alert we're using materialise for the UI here and this path this output path just opens automatically and we have our image here and you can see it's been resized to 46 Kb okay so depending on where you put this you know if I put it way down here to like 6 and resize you can see that it changed to 17 Kb now if I open this so this is the resized image and you can see that that really doesn't look good so let's go ahead and make this like let's do 25 okay so open this yeah preview okay so this doesn't look bad let's open up the original okay so we set it to 25 percent quality and that's the difference and there's a very large size difference but I mean the quality isn't isn't bad for 25 percent so I think it's a really useful application just to have on your desktop and if you need to upload images to a website and shrink them then you can do that really easily alright so let's go ahead and close that up and the next one that we're going to create the second project is called sis top which is a system and CPU monitor so this is actually a tray application if I double click it it opens up but it doesn't open the window by default it just sits in the tray so if I click on the tray icon it'll open up the interface and it's just going to watch my CPU gives me my CPU model which is an Intel Xeon and every two seconds this will update and this this progress bar will update we can also we have a little tab interface here we can view the system info like computer name it'll show the system uptime that will constantly update and then I have some settings so we're gonna be working with notifications every time the CPU goes over a certain percentage which by default is set to 80 it's going to give us an alert and then we can also change the frequency so what this means is after five minutes it'll show an alert again if it hits this number and can change this as well as the overload so I'm going to change this to five just to give you an example so I'll save that and right away we should see an alert there we go so CPU overload it's over five percent and if we look over here you'll see that this progress bar will be red any time it's over five percent say it's green now and as soon as it hits five percent it goes over and again it updates every two seconds so we can go ahead and set this back and we're going to create a store to hold our data inside of a file in our home directory okay so be working with data there's also a menu item which you guys can't see but I have a view item to toggle the navigation just to show you we can integrate the menu all right so that's the second application and if I X out it doesn't quit it'll still show notifications and all that so we have to just manually quit up here now the last one is called bug logger and it's just to track logs now this actually uses react we're going to set up react with electron and also MongoDB so this is connected to a MongoDB Atlas database which is a cloud database so if you distribute this app to your team members they're gonna see the same logs the same data which right now is empty so I'll just say this is a test log and you can put a user in here so you know who who added it and you can choose a priority we'll say moderate and we're getting a little alert here and it shows up in the table and it's stored in my MongoDB database okay we'll say another log and say maybe Kate uploaded this one and add that and there we go so we can add logs we can remove them and it'll get removed from the database there's also a menu item which again you can't see but there's a logs menu item and I have a clear logs option that will just go ahead and clear all the logs from the database okay so we're gonna set up react and webpack basically in our renderer process here and communicate with the main process which will then communicate with our database through Hmong okay so those are the three applications will be building I know they're not giant applications but I think that you'll learn quite a bit and after the course you'll be able to you know build your own desktop applications which is really cool and we're gonna package them all up so you have these executables completely cross-platform and that's it so if you guys are interested I have the link in the description and that's it thanks for watching