Node.js App with Neo4j

[00:00:00]
>> Let's get into some coding with Neo4J. So we're gonna write a really quick app again with node js, the, with the bare bones front end that's going to talk to a node server that's going to query Neo4j. So the first thing I want you to do is I want you to pop over to your terminal here.

[00:00:18]
I'm going to get out of here, I,'m going to make a new directory with Neo4j sample. Remember that there's that db samples repo, there's a link in the course notes for you to pop on over there. Neo4j sample and here we're gonna say npm and Init -y and we're gonna say npm install express 4.17.1 and neo4j- driver at 4.1.2.

[00:01:01]
That'll take into second to install. We got all those installed, make a directory [COUGH] We'll make a directory called static And here we're gonna type static/index.html and server.js. And we'll open this in Visual Studio code. Okay, we'll make that full screen here. Let's go ahead and make our index HTML here.

[00:01:40]
So we put html: 5, and, hit Tab that's Emmet, rather expand this out to a full device. We'll call the title, Neo4j Sample. And then in here we're gonna put two inputs. What our app is gonna do is it's gonna take two people and it's gonna tell us the shortest path between these two people of how they're connected in movies.

[00:02:10]
Okay, so we're gonna have input type equals text, then we'll have this be place holder equals Person 1 and id equals person 1. We'll copy that line here and make this person 2 then we'll have an id of Button btn. So a button with the id of button that will be search.

[00:02:55]
And then we'll do our pre code thing here again pre code, and this will have an id of code. Okay, so that's all the html that we need right there. Two inputs, a button, and a pre formatted code block. Underneath that, we're going to put a script tag.

[00:03:18]
And in here we're gonna have get our const btn equals document dot get element by id btn. And we'll do this four times here. This one will be code. This one will be person 1, person 1 and person 2 and person 2, okay? We're gonna add an event listener on the button.

[00:03:53]
So btn.addEventListener. And on click. People run, this async function. So first thing I'm gonna say is code.inner = loading. Inner texts that is equals loading. And then we'll say const res = a wait.fetch. And we're gonna search for. Rather I'm gonna hit await fetch rather And we're gonna go hit the, get URL and question mark.

[00:04:48]
Let's just do this with the template string actually. So I'm going to do back ticks here slash get I'm going to say question mark person 1 equals person.value, right? We have to encode your eyes well encode UI component so that it can fit into a URL. I'm gonna say person 1.value.

[00:05:19]
And person 2 equals same thing here in code UI component. Person 2.value underneath that will say const json = await res.json. And lastly code.InnerText = new line + JSON.stringify(json), null, 4. So this is just going to go get out to our API that we're about to write. It's going to go fetch that data.

[00:06:03]
It's going to then put that into a JSON object, then we can use JSON stringify to put that into a nicely formatted response that we can just look at. All right, let's go open our server file now. const express = require (express). const neo4j = require neo4j driver.

[00:06:34]
const connectionString Again we normally feed this in through some sort of key management system. But today we just gonna say bolt: //. Bolt is the name of the protocol that neo4j uses instead of Http, this one is called bolt. Local host and, the port that that listens on is 7687.

[00:07:01]
You can configure that but by default that's the one that it uses. Const driver = neo4j.driver and you have to give it that connectionString. Okay, async function and Init and then will immediately call that a Init function underneath here. And let's set this to be indent using spaces 2, Okay const session = driver.session.

[00:07:47]
This is how you kind of acquire a new session with the driver. I'm too far into this. But one first is const app = express() like that. So now we have an app. Here we're gonna say app.get(/'get'), async (req, res) Here's we're going to acquire a new session.

[00:08:16]
So, again, Neo4j is going to manage a pool of connections for you. This is how you get a session to interact with Neo4j. So I'm gonna say const session = driver.session. Const result = await session await session.run. And then here, this is where we're gonna give it our query that we wanna send where the cipher that we want to send.

