Joseph's Safe Websites Project

Joseph_Meagher · August 2, 2017, 10:51pm

Joseph’s Safe Websites Project is a project where I try develop (mainly) websites for the SAFE Network. The purpose of this topic is to act as the meta for the different projects.

This topic contains the development of unreleased projects and is the place to leave your suggestions for upcoming projects.

You can check out some of the topics of completed projects below to see latest information and if they are currently live on the network:

As well as Demoy which contains more information in the post below
Here is my Github:

Safe Web Directory
Safe Chat
Safe File Manager

0 voters

Joseph_Meagher · August 5, 2017, 8:03pm

OutDated :
Orginal Post

I plan to start developing websites that use the safe API with videos that explain how they work and the code behind them.@whiteoutmashups made a (very nice) thread where I made a post like this but this will be the main thread for developments on the projects from now on.

The safedemo.jam website (github here) is the first of them. This website was developed for the maidsafe asia app competition. This website provides a brief overview of some of the Safe DOM API components particularly the mutable data sections. I’ve released videos that gives an overview of the website and a video that gives a quick rundown of the its main.js file.

Safe Web Directory
Safe Chat
Safe File Manager

0 voters

(I will be including the scores from the previous post: safechat 17, safe file manager 14 and safe web directory 7)

Here is a quick rundown of each of the options:
Web Directory would be like an online phone book of safe websites where people can sumbit there website link if they want people to access it

Chat would be like the safenetwork room on riot (only being able to post), it also will probably be anonymous.

Web Directory and Chat would be able to share a lot of the same code so after one of them is developed it would be much faster to release the other as they both depend on the ability to append public data, but I am not too sure how to do that just yet.

Safe File Manager would probably be the quickest to develop and be a much more UI focused and friendly version of the safedemo it would also have the ability to publish websites directly on the safe network instead of having to use the web hosting manager, this is going to make use of the NFS functions which will be changed soon(safedemo was originally going to use them but I ran into some issues) .

The NFS API has been recently enhanced in safe_client_libs, the changes required in both safe_app_nodejs and the safe_app plugin are already merged and going through internal testing. The changes in the NFS API impacted the web-hosting-manager sample application which has also been updated to be compatible with the new NFS API. With this change, DataMaps are now stored as MutableData instead of being stored by the frontend layer as an ImmutableData chunk.

I am going to try and migrate from developing directly for the Maidsafe Asia’s App competitions to a more decentralised approach of developing for the community, this means I will put out a crypto address which people can send maidsafecoins to if they felt like my work (this will probably include the website, a video that goes through it and a rundown of its code) has helped them. I will then try to go give a larger vote on what I develop next (weighted voting) to them as gratitude. So here is my bitcoin address: 1Dksk7aA6PPpttznZi73d8xzsw4ERHSTLc
(just make sure to pm me the address you are sending from before you send if you want to have a weighted vote).

If you have any criticisms, requests, bugs, features or another method of monetisation feel free to let me know.

All the best,
joe

Second Post
I’ve closed the polls as safe chat seemed to be the winner, it turns out safe chat was a lot easier to develop than I first thought! If you want you can send maidsafecoins to my address here
1Dksk7aA6PPpttznZi73d8xzsw4ERHSTLc

So try it out here safechat.jam , also big thanks to @bochaco and his help on the safe dev forums Dumb DOM API questions - #19 by bochaco - API - Safe Dev Forum

It is taking a while to load from the safe network so here is the github GitHub - josephm1/Chaty: A messaging website built on the SAFE Network with the ability to publish messages and chat in realtime in-browser. The code is designed to readable and showcase some of the features of the SAFE API. so you can run it locally, don’t worry it should still be able to interact with th network and read other peoples messages

JPL · August 5, 2017, 8:43pm

Nice work Joseph - waiting for it to upload now. Can you provide instructions about how to use the Github repo?

happybeing · August 5, 2017, 8:58pm

I’m trying it now

