No Code Web3.0 Solution: One-Click IPFS Integration

In this tutorial we will be covering how to use IPFS Add from URL plugin for Bubble.io. It’s super simple and in literally just a few clicks you will have functioning IPFS integration in your web app.

Introduction

Creating webpages is easier than ever with the No-Code platforms like Bubble.io. No longer do you need to know programming to make functioning web pages for yourself or business. Web3.0 movement is also gaining traction as blockchain and decentralized apps become more mainstream. One of the most practical services for Web3.0 is IPFS (InterPlanetary File System), a peer-to-peer network for storing files. Marrying the two, No-Code and Web3.0 & IPFS, just makes sense!

Prerequisites

Nothing! As mentioned earlier, you don’t need any programming knowledge. All you need is to create an account with Bubble.io and you are good to go.

Click here if you prefer to watch a video, otherwise continue on with the walkthrough.

Creating a New Project

Create a New Project by Clicking on ‘New app’

Fill out form. Name project whatever you want. We will be naming this project ‘ipfs-plugin-example’. When done click ‘Create a new app’

Adding Plugin

In new project, locate `Plugins` in the left vertical toolbar

Type in “ipfs” in search bar and install IPFS Add from URl plugin

Adding IPFS Functionality

Under Design Tab, add Input Field and Button. Name accordingly. Add IPFS functionality by clicking on the button and then clicking Start/Edit Workflow

Click here to add an action… => Plugins => IPFS Add

Under data_url field add ‘Input input URL’s value’

That’s it!

We will be storing the following URL onto IPFS: https://stickershop.line-scdn.net/stickershop/v1/product/8543/LINEStorePC/main.png;compress=true. Image preview below:

Image Preview of link above

Add image url into input field and click on ‘Add to IPFS’ and that’s it!

Further Improvements

How do we know that our file has been stored on IPFS? IPFS Add from URL plugin has three data outputs: CID, IPFS URL, and original data URL. We can verify these values by outputting them in our app.

In Design Tab add Three Groups and label them CID, IPFS, Data URL. In each group container add a Text Element

For each Text Element, click Insert Dynamic Text => Group Name (CID, IPFS, Data URL) => text

Navigate to Workflow => Click here to add an action… => Element Actions => Display data

Under Elements select Group name (CID, IPFS, Data URL). Under Data to display => Result of step 1 (IPFS Add)’s <CID, IPFS url, data url>. Repeat for all three fields

Verify

Now it’s time to verify. Insert a file URL into the input field and click Add to IPFS. CID, IPFS URL and Data URL should now be displayed.

We can check the file by copying the IPFS URL (https://ipfs.io/ipfs/bafybeiewhw4cxsd5xonfzb4clfijd2zhn2nxjqsuq4gr3gjytbepyukbxm) into our browser. It’s been verified!

Verified image stored on IPFS

Concluding Thoughts

That’s it! This is the full walkthrough of the IPFS Add URL plugin on Bubble.io. In just a few clicks we have IPFS integration setup on our application. If you have any questions or comments feel free to leave a comment!

Here at Numbers, we are big believers of Web3.0 and the no-code movement. If you are curious about our projects and other tech surveys / tutorials, feel free to check out our Medium as well as our GitHub page.