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