No messages shown yet. I’ve typed “Hello?” and it send…

@JPL same symptoms here (no yellow bars and the two JS console errors)

JPL · August 5, 2017, 9:06pm

Me too - I don’t think it’s fully loaded though. I don’t see the two yellow bars, and when I try to send a message (not sure to who) I get I get an error:

C:\Users\John\Documents\SAFEnetwork\TEST\safe-browser-v0.4.0-win-x64\resources\app\node_modules\pau…:203 Uncaught (in promise) Error: Invalid handle: null(…)onCbReply @ C:\Users\John\Documents\SAFEnetwork\TEST\safe-browser-v0.4.0-win-x64\resources\app\node_modules\pau…:203onIPCMessage @ C:\Users\John\Documents\SAFEnetwork\TEST\safe-browser-v0.4.0-win-x64\resources\app\node_modules\pau…:118emitMany @ events.js:127emit @ events.js:201

Joseph_Meagher · August 5, 2017, 9:20pm

Sorry about the delay to get to use the github repo
download the folder
launch local webserver
get the url given to you by the webserver
type localhost:/ / url in your safebrowser
then you should have access to the website
this will be a good bit faster than accessing it from the safe network and the messgaes sent will still come up

please try localhost option as i am not facing any issues with that

see the errors invalid handle now will try to work on it now hopefully will be gone in a few minutes.

JPL · August 5, 2017, 9:45pm

I can’t get it working with the webserver. 'Scuse me for being dim but here’s what I’m doing.

I start up the 200 OK webserver for Chrome, choose folder Safechat-master.

Gives webserver urls http://127.0.0.1:8887 http://169.254.86.107:8887 http://192.168.1.64:8887.

Paste localhost://8887 into safe browser → gets changed to localhost://0.0.34.183/ - Invalid URL error

Joseph_Meagher · August 5, 2017, 9:46pm

you have to put in localhost:/ /127.0.0.1:8887 into the browser

please tell me if it works i am having a bit of trouble connecting to the network right now

JPL · August 5, 2017, 9:53pm

Yeah better - I can see 5 yellow bars now, but still get an error on send

Joseph_Meagher · August 5, 2017, 9:58pm

I will try and see if i can get that working , having trouble connecting to the network so might be a while

JPL · August 5, 2017, 10:00pm

No probs. As a matter of interest your safedemo app is throwing more errors on testnet 18, Not sure if something has changed in the API.

Joseph_Meagher · August 6, 2017, 11:03am

Edit: This no longer works, go here for new instructions Joseph's Safe Websites Project - #18 by Joseph_Meagher

I managed to have it working now (still not too sure what the problem was ) I think the safe browser 0.4.0 dosen’t like to read javascript containing safe api directly from a file (not sure why) so to get it working go to safechat.jam copy and paste this in to the console (ctr-c and ctr-v ) after the website has loaded

//Intial function
"Use strict";

var auth;
var latestkey = 0;

$('#sendmessage').click(function() {
  sendmessage();
});

//initialises and authorises with the network
function init() {
  var app = {
    name: "Safe Chat",
    id: "joe-safechat",
    version: "1",
    vendor: "joe-safechat",
  };

  var permissions = {
    '_public': [
      'Read',
      'Insert'
    ]
  };

  var owncontainer = {
    own_container: true
  };

  window.safeApp.initialise(app)
    .then((appHandle) => {
      console.log("Initialise Token: " + appHandle);


      window.safeApp.authorise(appHandle, permissions, owncontainer)
        .then((authURI) => {
          // console.log(auth);

          window.safeApp.connectAuthorised(appHandle, authURI)
            .then((authorisedAppHandle) => {
              //returns authorised app token
              auth = authorisedAppHandle;
              Materialize.toast("Authorised App Token: " + auth, 3000, 'rounded');
              getMessages();

              // console.log(authorisedAppHandle);
            });
        });
    }, (err) => {
      console.error(err);
      // Materialize.toast(err, 3000, 'rounded');
    });
}



