– Cool, so I’m gonnatalk to you a little bit about graph apps today, and how you can build one for yourself.

So like I said, my name is Adam Cowley, I’m a developer experience engineer.

And then on the DeveloperRelations team at Neo4j.

So I’m gonna talk you through the concept of what a graph app is, giving some examples of what graph apps are.

And then we’ll we’ll look at how you can can starttoday with building one.

And so for the people that don’t know and never heard the term graph app before, so anybody that’s downloaded Neo4j, chances are you’vedownloaded Neo4j desktop.

So Neo4j desktop is a user interface that allows developers tomanage multiple projects and graphs on the local computers, and also manage connectionsto remote databases.

And graph apps are anextension of Neo4j desktop and they allow you tointeract with the databases that the users configured through an API.

So you have the graph appspane on the left hand side to the four squares.

So this is where your graph apps live.

You can launch any graphapps that you have installed in Neo4j desktop byclicking the little icon next to the name of the app.

If you have an active graph, then there’s a drop down menu next to there, so you canchoose the graph app from there.

Or you can launch a graphapp using the command bar.

So there’s a little magnifying glass in the top right hand corner, or you can use the keyboard shortcut, so command and K on a Macor control and K on Windows.

And then that will open up the command bar and you can just typein the name of the app.

So under the hood, the graph apps aresingle page applications built with HTML and JavaScript, and optionally the front endframework of your choice.

And these graphics are servedthrough a chromium browser.

For a list of all ofthe available graph apps we have at the moment, you can go to install.


io, which is our graph appgallery, where you can go, you know, see a few ofthe examples of the apps and you can click to install those apps.

Few more information aboutwe will view the source code.

And you can also openup the graph app gallery as its own graph app inside Neo4j desktop as well from the latest version.

So once you’ve clicked install your graph apps will be listedon the on the left hand side in the graphics pane, andyou can install a graph app by using the install form at the bottom.

So you can either pastea link to a website or a remotely hosted graph app, you can post a link to an NPM repository and then it will installan auto update for you.

Or you can drag and dropa tar archive in there to install it.

So the kind of people thatare building graph apps, so Neo4j has built a setof functional graph apps for you to use in your day-to-day life, and converted some standalonetools into graph apps.

Anybody that’s used Neo4j so far is most likely using the Neo4j browser.

So Neo4j browser is a tool that allows you to run cypher queries against the database and visualize those results.

So you can either visualizethose in a force graph layout, or just in table format.

And it allows you to sortof explore the database, double click to expandand things like that.

If code is not your favorite thing, then we have Neo4j Bloom.

So what Neo4j Bloom allows you to do is to explore the graphwithout writing a line of code.

So as you type into thesearch bar at the top, Bloom will examine the database and then suggest appropriatelabels, relationship types and proxies and so you don’thave to write any code, you just need to knowabout the data model.

And this is also great forlarge scale visualizations and allows you to do moreadvanced customization than you would do insidethe Neo4j browser.

You can set different colorsand icons, sizes of the nodes, thickness of the relationshipsand things like that.

So the Neo4j Labs team are building educational graph apps as well.

So if you’re brand new tograph databases at the moment then the graph gallery is a great place to look for inspiration.

So the graph galleryfeatures a curated list of use cases, so there are over 100 in there at the moment, all categorized by use case and industry.

And each of the exampleshas a player’s browser guide button, and what that will do is that’ll allow you tostep through the example inside Neo4j browser andloading data as you go.

There’s the Graph Algorithms Playground, which was built by mycolleagues, Mark and Irfan.

And what this allows you to do is to explore the graph algorithms that we have inside theGraph Data Science Library, and allows you to test them and then to preview the effects that they have on your data set.

I won’t go into any more detail, but if you’re interestedin graph algorithms, then I head toNeo4j.

com/graph-algorithms-book right now.

And then for the next month, you can download this book for free.

So we’ve also built some useful graph apps for your day-to-day life.

So one of my favorite graph apps is Halin built by David Allen.

And what Halin does is itallows you to monitor Neo4j and then display some useful metrics, things like CPU usage, memory usage and charts.

And then helps you to diagnose the common configuration and performance problems and also allows you toadminister databases as well.

Neo4j consultants arealso building graph apps that make their lives easier, and then hopefully yours as well.

So one that I’ve used quite a lot when I’ve been working with clients is the Database Analyzerand the Query Log Analyzer.

So the database analyzer gives you a graphical representationof your data model along with some database statistics.

And the the Query Log Analyzergives you a friendly view of the query logs, so you can identify andfix slow running queries before you know they’re a problem.

