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.
(this one) in which he talked about how the industry is still too technical and there's a large barrier to entry. I agree with this and decided to share what I have been playing around with in hopes of inspiring others to try building something. I'm not a professional developer and you don't have to be one to follow this tutorial.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 @taskmaster4450 recently uploaded to 3speak
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!
I am not a programmer. It is interesting and good to see that it is possible to build applications and games without any coding using various tools. But currently even this is too complicated for me, because you need to have database management skills in order to make something with it. I can make only a basic database. If I would put the effort and time into learning more about databases, then I would probably be able to learn it properly, but I am not completely sure about it, because one of my disabilities is dyscalculia. I received an exempt from mathematics both in elementary school and in middle school.
Maybe you can focus on design and partner with someone else who can focus on the database/logic aspect? I hope that over time there will be more opportunities for more people to use whatever abilities they have to build new things in this Web3 world of the future. This tutorial is just one small step toward that. I struggle with attention deficit disorder myself so that's why no-code tools like this appeal to me. I always want to start building right away when I get an idea and will lose focus if I have to try to learn a new programming language or framework first.
Thank you for your tutorial
i will try it
Have some ideas
I am impressed.
Fantastic stuff.
!BBH 10
Because this is such an awesome post, here is a BBH Tip for you.
. Keep up the fantastic work
Congratulations @jordand89! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):
Your next target is to reach 100 upvotes.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Yay! 🤗
Your content has been boosted with Ecency Points
Use Ecency daily to boost your growth on platform!
Support Ecency
Vote for Proposal
Delegate HP and earn more, by @hdmed.
great documentation and thanks for sharing this. My only concern would be why did HiveSQL go with MS SQL instead of Postgres or MariaDB. That's interesting
Bookmarked - sounds awesome and a fun way to learn. Now I just need to find the time! :)