function getMessages() {
  var name = "safechat";
  window.safeCrypto.sha3Hash(auth, name)
    .then((hash) => {
      window.safeMutableData.newPublic(auth, hash, 5000)
        .then((mdHandle) => {
          window.safeMutableData.getEntries(mdHandle)
            .then((entriesHandle) => {
              messages.innerHTML = "";
              var latestkey = 0;
              window.safeMutableDataEntries.forEach(entriesHandle,
                (key, value) => {
                  console.log('Key: ', uintToString(key));
                  console.log('Value: ', uintToString(value.buf));
                  $("#messages").append('<div class="row"><div class="card-panel yellow"><span class="blue-text">' + uintToString(value.buf) + '</span></div></div>');
                  window.latestkey++;
                });
            });
        });
    }, (err) => {
      console.error(err);
      // Materialize.toast(err, 3000, 'rounded');
    });
}

function sendmessage() {
  var name = "safechat";
  window.safeCrypto.sha3Hash(auth, name)
    .then((hash) => {
      window.safeMutableData.newPublic(auth, hash, 5000)
        .then((mdHandle) => {
          window.safeMutableData.newMutation(auth)
            .then((mutationHandle) => {
              window.safeMutableDataMutation.insert(mutationHandle, latestkey.toString(), textarea.value)
                .then(_ =>
                  window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle))
                .then(_ =>
                  console.log('New entry was inserted in the MutableData and committed to the network'));
              getMessages();
            });
        });
    });
}

function uintToString(uintArray) {
  return new TextDecoder("utf-8").decode(uintArray);
}

init();

it should start working then, sorry about the problems

I am putting a refresh button in now but to refresh message type getMessages() into the console

Sascha · August 6, 2017, 11:45am

I’m trying it out now on Safe browser 0.4.0 on Linux Mint, but all I see after several minutes is [screenshot]

Joseph_Meagher · August 6, 2017, 11:46am

did you paste the code in the console

Sascha · August 6, 2017, 11:48am

If by “console” you mean where it says to enter your message at the bottom then yes, I did.

Joseph_Meagher · August 6, 2017, 11:49am

right click on the website
you will get inspect element
you will see a window called dev tools
click on the console tab and paste my code in to it

Joseph_Meagher · August 6, 2017, 11:54am

i saw your message “Hello from Sascha!” still fixing the UI will be done in hopefully today

Joseph_Meagher · August 6, 2017, 1:04pm

This is no longer needed, just head to safe://safechat.jam

Instructions

To use website go to safe://safechat.jam
Wait for the website to load
Right click on the website and click on inspect element
This will bring up a new window called dev tools
Click the tab that says console there

Copy and paste(ctrl-c ctrl-v) this code in to there

