Nexus Bubble Plugin Tutorial

Menu...

Building on Nexus has been made simple with the use of the Nexus Plugin on the Bubble.io platform. No prior coding experience is required to build a DApp with the use of the Nexus API. This guide will walk through the process of creating a simple DApp on Bubble from the beginning and get the user familiarized with how Bubble works and connects with the Nexus API.

To read our supporting documentation for the Nexus Plugin, please click here.

Creating a new Bubble Project

If you do not already have an account, create one on the Bubble.io homepage. Once an account is created and you are logged in, you will see this default screen.

bubble

Click on the blue New App button to create your project. The following box will pop up requiring you to fill in some information about the DApp you are looking to build. The name of this new app must be unique, and Bubble will notify you if the name has already been taken. The questions regarding what kind of app is being built and the goals you hope to achieve supply Bubble with some information to help gauge what type of assistance can be offered to you as the DApp builder. Once you have filled out these fields, click Create a new app.

bubble

Getting started with a Blank Page

Bubble offers an Assistant that walks the user through a step-by-step process of how to interact with the app building interface. It also starts with a premade template for the user to modify however they choose. This tutorial is going to skip the template and assistant to start from a clean page. At the bottom of the left panel, click the Start with a blank page button, and then Close the assistant.

bubble

This will bring up a blank grid with a design panel on the left hand side.

bubble

Now with a clean page - it is time to build your first element in Bubble.

Adding the Nexus Plugin to the App

Before we get to designing, we are going to install the Nexus Plugin into the app. On the far left side of the build bar, click on the Plugins tab. Click on the blue Add Plugins button at the top of the screen. Type in Nexus Blockchain to the search bar, click Install, and then Done.

bubble

This will add the latest version of the Nexus Plugin to your app. A list of available API calls are listed, but the only thing you need to do on this page is add the value 200 to the API Error Code field. Our Github documentation is linked next to each API call for further reading.

bubble

Creating a Login Panel

Now, on the far left, click back to the design tab. Before we start creating the panel itself, in the building panel under the Containers drop down, select Group and click + drag a large rectangle on your blank canvas. This group will hold your items together that you are creating, and make it easier to make decisions for all elements at the same time (such as hiding or showing them at certain times).

bubble

Next, to actually build the login screen. Bubble has a Signup / Login Popup element under the Reusable element drop down, however we will be walking through creating one from scratch. Under the Visual Elements drop down, click on the Shape option. Then, click + drag inside of the group you have already created to place the new shape inside of it. There will be a red outline indicating the size of the group that has previously been made, and you want to keep your shape within that rectangle.

bubble

At the top of the new edit panel on the right hand side where it says Shape A, rename the panel to something that you will recognize as the Login Panel. You can customize various characteristics of the rectangle shape you created in this edit panel. This tutorial will just change the color of it.

bubble

Next, we will add some text to the rectangle to give it a label. On the left building panel under Visual Elements, click on Text and click + drag a smaller rectangle within the rectangle you have already made.

bubble

You can now edit the text within the box. Type whatever you would like to be the title of this section, and then click on the Style drop down menu underneath the Start / Edit workflow button. The option chosen in this tutorial was H1 Heading - Dark. You can then right click on the text element and choose center horizontally to align it in the center of the rectangle.

bubble

Next, we need to add the text fields where the user will enter their username, password, and PIN. On the left build panel, under the Input Forms drop down, click on the Input button. click + drag a rectangle below your label inside your login panel.

bubble

You will now want to change the name Input A to something more easily identifiable. This tutorial will use “Username”. Change the Placeholder text to “Username” as well, so the user knows to enter their username in this field. Check the This input should not be empty box.

bubble

Now, you will repeat this process for both the Password and PIN fields. In addition to the last checkbox selected, for the password and PIN you should also go to the Content format dropdown and select Password. This will then hide the password and PIN as they are typed by the user and not shown as plain text.

bubble

Next we need to add the “Log In” button. Back on the left build bar under Visual Elements drop down, click on Button. Click + drag it below your PIN input field.

bubble

Finally, name the button, fill in the placeholder text, and choose a style for it. The style chosen in this tutorial is Secondary Button.

bubble

Creating the Workflow

With the button still highlighted, click on the Start / Edit Workflow button. This takes you to the workflow tab in the Log in Button's workflow.

bubble

Click to add an action, and under Plugins, scroll down to Nexus - Users API: Login/user. Click on it to add it to the workflow.

bubble

The plug in will automatically populate with plugin default data, however we want to add the log in information that the user is inputting when they use the app. Click in the Username field, and then on Insert Dynamic Data. In the drop down, you will see the Username input field we created on our login panel. Select that, and then click on the ‘s value option. That will populate this username field with the entered text from the user.

bubble

Repeat this process with both the Password and PIN fields.

bubble

Note: This will be running on the Nexus Mainnet, so you will want to be entering real username and passwords. If you do not want to use your own login credentials or have not created one yet, a demo account will be supplied later on.

Storing User Data

How do we know if the user was logged in correctly? One way to check is to store data that is returned in the API login/user call, and display it back to the user once the call is complete. To store user data, go to the Data tab on the left build bar. We are going to Create a new field in the User data type.

bubble

We are going to save the user’s session once they log in to their sigchain, so we need to add a Session field. Enter session and choose Text as the field type, and then click create.

bubble

Now, back to the Workflow tab. In the Log In Button workflow, click add an action. In the Data tab, click Make changes to thing…

bubble

We are now going to take one of the return values from the login/user API call and save it to the user. Choose Current User in the Things to change field, then click Change another field.

bubble

We are going to set the Session value, so select session and then it will be equal to a value returned by The Result of step 1. Choose that option, and then select body session.

bubble

bubble

Displaying a Welcome Message

We have our API call, our user data saved, and now we need to use it. Go back to the Design tab and click on Alert under the Visual Elements dropdown. Click + drag a rectangle over your login panel as large as you like. We are going to be using a combination of static and dynamic text to create the following message:

Welcome, [Username]! Your session ID is: [session ID]

In the text field, type Welcome, and then click insert dynamic data. You will then select the Username’s value again, like you did when entering it into the API call. Add a ! at the end for extra excitement.

bubble

Now for the second half of the message. Type Your Session ID is: and then once again click insert dynamic data. This time, you are going to choose Current User and then ‘s Session to display the Session ID we saved in the workflow.

bubble

The last thing to do is to trigger the popup to show up after the user logs in. Go back to the Workflow tab and into the Login Button workflow. Add an action at the end, and under the Element Actions tab, under Alert choose Show Message. You can change the duration of the alert being shown as long as desired, here it is set to 4 seconds.

bubble

Testing your Login Panel

Now that the assembling is done, it is time to test your login panel! Hit the Preview button in the top right corner of your screen to launch the preview of your app.

bubble

You should now see your Login panel in a new tab. You can now enter your sigchain login information, or use the following demo account if you prefer not to use your own.

Username: bubbletest

Password: bubbletest

PIN: 1234

bubble

Hit the button and wait for your alert to pop up.

bubble

Congratulations! You have now successfully used the Nexus Plugin to connect to our API and log into a sig chain from a DApp built on Bubble. Back on the build page, if you click on the Help button at the top of your screen, you will find Plenty of tutorials, shortcuts, and forums that walk you through the process of building with Bubble.

bubble

For Nexus related questions, please join the Nexus Slack Server and post your questions in the #bubble-wg channel.