Documenting my "new developer" journey

[brenton.strine]

I took a look at Native Mobile way back in the alpha, but haven’t looked at it since. So I am very green and a close approximation of a developer who is completely new to the mobile editor.

I’m now ready to give Mobile another run through, and I figured I would document my journey as closely as I can, to hopefully shed insights into what areas are confusing for a newbie and how it can be improved to be made more friendly. I will post replies to this thread when I have things I was confused about, questions, and thoughts.

Hope this is helpful to the community and to Bubble Inc.

PS, I’m sure I’ll be blocked a lot as I go, so feel free to help speed things along by chiming in to answer my questions or provide tips.

PPS, if you see any tiny little hearts in my screenshots, they are there to indicate that the Codeless Love Powerup plugin has modified the Bubble editor in that area.

[brenton.strine]

First up: I couldn’t figure out how to “turn on” mobile. I put about 30 minutes of time searching and asking around. When I woke up this morning, someone had given me the answer (a new tab in the settings) and I was on my way.

[brenton.strine]

After enabling Mobile, I wanted to create persistent navigation. I remembered that there was some kind of special feature for this which would persist across views, so I knew I shouldn’t roll my own custom nav.

I searched through the elements menu but did not find it.

I searched the forum here for hints and did not find it.

I went back to the elements menu and hovered over some of the new elements in Container (“Horizontal List”) because I expected it to be there, and then followed the hover link to the documentation. However the documentation only shows web view elements, and doesn’t even mention Mobile elements. So no light was shed there.

Returning to the forum, I discovered a post mentioning “Tab Items” which linked to this video, which shows this:

I can not figure out how to get the Tab Bar, nor the App Bar which I see in the screenshot.

I expected to be able to find them in the list of elements. I also searched:

• Plugins
• Create a new Reusable to see if its “type of element” could be set to Tab Bar
• Page Properties
• Maybe there was a special element in the list of pages? nope.

So I’m 100% lost on this at the moment.

Updates:

• I searched the forum in Mobile Beta for “tab” and sorted by age. I looked at all the posts from oldest to newest. Did not find anything helpful.

[georgecollier]

There’s an option on the view to include it as a tab item:

If you had option sets to control single page app views on web, you can think of this similarly. The bar at the bottom will show the views you’ve chosen to make accessible through that tab bar.

[brenton.strine]

Yay, @georgecollier saved me! (of course)

It was surprising to me that I didn’t need to manually insert the tab bar. Now that I checked it, I’m confused why “show tab bar” is disabled, but I have a feeling that will become obvious as I use it so I feel that is a “discoverable” question.

EDIT:
Yep, I created a second view and see “show tab bar” is not disabled. So it’s clear that the homepage must be in the tab bar.

[miracle]

When a view is added to the “Tab Bar”, it wouldn’t make sense to uncheck the “Show tab bar”. hence that why its disabled

[jacob2]

Yeah sometimes you want to show a new view as a modal and you dont want to show the tab bar

[brenton.strine]

So I was poking around the input types and noticed the lack of a Radio element. (Also dropdown.) Interesting, but I can custom-build my own radio or dropdown. I noticed the checkbox element allows you to customize the icon, so I started wondering if it might be a good foundation to build my own Radio input.

Imagine my surprise when I discover that there is no Repeating Group available. I can make the whole page a list, but seemingly can’t have any sort of repeating list within the page.

Am I missing something??? How can I build an app without a repeating group?

Idea 1: Maybe I can create a Reusable Element which is a list type.
Answer: nope, reusables don’t have the same types as mobile views.

Idea 2: Maybe I can use this Horizontal List thing?
Answer: nope, there are no controls for wrapping or even getting the ListItem and HorizontalList to fit height to content. Just doesn’t work for a list of Radios, and certainly not for a dropdown.

Idea 3: Use a plugin?
Answer: looks like there are some plugins that I could use to get a RG. I really don’t want to do this though, so I’m going to drop it now and come back to this only if I really need to.

