All right.
So we're back if you watch that optional kind of boring video.
We're now moving on to an exciting and non-optional video which is all about the project we're going
to make.
So we're going to build a simple web app to start using node and my Eskew all together.
So what is this app.
Well it is called join us and it's a cult mailing or excuse me a startup mailing list application.
So it's you probably seen this before when there's a new company that's launched maybe you haven't but
if there's a new company that's launched they're not quite ready yet but they want to get their name
out there they want to start getting interested parties registered or collecting their information so
they can send updates or so they can invite them you know once the application is launched.
So that's what we're going to build basically a way of collecting people's emails and it looks like
this.
Now I'm not you know a great designer.
And anyway that's not the focus of this course.
Hopefully you think it looks ok enough.
But really what I just want to go over are the different features.
Now it's very feature rich.
The point is to make it simple but to show you how the we're connecting with my Q Well through Noad
and how this application kind of showcases both selecting information and inserting information.
So the first thing you'll see there is a photo here.
And we don't have to worry about copyright or licensing issues.
I actually took this photo as a bit of a brag I guess.
Sorry but back to the content here we've got.
Join us in big letters and then we've got into your e-mail to join.
And then a number here and this number changes so 518 is basically the count of all the users currently
in our database.
So when I made kind of this but what we call this the alpha version that I made screenshots of that
I'm I made before.
You know I have to make that up before I teach it.
So when I made this version I had 518 users in the in the waitlist in the database.
We are 100 percent not tickled.
Then the other thing is this.
Enter your email join now button which you enter an email.
It's going to take that e-mail address and insert it into our database.
So there's kind of two things we're doing right selecting.
We're going to count how many users are in the database.
We don't need all the information we don't need.
518 email addresses.
We just want to know how many.
And then we want to be able to insert something from a form when you click this button.
It's going to go send the data to our node server than the node server is going to send it over to the
My School database.
Wait to see if it worked or not.
And then it will do something you know.
We'll decide what it does.
Does it take you to a new page or is it just refresh the page does it show you a message that says you're
signed up.
Whatever does.
But the key really is about adding information to our database and getting information out.
OK so that's how it basically works.
Let me show it to you.
Here I am.
I've got.
Join us.
Let's create a new user here.
Let's call it.
How about Lou the cat at gmail dot com.
We click Join now.
And you can see takes us back which we can decide what to do if we want to change that will I'll show
you how.
But now it says we've got it 519 on our waitlist.
And you know I can refresh I can stop the server which will see you in a little bit.
This will be 519.
This isn't hard coded in.
This is coming straight from the database.
OK.
So that's it.
Now let's talk about how it works what's the workflow like when I go on my computer like I just did
and I refresh the page or I enter that address and I hit enter.
A request is sent to our node server which will see how it is set up in a little bit.
And the no js server has code that says oh OK this client is asking for our home page.
Well on the home page we're supposed to have a number here of the total number of users in our database.
So let's ask hello my ask you all database can you tell me how many users are in the database and hopefully
you're aware that would be a count.
So would do a select count start from users that will come back and it will say ideally 518 or whatever
it is a thousand users.
And then my server the code there takes that number and it plugs it in puts it right here and it sends
us the page sends it back and I see the page.
Same thing roughly the same thing happens when I enter my email and they click Join now I'm sending
my information my e-mail to the no server with a message basically saying I want to add this.
I'm signing up.
So then my server says Oh this time this person is trying to sign up.
They're not just asking for the home page they're trying to sign up.
OK.
My ask.
Well I'd like to insert this user within with this e-mail address then my ask.
Well we'll say that worked or oh we actually already have a user with that e-mail so we can do that
or something else maybe there's an error that will be sent back.
No jast figures out what to do.
Do I send an error message or do I send a congratulations success message.
Do I just take them back to the home page and refresh it.
That's you know the decisions that are made here.
So that's the basics.
But then the next thing is where do we start.
There's a lot of pieces here right.
We have to talk about no genius installing that we have to talk about how it communicates with my ass.
Q Well we have to talk about creating web apps and HDMI and CSSA and Javascript.
All of this stuff there's a lot of moving pieces.
So where do we start.
Well we're starting with this handy dandy green box will draw your attention to the right side of the
screen which tells you we're starting basically with the relationship between no genius and my s.
Q Well how do we talk from javascript to my ask you up.
So we're going to start with basic things like I want to select the current date from javascript or
I want to insert a single user into my s queue up so no web app.
This whole left side of the screen will be gone for the first part but then once we have this relationship
established we figured out how to insert a user we figured out how to select all users or select the
count.
Then we will then kind of expand into the web application and add in the logic for creating a web app.
So that's our game plan we're with this site.
So the very last thing to discuss is what our table will look like.
So for this web app very simple right all that we need to store for every user and we'll just call it
users we could call it you know emails or interested people or whatever weightlifters but we'll go with
users and all we need to store is their email address right.
That's the key thing and that's all they're entering.
But it's also would be really useful to store created ads.
So we have a time stamps for when that user was created so that we could do things like figure out when
most of our users signed up or what day that week most users are signing up or just count how many users
we've had.
You know this year compared to last year.
So it's really nice to have created that is very simple as well.
So those are the two fields we'll be working with the two columns and that's it.
Nice and simple.
And then the other thing to discuss is our game plan from here on out and our first goal.
We talked about how we're only working with this side of the table or of this diagram what we're going
to work up to is using Noj as to randomly generate an answered over 500 users into our database.
So I had five 518 users in there.
They all had unique emails.
I did not code those by hand.
I used a tool that generates some for me and then I'm going to take that and insert them into our database.
So basically shows you the power of using a language like node that we can very very quickly generate
data and not have to waste time getting 500 test users in there.
So that's the first goal we're working up towards.
In this section.