Up next in 10
Build Electron Youtube Channel Info Desktop App Using Youtube Data API V3 in 1 Hour
Mar 12, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-electron-youtube-channel-info-desktop-app-using-youtube-data-api-v3-in-1-hour/
Welcome Folks My name is Gautam and Welcome to Coding Shiksha a Place for All Programmers. You can learn Web Development and Programming Tutorials.
Subscribe for more Videos: https://www.youtube.com/channel/UCR6d0EiC3G4WA8-Rqji6a8g?sub_confirmation=1
Watch next –
[Popular Videos on the Channel]
[Login with Google Account using Javascript]
https://www.youtube.com/watch?v=qzq0kEUa5lU
[What is AJAX and How it Works | Short Tutorial for Beginners]
https://www.youtube.com/watch?v=ugiFpA03B6c
Show More Show Less View Video Transcript
0:00
hello friends today in this tutorial we will be building a complete desktop application in electron framework so
0:05
this is a desktop application where you can just get the YouTube channel info so
0:10
here you just need to copy/paste the channel idea of whatever YouTube channel that you are requesting the axis so that
0:17
will just go to youtube here and just copy/paste this ID channel ID and you just need to copy paste this in this box
0:25
here and click on the submit button and now basically you will see the channel icon alongside with the channel title
0:32
this is YT Advice total number of subscribers total number of views and total number of videos so I am getting
0:38
all this data from the YouTube data API so we are we will be building this using
0:43
that API you can even just in this we are taking there you can see that this
0:50
is a user name this is not the ID so now basically we are first of all converting it to the ID and then requesting data so
0:58
let me just just tell you the second scenario here so if you just enter some other channel here so now you will see
1:07
that the user name is not present the ID is present so you can just plug in this like this copy paste the own URL and
1:14
click Submit and now basically you can see that technical guru ji and now the logo is their subscribers total views
1:21
and total videos and the nice thing about this application is that this is a
1:26
text of application you did not have to go to any kind of web site you just need to one one time just install this app
1:32
onto your computer and that's it and there is a menu icon also there you can see that you can have two options either
1:39
you can quit the app like this and you can just relaunch it once again this is
1:45
a exe file and the second option is the about screen so if you click this about screen you will be getting this nice
1:51
info screen this is the title of this application YouTube channel info app and this is some information about it simple
1:59
desktop app developed in electrons framework to display YouTube channel it is and this is my photograph and this is
2:05
a developer name here and we will building this application from scratch and all the source code of this
2:12
application is given in video-description this is a github link here you can see that you can just
2:17
download the github repository and also a demo of this application Exe file is
2:23
given this is my Google Drive link so this is actual lab that is built in
2:28
using electron so let's start building this application from scratch now to get
2:35
started guys we will be creating a brand new folder inside our desktop so you can
2:40
just call it as a YouTube channel info like this and after that you just need
2:48
to open this folder inside command prompt like this and the very first
2:53
thing we will do is that we will be writing this npm in it - why so this will create the empty package store json
3:00
file for us and now to get started we will install electron first of all npm
3:05
install electron this needs to be a dev dependencies so - - save - de Vie so
3:13
just to enter this so basically this will install it as a dev dependency this electron so this is electron framework
3:21
which will be required so this will take some time just depending upon your computer speed five to ten seconds so I
3:28
will be back whenever it is installed now you can see that the electron dependency is installed after that we
3:34
just want to install one of the dependency which is npm i which is get
3:40
channel video ID so basically in order to get the channel ID from a given URL youtube channel URL we will be using
3:46
this dependency no dependency inside of an electron dependence application so the command is very simple and PM
3:53
install get youtube channel ID so i will be going to the command prompt i will
3:59
just copy paste this command so it will install this dependency for us so it is
4:04
a very minor dependency but a very important dependency in our applications
4:09
so with the help of the cv we will be fetching the channel ID after that in order to have the auto reload
4:16
functionality inside our electron application so whenever we make any kind of changes it will auto reload you know
4:23
you know how to do that we will be installing a dependency which we the electron - reload and again this
4:30
will be a deaf dependency so just execute this command and PMI electron -
4:36
reload - - save - de vie so if you search for this dependency this is a
4:42
very handy dependency if you are working with electron so if you search for anthea electron reload so this is a
4:49
dependency so basically it is a simplest of the dependency whenever your file
4:55
changes it will auto reload it has weekly downloads of eleven thousand five hundred fifty-six downloads you can see
5:01
that now it has successfully install this now we can just open this folder inside Visual Studio code - like this
5:08
and you will see a package dot JSON file being created inside your directory and
5:15
a node modules folder in in this all the node modules are stored if you open this
5:20
file package store Jason the name of the app version description and here you
5:26
just need to change this to main door Cheers this will be the starting point of our application electronic a so these are
5:33
the def dependency electron and electron - reload and this is the only dependency
5:38
that we need for this project get this get youtube channel ID and now we will create our main dot JS file now to get
5:47
started inside this file main door Cheers first of all we just need to import electron so we can just declare a
5:53
constable and require this electron dependency and then we can just use D structuring a set of curly brackets and
6:00
then we can just import app browser window which will be useful in order to create windows and menu so we will be
6:07
importing these three things from electron dependency and after that we will be declaring our main window and
6:13
making it for making the main window it is very simple guys we will be attaching a on event on the app object that we
6:22
have imported so there is a ready object ready event so when the app is ready this callback function will execute and
6:28
inside this function guys we just need to initialize our main window so this
6:33
will be equal to new browser window so we will be using the browser window and inside this we do not want to pass any
6:40
kind of options because it takes the width and the height of the window because we want the main window to appear so after that
6:47
we can just load any kind of HTML inside this window so main window dot the load
6:52
URL so inside this load URL option we
6:59
can just pass first of all we need to use the URL module as well so here we
7:06
can just declare the URL so there is a built-in dependency URL in node.js so we
7:11
can just use this and there is a method inside this which is format so inside
7:17
this method we can first of all pass a property which is path name so path name
7:22
will be equal to and for this we also need to require the path dependency also
7:28
so path we need to require it like this so now we can just use a simple function
7:34
which is there inside path dependency path dot join and inside this we can
7:40
just first of all declare this constant their name so turn name is actually referring to this directory which is the
7:47
directory of the application and then put a comma and after that we can just
7:53
write the file name which is main window dot HTML so this file we will create
7:59
right here inside our directory so I can just create this file main window dot HTML so here I can just write a simple
8:07
HTML doctype like this so I can just here right to a YouTube channel info app
8:16
and printed something here YouTube channel info app like this so basically
8:24
now we just need to run this application so after the path name it also takes
8:32
some more parameter sky so just put a comma here and the second parameter will be the protocol so here the protocol
8:39
will be file so just right here file colon and also there is a third property
8:46
which is slashes so slashes is to true that's it and now basically we just need
8:54
to run the application so in order to run this application it is very simple you
9:01
just need to go to first of all package store JSON file and here you just need to replace in the script section start
9:08
here like this and then I can just remove this all and right here electron
9:13
- so basically if I write here NPM start
9:18
it will start my application if I go to the command prompt and right here NPM start and now it will start my electron
9:26
application so just wait and now this is your electron demo application that we
9:33
have launched from the command line so now it is running now as you will see
9:41
the default menu items appearing here right here on the screen and now you'll see that how to add our custom menu
9:47
items to the electron application so first of all let me just create this and here we will be defining a simple
9:55
variable which will be menu template so here this will be added and inside this
10:01
there will be a set of objects as menu items so the first will be label will be
10:07
quit so sorry this needs to be up here and then we will define our sub menu sub
10:15
menu like this so this will be again a array and inside this we will be
10:21
containing a set of objects which will be first of all quit so when we click
10:27
this menu item here on click event handler we just need to execute app dot
10:33
quit so this will exit the application for us the second item that we need to define is the label let me just have
10:41
about screen so when we click this button about we will be loading a
10:47
different HTML file so this will be click and we will be creating a custom
10:53
function which will be create about window now we just need to create this function right here at the top which is
11:00
function create about window and all the functionality of adding a window to the
11:06
electron application I have Illustrated before here so I will just copy paste all the code from here and I need to
11:14
make some slight modifications so this I need to change to about window and this
11:20
also to about window and here we just need to pass some options let me just
11:25
give it a width of 500 and a height of also 350 350 and the title will be
11:36
simply YouTube channel info that's it
11:43
and now we also need to manipulate this to about window like this about window
11:49
dot HTML so here let me just delete this previous about dot window and here we
11:55
just need to create a brand new file of about window toward HTML so we can just
12:04
change the title to YouTube channel info
12:10
like this and after this guys we just need to add over all so we just need to
12:17
create a separate variable for about window so left about window that's it
12:23
and now we just need to add this menu item which is menu template to the screen so for that guys we just need to
12:30
move to the AB dot on function and just after this we can just create a separate
12:36
value for main menu like this and then we can just use the menu class and there
12:41
is a method which is built from template and now we can use our menu template like this which we have defined here
12:48
like this after that we just need to add the menu to the screen for that we have
12:54
this function set the application menu and we will pass our main menu like this and now basically I can just run the
13:01
application once again by executing NPM start so you will see our custom menu
13:07
appearing here you will see that app here if I click this I will see two options either we can quit the app like
13:13
this or we can just click the about screen so if I click about you will see a
13:20
separate window appearing here to me which is the bout screen and now we just need to first of all finish off the
13:27
about window so this will just be containing h1 tag for that I am styling
13:32
purposes I am also using bootstrap so we can just grab the bootstrap CDN in this
13:39
website which is bootstrap CDN I can just copy the CD in here and just after
13:46
the title we can have the link tag copy paste the URL and now inside this we can
13:53
just in the about dot HTML no guys
13:58
inside this we will be having the bootstrap class of container and also text center inside this we will define
14:05
h3 tag and we will just fight here YouTube channel info and after that we
14:13
can just write here a simple paragraph tag this we can just write simple electron desktop application to search
14:27
YouTube channels details like this so
14:33
after that guys we can just have our image the developer image so I have this
14:40
image located inside coding section calm this is my official website and I can
14:45
just right click copy image address and then I can just paste it in the source and I can just give it a bootstrap class
14:53
of image round it like this and a custom width of 4 150 and a height of also 150
15:00
like this and now after the skies we
15:06
will be having h3 track of a developer also so here we can just write a simple
15:11
name my name Gotham sama so now basically now I can just read on the
15:17
application once again by executing NPM start so now if I click about screen you
15:26
will see this info is out there YouTube channel for app see
15:31
electronic stroke application to search YouTube channel details so now we are successfully displaying these details
15:38
inside this window so one error you will be noticing because this menu item is
15:43
also appearing here also we need to prevent this so what I can do is that I can do a very simple thing go back to
15:51
main dot shears and inside this our create about window we can just right
15:58
here about window dot we can just right
16:04
here set menu visibility so that you can
16:09
see that set menu bar visibility and we can just set it to false and now it will not appear this menu item inside the
16:15
about window so if you just reload the application once again and p.m. start so
16:21
these are some of the things that you that you need to kept in mind when you are developing desktop application so now if you click about screen you will
16:28
not see this menu item appearing here so this is about screen guys which is done
16:33
now basically guys we can just to get enough for different dev dependency
16:38
which we have installed here inside of a package store JSON file this is the electron reload dependency so now we can
16:45
just hook up this dependencies are inside our application so in order to use this dependency you just need to
16:51
write a very simple line of code which is used strict right here at the start
16:57
of the application which is main door chase just write this line and after
17:02
that you just need to require this dependency so just before you after this
17:08
you can just try to require and after that you need to require electron reload
17:15
like this and then you just need to write their name like this so basically
17:21
it will watch for any kind of changes which are done with this directory name that we have passed here so now
17:28
basically if you just restart the application once again NPM start and now
17:35
if I make any kind of changes to my JavaScript code or HTML code which are present let me just make a simple change
17:42
inside let me just change this - like this and now if you will
17:47
instantly see the if I click the about screen you will see these changes here and now I need not have to restart the
17:54
application so let me just reset to info here and again if I click here you will
18:01
see that it will auto reload so now just hook up this dependency also by making
18:06
these changes and now we will be adding the developer tools inside your application guys so first of all we just
18:13
need to write this main window dot on we will be writing the quit event handler
18:19
so when the app closes we just need to write this line of code this callback
18:24
function will execute and then we just need to write app dot quit so this will
18:29
not do much but this is mandatory for our application so if you restart the application it will not do any kind of
18:36
change here now if I click the cross button it the app closes like this so
18:44
this line is very mandatory and now in order to add the developer tools menu
18:50
item we first of all need to declare a environment variable right here at the top which will be processed dot e and V
18:58
and then we will be declaring the environment variable which will be note
19:04
underscore env like this and now we will initialize it to development because we
19:10
are developing the application for now but if you deploy it you will change this to production and now we will be
19:16
checking this in inside our if condition so basically we will just write it here
19:22
if process dot to E and V dot node environment is not equal to production
19:32
so if the if this variable is not equal to production and in that scene our you
19:37
you just need to push a entry inside the menu template like this
19:44
the label will be simply developer tools
19:50
put a comma and then we will be writing the sub menu like this this will be a
19:56
array the first object it will contain is the first item will be the roll roll
20:03
will be equal to reload so basically it will be reloading the application
20:09
the second item will be simply be developer tools so let me just give it a
20:15
label of let us suppose toggle dev tools
20:23
and put a comma and when we click this we will we just need to display our
20:31
developer tools so here you will just pass the item and the focused window
20:37
focus window and now inside this we just need to use the focus window variable
20:43
and then we just need to execute toggle dev tools so this is a function guys
20:50
toggle dev tools and execute this function and now basically if I restart
20:58
the application by executing NPM start you will see that this developer tools
21:05
will appear here if I click this toggle developer tools now it will open the developer tools for me so this is very
21:12
handy for developing web application as you know in browsers so because this
21:18
production is equal to development here I have defined this to development here
21:23
now it is showing these developer tools but now if I change this to production
21:29
and now if I already start the application and now you will not see
21:34
this appearing because I have changes to production so now it will not you will
21:40
not see the dev tools now wise we will be making our main window dot HTML file
21:45
so for that the first of all we just need to import bootstraps so just copy
21:50
the CDN and just after the titans we can just
21:55
copy paste it to the hf like this and now after this we can just have our
22:01
heading which is there so this is good so in after that we can just bind this
22:06
to the Container class like this so this is a bootstrap container class so inside this we can just display the heading
22:13
which will be actual this will be YouTube channel info and I can just give
22:23
it a bootstrap class of X Center so this
22:28
will align it in the center position now basically if i refresh the application you will see that the phones also change
22:35
due to bootstrap and after that we can just have a simple form which could be
22:41
having ideal form here like this and inside this I will be giving a form
22:48
group class of bootstrap and inside this we will be having input type text I will
22:55
be giving a ID to it of food channel ID so that we can just target it in JavaScript and a placeholder also of
23:02
channel ID like this after this we also
23:08
want a button so this is our channel ID let me also provide a bootstrap class to
23:15
it of form control just to align it perfectly if i refresh it you will see
23:22
that this is our channel ID so after the channel ID we also want a simple button
23:30
to submit our form so we can just have the form group class once again and
23:36
inside this we will have a BTN BTN danger button and click Submit here so
23:44
this will submit our form here like this so the user interface is complete now
23:50
just after the form we will be having a div tag which will be having an ID of result and also we will be giving a
23:58
class of foot x center you know how to display details in the center of the
24:03
screen and now this is the UI which is complete and now basically we just need to create
24:09
a simple script or chase file the JavaScript code inside this we will be
24:15
writing code and just after this we will be including our JavaScript so here just
24:22
have script source will be equal to bundled or Chia's for this project we
24:28
will be compiling our JavaScript code to using webpack so for this you should be
24:36
having web pack installed so web pack is the open source JavaScript library for
24:41
parsing dodged es6 javascript code so you can just install this library by
24:47
executing this command which is npm i - g for global that pack execute this
24:54
command and it will install it globally the second dependency we will install is for chief i
25:00
so npm i - g of what you phi so basically it will be watching for any
25:06
kind of changes that you make for to your files and it will auto reload and now after installing these two
25:12
dependency we can just install you can execute this command which is watch if i
25:17
and then we can just provide our input file name which is scraped or chairs - o
25:24
- o for output and then we can just provide our output file which will be bundled or chairs and then we just need
25:32
to write - V so this - V is for auto reload and if I execute this command now
25:39
it will create this bundled or chairs inside this directory so just wait you
25:45
can see that it has created this bundle bundle dot JS file and now it is listening to the changes if I if any
25:53
kind of changes are made to it and let's suppose I make any kind of change here
25:58
hi here you can see that these changes are made to this file here automatically
26:05
and if I just open this bundle door chase you will see a garbage code here like this you don't want to worry about
26:12
it just close this file and just include it inside your main window and now we also need to start our
26:18
electron applications I can just open another command prompt and here you can just write NPM start so
26:27
you will see a alert box of hi printing if I just change it to let's suppose I
26:33
add another alert for hi hello and now
26:39
you will see two alert boxes printed out simultaneously like this so this is a
26:45
power of the pack oh sorry browserify that we have installed here
26:50
sorry this was not web pack this was browserify so I have made a mistake so
26:56
NPM I - gee browserify so this was the library name browserify so just install
27:03
this globally that's it no guys we just need to make some slight modifications
27:08
to our main window dot HTML just after this form we can just add a label to it
27:13
or food channel ID just and put a colon and also we can just add this required
27:21
directive here required like this so now if i refresh the application you will
27:26
see that this label will be added and if I click Submit we will be seen this warning that please fill out this field
27:32
here so we have added some kind of validation also now go to sleep pod Cheers you will be first of all getting
27:38
the form here by document dot get element by ID and just pass the ID that
27:47
you have given to the form so then we can just find an event listener to the form so when we submit the form like
27:54
this so this is the event handler name they call that function will execute which will be having the event object
27:59
and then we can just execute this function prevent default in order to prevent the auto summation of the form
28:05
and now we can get the channel ID which the user enter by X like this X you just
28:14
declare a variable channel ID right here at the top and then we can just execute a simple function get element by ID
28:20
channel ID and then extract the value by dot value and then we can just print out
28:28
in an alert box channel ID just to check if i refresh now it will automatically
28:34
fresh if I enter any kind of value you will see that value here inside Ehlert box and now we just need to also import
28:42
the module which is we have installed which is get YouTube channel ID so here we can just import this get let me just
28:52
move to my file which is weird this is file script or cheers so right here
29:00
YouTube channel ID so we just need to require the module
29:05
get youtube channel ID like this so after this guys we just need to we
29:15
need to pass this inside this function now basically guys we can just pass this
29:20
channel ID to this YouTube channel ID so for that we can just declare a simple
29:25
variable here right here at the top which will be result like this so now we
29:32
can just initialize this result to youtube channel ID and then we can just
29:38
pass our channel ID like this so this returns a promise guys that we need to handle so you can just write here result
29:45
dot then so so this returns a promise we are handling this by dot then this will
29:50
return the data to us inside this data and now we can just print out the data which is coming by console.log data and
29:58
basically now I need to print I need to just to copy paste address like this if
30:04
I go to technical guru G and now if I paste that full address and let me fall
30:12
for this we need to have the dev tool so on so I need to go to the main door
30:17
Cheers and I need to code just changes to development so that the dev tools
30:23
will be there for this I need to restart the application
30:32
so here we have copy paces our address if I toggle dev tools and if I go to
30:39
console here click Submit you will see that it will return the adjacent response to us containing the ID of the
30:45
channel like this and here the username is false now we have directly got the ID
30:53
because the ID was present inside the URL but there may be cases there let me
30:58
just show you a different case travel see media I there is another channel which is there so this channel contains
31:07
the username this channel doesn't contain the ID that you have seen so now
31:15
if I just copy paste this address here let us suppose I go to here submit and
31:21
now it will have a different address like this dead guy there this is ID and
31:27
the username is equal to tag guy there and inside this username is username
31:33
field is there and now we just need to first of all check that if the user name
31:39
is present or not so for this check we just need to have a simple if condition
31:46
here inside if at the knot symbol if
31:57
data user name field is false in that case we can just create a simple function which will get the data from
32:04
the API and we can just pass our channel ID like this we can just pass our
32:14
channel ID so channel ID we can just
32:21
declare right here at the top another variable which is ID so now we can just initialize this ID variable - ID is
32:30
equal to data dot ID so this is the ID that we have caught and now we are
32:37
passing this to this function which is ID and now we just need to create this function which will get the data from
32:43
the API which is function get data so we will
32:49
pass the ID like this and now we just need to first of all make a simple get
32:55
request to the API so for making the get request we also need to get the API key
33:02
also so for getting the API key you can just go to Google developer console and
33:09
you can just click the first link and
33:16
just go to Google API so you also need to enable the YouTube data API for that
33:22
so in order to get the API key just go to credentials and here you just need to
33:28
get your YouTube API key so which will be there like this or you can just
33:36
create a new one like this create a new API key so it will instantly create this key for you so just copy it and go to
33:43
the application and right here just Const API key and save your API key like
33:51
this and now this is your API key and now we just need to make a simple get request to the route here so this is the
33:59
full route here you can see that guys this will return a JSON response to us
34:04
and for this I let me first of all copy/paste this full address make a
34:12
separate URL like this Const you RL
34:17
paste a URL like this so this is HTTP
34:23
www.googleappsforedu.com
34:38
like this and the ID will be equal to the ID which is coming from the function
34:44
so here I can just write ID will be the actual ID which is coming and there is a
34:51
third parameter which is part here part is equal to snippet comma content details comma statistics now we will be
34:59
making a simple get request to this URL so dollar dot get so this is a jQuery
35:04
function and the data will be returned inside this callback function so first of all we can just console.log the data
35:09
just for checking purposes and now if i refresh the application and here I just need to copy paste to the channel ID so
35:17
I can just get the full URL channel URL and paste it here click on submit so you
35:26
will see that it will return a JSON response to us now we just need to parse this response there is a height I'm
35:32
sorry and inside this the snippet contains the channel title description
35:38
and the thumbnails also you can see that the channel picture and inside the
35:43
statistics you will get the total number of views total subscribers and total videos and now we just need to parse
35:50
this so first of all right here at the top we just need to declare a simple
35:55
user variable so just declare it let user and inside this we just need to
36:01
display the details here so first of all we can initialize it to backtick symbols
36:07
so that we can just write multiple lines of HTML code so right here we will be having the h2 tag inside this we can
36:14
just write here data dot items dot
36:20
snippet dot title and close the tag here
36:25
and now I also need to just append this so I can just target by ID which is
36:32
result dot HTML and this will be equal to user that's it now basically if I
36:40
again refresh it so you will see that title which it is appearing here
36:46
technical guru G and now we just need to also add some other details which is the image of
36:51
the channel so image source will be equal to again this dollar a set of
36:58
curly brackets data dot items and inside
37:04
this we again want to go to snippet dot thumbnails dot default dot URL so this
37:14
will get the URL so here you just need to close this tag image tag and now once
37:23
again if I you will also get the picture of the channel like this so after this
37:30
we will also be giving a bootstrap class of image circle like this so after the
37:42
channel image we will be getting the total number of subscribers so for that
37:47
we will be again having a h2 tag I will be giving a ID to it or not give a ID
37:55
just have a label of subscribers and
38:03
after that we will be binding this variable which will be data wrote items
38:10
snippet dot oh sorry we need to this
38:16
time go to statistics not snippet statics statistics and inside this this
38:23
contains a property which is subscriber count' and close your your h2 tag like
38:38
this and after that we will also be displaying our total views as well so so
38:47
views this will be again be equal to data rod items
39:01
statistics dot view count like this so
39:13
close this h2 tag as well and now lastly
39:19
we will be having the total videos data
39:25
out items
39:32
dot statistics dot video-count like this and also close the h2 tag like this
39:50
so now basically if i refresh it again if i again copy paste channel ID and now
39:56
you will get all the information that you need subscribers views and total number of videos and now we need to
40:04
repeat the same process for the channel username as well so if I just copy paste a let us suppose a channel which has a
40:12
user name instead of ID let's suppose this is the channel and this is the
40:18
whole URL and for this we just need to
40:24
make a minor change so if the username
40:29
field is true in the health condition we first of all need to change the user name to ID so we will make a separate
40:37
function convert user name to ID and we will pass our username so instead we
40:47
will be declaring our user name to whatever username which is there so
40:53
username is equal to data dot username
41:02
like this and for this we also need to declare a username variable right here
41:07
at the top and we just need to pass this
41:13
tweet this function username and now we just need to make this function function
41:19
convert username to ID this takes the username and the URL will be pretty
41:25
simple so we just need to make slight change inside the URL so let me just
41:32
copy paste the whole URL
41:48
let me just save this code first of all so this will the part parameter will be
41:53
only equal to ID because in this case I want only ID and one other field will be
42:00
there which will be this time we just need to pass this as fourth username
42:10
this we need to pass for username and here you will pass the user name instead
42:15
of ID like this let me just cross check if this is a right URL or not for
42:24
username I think that n is small here so just make the end small like this and
42:33
now we just need to make this request and get request to the API again we will use taller or get URL and the data will
42:43
be returned to us we can just console.log the data for now just for
42:51
checking purposes and now basically if I paste this sorry the channel ID with the
42:57
username let's suppose I paste this channel URL and click on submit if I
43:05
click toggle depth all's you will see that I receive a object which has a
43:11
username which is listed out Takei depth and now I just need to it is saying to
43:22
me that key it is let me just see what
43:29
is there here
43:38
there is some kind of error is there because I think that I have made a mistake sorry guys there was a little mistake
43:45
here I just forgot to add this equal to sign here that was a problem for user
43:50
you know just after this for username just add this equal to sign and now if you refresh the application put your
43:57
channel URL and submit and now you will get the response back with the actual
44:02
channel ID which is present inside this item sorry this is the actual actual channel ID and now we are successfully
44:10
getting channel ID from the user name and now we can just inside this function
44:16
we can just initialize our channel ID to whatever data out items and we can just
44:24
write 0 here dot ID
44:34
so it contains a property of ID here like this and after that once again we
44:42
not need to call get data function and pass the channel ID which we have caught
44:48
sorry this needs to be ID not channel ID we just need to pass this ID to this
44:56
variable like this and now if i refresh it hopefully I will get a response and
45:02
you will see that now with this username
45:08
URL also we are getting the response back like this and you can try out many
45:18
channels there is let me just show you one other examples direct bonus this is a channel will get a username so this is
45:26
a username like this and now basically if I may just close this so let me now
45:39
just submit this and now you will see that it will change to this subscribers
45:46
views and videos so in this case it has
45:52
changed to this and one other thing that I need to do is that I need to clear out this values which are whenever I click
45:59
the submit button I need to clear out this value so I can just make a simple
46:05
function which will be clear fields
46:11
function and then I can just target our input
46:19
field here so the idea that we have
46:26
given is channel ID
46:36
now here I can just give you the channel ID the ID that we have given to the
46:42
input field and just clear out it tell you Val is equal to like this and also
46:48
we can just clear out our result also so we can just call a empty function like this and now we can just execute this
46:56
function just before we execute to get data so right here we can just call this function to just clear out the previous
47:04
data like this clear fields and now you can just submit here you will get you
47:11
and now you can see that the input field is clear cleared out like this and now
47:16
the app is complete guys and now we can just deploy this app and to a exe file
47:24
so I will be showing you that process also so for this we just need to execute
47:30
or install a package which will be let me just show you there is a blog post
47:36
which is their separate blog post there is a package which is there inside
47:41
electron packager that you need to install so just get to command prompt
47:47
and execute this command NPM I electron packager and this will be a dev
47:56
dependency again - - to save - TeV so just execute this command so this will
48:01
install this module to you so this will
48:06
take some time now you can see that it has successfully installed here and
48:11
after installing it you just need to add some scripts that I will show you the
48:18
whole source code is there in the video description you will also get this inside your package store Jason so here
48:24
you just need to copy paste this D scripts inside your package store Jason so just go to package drawer Jason and
48:31
inside the script section put a comma here and paste it so these are the
48:37
scripts basically if you are wanted to deploy this inside Mac Windows or Linux
48:43
I want to deploy it on the windows side for that I need to
48:50
change the title of the app from here just changes title to YouTube channel
48:58
info like this and for the icon this
49:05
icon that you you can see this icon you have to will you have to install or
49:14
download a create this assets folder inside your directory so let me just
49:20
show you first of all you need to download just go to google and type here
49:27
download IU key files dot I you see files here and this is a website I can
49:33
archieve calm so here you will get all the free icons so let me just search for
49:39
the icon such as YouTube I'm using this
49:44
icon so here you can just download this file which is this file so click this so
49:53
this will download this file to you and here you just need to cut this from this
50:01
and you just need to go to your folder which is YouTube channel info so inside
50:09
this you just need to create a assets folder for your icons so just create
50:14
empty folder assets so you need to follow the path so if you open package
50:20
store Jason after the assets there is the icons folder so I will create a
50:27
icons folder new folder icons and then you just need
50:38
to create another folder which will be for Windows and then inside this you
50:45
just need to paste this icon and you just need to rename as I I can like this
50:53
this is your icon of the application and now we just need to build this application so for building it I can
51:00
just write a simple command on command line which is NPM run package bin but
51:06
before that we just need to change this to from development to production because now we are deploying it so now
51:14
we can just write a simple command npm run package - wi n which is windows and now it will
51:23
you can see that it is packaging the app for platform windows 32 so you will see
51:30
a release spells folder will be there so now it has created this folder this is a
51:36
release release builds folder and now you can just open this file this is a
51:45
release builds folder which is created if you open this you will see your exe file is there if you open this file
51:52
it is 88 megabytes so it is saying to me that cannot find module electrons reload
52:00
guys the problem was very simple the dependencies were listed out inside the dev dependency which is electron reload
52:06
that is why it first wasn't able to find the dependency now I can just move this
52:12
dependency which was let me just copy this I can just copy this dependency and
52:18
move it inside our dependency section so put a comma and write this and after
52:23
this we can just execute a simple command which is NPM install so just fill install this dependency as a
52:29
dependency not a def dependency so it will take some time so after this we can
52:36
just package over app once again execute NPM drum package - W I can't
52:43
sorry this NPM sorry and p.m. bruh package - wim so now this will create a release
52:52
built folder right here inside it is just packaging the app so just wait so
52:58
you will see that it created this release builds now if I open the application this is the exe file and now
53:07
the application is working if I quit that the application closes and if I go
53:14
to the about screen you will see the about screen like this and now if I come
53:19
to the functionality if I copy paste the channel URL let's suppose I copy this
53:29
click on submit you will see that all the details are fetched from the API this is the title of the channel
53:35
thumbnail subscribers views and videos I can also do this for a username URL so
53:44
if I go to travel see media and if I
53:50
copy paste this address like this click
53:56
on submit and now you will see that Trevor see media you will get all the Challenger tales along with the picture
54:03
and now we have built this entire application using electron all the source code is listed here in the video
54:09
description so just download the github repository and thanks very much for watching this video if you like this
54:15
video then please hit the like button subscribe the channel and also don't forget to hit the notification by liken
54:21
and I will be seeing you in the next video until then thank you very much
#Programming
#Other