Descubriendo Solid Inrupt

Os presentamos otro proyecto Merlin. Pusimos en marcha este proyecto, donde conjugamos la incorporación de personas con poca experiencia, y a la vez aprender y compartir el conocimiento de los expertos que trabajan en ASPgems. De esta combinación, nacen ideas, donde aprendemos haciendo, y en este caso, hemos aprendido sobre Solid Inrupt.

 

solid logo

 

En ASPgems hablamos de Solid, y no nos referimos a los principios de desarrollo, sino a la Social Linked Data  diseñada por Tim Berners-Lee.

En la actualidad, sabemos que las grandes empresas guardan y manejan los datos de sus usuarios proporcionando a cambio el derecho de uso de su aplicación.

Solid es la nueva tecnología open source que intenta revolucionar la web actual y la manera en la que los usuarios guardan sus datos. Da a los usuarios la oportunidad de que decidan dónde guardan sus datos, ya sean fotos, comentarios, contactos, eventos o cualquier tipo de dato multimedia.

 

Conceptos que nos vamos a encontrar

Para entender cómo funciona hay que revisar algunos conceptos básicos sobre esta tecnología.

  • Dato vinculado: Son datos conectados entre ellos usando las tecnologías web RDF, RDFa, …
  • Web semántica: Conjunto de actividades desarrolladas en el seno del entorno World Wide Web, para crear tecnologías de publicación de datos que sean más fácilmente legibles para las aplicaciones informáticas. Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web.
  • Inrupt: Es la empresa que desarrolla Solid.
  • Solid POD: Es el espacio personal de cada usuario para el almacenamiento de datos en Solid.
  • RDF: Especificación de un modelo de datos orientado a metadatos.
  • FOAF: Es una ontología legible para las máquinas que describe a las personas, sus actividades y sus relaciones con otras personas y objetos.
  • WebID: Es el concepto de identidad encapsulado en una URI. Cada usuario tendrá un webID.
  • Turtle: Sintaxis de RDF que define sujeto, predicado y objeto en tres componentes (triples).

 

¿Cómo funciona Solid?

Principalmente, Solid funciona como un almacén privado permisionado accesible desde cualquier sitio. Esto significa que tú eres el propietario de todo aquello que guardes en el POD, pudiendo dar permisos a ciertas partes del POD a quien quieras.

De esta forma, se puede entender el POD como una página web privada. Del mismo modo, tus datos interoperan con todas tus aplicaciones, lo que significa que tienes tu API personal.

 

¿Cómo creo mi POD?

Existen proveedores comunes que te permiten alojar tu propio POD en sus servidores. No obstante, también puedes crear tu propio servidor para alojar uno o varios POD.

¿Cómo creo mi propio servidor?

Vamos a repasar paso a paso cómo crear un servidor Solid en un entorno Debian.

En primer lugar, necesitamos instalar NodeJS dentro del servidor. A través de NPM podremos instalar nuestro proveedor de POD:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –

sudo apt-get install -y nodejs build-essential

npm install -g solid-server

Seguidamente, necesitamos un certificado SSL ya que todo en Solid está cifrado:

deb http://ftp.debian.org/debian stretch-backports main

apt-get update

apt-get -t stretch-backports install certbot

Mas tarde, necesitamos pedir el certificado e instalarlo. Hay que tener en cuenta que para crear un servidor que aloje varios POD se necesita un certificado wildcard.

Después, configuramos el servidor Solid:

solid init

Finalmente, podremos arrancarlo y usarlo en nuestro dominio:

solid start

 

Ahora… ¿Creamos una aplicación?

Vamos a crear una aplicación Solid sencilla paso a paso. Para ello necesitaremos tener nuestro POD

Paso 1: configurar una página HTML básica

Crea un documento HTML vacío que contenga la aplicación:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Profile Viewer</title>
</head>
<body>
<h1>Profile viewer</h1>
</body>
</html>

Enciende tu servidor web local (por ejemplo “apache” o “nginx“) y ve a su página en el navegador. ¿Bonito no?

Paso 2: Añadir jQuery

Esta es solo una aplicación para el almuerzo, así que simplemente usaremos jQuery en lugar de uno de los marcos más avanzados.

Crea una carpeta llamada “scripts” y añade el archivo de jQuery dentro de la misma.

Paso 3: Agregar elementos de UI de estado de inicio de sesión

Agrega dos párrafos a la página HTML: uno que dice que el usuario está conectado, otro que dice que no:

<p id=”login”>
You are not logged in.
</p>
<p id=”logout”>
You are logged in as <span id=”user”></span>.
</p>

Usa jQuery para ocultar el mensaje de “inicio de sesión”, ya que todavía no tenemos ningún código de autenticación real.

Paso 4: Agregar el cliente de autenticación de Solid

La biblioteca solid-auth-client nos ayuda a autenticar al usuario y recuperar archivos de su POD de forma segura. Necesitas los siguientes componentes:

Coloca la biblioteca antes de la secuencia de comandos principal, ya que usaremos su funcionalidad allí.

