-### 4. Write DWN Records
+## 2. Write DWN Records
-Now you’re able to write records in the user's [Decentralized Web Node(DWN)](/docs/web5/learn/decentralized-web-nodes).
+Now you’re able to write records in the user's [Decentralized Web Node(DWN)](/docs/web5/learn/decentralized-web-nodes).
A DWN is a personal data store - a platform for messages, pictures, videos, medical records, and just about any content a user may want to store.
@@ -11,25 +11,22 @@ A DWN is a personal data store - a platform for messages, pictures, videos, medi
Your app should not store users' data in your centralized database. Instead, their data should be stored in their DWN. This is how the user retains ownership over their content. Through permissions, users can decide which apps can read, write, and delete content from their DWN.
-The DWN exists in local storage under the name `dwn-info`. The DWN persists across browser sessions and can be synched across a user's devices.
+The DWN exists in local storage under the name `dwn-info`. The DWN persists across browser sessions and can be synched across a user's devices.
-A user can host their DWN in mulitple locations. The Web5 SDK is both browser and Node.js compliant, meaning you can use the same APIs on both client side and serverside.
+A user can host their DWN in mulitple locations. The Web5 SDK is both browser and Node.js compliant, meaning you can use the same APIs on both client side and serverside.
-
Add the following to `index.js`:
```js
-const {record} = await web5.dwn.records.create(did.id, {
- author: did.id,
- data: "Hello Web5",
- message: {
- dataFormat: 'text/plain',
- },
+const { record } = await web5.dwn.records.create({
+ data: "Hello Web5",
+ message: {
+ dataFormat: 'text/plain',
+ },
});
```
-
Test your code
@@ -56,4 +53,4 @@ Enter "Hello Web5" in the input field and click "Run" to write a record to the s
#### Try it!
-
\ No newline at end of file
+
diff --git a/docs/web5/_quickstart-06-read-record.mdx b/docs/web5/_quickstart-06-read-record.mdx
index 1b46bc93f..8657f631e 100644
--- a/docs/web5/_quickstart-06-read-record.mdx
+++ b/docs/web5/_quickstart-06-read-record.mdx
@@ -1,10 +1,9 @@
-Test your code
-
-To see the DWN records that have the text/plain data format, add the following line to index.js:
-
-```js
-console.log('query result', queryResult);
-```
-
- Then from the terminal, run:
- ```bash
- node src/index.js
- ```
-
-Your output will resemble:
-
-```js
-query result {
- status: { code: 200, detail: 'OK' },
- entries: [ _Record {} ],
- data: undefined,
- message: {
- recordId: null,
- descriptor: {
- interface: 'Records',
- method: 'Query',
- dateCreated: '2023-04-25T18:52:46.648765Z',
- filter: [Object]
- }
- }
-}
-```
-
-
-
-
-Click "Run!" to query the sandbox DWN for records with an `image/png` data format:
diff --git a/docs/web5/_quickstart-10-next-steps.mdx b/docs/web5/_quickstart-10-next-steps.mdx
index d51b6e781..316342227 100644
--- a/docs/web5/_quickstart-10-next-steps.mdx
+++ b/docs/web5/_quickstart-10-next-steps.mdx
@@ -3,15 +3,12 @@
## Summary
Congrats! You've just created a local DWN to serve as your user's
-personal data store.
-
-Given a user's DID and appropriate permissions, your app can read, write, or delete data from the user's DWN, while
-leaving them in full control of their content. Other apps can query local storage to determine if the user already has a DWN on their device, and
-can also read and write from this same data store - essentially, making the user's data portable across multiple applications.
+personal data store. Given a user's DID and appropriate permissions, your app can read, write, or delete data from the user's DWN, while
+leaving them in full control of their content.
:::info
* [Download the completed index.js file](/files/index.txt)
-* [View source code for the interactive sandbox of this Quickstart](https://raw.githubusercontent.com/TBD54566975/web5-quickstart-widgets/0.6.0/index.html)
+* [View source code for the interactive sandbox of this Quickstart](https://raw.githubusercontent.com/TBD54566975/web5-quickstart-widgets/0.7.0/index.html)
* [Run interactive sandbox directly in your browser](https://moonlit-centaur-0d7b4f.netlify.app/)
:::
diff --git a/docs/web5/build/apps/todo-app-tutorial.mdx b/docs/web5/build/apps/todo-app-tutorial.mdx
index 4951e5ed0..ad1518f43 100644
--- a/docs/web5/build/apps/todo-app-tutorial.mdx
+++ b/docs/web5/build/apps/todo-app-tutorial.mdx
@@ -13,7 +13,8 @@ Download a copy of the skeleton ToDo app by running:
```bash
git clone https://github.com/TBD54566975/web5-tutorials.git
cd web5-tutorials
-git checkout tags/0.1.1 -b todo-app-tutorial
+git checkout tags/0.2.0 -b todo-app-tutorial
+cd todo-app
```
In this tutorial, you’ll work through completing the `/todo-app/src/App.vue` file to use `web5.js`.
@@ -26,7 +27,7 @@ If you’d like to skip ahead and see the finished version of this tutorial, you
```bash
git clone https://github.com/TBD54566975/incubating-web5-labs.git
cd incubating-web5-labs
-git checkout tags/0.1.0 -b todo-app-finished
+git checkout tags/0.2.0 -b incubating-web5-labs-todo-app
cd todo-app
npm install
npm run dev
@@ -39,10 +40,14 @@ There is also a hosted example deployed at [https://unrivaled-crumble-56ce70.net
## Setup
+Add `Web5` to package.json in the `dependencies` section:
+```bash
+ "@tbd54566975/web5": "0.7.2",
+```
+
Download the necessary packages by running these commands:
```bash
-cd todo-app
npm install
npm run dev
```
@@ -67,17 +72,24 @@ Because we’ve built this sample using `Vue.js`, you’ll find both the HTML st
## Initialize Constants and Variables
-First we'll set up some instances to hold data you'll use throughout your application. Copy the following block into the template, under the `import` statements, in the section marked `// Initialize variables here`.
+Open `src/Vue.js` in your editor and add this next to the other imports:
+```js
+import { Web5 } from '@tbd54566975/web5';
+```
+
+First we'll set up instances to hold data you'll use throughout your application.
+
+Copy the following block and paste under all `import` statements in `src/Vue.js`:
```js
-const web5 = new Web5();
-const todos = ref([]);
+let web5;
let myDid;
+const todos = ref([]);
```
-The `web5` instance is the single entry point for all Web5 operations. You've also set up a `todos` array to hold your ToDos, and a variable to remember the app user's decentralized identifier (DID) as `myDid`, which you'll create or load in a moment.
+The `web5` object is the single entry point for all Web5 operations. You've also set up a `todos` array to hold your ToDos, and a variable to remember the app user's decentralized identifier (DID) as `myDid`.
-## Loading or Creating User Data
+## Create DID and Web5 Instance
The first time a user accesses your ToDo app, you’ll need to handle creating an “account” for them - this means ensuring they have a DID and DWN available to access their app data. Once they come back for subsequent sessions, you’ll want to fetch and load that data for them.
@@ -85,73 +97,44 @@ Add to `src/App.vue`:
```js
onBeforeMount(async () => {
- let registerInfo;
- // Load DWN DID from local storage or create a new one
- if(localStorage.getItem('registerInfo') && localStorage.getItem('myDid')){
- // User has an "account," so load their data
- registerInfo = JSON.parse(localStorage.getItem('registerInfo'));
- myDid = JSON.parse(localStorage.getItem('myDid'));
- } else {
- // User does not have an "account," so create one for them
- myDid = await web5.did.create('ion');
- registerInfo = {
- connected : true,
- endpoint : 'app://dwn',
- keys: {
- ['#dwn']: {
- keyPair: myDid.keys[0].keyPair,
- },
- }
- };
-
- localStorage.setItem('myDid', JSON.stringify(myDid));
- localStorage.setItem('registerInfo', JSON.stringify(registerInfo));
- }
-
- // Associate DID with DWN
- await web5.did.manager.set(myDid.id, registerInfo);
-
- // Put DWN query code here; this is covered in the next section
-});
+ ({ web5, did: myDid } = await Web5.connect());
```
-In the snippet above, we’re using the `Vue.js` -provided `localStorage` to attempt to fetch the user’s `registerInfo` from local storage.
-
-If the data is available we can use that to access their DWN via `Web5.js`, otherwise we create a new decentralized identifier (DID) for them and a DWN to store their data.
-
## Displaying Todos
-Once you’ve called `web5.did.manager.set()`, you can now make calls to the DWN to fetch, write, and delete data. To load your user’s existing ToDos, call:
+You can now make calls to the DWN to fetch, write, and delete data. To load your user’s existing ToDos, call:
```js
- // DWN query code
-
- // Populate Todos from DWN
- const queryResponse = await web5.dwn.records.query(myDid.id, {
- author : myDid.id,
- message : {
- filter: {
- schema: 'http://some-schema-registry.org/todo'
- },
- dateSort: 'createdAscending'
- }});
-
- // Put ToDo object code here; this is covered in the next section
+onBeforeMount(async () => {
+ ...
+ // Populate ToDos from DWN
+ const { records } = await web5.dwn.records.query({
+ message: {
+ filter: {
+ schema: 'http://some-schema-registry.org/todo'
+ },
+ dateSort: 'createdAscending'
+ }
+ });
```
Once you’ve loaded the query data, you can map this data from the DWN into an object for your app to use:
```js
- // ToDo object code
-
- // Add entry to Todo array
- for (let record of queryResponse.entries) {
- const todo = { record, data: await record.data.json(), id: record.id };
+onBeforeMount(async () => {
+ ...
+ // Add entry to ToDos array
+ for (let record of records) {
+ const data = await record.data.json();
+ const todo = { record, data, id: record.id };
todos.value.push(todo);
}
+});
```
-Now that your app user's ToDos are stored in their DWN, you can display them by using the `todos` object. In this example, you can do it by adding the following HTML code to the Vue app below the JS, just as you would in any non-Web5 app. In the template there is a comment marked `` where this code block fits nicely:
+Now that your app user's ToDos are stored in their DWN, you can display them by using the `todos` object. In this example, you can do it by adding the following HTML code to the Vue app below the JS, just as you would in any non-Web5 app.
+
+In the template where you see `` add this:
```jsx
@@ -171,10 +154,11 @@ Now that your app user's ToDos are stored in their DWN, you can display them by
Note that this UI code fulfills more than just loading the ToDos - it also provides the ability to toggle completion status and delete ToDos, which we’ll get to in a bit.
:::
-## Adding Todos
+## Adding ToDos
-To allow for add functionality, begin by creating the UI needed to add ToDos. In the template there is a section marked `` where this block may go:
+To allow for add functionality, begin by creating the UI needed to add ToDos.
+In the template add this code block to ``:
```jsx