But it’s not just us internally, we have partners and other companies that are building graph apps as well.

For example, we have GraphXRby the team at Kineviz.

So GraphXR is a tool that allowsyou to visualize graph data in a number of formats, including like a 3D force graph player, which is really nice andthen maps and charts as well.

So you can create some configuration and then share thosevisualization with other people inside your company.

And they’ve also donesome great visualizations, some great work aroundCOVID-19 visualization as well.

So I’d recommend going andcheck out that blog post and the visualization that they’ve done.

If you prefer to build your own UI, then the yWorks Neo4jExplorer is one for you.

So basically, it demonstratesthe capabilities of Y files.

So Y files is a JavaScriptvisualization library and it provides you with anumber of off-the-shelf features and visualization options.

And so we have community members that are building graph apps as well.

So for example, NeoMap is agreat tool for visualizations, spatial data on Neo4j.

So you can build up layers ofmarkers, polygons, heat maps and then display them on a map.

And this can make for some really interesting visualizations.

So you might be thinking, all right, I’m sold, how do I get started? So I’m here to help with that.

So I recently published adeveloper guide to graph apps.

So if you go toNeo4j.

com/developer/graph-app-development, then there should be acomprehensive guide there for you.

And there are also some example graph apps inside the graph appstarter kit on GitHub.

And so essentially, what you will do when you create your graphs apps, regardless of frameworkchoice, or anything else, you’ll go through this flow.

So what you’ll do is you’ll first go and enable developmentmode inside the FPGA.

And so the first step is toopen up the settings pane, using the he cog icon in the bottom left.

Tick the box to enable development mode and then configure the entrypoint and the root path of your project.

So for example, hereI’ve got something served over localhost 8080, and then the root path should correspond to the path of your project.

But if in doubt, you just put a slash and everything will be fine.

Once you’ve enabled development mode, then the development app willdisplay on the drop down menu next to the open button.

And again, you can also open this using the command bar usingcommand K or control and k or clicking the magnifying glass, type in development app, and then it’ll open for you.

So once you’ve donethat, you can then create your first projects.

So in this case, I’m justcreating a new directory and then creating anindex HTML file in there.

So you can use a framework likeReact or Angular will view.

But, you know, you canalways just use jQuery or just JavaScript if necessary.

So in this case, I’ve got a single file.

And then the idea aroundthis graph app is to show a count of the number ofnodes inside the database.

And so we just got a basicHTML page here with a little bit text inthere, and then we have a strong tag with the idea of count, which will add the count into.

So opening this up in the developer app will show you a screenlittle bit like this.

So right now you can see that we’ve got the Database Count, it saysthere are an unknown number of nodes inside the database.

When you’re in developmentmode, you get this black bar across the top, then you havesome useful buttons there.

So the button to click to reload the app, or there’s a buttonfor app developer tools and that opens things like theconsole and the network tab and things like that.

So the first step is to retrieve the context from the fJ.

So the context providesyou with a few things that may be useful for the app.

So for example, the user’s configuration, any projects that they’ve created, and even any activationkeys that they may have that relate to your projects.

And so, at any one time, there will be one single active graph.

So this is one you’ve clickedstart or still active on.

And in order to find this inside the code, what you would do is youwould then run a reduce and then a find on the projects key inside the context inorder to find the graph.

So each of the graphssupply some information about the graph’s configuration, so for example, the name andthe status you can see there.

There’s also a connection property and this will hold the connection details of how to connect to that graph.

So for example, we cantake the active connection and then go through the configuration and the protocols and info, in order to find the URL of the Neo4j database, that could be localhost, or it could be a remoteURL, and then the username and password you connect to.

So then you create a single instance of the Neo4j JavaScriptdriver using that URL.

And then by creating abasic authentication token with username and password.

And then you create sessionsthrough that driver, and then start to query the database.

So in this case, I’m justrunning a simple query to match all of the nodes andthen return a count of them and then returns the result.

So to hook that all intothis this basic app, I include in the Neo4j driver, so in this case from unpackage.


I use the Neo4j desktopAPI to get the context, and then when the context resolves, I run a reduce on theprojects, to then concatenate all into one big list and then use the find on that resultinglist or on that resulting array to find the database when thedatabase status is active, and then return that.

So then inside the nextsection of the promise, I have the actual database.

So then I pull out theURL, username and password and then use that to create a driver.

Then create a session, run, match and return count end to find a count of all thenodes inside the database.

And then once that is resolved, I then use document.

get-element by ID to get that strong tag andthen set HTML to be the count.

So the result looks alittle bit like this.

