diff --git a/Documentation/webapp-intro.html b/Documentation/webapp-intro.html index 97c2fbbec..bb3eb86b7 100644 --- a/Documentation/webapp-intro.html +++ b/Documentation/webapp-intro.html @@ -48,7 +48,7 @@

Glossary of Terms

  • Statement - Another word for quad.
  • Setting up rdflib.js

    -

    Typically people define rdflib in your module as $rdf, so that you an easily cut and paste code between projects and examples here, without confusion.

    +

    Typically people define rdflib in your module as $rdf, so that you can easily cut and paste code between projects and examples here, without confusion.

    Installation steps (using npm):

    @@ -64,7 +64,7 @@

    Glossary of Terms

    Setting up a Store

    -

    Suppose we have a store, and we set up a person and their profile. Their webid is the URI 'https://example.com/alice/card#me', which is, if you like, a local variable ‘me’ within the the file 'https://example.com/alice/card'.

    +

    Suppose we have a store, and we set up a person and their profile. Their WebID is the URI 'https://example.com/alice/card#me', which is, if you like, a local variable ‘me’ within the the file 'https://example.com/alice/card'.

    There are two ways of creating a store:

    @@ -84,7 +84,7 @@

    Using the Store

     const me = store.sym('https://example.com/alice/card#me');
    -const profile = me.doc();       //i.e. store.sym(''https://example.com/alice/card#me')
    +const profile = me.doc(); //i.e. store.sym(''https://example.com/alice/card#me').doc()

    We are going to be using the VCARD terms, and so we set up a Namespace object to which generates the right predicate URIs for each term.

    @@ -122,12 +122,12 @@

    Using the Store

    Using the Store with Turtle

    -

    Let’s look at two more local operations. If you have turtle text for some data, you can load it into the store using $rdf.parse:

    +

    Let’s look at two more local operations. If you have a turtle text for some data, you can load it into the store using $rdf.parse:

     let text = '<#this>  a  <#Example> .';
     
    -let doc = $rdf.sym(‘’https://example.com/alice/card”);
    +let doc = $rdf.sym("https://example.com/alice/card");
     let store = $rdf.graph();
     $rdf.parse(text, store, doc.uri, ‘text/turtle’);  // pass base URI
     
    @@ -145,7 +145,7 @@

    Using the Store with Turtle

    console.log($rdf.serialize(doc, store, aclDoc.uri, 'text/turtle')); -

    If you omit the document parameter to serialize, or pass null, then you will get all the triples in the store. This may, if you have used a Fetcher, possibly metadata which the fetcher has stored about the HTTP requests it made in fetching your documents. Which might be interesting... but not what you were expecting.

    +

    If you omit the document parameter to serialize, or pass null, then you will get all the triples in the store. If you have used a Fetcher, this may display metadata which the fetcher has stored about the HTTP requests it made in fetching your documents. Which might be interesting... but not what you were expecting.

    Using match() to Search the store

    @@ -282,7 +282,7 @@

    Using the Fetcher

    or the data corresponding to one data document out there.

    - +

    Let's set up a store as before.

    @@ -296,7 +296,7 @@

    Using the Fetcher

    This time, we'll also make a Fetcher for the store. The Fetcher is a helper object which allows you to transfer data to and from the web of data.

    -const fetcher =new $rdf Fetcher(store);
    +const fetcher = new $rdf Fetcher(store);
     

    Now let's load the document we have been talking about.

    @@ -371,14 +371,14 @@

    Fetch Full Code Example

    Then inside of our web application, we could run the following commands:

    -div.appendChild(card(me)); // My card
    +div.appendChild(cardFor(me)); // My card
     
     fetcher.load(me.doc).then(resp -> {
    -	store.each(me, FOAF(‘friend’)).forEach(friend => div.appendChild(card(friend)));
    +	store.each(me, FOAF(‘friend’)).forEach(friend => div.appendChild(cardFor(friend)));
     });
     
    -

    This will pull in the user’s profile to make the picture and name for my own card. Then we explicitly pull it in again to find the list of friends. This is reasonable as the fetcher’s `load` method really means “load if you haven’t already” so continues immediately if it has already been fetched. It’s wise to explicitly load the things you need and let the system track what has already been loaded.

    +

    This will pull in the user’s profile to make the picture and name for my own card. Then we explicitly pull it in again to find the list of friends. This is reasonable as the fetcher’s `load` method really means “load if you haven’t already”, so it continues immediately if it has already been fetched. It’s wise to explicitly load the things you need and let the system track what has already been loaded.

    Then for each of the friends it will load their profile to fill in the name and picture of the friend.

    @@ -386,7 +386,7 @@

    Fetch Full Code Example

    Listing Data

    -

    Everything in RDF is a thing. We store data about all things in the same sort of way, just using different vocabulary. Suppose you want to list the content of the folder in someone’s solid space. It is very like listing their friends. The namespace for the contents of folders is LDP. So..

    +

    Everything in RDF is a thing. We store data about all things in the same sort of way, just using different vocabulary. Suppose you want to list the content of the folder in someone’s solid space. It is very like listing their friends. The namespace for the contents of folders is LDP. So..

     const LDP = $rdf.Namespace(‘http://www.w3.org/ns/ldp#>’);
    @@ -452,7 +452,7 @@ 

    Update: Using UpdateManager to update the web

    The first parameter to update() is the array of statements to be deleted. If it is empty then update() just adds data to the store. (Note for this the user only needs Append privileges, not full Write). -The second parameter to update() is the array of statements to be deleted. +The second parameter to update() is the array of statements to be inserted.

       function modifyName(person, name, doc) {
    @@ -467,7 +467,7 @@ 

    Update: Using UpdateManager to update the web

    So in this second case, the function will first find any statements which - give the name of the person. It then asked update to in one operation + gives the name of the person. It is then asked to do two updates in one operation: remove the old statements (quads) from the store, and add the new one.

    409 Conflict

    @@ -620,8 +620,8 @@

    Tracking Changes

    Conclusion

    We've looked at how to interact directly with the store as a local in-memory triple store, and we - have looked at how to load it and save it, web resource at a time. - We see how it ina away acts as a local in-memory cache of the big wide web of linked data, + have looked at how to load it and save it, one web resource at a time. + We see how it in a way acts as a local in-memory cache of the big wide web of linked data, allowing a user-interface to keep in sync with the state of the data web. As developers we can now write code which will allow users to explore, create, modify and link together a web of linked data which can grow to encompass more and more domains, different applications.