Solid Hello Worlds
tutorial

This app got ignited by two motivators:

• community feedback saying ‘More community led tutorials, example apps’ are needed

and

• my need to learn the perspective of an app developer myself.

I noticed on the Solid forum a discussion with the title ‘Yet another Solid Hello World’ and thought to myself: this is the opportunity! I decided to collect the introductory Solid apps myself, at first in Excel. Then create a Solid App for it.

My application is meant only for listing intro, archetype like projects which use Solid. It is not meant to replace the list of available apps we have on solidproject.org but to complement that list. Also, the solidproject.org app list undergoes a Solid team process and needs to comply with some criteria to be kept there. This only means there is a dedicated group of people responsible for that list.

I was thinking we can try a different approach around the list of intro Solid applications: solutions from the community by the community. The code is obviously open source. Regarding the data, everyone is welcome to contribute and manage the list of example applications. We are going to have the list as up to date as we hold ourselves accountable to, as long as such a list is still useful. Meanwhile, we can continue to improve the solutions we have, automate more but not compromise on our values.

Continue reading if you want to know how the development of the app progressed.

Creating the model was the easiest task for me, while the frontend and the new libs were a learning curve (or a walk down memory lane). So I set out to create an MVP (minimal viable product) on top of which I added further features.

The goal of Subproject 1 was to have an interface where a user can browse the existing Solid projects.

The goal of Subproject 2 was to have an additional interface where a user can edit and add Solid projects.

For the entire project I wanted, from the get-go, to have as little writing code as possible. Using RDF for both the data and the interface was the perfect way to go. Also worth mentioning, the structure of the project is not of a typical app because I wanted to keep the end result pages separated code-wise as much as possible. Hence the result code of goal 1 is under facetedSearch and the result of goal 2 is under editPage.

Subproject 1 - search interface

Solid Hello Worlds Knowledge Graph

I started focusing on the data: the Solid Hello Worlds Knowledge Graph which contains the Solid Hello Worlds thesaurus and a dedicated ontology for further describing the thesaurus.

Solid Hello Worlds thesaurus

The thesaurus is SKOS based which means all introductory Solid applications are initially a SKOS concept. I used other SKOS properties to describe further the Solid apps. It was quite clear that I need SKOS concepts not just for the Solid apps but also for the code stack, used Semantic Web and Solid libraries and I also decided to highlight the technical use case one can learn from each app. The Solid Hello Worlds thesaurus looks like in Figure 1. The introductory Solid apps are all under the Examples SKOS concept scheme and all tech stack concepts are under Full code stack SKOS concept scheme.

Figure 1: Solid Hello Worlds SKOS thesaurus

One could theoretically use SKOS properties to model the fact that ‘Ramen’ uses ‘Vuejs’ and ‘Soukai-Solid’ but it would not be correct nor accurate enough for our use case. I wanted the end user to be able to distinguish the code stack Solid or Semantic Web related libs. This means we needed further support for the SKOS model, a dedicated ontology.

Solid Hello Worlds ontology

First I thought about the additional information I want to have available for each Solid application. In the thesaurus, I have different concepts for different categories of information: examples, code stack, use cases. Each such category is translated into an ontology Class.

At this point, one should consider reusing available ontologies that contain classes fitting one's use case. I made a conscious decision to create a new dedicated one. So the classes ended up being the ones listed in Figure 2.

Figure 2: Solid Hello Worlds ontology

Then we have further attributes such as: linkToRepo, linkToDemo, linkToTutorial and author which are only for the Example Application class. And lastly, we have relations. I designed all relations as symmetric and they link between classes. An example is the relation between Example Application and Solid Library as shown in Figure 3.

Figure 3: Symmetric relations between the Example Application and Solid Library classes

The end result can be seen on the Solid Hello Worlds GitHub repo.

The next step was to apply the ontology to the thesaurus and start filling in the information and the links. Since I started with 5 initial introductory Solid apps, I did all the modeling manually and the initial Solid Hello Worlds thesaurus can be seen complete on the Solid Hello Worlds GitHub repo.

Solid Hello World search interface

Ok, we have the data and the model now we need to display it.

Solid Hello World faceted search form

We created a form (UI defined in RDF) based on Jeff Zucker’s library. From some demo applications where the lib was used I decided I really like the accordion element and it would work perfectly for my frontend too. The data is filled in the form with the help of SPARQL queries. By default, Jeff’s library falls back to the rdflib lib SPARQL engine, I chose to replace it with the comunica lib for SPARQL. I make use of 2 SPARQL queries: one that fills the accordions (the menu on the left) and one for the results, the example Solid applications.

Check out how the form turned out on the GitHub repo.

Solid Hello World faceted search interface

The last step was to put everything together and give it a design. The main page is the index.html where we load the form with this line (best to use an absolute path):

Modified

2022-07-20

Published

2022-07-20

Language

English

Document Status

Published