~/.plan

8-buildingsomethingsolid

Building something SOLID

Start: 2019-02-02

Gathering resources to prepare and educate myself on how to build apps which integrate with SOLID.

  1. Question: What to build on top of Linked Data?
  2. Idea: Add SOLID pod integration to this site: likes, comments.
  3. Inspiration: Vue.js powered Task manager app and Solid Focus
  4. Task: Fix the pages on this site to be RDF compatible.
  5. Task: Set up a SOLID POD test server on Ubuntu (use Nginx as Proxy)
  6. Study: Check Ruben Verborgh's website
  7. Study: Do something with LDFlex
  8. Study: The SOLID REACT SDK
  9. Test: See Yeoman generator generator-solid-react

2019-03-11 23:40

Read the Linked Data articles by Ruben Verborgh and almost made it through the Linked Data book.

Decided to have a good look at the Solid-Focus app by Noel Martin as a great example on how to build a Web app which saves data in a Solid Pod.

I've forked the Solid-Focus Github project and have set up the local work environment and it's running fine locally, even on my Windows 10 machine. So now I need to learn how it all comes together within the Vue.js application. I'm especially impressed by the code organisation and structure of the Vue.js app. The way how the various services are initialized is very cool. Great idea to use a Service class where the Vue.js app instance is being passed into.

Here's the code of src/services/index.ts, released under the GNU General Public License v3.0:


  /**
  * Services are singletons used throughout the app that encapsulate
  * business logic and interact with Vuex to manipulate application state.
  */

  import Vue from 'vue';

  import UI from '@/services/UI';
  import Auth from '@/services/Auth';
  import Config from '@/services/Config';
  import Service from '@/services/Service';
  import Workspaces from '@/services/Workspaces';

  export default async function bootServices(app: Vue): Promise {
      Vue.prototype.$services = [
          Vue.prototype.$ui = new UI(app),
          Vue.prototype.$auth = new Auth(app),
          Vue.prototype.$config = new Config(app),
          Vue.prototype.$workspaces = new Workspaces(app),
      ];

      await Promise.all(Vue.prototype.$services.map((service: Service) => service.ready));
  }

The above code block is not syntax highlighted. I should include highlight.js to this site at a later time.

As a first improved or my contribution to the project, I proposed the ability to edit existing tasks and Noel had already planned this. I'll need to check how the PATCH verb works in the Solid API.

He's getting inspiration from Wunderlist and I agree that that's a good example of a great task manager.

Author
Started
Updated
2019-04-03T22:52:17+0200
Status
started