Safe-js tutorial website (WIP)

Community
,
1

At times I feel like I’m going crazy finding things to do until APIs etc are ready :stuck_out_tongue:

so as you know I’ve been working on a safe-js tutorial website (yes I know I know, it’s launcher-based and will all be obsolete soon, but I want to work on something!) and I have my template and most of my data finished.

Also this will be a very good practice exercise for myself and my team, so when new APIs are ready we’re more familiar with the principles.

I’d like to go ahead and finish it completely, just so we have it, but I can’t get documentation or examples for the rest of safe-js. I have found the following so far, but could anyone with more knowledge help me fill in the blanks? Then it will be finished and I’ll post it for everyone (people keep saying the rest of the info is in the Email / Comments Tutorials but that’s all npm-based I think and I’m looking to fill it in for safe-js (javascript)).

So here’s what I have already:

#Authorize

			function authorize() {
				const app =
					{
				    name: "Test Auth App",
				    id: "Test1",
				    version: "0.0.1",
				    vendor:"WhiteOutMashups",
				    permissions: ["SAFE_DRIVE_ACCESS"]
					};
				safeAuth.authorise(app);
			};

#Create Folder

	function createdir(){
			safeNFS.createDir(auth.token,name,false);
		};

subacton GET directory: safeNFS.getDir(auth.token,name)

#Create / Update File

	function createorupdatefile(){
		safeNFS.createOrUpdateFile(auth.token,name,content);
	}

subaction GET file: safeNFS.getFile(auth.token,name);
subaction DELETE file: safeNFS.deleteFile(auth.token,name);

#Create Name for URLs

	function createlongname(){
		safeDNS.createLongName(auth.token,name);
	}

subaction GET longnames: safeDNS.listLongNames(auth.token);

#Create “Service Name”

	function createservice(){
		safeDNS.addService(auth.token,longname,name,homedir,false);
	}

subaction GET services: safeDNS.listServices(auth.token,longname);

#Create Structured Data? _________

#Create Appendable Data? _________

These last two aren’t documented, but only exist in the polyfill.js file in the safe-js repo. Does anyone know how to create & use (GET) SD & AD with safe-js? I haven’t found any documentation on this, and my team is very stumped. This will be very very useful practice for us.

If someone can answer, it would let us create many more interesting types of web apps here in the meantime, until MaidSafe releases their new Authenticator, Browser, APIs and docs / tutorials.

#Template for once this is all figured out

Anyone know? Hope so! Thx!

12 Likes
2

And I know it’s probably a simple command for each but would like a bit of context maybe a full example, if anyone can

3

Hey, I’ll get on my computer later this evening to build with safe-js to see if I can document my steps.

What are you looking for beyond, for example, the create method in the appendable-data module?

3 Likes
4

basically just a simple example of storing and retrieving SD’s or AD’s to the Network.

Couldn’t really find any docs for those

1 Like
5

I’ll throw a little something together.

2 Likes
6

@whiteoutmashups Initial documentation for creation of StructuredData: https://github.com/hunterlester/safe-message-chat#safe-message-and-chat-tutorial

Let me know if it makes no sense at all. I have some more testing to do to make sure code is right.
Also, let me know if this is what you are asking for, else I’ll change direction with clarity.
I’ll continue to work on SD getting and AD flow tomorrow, if thumbs up from you.

Thank you for the inspiration. Even though these data types are being replaced I still think it’s good practice. I’m excited right there with you.

4 Likes
7

That’s great! I’ll have a repo to fire back at you in a second

Got half way through it, works very well but I just had trouble filling out the command to actually push the SD to the network.

This was my closest attempt:

		function createSD() {
			var handle = window.safeCipherOpts.getHandle(auth.token, 'SYMMETRIC')
			window.safeStructuredData.create(auth.token, 'eyJhbGciOiJIUzInniJ9.eyJpZCI6Im5RT1poRFJ2VUFLRlVZMzNiRTlnQ25VbVVJSkV0Q2lmYk4zYjE1dXZ2TlU9In0.OTKcHQ9VUKYzBXH_MqeWR4UcHFJV-xlllR68UM9l0b4', 'testdatafilledhere', handle)
		}

I didn’t know how to create a new 32bit address so I just modified one from the dev tutorials, and added some filler data, and did a GET request to get the cipher_opts_handle for the third argument.

This is the error from the Beaker-dev:

774×143 18.3 KB

and this is the error log from the launcher v10:

713×128 9.88 KB

I’m not surprised it didn’t work, but I didn’t really know how else to go about it. How would I?

