Develop your first decentralized application

This guide will walk you through developing your first decentralized application (dApp) using Tesseract on Gravity OS, reading user profiles, and writing to the graph.

Creating a Hello World dApp

In this section, you will create a simple dApp that displays the connected user's pseudo using HTML, CSS, and JavaScript.

Step 1: Create Files

First, create an index.html, style.css, and script.js file. Here's a simple example:

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

<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <!-- The title of your page will be the name of your dapp in the finder -->
    <title>Hello World App</title>
    <link href="/g/{style_id}" rel="stylesheet" />
</head>

<!-- You can specify the min width/height of your app by theses properties on the body -->
<body width="300" height="200">
    <h3 style="color: white;display: flex; flex-direction: row">Hello, <span id="user-nickname"></span>!</h3>
    
    <!-- Here are some usefull libs that you should want to use -->
    <!-- gravity/event_manager.js -->
    <script src="/parser/graph/javascript/0b6a9301-cb03-4887-bdca-1170d13f21e5"></script>
    <!-- tools/graph.js -->
    <script src="/parser/graph/javascript/e16712e4-4141-4dd3-ac0f-3e7409890737"></script>
    <!-- unicode.js -->
    <script src="/ipfs/QmcSG2fLG6gc55vGf1P1dcfcmZcVqLsn2bUqPc34kiB7tN"></script>
    <!-- core/singularity.js -->
    <script src="/parser/graph/javascript/65bb8f2d-1bc8-419f-8d34-aac5242e4d0c"></script>
    <!-- core/blackhole.js -->
    <script src="/parser/graph/javascript/e0911760-0959-4f6e-8214-5a140ff334cf"></script>
    <!-- core/wormhole.js -->
    <script src="/parser/graph/javascript/14b3fc37-e1dd-4b21-be23-a461efa2d910"></script>
    
    <!-- Include your script here by changing the {script_id} -->
    <script src="/parser/graph/javascript/{script_id}"></script>
</body>

</html>

The imports of your assets (CSS, JS) are possible thanks to their ID, available by following the steps below:

Tip:Keep in mind that the CSS files are available on the nodes from the route /g/{identifier} and the JS scripts are available via the route /parser/graph/javascript/{identifier}.

Step 2: Add JavaScript code

In your script.js, you can dynamically display the pseudo:


// The first argument of the eventManager is a callback function called when your app is fully loaded.
// This callback will receive basic information about the user using your DApp.
const eventManager = new EventManager((user) => {
    // user.address is the blockchain address of the user connected to your app
    if (!user.address) {
        return;
    }
    // The getUserProfile function from the Wormhole library allows you to retrieve an on-chain profile using a user’s address.
    Wormhole.getUserProfile(user.address).then((userProfile) => {
        const nickNameNode = document.getElementById('user-nickname');
        // You can retrieve the nickname by accessing the "graphName" property.
        // All data stored on-chain is in the form of a graph, with a root node that has properties and may have children (which can also have properties).
        nickNameNode.textContent = convertHtmlCodesToAccents(userProfile.object.graphName);
    });
});

Step 3: Submit Your App

Once your app is complete, you can request to add it to Gravity OS by submitting a request on our Discord. We will review your app and integrate it manually for now.