"APP ZERO": Beginners SAFE Web App Tutorial


#1

#THIS IS STEP 1 FOR NEW DEVELOPERS ON THE SAFE NETWORK!

Fnally had my breakthrough “Eureka!” moment!! Figured out the simplest way to make a real-life SAFE Web App, with just a .html and a .js javascript file.

Here’s my new repo of the SIMPLEST SAFE WEB APP, aka “APP ZERO”
(& a TEST10 repo) (& a Python version!!)

This is largely a ripoff of @DavidMtl 's awesome SimpleSafe project (alpha), which also shows how to use several other GET/ POST/ DELETE commands, but I just wanted to do the bare minimum at this point, and tried to reduce his code to be as minimalistic as possible, just to show people how easy it is to make “technically” a real live SAFE Web App in Javascript.

Here’s APP ZERO running on Alpha, so you can authorize with Launcher!

#Please help keeping it updated for new testnets, and porting to all dev languages; perhaps Java next?!


Maidsafe app programming - complete newbie
Dev an app in SafeNetwork. Where to start?
Melbourne Australia Meetup Tonight April 20!
Help making tutorial apps
#2

This is perfect Will. Well done for sticking at it and breaking through. And for sharing it so others can join us more easily :slight_smile:


#3

Tried this on test10, didnt work.


#4

Ah yes, sorry! Well, you could either pull the first section out of the latest tutorial, or examine the code from one of the community websites that have been uploaded to Test 10.


#5

Why wouldn’t it work on test10?


#6

I don’t know - depends on what has changed in the API. I haven’t looked into this yet.


#8

There were definitely differences between alpha and test9, as my integration tests failed against it. I haven’t tried test10 yet, but it could be the same.


#9

I’m having the same problem with my Postman collection, it doesn’t work on test10. I’m looking at it now but don’t have a clue yet, e.g. the GET /appendableData/handle/:id doesn’t work now, I get:
{
“errorCode”: 404,
“description”: “Endpoint Not Found”
}

and if I now try with GET /appendable-data/handle/:id (which apparently it’s the correct path for this API in test10) I get the following:
{
“errorCode”: 400,
“description”: “error setting argument 1 - writeUInt64: no digits we found in input String”
}


#10

Public notice: this is meant for alpha so far guys, not test 10, Ok?


#11

Okay THIS I can read. I might have to look up some terms and examine the logic a bit more but I can at least read it. Thanks. Now I’m off to read the weekly update lol.


#12

This isnt supposed to be Test10, but this JS will work on your simplest app. Cant take credit a friend helped me out, so don’t thank me :stuck_out_tongue:

It will authorize for low level api and safe drive access upon pressing the auth button.

Live: safe://auth.chris/

document.addEventListener(‘DOMContentLoaded’, function() {
document.getElementById(“auth_button”).addEventListener(“click”, function(){
authorize();
});
}, false);

function authorize() {
console.log(‘Authorising application’);

let app = {
  name: window.location.host,
  id: 'tutorial.maidsafe.net',
  version: '0.1.0',
  vendor: 'maidsafe',
  permissions: [
    'LOW_LEVEL_API', "SAFE_DRIVE_ACCESS"
  ]
}
let hostName = window.location.host.replace(/.safenet$/g, '');
console.log(hostName);
window.safeAuth.authorise(app)
  .then((res) => {
      //success! save res.token
      console.log(res);
  }, (err) => {
    console.error(err);
  });

};


#13

Not sure what you mean but thanks for the help! Do you mean yours works on Test10?


#14

ah yes, sorry that was unclear, you specified earlier that this was for alpha, i wanted to specify that my example was for test10 :slight_smile:

This is what it looks like now btw: (EDITED for saving token to localstorage, changed this to var)

Is what is running live on safe://auth.chris/

//finds button on html page and runs auth function when clicked.

document.addEventListener(‘DOMContentLoaded’, function() {
document.getElementById(“auth_button”).addEventListener(“click”, function(){
authorize();

});
}, false);

// stuff for auth function
var hostName = window.location.host.replace(/.safenet$/g, ‘’);
var LOCAL_STORAGE_TOKEN_KEY = SAFE_TOKEN_${hostName};
var app = {
name: window.location.host,
id: ‘test.auth’,
version: ‘0.1.0’,
vendor: ‘chris’,
permissions: [
‘LOW_LEVEL_API’, “SAFE_DRIVE_ACCESS”
]
}

var authToken = null;

// saving token to localstorage
function setAuthToken(token) {
authToken = token;
window.safeAuth.setAuthToken(LOCAL_STORAGE_TOKEN_KEY, token);
}

// auth function
function authorize() {
console.log(‘Authorising application’);

//authenticates with app as and LOCAL_STORAGE_TOKEN_KEY as payload
window.safeAuth.authorise(app, LOCAL_STORAGE_TOKEN_KEY)
  .then((res) => {
      //saving token to localstorage
       if (typeof res === 'object') {
    setAuthToken(res.__parsedResponseBody__.token);
  }
      //success! save res.token
      console.log(res);
      // redirect to new page
      window.location = "welcome.html";
  }, (err) => {
    // this is denied
    console.error(err);
    // auth failed popup
    alert("Authentication Failed")
  });

};


#15

Thanks! Just put all your work into an APP ZERO TEST10 repo, and updated the OP


#16

prob add a welcome.html so the redirect works also :wink:

I’m trying to get my welcome.html to getdns and display my username next.

No idea


#17

I just uploaded the test 10 repo code and tried to give it a shot, but no luck getting its /auth to work with Launcher…

safe://appzero.whiteout/

TEST 10 Link^


#18

Try this: https://github.com/aenemic/safe-api-tests/blob/master/authtest.js


#19

ok looks good, I just reuploaded and remapped the SAFE DNS so now mine works with that code:

safe://appzero.whiteout/

TEST 10 Link^

I just need to refine the code and make it smaller so it can go inside the APP ZERO TEST10 repo


#20

#APP ZERO now exists in Python also!


#21

Working on the first APP ZERO attempt that works with the SAFE Beaker Browser / safe-js, no success so far, looking for help from anyone (including @joshuef )

Page loads up locally, looks fine, but this js file is where the problems are. I tried combining the code from the original version (built around FFox proxy) and code from the safe-js Github readme.md where it gives the Auth example.

The whole point of this is to just make the Auth command work with safe-js and SAFE Beaker Browser. Any and all help very much appreciated!