Cool! Didn’t know you guys used a repository for the website. However, I can’t access it, so it must be a private repository. Might be worth making it public!
Hi @bzee, the site should be now public and you can able to access the repository now. Thanks for your support 
5 Likes
Hi @drehb, we wanted to make something very easy and basic so people can quickly start and have a simple app running in ~20mins or so, just so they can get the feeling of how an app get authorised and connects to the network, plus how it can make mutations. I agree we can add explanations for that other use case (and many others) but I would probably keep it separate within something like a “Next steps” section.
To sum up, many people have had the feeling that it’s very difficult to get started with an app and the main goal was to demonstrate with a simple tutorial that it’s not really the case, so keeping it simple is the key IMHO, then ofc you can add more instructions for advanced steps/concepts.
BTW, that’s true, one option is to serialise it as you mentioned it.
2 Likes
First impressions… very good. Usable on my medium tablet too.
Tutorial seems excellent. One thought I had was that screen shots might help clarify the development setup. Also, I’d go as far as to recommend an editor for each platform (Atom obvs 
) for those starting cold.
When you first start it can be really frustrating if you take a wrong turn because the steps are not really explicit and clear.
So for example, console showing both setting the set NODE_ENV and the command to start the browser, then what you see when it starts, then where to click to create account, and so on - each step until you are ready.
Also, I would separate the Development setup from the tutorial but I can see this may require more navigation. That presumably will be inevitable as more content is added.
The above are all suggestions, not things I think necessarily need to change. The only thing in that class for me was access to the Docs. The only link I found is in a footer when you scroll to the bottom of a page. I think that link should always be available - ie on the menu.
Finally another non vital suggestion, if not already planned: it might be worth trying to move the Docs page to a page in the hub website so you don’t actually leave the hub until you have to (eg when you click to go to the DOM or Nodejs API).
Note: all this relates to access via a medium-smallish tablet (using Firefox on Android) so maybe different to desktop.
Great work. The text was clear and easy to follow, which is hard to get right in my experience. Be good to see how newbies find it as well.
UPDATE: there’s a ‘What Now?’ item at the bottom of the Tutorial pop up menu, but that section doesn’t appear to have been written.
Also, that menu takes you to the text of each section but crops the heading. I think it is a better UX to have the heading visible when you navigate to a section.
3 Likes
I’m not a developer but this looks awesome to me. Is there a plan to increase visibility via SEO, Youtuber coverage or facebook/google ads? Perhaps target the relevant developer audience. My company uses them to improve on website traffic. Just a thought.
More… Nice job in the Discover section
One hurdle (again in tablet) under ‘Data Types’ was using such a complex UI. It’s not necessary and I think obscures the information.
The < > navigation is barely visible, and the need to click back and forth to read about first MD and then ID all created barriers, when just scrolling down would do the job.
Instead we’re asking the user to switch context, solve unnecessary unrelated problems, and then read the content and return to trying to assimilate something that I expect will be new idea layered upon new idea for most.
5 Likes
Thanks for your feedback @happybeing - I can’t see exactly which page you are referring to above? Which page is it please so we can get that sorted.
Thanks
1 Like
This sounds like a very good plan. The info as provided now was basically available before too, but I found it wasn’t really enough to get started making an actual app. Some items for “next steps” I’d suggest would be basic usage of containers and also basic usage of NFS. Simple examples of each of these fundamental things would be very useful when getting started.
1 Like
It’s the tutorial page - on my tablet: click on the hovering menu icon at the bottom right of the screen and the last item is ‘What now?’
Also, just visiting that page with desktop browser I have that menu on the right while I’m at the top of the screen. But it is fixed to the top, so not accessible once I’ve scrolled down which I think is not a good solution to navigation. I wouldn’t want it to slide either though as that tends to not be smooth and distracts - so I would suggest in page navigation might be better as part of the main navigation (e.g. drop menu button as part of the header), or a floating button similar to that on the tablet - although generally I don’t like floating furniture on a web page. I think it distracts and often doesn’t work well across devices. So my preference is to have all the navigation in one area (so as part of the header), but NOT drop down on hover. Click only!
Hope that helps. I think its a very nice site already.
2 Likes
We were thinking/considering to do this as well, and hopefully get a better UX for navigating the API’s functions.
2 Likes
Yes, but you wouldn’t necessarily aim at that with a quick start tutorial, if you go for any “Hello World!” tutorial they just show you how to print the string, they don’t teach you about class inheritance, or function overloading, etc., so this should/would be kinda a Hello World version of SAFE where you can then start learning about the other things, and don’t get me wrong, I fully agree we should start adding info about these other things in the site but without overwhelming the newbie.
4 Likes
Got ya! We will get this sorted! Thank you so much.
2 Likes
Yes, I can see the frustration you’d have by losing the menu on scroll down. Will get this looked into also. Cheers
2 Likes
It would be really handy to have a complete listing of /src/safenetwork.js
I’m trying to follow along with the web option on https://hub.safedev.org/platform/web/ but running into errors.
I don’t think they are related to my input of the various snippets but it would be very handy to have a complete code listing in one place to check
I’m using safe-browser-mock-v0.10.2-linux-x64 and the last night’s git clone of safe_examples.
EDIT The symptoms of the error are that the list of trips does not update to show the two hard-coded initial values and hence none of the CRUD appears to work.
The error I get in the console is
XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524790023455. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'localhost://p:5000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
willie@sputnik:~$ uname -a && node --version && npm -v
Linux sputnik 4.15.0-20-generic #21-Ubuntu SMP Tue Apr 24 06:16:15 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
v8.10.0
3.5.2
Ubuntu 18.04
willie@sputnik:~$ echo $NODE_ENV
dev
1 Like
@Southside, I assume you are getting the authorisation part correctly and you are able to authorise the app, right?
That particular error you shared can be ignored, but can you please confirm if you get some other type of error, perhaps related to not being able to connect to the network?
Also, please can you confirm you set the NODE_ENV=dev in the console where you are launching the browser?
For the sake of your verification I’m placing the complete code of src/safenetwork.js here, although I agree we could have it at the end of the tutorial:
let safeAppHandle;
async function authoriseAndConnect() {
let appInfo = {
// User-facing name of our app. It will be shown in
// the Authenticator user's interface
name: 'Hello SAFE Network',
// This is a unique ID of our app
id: 'net.maidsafe.tutorials.web-app',
version: '0.1.0',
vendor: 'MaidSafe.net Ltd.'
};
safeAppHandle = await window.safeApp.initialise(appInfo);
console.log('Authorising SAFE application...');
const authUri = await window.safeApp.authorise(safeAppHandle, {});
await window.safeApp.connectAuthorised(safeAppHandle, authUri);
console.log("Application connected to the network");
};
let mdHandle;
async function createMutableData() {
const typeTag = 15000;
mdHandle = await window.safeMutableData.newRandomPublic(safeAppHandle, typeTag);
const initialData = {
"random_key_1": JSON.stringify({
text: 'Scotland to try Scotch whisky',
made: false
}),
"random_key_2": JSON.stringify({
text: 'Patagonia before I\'m too old',
made: false
})
};
await window.safeMutableData.quickSetup(mdHandle, initialData);
};
async function getItems() {
const entriesHandle = await window.safeMutableData.getEntries(mdHandle);
let items = [];
await window.safeMutableDataEntries.forEach(entriesHandle, (key, value) => {
if (value.buf.length == 0) return;
const parsedValue = JSON.parse(value.buf);
items.push({ key: key, value: parsedValue, version: value.version });
});
return items;
};
async function insertItem(key, value) {
const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
await window.safeMutableDataMutation.insert(mutationHandle, key, JSON.stringify(value));
await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
}
async function updateItem(key, value, version) {
const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
await window.safeMutableDataMutation.update(mutationHandle, key, JSON.stringify(value), version + 1);
await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
};
async function removeItems(items) {
const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
items.forEach(async (item) => {
await window.safeMutableDataMutation.remove(mutationHandle, item.key, item.version + 1);
});
await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
};
module.exports = {
authoriseAndConnect,
createMutableData,
getItems,
insertItem,
updateItem,
removeItems
};
3 Likes
thnk you - on a conf call right now for RealJob but I’ll attend to this ASAP
Thank you for excellent quick response
1 Like
Hi @bochaco
Yes I do get a network error - amongst others
I am running:
willie@sputnik:~/projects/safe/safe_examples/safe_web_app_quick_start$ echo NODE_ENV
dev
willie@sputnik:~/projects/safe/safe_examples/safe_web_app_quick_start npm start
safe_web_app_quick_start@1.0.0 start /home/willie/projects/safe/safe_examples/safe_web_app_quick_start
neutrino start
Development server running on: http://localhost:5000
Build completed
This authenticates OK but shows 0 trips - I get the following in the console
Uncaught (in promise) Error: Unexpected (probably a logic error): Could not connect to the SAFE Network
at module.exports (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_error.js:19:10)
at ffi.Callback (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:63:22)
at /home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/ffi/lib/callback.js:66:25
at Function.proxy (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/ffi/lib/_foreign_function.js:59:14)
at Promise (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:72:14)
at Promise ()
at Object.app_registered (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:59:16)
at lib.decode_ipc_msg.then (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/api/auth.js:366:22)
at
17:24:10.133 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524846250129. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
17:24:18.176 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524846258169. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
17:24:34.200 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524846274195. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
17:24:46.904 p/:1 Uncaught (in promise) Error: Setup Incomplete. Connection not available yet.
at module.exports (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_error.js:19:10)
at SAFEApp.get connection [as connection] (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/app.js:319:13)
at MutableDataInterface.newMutation (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/api/mutable.js:620:48)
at /home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/beaker-plugin-safe-app/dist/api.js:2628:32
at
17:25:06.235 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524846306229. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
17:26:10.292 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524846370287. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Ok, perhaps it’s the same error I think I ran into a few times, that we need to look into.
Could you please try removing the mock file /tmp/MockVault and launching the browser again, create a new account and try again to load the app?
1 Like
OK I’ll give that a go
remove /tmp/MockVault
restart Safe Browser (mock) and make new acct
restart app
seems to be much the same…
[HMR] Waiting for update signal from WDS…
18:47:03.637 webpack-internal:///./src/safenetwork.js:20 Authorising SAFE application…
18:47:03.638 webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8009 Download the Vue Devtools extension for a better development experience:
18:47:03.639 webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8020 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at Production Deployment — Vue.js
18:47:03.643 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851223640. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:03.645 client?0485:176 [WDS] Disconnected!
close @ client?0485:176
18:47:04.748 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851224743. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:06.845 p/:1 Uncaught (in promise) Error: Unexpected (probably a logic error): Could not connect to the SAFE Network
at module.exports (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_error.js:19:10)
at ffi.Callback (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:63:22)
at /home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/ffi/lib/callback.js:66:25
at Function.proxy (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/ffi/lib/_foreign_function.js:59:14)
at Promise (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:72:14)
at Promise ()
at Object.app_registered (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/native/_app.js:59:16)
at lib.decode_ipc_msg.then (/home/willie/projects/safe/safe-browser-mock-v0.10.2-linux-x64/resources/app/node_modules/@maidsafe/safe-node-app/src/api/auth.js:366:22)
at
18:47:06.855 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851226849. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:10.897 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851230893. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:18.926 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851238920. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:18.926 sockjs.js?3600:1601 XHR failed loading: GET “http://localhost:5000/sockjs-node/info?t=1524851238920”.
AbstractXHRObject._start @ sockjs.js?3600:1601
(anonymous) @ sockjs.js?3600:1490
18:47:34.964 p/:1 XMLHttpRequest cannot load http://localhost:5000/sockjs-node/info?t=1524851254961. The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’. Origin ‘localhost://p:5000’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
18:47:34.964 sockjs.js?3600:1601 XHR failed loading: GET “http://localhost:5000/sockjs-node/info?t=1524851254961”.
AbstractXHRObject._start @ sockjs.js?3600:1601
(anonymous) @ sockjs.js?3600:1490
Ok, I’ll text you early next week and we can go on a HO to troubleshoot it. For some weird reason you are not able to connect to the mocked net. You can also try with the alpha2 network using the non-mock browser as well, it should work.
1 Like