//Intial function
 "Use strict";

 $('#sendmessage').click(function() {
   authorise();
 });
 $('#refresh').click(function() {
   getMessages();
 });

 //initialises and authorises with the network
 (function() {
   var app = {
 name: "Safe Chat",
 id: "joe",
 version: "1",
 vendor: "joe",
   };


   window.safeApp.initialise(app)
 .then((appHandle) => {
   console.log("Initialise Token: " + appHandle);
   window.safeApp.connect(appHandle)
 .then((appHandle) => {
   //returns app token
   auth = appHandle;
   authorised = false;
   Materialize.toast(" App Token: " + auth, 3000, 'rounded');
   getMutableDataHandle();
 });
 }, (err) => {
   console.error(err);
   Materialize.toast(err, 3000, 'rounded');
 });
 })();

 function authorise() {
   if (authorised === false) {
 window.safeApp.free(auth);
 auth = "";
 var app = {
   name: "Safe Chat",
   id: "joe",
   version: "1",
   vendor: "joe",
 };

 var permissions = {
   '_public': [
 'Read'
   ]
 };

 window.safeApp.initialise(app)
   .then((appHandle) => {
 console.log("Initialise Token: " + appHandle);
 window.safeApp.authorise(appHandle, permissions)
   .then((authURI) => {
 // console.log(auth);
 window.safeApp.connectAuthorised(appHandle, authURI)
   .then((authorisedAppHandle) => {
     //returns authorised app token
     auth = authorisedAppHandle;
     authorised = true;
     Materialize.toast("Authorised App Token: " + auth, 3000, 'rounded');
     getMutableDataHandle();
     sendMessage();
   });
   });
   }, (err) => {
 console.error(err);
 Materialize.toast(err, 3000, 'rounded');
   });
   } else {
 sendMessage();
   }
 }

 function getMutableDataHandle() {
   var name = "safechat";
   window.safeCrypto.sha3Hash(auth, name)
 .then((hash) =>
   window.safeMutableData.newPublic(auth, hash, 3000))
 .then((safeChatHandle) => {
   mdHandle = safeChatHandle;
   getMessages();
 });
 }

 function getMessages() {
   window.safeMutableData.getEntries(mdHandle)
 .then((entriesHandle) => {
   messages.innerHTML = "";
   var date = new Date();
   var time = date.getTime();
   window.safeMutableDataEntries.forEach(entriesHandle,
 (key, value) => {

   if (uintToString(value.buf).length < 300 &&
 uintToString(value.buf) !== "" &&
 parseInt(uintToString(key)) < time &&
 parseInt(uintToString(key)).toString().length === 13 &&
 uintToString(key).length === 13 &&
 uintToString(key).substring(0, 4) == 1502) {

 console.log('Key: ', uintToString(key));
 console.log('Value: ', uintToString(value.buf));
 $("#messages").append('<div class="row"><div class="card-panel yellow"><span class="blue-text">' + uintToString(value.buf) +
   '</span></div></div>');

   }
   window.scrollTo(0, document.body.scrollHeight);
 });
   window.safeMutableDataEntries.free(entriesHandle);
 }, (err) => {
   console.error(err);
   // Materialize.toast(err, 3000, 'rounded');
 });
 }

 function sendMessage() {
   window.safeMutableData.newMutation(auth)
 .then((mutationHandle) => {
   var date = new Date();
   var time = date.getTime();
   window.safeMutableDataMutation.insert(mutationHandle, time.toString(), textarea.value)
 .then(_ =>
   window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle))
 .then(_ => {
   Materialize.toast('Message has been sent to the network', 3000, 'rounded');
   window.safeMutableDataMutation.free(mutationHandle);
   getMessages();
 });
   textarea.value = "";

 });
 }

 function uintToString(uintArray) {
   return new TextDecoder("utf-8").decode(uintArray)
 .replace(/&/g, "&amp;")
 .replace(/</g, "&lt;")
 .replace(/>/g, "&gt;")
 .replace(/"/g, "&quot;")
 .replace(/'/g, "&#039;");
    }

Press enter and everything should work then

If you have any issues please let me know.

please come by and leave a message

JPL · August 7, 2017, 8:45pm

I can’t get anything to work on this now.

Authorise: OK
Check Authentication: error

I also tried copying and pasting your code into the console but that didn’t work

Joseph_Meagher · August 7, 2017, 8:48pm

I think this is a problem with safe browser, what you can do is get the website up and wait for it to load ( the indicator on the tab will change to the refresh icon) then everything should be ok

Topic		Replies	Views
Joseph's Little SAFE Apps Thread Apps joseph , safedemo	5	959	August 1, 2017
SAFE API Overview (Joseph’s Safe Websites Project) Development josephsafeproj	7	1749	October 6, 2017
Which SAFE Website Project should I work on? Community josephsafeproj	14	1150	February 20, 2018
Listy release (Joseph’s Safe Websites Project) Apps josephsafeproj	5	1229	October 29, 2017
Chaty release (Joseph’s Safe Websites Project) Apps josephsafeproj	0	1206	October 20, 2017

Joseph's Safe Websites Project

This is no longer needed, just head to safe://safechat.jam

Related topics