Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web 3 profiles with near and ceramic #207

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"title": "Web 3 Profiles with NEAR and Ceramic",
"description": "Learn to integrate NEAR Personas in your applications. Built with Ceramic/NEAR, you can access a data object with information about your users and users can manage their personas in one location and have changes propagate everywhere.",
"imageUrl": "",
"categories": ["Ceramic", "Near"]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"proposalId": 221,
"slug": "web-3-profiles-with-near-and-ceramic",
"creator": "",
"authors": [
{
"name": "The Builder Dao",
"avatarUrl": "https://github.com/TheBuilderDAO.png",
"url": "https://builderdao.io",
"nickname": "TheBuilderDAO"
}
],
"reviewers": {
"reviewer1": {
"pda": "CQoq1xYCyvybG3pzQRvjWR9zAW9NDJ8gmcm5kt3cSfhM",
"pubkey": "waL5Z5LodiuKg6baWHf7myhD2tKHye8XoHERAQiJLGA",
"githubName": "sudo"
},
"reviewer2": {
"pda": "CQoq1xYCyvybG3pzQRvjWR9zAW9NDJ8gmcm5kt3cSfhM",
"pubkey": "waL5Z5LodiuKg6baWHf7myhD2tKHye8XoHERAQiJLGA",
"githubName": "sudo"
}
},
"content": {
"content/assets/template_regex.png": {
"name": "template_regex.png",
"path": "content/assets/template_regex.png",
"digest": "5082770ef0c236cf811a6e1dc8aa474fec777c0c3693eefdc943a333f04013c6"
},
"content/assets/example_image.png": {
"name": "example_image.png",
"path": "content/assets/example_image.png",
"digest": "509f8de4db71a76bac40ea48615b09c6661c23eb4bec6512f295aebc496f1312"
},
"content/index.mdx": {
"name": "index.mdx",
"path": "content/index.mdx",
"digest": "48e52cda5d2d5de9402377b2b0bf02e74df11331a7284519a679bb614193ea11"
}
},
"href": "/learn/web-3-profiles-with-near-and-ceramic"
}
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions tutorials/web-3-profiles-with-near-and-ceramic/content/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
title: 'Kafé Guide Template - Single Page'
keywords: ['kafe']
date: '2022-04-24'
description: 'A single page guide template written in MDX format (Markdown + React)'
---

# Integrating Personas in Your Apps

{{description}}

## Introduction

It's a simple process to bring NEAR Persona data into your applications to use as you see fit. It's basically three steps:

- install a NPM package
- import the package and instantiate the Persona clas

s
- call a method, passing it the name of the account you want data for

### Step 1: Install the NPM Package

Using yarn or npm (yarn shown here):

```text
yarn add @aluhning/get-personas-js
```

---

## Step 2: Instantiate the class

In your application code (e.g. React app):

```text
import Persona from '@aluhning/get-personas-js'
...
let persona = new Persona()
```

---

## Step 3: Retrieve the Personas Data

However you want to handle the data - calling following will return the persona's data to consume as needed in your app :

- accountId (change) - the string representation of the NEAR account you want persona data for. Can pass it in as a variable or directly as a string - e.g. 'jimbean.near'
- profile (don't change) - the alias of the Ceramic data model definition that is storing the data

```text
let personaData = await persona.getData('profile', accountId)
```

---

That will return the following object. If you stored the data in personaData, you'd access the avatar (uploaded) by referring to personaData.avatar

![personas object](https://cdn.vitalpoint.ai/vitalpointai-cdn/2022/03/persona-object.png)

# Conclusion

## And now your application has rich personas/profiles.

# About the Author

I'm [ALuhning](https://github.com/ALuhning), a blockchain junkie and adventurer who likes to build Web 3 tools to solve real world issues.
If you enjoyed this guide, please connect with me on [GitHub](https://github.com/ALuhning).

---
20 changes: 20 additions & 0 deletions tutorials/web-3-profiles-with-near-and-ceramic/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "@builderdao-learn/web-3-profiles-with-near-and-ceramic",
"version": "1.0.0",
"description": "Learn to integrate NEAR Personas in your applications. Built with Ceramic/NEAR, you can access a data object with information about your users and users can manage their personas in one location and have changes propagate everywhere.",
"main": "index.js",
"files": [
"content",
"builderdao.config.js"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"builderdao": "builderdao",
"content:prepublish": "builderdao tutorial prepublish",
"content:index": "builderdao algolia publish",
"content:publish": "builderdao tutorial publish"
},
"keywords": "Ceramic,Near",
"author": "",
"license": "ISC"
}