Once connected to the free DWN, this chapter will walk you through the process of creating records. You’ll learn the data structures involved, the syntax for record creation in JavaScript, and the best practices for ensuring data integrity.
By the end of this chapter, you will have the skills needed to generate and store data effectively on your Decentralized Web Node.
You can use the create function to obtain records and from a DWN.
A recap,
Up to now our index.js file look as on the image bellow
Before writing our first code, let's explore different ways of creating records on a DWN
Create a text record
const { record: textRecord } = await web5.dwn.records.create({
data: "This is a text record",
message: {
dataFormat: "text/plain",
},
});
Create a json record
const { record: jsonRecord } = await web5.dwn.records.create({
data: {
content: 'This is the content',
description: 'Here we have a Json recod!',
},
message: {
dataFormat: 'application/json',
},
});
"Note: As we progress with creating images and files on the DWN, we will adjust our project settings and include one image and one file."
- add an image file and name it we5.png
- add a txt file and name it web5.txt
our work space should look as follow
now create 2 variables in the index.js file to hold our image and text file
// index.js
//...
// Image file
const imageFile = new File(["test image content"], "web5.png", {
type: "image/png",
});
const mockImage = {
currentTarget: {
files: [imageFile], // Simulate a file input
},
};
// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
type: "text/plain",
});
const mockTxt = {
currentTarget: {
files: [txtFile], // Mimic the file input's files array
},
};
Create Image record
const createBlobRecord = async (event) => {
const blob = new Blob(event.currentTarget.files, { type: "image/png" });
const { status, record } = await web5.dwn.records.create({
data: blob,
message: {
schema: "https://test.org/schema/image",
dataFormat: "image/png",
},
});
return record;
};
// Call the function and create the image on the DWN
createBlobRecord(mockImage).then((record) => {
console.log(record);
});
Create file record
const createFileRecord = async (event) => {
const file = event.currentTarget.files[0];
const { status: fileStatus, record: fileRecord } =
await web5.dwn.records.create({
data: file,
message: {
schema: "https://test.org/schema/file",
dataFormat: "application/json",
},
});
return fileRecord;
};
// Call the function and create the file on the DWN
createFileRecord(mockTxt).then((fileRecord) => {
console.log(fileRecord);
});
- Create mixed record
Mixed record are record containing at the same time text, images, files, ...
const createMixedRecord = async (file, image, text) => {
const { status, record } = await web5.dwn.records.create({
data: {
image,
file,
text,
},
message: {
schema: "https://test.org/schema/mixed-data",
dataFormat: "application/json",
},
});
return record;
};
createMixedRecord(mockImage, mockTxt, "Mixed data");
- Create a record form an existing record
You can create a new version of a record while maintaining a link to the version of the original record.
const { record: newVersionRecord } = await web5.dwn.records.createFrom({
record: originalRecord,
data: 'I am a new version of the original record!',
message: {
dataFormat: 'text/plain',
published: true,
},
});
- Create a record with tags
You can assign tags to records to enable filtering by specific keywords
const { record } = await web5.dwn.records.create({
data: 'Chocolate Chip Cookies',
message: {
dataFormat: 'application/json',
tags: {
dishType: 'Dessert',
dietaryRestriction: 'Contains Gluten',
},
},
});
Note
- when creating a record on a DWN you can choose to make it public or private. but it's private by default.
- you can decide when to publish that record, directly or later. by default it's published directly
all you have to do is to add the following key into the message object when create a record
// ....
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
// Format the date and time in YYYY-MM-DDThh:mm:ss.ssssssZ format
const formattedDate = tomorrow.toISOString().replace(/\.\d{3}Z$/, '.000000Z');
{
// ....
message: {
// .....
published: true, // make public
datePublished: formattedDate // publish at a specific moment
},
}
Implementation in our project
For our project will proceed with the mixed data to have everything in simple json form
update the index.js file and add the following code
// index.js
// ...
// Image file
const imageFile = new File(["test image content"], "web5.png", {
type: "image/png",
});
const mockImage = {
currentTarget: {
files: [imageFile], // Simulate a file input
},
};
// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
type: "text/plain",
});
const mockTxt = {
currentTarget: {
files: [txtFile], // Mimic the file input's files array
},
};
// Create Mixed record
const createMixedRecord = async (file, image, text) => {
const { status, record } = await web5.dwn.records.create({
data: {
image,
file,
text,
},
message: {
schema: "https://test.org/schema/mixed-data",
dataFormat: "application/json",
},
});
return record;
};
// run the function with data
createMixedRecord(mockImage, mockTxt, "Mixed data");
and ... Voilà
at this point your index.js file should look as bellow
import { Web5 } from "@web5/api";
const { web5, did } = await Web5.connect({
didCreateOptions: {
dwnEndpoints: ["https://dwn.gcda.xyz"], // Community DWN instance on Google Cloud
},
registration: {
onSuccess: () => {
console.log("\n\nConnected successfully");
},
onFailure: (error) => {
console.error("Connection failed:", error);
},
},
});
console.log("\nConnected did:", did);
// Image file
const imageFile = new File(["test image content"], "web5.png", {
type: "image/png",
});
const mockImage = {
currentTarget: {
files: [imageFile], // Simulate a file input
},
};
// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
type: "text/plain",
});
const mockTxt = {
currentTarget: {
files: [txtFile], // Mimic the file input's files array
},
};
// Create Mixed record
const createMixedRecord = async (file, image, text) => {
const { status, record } = await web5.dwn.records.create({
data: {
image,
file,
text,
},
message: {
schema: "https://test.org/schema/mixed-data",
dataFormat: "application/json",
},
});
return record;
};
// run the function with data
createMixedRecord(mockImage, mockTxt, "Mixed data");
Good job so far