Paso 5: Agregar un botón de inicio de sesión

Agrega un botón de inicio de sesión a la página y configura un controlador de eventos, para que al hacer clic en ese botón se active una ventana de inicio de sesión de Solid. Esto sucede a través de la función popupLogin proporcionada por windows.solid.auth que se inicializa con solid-auth-client.

Pasamos la ubicación de nuestra ventana emergente como un parámetro.

const popupUri = ‘popup.html’;
$(‘#login button’).click(() => solid.auth.popupLogin({ popupUri }));

Ahora queremos que la interfaz se actualice cuando el usuario haya iniciado sesión.  solid.auth proporciona la función trackSession que invocará su devolución de llamada cada vez que cambie el estado de inicio de sesión del usuario. Pasará un objeto con una propiedad webId cuando el usuario haya iniciado sesión o null cuando no lo esté.

solid.auth.trackSession(session => {
const loggedIn = !!session;
$(‘#login’).toggle(!loggedIn);
$(‘#logout’).toggle(loggedIn);
$(‘#user’).text(session && session.webId);
});

Ahora prueba tu aplicación iniciando sesión con su POD.

Paso 6: Agregar un botón de cierre de sesión

De manera similar, hay que proporcionar al usuario la funcionalidad de cierre de sesión:

$(‘#logout button’).click(() => solid.auth.logout());

Prueba tu aplicación al iniciar y cerrar sesión.

Paso 7: Agrega un elemento de entrada para la WebID del perfil

Este visor de perfiles podrá mostrar datos de los perfiles de diferentes personas. Agrega un elemento de entrada para que las personas puedan seleccionar ese perfil:

<p>
<label for=”profile”>Profile:</label>
<input id=”profile”>
</p>

Para simplificar las pruebas, puedes hacer que el perfil sea predeterminado para el usuario que inició sesión:

solid.auth.trackSession(session => {
  // …
  if (session) {
    $('#user').text(session.webId);
    if (!$('#profile').val())
      $('#profile').val(session.webId);
  }
});

Paso 8: Añadir RDFlib.js

RDFlib.js es una biblioteca de JavaScript que nos permite interactuar con los datos vinculados almacenados en los PODs de Solid. Puedes obtenerlo en aquí.

Asegúrate de colocar esta etiqueta de script después de la de solid-auth-client, de modo que RDFlib pueda usar la funcionalidad de recuperación autenticada.

Paso 9: Mostrar el nombre del usuario

solid-auth-client nos permite realizar una recuperación autenticada de datos de pods, y RDFlib nos permite analizar y procesar esos datos. Ahora buscaremos el documento de perfil del usuario y buscaremos un triple  que indique el nombre de la persona. Esto es posible con el siguiente código:

const FOAF = $rdf.Namespace(‘http://xmlns.com/foaf/0.1/’);
$(‘#view’).click(async function loadProfile() {
// Set up a local data store and associated data fetcher
const store = $rdf.graph();
const fetcher = new $rdf.Fetcher(store);

// Load the person’s data into the store
const person = $(‘#profile’).val();
await fetcher.load(person);

// Display their details
const fullName = store.any($rdf.sym(person), FOAF(‘name’));
$(‘#fullName’).text(fullName && fullName.value);
});

Paso 10: Mostrar los amigos del usuario

Ahora que podemos mostrar una sola persona, también podemos buscar a sus amigos y mostrarlos:

$(‘#view’).click(async () => {
// …
const person = $(‘#profile’).val();
// …
const friends = store.each($rdf.sym(person), FOAF(‘knows’));
$(‘#friends’).empty();
friends.forEach(async (friend) => {
await fetcher.load(friend);
const fullName = store.any(friend, FOAF(‘name’));
$(‘#friends’).append($(‘<li>’)
.text(fullName && fullName.value || friend.value));
});
});

Ten en cuenta que el nombre de esos amigos se carga desde sus pods, ¡no desde el tuyo!

Paso 11: Haz clic en los amigos

Con un simple paso, podemos hacer que el visor de perfiles sea más interactivo. En lugar de simplemente listar a los amigos, los convertimos en enlaces. Cuando se hace clic en un enlace, esa persona se carga en el visor de perfil:

$(‘#view’).click(async function loadProfile() {
// …
const person = $(‘#profile’).val();
// …
const friends = store.each($rdf.sym(person), FOAF(‘knows’));
$(‘#friends’).empty();
friends.forEach(async (friend) => {
await fetcher.load(friend);
const fullName = store.any(friend, FOAF(‘name’));
$(‘#friends’).append(
$(‘<li>’).append(
$(‘<a>’).text(fullName && fullName.value || friend.value)
.click(() => $(‘#profile’).val(friend.value))
.click(loadProfile)));
});
});

Este simple cambio muestra cómo, gracias al poder de los datos vinculados, podemos atravesar fácilmente los datos almacenados en diferentes POD de datos.

Ya has visto lo fácil que es crear una aplicación Solid en muy poco tiempo, puedes seguir investigando y creando tus propias aplicaciones o añadiendo más funcionalidades a esta.