Last active
July 8, 2020 08:55
-
-
Save FlorentCollin/912a09a8a1e1d99eeb85dc14058c93ed to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import auth from 'solid-auth-client'; | |
| import * as $rdf from 'rdflib'; | |
| const { fetch } = auth; | |
| // This simple file illustrate how we can use solid and rdflib to fetch data from a public resource on a Solid Pod | |
| // Links to learn more on how this works: | |
| // - https://github.com/solid/solid-auth-client | |
| // - https://linkeddata.github.io/rdflib.js/Documentation/webapp-intro.html | |
| // | |
| // Simple explanation: | |
| // | |
| // A Solid Pod is just a sort of directory that you can browse some of the files are private, some are public. | |
| // On a Solid Pod most of the files are store in a Turtle format (see https://www.w3.org/TR/turtle/ for more information) | |
| // A Turtle file contains a RDF graph (don't be afraid by the 'graph' notation it's quite simple actually) | |
| // RDF (Resource Description Framework) is an 'abstract' language for representing a whole bunch of different types of data. | |
| // An RDF graph can be store in different file format like Turtle, XML, Json-LD, etc, ... | |
| async function main() { | |
| // Fetch my profile on a Solid Pod using the fetch command provided by the 'solid-auth-client' package | |
| // It use async/await features of JavaScript (https://javascript.info/async-await can help to understand some basics concepts) | |
| // Fetch is under the hood making a http request to the solid pod and return this request. | |
| // We can access the 'text' of this request with the async function res.text() that is going to give us the Turtle file | |
| // of my profile on the Solid Pod. | |
| const profileURI = 'https://florentcollin.inrupt.net/profile/card#me' | |
| const myProfile = await fetch(profileURI).then(async res => await res.text()); | |
| // $rdf.sym create a Node that contains the URI of my profile (I don't really understand this for the moment) | |
| let me = $rdf.sym(profileURI); | |
| // A store - data structure to store graph data and perform queries against | |
| // This store will contain my profile just in a second. | |
| let store = $rdf.graph(); | |
| // The parse function convert my Turtle file (my profile) in a understandable data graph and put it inside the store | |
| $rdf.parse(myProfile, store, me.uri, 'text/turtle'); | |
| // It's important to understand what a Namespace is, you can read the introduction at http://openorg.ecs.soton.ac.uk/wiki/Linked_Data_Basics_for_Techies#Namespaces | |
| // But for a basic understanding a Namespace is just a collection of named properties that is used so every app can use the same properties | |
| // For example here, the FOAF (Friend of a Friend) namespace define a property 'name' that correspond to the name of a user. | |
| const FOAF = $rdf.Namespace('http://xmlns.com/foaf/0.1/'); | |
| // The store.any function search in the graph a property 'name' in a namespace 'FOAF' | |
| const name = store.any(me, FOAF('name')); | |
| // If you are not familiar with the '?' symbol this is a ternary operator it's basically an 'if else' statement that can be use in one line | |
| // name ? name.value : "Not defined" means if(name) { then return name.value } else { return "Not defined" } | |
| console.log(name ? name.value : "Not defined"); | |
| } | |
| main(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment