"APP ZERO": Beginners SAFE Web App Tutorial

Apps
22

try this:

let app = {
       name: 'your_app_name',
       id: 'your_app_id',
       version: '0.0.1',
       vendor: 'you',
       permissions: [],
      }

    window.safeAuth.authorise(app).then(function(success_text) {
        console.log("SUCCESS:" + success_text);
    }).catch(function(error_text) {
        console.log("ERROR:" + error_text);
    });

Protip: in the developer tools of Beaker (view → Toggle DevTools) in the “Console” section. You can type javascript code directly inside the console. Type “window.safe” to see the Safe API exposed by the browser.

4 Likes
23

I’ve just updated the readme now, which should clarify some things, as well as updating the outdated initial example.

So safe-js can be used in node, or any browser, and that would use methods as listed in the readme.

However, when using the SAFE Browser, these methods are baked into the window object, which means 1) they run internally in the background in beaker, and 2) you dont need to include your own copy of safe-js, they are automatically (and only) available to safe: sites.

So your example here, when uploaded to the network, should look like:

const app =
{
    name: "name",
    id: "id",
    version: "v",
    vendor: "vendor_name",
    permissions: ["SAFE_DRIVE_ACCESS"]
};

window.safeAuth.authorise( app );

Before uploading to the neteork, you’ll need to test these same methods, which is why there’s a window.safeX polyfill available in the npm package. As described over here.

Hope that’s helpful

6 Likes
24

Hey this is awesome, I tried ctrl+j/k and gave up after that lol. Glad to know it exists! Will be a great help

1 Like
25

In beaker it is Ctrl-Alt-I

1 Like
26

Is that code you supplied supposed to work in the console? It looks like the window function of “authorise” can’t work that way, is this what @joshuef was talking about for the “polyfill” thing (which I’m still not quite clear on what it is)?

I’m guessing not, and will try it in a hosted SAFE page now

27

Thanks for helping me along, still can’t seem to get it to work though. This is my newest javascript attempt, and it is all running from SAFE (at this Alphanet link safe://appzerosafejs.bigbang/) and my dev console keeps saying “unexpected token import” even though I’ve removed all the LOCAL_TOKEN etc code. Not sure what to make of it here. Just trying to learn the flow of safe-js’s tools

1 Like
28

So, I can’t see the site with the 0.9.2 launcher. Data doesn’t exist.

But it looks like you’re trying to run javascript es6 import code directly in the browser, where import rules will not work.

If you are trying to run these lines in the browser, that’s your import error.

Your safejs code looks good in itself (and as you note, with the latest version of the browser/safejs, you don’t need to supply a token as it will be overridden by the url of the site in beaker anyway).

So to get this code running, I think you only need remove those two lines.

1 Like
29

He’s on “Alphanet” so probably not Test 11 / Launcher 0.9.2.

3 Likes
30

That’s right, I haven’t updated my apps. SafeLauncher is 0.8.0, Safe browser is 0.2.7.

@whiteoutmashups you can see an example of the code here: safe://simplesafe2.davidmtl/ on alpha. Note that it’s not fully functional but the authorization part works.

2 Likes
31

All that worked great in the console (0.3.6-2) so thanks for that! but still can’t get a SAFE hosted version to work.

Made another APP ZERO attempt, trying to finally get a safe-js / beaker version of A0 to work.

(testable on Alpha at safe://a0sjs.wom/)

I must be doing something wrong? I know there have been changes made to how tokens are used @joshuef @happybeing do you think this has anything to do with APP ZERO never working in safe-js yet?

2 Likes
33

WELL DONE mate great to see!!!

1 Like
34

Python version seems to be missing (dead link).

35

Hmm I’ll get this fixed and synced

EDIT: Not sure what you mean, this is the link and it’s working fine for me, showing up correctly on github, can see all the python code right there

36

Cracked the code!!! :smiley: :smiley:

SAFE-JS VERSION OF APP ZERO NOW WORKS!!!

Oh my look how tiny that code is :smiley: :smiley: That’s what App Zero is all about!

More of a testament to how great and clean safe-js is than anything, though :slight_smile:

Very glad to be rid of the CSP headers! Now websites / web apps are unleashed!!

10 Likes
37

Well done Will, where you cut the trail, many will follow!

3 Likes
38

CSP headers

Content Security Policy?

1 Like
39

I would guess that’s correct.

Was something that blocked parts of your html, like inline scripts and most tags.

But now they’re gone so anyone’s free to make websites as they wish now! :slight_smile:

40

Nice one. Works for me. Where do you see people taking this now?

1 Like
41

Well for me personally it’s a good entry point into safe-js for uploading files etc. I think a web app replacement of the demo app will be a great thing, since all you need to do with it is create public / private folders, upload files, and map dns. Should take some burden off MaidSafe if I can get it done.

In general, everyone should take it every Direction they can! SAFE apps need to be built! Replace clearnet in every use case :slight_smile:

8 Likes
42

Time to kickstart some Authenticator apps!!

MaidSafe Asia is offering a:

$50 BTC bounty to the first person who can make APP ZERO work with the Authenticator Browser!!

_

Here’s everything you need to start!

Don’t forget, APP ZERO is all about the BARE MINIMUM needed to be a SAFE (web) app that just authenticates with the Network. Just one HTML file with some JS for the commands will suffice!!

Happy coding! I’ll be working on this as well!

4 Likes