{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/a48e4620e9324c72a19306cd90e0ff5e\" frameborder=\"0\" width=\"1152\" height=\"864\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":864,"width":1152,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":864,"thumbnail_width":1152,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/a48e4620e9324c72a19306cd90e0ff5e-1717082643606.gif","duration":972.332,"title":"Create a web3 app with Bagpipes in minutes","description":"Turn your app into Web3 app by creating a bagpipe that queries the blockchain, for a balance and feeds that balance to a front-end web app.\n\n------\nRamsey, product engineer and co-founder @ https://bagpipes.io\n\n-----\n\n🔗 Get a template link to the Bagpipe created: \nhttps://alpha.bagpipes.io/#/create/?diagramData=ylbpK0NN1\n\n🔗 Frontend mini app: \nhttps://replit.com/@decentration/ReactWithBagpipes#src/frontendConfig.js\n\n🔗 Server: \nhttps://replit.com/@decentration/ReactWithBagpipesServer#index.js\n\nCreating a Bagpipe for Querying Blockchain Balance\n\n### Objective:\n\nTo create a bagpipe that queries the blockchain, specifically the Polkadot chain, for a balance and feeds that balance to a front-end web app.\n\n### Key Steps:\n\n1. **Create Webhook Endpoint**:\n\n   - Create a webhook and copy the webhook endpoint link provided.\n    - Then activate the webhook by clicking \"Start listening\" and sending data to it. \n\n2. **Fork the Frontend and Backend with Repl.it**:\n\n   - Connect a frontend web app and a Node.js server via the webhook.\n   - Provide the frontend URL in the server config and the server URL and webhook endpoint in the frontend config.\n\n3. **Send Data to Webhook**:\n\n   - Use the frontend to send data to the webhook.\n   - Activate the webhook by sending it initial data.\n\n4. **Create Execution**:\n\n   - Create an execution to fetch the balance.\n   - Run the scenario to produce pills based on the data structure of the execution.\n\n5. **Send Response to Frontend**:\n\n   - Use the (downstream) HTTP Request node to send the response back to the website's Node.js server.\n   - Make a POST request with the free balance pill to the server URL with necessary headers (content type, accept).\n\n\n### Notes:\n\n- Ensure proper data flow from frontend to webhook to query chain node to backend server.\n- Check for errors in data transmission and response handling.\n- Verify the correctness of URLs, endpoints, and headers for smooth operation.\n\n### Tips:\n\n- Use the provided templates for frontend and backend connections.\n- Test the process in a controlled environment before deploying to production.\n- Optimize the display of balance data for better user experience.\n- Reach out for support or clarification if needed via comments or email.\n\nBy following these steps, you can efficiently create a \"Bagpipe\" to query blockchain balances and integrate them into your web application."}