Help using different libs: rdflibjs, tripledoc, ldflex, solid-file-client


#1

I want to make a widget like @Vincent 's Notepod for Solidash

Some constraints :

  • I want my app that could be easily changeable and really simple, so I don’t want any webpack or build.
  • for the simplicity of hosting on github-pages or on a Pod, I don’t want any techno server as node/express, and use prepackages libs for accessing and managing data on a Pod.
    ( I put node but only to download modules, but I don’t want to use it in prod)
  • I don’t like Angular or React, perhaps because I’ve discovered Polymer first, and I like the concept of web-components Polymer provides.

So for every libs in the list and why not other, it would be nice if someone that know how to read data, create data, update data, to do the same actions as Notepod.
It could be a good example of how to do this type of action, and could help us to compare.
That could also be a complement to @Vincent cheatsheet.

Example of integration in app can be found here https://github.com/scenaristeur/solidash/blob/2a7bc7e18f7772b142df79aec14c1e397b98d482/components/app-element.js#L18

and components are instance of LitElemet class like this one https://github.com/scenaristeur/solidash/blob/master/components/fileclient-notepod.js

  • I’ve tried with solid-file-client but I don’t know how to update, or add a line in a turtle file, and it seams that it loads more than one version of solid-auth !? @jeffz?
  • I’ve tried with tripledoc, but I was not able to load a browser version of tripledoc & rdf-namespaces

So I would like to build some examples of each lib as simple as possible to add some notes on a Pod. Could everyone expert on those libs help me ?

Thxs

  • @dprat0821 :stuck_out_tongue_winking_eye:
    I’ve used evejs (Multi-agents js lib for communication between each component) but this must not interfere with rdf libs, because it’s another part of the project

#2

This repo has some examples that might be helpful:


#3

For reference, here’s the cheatsheet mentioned.

I would certainly recommend a bundler, because it will remove code for you that is unused. However, I just published v2.4 of Tripledoc that also includes a browser bundle. Do note that you will also currently need to include rdflib in your page, which is used by Tripledoc. Here’s an example of how to run Tripledoc without a bundler.

The examples in the Cheatsheet for rdflib should work as well by just including a <script> tag pointing to rdflib, but you’ll need to change code like

import { graph } from "rdflib";

const store = graph();

to

const store = $rdf.graph();

Does that help?


Are you a front-end developer, interested in Solid, but unfamiliar with Linked Data? Try Tripledoc
#4

@Vincent thxs , i will try it https://github.com/scenaristeur/solidash/blob/f21ae8f045d08507ee089e36976ae8d3b48edf8c/components/my-tripledoc.js#L48


#5

Thanks for sharing. Just checked that evejs does a good job in providing the multi-agent communication layer.

Just FYI, Rxjs can simplify your logic in handling some practical complexities (such as throttle to filter duplicated messages, etc.)

For the agent communication, the actor model (eg. Akka ) were once very popular, now ReactiveX (eg. Rxjs mentioned above) is trending as well. You can find implementations for different languages (Java, Js, C#, …) in case you need to support different platforms with same framework.


#6

@Vincent
Cool, it folks on https://scenaristeur.github.io/solidash/ !
but on this page https://solidproject.org/for-developers/apps/first-app/4-data-model

  typeRegistration.addRef(solid.instance, document.asRef())

shouldn’t be

  typeRegistration.addRef(solid.instance, **notesList**.asRef())

-> How do you open the page that propose to the user to add your app to “Trusted Apps”?
Thxs


#7

Thanks for spotting that, that should indeed be notesList.asRef(). That was actually fixed in a draft version, but for some reason didn’t make it onto the live site - we’ll have that fixd soon.

As for your other question, you’re talking about this page right?

Users get that the first time they connect their Pod to an app on your origin (i.e. scenaristeur.github.io) when that origin has not yet been added to their trusted apps, so if you follow the authentication guide, you should be set.


#8

yes , this one, i’ll try, thxs


#9

using this code

async function popupLogin() {
let session = await solid.auth.currentSession();
let popupUri = 'https://solid.community/common/popup.html';
if (!session)
session = await solid.auth.popupLogin({ popupUri });
}

in this module https://github.com/scenaristeur/solidash/blob/master/js/modules/solid-auth.js does not give me the page for “Trusted Apps” when I click on “login button”.

I use a copy of solid-auth-client.bundle.js found in “node_modules/solid-auth-client/dist-lib”
Do you have a idea why I don’t have the “trusted app” window ?


#10

That’s because your popupUri refers to solid.community, so users are actually logging in to there. Presumably, solid.community is already in your trusted apps list, which is why you’re not seeing the login. This is what I get:

Note that it asks me to authorise solid.community rather than scenaristeur.github.io.

To fix it, you can either:

  • Host the popup.html yourself - it can be downloaded from here.
  • Provide our own UI that allows people to enter their identity provider (e.g. https://inrupt.net or https://solid.community), instead of using popupLogin. Here’s an example.

#11

@Vincent
ok, i use a local popup ( let popupUri = ‘./dist-popup/popup.html’:wink:
and it looks good.
thxs