{"_id":"57ad3ce53f00b90e00b7c8f6","project":"5656d449a795770d00a2aec1","version":{"_id":"5721e9c849df4f0e0052831f","hasReference":true,"project":"5656d449a795770d00a2aec1","hasDoc":true,"__v":1,"createdAt":"2016-04-28T10:45:28.369Z","releaseDate":"2016-04-28T10:45:28.369Z","categories":["5721e9c849df4f0e00528320","5721e9c849df4f0e00528321","5721e9c849df4f0e00528322","5721e9c849df4f0e00528323","5721e9c849df4f0e00528324","5721e9c849df4f0e00528325","5721e9c849df4f0e00528326","5721e9c849df4f0e00528327","5721e9c849df4f0e00528328","5721e9c849df4f0e00528329"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.5.0","version":"0.5"},"__v":0,"category":{"_id":"5721e9c849df4f0e00528323","project":"5656d449a795770d00a2aec1","__v":0,"version":"5721e9c849df4f0e0052831f","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-02-25T15:38:48.526Z","from_sync":false,"order":1,"slug":"safe-apps","title":"SAFE Demo App"},"parentDoc":null,"user":"54ad4a56f6f5b10b0066dc86","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-12T03:05:09.216Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"This demo app demonstrates some of the initial key features exposed by the SAFE Network (Public ID, Public Data and Private Data).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/400400a-Screen_Shot_2016-08-12_at_9.08.36_AM.png\",\n        \"Screen Shot 2016-08-12 at 9.08.36 AM.png\",\n        2020,\n        1400,\n        \"#ebebeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manage Network Data\"\n}\n[/block]\nClick on **Manage Network Data** to upload private and public data to the SAFE Network.\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Current limitation\",\n  \"body\": \"When uploading files using SAFE Demo App, the maximum file size is **25 MB per file**.\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/11a6db1-Screen_Shot_2016-08-11_at_11.07.58_PM.png\",\n        \"Screen Shot 2016-08-11 at 11.07.58 PM.png\",\n        2020,\n        1400,\n        \"#eaeaeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Upload Private Data\"\n}\n[/block]\nClick on **Private folder** to access your private data. Then click on the **+** sign to see a dropdown menu with two options: **Upload Directory** and **Upload File**. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0b4a5ec-Screen_Shot_2016-08-11_at_11.08.30_PM.png\",\n        \"Screen Shot 2016-08-11 at 11.08.30 PM.png\",\n        2020,\n        1400,\n        \"#ebeaeb\"\n      ]\n    }\n  ]\n}\n[/block]\nTo upload a file, click on **Upload File** and select the file you want to upload.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c403007-Screen_Shot_2016-08-12_at_3.23.55_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.23.55 AM.png\",\n        3230,\n        1734,\n        \"#2f3b4c\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce the file is uploaded, you can access it from any computer (by logging in to your SAFE Network account via Launcher). To download the file, simply double-click on it.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/88cc3e2-Screen_Shot_2016-08-12_at_3.25.04_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.25.04 AM.png\",\n        2944,\n        1724,\n        \"#324054\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Upload Public Data\"\n}\n[/block]\nClick on **Public folder** to access your public data. Then click on the **+** sign to see a dropdown menu with two options: **Upload Directory** and **Upload File**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4c2a65c-Screen_Shot_2016-08-12_at_3.27.35_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.27.35 AM.png\",\n        2020,\n        1400,\n        \"#ebeaeb\"\n      ]\n    }\n  ]\n}\n[/block]\nTo upload a directory, click on **Upload Directory** and select the folder you want to upload.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e2f1f97-Screen_Shot_2016-08-12_at_3.28.25_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.28.25 AM.png\",\n        2658,\n        1766,\n        \"#344050\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce the folder is uploaded, you can access it from any computer (by logging in to your SAFE Network account via Launcher). To browse a folder, simply double-click on it.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ca65806-Screen_Shot_2016-08-12_at_3.41.04_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.41.04 AM.png\",\n        2020,\n        1400,\n        \"#ebeaeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manage Websites\"\n}\n[/block]\nThe first time you click on **Manage Websites**, you will see this screen:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/79042cc-Screen_Shot_2016-08-12_at_9.15.01_AM.png\",\n        \"Screen Shot 2016-08-12 at 9.15.01 AM.png\",\n        2020,\n        1400,\n        \"#ebebeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create Public ID\"\n}\n[/block]\nEnter the **Public ID** you want to use for all apps and services on the SAFE Network.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6b4a2db-Screen_Shot_2016-08-12_at_9.12.20_AM.png\",\n        \"Screen Shot 2016-08-12 at 9.12.20 AM.png\",\n        2020,\n        1400,\n        \"#ebebeb\"\n      ]\n    }\n  ]\n}\n[/block]\nOnce your Public ID has been registered, you will see this screen:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d4891ea-Screen_Shot_2016-08-12_at_9.10.20_AM.png\",\n        \"Screen Shot 2016-08-12 at 9.10.20 AM.png\",\n        2020,\n        1400,\n        \"#ebebeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"You have created a Public ID!\",\n  \"body\": \"Now click on **CREATE NEW** and have a go at creating a website.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create a Service\"\n}\n[/block]\nEnter the **Service Name** you want to use for this SAFE website.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Service naming must be unique within your own Public ID\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Use www as a service name to create a SAFE website with no prefix\",\n  \"body\": \"If you create a service called `www`, you'll be able to access your Public ID without specifying a subdomain (e.g. you'll be able to load http://francis.safenet if the Public ID called `francis` contains a service called `www`).\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e0b12aa-Screen_Shot_2016-08-12_at_9.13.24_AM.png\",\n        \"Screen Shot 2016-08-12 at 9.13.24 AM.png\",\n        2020,\n        1400,\n        \"#ebebeb\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you previously [uploaded a website folder](#upload-public-data), you can choose to map it to your service. If you don't have a website folder, you can create one by clicking on **Template**. Or if you want to upload a new website folder, click on **Manage Network Data**.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Make sure your website folder contains an index.html file\",\n  \"body\": \"Your website folder needs to contain an `index.html` file, otherwise your SAFE website (e.g. http://test.francis.safenet) won't be accessible. `index.html` is the default file that is loaded when no file is specified in the URL.\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/fb7d15a-Screen_Shot_2016-08-12_at_3.43.13_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.43.13 AM.png\",\n        2020,\n        1400,\n        \"#eaeaea\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can click and change the text in this sample template.\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5f62957-Screen_Shot_2016-08-12_at_8.21.53_AM.png\",\n        \"Screen Shot 2016-08-12 at 8.21.53 AM.png\",\n        2020,\n        1400,\n        \"#4e7291\"\n      ]\n    }\n  ]\n}\n[/block]\nSelect the folder you want to use for this service and click on **PUBLISH WEBSITE**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5d6e6d1-Screen_Shot_2016-08-12_at_3.45.34_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.45.34 AM.png\",\n        2020,\n        1400,\n        \"#e8e9ea\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/47c208e-Screen_Shot_2016-08-12_at_3.45.51_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.45.51 AM.png\",\n        2020,\n        1400,\n        \"#7d7d7d\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Successfully Published!\",\n  \"body\": \"Your SAFE website is now publicly available to other SAFE Network users.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manage Services\"\n}\n[/block]\nCreate, edit, remap and view services you have tied into your Public ID.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f2f5e85-Screen_Shot_2016-08-12_at_3.46.33_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.46.33 AM.png\",\n        2020,\n        1400,\n        \"#ebeaeb\"\n      ]\n    }\n  ]\n}\n[/block]\nEach service associated with your Public ID forms a URL that can be used to view your SAFE website in a browser.\n\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Remember to set the proxy with the .pac file to view your SAFE website\",\n  \"body\": \"[Guide to setup a proxy on your machine](doc:proxy-setup)\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c219ce0-Screen_Shot_2016-08-12_at_3.48.54_AM.png\",\n        \"Screen Shot 2016-08-12 at 3.48.54 AM.png\",\n        4096,\n        2098,\n        \"#e8e6e2\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"You have now completed the SAFE Demo App walk through.\",\n  \"body\": \"Keep a look out on the [SAFE Network Forum](https://forum.safenetwork.io/) to see what exciting demo sites folks create and of course shout about your own!\"\n}\n[/block]","excerpt":"","slug":"demo-app","type":"basic","title":"Using SAFE Demo App"}

Using SAFE Demo App


This demo app demonstrates some of the initial key features exposed by the SAFE Network (Public ID, Public Data and Private Data). [block:image] { "images": [ { "image": [ "https://files.readme.io/400400a-Screen_Shot_2016-08-12_at_9.08.36_AM.png", "Screen Shot 2016-08-12 at 9.08.36 AM.png", 2020, 1400, "#ebebeb" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Manage Network Data" } [/block] Click on **Manage Network Data** to upload private and public data to the SAFE Network. [block:callout] { "type": "danger", "title": "Current limitation", "body": "When uploading files using SAFE Demo App, the maximum file size is **25 MB per file**." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/11a6db1-Screen_Shot_2016-08-11_at_11.07.58_PM.png", "Screen Shot 2016-08-11 at 11.07.58 PM.png", 2020, 1400, "#eaeaeb" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Upload Private Data" } [/block] Click on **Private folder** to access your private data. Then click on the **+** sign to see a dropdown menu with two options: **Upload Directory** and **Upload File**. [block:image] { "images": [ { "image": [ "https://files.readme.io/0b4a5ec-Screen_Shot_2016-08-11_at_11.08.30_PM.png", "Screen Shot 2016-08-11 at 11.08.30 PM.png", 2020, 1400, "#ebeaeb" ] } ] } [/block] To upload a file, click on **Upload File** and select the file you want to upload. [block:image] { "images": [ { "image": [ "https://files.readme.io/c403007-Screen_Shot_2016-08-12_at_3.23.55_AM.png", "Screen Shot 2016-08-12 at 3.23.55 AM.png", 3230, 1734, "#2f3b4c" ] } ] } [/block] Once the file is uploaded, you can access it from any computer (by logging in to your SAFE Network account via Launcher). To download the file, simply double-click on it. [block:image] { "images": [ { "image": [ "https://files.readme.io/88cc3e2-Screen_Shot_2016-08-12_at_3.25.04_AM.png", "Screen Shot 2016-08-12 at 3.25.04 AM.png", 2944, 1724, "#324054" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Upload Public Data" } [/block] Click on **Public folder** to access your public data. Then click on the **+** sign to see a dropdown menu with two options: **Upload Directory** and **Upload File**. [block:image] { "images": [ { "image": [ "https://files.readme.io/4c2a65c-Screen_Shot_2016-08-12_at_3.27.35_AM.png", "Screen Shot 2016-08-12 at 3.27.35 AM.png", 2020, 1400, "#ebeaeb" ] } ] } [/block] To upload a directory, click on **Upload Directory** and select the folder you want to upload. [block:image] { "images": [ { "image": [ "https://files.readme.io/e2f1f97-Screen_Shot_2016-08-12_at_3.28.25_AM.png", "Screen Shot 2016-08-12 at 3.28.25 AM.png", 2658, 1766, "#344050" ] } ] } [/block] Once the folder is uploaded, you can access it from any computer (by logging in to your SAFE Network account via Launcher). To browse a folder, simply double-click on it. [block:image] { "images": [ { "image": [ "https://files.readme.io/ca65806-Screen_Shot_2016-08-12_at_3.41.04_AM.png", "Screen Shot 2016-08-12 at 3.41.04 AM.png", 2020, 1400, "#ebeaeb" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Manage Websites" } [/block] The first time you click on **Manage Websites**, you will see this screen: [block:image] { "images": [ { "image": [ "https://files.readme.io/79042cc-Screen_Shot_2016-08-12_at_9.15.01_AM.png", "Screen Shot 2016-08-12 at 9.15.01 AM.png", 2020, 1400, "#ebebeb" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Create Public ID" } [/block] Enter the **Public ID** you want to use for all apps and services on the SAFE Network. [block:image] { "images": [ { "image": [ "https://files.readme.io/6b4a2db-Screen_Shot_2016-08-12_at_9.12.20_AM.png", "Screen Shot 2016-08-12 at 9.12.20 AM.png", 2020, 1400, "#ebebeb" ] } ] } [/block] Once your Public ID has been registered, you will see this screen: [block:image] { "images": [ { "image": [ "https://files.readme.io/d4891ea-Screen_Shot_2016-08-12_at_9.10.20_AM.png", "Screen Shot 2016-08-12 at 9.10.20 AM.png", 2020, 1400, "#ebebeb" ] } ] } [/block] [block:callout] { "type": "success", "title": "You have created a Public ID!", "body": "Now click on **CREATE NEW** and have a go at creating a website." } [/block] [block:api-header] { "type": "basic", "title": "Create a Service" } [/block] Enter the **Service Name** you want to use for this SAFE website. [block:callout] { "type": "warning", "title": "Service naming must be unique within your own Public ID" } [/block] [block:callout] { "type": "info", "title": "Use www as a service name to create a SAFE website with no prefix", "body": "If you create a service called `www`, you'll be able to access your Public ID without specifying a subdomain (e.g. you'll be able to load http://francis.safenet if the Public ID called `francis` contains a service called `www`)." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/e0b12aa-Screen_Shot_2016-08-12_at_9.13.24_AM.png", "Screen Shot 2016-08-12 at 9.13.24 AM.png", 2020, 1400, "#ebebeb" ] } ] } [/block] If you previously [uploaded a website folder](#upload-public-data), you can choose to map it to your service. If you don't have a website folder, you can create one by clicking on **Template**. Or if you want to upload a new website folder, click on **Manage Network Data**. [block:callout] { "type": "info", "title": "Make sure your website folder contains an index.html file", "body": "Your website folder needs to contain an `index.html` file, otherwise your SAFE website (e.g. http://test.francis.safenet) won't be accessible. `index.html` is the default file that is loaded when no file is specified in the URL." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/fb7d15a-Screen_Shot_2016-08-12_at_3.43.13_AM.png", "Screen Shot 2016-08-12 at 3.43.13 AM.png", 2020, 1400, "#eaeaea" ] } ] } [/block] You can click and change the text in this sample template. [block:image] { "images": [ { "image": [ "https://files.readme.io/5f62957-Screen_Shot_2016-08-12_at_8.21.53_AM.png", "Screen Shot 2016-08-12 at 8.21.53 AM.png", 2020, 1400, "#4e7291" ] } ] } [/block] Select the folder you want to use for this service and click on **PUBLISH WEBSITE**. [block:image] { "images": [ { "image": [ "https://files.readme.io/5d6e6d1-Screen_Shot_2016-08-12_at_3.45.34_AM.png", "Screen Shot 2016-08-12 at 3.45.34 AM.png", 2020, 1400, "#e8e9ea" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/47c208e-Screen_Shot_2016-08-12_at_3.45.51_AM.png", "Screen Shot 2016-08-12 at 3.45.51 AM.png", 2020, 1400, "#7d7d7d" ] } ] } [/block] [block:callout] { "type": "success", "title": "Successfully Published!", "body": "Your SAFE website is now publicly available to other SAFE Network users." } [/block] [block:api-header] { "type": "basic", "title": "Manage Services" } [/block] Create, edit, remap and view services you have tied into your Public ID. [block:image] { "images": [ { "image": [ "https://files.readme.io/f2f5e85-Screen_Shot_2016-08-12_at_3.46.33_AM.png", "Screen Shot 2016-08-12 at 3.46.33 AM.png", 2020, 1400, "#ebeaeb" ] } ] } [/block] Each service associated with your Public ID forms a URL that can be used to view your SAFE website in a browser. [block:callout] { "type": "warning", "title": "Remember to set the proxy with the .pac file to view your SAFE website", "body": "[Guide to setup a proxy on your machine](doc:proxy-setup)" } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/c219ce0-Screen_Shot_2016-08-12_at_3.48.54_AM.png", "Screen Shot 2016-08-12 at 3.48.54 AM.png", 4096, 2098, "#e8e6e2" ] } ] } [/block] [block:callout] { "type": "success", "title": "You have now completed the SAFE Demo App walk through.", "body": "Keep a look out on the [SAFE Network Forum](https://forum.safenetwork.io/) to see what exciting demo sites folks create and of course shout about your own!" } [/block]