Build a Native Desktop App with Electron (YouTube Stats App)

hey everyone Gary Simon of course sets ro so let me just show you what we're going to be building today in this rather lengthy tutorial slash crash course so as we can see here this is on my desktop on one of my monitors and it's a this is actually a native desktop application so if I double click on it by the way I should have changed the the icon to fit what we're making what happens is this so this right here is a native desktop app created with the help of what's called electron I've covered it before on my tutorial but I figured I would cover again and what it allows you to do is specify a YouTube channel IDs probably would be your own in case you're interested in really seeing all the time your subscribers and you can also separate them to include multiple channels right there this is a brad over here at his channel you can keep on adding channels to track if you want wish what's also cool is these will update every X amount of seconds based on whatever you program it to in terms of milliseconds and this is all pulling this from a YouTube API and so the API to have an API key is free I'm going to show you exactly how to set that up and we're going to be using electron with the help of angular and I found a github repo that has a boilerplate project all set up for us that we're going to be using so we're not gonna be focusing on you know what's going behind the seeds really we're gonna be focusing on just you know what it takes to create this app right here after we get up and running and so I'll be showing you know how to how to do this bar right here where you can you know click minimize and and get it back up here and how to close it out and how to use the API as you can see it just updated you got another subscriber so this can what's really cool is this can be really extended I mean to include much more functionality I only had a limited amount of time a few hours to work on this but um it will be on the github repo in the description here so you can go ahead and if you want you can contribute just fork make your changes to it you know this could really be something a lot of people could use who knows so anyhow yeah that is it for today's question I don't have it right now so look in the description on here in YouTube for the very first lime oh I'm always asking a question and I'm talking too much now it's extremely late I'm about to go to sleep so let's get started alright here we are at this angular electron page and the way I found this honestly I just went to angular I went to Google and typed in angular electron and this came up and this github repo and I saw that it is definitely up to date based on you know these commits times on them we could see that basically it's a real quick bootstrap and packaged your project with angular 6 plus an electron 6 of course is the current angular version and it has sass the typescript and hot reloading all together exactly what I would want so to get started we're just going to follow these quick steps real quickly and I'm gonna open up here get this a little bit bigger I'm using commander CMD er from Windows it's a console emulator I have a video on my channel if you want to search I have the theme and all that stuff and so what I'm going to do is just right click and that will paste in this real quickly we're gonna CD into it alright and then I we're going to put in MPM install as that was the the second step right here alright and while that's installing I'll just keep on going over this page here a little bit yeah there's an issue apparently with yarn so just use NPM node package manager you don't need no js' install I'm gonna assume that you already know that stuff if you're watching this type of tutorial I also you need to install make sure you have the angular command line interface installed with this command globally I already do if you want to be able to you know generate services and all that stuff and use all the other stuff with the CLI we'll just be using it to generate a single service here momentarily and then it tells you all the included commands that you can run with their description so we'll be using a couple of these alright so let's go back here to this area it's still going and I yeah everything I did I really didn't come up with any issues in terms of you know stuff not working as it should and with in relation to this repo as I as I went through so there we go finally alright so now at this stage we can alright let's see there's a million things on my mind I do not have a written version of this tutorial for me to look off of as I'm recording most of the time I do that but now with this new schedule I'm just gonna be winging it I don't have enough time to write the the tutorial so let's go ahead and open up a code editor here code period will open up a visual studio code if you have that installed I don't want to upgrade and here's everything that's going on so it looks really similar actually to your typical angular project there's just some main differences going on for instance our main TS file right here this is actually a lot of electrons stuff like creating the window we're gonna be adjusting this stuff right here for the new browser window that it creates with you know size height let's go ahead and actually run the command let's go over here to this right here if we wanted to actually run it we have several different options here obviously NPM run start I believe is the one that we're going to use although I don't see it here maybe I'm wrong NPM run build nope NPM start right and this is for development that's the one we want to use so let's go ahead and run that right here you know obviously we've made no adjustments but so this is just straight up the normal the very default template that they've created for getting it up and running and I'm not sure which monitor it's gonna show up on I have three total monitors but you will see a window it'll look like a native app in a sense when it loads up yep it's on my other monitor let me just it loads it real large by default and here it is so this is the actual you know the as you can see it doesn't look like a browser window this is a looks like a native desktop app with a file edit view window help all that stuff and also we can see though it has a developer console because it's you know it looks exactly like a chrome developer console right here and this is handy for development and of course we can we will turn this off when we're ready you know to ship it or whatever we're ready to build it at the very end into an actual executable here on windows and you can also do for other operating systems as well but this being opened up by default is handy because we'll be able to see any errors that show up and also help with CSS if you want to try to quickly adjust CSS properties and all that stuff okay so I guess the first thing we'll do is we're just gonna start building out the UI when I prepared this project earlier today I started off as always in Adobe experience design and I'm not gonna open this up right here I'm just gonna show you what I created for the UI all right so let me hide this so I just kind of did a fictional desktop with some icons and crap over here realistically I have many more and over here is really what I wanted it to look like obviously small kind of confined I just kind of built this out here with the tools here in Adobe experience design and this is the idea that I wanted to have so we'll start trying to build up this top tool or toolbar and with the HTML and CSS and then get it functioning alright so what's great here also is we there is hot reloading meaning whenever we make a change in our our code editor it will I automatically reload it for us very handy over here so the very first thing I'll do is go to source app will go to components and home the HTML that's where that I home title stuff is cops coming from just get a let's get rid of actually let me refer to my reference monitor we're gonna leave the div class container we're gonna just go ahead and get the other stuff there alright so now you can see if I if you save it it's gonna need to reflect it's not gonna have that title anymore alright let me make this just a little bit larger alright so what we're gonna do is start creating the HTML to build out all of this so what we'll do is I'm gonna control B by the way to get rid of sidebar more screen real estate and also f11 alright so we're gonna put in a header element and then the header element is going to have a strong element for the logo and it's I'm just calling it YT desc so we'll put in a span because I want the YT to be read and then desc will just be white and then after that we're gonna have a nav element because we have the odd well once we convert this into a frameless window we'll be able to mimic these up here so that's going to be a nav element alright so we'll use an unordered list again all this is HTML and you know discord by the way where's my discord this discord is also based on you it's it's in a wrapper in a electron so we're gonna be doing the same thing up here I actually kind of just copied the same kind of whoa where it says discord right here there's a logo and then there's the you know the the minimize and close buttons so we're just going to have two of those for minimizing clothes so we're gonna put an image source ford slash assets ford slash button or BTN - min SVG and I'm gonna make this an ID of min and also a clique element which is a event binding a click event binding we're gonna call a function called minimize window all right and then I'm going to hit shift alt in the down arrow key we're gonna call another function called close window of course these don't exist yet this one doesn't need an ID and it's gonna be button or BTN close right so I'm going to link a github repo that you can clone and it's gonna have these assets for you you know I'll try to also remember to include the XD file for the design ok so let's go ahead and save that and by the way I'm not sure if this is gonna load correctly these these the reference to this assets folder actually I think what I'll do because I dunno it works like this in develop mode development mode coming out to four folders are going up because I know when you go to build it this makes it break when we go to build the executable it will show it'll it'll mention that the ESP these files will not show up I had to convert them into just I the same folder essentially for those to work for development I know this works so we'll leave it at that all right so let me real quickly get those in the assets folder so the assets folder is right here in the project and we're going to stick those to SVG files right there so I'm gonna go to my reference monitor I'm going to open up the assets I can see this alright the assets are right here in this reference right there and again this is just this is just coming from the Adobe XD all I did is export these as SVG files by going to export selected alright so now I'm going to open up this and just paste those two in alright so now of course if we go back it's gonna look all messed up that's ok let's just stick with the HTML so we can get all the HTML knocked out though alright so that's for the top header part and then the next thing that we have going is this this is actually going to be a text an input text right here where people can type alright so this would be outside a header of course alright so we'll put in input type equals text placeholder equals channel the user name will have a default one just so that it has something to load by default so I'm going to put in a default value right here so the value is going to be my channel ID for my YouTube channel and then we're gonna have a event of key up enter so there's not going to be any like clickable submit a button just let you type it you hit the enter key and there you go and this is going to call a function called channel and again we haven't created any of these functions yet event target value simply allows us to pass the value of the input element to this function right there alright and then we want to list out the channels right here in this section alright so to do that I we're gonna have a main element alright just guys the main content and for now we're just gonna leave it there I will add an NG if there momentarily and just so well I think what we'll do is I yeah I'm gonna make it dynamic and just from the start because I was gonna put template data so that we can see it while we're doing the CSS but just to make things a little bit more simpler for myself I'm going to put all the full code here so we're gonna have an NG container and that's just an element so I can apply an NG for real quick and ng4 will iterate over an array so we're gonna say let channel of channel info dot items alright so anything in here is going to repeat it going to be repeated based on how many items are returned from the YouTube API by default when it loads because we only have one channel ID you know mentioned right here it's only gonna have one item that shows up but if the user decides to add a comma in and put in a second or third or fourth channel ID then it this will return multiple times alright so the HTML for this I'm gonna use a figure element because it's a channel avatar as shown where's of that right here plus a username so a figure slash figcaption would work well for that so figure will have an image and we're going to do property binding of source the source is coming from channel and this is a reference to right here the channel of channel info items and snippet dot thumbnails and I'll just describe this in a second default dot URL and so you'll see in a little bit once we actually get the data coming from back from the YouTube API we'll console.log the whole thing and you'll see in channel info items right here this is a array of objects and in the array of objects we have properties called snippet and then inside of snippet there's also another object called thumbnails and then there's also another object called default and then URL so you'll see how this works out momentarily alright and then we're gonna have a figcaption and inside of here we're gonna use interpolation which is very simple stuff you know make sure you watch my beginners angular tutorials here there's one for angular 6 on my channel and my website interpolation will simply just display a variable or a value our property of some sort so channel dot snippet dot title and this right here displays the name of the channel to the right of this the channel image of the avatar or icon whatever you want to call it and then outside of our outside of the figure section we're gonna have a div class of stats and we'll have a strong element to represent this a big subscriber count' so we use interpolation yet again let me get control B to get rid of that sidebar statistics this is another property that's returned from the API subscriber count and then we're gonna use a pipe called number because if you don't put this it's not gonna if you have you know over if more than three figure subscribers subscribers what the hell am i doing subscribers then it's not gonna put in commas and all that stuff so this will make sure that it separates them into commas which is important alright so that looks pretty good to me we're also gonna put one final element called as a span and we're just gonna put in subscribers and that's for that label that shows up right there alright and if you didn't put that pipe in it was just return crap though we have that built in a pipe number pipe for aguilar right there all right now if we say this it's gonna error actually it's not going to error that's pretty uh oh wait yeah it is right there so it can't read the properties of items it isn't know what the hell's going on but that's expected so let's go ahead before we though before we get into the API stuff let's work on the CSS here so control B we're gonna go down now this isn't specific to the electron this is all angular stuff there's always a global stylesheet for angular and you can see where this this repo was set up to use sass which is handy we're gonna make just a couple adjustments in this global file right here we're gonna leave this one actually here I want to use a custom font called montserrat so it said it's available at google fonts google.com forward slash fonts and I this is the code that you want to use right here for that alright and then we're gonna go ahead and just reference the body itself and we're gonna give it a background color and it's just a light gray so it's EB EB EB and then also font family montserrat alright cool so now if we save this not much changes except for the font which is getting to tell all right so now let's go ahead back to our area right here we're gonna go open up the sass file for our home component so for the first thing we're gonna get rid of all this crap and now it's going to drastically change to that alright so let me get it up on my reference monitor here alright there's I there's a fair amount of CSS it's not too bad though so the container itself is going to be a display a grid container which is new kid on the block when it comes to structuring layouts and I've covered this in my channel so just do just type a let's do a search on my channel for a grid if you want more of an understanding of what's happening here so we're gonna do a grid template rows alright so the rows are the things are stacked on top of each other columns are vertical we're going to put in three of them and the first one is going to be around 34 pixels and then Otto and Otto and the 34 pixels this is relation to this top row right here I'm just gonna say this is gonna be 34 34 pixels high and then just Auto and auto for those remaining two all right now we're using sass so we can nest in these rule sets here and also coming I believe fairly soon is native nesting so you're not gonna have to use sass for nesting stuff all right so we're gonna reference our header element next because as we could see right here this is what's next is the header alright so we're gonna go back alright so the header let's see here we're gonna we're going to also make that a display grid container as well simply because we have the logo on the left and then we also on the right have the the little minimize and close buttons so grid template columns in this case because we have columns were working with now we'll say well have that the at the logo take up 85% of the space and there's a reason I'm doing that you'll see in a bit hopefully and then Auto for the second column where the buttons lie and then inside of here we have the strong element for the logo and we're going to put in WebKit - app - region now this is real specific to electron because when we get rid of this part right here up here we're giving it we're gonna be making this frameless which means we're not going to see this this little title or this icon and we're not going to see the file edit window and all the stuff typically we can just use the top title bar to move things around right left click and drag well we're not gonna have that so this part rate up here is going to be the part where we drag and that's what allows you to do that you actually control that with CSS all right we're also going to make the color of the the font here for the logo white just three FS and then also the span for the whitey part is going to be red so if we save this this is what it looks like so far and you can't drag it yet simply because we haven't done the stuff the code necessary to remove this stuff up here we'll get there though real soon all right and then outside of the the strong element will be our nav element for the buttons and we're gonna say justify self right and this is a display grid property so we're just gonna push everything over to the right and then inside of here we have the unordered list list-style-type:none also margin:0 padding:0 Guinee all that stuff off of here don't worry it'll it'll come back we lost our buttons and then over here we have our list item so li float:left so we're gonna make the button to float left of each other not stacked horizontally as they are default in an unordered list are also we're gonna have a margin left just to push them away from each other eight pixels and inside of our list item element we do have an image element width is going to be 12 pixels for those SVG's and cursor is gonna be pointer so that you know you can click on them so let's go back here there they are don't worry it's not looking good right now that's expected and then also our image min which is the minimize button we're gonna make the padding 10 pixels so you can easy you can click it more easily based because of how it was structured all right let's keep going next we'll have our input so the input is all the way off down here because we have a container we have our header and then we have the input right here so it's styled the input section all right input is going to be back around color this is DB DB DB it's just like a lighter darker gray a border is going to be zero padding will be 12 pixels we're gonna put color gray for the text inside of it the font family is going to be Montserrat and then outline:none and I could sometimes when you focus on it it could see that ugly yellow outline that the browser is by default there that stuff is alright and then we're gonna reference our main stuff right here all this stuff so let's go and do that so main we're gonna have a display grid and then a grid template columns and this is all in reference to this stuff right here just because we have a column here and a column here all right so that's simply going to be repeat two times auto you could just put auto auto but I repeat is a shorter way of doing that also we're gonna have padding of 20 pixels and inside of main we have a figure which were to reset any default figure margin to zero we have our image inside of it and this is for the channel icon so we're gonna have a border radius of 50% because the images returned from the YouTube API will be square this will make them a circle we're gonna float left so that the text floats to the right of it and then width of 50 pixels for that channel avatar and margin right will be 10 pixels to move the user name from it all right and then after the image we have the figcaption for the name of the channel and all I'm doing here is margin top 14 pixels now we'll push it away from the top and center it up with the middle of the eye right here let me just show you yeah by default it's like up here so that just pushes it over or pushes it down rather all right all right let's say this again we're not gonna have much showing up because we don't have the data yet to work with we're almost done though with the CSS after this figcaption we have stats so we're gonna have stats right here and this is a class where right here holds the main stats that we're choosing to show so that's going to be justify self right and so that's gonna write a line the the part where it has the that that's that second column for the information strong this is for the subscriber count' font size we're just increasing it a good amount basically display:block as well and then our span element for our label is gonna be color gray font size is small so 0.8 and then float right that's it for the the CSS I'm feeling like I missed a property possibly and yes I did right under here we need to add padding 8 pixels and that's gonna move the this stuff away from the edge and then I'm also going to give it a background color so you'll see when I save in a second it's gonna be 3 a 3 a 3 a so let's save that now there we go that's better so we can see we can't drag it yet so let's focus on that and also making these minimize and close buttons work so what we needed to do to do is come all the way down here to hit control B by the way if you were hiding that sidebar and go to the main TS file alright so as mentioned before this is the section where you can control a couple things about you know the default electron stuff like as it pertains to you know the x and y coordinates this is kind of like where you want the the app to load in terms of you know based on their the the just the desktop dimensions we're not gonna adjust this stuff but we are going to going to change a couple things here so first let's we're gonna put in a property called frame and just set it to false we're also going to change in it by the way this is all you have to do to make it frameless that gets rid of the menu bar in the title bar and then also I want a default width and height just kind of hard-coded in there so 550 by this is the width and then the height will be 300 so it's going to be wider than it is tall so now if we save this we have to close this out because it's not going to reload these changes and so if we have to go here hit ctrl C hit Y hit the up arrow key to get our NPM started command going again waiting waiting waiting and here we are cool so let's increase this a little bit and because we're showing this this is kind of screwing up the the width by heightening the the inspector over here but now as you can see we can drag this area and that's because of that CSS property that allows us to drag this so if we come over here you can see if you if you click in this section you're not gonna be able to drag it until we get to that I think it's like 85% I probably could extend that to about 90% but anyhow let's get these working right here the minimize and the closed buttons so let's go ahead and hit control B and we're gonna come all the way up to there's a default provider in here called electron service that's created so control B here and we have to add a couple things so in order to have the ability to close and minimize the window we're gonna have to add real quickly let's see here all right so we will have right here after I our remote we have to add in browser window so we're importing browser window from electron all right and then we're gonna create a property window and it's going to be a browser in instance of the browser window right here and then in the constructor we're going to say this dot window which is in reference to this property up here equals and it's this follows the same format as the rest so it's window that require and we'll say electron dot remote dot get current window now first of all how did I realize or discover how to do this because it wasn't here by default had it added my goal was to be able to get those you know those that little X and the minimize buttons to actually close and minimize I the the app essentially so all I did I was I used Google no so and it took me to a result and one of the issues that was posted in the github repo of this package that we're using and someone had the same question and this is exactly what was mentioned this is how you do it and and this is just one part of it though because this right here this this dot window will now show up when we import this electron service into our home component so if we now go to our home component file control B what we're going to do is import the electron service that's the file that we were just working with all right so this can be from providers dot electron oops dot service all right it's grayed out cuz it's we're not using it yet and then we're going to put in an instance of it so private electron electron service all right and then remember if you remember if we go to the HTML file right here we had on a click event minimize window and close window so let's create those real quick so I'm going to put it right here off close window and we'll say this start electron dot window and that's the thing that's the property we just created dot closed yay now we have access to that alright let's copy this we want to minimize it as well so this is minimize window and guess what minimize now of course if you're using Visual Studio code we can see if we hit the period we can see all your stuff that we have access to a lot of other stuff all right so just keep that in mind all right so if we save this I will see hopefully yep now we can minimize it and then we can go ahead and close it now when you close it I don't have to go back to the console though control C and run NPM start alright well this is getting back up and running let's go ahead and start focusing on the API stuff so this is going to require first we're going to be using by the way this is we're gonna be using the YouTube data API they have a bunch of different API is that you can use by the way this is showing up so let's get this over here alright and the the API is that we're going to use here are only going to require an API key now there's different API is for YouTube the reporting API in the analytics API and they can require Olaf keys if you actually want to get access to a lot more control over your own YouTube channel but we're not building that type of app or you can actually manipulate and edit data we're just reading simple data so we're all we're going to need is an API key so to do that you have to have a Google account first I'm already logged in you have to go to console dot developer google.com and we want to create an API right here so I'm gonna hit create all right give it a project name my odds caught whitey desk all right hit create and we'll wait momentarily drinking wine here come on bro let's go let's get it done I'm about to fall asleep all right by the way this was the Google Fonts area right here then uh I got that import coming and going from all right I think it's done yeah all right so now for this let me click on this real quickly here this is the one I was using by default and what it rare I want to go to is with that one selected yeah I have the we need to add the YouTube data API so for the one we just selected we're gonna go enable api's and services and we're gonna say data you're gonna see the YouTube data API version 3 and we're gonna enable it oh here we go again all right so okay good it's ready now we want to go to credentials all right so it says to view all credentials or create new credentials visit this and we're going to create simply an API key and this is where you know we're gonna want to save this right here we're making my screen a little bit bigger I'm gonna have to remember to delete this key cuz you guys probably abused the hell of it but I will just die call we're just gonna copy this part right here and save it in a text file somewhere just momentarily like that all right so this channels list page over here you just remember this URL or go to it you can see that for the usage of this API and by the way there's a lot of different things you can do we're only using this one thing right here you can search or you can you can construct the the the API request based on a channel ID every YouTube channel has an ID or by a YouTube username or a list from my channel you can't use that one unless you're gonna use the OAuth stuff we're not doing that and so the one we're gonna use is by the channel ID that's how we're gonna find the channel alright so and there's also stuff here that's going to show you how to do it there's also this little API Explorer sort of thing we're going to be requesting snippet content details and statistics and there's an example API right here or or a YouTube channel and if we hit execute it's going to give you a response daily limit exceeded I think this is probably based on some other situation happening here with whatever they have going on for their API key hopefully it's not using mine anyhow so one thing I saved here from earlier is the actual request this is one of my other API keys and this is going to be the the URL that we actually use to request the data from YouTube and you'll see how that works momentarily there we go this is my channel ID for design course you can see it returns all of this information here so remember when we were doing the HTML portion I was talking about going into snippet the thumbnails the default in the URL that's where all that stuff came from and it also gives you it gives you access to a fair amount of information just for being a read-only public sort of API sort of description for YouTube channels so you simply put in the ID and there you go so you can notice up here we can see it says ID equals the right here this the the channel ID that's where it goes you can also put for username and you can put a channel in the username like design course and it'll do the same thing so that's just for your own reference so we're just gonna use the ID and the IDS are comma separated so you can put in multiple that's what will allow our very simple app to do okay so uh let's get started with the API stuff so what we're gonna do is go back into the console and I'm gonna get a new console window open here so new console so we can leave this stuff running what the hell what are you doing new console let's start I have no clue why it's doing that it's never done that before and now it's freezing am I still recording come on please God what are you doing there we go alright I see I don't know what that was CD what were we called angular electron let me make sure I get this out here I have eleven yes anger angular - electron and we're going to use the angular CLI to generate a new service so ng G for generate s for service and you could you could put in generate service if you want whatever and we're gonna name it data and that's going to be for the HTTP stuff and of course when you do that you have to go to the app module TS file and again if this is all like you never touched us before you're gonna be lost like hell so make sure you watch the the free angular 6 course that I have and now we have to go and import our data service oops this light is making me really hot there's a light up there and it's it's not the nice cool LED type I have to get a new light soon I'm just gonna be from data service and then we simply have to add it as a provider in the providers array so data service now we can use it in our app component sorry about that and so I that is going to be import data service from and we're gonna step two folders out into data service and then we'll put private data data service all right so there's nothing we can do with it yet because we haven't touched the service file and it's all the way down here right there all right so our data service file we're going to import the HTTP client because we want to make a call to the YouTube API so we have to put angular a common HTTP and then we're also going to import some rxjs operators and these really their purposes is going to be allow us to first create a interval that we'll pull from or request this API endpoint every X amount of time because we want to we want to make this a real time as real time as possible and so to get the updated number every X seconds or minutes this is this is what it'll allow us to do so we're gonna import switch map map and start with and start with will well I'll describe that in a second here once we get to it or XJS operators and I do have in rxjs course for beginners as well so check that out on my site and my channel and we're also going to import interval here from rxjs all right and so now we have our constructor and we're gonna pass in an instance of the HTTP client all right and then we're going to call our function we're gonna only going to have one getstats and we're gonna pass in a more really it's going to be the ID of the channel and we're going to return an interval every now I think just to for the purposes of this tutorial in tutorial sorry I'm gonna make it 5 seconds of 5,000 milliseconds really on the I would probably just make it only 1 minute because I'm not sitting here watching this thing every five seconds so it'll also you know not make so many requests also so we're gonna return and then we're gonna pipe and use the pipe method here to put in start with zero now this means if I didn't include this start with right here and I included everything after this it would make us wait five seconds or whatever this is before it will remake that first request so when you load the app up or you put a new channel ID in hit enter in that text field and the UI you're gonna have to wait this an amount of time before it makes the first request that's stupid to start with we'll just say zero you start with immediately zero so it's it's named quite well alright so switch map alright in here this is where we do the this HTTP GET and we put in that URL I was just showing you except we make a small change to make it dynamic so what we'll do is copy this except I'm going to change the key because the API key this is going to be the key that you want to use all right so we're gonna paste that in to control B here this is kind of long and where is that API key that I had it's in here somewhere there we go that's it that's the one so I'm gonna copy that key and just paste it right there all right and then when we get to ID we take this one that's hard-coded and we simply pass in the name we're just coming from the parameter or the parameters name right there not done yet though all right after that we're gonna put in a comma and we put in one more and this right here is our map operator and we map the results to simply the result this is all standard angular HTTP stuff just like that so let's save that nothing's gonna work yet and we're gonna go back to our home component here all right and on ng on in it and this is a life cycle hook this is when it loads it basically means when the app loads we're gonna call a method called this channel we're gonna create this in a second and I'm just gonna pass in a default channel ID the if you wanted to use this for your own YouTube channel you could put your YouTube channel ID right here ideally if this was a real app that was developed and I had more time to work in all this crazy stuff it would it would load it from memory like whatever you chose last time you ran it I don't have enough time unfortunately with this new schedule I have going on here I have to pump content out like crazy alright so we're gonna create that that method right here so channel it's gonna take a name which is what this is coming from and this is we're gonna say I first we'll put this channel subscription by the way we're gonna have to create that so we have two properties up here we're gonna create first the channel info which is what we pass to the template that contains all the channels info and then also a subscription for the channels because we're gonna make sure that we can unsubscribe to these subscriptions when a person specifies a brand new coming up here real quick when they when they specify a new channel in the that input text field so import subscription from rxjs all right so we have Chino subscription and channel info so now let's go back here what we're gonna do is channel subscription equals this data this is from our data service and then we see our get stats method we created and we're gonna pass in the name and that's coming from this parameter right here and then we're going to subscribe to it and we're going to say res or the result two and we say this dot channel info equals the result whatever comes from the API alright so this is what we use in the template let me just show you real quickly before I go further in our HTML template we have let channel of channel info dot items know again that's the stuff that's being returned from right here so we could see there's an items array that's the only thing we want I don't care about this stuff we just want the items array and there's it's an array of two objects right here all right let's also just so we could see it in the console we can console.log the result and also one thing that's real important the reason we created this subscription up here channel subscription is you need to unsubscribe to the subscription otherwise you're gonna have multiple subscriptions occurring every time somebody's you know somebody use specifies a new channel ID in that input text field so what we'll say and we're gonna check if this is the first time it was if it exists already so this dot channel subscription if that exists then simply this dot channel subscription dot unsubscribe all right so it looks good to me let's go ahead and save that no look there it is guys I know we just did a lot but yeah so here's this this error right here is from before when we didn't have the code yet but as you can see every five seconds it is in the five seconds again it's coming from the service our data service right here alright we'll see that it is console logging and if I get a new subscriber in one of these times you'll see that this will go from two hundred twenty thousand subscribers 505 to 506 and you'll see that that is how it works unfortunately I don't think I'm that quite popular to where I can sit here and you'll see it grill soon the number change and so let's see here what else do we have let me demonstrate real quick adding like a second ID here you could just there comma separated and this comes from the API Docs so if we put a comma here and remember this is 505 somebody might subscribe and it's kind of late though it's a little bit slow time if I come here I have some other channel IDs I've put in here wait that's mine right there here's another one alright so that's a brad chap traverse your traverse ease media site I'll put another one all right this is my friend he has three hundred twenty two thousand subscribers and if I look at any of these consoles logs right here and we'll see we have items three and that's what we're targeting really so here's each of the three objects containing the information that's pertinent to that channel so as you can see Brad just got another subscriber here it was six nine oh and that is it for you know the bulk of this really obviously extremely simple stuff that we have going on here but let me we're gonna have we're not done yet though and we're gonna set this up so that we can also get it build out as an executable and also get rid of this so let's do that so we're gonna go to main and we're going to comment out this right here open dev tools so again if you make changes to this main TS file you have to it's not gonna hot reload it so just keep that in mind real quick and what we'll do is just I just to make sure that works I will go ahead and well let's versus exit out of there where am i add what you want right here MPM start so now when this reloads it should show or it should have that part absent with the developer tools and while that's loading let's go back here and we have to determine which one we really want to build or run in order to build it on which operating system we want the one we're going to run is NPM run electron windows by the way here it is we can see it's no longer there obviously you don't want people seeing that by the way I did gain a subscriber since then all right so let's run this right here NPM run a lecture on Windows and this will on a Windows OS build the application to create an actual executable file this takes time though it takes a little bit it's a little bit more lengthy so let's close that out and NPM run electron when oh wait I know one thing that's gonna break if I don't do this so if I go back to that right here we need to change these any any assets that are linked need to go I need to change to this location right here so now we can go back I can get over here there we go and run that command all right so when you run this nothing happens it doesn't load it up but what it does do is it it creates an executable here in the project so if we look over here we'll see we have an app builds and we have an electron file gonna reveal this in the Explorer and this is a normal app now I can save this to your desktop or whatever and if we double click on it with any luck please God work it's showing on the other monitor there we go sweet now of course I should mention if this is a serious app right here this specifying the the ID like this with these ugly IDs comma separated that's not ideal in an ideal world where I'd have more time to work on this we would probably have a drop-down right here where you can specify either to search for the username of a channel versus an ID and by the way there is a little bit of a not a hack but sometimes depending on the channel for instance if I go to youtube.com design course that's my username and it will work some channels don't have these I don't believe they have these these vanity URLs and sometimes they will just show up with the actual chain like the portrait art for example you can see that user ID is how you get to that channel sometimes like what would my channel ID be we know what the from username is but you don't know what that is and there's a YouTube channel ID finder or something like that I let me find it because I was looking for this there is an eye there is a right here found it so if you put in a channel IDs you are channel YouTube user name you'll be able to find the ID right here alright that's just for your own reference it's something I should kind of struggle with for a second but yeah going back to what I was saying the ideal way to set this up would be so that you you choose how you want to find a channel and then with a drop-down and then to the right would be you know this text field right here where a person specifies a username or a channel ID and then when they hit enter it would instead of having to separate it by comma which I don't think you can separate or you can search for multiple channels by username I think that's only by ID but either way you mean when you hit enter it would add it to an array of store of sorts that's weird storing it on local storage somehow and and by the way you can search for all that stuff like electron you know storing data and all that stuff on your own time and it would store in array and then that way you're not sitting there having to comma separate them and it was so it just simply push to an array and then when you hover over this it would be cool to have kind of like an X somewhere to where you can just delete ones you don't want to add that would be the ideal setup at least a lot better than this but hopefully you were able to take away at least something from this tutorial and what's really cool what I hope I'm gonna have the github repo for this so if you wanted to contribute to the project and if you don't know how to do that go to Google or YouTube and type how to contribute to a github project you'll find a bunch of videos you just go to the repo you fork it you make your changes if you want to make you know enhancements to this app and then create a a pull request and I'll add it and there we go alright so hopefully you found that useful make sure your answer today's question and subscribe here see you guys soon [Music] [Music]

Channel: DesignCourse

Views: 129,948

Keywords: electron app development, electron tutorial for beginners, electron app, electron js tutorial, electron framework, electron apps, apps built on electron, desktop apps, open source, electron demo, electron angular, angular electron, electron angular tutorial, electron tutorial, electron tutorial 2018, angular tutorial 2018, angular 6, youtube api, youtube data api tutorial, app development, how to build a desktop app, how to make a desktop app

Id: Ea2lWsumTrM

Length: 63min 42sec (3822 seconds)

Published: Tue Jul 17 2018

Reddit Comments

[u/PToN_rM]

Good stuff!

[u/RajsekharDonkala]

please send me that project