My Favorite Drinks - demo app on alpha 1

Apps
1

I have a simple remoteStorage.js demo App live on the alpha 1 network. It’s very simple: let’s you create and edit a list of your favourite drinks :beers:

This demonstrates the following features that come for free with remoteStorage.js, which I have extended to talk to SAFEnetwork:

  • offlineFirst operation: the app works whether connected to SAFEnetwork or not, but when connected keeps your data synchronised between your local machine and your SAFEnetwork storage.
  • decentralised personnel cloud: by keeping application data synchronised with SAFEnetwork, you can access and update your favourite drinks list on any PC

This is proof of concept stuff, so expect bugs, but if you’d like to try it:

NOTE: when alpha 1 is replaced this will no longer work!

Play!

It will work without being connected to SAFEnetwork, but once you connect, your list will automatically be stored on your SAFE drive.

And if you later connect from another computer, your list will automatically be downloaded from your SAFE drive. And any edits you make the will also get updated to your SAFE drive, so whatever you connect from, your data will remain synchronised across your different computers.

Connecting To SAFE

The app doesn’t automatically try to connect. You must click on the SAFE network icon, and then it will ask SAFE Launcher for permission to access your SAFE drive, and you must then tell SAFE Launcher to “Allow” access.

If you want to check it is connected, and that it is synchronising with SAFE network, open the browser debugger (I think that’s usually Ctrl-Shift-C) and select the “Console” where you will see debug messages being printed whenever it talks to Launcher.

You should see lots of debug messages, including the POST/PUT/GET operations to the SAFE NFS API. Once authorised it synchronises every ten seconds so you should definitely see activity here when it does this.

If it isn’t synchronising: make sure you’ve managed to get it to connect to SAFEnetwork, and told SAFE Launcher to “Allow” it access.

RemoteStorage.js

This functionality all comes for free with the http://remotestorage.io JavaScript library, all I’ve done is extend it to talk to the SAFE NFS API and then got one of the RS demonstration apps working with it, and hacked around some CORS/CSP issues.

It’s great fun watching it synchronise in the console, but for a regular user it just happens! Well I find it fun anyway :slight_smile:

Results & Problems

I have only tried this myself using Firefox on Linux so if you check it out please let me know the results you had, including which browser and operating system you tried. Also, whether you tried synchronising across multiple PCs.

Note that the app will look like it is working even if you don’t connect to SAFE, because it is able to work offline, so to be sure it is storing your drinks on SAFEnetwork you either need to try using it from two machines, and check it synchronises from one to the other, or open the browser console and see that it is calling the SAFE NFS API without errors (e.g. periodic bursts of GET response 200).

Remember, this is on the alpha 1 network so you must use safe_launcher v0.8.0 (not 0.8.1 which is testnet 8).

21 Likes
2

Great idea @happybeing!

I’m trying it with the latest SAFE Beaker Browser.

This is what happened after clicking “Connect remote storage” I think that’s the button right? I’m on Win 10/64. It doesn’t trigger the Launcher.

EDIT: I tried it over Chrome. Now it did trigger the Launcher :thumbsup:

4 Likes
3

I don’t know if it will work in Beaker - let me know! :slight_smile:

You need to click the SAFEnetwork icon, the others are for other storage services (GoogleDrive and RemoteStorage).

1 Like
4

Yes, this is what confused me a bit. Just click this brother when the website is open and don’t touch the other icons.

It’s the one in the middle on the right corner.

2 Likes
5

Is it using any new API’s?? I guess nothing was updated since the start of Alpha 1?? But one way or another I see POSTs coming by (which means changing data). How does this work Mark??

4 Likes
6

It uses the SAFE NFS API.

On DRIVE it creates /remotestorage/myfavoritedrinks
Each time you add a drink, it creates a file with the name you give it in the directory. When you delete the drink, it deletes the file.
Every ten seconds it lists all the files in the directory and makes sure that the local browser storage, and your SAFE storage contain the same list of files.

So very simple!

RemoteStorage is designed to encourage App developers to define categories of data (drink, task, blog post etc) and define the type for that category of object (which gets stored as a file). This means that different apps can read and write each other’s data (so a calendar app could read your to-do list for example).

I haven’t looked into that though - I’ve just been trying to get RS.js to use the SAFE NFS API and then to get existing RS.js apps to work with SAFEnetwork. They seem to work very easily, except for CORS/CSP problems, because we are very security conscious, whereas most web frameworks and developers are not yet implementing CORS strictly enough. I have a note taking app working on my setup, but not yet on the alpha for that reason. I’m also waiting on some fixes both in SAFE Launcher and remoteStorage.js which will make this easier.

Next though I’m going to look at @joshuef’s latest SAFE Beaker Browser and see about using his JavaScript API rather than the Launcher proxy.

So lots to do :slight_smile:

4 Likes
7

This is excellent, would be perfect for a small tutorial on a basic “Hello World” type of app like @Blindsite2k was suggesting.

Think you’d be up for getting such a tutorial going on the dev forum thread?

3 Likes
8

Maybe at some point, but it isn’t suitable for that yet as there are hacks and workarounds and bits of API still likely to change.

Also, people can already read up about RS.js and build fully functioning App using that. Switching it over to use SAFEnetwork is then trivial (apart from the possibility of hitting some CORS/CSP restrictions). No need to look at the SAFE API - just use the RS.js JavaScript library.

Using remoteStorage.js is a useful alternative route for creating dynamic web apps on SAFEnetwork, and gives different capabilities that some apps will benefit from greatly I hope!

4 Likes
9

If it’s a DELETE I wonder why it triggers a POST in the chart. POST is for structured data isn’t it??

10

If you open the debugger panel in your browser you can see all the API calls it makes POST/GET/DELETE etc, and a lot besides! :slight_smile:

Firefox is best for this IMO as it shows the network operations better.

EDIT: if you look at the SAFE NFS API docs you’ll see what else POST is used for. Here though I think it is only used for auth and create file.

1 Like
11

Works perfectly in Win10/Firefox. Nice one!

3 Likes