So we’ve got the databasecount there of, in this case, I had 36062 nodes in the database.

So that’s what you need todo to build the graph app.

The next stage is to deploy it.

So there are three ways thatyou can deploy a graph app.

So you can create a tgz file.

And so for example, usingNPM pack on your NPM project, you can publish the package to NPM and then people will be able to install that package for NPM.

Or you can host the graph app online.

So for example, Halin, that I mentioned earlier, is a graph app which is hosted online.

Or you can use the versionwhich is published on NPM.

And by the way, once you’ve done this contact us and we can put your graph app into the graph app gallery.

Cool, so the structure of the tar file should look something like this.

So you should have a package.

json file, and then a dist folder, which will include the index.

html file plus any other assetsthat your app requires.

So the package.

json file is essentially something youuse inside your NPM project.

So this holds informationabout the project itself.

But there are also afew little things inside that they’re important for Neo4j desktop.

So there’s a Neo4j desktop item, which allows you to definethe desktop API version.

And also allows you to definethings like permissions for using anything like that.

So next thing we have is similarto a progressive web app, a pwa, helps grab a manifest.


So this holds some basic metadatawhich is read by desktop, and then is used in thedisplay of the graph app inside a desktop.

So any values inside thisfirewall over anything defined in package.

json, so for example, if you have the Neo4j desktopkey, and then the API version, then the manifest willoverwrite the package (mumbles).

So a manifest.

json file maylook something like this.

So for example, we have the name, which relates over to thename of the graph app, the version number whichcomes from package.

json, which is useful.

And then we have, for example, the icon.

So we can create an array of icons, which then get used inside the UI.

So optionally, you can alsodefine plugin dependencies.

So for example, if your graphapp like most Neo4j projects relies on apk, then you can define that inside the plugin dependenciesinside the manifest.

So this is an array ofstrings which is essentially just an array of coordinatesto Maven Central plugins.

So you can also include activation keys, and so these are JET tokens.

So json enablement tokens, kind of similar to a jot token.

And you can use these essentially to unlock certain pieces offunctionality inside the app.

So you could use it to monetize the app, or maybe provide basicfeatures to send people.

So if you’ve installed Neo4j desktop, then you would have either knowingly or unknowingly used an activation key.

So one is required for Neo4j desktop, and if you are an Neo4jBloom user as well.

Then you would have had toadded in an activation key for Neo4j Bloom before you could use it.

So each activation key has a feature name, which relates to the the name of your app, and that corresponds tothe name in package.

json and then the future versionis a assembler value for the range of the app versionsthat the key is valid for.

And then so it holds certaininformation around the user, for example, their email and their name.

And then the other importantthing there is, is the scope.

So the scope provides a string, which is a set of featuresseparated by space.

And this would be what youwould then use to either enable or disable areas inside the UI.

So for example, this could be a pro user, and then that could open upmaybe a count of relationships as well as the count of nodes.

So once you’ve built your graph app, you can also provide deep links.

So you can use an Neo4j schemaand that’ll allow you to create links to other graphapps or from other websites to your graph app itself.

So to link your graph app, then you would use the name from package.

json after the Neo4j scheme.

You can provide a link to Neo4j browser.

So you would use Neo4j-browser for that.

And you can also add incommands and arguments as well.

So for example, in this case, we’re instructing Neo4j browser to open up the movies browser guide when it opens up.

You can open it up prefilledwith a cypher query as well.

So you use the command of edit, and then the arg is theactual query itself.

And you can chain these along as well.

So you can say arg equalsand then the first query, semi colon, ampersand R equalsand then the second query and then it will load them up for you.

You can provide a deep link into Bloom, so in this case, you’d useneo4j-bloom as the name.

And then you canoptionally as well provide a search parameter.

And then what this will do is it will take the URL encoded string, and then put that into thesearch bar inside Bloom, so you don’t have to type it in yourself.

And then you’ll get like a little view, like there is at the bottom of the screen.

So that’s pretty much allof the the info I’ve got on how to create an app.

So there are some examples andfeel free to reach out to me.

We have a graph apps categoryon the Neo4j community site.

So when you start to build your app, if you’re interested in building an app and don’t really know what you wanna do, maybe you wanna contributeto Martin’s project, then you know, maybeyou can come along here, we can work out a simpleway to get started.

And also let us know how the experience can be better for you.

Cool, yeah, so that is everything I have.

If anyone is interested insomething more in depth, if anyone would like to see any examples, feel free to reach outto me, I’m [email protected]

com or Adam Cowley on Twitter, or join the community andjoin the conversation.

Leave a Reply