{"id":835486,"date":"2026-02-18T18:56:15","date_gmt":"2026-02-18T18:56:15","guid":{"rendered":"https:\/\/gridnet.org\/wpp\/?p=835486"},"modified":"2026-02-20T07:57:35","modified_gmt":"2026-02-20T07:57:35","slug":"your-first-decentralized-app-in-30-minutes","status":"publish","type":"post","link":"https:\/\/mag.gridnet.org\/index.php\/2026\/02\/18\/your-first-decentralized-app-in-30-minutes\/","title":{"rendered":"Your First Decentralized App in 30 Minutes \u2014 A Step-by-Step GRIDNET OS Tutorial"},"content":{"rendered":"

You Already Know Everything You Need<\/h2>\n
Here is the single most important sentence in this entire article: if you can write HTML, CSS, and JavaScript, you can build a decentralized application for GRIDNET OS right now.<\/strong><\/p>\n
No new language. No proprietary framework. No six-month learning curve. You write the same `<div><\/code>s, the same flexbox layouts, the same ES6 classes you have been writing for years \u2014 and your code runs inside a decentralized operating system backed by a blockchain. The blockchain is underneath, but you never touch it directly. You interact with it through CVMContext<\/strong>: a clean, familiar JavaScript singleton API. You call methods. You register callbacks. You await<\/code> promises. That’s it.<\/p>\n`
Even when you venture deeper \u2014 into GridScript<\/strong>, the native shell of GRIDNET OS \u2014 you will find yourself on familiar ground. GridScript commands mirror the Linux\/DOS commands you already know: cd<\/code>, ls<\/code>, cat<\/code>, rm<\/code>, mkdir<\/code>, touch<\/code>, send<\/code>. The transaction model uses BT<\/code>\/CT<\/code> (Begin Transaction \/ Commit Transaction), which maps directly to BEGIN<\/code>\/COMMIT<\/code> from SQL. Same concept, blockchain-backed.<\/p>\n
`In the next thirty minutes, you will build a complete, working decentralized application \u2014 a “Hello Blockchain” dApp that reads data from and writes data to a real blockchain. Every step includes full, runnable code. No fragments. No “exercise left to the reader.” By the end, you will have a .app<\/code> file you can deploy to the decentralized network.<\/p>\n`
`Let’s begin.<\/p>\n`

Prerequisites: What You Need Before We Start<\/h2>\nYou need exactly four things:<\/p>\n \nGRIDNET Core running.<\/strong> This is the full-node software that serves the GRIDNET OS web interface. Download it from gridnet.org<\/a> and run it. The node will start a local web server (typically at https:\/\/localhost<\/code>) that hosts the entire decentralized operating system UI.<\/li>\n A GRIDNET OS account (identity).<\/strong> You must be logged in<\/strong> to write data to the blockchain. If you haven’t created an account yet, open the GRIDNET OS UI and use the Wallet dApp to generate a new identity. Reading data is public and free, but any write or commit operation requires an authenticated session with a valid cryptographic identity.<\/li>\n A modern browser.<\/strong> Chromium-based (Chrome, Edge, Brave) or Firefox. The GRIDNET OS web interface uses standard Web APIs: Shadow DOM, ES6 modules, WebSocket, WebCrypto.<\/li>\n A text editor.<\/strong> VS Code, Sublime, Notepad++ \u2014 anything you like. You will write a single JavaScript file.<\/li>\n<\/ol>\nThat’s it. No npm. No node_modules. No build toolchain (unless you choose<\/em> to use one for larger projects). For your first dApp, a text editor and a browser are all you need.<\/p>\n Optional but helpful: open the GRIDNET OS UI at https:\/\/ui.gridnet.org<\/code> (the public instance) or your local https:\/\/localhost<\/code> instance. Explore the desktop environment. Open the Terminal dApp and the File Manager. Get a feel for the windowed environment \u2014 because your application will live inside one of these windows.<\/p>\n Step 1: Create the HTML Skeleton \u2014 Shadow DOM and Scoped CSS<\/h2>\nShadow DOM encapsulation: every dApp window is an isolated island of sovereign computation.<\/figcaption><\/figure>\nEvery GRIDNET OS UI dApp is a JavaScript ES6 class that extends CWindow<\/code> \u2014 the base class provided by the system at \/lib\/window.js<\/code>. When your dApp is instantiated, CWindow<\/code> creates a dedicated window on the desktop and renders your HTML content inside a Shadow DOM tree<\/strong>. This Shadow DOM is the key to everything: it isolates your styles, your DOM, and your scripts from every other dApp and from the OS shell itself.<\/p>\n Here is the complete skeleton of a GRIDNET OS dApp:<\/p>\n \n\"use strict\"\n\nimport { CWindow } from \"\/lib\/window.js\"\n\n\/\/ \u2500\u2500 HTML body for the dApp window \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst myAppBody = `\n<link rel=\"stylesheet\" href=\"\/css\/windowDefault.css\" \/>\n<style>\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n padding: 1em;\n box-sizing: border-box;\n font-family: 'Rajdhani', sans-serif;\n color: #22fafc;\n background: linear-gradient(135deg, #0a0a14, #0d1a2d);\n }\n h1 {\n font-size: 1.8rem;\n margin-bottom: 0.5em;\n text-shadow: 0 0 15px rgba(34, 250, 252, 0.4);\n }\n .status {\n font-size: 0.9rem;\n color: #8892b0;\n }\n<\/style>\n<div class=\"container\">\n <h1 id=\"title\">Hello Blockchain<\/h1>\n <div class=\"status\" id=\"status\">Initializing...<\/div>\n<\/div>\n`;\n\n\/\/ \u2500\u2500 dApp class \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nclass CHelloBlockchain extends CWindow {\n\n constructor(positionX, positionY, width, height, data, dataType, filePath, thread) {\n super(positionX, positionY, width, height, myAppBody,\n \"Hello Blockchain\", \/\/ window title\n CHelloBlockchain.getIcon(), \/\/ icon\n true \/\/ enable Shadow DOM\n );\n\n \/\/ Set a unique thread ID for this dApp instance.\n \/\/ Every dApp should set its own thread ID to avoid collisions\n \/\/ with other running dApps. The pattern is: PREFIX + process ID.\n this.setThreadID = 'HELLO_BLOCKCHAIN_' + this.getProcessID;\n }\n\n static getPackageID() {\n return \"org.gridnetproject.UIdApps.helloBlockchain\";\n }\n\n static getDefaultCategory() {\n return 'dApps';\n }\n\n static getIcon() {\n return ''; \/\/ Base64 data:image\/png;base64,... goes here\n }\n\n open() {\n super.open();\n const status = this.getControl('status');\n status.textContent = 'dApp is running!';\n }\n\n closeWindow() {\n super.closeWindow();\n }\n}\n\nexport default CHelloBlockchain;\n<\/pre>\nLet’s break down what’s happening:<\/p>\n The HTML Body String<\/h3>\nThe myAppBody<\/code> variable is a template literal containing your dApp’s entire HTML payload. This string is injected into the Shadow DOM when the window is created. Notice several critical patterns:<\/p>\n \nThe standard stylesheet link<\/strong>: <link rel=\"stylesheet\" href=\"\/css\/windowDefault.css\" \/><\/code> imports the GRIDNET OS default window styles. Always include this.<\/li>\n Scoped <style><\/code> block<\/strong>: Your CSS lives inside<\/em> the HTML body. Because of Shadow DOM, these styles cannot leak out to other dApps, and no external styles can leak in. You have complete CSS isolation.<\/li>\n Percentage and em\/rem units<\/strong>: Never use vw<\/code> or vh<\/code>. Your dApp does not own the viewport \u2014 it owns a window. Use %<\/code> for layout dimensions relative to the window, and em<\/code>\/rem<\/code> for typography and spacing.<\/li>\n Flexbox\/Grid layouts<\/strong>: Use display: flex<\/code> or display: grid<\/code> with relative units. Your window can be resized, maximised, minimised, or snapped \u2014 your layout must adapt fluidly.<\/li>\n<\/ul>\nThe Class<\/h3>\nYour dApp class must<\/strong> extend CWindow<\/code>. The CWindow<\/code> base constructor takes four positional parameters: positionX<\/code>, positionY<\/code>, width<\/code>, and height<\/code>. However, the PackageManager may pass up to eight parameters<\/strong> when instantiating your dApp \u2014 the extra four are provided when the system launches your app in a file-associated context (e.g., the user double-clicks a file that your app handles):<\/p>\n \npositionX<\/code>, positionY<\/code> \u2014 initial window position<\/li>\n width<\/code>, height<\/code> \u2014 initial window dimensions<\/li>\n data<\/code>, dataType<\/code> \u2014 optional data and its type (provided when opening a file with your app)<\/li>\n filePath<\/code> \u2014 optional file path context (the file that was opened)<\/li>\n thread<\/code> \u2014 optional thread reference<\/li>\n<\/ul>\nSystem dApps like Terminal only declare the four core parameters they need. For user-deployed dApps that handle file associations, you should accept all eight. The super()<\/code> call passes the four positional parameters to CWindow<\/code> along with your HTML body, the window title, your icon, and true<\/code> to enable Shadow DOM (which you should always<\/em> enable).<\/p>\n Key Methods You Must Implement<\/h3>\n\nstatic getPackageID()<\/code> \u2014 returns a unique reverse-domain identifier. For user-deployable dApps, start with org.gridnetproject.UIdApps.<\/code><\/li>\n static getIcon()<\/code> \u2014 returns a Base64-encoded PNG icon string (data:image\/png;base64,...<\/code>). Can be empty during development.<\/li>\n open()<\/code> \u2014 called when the window has been created and is visible. This is where you initialise your UI, register event listeners, and start any background processes. Always call super.open()<\/code> first.<\/li>\n closeWindow()<\/code> \u2014 called when the user closes the window. Clean up event listeners, stop threads, release resources. Always call super.closeWindow()<\/code>.<\/li>\n<\/ul>\nAccessing DOM Elements: The Shadow DOM Way<\/h3>\nThis is the most important rule in GRIDNET OS dApp development<\/strong>: never use document.getElementById()<\/code> or document.querySelector()<\/code>. These methods search the main document \u2014 the OS shell \u2014 not your Shadow DOM. They will not find your elements.<\/p>\n Instead, use:<\/p>\n \nthis.getControl('elementId')<\/code> \u2014 finds an element by its id<\/code> attribute within your Shadow DOM<\/li>\n this.getBody.querySelector('.my-class')<\/code> \u2014 CSS selector scoped to your dApp’s body<\/li>\n this.getBody.querySelectorAll('button')<\/code> \u2014 all matching elements within your Shadow DOM<\/li>\n<\/ul>\n\n\/\/ \u274c BAD \u2014 searches the main document, finds nothing\nconst btn = document.getElementById('my-button'); \/\/ Returns null!\n\n\/\/ \u2705 GOOD \u2014 searches within your Shadow DOM\nconst btn = this.getControl('my-button');\nconst labels = this.getBody.querySelectorAll('.label');\n<\/pre>\nCSS Rules \u2014 The Essentials<\/h3>\n\n\n\n\n\n\n\u274c Do NOT<\/th>\n Why<\/th>\n \u2705 Do Instead<\/th>\n<\/tr>\n Use vw<\/code> or vh<\/code><\/td>\n Relative to viewport, not your window<\/td>\n Use %<\/code>, em<\/code>, rem<\/code><\/td>\n<\/tr>\n Use position: fixed<\/code><\/td>\n Positions relative to viewport<\/td>\n Use relative<\/code>\/absolute<\/code> within your container<\/td>\n<\/tr>\n Use external CDN stylesheets<\/td>\n Not available inside Shadow DOM<\/td>\n Inline all CSS in your body string<\/td>\n<\/tr>\n Overuse !important<\/code><\/td>\n Breaks cascade, hard to debug<\/td>\n Use specific selectors<\/td>\n<\/tr>\n<\/table>\nStep 2: Connect to the Blockchain via the CVMContext API<\/h2>\nCVMContext: your single point of entry to the entire GRIDNET OS decentralized stack.<\/figcaption><\/figure>\nCVMContext<\/code> is the singleton JavaScript object that bridges your dApp to the entire GRIDNET OS backend \u2014 blockchain, decentralized file system, networking, thread management, user identity, and more. It lives at \/lib\/VMContext.js<\/code> and you access it with a single call:<\/p>\n \nconst vmContext = CVMContext.getInstance();\n<\/pre>\nThat’s your gateway to the decentralized world. Let’s connect our Hello Blockchain dApp to it.<\/p>\n The Event-Driven Architecture<\/h3>\nGRIDNET OS communication is event-driven<\/strong>. You don’t poll the blockchain. You register listener callbacks and the system notifies you when events occur. Here are the key listener types you’ll use:<\/p>\n <\/p>\n Let’s upgrade our Hello Blockchain dApp to connect to the blockchain and monitor its state:<\/p>\n \n\"use strict\"\n\nimport { CWindow } from \"\/lib\/window.js\"\nimport { CVMMetaSection, CVMMetaEntry, CVMMetaGenerator, CVMMetaParser }\n from '\/lib\/MetaData.js'\nimport { CTools } from '\/lib\/tools.js'\n\nconst myAppBody = `\n<link rel=\"stylesheet\" href=\"\/css\/windowDefault.css\" \/>\n<style>\n .container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5em;\n box-sizing: border-box;\n font-family: 'Rajdhani', sans-serif;\n color: #22fafc;\n background: linear-gradient(135deg, #0a0a14, #0d1a2d);\n overflow-y: auto;\n }\n h1 {\n font-size: 1.6rem;\n margin: 0 0 0.5em 0;\n text-shadow: 0 0 15px rgba(34, 250, 252, 0.4);\n }\n .status-bar {\n display: flex;\n gap: 1em;\n margin-bottom: 1em;\n flex-wrap: wrap;\n }\n .status-item {\n display: flex;\n align-items: center;\n gap: 0.4em;\n font-size: 0.85rem;\n }\n .dot {\n width: 0.6em;\n height: 0.6em;\n border-radius: 50%;\n background: #ff4444;\n transition: background 0.3s;\n }\n .dot.connected { background: #00ff88; box-shadow: 0 0 6px #00ff88; }\n .dot.vm-ready { background: #ffd700; box-shadow: 0 0 6px #ffd700; }\n .log {\n flex: 1;\n background: #0a0e1a;\n border: 1px solid #1a3a5c;\n border-radius: 6px;\n padding: 0.8em;\n font-family: monospace;\n font-size: 0.8rem;\n color: #8892b0;\n overflow-y: auto;\n white-space: pre-wrap;\n word-break: break-all;\n }\n<\/style>\n<div class=\"container\">\n <h1>\ud83d\udd17 Hello Blockchain<\/h1>\n <div class=\"status-bar\">\n <div class=\"status-item\">\n <div class=\"dot\" id=\"connDot\"><\/div>\n <span id=\"connStatus\">Disconnected<\/span>\n <\/div>\n <div class=\"status-item\">\n <div class=\"dot\" id=\"vmDot\"><\/div>\n <span id=\"vmStatus\">VM: Initializing<\/span>\n <\/div>\n <\/div>\n <div class=\"log\" id=\"logArea\">Waiting for connection...<\/div>\n<\/div>\n`;\n\nclass CHelloBlockchain extends CWindow {\n\n constructor(positionX, positionY, width, height, data, dataType, filePath, thread) {\n super(positionX, positionY, width, height, myAppBody,\n \"Hello Blockchain\", CHelloBlockchain.getIcon(), true);\n\n this.mTools = CTools.getInstance();\n this.mMetaParser = new CVMMetaParser();\n\n \/\/ Set a unique thread ID for this dApp instance\n this.setThreadID = 'HELLO_BLOCKCHAIN_' + this.getProcessID;\n\n \/\/ Register event listeners with CVMContext\n \/\/ The second parameter (this.mID) ties the listener to this window instance\n \/\/ so it can be automatically cleaned up when the window closes.\n CVMContext.getInstance().addConnectionStatusChangedListener(\n this.onConnectionChanged.bind(this), this.mID);\n CVMContext.getInstance().addVMStateChangedListener(\n this.onVMStateChanged.bind(this), this.mID);\n CVMContext.getInstance().addNewDFSMsgListener(\n this.onDFSMessage.bind(this), this.mID);\n CVMContext.getInstance().addVMMetaDataListener(\n this.onVMMetaData.bind(this), this.mID);\n CVMContext.getInstance().addNewGridScriptResultListener(\n this.onGridScriptResult.bind(this), this.mID);\n }\n\n static getPackageID() {\n return \"org.gridnetproject.UIdApps.helloBlockchain\";\n }\n\n static getDefaultCategory() { return 'dApps'; }\n static getIcon() { return ''; }\n\n \/\/ \u2500\u2500 Lifecycle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n open() {\n super.open();\n this.log('Hello Blockchain dApp started.');\n this.log('Waiting for connection to GRIDNET Core...');\n\n \/\/ Check if already connected\n if (CVMContext.getInstance().getConnectionState == eConnectionState.connected) {\n this.onConnectionChanged({ state: eConnectionState.connected });\n }\n }\n\n closeWindow() {\n \/\/ Listeners registered with this.mID are auto-cleaned by CWindow\n super.closeWindow();\n }\n\n \/\/ \u2500\u2500 Event Callbacks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n onConnectionChanged(event) {\n const dot = this.getControl('connDot');\n const label = this.getControl('connStatus');\n\n if (event.state == eConnectionState.connected) {\n dot.classList.add('connected');\n label.textContent = 'Connected';\n this.log('\u2705 Connected to GRIDNET Core!');\n } else if (event.state == eConnectionState.connecting) {\n label.textContent = 'Connecting...';\n this.log('\ud83d\udd04 Connecting...');\n } else {\n dot.classList.remove('connected');\n label.textContent = 'Disconnected';\n this.log('\u274c Disconnected from node.');\n }\n }\n\n onVMStateChanged(event) {\n const dot = this.getControl('vmDot');\n const label = this.getControl('vmStatus');\n\n if (event.state == eVMState.ready || event.state == eVMState.synced) {\n dot.classList.add('vm-ready');\n label.textContent = 'VM: Ready';\n this.log('\u2705 Decentralized VM is ready!');\n } else if (event.state == eVMState.initializing) {\n label.textContent = 'VM: Initializing...';\n this.log('\u23f3 VM initializing...');\n }\n }\n\n onDFSMessage(dfsMsg) {\n \/\/ Check if this message is for us\n if (!this.hasNetworkRequestID(dfsMsg.getReqID)) return;\n this.log('\ud83d\udcc2 DFS response received (reqID: ' + dfsMsg.getReqID + ')');\n }\n\n onVMMetaData(metaMsg) {\n if (!this.hasNetworkRequestID(metaMsg.getReqID)) return;\n this.log('\ud83d\udce1 VMMetaData received (reqID: ' + metaMsg.getReqID + ')');\n }\n\n onGridScriptResult(result) {\n if (result == null) return;\n this.log('\u26a1 GridScript result received.');\n }\n\n \/\/ \u2500\u2500 Utility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n log(message) {\n const area = this.getControl('logArea');\n if (!area) return;\n const timestamp = new Date().toLocaleTimeString();\n area.textContent += '\\n[' + timestamp + '] ' + message;\n area.scrollTop = area.scrollHeight;\n }\n}\n\nexport default CHelloBlockchain;\n<\/pre>\nThis version demonstrates the core communication pattern:<\/p>\n \nRegister listeners in the constructor<\/strong> \u2014 always with .bind(this)<\/code> and this.mID<\/code><\/li>\n React to events in callbacks<\/strong> \u2014 connection state changes, VM state changes, DFS messages, meta-data<\/li>\n Check request ownership<\/strong> \u2014 use this.hasNetworkRequestID(msg.getReqID)<\/code> to verify that incoming data is the result of your<\/em> query, not another dApp’s<\/li>\n Clean up in closeWindow()<\/strong> \u2014 listeners registered with this.mID<\/code> are automatically cleaned up by CWindow<\/code><\/li>\n<\/ol>\nStep 3: Read Data \u2014 Navigate Domains, List Files, Read State<\/h2>\nThe Decentralized File System: navigate domains, list files, read state \u2014 all through familiar commands.<\/figcaption><\/figure>\nThe GRIDNET OS Decentralized File System (DFS) is how data is stored on-chain. Every account (called a State Domain<\/strong>) has its own file system \u2014 directories, files, and metadata \u2014 all stored in Merkle Patricia Tries on the blockchain. Navigating this file system uses commands that will feel instantly familiar:<\/p>\n \ndoCD(path)<\/code> \u2014 change directory (equivalent to cd<\/code>)<\/li>\n doLS()<\/code> \u2014 list directory contents (equivalent to ls<\/code>)<\/li>\n doGetFile(path)<\/code> \u2014 read a file (equivalent to cat<\/code>)<\/li>\n doNewDir(path)<\/code> \u2014 create directory (equivalent to mkdir<\/code>)<\/li>\n doNewFile(path, content)<\/code> \u2014 create\/write a file (equivalent to touch<\/code> + echo ><\/code>)<\/li>\n doCommit()<\/code> \u2014 commit pending changes to the blockchain<\/li>\n doSync()<\/code> \u2014 synchronize with the latest blockchain state<\/li>\n<\/ul>\nAll file system operations go through CVMContext.getInstance().getFileSystem<\/code>, which returns a CFileSystem<\/code> singleton. Here’s how to read data:<\/p>\n \n\/\/ Navigate to the root of a state domain and list its contents\nreadBlockchainData() {\n const fs = CVMContext.getInstance().getFileSystem;\n\n \/\/ Step 1: Navigate to root directory\n \/\/ doCD returns an operation status with a request ID\n let cdResult = fs.doCD('\/', true, false, false, this.getThreadID);\n\n \/\/ Track the request ID so we can identify the response\n this.addNetworkRequestID(cdResult.getReqID);\n\n this.log('\ud83d\udcc2 Navigating to root directory...');\n\n \/\/ The doCD with doLS=true also triggers a directory listing.\n \/\/ The results arrive asynchronously in our onDFSMessage callback.\n}\n<\/pre>\nThe response arrives in your onDFSMessage<\/code> callback. Here’s how to parse a directory listing:<\/p>\n \nonDFSMessage(dfsMsg) {\n \/\/ Verify this message is for us\n if (!this.hasNetworkRequestID(dfsMsg.getReqID)) return;\n\n if (dfsMsg.getData1.byteLength > 0) {\n let metaData = this.mMetaParser.parse(dfsMsg.getData1);\n\n if (metaData != 0) {\n let sections = this.mMetaParser.getSections;\n\n for (let i = 0; i < sections.length; i++) {\n let sType = sections[i].getType;\n\n \/\/ Directory listing response\n if (sType == eVMMetaSectionType.fileContents) {\n let entries = sections[i].getEntries;\n\n for (let a = 0; a < entries.length; a++) {\n let dataFields = entries[a].getFields;\n let entryType = entries[a].getType;\n\n if (entryType == eDFSElementType.directoryEntry) {\n let dirName = CTools.getInstance().arrayBufferToString(dataFields[1]);\n this.log('\ud83d\udcc1 Directory: ' + dirName);\n }\n else if (entryType == eDFSElementType.fileEntry) {\n let fileName = CTools.getInstance().arrayBufferToString(dataFields[1]);\n this.log('\ud83d\udcc4 File: ' + fileName);\n }\n else if (entryType == eDFSElementType.stateDomainEntry) {\n let domainName = CTools.getInstance().arrayBufferToString(dataFields[1]);\n this.log('\ud83c\udf10 State Domain: ' + domainName);\n }\n else if (entryType == eDFSElementType.fileContent) {\n let fileName = CTools.getInstance().arrayBufferToString(dataFields[1]);\n let content = dataFields[2];\n let dataType = dataFields[0];\n\n \/\/ Convert content based on type\n let value;\n switch (dataType) {\n case eDataType.bytes:\n value = CTools.getInstance().arrayBufferToString(content);\n break;\n case eDataType.unsignedInteger:\n value = CTools.getInstance().arrayBufferToNumber(content);\n break;\n case eDataType.signedInteger:\n value = CTools.getInstance().arrayBufferToNumber(content);\n break;\n default:\n value = '[binary data]';\n }\n this.log('\ud83d\udcc4 File: ' + fileName + ' = ' + value);\n }\n }\n }\n }\n }\n }\n}\n<\/pre>\nThread IDs: Isolating Your dApp’s Communication<\/h3>\nEvery dApp instance needs its own thread ID<\/strong> \u2014 a unique identifier that tags all outgoing requests so the system can route responses back to the correct window. You set this in the constructor with:<\/p>\n \nthis.setThreadID = 'HELLO_BLOCKCHAIN_' + this.getProcessID;\n<\/pre>\nThe pattern is a descriptive prefix plus this.getProcessID<\/code> (a unique number assigned to each running dApp instance). Once set, you pass this.getThreadID<\/code> as the thread parameter to all DFS method calls. This is how the system’s built-in dApps work \u2014 for example, Terminal.js uses 'XTERM_THREAD_' + this.getProcessID<\/code> and FileManager uses window.getThreadID<\/code> throughout.<\/p>\n Without a unique thread ID, responses from the blockchain could be misrouted to other dApp instances, causing data corruption or missed callbacks.<\/p>\n Reading a Specific File<\/h3>\n\nreadFile(filePath) {\n const fs = CVMContext.getInstance().getFileSystem;\n let result = fs.doGetFile(filePath, false, this.getThreadID);\n this.addNetworkRequestID(result.getReqID);\n this.log('\ud83d\udcd6 Reading file: ' + filePath);\n \/\/ Response arrives in onDFSMessage callback\n}\n<\/pre>\nStep 4: Write Data \u2014 BT\/CT Transactions and GridScript Basics<\/h2>\nBT\/CT \u2014 Begin Transaction \/ Commit Transaction: the SQL-inspired model for blockchain writes.<\/figcaption><\/figure>\nReading data is free and instant. Writing data requires a transaction.<\/strong> This is the fundamental difference between a centralised application and a decentralised one: every state change must be cryptographically signed, validated by the network, and recorded immutably on the blockchain.<\/p>\n The GRIDNET OS transaction model uses two concepts that map directly to database transactions:<\/p>\n \nBT<\/code> (Begin Transaction) \u2014 opens a transaction block. All subsequent state changes are staged.<\/li>\n CT<\/code> (Commit Transaction) \u2014 finalises the transaction and submits it to the blockchain for consensus.<\/li>\n<\/ul>\nBetween BT<\/code> and CT<\/code>, you can perform file system operations \u2014 create files, write data, create directories \u2014 and they will all be atomically committed as a single blockchain transaction.<\/p>\n Writing Files to the Blockchain<\/h3>\nThe simplest way to write data is through the DFS API:<\/p>\n \nwriteMessage(message) {\n const fs = CVMContext.getInstance().getFileSystem;\n\n \/\/ Create or update a file in the current directory\n let result = fs.doNewFile('hello.txt', message, false, this.getThreadID);\n this.addNetworkRequestID(result.getReqID);\n this.log('\u270d\ufe0f Writing message to hello.txt...');\n\n \/\/ The file is now staged in the local state.\n \/\/ To persist it to the blockchain, we need to COMMIT.\n}\n<\/pre>\nCommitting Changes to the Blockchain<\/h3>\nThe commit operation is how staged changes become permanent on-chain state. When you commit, GRIDNET Core packages all your pending changes into a blockchain transaction, has it signed (via QR code on your mobile wallet or local keychain), and submits it to the network for consensus.<\/p>\n \ncommitChanges() {\n const fs = CVMContext.getInstance().getFileSystem;\n\n \/\/ Request a commit \u2014 this triggers the signing workflow\n let result = fs.doCommit();\n this.addNetworkRequestID(result.getReqID);\n this.log('\ud83d\udd10 Commit requested. Awaiting authorization...');\n\n \/\/ The commit flow:\n \/\/ 1. doCommit() sends a commit request to GRIDNET Core\n \/\/ 2. Core prepares the transaction and requests signing\n \/\/ 3. User authorizes (via QR code \/ mobile wallet \/ local keychain)\n \/\/ 4. Signed transaction is broadcast to the network\n \/\/ 5. Network validates and includes in next data block\n \/\/ 6. Your onDFSMessage callback receives confirmation\n}\n<\/pre>\nYou can monitor commit state through the VMCommitStateChanged<\/code> listener:<\/p>\n \n\/\/ In constructor:\nCVMContext.getInstance().addVMCommitStateChangedListener(\n this.onCommitStateChanged.bind(this), this.mID);\n\n\/\/ Callback:\nonCommitStateChanged(state) {\n switch (state) {\n case eCommitState.prePending:\n this.log('\ud83d\udd12 Commit pre-locked (preparing)...');\n break;\n case eCommitState.pending:\n this.log('\u23f3 Commit pending (awaiting consensus)...');\n break;\n case eCommitState.success:\n this.log('\u2705 Commit successful! Data is now on-chain!');\n break;\n case eCommitState.aborted:\n this.log('\u274c Commit aborted.');\n break;\n }\n}\n<\/pre>\nGridScript: The Shell Beneath<\/h3>\nFor more advanced operations \u2014 transferring tokens, executing smart contracts, managing permissions \u2014 you use GridScript<\/strong>, the stack-based programming language native to GRIDNET OS. GridScript commands are executed through the Terminal dApp or programmatically through your dApp.<\/p>\n Here are the most common GridScript commands you’ll encounter:<\/p>\n \n# Navigation (same as Linux\/DOS)\ncd \/ # Change to root directory\nls # List directory contents\ncd myDomain # Enter a state domain\n\n# File operations\ncat hello.txt # Read file contents\ntouch newfile.txt # Create empty file\nmkdir myFolder # Create directory\nrm oldfile.txt # Delete file\n\n# Token transfers\nsend recipientAddress 100 # Send 100 GNC tokens\n\n# Transactions\nBT # Begin Transaction\n send alice 50 # Stage a transfer\n touch receipt.txt # Stage a file creation\nCT # Commit Transaction (atomic)\n\n# Permissions (ACL)\nsetfacl user:bob:rw myfile.txt # Grant read\/write\ngetfacl myfile.txt # View permissions\nchown bob myfile.txt # Change ownership\n<\/pre>\nThe BT<\/code>\/CT<\/code> model is powerful because everything between them is atomic<\/strong> \u2014 either all operations succeed, or none of them do. This is the same guarantee SQL databases provide with BEGIN<\/code>\/COMMIT<\/code>, but backed by decentralised consensus instead of a central server.<\/p>\n Step 5: Deploy On-Chain \u2014 The .app Format and DFS Commit<\/h2>\nFrom local file to globally available decentralized application \u2014 the deployment pipeline.<\/figcaption><\/figure>\nDeploying your dApp to GRIDNET OS is remarkably simple. There is no app store, no review process, no gatekeepers. You deploy directly to the decentralised file system, and your application becomes available to anyone running a GRIDNET Core node.<\/p>\n Step 5.1: Prepare Your .app File<\/h3>\nA .app<\/code> file is simply your JavaScript file with its extension changed. That’s it. No compilation, no transpilation (unless you choose to bundle multiple source files together).<\/p>\n \n# If your file is HelloBlockchain.js, simply rename it:\n# HelloBlockchain.js \u2192 HelloBlockchain.app\n<\/pre>\nFor larger projects with multiple source files, use a bundler like Rollup, Webpack, or Parcel to combine everything into a single file before renaming. Remember: you can freely import<\/code> system-provided libraries (anything under \/lib\/<\/code>) \u2014 those are available at runtime. Only your own code and non-system dependencies need to be in the .app<\/code> file.<\/p>\n Step 5.2: Upload to the GRIDNET OS Desktop<\/h3>\n\nOpen the GRIDNET OS UI in your browser (https:\/\/ui.gridnet.org<\/code> or your local instance)<\/li>\n Open the File Manager<\/strong> dApp<\/li>\n Drag and drop<\/strong> your .app<\/code> file onto the File Manager window or directly onto the Desktop<\/li>\n The PackageManager will analyse your file \u2014 watch the log pane at the bottom of the screen for events<\/li>\n Once analysed, your dApp’s icon appears on the Desktop. Click it to run!<\/li>\n<\/ol>\nAt this point, your dApp runs in a local sandbox<\/strong> \u2014 it’s loaded from your local upload but not yet persisted to the blockchain.<\/p>\n Step 5.3: Commit to the Decentralized Network<\/h3>\nTo make your dApp permanent and globally available:<\/p>\n \nIn the File Manager, locate your uploaded .app<\/code> file<\/li>\n Click the \u22ee\u22ee\u22ee Magic Button<\/strong> (the three-dot commit button) to initiate a DFS commit<\/li>\n Authorize the transaction (via QR code on your mobile wallet or local keychain)<\/li>\n Once the commit is confirmed by the network, your dApp is permanently stored on-chain<\/strong><\/li>\n<\/ol>\nAfter committing, anyone running a GRIDNET Core node can navigate to your state domain, find your .app<\/code> file, and run your decentralized application. No servers. No hosting fees (beyond the one-time GNC storage cost). No single point of failure.<\/p>\n The Complete Working Example: “Hello Blockchain” \u2014 Read and Write to the Chain<\/h2>\nThe complete Hello Blockchain dApp \u2014 reading and writing messages to a decentralized blockchain.<\/figcaption><\/figure>\nHere is the complete, runnable dApp<\/strong> that ties everything together. This application lets you write a message to the blockchain and read it back \u2014 a full round-trip through the decentralised stack. Copy this entire file, save it as HelloBlockchain.app<\/code>, and deploy it.<\/p>\n \n\"use strict\"\n\n\/\/ \u2500\u2500 Imports \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nimport { CWindow } from \"\/lib\/window.js\"\nimport { CVMMetaSection, CVMMetaEntry, CVMMetaGenerator, CVMMetaParser }\n from '\/lib\/MetaData.js'\nimport { CTools, CDataConcatenator } from '\/lib\/tools.js'\n\n\/\/ \u2500\u2500 HTML Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst helloBody = `\n<link rel=\"stylesheet\" href=\"\/css\/windowDefault.css\" \/>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n .app-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5em;\n font-family: 'Rajdhani', sans-serif;\n color: #22fafc;\n background: linear-gradient(135deg, #0a0a14 0%, #0d1a2d 50%, #0a1628 100%);\n overflow-y: auto;\n }\n\n .app-header {\n display: flex;\n align-items: center;\n gap: 0.8em;\n margin-bottom: 1.2em;\n }\n\n .app-header h1 {\n font-size: 1.5rem;\n text-shadow: 0 0 12px rgba(34, 250, 252, 0.4);\n }\n\n \/* \u2500\u2500 Status Bar \u2500\u2500 *\/\n .status-bar {\n display: flex;\n gap: 1.2em;\n margin-bottom: 1.2em;\n flex-wrap: wrap;\n }\n\n .status-item {\n display: flex;\n align-items: center;\n gap: 0.3em;\n font-size: 0.8rem;\n color: #8892b0;\n }\n\n .dot {\n width: 0.5em; height: 0.5em;\n border-radius: 50%;\n background: #ff4444;\n transition: all 0.3s;\n }\n .dot.ok { background: #00ff88; box-shadow: 0 0 6px #00ff88; }\n\n \/* \u2500\u2500 Sections \u2500\u2500 *\/\n .section {\n background: rgba(10, 22, 40, 0.6);\n border: 1px solid #1a3a5c;\n border-radius: 8px;\n padding: 1em;\n margin-bottom: 1em;\n }\n .section h2 {\n font-size: 1rem;\n color: #ffd700;\n margin-bottom: 0.6em;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n \/* \u2500\u2500 Input Row \u2500\u2500 *\/\n .input-row {\n display: flex;\n gap: 0.6em;\n }\n .input-row input {\n flex: 1;\n padding: 0.5em 0.8em;\n border: 1px solid #1a3a5c;\n border-radius: 4px;\n background: #0a0e1a;\n color: #22fafc;\n font-family: 'Rajdhani', sans-serif;\n font-size: 0.9rem;\n outline: none;\n transition: border-color 0.3s;\n }\n .input-row input:focus {\n border-color: #00f0ff;\n box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);\n }\n\n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n .btn {\n padding: 0.5em 1.2em;\n border: 1px solid #00f0ff;\n border-radius: 4px;\n background: rgba(0, 240, 255, 0.1);\n color: #00f0ff;\n font-family: 'Rajdhani', sans-serif;\n font-size: 0.85rem;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all 0.3s;\n white-space: nowrap;\n }\n .btn:hover {\n background: rgba(0, 240, 255, 0.25);\n box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);\n }\n .btn.gold {\n border-color: #ffd700;\n color: #ffd700;\n background: rgba(255, 215, 0, 0.1);\n }\n .btn.gold:hover {\n background: rgba(255, 215, 0, 0.25);\n box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);\n }\n .btn.green {\n border-color: #00ff88;\n color: #00ff88;\n background: rgba(0, 255, 136, 0.1);\n }\n .btn.green:hover {\n background: rgba(0, 255, 136, 0.25);\n box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);\n }\n\n \/* \u2500\u2500 Message Display \u2500\u2500 *\/\n .message-display {\n padding: 0.8em;\n background: #0a0e1a;\n border: 1px dashed #1a3a5c;\n border-radius: 4px;\n font-family: monospace;\n font-size: 0.9rem;\n color: #00ff88;\n min-height: 2.5em;\n word-break: break-all;\n }\n\n \/* \u2500\u2500 Log \u2500\u2500 *\/\n .log-area {\n flex: 1;\n min-height: 6em;\n background: #0a0e1a;\n border: 1px solid #1a3a5c;\n border-radius: 6px;\n padding: 0.6em;\n font-family: monospace;\n font-size: 0.75rem;\n color: #556688;\n overflow-y: auto;\n white-space: pre-wrap;\n word-break: break-all;\n }\n<\/style>\n\n<div class=\"app-container\">\n <div class=\"app-header\">\n <h1>\ud83d\udd17 Hello Blockchain<\/h1>\n <\/div>\n\n <div class=\"status-bar\">\n <div class=\"status-item\">\n <div class=\"dot\" id=\"dotConn\"><\/div> <span id=\"lblConn\">Disconnected<\/span>\n <\/div>\n <div class=\"status-item\">\n <div class=\"dot\" id=\"dotVM\"><\/div> <span id=\"lblVM\">VM: \u2014<\/span>\n <\/div>\n <div class=\"status-item\">\n <div class=\"dot\" id=\"dotCommit\"><\/div> <span id=\"lblCommit\">Commit: Idle<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h2>\u270d\ufe0f Write to Blockchain<\/h2>\n <div class=\"input-row\">\n <input type=\"text\" id=\"msgInput\" placeholder=\"Type your message here...\" \/>\n <button class=\"btn gold\" id=\"btnWrite\">Write<\/button>\n <button class=\"btn green\" id=\"btnCommit\">Commit<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <h2>\ud83d\udcd6 Read from Blockchain<\/h2>\n <div style=\"display:flex; gap:0.6em; margin-bottom:0.6em;\">\n <button class=\"btn\" id=\"btnRead\">Read Message<\/button>\n <button class=\"btn\" id=\"btnList\">List Files<\/button>\n <\/div>\n <div class=\"message-display\" id=\"readResult\">No data yet \u2014 click \"Read Message\" after writing.<\/div>\n <\/div>\n\n \n <div class=\"section\" style=\"flex:1; display:flex; flex-direction:column;\">\n <h2>\ud83d\udccb Event Log<\/h2>\n <div class=\"log-area\" id=\"logArea\">Hello Blockchain dApp initialized.<\/div>\n <\/div>\n<\/div>\n`;\n\n\/\/ \u2500\u2500 dApp Class \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nclass CHelloBlockchain extends CWindow {\n\n constructor(positionX, positionY, width, height, data, dataType, filePath, thread) {\n super(positionX, positionY, width, height, helloBody,\n \"Hello Blockchain\", CHelloBlockchain.getIcon(), true);\n\n this.mTools = CTools.getInstance();\n this.mMetaParser = new CVMMetaParser();\n this.mPendingReadFile = false;\n\n \/\/ Set a unique thread ID for this dApp instance\n this.setThreadID = 'HELLO_BLOCKCHAIN_' + this.getProcessID;\n\n \/\/ Register all event listeners\n const ctx = CVMContext.getInstance();\n ctx.addConnectionStatusChangedListener(this.onConnectionChanged.bind(this), this.mID);\n ctx.addVMStateChangedListener(this.onVMStateChanged.bind(this), this.mID);\n ctx.addNewDFSMsgListener(this.onDFSMessage.bind(this), this.mID);\n ctx.addVMMetaDataListener(this.onVMMetaData.bind(this), this.mID);\n ctx.addNewGridScriptResultListener(this.onGridScriptResult.bind(this), this.mID);\n ctx.addVMCommitStateChangedListener(this.onCommitStateChanged.bind(this), this.mID);\n }\n\n \/\/ \u2500\u2500 Package Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n static getPackageID() {\n return \"org.gridnetproject.UIdApps.helloBlockchain\";\n }\n static getDefaultCategory() { return 'dApps'; }\n static getIcon() {\n \/\/ A simple chain-link icon (replace with your own Base64 PNG)\n return '';\n }\n\n \/\/ \u2500\u2500 Lifecycle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n open() {\n super.open();\n\n \/\/ Bind button click events\n this.getControl('btnWrite').addEventListener('click', () => this.writeMessage());\n this.getControl('btnCommit').addEventListener('click', () => this.commitChanges());\n this.getControl('btnRead').addEventListener('click', () => this.readMessage());\n this.getControl('btnList').addEventListener('click', () => this.listFiles());\n\n \/\/ Allow Enter key to trigger write\n this.getControl('msgInput').addEventListener('keydown', (e) => {\n if (e.key === 'Enter') this.writeMessage();\n });\n\n this.log('dApp started. Waiting for connection...');\n\n \/\/ Check if already connected\n if (CVMContext.getInstance().getConnectionState == eConnectionState.connected) {\n this.onConnectionChanged({ state: eConnectionState.connected });\n }\n }\n\n closeWindow() {\n \/\/ Listeners registered with this.mID are auto-cleaned\n super.closeWindow();\n }\n\n \/\/ \u2500\u2500 Core Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n writeMessage() {\n const input = this.getControl('msgInput');\n const message = input.value.trim();\n\n if (!message) {\n this.log('\u26a0\ufe0f Please enter a message first.');\n return;\n }\n\n if (CVMContext.getInstance().getConnectionState != eConnectionState.connected) {\n this.log('\u274c Not connected to GRIDNET Core.');\n return;\n }\n\n const fs = CVMContext.getInstance().getFileSystem;\n\n \/\/ Write the message as a file called \"hello_message.txt\"\n let result = fs.doNewFile('hello_message.txt', message, false, this.getThreadID);\n this.addNetworkRequestID(result.getReqID);\n\n this.log('\u270d\ufe0f Writing \"' + message + '\" to hello_message.txt...');\n this.log('\ud83d\udca1 Click \"Commit\" to persist this to the blockchain.');\n }\n\n commitChanges() {\n if (CVMContext.getInstance().getConnectionState != eConnectionState.connected) {\n this.log('\u274c Not connected to GRIDNET Core.');\n return;\n }\n\n const fs = CVMContext.getInstance().getFileSystem;\n let result = fs.doCommit();\n this.addNetworkRequestID(result.getReqID);\n\n this.log('\ud83d\udd10 Commit requested \u2014 awaiting authorization...');\n }\n\n readMessage() {\n if (CVMContext.getInstance().getConnectionState != eConnectionState.connected) {\n this.log('\u274c Not connected to GRIDNET Core.');\n return;\n }\n\n const fs = CVMContext.getInstance().getFileSystem;\n this.mPendingReadFile = true;\n\n \/\/ First sync to get latest state, then read the file\n fs.doSync();\n\n let result = fs.doGetFile('hello_message.txt', false, this.getThreadID);\n this.addNetworkRequestID(result.getReqID);\n\n this.log('\ud83d\udcd6 Reading hello_message.txt from blockchain...');\n }\n\n listFiles() {\n if (CVMContext.getInstance().getConnectionState != eConnectionState.connected) {\n this.log('\u274c Not connected to GRIDNET Core.');\n return;\n }\n\n const fs = CVMContext.getInstance().getFileSystem;\n\n \/\/ Navigate to root and list\n let result = fs.doCD('\/', true, false, false, this.getThreadID);\n this.addNetworkRequestID(result.getReqID);\n\n \/\/ Also request a standalone LS\n let lsResult = fs.doLS(this.getThreadID);\n this.addNetworkRequestID(lsResult.getReqID);\n\n this.log('\ud83d\udcc2 Listing files...');\n }\n\n \/\/ \u2500\u2500 Event Callbacks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n onConnectionChanged(event) {\n const dot = this.getControl('dotConn');\n const lbl = this.getControl('lblConn');\n\n if (event.state == eConnectionState.connected) {\n dot.classList.add('ok');\n lbl.textContent = 'Connected';\n this.log('\u2705 Connected to GRIDNET Core!');\n } else if (event.state == eConnectionState.connecting) {\n lbl.textContent = 'Connecting...';\n } else {\n dot.classList.remove('ok');\n lbl.textContent = 'Disconnected';\n this.log('\u274c Disconnected.');\n }\n }\n\n onVMStateChanged(event) {\n const dot = this.getControl('dotVM');\n const lbl = this.getControl('lblVM');\n\n if (event.state == eVMState.ready || event.state == eVMState.synced) {\n dot.classList.add('ok');\n lbl.textContent = 'VM: Ready';\n this.log('\u2705 Decentralized VM ready.');\n } else if (event.state == eVMState.initializing) {\n lbl.textContent = 'VM: Init...';\n }\n }\n\n onCommitStateChanged(state) {\n const dot = this.getControl('dotCommit');\n const lbl = this.getControl('lblCommit');\n\n switch (state) {\n case eCommitState.prePending:\n lbl.textContent = 'Commit: Preparing';\n this.log('\ud83d\udd12 Commit preparing...');\n break;\n case eCommitState.pending:\n dot.classList.add('ok');\n lbl.textContent = 'Commit: Pending';\n this.log('\u23f3 Commit pending \u2014 awaiting consensus...');\n break;\n case eCommitState.success:\n dot.classList.add('ok');\n lbl.textContent = 'Commit: \u2705 Success!';\n this.log('\ud83c\udf89 COMMIT SUCCESSFUL! Your data is now permanently on the blockchain!');\n \/\/ Reset after 3 seconds\n setTimeout(() => {\n dot.classList.remove('ok');\n lbl.textContent = 'Commit: Idle';\n }, 3000);\n break;\n case eCommitState.aborted:\n dot.classList.remove('ok');\n lbl.textContent = 'Commit: Aborted';\n this.log('\u274c Commit aborted.');\n break;\n default:\n dot.classList.remove('ok');\n lbl.textContent = 'Commit: Idle';\n }\n }\n\n onDFSMessage(dfsMsg) {\n if (!this.hasNetworkRequestID(dfsMsg.getReqID)) return;\n\n if (dfsMsg.getData1.byteLength > 0) {\n let metaData = this.mMetaParser.parse(dfsMsg.getData1);\n\n if (metaData != 0) {\n let sections = this.mMetaParser.getSections;\n\n for (let i = 0; i < sections.length; i++) {\n let sType = sections[i].getType;\n\n if (sType == eVMMetaSectionType.fileContents) {\n let entries = sections[i].getEntries;\n\n for (let a = 0; a < entries.length; a++) {\n let fields = entries[a].getFields;\n let entryType = entries[a].getType;\n\n if (entryType == eDFSElementType.fileContent) {\n let fileName = this.mTools.arrayBufferToString(fields[1]);\n let dataType = fields[0];\n let rawData = fields[2];\n\n let value;\n if (dataType == eDataType.bytes) {\n value = this.mTools.arrayBufferToString(rawData);\n } else if (dataType == eDataType.unsignedInteger ||\n dataType == eDataType.signedInteger) {\n value = this.mTools.arrayBufferToNumber(rawData);\n } else {\n value = '[binary: ' + rawData.byteLength + ' bytes]';\n }\n\n if (fileName === 'hello_message.txt' || this.mPendingReadFile) {\n this.getControl('readResult').textContent = value;\n this.mPendingReadFile = false;\n this.log('\ud83d\udcc4 Read ' + fileName + ': \"' + value + '\"');\n } else {\n this.log('\ud83d\udcc4 ' + fileName + ' = ' + value);\n }\n }\n else if (entryType == eDFSElementType.directoryEntry) {\n let dirName = this.mTools.arrayBufferToString(fields[1]);\n this.log('\ud83d\udcc1 [DIR] ' + dirName);\n }\n else if (entryType == eDFSElementType.fileEntry) {\n let fileName = this.mTools.arrayBufferToString(fields[1]);\n this.log('\ud83d\udcc4 [FILE] ' + fileName);\n }\n else if (entryType == eDFSElementType.stateDomainEntry) {\n let domainName = this.mTools.arrayBufferToString(fields[1]);\n this.log('\ud83c\udf10 [DOMAIN] ' + domainName);\n }\n }\n }\n }\n }\n }\n }\n\n onVMMetaData(metaMsg) {\n if (!this.hasNetworkRequestID(metaMsg.getReqID)) return;\n this.log('\ud83d\udce1 Meta-data response received.');\n }\n\n onGridScriptResult(result) {\n if (result == null) return;\n this.log('\u26a1 GridScript execution completed.');\n }\n\n \/\/ \u2500\u2500 Utility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n log(message) {\n const area = this.getControl('logArea');\n if (!area) return;\n const ts = new Date().toLocaleTimeString();\n area.textContent += '\\n[' + ts + '] ' + message;\n area.scrollTop = area.scrollHeight;\n }\n}\n\n\/\/ Static settings field\nCHelloBlockchain.sCurrentSettings = null;\n\nexport default CHelloBlockchain;\n<\/pre>\nHow to Use This dApp<\/h3>\n\nSave<\/strong> the code above as HelloBlockchain.app<\/code><\/li>\n Open<\/strong> GRIDNET OS in your browser (https:\/\/ui.gridnet.org<\/code> or your local instance)<\/li>\n Drag and drop<\/strong> the .app<\/code> file onto the Desktop or File Manager<\/li>\n The dApp window opens. Watch the status indicators turn green as it connects.<\/li>\n Type a message<\/strong> and click Write<\/strong> \u2014 this stages the file locally<\/li>\n Click Commit<\/strong> \u2014 authorise the transaction when prompted<\/li>\n After the commit succeeds, click Read Message<\/strong> \u2014 your message is read back from the blockchain!<\/li>\n Click List Files<\/strong> to see all files in your current directory<\/li>\n<\/ol>\nCongratulations. You have just built a decentralized application that reads and writes to a blockchain \u2014 using nothing but HTML, CSS, and JavaScript.<\/p>\n What Just Happened \u2014 The Full Picture<\/h2>\nLet’s step back and see the complete journey your data takes:<\/p>\n <\/p>\n \nWrite<\/strong>: doNewFile()<\/code> sends your data to GRIDNET Core via WebSocket. The data is staged locally in the node’s pending state.<\/li>\n Stage<\/strong>: Your changes exist in a local buffer. They’re real to your session but not yet committed to the blockchain.<\/li>\n Commit<\/strong>: doCommit()<\/code> requests the node to package all staged changes into a blockchain transaction.<\/li>\n Sign<\/strong>: The transaction is cryptographically signed \u2014 either by scanning a QR code with the GRIDNET mobile wallet, or via a locally stored keychain.<\/li>\n Consensus<\/strong>: The signed transaction is broadcast to the peer-to-peer network. Other nodes validate it. Once consensus is reached, it’s included in the next data block.<\/li>\n On-chain<\/strong>: Your data is now permanently and immutably stored on the GRIDNET OS blockchain. Any node anywhere in the world can read it.<\/li>\n<\/ol>\nThe entire round-trip \u2014 from typing a message in your browser to having it permanently stored on a decentralized blockchain \u2014 takes seconds. And you wrote it in HTML, CSS, and JavaScript.<\/p>\n What to Build Next<\/h2>\nYou’ve built your first dApp. Here’s where to go from here:<\/p>\n \nExplore the existing dApps<\/strong>: Study the source code of Terminal.js, FileManager.js, and the Wallet dApp for production-grade patterns<\/li>\n Read the UI dApp Design Guidelines<\/a><\/strong> \u2014 the complete reference for all rules, patterns, and best practices<\/li>\n Learn GridScript<\/strong> \u2014 the GridScript Comprehensive Guide<\/a> covers the stack-based language in depth, including smart contracts and advanced operations<\/li>\n Use the Blockchain Explorer API<\/strong> \u2014 query blocks, transactions, and domain data programmatically through CVMContext<\/li>\n Implement State-Less Channels<\/strong> \u2014 for instant, off-chain micropayments between users<\/li>\n Build with WebRTC Swarms<\/strong> \u2014 for peer-to-peer real-time communication directly between browsers<\/li>\n Deploy Identity Tokens<\/strong> \u2014 create on-chain identities and token pools for your application’s economy<\/li>\n<\/ul>\nThe entire GRIDNET OS platform is open. There are no gatekeepers. No review boards. No permission required. You write code, you deploy it to the blockchain, and it runs \u2014 decentralized, censorship-resistant, and permanent. Welcome to the future of application development.<\/p>\n Welcome to GRIDNET OS. \ud83c\udf10<\/p>\n","protected":false},"excerpt":{"rendered":" You Already Know Everything You Need Here is the single most important sentence in this entire article: if you can write HTML,…<\/p>\n","protected":false},"author":1,"featured_media":835482,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[162,17,163],"tags":[213,155,164,197,145,142,143,159,152,212,165],"class_list":["post-835486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-tutorial","category-tutorials","tag-beginner","tag-cvmcontext","tag-dapp","tag-dapps","tag-decentralized","tag-gridnet-os","tag-gridscript","tag-tutorial","tag-ui-dapp","tag-ui-development","tag-web-development"],"_links":{"self":[{"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/posts\/835486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/comments?post=835486"}],"version-history":[{"count":6,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/posts\/835486\/revisions"}],"predecessor-version":[{"id":835525,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/posts\/835486\/revisions\/835525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/media\/835482"}],"wp:attachment":[{"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/media?parent=835486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/categories?post=835486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mag.gridnet.org\/index.php\/wp-json\/wp\/v2\/tags?post=835486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}