Tutorial

Build a web app in 10 minutes without using code with Bubble.io

In this video Benjamin has instructed the viewers for building a web application. He has built a searchable directory of no code tools in under ten minutes.

He has described the procedure to build the directly on bubble. The directory would look like as follows but without the category list on the left side.

So in order to initiate the process first he has prepared to create a new page in bubble and naming that page directory_youtube.

Creation of New Page in Bubble.io

First we need to go on the new page created on bubble.io and select “Data” on the left bar of page presenting different options and a list of data types would be shown. Scroll down to the last and write in new type section as “directory_youtube” and click on create button.

Now locating in the data types list the “directory_youtube” option can be seen. Select that option and click on create new field that has appeared on the right side column.

A box will pop up on the screen to add the field name and type. Here we will write field name as “name” and select “text” in field type options. Now click the create button to add the field in list.

In order to add five more fields, we have to select the create new field option again one by one to add fields with names as “descr”, “logo”, “name_url”, “tags_list” and “url_link”. All these field names have to added one by one to create new fields with the field type selected as “text” in each.

Now go for development option in the top right corner and select it. Here a new box would be appeared on screen and select the option of “deploy current version to Live”. Again, a box pops up on screen to add description in the deployment message. Write “ok” in description and click on deploy option below.

After a few seconds successful deployment message would be appeared. Close that message and again click on the deployment option in the top right corner and select the “Live” option there to put the data stream version on live.

Now select the “App data” option in the bar and a list of app data will appear below. Click on the option of “All directory_youtubes” option in the list.

Here a table with different columns would be shown. Click on upload option and the data will be uploaded as CSV in live database (beta). After this a box will appear, click on “pick a file to upload” option here and a list of files will pop up on screen.

Here you need to select the “List of No Code Tools” file option. Then select the “directory_youtubes” option in type of data list.

After this select the “Map fields” option, there a list of fields will be appeared that were created earlier for initiating the process. Select the same options in the column next to map fields and click on upload data.

Designing the App

Now go for the “Design” option in the left bar being shown on the page. Now click on the “Live (read only)” option on the top right corner and select option of “development” in the box appeared. Go for “Repeating Group” option in the list of UI Builder list. A plan platform will appear with a “+” shaped cursor.

Create a big box with that cursor and a black box will pop up on screen. Change the width of box by 1100 and now right click on box for further options and select the option of “center horizontally”. In the black box change the number of rows to “2” and number of columns to be “3”.

Change the type of content as “directory_youtubes” and data source as “do a search for” option. A new box will appear for search and select the option of “directory_youtubes” in the type and close the box.

Now go for “Map” option and insert the input command in the pop up and select that option. Now again “+” shaped cursor would appear and create a rectangular shaped box at the top of the table. Again, change the width to 1100 and select the center horizontal option by right click on the table.

Now click on “Group” option on the left side column and create a box in first column. Again, the black box will appear and click on “remove style” there. Scroll down for Border style options and set it for solid borders with roundness to “8”.

Change the color frequency to be “#000000”. Now select the “Image” option in the list at left column and create a small box inside the box created earlier.

Now change the width in black box to “60”, height as “60” and x-axis as “15”. Right click on the small box and select the option of “copy formatting” and then again right click for “paste formatting” option. In the black box click on insert “dynamic image” option and the small box will appear on the screen.

Again in black box select the” directory_youtubes” in type of content options and select “Current cells directory_youtube” option in data source.

Now click on the small box and the black box will show different options now. Select the “Parent group’s directory_youtube’s logo” in dynamic image and it would be seen that in each cell of the table the big boxes with small boxes will appear and the text written as “Parent group’s directory_youtube” will appear in each.

Now again select the border on the table and remove the border in black box. Add a text box below the small box by clicking on “Text” option in the left bar list. Go for remove style option in black box select “Space Mono (700)” with size”18”. Now click on the box consisting of message with “edit me”.

For editing text here click on “insert dynamic data” and select option of “Parent group’s directory_youtube’s descr”. Another text box with same text will appear and place it just beneath the first one. Change the size of text to “14” and change color as “#383838”.

Now select the option of “Ionic Icon” in the left bar list and insert the icon in the big box at the top right corner. Again the black box with different options will appear. Write open in the Icon bar and select the symbol appeared below. Now adjust it in the corner with correct alignment as shown.

Now scroll down in the black box and undo the command of visibility of the element on page load. Select conditional in the upper bar of black box and search for Group directory_youtube and select the option “is hovered”. Again a search bar appears below and select the “icon is visible” option there.

Now go in Appearance and click on “Start/Edit workflow” a new page will appear click on the grey box to add an action and write “url”.

Then click on “Open URL in New Tab” and a black box will be appeared, click on “insert dynamic data” and select the “Parent group’s directory_youtube’s url_line”. For element ID again click on “insert dynamic data” and select “Current cell’s index”.

Now select the “Design” option in the left bar on page and scroll down the black box after clicking on the icon. Insert the ID attribute as ‘Current cell’s index”. Now select the “Air PullToRefresh” option in the list of UI Builder and write “search” in the box popped up on screen.

Now you will see the “Search & Autocorrect” option in the UI Builder. Again create a small box and a black box will appear on right side. Add “directory_youtube” in data type write “do a search” in data source.

Now another black box will appear, again select “directory_youtube” in type. Now select “name” in Field to Search 1 and “descry” in Field to Search 2 and “url_link” in Field to Search 3.

Scroll down in black box and select the option for “hide document”. Write “Searchinput” in the Input box ID. Go for Conditional option in upper bar of black box and select option of “Input A” in When.

Again search bar options appear and add the command as “Input A’s value: number of characters > 3 or Input A’s value: number of characters and Input A is focused”.

Now insert command in Data Source “Search & Autocorrect A’s Matches: items until #20”. Now select the Deployment option again on the top right corner of page and select “Deploy current version to Live” and add “ok” in the deployment message to proceed the process.

Select the big box again and a black box will appear. Go for “Appearance” option in the upper bar and scroll down. Select “Outset” in the shadow style and select box shadow color as “#000000”. Select”8” in the vertical offset options and “20” in the blur radius.

Again go for Conditional option in the upper bar and add command as “This Group is hovered” in When option and search for border color in the properties to select “#000000” in the options. Add “12” in the vertical offset options again click on deployment and add ok in deployment message to proceed.

Click on the “Repeating Group” option in the UI Builder list and create another box inside the main big box in the table. Again black box will appear and give command for “1” rows and “2” columns in the new box. Copy one of the above boxes and paste it adjacent to the new box.

Select “text” in the Type of content add command for “directory_youtube’s tag_list” in data source. Select the “Ext.verticle scrolling” in the layout style and again go for deployment to proceed the process.

This is the end of procedure and 10 minutes are over. While selecting the “Preview” option in the top right corner, the URL will open and cards will appear on hover with new tab option on them in the place of icon we added in the process.

If we check for in the search bar and give command as “bubble” in search then Bubble card would appear in the boxes which shows the procedure was successfully completed. Following figure shows the final look of no code searchable directory as:

Leave a Reply

Your email address will not be published.

Back to top button