Viewer apps, rendering public data

Apps
1

As opposed to editor apps, where you create and edit data, viewer apps are specifically designed to view data.

What

We need to read a part of a filesystem, which we don’t necessarily own, to get the data we want to present. Currently we can only work with public data, seeing we don’t have “shared private data” yet.

How

We can use the PublicTree or PublicFile class to render a public part of the filesystem. Given a username and a path, we need to do the following:

  1. Get the root CID for the user
  2. Get the CID for the public tree (need to investigate what the most efficient way is)
  3. Load public tree with the fromCID method
  4. Traverse to the part we want.
  5. Interact with data

Format

There’s a couple different formats I have in mind for this:

  1. A page that always loads the data for the same user, eg. “Steven’s Blog Posts”
  2. An app that can render anyone’s data, eg. “What artists did you listen to this year?”
  3. Same as #1 but then statically compiled via the command line
2

I think the easier way is to just load a local-only filesystem:

const rootCID = await dataRoot.lookup(username)
const fs = await FileSystem.fromCID(rootCID, {
    localOnly: true
})
const notes = await fs.ls(path.directory("public", "Documents", "Notes"))

This works fine for the moon-garden viewer apparently :slight_smile:

3

Hmm, but that will try to load a bunch more things we don’t need, or can’t use :thinking: For example, that loads the MMPT too.

4

Well, yeah, technically yes. But luckily the MMPT is loaded really lazily. So it only loads the very root IPFS block for the MMPT. All it’s children are kept as CIDs as long as they’re not needed, so the overhead is constant in relation to private filesystem size.

5

True, that works too. But I wanted to get the fastest load time, so I only load in what we need. It’s pretty easy too:

import { lookup } from "webnative/data-root"
import { getLinks } from "webnative/fs/protocol/basic"
import { PublicTree } from "webnative/fs/v1/PublicTree"

const cid = await lookup(username)
const publicCid = (await getLinks(cid)).public.cid

const publicTree = await PublicTree.fromCID(publicCid)
const playlist = await publicTree.get(pathToPlaylist)
1 Like
6

Updated example for Webnative 0.35/0.36

1 Like