[00:08:56]
So let's do it this way. We'll put backticks here. And then I want to just put this in here so it's nicely formatted. The nice thing about Neo4j is it doesn't care about whitespace. So we're actually going to go use that same query that we were using before to match people how far away are they from Kevin Bacon but we're gonna genericized it a little bit.

[00:09:19]
Is genericized a word because it is now. MATCH path. Coarse. Sounds like jazzercise. Sometimes I entertain myself. Okay shortest path And here when I say, First person is going to be first colon person ,name. And we have the same problem here that we had with SQL that we need to be careful of what text we feed into here.

[00:09:55]
So cipher injection is a real thing here as well. So we're going to say dollar sign person. One and then we'll provide that in as a parameterized query. Okay, then we're gonna put a dash here and we're going to put our star and then a dash here and we don't want the angle bracket, Second Person, And then here, we don't want that Second Person name :$Person 2, Okay.

[00:10:41]
Then here we're gonna say UNWIND nodes (path) as node. I'm gonna say RETURN coalesce(node.name, node.title) As whatever you want to call it and the return all we'll just call it text here, okay? So that's going to be our query. Now we have to give it the parameters that it needs.

[00:11:12]
So for person 1, we're going to give it req.quer.person1, and person 2 will be req.query.person2. Again, I just want to really underscore this fact again. Do not directly just put person one in here because they could put cipher querying language in there and you would be in a world of hurt.

[00:11:36]
So just let the Neo4j driver do all that stuff for you, the Neo4j drivers made by them with help from the community, and so they know very well how to prevent these kind of injection attacks. Okay, so now we get we'll get a result back results will be a query result you can see that here.

[00:11:59]
So what I'm gonna do underneath this session.run is I'm gonna say res.json. Status ok. And path:results.records.map. And then we're just going to do a quick map here to do say record return. Record.get text. So what are we doing here? This actually gives me back record object and it has like functions and things like that.

[00:12:43]
What we want to do is we just want to get the text out of it. So that's why we're going to just go through I'm going to call record dot get text on each one of these records. Then path here will just be an array of texts that we got back from Neo4j.

[00:12:55]
So we have to massage the data a little bit. We can't just return it raw. And then here we'll just call end. Then down here at the bottom, you'll say await session.close(). Cuz you have to tell the sessions, all right, I'm done, you can reuse this connection again.

[00:13:14]
And then we'll say app, or const PORT = 3000, app.use(express.static) ./static and app.listen process or yeah, we'll just say port. And then console.log.listening on, http:// local host : + PORT. All right, that should be everything that we need to get our, this results I messed this up. So you can see here on line 13 in line 26.

[00:14:07]
I call this results in this results, I'm gonna put an S there. So these are called the same thing on line 26 on line 13. Okay, now I'm gonna save that. Now I'm gonna come to my terminal and I'm gonna say node server.js listening on port 3000. I'm going to open that.

[00:14:27]
So yeah, person 1 and person 2 up here. So let's put Charlize Theron and put Ken Reeves I don't know I'm just making stuff up now. So we got an error here. Let's see what what happened. Expected parameter person 1. So here in our index HTML, I forgot this equal signs here.

[00:15:05]
So line 25. Get person 1 equals that and person two equals that. Okay? Just got to make sure you get this URL right. I knew that because I was looking here and it says I was expecting a parameter person 1 so I looked over here and server and you can see here is like that should be passing that in.

[00:15:30]
So it means that that was definitely coming in undefined. So I should be able to just refresh this page. And send it and there we go. So Charlize Theron and canneries were both the devil's advocate so that's less interesting. So let's say Charlize Theron and Tom Hanks. Well, they're both nothing to do that's again, less interesting.

[00:15:58]
How about Keanu Reeves and Tom Hanks? There you go,so canneries was in the replacements Jessica Thompson was in Cloud Atlas and then Tom Hanks is also in Cloud Atlas with Jessica Thompson.