Enter Linked Data

Now that you have set up your app, let's start playing around! Specifically, let's play with Linked Data.

LINCD allows you to craft your own Linked Data graph in local memory on the fly, in any shape or form you want.

In typical graph terminology, a graph consists of nodes and edges. For this example of managing connections between humans, lets create two nodes for two people and draw a 'friendship' connection (an edge) from one to the other.

Creating Nodes

In Linked Data, nodes come in two forms: a NamedNode and a Literal

A NamedNode is identified with a URL whilst a Literal is just a string, which can have a datatype or a language tag.

Example of a NamedNode that represents a person

<http://rene.life/me>

Example of a Literal with the value 1985 and datatype xsd:year

"1985"^^xsd:year

The notation used here is called Turtle, a syntax to express Linked Data.

Assignment - create a NamedNode.

Open frontend/src/pages/Home.tsx, change the page so that it just renders <h1>Hello Linked Data world</h1>.

To create a new NamedNode you can use NamedNode.create(), this creates the new node and gives that node a temporary URI.

So next, in the Home function, before the return statement, add:

let person1 = NamedNode.create();
console.log(person1.uri);

So Home.tsx is now:

export default function Home() {
  let person1 = NamedNode.create();
  console.log(person1.uri);
  return <h1>Hello Linked Data world</h1>;
}

Importing models from LINCD

Your editor will probably indicate that it cannot find NamedNode.

To save yourself time here (and in many steps moving forward), check if your editor can resolve this itself.

Move your cursor to NamedNode and open the quick fix options of your editor.

for VS Code: click the lightbulb or press Control + . / Command + .

There will be an option that says add imports.

If you can't find this, add the following import in the top of Home.tsx:

import {NamedNode} from 'lincd/lib/models';

Check the results in the browser

If you have the yarn start command running, your app should have been rebuilt, and your browser is already refreshed.

Open the console in the dev tools of your browser and check that you're seeing lin://tmp/[some_number] in your console.

These are temporary URI's generated by LINCD. When you save a node to permanent storage it will receive a proper URL.

Note that 'URI' is the more general form of 'URL'. This means that nodes can in theory also have URI's like ssh:// or ftp:// . In practice though it's almost always a http(s) URL.

Creating edges

In typical graph terminology two nodes are connected by an 'edge'.

In Linked Data, the type of edge is represented as a NamedNode itself.

For example, take:

<http://rene.life/me> <http://xmlns.com/foaf/0.1/hasFriend> <http://carlen.my/id>

This states that a node with the URL "http://rene.life/me" is connected to a node with the URL "http://carlen.my/id" with an edge identified called "hasFriend". This edge is itself a NamedNode with the full URL "http://xmlns.com/foaf/0.1/hasFriend"

Assignment

On the first lines of Home.tsx, right before the declaration of the functional component 'Home', create a new variable called 'hasFriend'. Set the value to a new named node. We will use this node as the edge of connections between people:

let hasFriend = NamedNode.create();

export default function Home() {
  //...
}

Within the Home functional component, but before the return statement, create two named nodes to represent 2 people:

let person1 = NamedNode.create();
let person2 = NamedNode.create();

Add one more line to connect the first person with the other person:

person1.set(hasFriend, person2);

Congrats! You have now created the first edge between 2 nodes in your graph.

Reading the graph

Now to get all the friends of a person you can use:

let friends = person1.getAll(hasFriend);

The result will be a set of Nodes, which in this case should just have 1 node inside it.

Assignment

Log the URI's of the second persons you've created and log the result of person1.getAll(hasFriend) to see if person 2 is indeed the friend of person1.

console.log(person2.uri);
console.log(person1.getAll(hasFriend));
console.log(person1.getAll(hasFriend).toString());

Final code

Congrats! You've just taken your first baby steps in the world of Linked Data.

In the next step we'll start using this graph to create an interface.

Your final code for frontend/src/pages/Home.tsx could look something like this:

import {NamedNode} from 'lincd/lib/models';

//the property we will use to connect persons is itself also a NamedNode!
let hasFriend = NamedNode.create();

export default function Home() {
  //create 2 nodes for 2 different persons
  let person1 = NamedNode.create();
  let person2 = NamedNode.create();

  //creating out first connections between nodes
  person1.set(hasFriend, person2);

  //get all the values of 'hasFriend' connections and check that it matches with person2
  console.log(person1.getAll(hasFriend));
  console.log(person1.getAll(hasFriend).toString());
  console.log(person2.uri);

  return <h1>Hello Linked Data world</h1>;
}