Making your Solid Apps interoperable with ShapeRepo.com

Solid allows users to store their data in their own, personal online datastore (POD) and choose any app they desire to see and manipulate their data. As Solid app developers, we want to build apps that let our users achieve this dynamic, but one thing gets in our way: data interoperability.

If my chat app and your chat app structure their data differently, then they can’t work together — they are said to be “not interoperable.” Interoperability is key to breaking down data silos and allowing users to choose whatever app they want to access their data. But, developers need a way to know how to structure their data to make their apps interoperable. That’s where ShapeRepo.com comes in.

ShapeRepo.com is a repository of “data shapes,” or validators for a specific data type. These shapes serve as a guide for developers, allowing them to build apps around common data-structures.

Building an Interoperable Chat App

So, let’s say you’re building a new chat application for Solid. How should you structure your data? What terms should you use in your triple predicates? And how can you be sure that some data follows that shape? Let’s walk through it:

I’ve posted the code for the entire application in this github repo. It’s a react application that will take in the location of a chat and render all of its messages.

We don’t need to worry about most of this code, as it’s not the focus of this tutorial. If you’d like to learn more about React, you can go to this tutorial, and if you’d like to learn how to use solid-auth-client, you can go here.

When it comes to interoperability, we’ll be dealing with two files:

• src/fetchUtils/getChatMessages.js: A function that takes in a URL for a chat, and returns an array of its messages.
• src/fetchUtils/isChatValid.js: A function that takes in a Turtle string of the Chat’s data, then uses shapes to determine if it’s a chat.

Let’s get started with the build!

Step 1: Find your Schema

The first task of any Solid project should be finding the schemas that you’ll use for your data. ShapeRepo includes a search bar to help you track down the shape that you want to use.

If you can’t find a shape that matches your project, scroll down to the bottom of this article and contact me. We’ll add it!

Step 2: Understanding your Schema

Now that we’ve found our chat shape at https://shaperepo.com/shapes?id=https%3A%2F%2Fshaperepo.com%2Fschemas%2Fchat, let’s check out the information available.

At the top, you can see the Schema’s name, “chat,” as well as it’s main URL, “https://shaperepo.com/schemas/chat.”

Below that are some tables. Each of these tables shows a different shape. There’s the ChatShape, the ChatMessageShape, and the ChatParticipationShape. All of these shapes validate different kinds of nodes, but are all a part of the same schema.

Each table contains a predicate column with a link to learn more about that predicate, a required column to show that a field is required or not, a cardinality column to show how many of a specific predicate is allowed, and finally a value column to show accepted values.

Step 3: Fetching Data

Now that we know the shape we’re using, let’s start building getChatMessages. We’ll use solid-auth-client to fetch a message:

Here we use solid-auth-client to fetch a chat document as turtle. Let’s assume the “chatUrl” is “https://jackson.solid.community/public/demochat/index.ttl#this.” This function would log:

Step 4: Validating that Data is a Chat

Now that we have the data, we need to validate it, so let’s start off by calling our isChatValid function from our getChatMessages function:

But, before we build isChatValid, we need to install a few things:

npm install shex n3@0.10.0

• The shex library contains useful methods for validating shapes.
• The n3 library will help us format our Turlte data into a format the Shex parser likes. Note: For the moment, you must install an older version of n3 (version 0.10.0) because the shex library has not yet been updated for newer ones.

Now that everything’s installed, let’s write our function:

This looks long, but it can be broken down into two parts:

In the first part, we parse the Turtle string and put it into an N3 store. Note: if you don’t like manually creating an N3 store, shex.Loader.load is able to automatically fetch your document and create one for you like in the example at the bottom of this section. However, if you load your document this way, you won’t be able to load private documents, because shex loader does not have solid-auth-client integration.

In the second part, we load the shex schema and validate our data against it.

Step 5: Extracting Data

Now that we know that our data is valid, we can use our favorite RDF manipulation tool to extract it. I’ll be using clownface, but you can use any other library you desire.

This long file is also simple to break down. In the first section, we parse our turtle string into a format the clownface can recognize.

Next, we use clownface to pull out the messages as well as their authors and content. Notice that we need to define a namedNode when working with RDF predicates. You can copy the URL of these named nodes on the ShapeRepo page by clicking the “copy” button next to each predicate.

Once we’ve defined the predicates, we traverse the graph and return the message.

Creating a New Schema for ShapeRepo

ShapeRepo contains a good number of Schemas, but there’s no way it encompasses every subject. If you are working on a Solid project that doesn’t have a shape listed on ShapeRepo, reach out to me, and I’ll put it on the site.

There are multiple ways you can reach out to me:

• Send an email to shaperepo@o.team
• Join the gitter chat
• Contact me on twitter @otherJackson