- Hi, everybody.
Thank you very much for joining me today.
I'm Lju Lazarevic if you've
not come across me before.
And today, I thought I'd
have a go at building
a browser guide in Neo4j.
So, if you've not come
across browser guide before,
don't worry, I'm gonna
quickly talk you through
what they are.
But basically, it's those
you've come across them.
Most likely you've had a
go, the movie graph example,
or you've looked at some
tutorials that we have,
They're really great way of being able
to go through code snippets,
you get a nice description,
it's a nice experience to navigate through
and navigate through some
graph examples and queries.
And the really cool thing is,
you can build them as well.
So, I personally I've never built one.
So, I thought this would
be a great opportunity
to have got building one.
I'm going to do that live.
So, we can all we can all
together, go and build one.
And then hopefully, we're
gonna have some nice skills
to think about what we could
do in the future with them.
So, what we're gonna do
today, so super basic,
it's gonna be like a
hello roll type thing,
but it's gonna give us
an opportunity to do it.
And again, I've never done it before.
So, I'm going to be going
through documentation,
and we're gonna do it together.
If you've got any questions, I'm going
to be keeping an eye on the chat.
So, put your questions in the chat
and we'll answer those as we go through.
So, let's the go off, let's cover
what we're going to do today.
So, the plan so hopefully,
you all have a like
the latest copy of Neon4j desktop.
If you don't, please get that updated.
So, if you've already got Neon4j desktop,
you can go to you go into the desktop
and I'll show you very
quickly what you do that
to upgrade it.
If you don't already have Neon4j desktop,
then if you go to
neon4j.com/desktop you'll be able
to download a copy, get that
installed, and then carry on.
So, I'm gonna just talk
through, there's a couple
of changes in desktop, I'm just
going to talk through those.
So, that you know we're
going and I'm gonna show you
what features we're going to
be using for the browser guide.
We're then gonna have a quick
overview of browser guide.
So, I'm going to bring up the
movie graph example, we can
talk about the anatomy of it.
And then we're gonna dive straight in
and have a go at building one.
So I have got zero requirements,
I've not thought about what
this is going to look like.
This is very much going
to be live on the fly.
Let's have a look at what
we're going to build.
I've armed myself with a
couple of tools ahead of time.
So, I've got the browser guide.
This is the developer guide
on how to build a browser.
So, this is what we're going
to be going through together
to build our example browse guides.
I may put in some kind
of a diagram, data model
for what I'm building
or just a bit of fun.
So, just have a go including an image.
So, I've got arrows up and running.
For those of you who have
not come across this before,
it's a really great diagramming tool.
If you search Neon4j
arrows or aids, actually,
I'll copy and paste the link in the chat.
So you've got this, so arrows if you want
to have a go buildings and diagrams.
I've put that in the chat,
let me put as well link to the
browser guide in the chat.
And it's been a while
since I've done some HTML
so this is going to be nothing
sort of groundbreaking,
but I've found a copy of
a cheat sheets as well.
If it comes to becomes
necessary, I've got that handy,
but for those of you
who sees that's useful,
you've got a link there as well.
Okay, so let's have a quick look at
the changes needed to Jake desktop.
So, for those of you who
haven't yet who've got
an older version, so I'm
using 1.2.7 of Neon4j browser.
So, if you haven't got the latest version,
what you can do is if you
go here to the icon, you can
see, looks like a bell
so Notification Center.
So, if you click on there, it should say
if you've got an older
version to update it,
I'm with the latest version here,
so there's not going to be updates.
If you're not getting
this or getting some kind
of message saying that you're offline,
you may need to make sure
that desktop is online
and not in offline mode.
So to do that, if we go to
the coc and click on coc
and then what you'll notice
here, you've got an option
that says offline mode.
So, just make sure that's unticked.
And then, that will
connect to the internet
and check for updates and allow me
to download things and so forth.
Excellent, so let's have a
quick look at a few changes.
So, I've set up a new project
called create a browser guide,
because that's what we're
going to be doing today.
And what some of you may have noticed,
if you've not yet gone
on to the new version
of Neon4j desktop, is, you'll
notice that previously,
at the top, we had all of
the apps, the graph apps
that you could click and
run so things like browser,
which would be default and
installed for all new projects,
but also you may have added
new ones such as Halen,
which is the graph monitoring app,
or maybe Bloom or a few others.
So, what happens now is
they're kind of linked
into the database.
There's two ways that you
can start a graph up now.
So, I'm going to show you
what is so what I need to do
is to create a new database.
So, I am going to click on database,
I'm going to do one local machine.
I'm going to be old school, and use 3515.
Give it password.
I'm gonna create that database.
So, it doesn't matter if you
want to use 4.0, that's fine.
I'm just using 3515 because I'm lazy.
So, together lets go with 4.0 later.
So, I've created my new database.
And what you've seen now is a
little grayed out button here.
So, if I stop the database instance.
And what I'll do as well is
we'll go a little bit slow as well.
So, if you've got any questions
or you're having any challenges
with getting desktop up
running, I'm keeping an eye
on the chat, so just let me know.
And I'll give you a hand with that.
Okay, so when the database
is up and running,
what you'll see in the
new version is you have
a little down arrow.
So, the default graph app
that's going to fire up
is Neon4j browser.
So, if you just click on Open,
so bearing on previously,
you have the tiles on top.
So now, apps are launched
from this Open button.
So, just pressing the Open button is going
to start up browser by default.
But if you wanted to run
some of the other apps
that you've got installed,
So say, for example, Bloom
or something like that,
you'll see this little down arrow,
so we just click on the down arrow.
And this will list all
of the other graph apps
that you've got installed on the machine.
So you can see here we've
got all the other ones,
there as well.
So that's one way of
launching your graph apps.
There's another way of
launching the graph apps.
And if you go to the graph
where the graph applications
live, so this is where
you'd go if you're going
to install a new graph app.
So, if we click here, then
what you will see, you see
these little, sort of like balls
with arrows coming out of them.
So, these will also launch your graph app.
So again, let me find Neon4j browser.
The same idea if I press
this, again, that's going
to launch browser.
So you got two ways, you can either do it
from the Open button on the
database in your project,
or you can go from the graph apps,
the main graph apps menu
and launch them from there.
Okay, so I'm gonna close that for now.
So, that's it lets run
these slight changes
so how you launch your graph apps.
That's one of the changes in desktop.
The other one which we're
going to be taking advantage
of today is you'll notice,
we have this new section
here called files.
And what you can do with
files is you can add anything.
So, you can add to it and the
main one that you're going
to be adding here will be a
browser guide most likely.
So, what we're going to do is we're going
to take advantage of that feature.
So, we're gonna build a
browser guide, and we're gonna
iterate through it as we
keep adding bits to it.
But, what we can do is
we can add it there.
And it'll locally host that browser guide.
So, we can then run that
browser guide with our project.
And that's really cool.
And this is why I was
quite keen to get everybody
to get the latest version of
desktop because it's going
to make this browser guide development
experience a lot easier.
Okay, so that's a very brief tour of some
of the changes in desktop
and I'll post at the end, my colleague,
Adam Curry has put together a blog post,
and he talks about the
changes, what's looks new
in the near future desktop.
So, that goes through some
of the other things as well,
that has changed, so
absolutely well worth reading
and having a look at.
And I'll post a link to that,
at the end, don't worry.
As we're going through
the exercises, I'll get
that link out, so, you
can have a look at that
and have a read at your leisure.
Brilliant, so, it looks like
I've not seen any messages.
I am hoping everybody's managed
to get themselves sorted.
So, let's have a quick
look at a browser guide.
So, I'm going to start up browser.
So, let that get fired up.
So, that's running on database
that I've just created.
And let's have a look at my
favorite browser guide which is
the movie graph example.
So, I'm sure many of you are familiar.
If I click on, thank you very much.
So, Alex has posted
the link to the updates
in browser guides, so you've
got that in the chat there.
If you want to have a look at that.
Okay, so I'm gonna hit the code button.
And we've got the movie
graph example, so here is
an example of browser guides.
So the movie graph, and
what you'll notice is,
we use this syntax, so when
we want to play a guide,
we just call on play.
And there's a couple of ways
we can run a browser guide.
So, we've even got the built in guides.
So, you've got the movie graph there.
And there's a number of guides as well
which are not built in
locally to the machine
but they're on our server.
And again, they'll have
these quick short names
that we can use to run them.
And what you can do as
well, as you can also run,
the browser guides from a web address.
So, if you've got a web
address where you've created
the browser guides to
browser guides, or HTML files
basically so either
you will have something
you've built straight to HTML,
which is what we're going
to do today.
Or maybe you've built in
something like AsciiDoc,
where you then render it into HTML,
you've got a number of ways,
but it picks up and reads.
It's gonna pick up and read HTML files,
which is why I've got the
HTML cheat sheet up there.
So, that's what they do,
you can run them from...
So, if you've got a web server running
on your local machine, which
is what the new feature
in desktop does, you can
run them as localhost.
You can run them from a website.
Just something to bear in
mind is that you will need
to whitelist the website if you're hosting
it somewhere that's not localhost.
So, that's just something
to be aware of if you go off
and build some of these in the future.
You'll need to whitelist them.
And that's covered in the
developer guide document
that we're going to be referring to.
So effectively these are HTML pages.
These are web pages of sorts.
And what you'll notice you know
how we've got these arrows,
and we can go back and forth.
So, these are like slides.
So, what we've got as well is
we can split out for each page
to describe how they are.
So, we'll look at some
of the notation there
and documentation and we'll have a play
at building these code guides.
And you can see for those of
you who have not come across
these before, these are really great
because you can put a lot of information
about a project that
you're working through
or an example that you're working through.
So, you've got a lovely description here.
You can put code blocks in
and you can save people's time
from having to type stuff
up because anything can
this catch box, we can
click on, and it sends
that information up into the crew window.
We can click that and run
that, which is really powerful.
And, we talked about navigating,
you can also include images
and other media as well.
So, these are really flexible way
of producing very powerful
content for users,
fewer users if they're
working with the graph.
So, these are really,
really cool things to do.
So, this is our browser guide.
So, I think now is a good time
to have a go at building one.
So, these are exciting,
so, we're gonna do,
we're gonna start off
with just having a go
at a Hello Baldwin.
So, he's not gonna do
anything, he's not gonna any
code blocks or anything like that.
What I want to do is to just
be able to create something
and get it up and running in desktop.
And then after that, what we'll do,
we'll start iterating
through and having a go
at making it more complete.
So, let's do this.
So, I'm Just going to close this.
And I'm gonna close
the browser completely.
So, let's have a quick
look at the documentation.
So, this is the link.
So, you'll find the link that
has been posted in the chats.
If you're struggling to
get it or you've come late,
let me know, repost the link again.
So, here we are the tutorial.
And something to mention as well.
If you go to neo4j.com/developer,
you'll find lots of developer
guides and various things
from working with the
drivers to visualization,
data modeling, and so forth.
And this is just one of the
guides that is included in that.
So, this is the building
custom browser guide.
So, let's have a look.
So, we've got a bit of an introduction
about what's going on.
We've talked about the plane movie graph.
And yeah, we talked about
yes, so you move compass
with online guides, okay,
so let's have a quick look.
So, we've talked a little
babble there, as we talked
that there HTML web pages, and we're going
to be using the slide tags
to indicate new slides.
So, let's have a go just
writing a Hello World.
One and let's see what happens.
So, I've never done this before.
So, this is this is very exciting.
I've got notepad up and ready.
So, before we think about
some requirements, we might do
we can have a chat as well.
Let's just do a Hello World.
And let's see what happens,
so, nothing too exciting.
Let's do this, HTML, let's do any body tag
no, I don't know, let's find out.
(keyboard clacking)
Okay, so I'm going to save this.
I'm going to call this set
very exciting Hello World.
Let me put this into a folder.
Actually, I have a folder
here, let's just copy
the path for this and just, okay.
Something to bear in mind.
So, we're going to be pulling this into,
we're going to be using the
file function in desktop.
So, I'm not going to give
it an extension of HTML,
which is what you normally do if you were
remotely accessing the guide.
So, I'm going to be using desktop.
So, anything that's slightly
different extension.
And extension name is
Neo4j browser guide so.
(keyboard clacking)
Neon4j browser guide, gonna save that.
And then what I'm going
to do is I'm now going
to add this to desktop.
So, if I go back to desktop,
we've got this add file.
So, you can either click and drag the file
or you can convention use Explorer.
So, I'm going to just copy the link here.
I'm going to be conventional,
I'm just gonna get from path.
That would be notepad being helpful.
Let me just quickly change the extension.
(keyboard clacking)
So, select this.
Okay, brilliant, so what happens?
So, you can see now we've added it.
And it's given me an option now to open it
with Neo4j browser.
So let's do that, let's see what happens.
Hey, there we go, so
it's not very exciting.
But, you can see we've
got a Hello World guide.
So we've got Hello World going up there,
we've got it live.
And you can see the path that is calling.
So, it's hosting it now,
desktop's hosting it now.
And we've got the path and
you can see it's storing it
in this is funny project things that's
the unique project name that's been given
to my desktop project I've got there.
And, it's got the browser guide in there.
Okay, so far, so good.
So, let's try and be a
little bit more exciting.
Let's try adding another slide in this
so we gonna give it another page.
So, we're going to use
that slide symbology.
So, I'm going to be really exciting here.
I'm gonna have two slides.
One slide is gonna have the word hello.
The next slide is gonna have
the word well done it, brilliant.
So, let's give that a go.
So, I'm going to close that.
What I'm going to do as
well now is what's happened
in the background is it's not opening it
from this folder here browser guides,
what it's done and what desktop
has done is taken a copy
of that file and pasted it elsewhere.
So, for us to find out that
location, I'm gonna click
on the three dots here.
And it gives me option
reveal in File Explorer.
So if I do that, it brings up the folder
and you can see here it's
been put in this folder here
and here's our browse guide.
So, what I'm going to do is
I'm gonna edit it from here,
and again, I'm going to
use notepad if it gives me
the option to open it with notepad.
Oh, no, it's not.
Okay, so, I'm just gonna
quickly open up notepad again.
I'm just going to, actually
I think I can just,
Yep, I can just click and drag it across.
And I'm now going to be editing
the copy, the browse guide
that's being copied over by desktop.
So, not the original, this one here.
Just to make a bit easier.
Right, okay, so if we have
a look at our handy guides.
Our handy guide said we use
slide text to split them across.
So, let's have a go with that.
So, I've got my hello and let's do that.
World, excellent, so
let's go back to desktop
and see what happens.
So, we're gonna open it again.
In fact, what I'm gonna do is
I'm gonna keep desktop rolling
and then we can just refresh the guides.
Okay, not quite as expected.
So, let's have a quick look
as to what's going on here.
So, maybe what we need to do
is put two slicer pellets.
That's how we go what
happens with two spots.
Live life dangerously.
Aha, okay.
So, if we just do this and maybe we need
to wrap it properly.
Let's have a look what happens.
There we go, that's more like
it, brilliant, okay, success.
So, we've figured out now how we're going
to do different slides.
So, what we need to do, we
need to open up that slide tag.
So, we have a slide and enclose it
with a slash slide afterwards.
So, that's gonna frame a
slide which makes sense,
it makes it pretty.
So, let's have a go adding an image.
So, I am going to do something in arrows.
So, let's have a go that I'm going
to create a folder in here, I think.
No, let's keep it local
in here, I'm guessing,
I have a feeling it's
pretty neat to be local.
So, we'll have a go this
we can always then put
the images on GitHub
or something like that
and connect them remotely.
But, let's just have a go
at what's going on here.
I'm gonna bring up arrows,
let's draw a quick diagram.
So let's do.
Okay and what we can do,
I'm going to dial in SVG.
Actually, I'm gonna do it as
an image, let me take snipper.
Snipping tool have so just
quickly copy and paste this
into my good friend paint
and then I'll just save it as an image.
Save as.
Okay, so we've saved
that so let's have a go
at adding that into our browser guides.
So let's have a go at another slide.
(keyboard clacking)
This is when you discover
it's been a long time
since you wrote some HTML.
I mean get it wrong way round,
so let's see what happens.
Not quite okay, that's probably me getting
the context, context wrong.
Yeah, let's give that a go.
I'll proceed for the source
alright let's have a look.
Get there eventually.
I should have put this in the first page.
Now that's going to be my improvement.
Now let's shuffle this.
Shuffle this towards
the front so don't have
to keep clicking through.
Let's come this put its path, front.
Let's have a quick peek what our
cheat sheet suggests as well.
What's exciting at least
I think I might cheat
and swipe a picture of the internet's
and then we can figure
out my Moto G paths later.
So let's take this let's take
a picture we like this site
of let's go for flesh get picture of a cat
or something, let's
take this picture, okay.
So, let's copy image address.
I'll do nicely
And put in here.
Okay, let's run this again.
Hey, brilliant, you've got an image in.
So that's good, not perhaps
the image we wanted.
We've got an image and
I'll have a play later
or we'll have a play around why
that wasn't working locally,
maybe that needs to be hosted.
We'll have to think about that as to why
that's not cooperating,
but I can always cheat
and stick up on GitHub
and we can use images or wants to use
Okay, so we've got an
image up, so that's great.
And I want to pick a bit more
interesting image than that.
So let's just pick something a bit better.
All right let's go for cat image
that was not what I was expecting.
picturing cat coz why not?
Could be image dress excellent
so if we run this again
brilliant got we got a picture
and that's good right so
we're gonna need to start
though work similar processes
as well for including video
and that kind of thing.
So, I think we good, we now
have to include some media
so, great start let's have a look
at putting in a code block.
Such be fun, so let's see
what the documentation
says about that.
So, okay, so we figured
out how to display things.
So, we enclosed each
slide into slide tags.
So, that's good, we've
got that one sorted.
And we can increase payments
for users to execute
for importing or querying data
by putting them inside the pre tax.
All right, okay, let's
have a go at that then.
So, let's do forgot our cat picture.
So, maybe on the next slide, we're going
to have a code block that's
gonna add a cat node.
That seems reasonable.
So, let's do that, so we're
gonna use the pre tax.
So, let's go for add a cat node.
Okay, so let's do this.
I'm gonna do free.
We're gonna call our cat
Bobby, why not?
We call our cat, Bobby.
Are we going to return our cat
node once we've created it?
Okay, free talk.
And I'm gonna be adventurous.
I once I've created my cat tag
and spotted a blooper there,
and maybe we should
say Bobby has an owner.
So, let's say a bit more to this.
Owns and let's go for person.
No, honestly it's me, that
so I've inherited a cat.
Although, the question would
be does the cat own the owner
of the cat or question mark?
Okay, cool.
So, we've got a note of type person,
I've got the name of Lou,
and they have an owns
relationship to a node
with label cap and I've
got property name, Bobby.
And I we're gonna return it
off once we've created it,
we're going to return it
all and on the next slide.
I want to then find out
the schemer of my graph.
I would find out what the models
obviously what looks like.
So, let's call that so let's
do three, four db.schema.
Right let's see what happens.
So, we've got that let's run this again.
Excellent, we got a picture of a cat.
We're gonna add cat night okay,
Nope, that's just giving us the
code block rather than okay,
so, we know how to show a code
block but we can't run it.
That's okay, that's fine.
We're gonna have liquid
documentation tells us
how to do that.
So, we can search for
users or important queries,
but pre tax.
I guess not quite doing
what we were expecting.
Okay, we'll have to look into that.
Not sure why that's not
working as expected.
So quickly was going on
through anytime we play
with this what happens if
I put stuff inside tag.
Scare less, what does this do?
Not what we were expecting?
Okay, so we know that we
pull it all together as fun.
Okay, so it needs to be
wrapped in those three tags
and we just need to figure out why
it's not doing what we're expecting.
Okay, that's cool.
Okay, cool, so it's not quite doing
we were hoping to get that
nice little code block that
we can execute. which hasn't happened
So lets have a quick
look at the docs again.
Michael to the rescue.
So look, try to use class
equals codable, aha okay.
So, we need to set attribute
in the tag, so let's do that.
So, right let's see.
Let's see first solves that one.
Hey, okay, right, so
what we needed for then
to make it the hash box, so
we can send that code up,
is we need that property here.
So, class equals code runnable.
And that makes it work.
So, I assume we need to
do that for each one.
So, let's just quickly update
that as well for the schema.
I'm just gonna copy paste that in.
Excellent, right so, if we run this again
gonna cry all night.
Excellent, and if we want
to now also, cool schema.
There we go.
We got him in it obviously
just for those of you thinking,
hey, hang on these are both the same.
You may notice subtle
difference here where we've got
if we look up here,
we've got label of cat.
And we can see the property there.
We've got property of
name there for Bobby,
and a property name for Lou here.
Whereas here, this is showing us overall,
the fact that we've got
two local types in play.
We've got personnel, we've
got cat, but we don't have any
of the property information in there.
Okay, all right so got a
bit, we've got code blocking,
we've got an imaging,
we can run stuff, I think
we've pretty much got all
of the building block components.
So, to build a guy, it's
obviously hasn't got much
in the way of finesse.
But, we are showing the principles here
of how we can move between the slides,
how we can add some media in there.
How we can run a code block in
that we can write some comments.
So, let's see if there's
something else we'll go
or whether we think about
something a bit more
grand to put together.
Okay, so we've done,
we've had a look at that.
So, we've got this
example we use the colon
thing when we did, I should
have called the schema.
So, it's not used to columns.
But, you can see the
example for it's been there.
Hosting so we're talking a
little bit about hosting.
So, you can either host that
using a server, local machine,
that new version of nifty
desktop is handling that for us.
And that's what we're using now.
So, you just need to make sure you use
the extension name of
dotneon4jbrows-browser-guide.
You can do that if you're
hosting it remotely,
you will need to do the settings
in your config to allow that.
Okay cool, well I guess if
you've got any questions,
or you want me to try
something in the browser guide,
I think we'll leave with
that for those, pretty cool.
I've never done that before.
It's a very basic
principle its so powerful
so I had to put some media
in I'm I need to go away
and remind myself of some
HTML stuff with regards
to how to prettify to
maybe put in some columns
and things but the
basic principles of that
and I know how to put in
an executable query block
so any questions or requests
I guess put them in the chat.
What can try form filled
oh that sounds dangerous.
Go on and let's give it a go.
I've got my handy cheat sheet here, sir
oh goodness, have a look.
Oh my goodness.
Surfing last time I did an HTML
form must have been in 2013.
So, correct.
All right, let's have a go.
I am going to add a catenate.
And I'm going to call the
schema of the next page.
Right, go form so.
Lets put in, I'm just gonna do text books.
So, guess the really cool
thing is could you do
a query based on form?
So, could you use the form to generate
we can put your query?
Oh, that might be fun.
Probably something I'd need
to do some visual first before
I had to go to right now, but that's,
that'd be interesting.
Right, input type.
Because man gives us a nice thing.
That gives, brings the
text gives us the text box.
Lets see and...
I am trying to think you just do all that,
you don't need to terminate that.
So that should give the textbook.
So, they don't want me to do that.
But let's do textbooks, why not?
So, I've also shuffled over
the two queries here, the tubes
of clickable queries
over onto the same page.
Oh, no box let's see what happened.
What did I do wrong?
Let's have a look.
Nope.
See what the box say.
For the form maybe if
you're a science maybe
it's the world's shortest textbooks.
And, oh no okay it's not a slot, okay.
Am I missing, yes you're right.
Well spotted there I I failed
to actually put it in the slides.
Good spot freeze, good spot.
So, hey there we go we have
we have a textbox as well.
Excellent, okay, so we can do forms I
let's see what happens.
The button in there as well, why not?
Ooh, I was exciting.
Wasn't expecting that okay, cool.
So say ooh wow, moment.
Ooh, I think I've been given some hints
what we can do with the form
so let's have a go at fat.
Okay, so apparently what you can do with
the forms is you can use it in
a cipher block if you wanted
to put in some labels or things like that.
And it has been suggested we have a look
at the play query templates.
So, let's have a look at that.
Ooh, let me just check if I've got that,
got the right name there.
Play query template, its interesting.
Summaries and it's not missing a hyphen.
Okay cool, so quick look at this one then
and then that we'll call it a day.
Okay, this is cool.
So I finished is going
to give us an example
of what we can do with the forms.
Aha, okay.
So, we've got a bunch of labels here.
So, presumably for rename
this to be the cat,
you can generate that.
Okay, so this is very cool.
So, for those of you who are
looking to do the dynamic,
as in dynamic forms for your users
via using the input boxes,
this should be something cool to do.
So, let's have a go at building
that with our cat example.
And we're going to be
able to pick what the name
of the cat's going to be.
Let's have a go about
that, that'll be fun.
Let's pick something relatively
straightforward to go up.
So, let's bring back
previous browser guides.
So, what we're gonna do is, we're gonna
add an option in here
so that we can change
the name of the cat.
So, let's see how we get on with this.
Let's go back with our thing.
So, we're gonna get rid
of this last slides.
I am going to copy conveniently
copy paste the code
that Mike has provided and
have to act accordingly.
So, we need to change add
something in here as well.
Okay, we're gonna do our input as well.
Get, all right let's see what happens.
I'm, I don't know you guys I'm really keen
to what happens this is quite cool.
So, if I pay him this is gonna change.
No, okay that's fine.
Let's see what's going on.
Let's have a look at what I'm doing wrong.
I should presumably I need to tell it.
It's changing that.
Ah okay, yep, yep, yep, I see
what I'm doing wrong here.
When the changes coz not seeing no label
either way we're changing the
cat's name but we will change
that in a moment.
So, that's gonna be Bobby
Yes, right this is slightly wrong,
but I should've make sure some those in
and then we'll go back and correct it.
Oh, excellent, all right, brilliant.
So, let's just gonna slightly correct it
coz we're not changing the label,
we're changing the name of the cat.
Let's just quickly correct
that and also I need
to give wrap some quotes
around it as well.
But this is very cool function to have.
Nice feature, so we're not
changing the node label.
We're changing the cat names
gonna call this cat name.
And give it a sensible
name, so we're not confused.
Name, we need to wrap this in quotes.
So, let's have a think how
we're going to do that.
Mine is going to be Bobby coz that's what
we're going to be changing.
And probably going to want
to do something like this.
I think if we do maybe it's been a while.
Well let's see, that fixes it.
Not quite, but I know
okay, so we can probably
she's gonna figure out how we get those.
questions in and then we are laughing.
Oh no, at least if we know how
to change the cat's name so
we just got to figure
out how to do the coats
and then I will leave it there.
I think I don't know
about you guys, I've found
this very interesting.
I've gonna go away and have a think
of a nice guide I can put
together based on this.
So this get...
Actually it's outside the blocks.
I think I can just say,
can just do this console
and it will work.
I just realized because we're not.
Because it's not inside the block is it
so you don't need to escape
the character I just realized.
Was trying to be too clever.
There we go, oh, pop now
would not be legal code,
but that's okay, there we go.
All right.
Hey, excellent, so we've got
Bobby so let's be a little bit.
I'm gonna slightly rewrite this.
So what we can do, we
can have a dynamic query.
So let's say I'm gonna have lots of cats.
I'm going to be the cat lady.
So I'm gonna slightly change this query so
that there's only one of me
but we can add lots of cats.
So let's do this for completeness.
I'm just gonna change that query slightly.
And we're going to do...
So, only one of me so if I don't exist,
then create me for do exist then just,
to match and carry on.
So, its me and then we're
going to just in case going
to again assume the cat's
name is gonna make it unique.
So let's do that, so with
the verge, see, actually,
I'm just gonna place the script so
merge, see cats.
And we're going to use
the cat form up there.
So, all looks good to me, so
that's gonna be consistent.
I used singles on that
actually use singles here.
I am going to add, I'm
gonna change my next query.
So, rather than returning everything here,
I'm going to do it in the second query.
So I'm gonna get rid
of the core DB schema,
and I'm gonna add the query that's gonna
bring everything back.
So, I'm going to be really lazy.
I'm just gonna return everything so much
and turn star back to return
and that's gonna match,
open those in the database
and return them back.
So, okay right, let's do this.
This is our final iteration.
Okay, so this should already exist.
Did you already create this so it won't.
Yeah, no records or changes.
I'm just gonna pin this
so that I can easily
keep referring to it.
So, let's do Sammy.
Let's have a cat called Sammy.
And let's over again, if you
wanna suggest some cats names,
it's all good.
Is it possible to run a guide from GitHub?
Yes, you can, you can.
So what you can do is you can
create the guide as an HTML,
you'll probably need to
whitelist your GitHub address
but then you could do colon
play and then the path
to guides here you can
do that from from GitHub.
That's fine.
Let's pick one more name Freddy.
Let's do it cat called Freddy.
And then let's just return all it.
I am now a cat woman with all my cats.
I don't actually own cats.
I've gotten to do Cardinal mistake.
I forgot to add a known relationship
between the two of them.
So what I'm showing you
I'm not gonna run it
but you get the idea.
So, worth what I forgot
to do here is I forgotten
to do merge P whoopsie Daisy.
See, that's why I forgot to add.
So, I'm not gonna run that again.
But you get the idea.
So, I've done this than
that it'll show the results.
So, just my file that right in
the query, but there you go.
So we should have had the
merge, should have had
the merge branch there, be a good idea.
So, what we've done,
we've had a go at, oh,
I've been corrected.
You can't run it from GitHub.
Okay, maybe might have changed.
I'll have a go that I'd be good fun
to have another go doing this.
And maybe things a bit more elaborate
with the browser guide.
And we can have a catch
up with what I've learned
and picked up along the way.
And certainly few guys have
picked up some cool stuff.
And we can have another go
maybe in a week or weeks,
week after time so I've got that.
But okay that's pretty cool.
I think It felt really fun
and I learnt some really cool stuff.
I hope you guys found it useful.
We'll hang around for a couple of minutes.
So if you've got any more questions,
pop them up in the stream chat.
And otherwise, let's do it again.
Let's Let's come up with some
really exciting browser guides
coz this is fun, this is very exciting.
