What's poppin guys, it's very special day. It is Saturday in the morning, and we have a special guest
Okay, no we don't have special guests. It's only me today, but you know we can still have fun with just me I
Don't have any plans for today. You know none of my friends invited me to anything
So yeah
So yeah, let's go write a let's go write a web app. You know cuz cuz there's nothing else to do apparently but come on
Okay all right, so let's write a simple web app. I don't know what I want to build
All right, so usually what I like to do. I like to start off with a
Template so usually what I do is I like to put it on Heroku
I like to host on Heroku cuz it's just a lot faster
And I don't need to think about the servers and stuff like that so
I made a template called nodejs template and what I'm gonna do is
I'm gonna get clone it on to my computer, and then maybe rename it to something else maybe called
project Joma
No project fine Jolla a wife
And then let's go here as you can see let's see if it works. No js' index
something's wrong cannot find module
That is because we have to npm install first so this will install all the packages that my template uses
It's like a package dot JSON
JSON
Okay
But yeah, so we got expressed. Ejs okay. That's cool cool cool
All right, so Express is basically a web framework, and yeah, so let's try it out
No js' the index listening. Let's see localhost 5000
Seems to work real well all right, and then next I kind of figure how to do this, but next I'm gonna deploy to Heroku
so Heroku create
Get push to Heroku
Come on come on yeah, yeah compressing done launching oh
They gave me this URL fast hollows all right, and then let's see if it works
Mm-hmm okay, cool all right Jonah is a douche
Sounds about right so as you can see now
It's already deployed to vas hollow, so now I have the deployment ready, so I am ready to code
But I'm not a coder not a Lapras all right so now
I have to think about why I don't want to build hmm
So usually I like to think of a problem that I have and then find a solution for it
So all I have to do is find my most annoying problem. I
Need a girlfriend
All right, I'm gonna take a break. I'm gonna go get lunch, but I'll think about it nothing about what to build
Lonely I'm mr.. Lonely I have nobody
For my
Mr.. Lonely
Wish I had someone
To call on the whole
Soldier away from
Thrun a wish of mine
That's one lonely
Mr. Lonely
I
wish that I
All right, okay?
so if I bought it and I
Kinda want to build something for me and my
Non-existent girlfriend so that we can watch YouTube videos together, and it will sync together
You know for example if I play, and I pause or I stop the video
It's gonna do the same to her or if she does the same thing now this probably already exists, but it's good practice
you know so
Alright, let's start building this out
Alright so first we're gonna take off this abomination of a page okay?
So we're gonna take off this
disgusting picture
Okay, take this off
Mm-hmm okay, and the next what we're gonna do is we're gonna learn about the YouTube
player embedded
Player JavaScript, okay, and then we read the documentation and see how we use it
Okay see what this looks like
Cool all right so now we have a YouTube player and what I'm gonna do is I'm gonna learn about how to
You know use the JavaScript to play stop pause and also I'll I'll make it a little bit more pretty alright first
we're just gonna make this a
Little bit prettier change that to 720 change this to 480 I see what it looks like
Okay, it's a little bit bigger cool. I want to change it to this pretty video
Because I like to you know I like to have fun while I code you know, but now I'm not a coder though
I'm very nice. Okay. Oh
wow
Okay, and oh, I don't like the margin
I think I'm just gonna increase the margin a little bit, so let's go to CSS I mean
There's no more headshot. Let's put this to the player and
then
margin topic
Let's chain it to maybe 50 see if that lets see that looks good
Okay that looks a little bit better
All right, so this is it before the aesthetic
Just so that I can code better, so I have more motivation to code now and then
What I'm gonna. Do now is I'm gonna look at this API
I'm gonna figure out a way to send these information to my server so that I can sync it between all the people on
All the people on the website watching the player
So after looking at the API, I realize that they don't have everything I need it's because sometimes
I kind of just want to send the request to play or to stop to my server before they actually play but the
YouTube player doesn't allow me to do that so I'm going to have to make a
Controller that is an extra layer above the YouTube player so that I could send a request to my server
Without it having to actually play so I do that so that I can actually
Synchronize both of the users while they watch it so the first thing of what I that is
I stripped out all the YouTube player stuff
And how I did that was
I read I read the documentation
And I learned that you can take out the controls by control equals zero disable keyboard shortcuts modest branding and stuff like that
But now we got to add our own stuff, so what we're gonna
Do is we're gonna add some buttons, so I you just go let's see bootstrap
button good if you con and
Then I just copy this
So right under the player. I'm gonna make a new div called the player controls or something
All right
Got a button here
Maybe add another button so I want to add a play button
Play and I want to add the pause button
Okay, that's what looks like
All right cool, so we got these two buttons now and now we need a timeline
Yeah
We need a timeline because we need the user we need to allow the user to skip around and also to know where they are
So yeah, let's just add that real quick
I swear
And then that's it now we got our bar, and it seems to work pretty well
Mm-hmm yeah, let's see if we started yeah, and then it starts the video, and yeah, it seems pretty accurate to me
All right
Unfortunately, we're out of time because it's already been almost 10 minutes
So next steps the next steps would be to connect the back end and the front end so what I'm gonna
Do is I'm gonna connect them using WebSockets to communicate with each other if you don't know what WebSockets are don't worry about it
I'll explain on the next video, so yeah
So if you liked this video don't forget to give it a like and I will comment
For the first 30 minutes of releasing this video so yeah comment and don't forget to press the bell button for the notification
So that next time you could comment, and I'll reply
Alright, so I hope you enjoyed this and Pisa