Share workspace with a link?

[andrew]

Hi,

I currently have a Blockly web app/game and I'm looking to add the ability for users to share their creations. 

Our app is built using Blockly with P5. Right now we're injecting the workspace into an HTML file. It gets injected from a separate toolbox.js, which uses JSON to setup the blocks for the workspace.

I would like for them to be able to press a "share" button that will give them a link they can send to someone. When someone clicks on the link, it will send them to the state that the workspace was in when it was saved. 

Has anyone done something like this, or know of how I should start tackling this? I've been researching but am at a but of a loss on how to approach this.

Thanks,

Andrew

[Maribeth Moffatt]

Hello!

You can save and load the state of the Blockly workspace to/from JSON or XML (with JSON being recommended). If you save the data in a database, you can associate it with an id so that you can load the same data later from a URL. What you do with the data after you generate it using Blockly's serialization APIs is outside the scope of Blockly though, so you might get more specific answers in a more general web development or database design-focused space. Let us know if you have other questions!

Best,

Maribeth

[fajar rokhman]

Hi,

If you work with static files, with no database, then you can save the workspace, stringify, and encode as url. This will create a huge url with  data but it works. 

to create the link:

            let saveobj = Blockly.serialization.workspaces.save(Index.workspace);

            let saveStr = JSON.stringify(saveobj);

            let saveEncoded = encodeURIComponent(saveStr);

            let url = window.top.location.pathname;

            console.group('share');

            console.log(url + '?share=' + saveEncoded, '_blank');

            console.groupEnd();

the link will be available in console.log

for the page that open that link, you can use this code.

        let query = location.search.slice(1);

        let queryAr = query.split('&');

        let kvAr: { key: string, value: string }[] = [];

        queryAr.forEach((item) => {

            let ar = item.split('=');

            kvAr.push({

                key: ar[0],

                value: ar[1]

            })

        })

        kvAr.forEach((item) => {

            if (item.key == 'share') {

                let value = decodeURIComponent(item.value);

                let code = JSON.parse(value);

                Blockly.serialization.workspaces.load(code, Index.workspace);

            }

        })

Index.workspace is the reference to the workspace.

You can use url shortener to shorten the url. this must be done manually.

sample url:
https://shorturl.at/DPQ23

this url will open workspace for my project and setup the workspace based on data in url.

the best solution would be to setup a database, otherwise, this just work.

[andrew]

Thanks Maribeth and Rok!

I was originally thinking of working the data into the url and use static files, but I agree with both of you that setting up a database that stores the JSON with an ID is the way to go.

Thanks again :)