frankhinek/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Protocol Example with Alice & Bob DWNs</title>
  <script src="https://unpkg.com/@tbd54566975/web5"></script>
 </head>

<body>
  nothing to see here
</body>
<script type="module">
import { Web5 } from 'https://unpkg.com/@tbd54566975/web5@0.6.0/dist/browser.mjs';

let response;
let web5 = new Web5;

/*********************************************************************************************************************
 * Create DIDs for Alice and Bob
 *********************************************************************************************************************/

let alice = await web5.did.create('ion');
console.log('[ALICE] DID:', alice.id);

let bob = await web5.did.create('ion');
console.log('[BOB] DID:', bob.id);

/*********************************************************************************************************************
 * Add DIDs to DID Manager
 *********************************************************************************************************************/

await web5.did.manager.set(alice.id, {
  connected: true,
  endpoint: 'app://dwn',
  keys: {
    ['#dwn']: {
      keyPair: alice.keys.find(key => key.id === 'dwn').keyPair,
    },
  },
});

await web5.did.manager.set(bob.id, {
  connected: true,
  endpoint: 'app://dwn',
  keys: {
    ['#dwn']: {
      keyPair: bob.keys.find(key => key.id === 'dwn').keyPair,
    },
  },
});

/*********************************************************************************************************************
 * Define Protocol
 *********************************************************************************************************************/

// Define the chat protocol
const protocol = 'chat';
const definition =  {
  "labels": {
    "post": {
      "schema": "chat/post"
    }
  },
  "records": {
    "post": {
      "allow": {
        "anyone": {
          "to": [
            "write",
            "read"
          ]
        }
      }
    }
  }
};

/*********************************************************************************************************************
 * Install the Protocols to Alice's and Bob's DWNs
 *********************************************************************************************************************/

response = await web5.dwn.protocols.configure(alice.id, {
  author: alice.id,
  message: { protocol, definition },
});
console.log('[ALICE] Protocols Configure:', response.status.detail);

response = await web5.dwn.protocols.configure(bob.id, {
  author: bob.id,
  message: { protocol, definition },
});
console.log('[BOB] Protocols Configure Response:', response.status.detail);

/*********************************************************************************************************************
 * Write record to Alice's DWN
 *********************************************************************************************************************/

const { record } = await web5.dwn.records.create(alice.id, {
  author: alice.id,
  data: { message: 'Hello, Bob!' },
  message: {
    protocol: 'chat',
    schema: 'chat/post',
    dataFormat: 'application/json'
  }
});
console.log('[ALICE] Created Record:', record.toJSON());

console.log('[ALICE] Record from Alice DWN:', await record.data.json());

/*********************************************************************************************************************
 * Bob reads the record from Alice's DWN
 *********************************************************************************************************************/

console.log(record.id);
const result = await web5.dwn.records.read(alice.id, {
  author: bob.id,
  message: {
    recordId: record.id,
  },
});

console.log('[BOB] Record from Alice DWN Result:', result.status.detail);
console.log('[BOB] Record from Alice DWN Record:', result.record.toJSON());

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Protocol Example with Alice & Bob DWNs</title>
	<script src="https://unpkg.com/@tbd54566975/web5"></script>
	</head>

	<body>
	nothing to see here
	</body>
	<script type="module">
	import { Web5 } from 'https://unpkg.com/@tbd54566975/web5@0.6.0/dist/browser.mjs';

	let response;
	let web5 = new Web5;

	/*********************************************************************************************************************
	* Create DIDs for Alice and Bob
	*********************************************************************************************************************/

	let alice = await web5.did.create('ion');
	console.log('[ALICE] DID:', alice.id);

	let bob = await web5.did.create('ion');
	console.log('[BOB] DID:', bob.id);

	/*********************************************************************************************************************
	* Add DIDs to DID Manager
	*********************************************************************************************************************/

	await web5.did.manager.set(alice.id, {
	connected: true,
	endpoint: 'app://dwn',
	keys: {
	['#dwn']: {
	keyPair: alice.keys.find(key => key.id === 'dwn').keyPair,
	},
	},
	});

	await web5.did.manager.set(bob.id, {
	connected: true,
	endpoint: 'app://dwn',
	keys: {
	['#dwn']: {
	keyPair: bob.keys.find(key => key.id === 'dwn').keyPair,
	},
	},
	});

	/*********************************************************************************************************************
	* Define Protocol
	*********************************************************************************************************************/

	// Define the chat protocol
	const protocol = 'chat';
	const definition = {
	"labels": {
	"post": {
	"schema": "chat/post"
	}
	},
	"records": {
	"post": {
	"allow": {
	"anyone": {
	"to": [
	"write",
	"read"
	]
	}
	}
	}
	}
	};

	/*********************************************************************************************************************
	* Install the Protocols to Alice's and Bob's DWNs
	*********************************************************************************************************************/

	response = await web5.dwn.protocols.configure(alice.id, {
	author: alice.id,
	message: { protocol, definition },
	});
	console.log('[ALICE] Protocols Configure:', response.status.detail);

	response = await web5.dwn.protocols.configure(bob.id, {
	author: bob.id,
	message: { protocol, definition },
	});
	console.log('[BOB] Protocols Configure Response:', response.status.detail);

	/*********************************************************************************************************************
	* Write record to Alice's DWN
	*********************************************************************************************************************/

	const { record } = await web5.dwn.records.create(alice.id, {
	author: alice.id,
	data: { message: 'Hello, Bob!' },
	message: {
	protocol: 'chat',
	schema: 'chat/post',
	dataFormat: 'application/json'
	}
	});
	console.log('[ALICE] Created Record:', record.toJSON());

	console.log('[ALICE] Record from Alice DWN:', await record.data.json());

	/*********************************************************************************************************************
	* Bob reads the record from Alice's DWN
	*********************************************************************************************************************/

	console.log(record.id);
	const result = await web5.dwn.records.read(alice.id, {
	author: bob.id,
	message: {
	recordId: record.id,
	},
	});

	console.log('[BOB] Record from Alice DWN Result:', result.status.detail);
	console.log('[BOB] Record from Alice DWN Record:', result.record.toJSON());

	</script>
	</html>