Bolt-On your Web App to Neo4j Who are we? Michael Opitz Christian - - PowerPoint PPT Presentation

▶
bolt on your web app to neo4j who are we
SMART_READER_LITE
LIVE PREVIEW

Bolt-On your Web App to Neo4j Who are we? Michael Opitz Christian - - PowerPoint PPT Presentation

Dec 30, 2023 287 likes •538 views

Bolt-On your Web App to Neo4j Who are we? Michael Opitz Christian Ranz Codastic A FULL STACK WEB SOFTWARE AND SERVICES APPLICATION DEVELOPMENT FOR KNOWLEDGE GRAPHS. FREELANCER NETWORK. Services: Services: data & ontology

slide-1
SLIDE 1

Bolt-On your Web App to Neo4j

slide-2
SLIDE 2

Who are we?

SOFTWARE AND SERVICES FOR KNOWLEDGE GRAPHS. A FULL STACK WEB APPLICATION DEVELOPMENT FREELANCER NETWORK. Services:

  • Web applications and websites in React,

Gatsby, …

  • APIs with node.js, rest, GraphQL

Services:

  • data & ontology modeling
  • reasoning services
  • visual data analytics

Products:

  • GraphScale
  • SemSpect

Codastic

Christian Ranz Michael Opitz

slide-3
SLIDE 3

What is SemSpect? A Brief Demo

slide-4
SLIDE 4

Graph Apps – Reach More People

slide-5
SLIDE 5

SemSpect Architecture

Java REST API Neo4j GraphScale

HTTP Rest

SemSpect Client

Backend (GraphScale):

  • Restlet JAVA API
  • Embedded Neo4j

Client:

  • Ext JS components
  • Redux like Flux architecture
  • Modular HTTP API layer
slide-6
SLIDE 6

Neo4j Desktop

How to Transform SemSpect into a Graph App?

Graph

Neo4j Graph App

SemSpect Client Graph Java REST API Neo4j GraphScale

HTTP Rest

?

slide-7
SLIDE 7

Neo4j Desktop

SemSpect as Neo4j Graph App

Graph

Neo4j Graph App

SemSpect Client

Bolt Protocol

exchangeable request layer SemSpect Graph Plugin Graph SemSpect Graph Plugin

slide-8
SLIDE 8

Neo4j Desktop

Graph SemSpect Graph Plugin Graph SemSpect Graph Plugin

Exchangeable API Request Layer

Neo4j Graph App

SemSpect Client

Bolt Protocol

Our exchangeable request layer is able to perform Rest like api requests over the Bolt protocol. exchangeable request layer

slide-9
SLIDE 9

Exchangeable API Request Layer

API layer

tree.remove('someTreeId')

Request layer

request.delete('/tree/:id') Graph or Web App

HTTP Layer

fetch('http://…', {method: 'DELETE'})

Bolt Layer

session.run('CALL deleteTree(…)')

JAVA Restlet API Neo4j Graph Plugin

Web App Graph App

Client business logic

HTTP Rest Bolt Protocol

Details

slide-10
SLIDE 10

Neo4j Desktop

SemSpect Graph Plugin

Graph SemSpect Graph Plugin

Neo4j Graph App

SemSpect Client Graph SemSpect Graph Plugin

Bolt Protocol

Graph Plugin answering Rest like api requests over the Bolt protocol. exchangeable request layer

slide-11
SLIDE 11

JAVA Restlet API Neo4j Graph Plugin

SemSpect Graph Plugin

Backend Business Logic

Pojo deleteTree(String)

Rest Layer

void handle(Request,Response)

Bolt Layer

Record deleteTree(String)

Cypher/ Java-Api

Neo4j Embedded (looks the same in both scenarios)

slide-12
SLIDE 12

Bolt Layer- Challenges

JSON-Objects (data):

  • Can’t send back json objects directly through bolt

○ Solution: Use Jackson to map pojos to maps

  • Neo4j supports only certain types

○ Solution: Use Jackson’s custom serializer

HTTP Status Codes:

  • Can’t signal http status codes/statusText through Exceptions

○ Solution: Add statusCode/statusText Field to Record

Persisting User Data

  • We don’t want to modify the database

○ Solution: Write to File System

slide-13
SLIDE 13

Challenges / Conclusion

  • Persisting user data

○ Electron local storage and file system

  • Missing or inconsistent documentation
  • deprecation policy
slide-14
SLIDE 14

Questions?

slide-15
SLIDE 15

Thank you!

slide-16
SLIDE 16

Hunger Games Questions for “Bolt-On Your Web App to Neo4j”

1. What is SemSpect? a. A database performance monitoring application b. A graph exploration and visualization tool c. A data import tool 2. Graph Apps interact with Neo4j Desktop by which standardized client-server protocol? a. HTTP b. Bolt Protocol c. RPC (Remote Procedure Call) 3. What are the 3 fields in a record to mimic a http response over bolt? a. statusCode / statusText / data b. contentType / statusText / data c. statusCode / contentType / body

Answer here: r.neo4j.com/hunger-games

slide-17
SLIDE 17

Links

  • Neo4j Procedures: https://neo4j.com/docs/java-reference/current/extending-neo4j/
  • Neo4j Datatypes: https://neo4j.com/docs/java-reference/current/extending-neo4j/procedures-and-functions/values-and-types/
  • Jackson: https://github.com/FasterXML/jackson
  • Semspect: http://semspect.de/
  • Semspect Panama Demo: http://panama.semspect.de/
  • Bitbucket Snippet of the Bold request layer: https://bitbucket.org/snippets/derivo/Argdq7
  • Bitbucket Snippet of an example Backend: https://bitbucket.org/snippets/derivo/8nMr98
  • Neo4j Developer Graph Apps Gallery: https://install.graphapp.io/
slide-18
SLIDE 18

How does a request look like?

slide-19
SLIDE 19

How does a request look like?

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return

function async remove(id) { const result = await api.tree.remove(id); dispatcher.dispatch( createAction( 'ACTION_TREE_REMOVED', { result } ) ); }

Dispatch an action with the result

slide-20
SLIDE 20

How does a request look like?

function remove(id) { return request.remove( '/tree/:id', { id } ); }

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

slide-21
SLIDE 21

How does a request look like?

function mapPathToProcedure( method, procedures, path, params ) { // … return procedures[method][path]; } const procedures = { POST: { '/tree': { name: 'saveTree', params: { label: mapString, description: mapString, state: a => a }, responseDataMapper: data => ({ data }) } } }, GET: { /* … */ }, PUT: { /* … */ }, DELETE: { /* … */ } }

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

slide-22
SLIDE 22

How does a request look like?

session.run( `CALL ${procedureName}`, requestParams ).then(results => { return getResponseFromNeo4jResults( results, responseDataMapper ); })

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

slide-23
SLIDE 23

How does a request look like?

function getResponseFromNeo4jResults( result ) { const record = result.records[0]; return { data: record.get('data'), status: record.get('status'), statusText: record.get('statusText'), }; }

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

slide-24
SLIDE 24

How does a request look like?

Remove a tree by Id

Bolt request layer

call the request layer with a route Map route to procedure and map parameters Run the procedure on the bolt session Find the response in the results and return Dispatch an action with the result

function async remove(id) { const result = await api.tree.remove(id); dispatcher.dispatch( createAction( 'ACTION_TREE_REMOVED', { result } ) ); }

Back