Bubble is a powerful "no-code" tool that allows people to build complex web applications without writing any code. In this tutorial we will use Bubble to connect to the HiveSQL database, retrieve information from it, and display that information on a webpage.
There seems to be a big gap between the few people who understand the complexity of blockchain/dApp development and the consumers who use the technology that they develop. I was inspired by a video 
Let's Get Started!
First you'll need to sign up for a free account on Bubble. If you build something worth releasing to the public, you'll probably want to upgrade to a paid plan, but that's not necessary for our experiments today.
You'll also need to register for a HiveSQL account by following the instructions here. The cost is currently just a one-time fee of 1 HBD. The login credentials that you receive after registering will be needed in a future step.
Now log into Bubble and click on the "New app" button under "My apps". Fill out the popup box with a name for this app and the other details. Leave the template option blank. Something like this will work:
- Next you should be in the Bubble editor. There are other tutorials online that teach you how to use all the features so I'm going to focus purely on how to use it with Hive. Click on the "Plugins" icon on the left side and then click on the "+ Add plugins" button on the top right corner. A popup box like the one below will open. You can use the search box to find the "SQL Database Connector" app and install it.
- Click on SQL Database Connector on your Plugins page on Bubble and we will enter the database connection information. You can type anything you want for the Connection name and select "Microsoft SQL" for the database type.
Now is when we'll need your HiveSQL login details from earlier. The transaction memo should tell you the Server, Database, Login, and Password. The connection string you need to type in will contain all of those items in the following format (with no brackets):
mysql://[Login]:[Password]@[Server]:1433/[Database]
- After you have clicked the "Test connection" button and had no problems, we will add a query. For this tutorial we will use the Comments table from the database to retrieve the last 50 comments, but once you figure out how to do this, you can experiment with all kinds of things.
You can name the query anything, but I suggest you just name it "comment". Choose the connection you created in the last step and choose "Data" from the "Use as" dropdown. In the query box, we can do a lot of things with SQL, but to keep things fairly simple in this example we're going to use the following query:
SELECT TOP 50 * FROM Comments ORDER BY ID DESC;
- Click on "Initialize this query" and you should get a popup box like the one below. This shows all of the data values returned from the database. Bubble was able to correctly detect all the data types for me so I didn't have to change any of them. You can click "Save" on this popup.
- Now we have the database connection set up and can experiment with displaying those values on the page. Click on the "Design" button on the left menu. If you started this app with no template then you should have a blank page. Click on the "Repeating Group" under "Containers" on the left menu. Click and drag on the page to create a big square. If you mess up, you can drag the corners of the box to look similar to mine:
- Double click on the Repeating group that you put on your page. In the popup box that appears, we need to choose the name of our query as the "Type of content". Sine I named mine "comment", that's what I'll pick:
- Click on "Data source" and select "Get data from an external API". This brings up another box asking for the API provider. From the dropdown, select "comment" or whatever you named yours and then click the "Close button". We can then close the box for the Repeating group as well.
- Click on "Text" on the left menu under "Visual elements". Then click and drag a rectangle in the top section of the Repeating group. You'll see that the text repeats in each section like this:
- Double click on the Text box and it will open a similar popup to edit it. Click on the "...edit me..." words, type "Username: ", and then click on the blue box that says "> Insert dynamic data".
- Select "Current cell's comment" and in the following box select "'s Author". Then you can close the Text edit box.
- Let's repeat the last few steps to create another text box next to that one, but this time we'll type "Comment: " into it and choose "Current cell's comment" and "'s Body" from the dropdowns so our page looks like this:
- Now we can finally test this out and see what happens!! Click on the "Preview" link on the right side of the top menu and it should open a new window. It might take a second to load the data, but then if we did everything correctly it should look similar to this with the ability to scroll through the last few dozen posts/comments from the Hive blockchain:
WE DID IT!!
If you followed this tutorial, you've now opened the door to being able to build all kinds of web apps that use data from the Hive blockchain without writing any code! You could create a personal website that shows statistics about your account along with a feed of your most recent posts. You could build an app that lists the largest Hive transactions of the day. The possibilities are endless!
What's Next?
Of course, there's still more learning to do. The app created in this tutorial is not pretty and it only uses a couple of the pieces of data we can access with HiveSQL. If you want to build a real app using these tools, the following resources will come in handy:
I put a lot of effort into this tutorial so I'd love to get your opinion and feedback in the comments! Let me know if you try following it and run into a problem or if you build something cool that you want to share!