Idea 4: Use a web view wrapper?
Answer: Web view wrappers must be a page (not a Reusable) and there’s no way to pass an arbitrary list. The page thing is a single item, and you can send data but they’re single items as well.

Idea 5: Maybe a web view wrapper where I pass a “Type” item from an OS which corresponds to a particular search, and then in the page, I can use conditions to populate the list based on which “Type” is selected?
Answer: this is a terrible solution and I hate it.

Idea 6: Maybe I can make the horizontal list thing work if the radio options are cards?
Answer: This feels very clunky. Not just the min-height that can’t be reduced, but the way it scrolls, and the cards being different sizes (or worse… same size with varying text content amounts). It’s just a mess. Maybe a great designer could come up with a way for users to select an option from this that doesn’t feel horrible…

Idea 7: This is something that Native Mobile just can’t handle. Make a page for the WHOLE form and wrap it in a web view.
Answer: Seems to work!

[farouk.zemmouri]

Concerning the RG, there were many posts asking the team about it. They recommend using the list element and promise to deliver what they call a “Short List,” which is a type of repeating group that does not handle a large number of elements.

[brenton.strine]

They recommend using the list element

As in the Horizontal List?

[farouk.zemmouri]

here is the post where Nick is talking about that : Missing Vertical List Component

[jacob2]

Yeah missing RG’s is a bummer. What I’ve been doing is have a series of sheets vertical lists. same color as the view background. you could also use the header of a vertical list to basically build out everything above a repeating group and the footer to make anything below a rg. horizontal lists work well but are a little buggy when scrolling. it doesnt always catch the finger scroll or mouse scroll.

[brenton.strine]

Landed on Webiew as the only viable solution for now for getting a radio. And it seems to work in the editor. But it doesn’t work in the preview. What am I doing wrong.

Idea 1: Tried looking at the documentation following the hover tip. Found this page, but there’s no mention of WebView element.

Idea 2: Did a search on the manual for Webview
It landed me here which has some basics about it, but no info on why it would not show in preview.

Idea 3: Check this post. Got an answer, apparently WebViews don’t work in preview.

[jacob2]

webview elements currently do not show in the web preview. this is why i ahvent been able to play around with those yet. you need the bubblego app for it to work

[brenton.strine]

Radios have failed, vertical repeating groups have failed, WebViews might work, but:

@jacob2

you need the bubblego app for it to work

So how do I get this this aforementioned bubblego?

Idea 1: Search the Android app store for BubbleGo.

• First result is not related to Bubble.
  
  

Idea 2: Search the manual.

• After scrolling past 12 unrelated results, the 13th result got me here.
  
  
• There’s info for iOS, but the section under “Android” is empty…
  
  

Idea 3: Search the forum.

• Found this thread which led me to a direct link on the Android store. Why on earth it didn’t show up in search results, I have no idea.
• Installed! But we got an error when I look at the web view:
  
  
  

Error loading page
Domain: undefined
Error Code: -1
Description: net:ERR_TOO_MANY_RETRIES

[jacob2]

You have to have a provate link sent from @nick.carroll haha i know… its not straight forward at all on that side

[jacob2]

Im also getting the same issue. This is why i vant test webviews. Android app is not working at all for me.

[brenton.strine]

I wonder how these work…

Will a magic link properly open the correct app?

Also wondering… is there a way to bypass login entirely? It’s already on the user’s device… is there a way to store something locally that verifies that this user is on their same device? I suppose that’s a nice-to-have but not necessary, I can make users sign in.

[brenton.strine]

Wondering about deployment to the app stores. Does it take a long time? Once initially approved, are updates quick to get approved? Is it possible to bypass app store approval and sideload apps? Does it go directly to the app store or do I download something and upload it to list it separately?

I don’t understand what most of these options mean. Code signing key???

[jacob2]

I was also curious how do you set the stack the beginning of the stack it must be just set up through the tab bar but what if I wanted to have three or four different admin views one for technicians one for regular users and they wouldn’t have the same tap bars. Having multiple tab bars would be awesome