8

I’ll be on in a minute to check out what’s happening. Diaper change, lots of baby wipes, etc, etc… :grinning:

@whiteoutmashups Without digging in, I’m looking at var handle = window.safeCipherOpts.getHandle(auth.token, 'SYMMETRIC')

getHandle returns a promise, not the handleId value. console.log that handle variable to see what it looks like.

1 Like
9

@whiteoutmashups that’s a shortcoming in my documentation. I’ll update it to express that the return values of the functions are promises and how to handle them.

1 Like
10

Nah it’s something I shoulda known, thanks for everything you’ve done so far! I’ll give it another try right now.

Do you know if StructuredData are shareable / publicly viewable? Trying to just make something that can be seen by others. Like a twitter status.

Doesn’t have to be transferrable, just visible to other people somehow.

Can that be achieved with SD (or anything at this point)?

11

Well, you bring up a good point. What level of knowledge should be assumed in the tutorials?

Do we want to attract beginning programmers? I’ve been thinking a lot about this since I began programming two years ago and what I might like to see in a tutorial.

Regarding viewable SD’s, when getting a Cipher Options handle, choose PLAIN as the encryption option.

[Edit: I’ll be back on my computer asap. I’m on baby duty this morning. Eager to run some tests on my code and to update readme]

2 Likes
12

That’s definitely what I’m aiming for.

Once I understand all of safe-js (think I’m over half way there) then my goal is going to be breaking it down into the easiest steps, so anyone who has any familiarity at all with html css &/or js can start making SAFE web apps by copying and pasting a few lines.

Working on a very attractive looking website with a great design to bring this vision across :slight_smile: that’s how low I aim to bring the knowledge barrier

awesome that’s great, looks like SAFEtwitter is on the horizon!!

1 Like
13

uughh i swear being right on the edge of it and having zero idea where to go is infuriatingggggg…

		function createSD() {
			window.safeCipherOpts.getHandle(auth.token, 'SYMMETRIC').then( response =>
    {
    	var handle = console.log( "longNameResponse", response )
        window.safeStructuredData.create(auth.token, 'eyJhbGciOiJIUzInniJ9.eyJpZCI6Im5RT1poRFJ2VUFLRlVZMzNiRTlnQ25VbVVJSkV0Q2lmYk4zYjE1dXZ2TlU9In0.OTKcHQ9VUKYzBXH_MqeWR4UcHFJV-xlllR68UM9l0b4', 'testdatafilledhere', handle);
    });
		}

that’s my new function, and this stuff is totally not my area so bear with me. just trying to successfully create a SD. slapping myself in the face i swear :stuck_out_tongue: wish there was at least one place on the whole internet that had a documented process of creating a safe-js SD… I know it’s the early days of SAFE but can’t believe there’s nothing, it hurts :sob:

i’ll just continue to try things eternally :stuck_out_tongue: as usual

14

handle should be set equal to response.payload.data.handleId

Use console.log for testing purposes to confirm the returned value.

1 Like
15

Awesome I can’t thank you enough, where did you learn that by the way?

1 Like
16

Anytime! Whenever you get ideas like this, please shout out to me. I love playing and building with this stuff.

I learned it by tinkering with the existing tutorials, reading the source code, reading API docs, and then building my apps.

17

yes it definitely is fun! I’m dedicated full time to SAFE so I want to expand the types of apps I can offer on it.

you must be smarter than me,

I went through them and tried but couldn’t see how I could reproduce any parts of them in safe-js

keeps saying “response is not defined,” do I need to add my GET function in there somewhere? didn’t work last time but I can try again

18

The kid is asleep, making mad dash to my code! Banzaaaaaiiiiiii!!!

Let me run some tests on my end. Is your code in a public repo? If so, send it over so I can take look.

19

that’s rough hard when u need to balance things like that I applaud you!

On a new pc let me install git real quick…

EDIT: THIS IS MY REPO. It’s only a .html page. You can see it live and interact with it on SAFE at safe://structdata.wom5/. Couldn’t get the Create StructuredData button to work yet.

20

Could anyone help?

I promise I’m not trying to bother ppl but I would like a tiny bit of help on this.

I’ve already made 3 public apps with just my limited amount of safe-js, so if the more knowledgeable people here just throw me a bone I’ll be able to make many more for you all! Just trying to support SAFE here :slight_smile:

If anyone can just walk me through creating and GETting a SD with safe-js I promise I’ll use that to make many more SAFE apps.

I’ll tag a few people to reach out @joshuef @happybeing @maidsafe @MaidSafe