It's time for the next step-- querying data from the database
itself.
The good news is that I've done so much stuff in these videos
already this is actually going to be relatively easy.
There's almost nothing new to learn here.
It's just putting some of the pieces
we've seen previously together in a slightly different way.
I need to look at routing again, so I
need a new route in my server.
But instead of app.post, I want to use app.get.
And then I'm going to need to use the fetch function again.
Only this time, I'll go back and use the simpler version
of fetch for a simple get request, just
to get information from the server itself.
Finally, I need to find functionality in the database
system itself, any db that allows
me to query the database, to find something.
And in fact, there is a function called find.
I'm just going to use find to ask for everything
from the database.
But you can also use find with search terms and other kinds
of ways to ask for certain key aspects or parts
of the database itself.
Let's check in on where we are with the code.
Since the last episode, I also did my homework
and I added a text field here where
you could write your name or your mood
or some kind of keyword associated with that latitude
and longitude.
So when I hit Submit, both the latitude and longitude
and my current mood is sent and returned back to me.
So if I change this to kitten, I will also see now
that that comes back to me.
And I can go look in the database itself.
And I can see that these two entries
with two different moods have been put into the database.
I also made some small improvements
into the server, really minor things.
One is I just took the request body
and inserted that into the database itself.
Creating this additional object where
I'm duplicating some of the information
was kind of unnecessary, so this is much simpler now.
The request comes in.
I add the timestamp to that object.
I insert that into the database and send everything back
to the client.
Finally, I have a new web page, all.html.
So I'm going to demonstrate to you
how to query everything within the database and display it.
I could do it on this page, as well.
I could have a single page app.
I could hide DOM elements and load other ones.
There's so many different ways I could design this.
But I think a simple way for me to just now go
to slash all.html.
That HTML file is there in the public directory.
And at some point, of course, I probably
want to move my JavaScript into separate JavaScript files,
maybe have some CSS files.
But this is not really a video series how
about web design or proper web development.
I'm just looking at the pieces of the puzzle
and how to work with data and APIs in this context.
Ultimately, what I want to do is from the client,
I want to make a GET request to a route on the server
and have that route return all the data from the database.
And the way I do that is with fetch.
This is much simpler.
I don't need to set the method explicitly
to POST because the default is GET
and I could just give it that path.
And I could use a different path.
Like, I could set something-- a different route in the server.
I could set up something called, like,
slash all or all the data.
But I think I'm just going to use API.
The interesting thing is I can reuse the API route because I
used it previously as a POST.
So calling fetch with a GET to API
will be handled in a different function in the server itself.
I'm going to say fetch slash API and I'm
going to put this in an async function called getData.
And I'm going to say response equals await that.
Then I'm going to say data equals await response.json.
This is everything we've done before multiple times now.
And then console dot log data.
Then I want to execute that function.
Of course, if I go to the browser now and hit refresh,
it's going to say, hey, it doesn't find that,
because I haven't set up that route.
There's no such thing as a route called
API that handles a GET request.
I could go into the server and just
like there's app dot post slash API,
now I'm going to add an app dot get slash API.
And this is going to look exactly the same.
There is a callback function with a request and a response.
And this should be a lowercase t.
Just to test if this is working, I'm
going to say response dot JSON and then
I'm just going to put some arbitrary test 1, 2, 3.
I'm just going to send that data back.
So at least now I should see this message
logged in the client.
So I'm not-- I don't have nodemon running right now,
so I have to manually restart the server,
go back to the client, hit Refresh.
And there you go.
I immediately make that GET request
and I immediately see the response.
We're really close to being done with this feature now.
All I need to do is actually query the database
and set that stuff back, not some arbitrary test 1, 2, 3.
All of the information for how to do this
is in the NDB documentation under finding documents.
So there's a find function that lets
me find stuff in the database.
And there's all sorts of ways.
I could use find to find a lot of things,
find 1 to look for one thing.
There's all sorts of comparison operators I can use.
But ultimately, all I want to do is say find everything.
And so to do that I say database.find--
I would give it an object here which is
a way of modifying that search.
But I'm just going to give it empty object, because I
want to look for everything.
And then I have a callback.
That callback has two arguments, error, and the data itself.
And what I can actually do right here
is just say send that data.
Look at this.
I just want to call find, have the data come back,
and then pass the data to the client.
I could do more here, but this is all I need to do.
And I probably should do some error handling.
Like, I might say if error just say response dot end
and then return.
Like, get out of here.
Maybe I should console log the error.
Maybe I should send the error to the client.
But this should sort of like clean everything
up and just go away.
I don't think I made an error, though.
Hopefully I'm just going to send back
all the data in the database.
Let me rerun the server, go back to the client, hit Refresh.
And there we go.
Look, there is-- here is all the data, rainbow and kitten.
This is the stuff that I've entered into the database.
I can go back to the index.html page and I can say, you know,
cupcake and unicorn and enter these in.
And then I can go back and refresh this page.
And suddenly I now have four entries in the database
that I'm retrieving.
In a way I'm really done now with this particular feature,
because I'm mostly leaving it up to you to figure out
the design of the web page and how
you want to present that data.
But let me at least do something to get that started.
So I need to, before I leave you,
do something more than just console logging that data.
Let me actually attempt to display it here on the web page
itself.
I'm going to use some basic native JavaScripts
to make some DOM elements that I can place here
to get you started.
Looking in the code, this is the place
where I want to create those DOM elements.
I want to display everything that's here in the console.
But I want the user to be able to see it on the web page.
So to do that-- and I'm just going to use some data
JavaScript, which is not a thing I know very well,
and I'm probably make some mistakes here--
but I'm going to use a for loop.
I can use a for of loop as a way of iterating
through every element of an array.
So I'm going to say for item of data--
so each element of the array is now in this variable item.
And I can make a div.
So I'm going to make a div as like a holder.
Let's call it root equals document dot
create element div.
So this will be like the root, the div that's
going to hold all the pieces of data that's in item.
And then let me make another div called
a mood, which is also a div.
Document create element div.
Then what I want to do is say mood dot text content.
Now, some people do use inner HTML
and I'm guilty of doing this many times.
But you've got to really watch out,
because if I've got user entered stuff it can be a security
issue to use inner HTML because then code could be executed
and that sort of thing.
So I'm going to be safe and use text content
and say this is a string.
I'm going to use a string literal here saying
mood colon and then item dot mood,
so grab the data from the item variable.
Then let's make another div called geo for the geolocation.
I'm going to say geo text content
equals the item latitude comma the item longitude.
And then I'm going to just paste in the degree symbol.
It's not in my clipboard.
Hold on a second.
I've got the degree symbol in my clipboard.
So I can paste that in here.
Then let's make one last div, with--
I should check to see that this is going to work.
But let's make one last div with the date.
One last div with the date.
So I will say date equals document dot create and create
element div.
And the text content of the date will be the timestamp.
But let me say-- let me make the date string a variable
and say new date and pass in item, timestamp.
And then say dot to--
this is new date, not data--
and say this is to local string.
So this is basically taking that timestamp
which was just the number of milliseconds since January 1,
1970, converting it back into a nice string that gives
the date in my local time zone.
And then I can put a date string in there,
which is a little bit silly if that's
all I'm putting in there.
I could just say that the text content equals date string
directly.
Then I want to take the--
and let's actually-- this is a little bit silly,
but let me do this.
So basically I have these three divs all go inside root.
Mood-- so I can use the append function.
And append will actually take multiple elements as arguments
and append them all.
So they all went to append to root.
And then I probably should do this after just
to be sort of logical here.
And then once I've appended them all,
then I just want to say document dot body dot append root.
So maybe I'd want to be more thoughtful about how
I'm organizing my HTML page.
But this will give me a basic idea here.
Let me make a div for each one of these data points.
Let me put all those divs into a container called root,
fill in the text content, and then append them to the page,
and then just say a little native JavaScript DOM
manipulation prayer and move on to the page and hit refresh.
Wow.
I cannot believe that worked.
Of course, now you see the level of my talent in web design.
I've just got this very crude, raw list of stuff.
But now is an opportunity for you, the viewer,
to make something of this.
So in terms of moving on to the next step, before you
move on to the next step--
I mean, ultimately this project is done, in many ways.
I have implemented all the pieces.
I have client side JavaScript that's collecting some data.
That data is then passed off to the server, saved
to a database, and also the client I
can make a request to look at everything
that's in the database.
So this would work if I deployed this to some server somewhere
and let people use it.
I now have this app.
Now, there's no user accounts.
There's many things missing.
But the sort of story of this project is complete.
The things that I think you would
want to consider adding here are-- well,
maybe there's some other kind of interesting data
that you want to capture about yourself through this web
application.
One of the things that I want to do
is just add an image from a webcam.
I want to use the P5 library, which
is a creative coding JavaScript library that I
use in tons of videos on this channel that I have.
So I want to add that in, but maybe
you want to connect to another API,
get the weather information.
You might think about what kind of data.
But also, you might really want to think about how
you're presenting this back.
So maybe you want to think about the layout, add some CSS.
You might also want to think about the navigation overall.
I mean, right now I just have these two pages.
I have this page for entering data.
And that's just at the root index of HTML.
And then I just have to know to go to all.html
to get to this page.
But maybe there should be some overall navigation
between these two pages.
Maybe you want to change this into a single page web app
where everything is on one page.
So play around with this a little bit.
And just really as a bonus, I'm going
to come back and add one more feature.
So in the next video, I'm going to use the P5 library to get
an image from the webcam, have that image passed to the server
and saved in the database, as well.
How I do that-- well, I'll get into that in the next video.
And that'll be the sort of little button
to put on this to wrap it up in a nice bow
and complete this project.
[MUSIC PLAYING]