For some few months now @honortheday and myself have been creating an app using Dropsource and Bubble.
We finally just launched a beta version to the google play store.
The app is basically a one screen app.
This is because
- the app concept is very simple
- we wanted to have a very clean and simple design,
- we really wanted push out a truly MVP (minimal viable product) in every sense of the word.
So on first glance the app will look too simple and maybe even trivial.
But making things look simple is very difficult as E. F. Schumacher beautifully puts it:
Any intelligent fool can make things bigger and more complex …
It takes a touch of genius - and a lot of courage to move in the opposite direction.
App funcionalities include:
- Dynamic list
- Push notificatons
- Firebase Analytics
- Audio playback (start, stop, pause, replay)
- Google autocomplete places search
- Custom pop-up dialogs
Background - App concept
The Goodness App is a product of Doc & Company founded by Doc Waller ( @honortheday ).
Doc & Company is a multimedia culture company exploring the ideas and habits of getting good at being human.
Think of the Goodness app as your own personal filter for the internet.
A filter run by humans - not algorithms.
Each week, we’ll deliver 2-5 collections of content from around the web - straight to your mobile. These collections are curated, in house, by the Doc & Company team, and fall under a set of original principles (see our website) we’ve established that
- help filter out the internet’s noise,
- foster positive culture & personal growth, and
- compliment each of our individual efforts towards getting good at being human.
Read more here on the purpose and concept of the app.
The App Design
The app front end is built in Dropsource (about 98% of it, will talk about the 2% later).
The backend (database and some application logic) is built in Bubble.
Google Firebase powers the push notification and analytics.
Below are the main app pages and some design choices, tips and tricks and challenges.
This page have links to login or signup. You can also click on the play button to listen to a welcome message.
We’re able to dynamically change the welcome image and audio through our bubble admin backend without requiring an app update.
The signup page is as you would expect. The interesting thing i wanted to point out here is the form validation.
I wish dropsource had a native support to validate forms as this wasn’t simple to do.
The way i implemented this was to define boolean variables that shows if an input’s value is valid or not using if…else actions. Then i have a boolean variable representing the state of the form, valid or not.
It is valid if all the individual input boolean variables are true, and false if even one of them is false.
The api call to sign the user up is made only if the form is valid.
The signup requires entering your city.
This is important for us as a company because down the lane we will be holding events in some cities so we wanted to know which cities most of our users are from.
We make this easy for the user by letting them start typing their city providing city suggestions using google auto-complete places search.
Do you all remember my faking autocomplete dropdown tip and trick? This is a real application right here.
So if the user clicks on
SELECT YOUR CITY on the signup page they get the pop-up below.
Note that this is not a new page. It is just a fake dialog. Fake in the sense that dropsource currently doesn’t support custom dialogs where you can create a view in a pop-up dialog.
So the trick here is to use a view which is initially hidden and when the user clicks on the dropdown arrow on the signup page, this view is made visible. On selecting a city, the view is hidden again.
It’s really challenging and time consuming to implement this because you have to be showing and hiding views as well as managing them in the editor. If a view is behind another view you cannot select it. So you will have to be moving views back and forth when you’re working on them in the dropsource editor.
NB: We could have automoatically detected the users current location and determine their city from it. We didn’t do it this way because we wanted to avoid the user from having to enable location services for the app just for this simple thing. Again remember simplicity was the main theme for this app.
As i mentioned earlier this app is basically a one screen app for now.
Everything is done on the same page without any page switching.
As mentioned in the background to this app, every week we will push a number of content to the app grouped into what we call deliveries. Each delivery will have about 2-3 entries. Each entry will have an image of the content curator, a short audio intro to the content and a clickable title that will open the link in your browser.
Here is a quick legend to the different elements on this page
Here are some basic things you can do on this page.
Like an entry.
You can click on the heart button to like an entry, this will cause the heart to change from an empty heart to a filled heart. I achieved this simple event with two images. You can undo a like by clicking on it again.
Note that clicking on the heart icon is not simply changing the icon, we need to make an api call to our backend to add this entry to the liked entries of this user. And we need to ensure the operation was successful before we make the change in the UI. So a number of things happen here, when the heart is clicked, i temporary disable the icon so the user can’t click on it again, then make the api call. When the api call returns successfully, i change the icon and enable the icon again.
Playing entry audio.
Clicking on the big play icon, will start playing an audio. The audio link is stored in the bubble backend so its dynamic and each entry has a its own audio.
I created an almost complete audio player in dropsource that comes with a play, pause, restart and close functions.
When the play button is clicked the icon changes to the pause button and a new view for the play is displayed.
When the audio player comes up the navigation at the bottom right corner is hidden. See previous image.
As the audio plays a slider moves. The current play time is also shown.
Unfortunately this is where i couldn’t implement everything in dropsource. Because dropsource currently doesn’t support calculations i couldn’t convert the audio current time which is in miliseconds to minutes and seconds. And because we need to update this time every second its not possible to make an api call to do this calculation. So i had to do this simple calculation in code (one of the reasons i said this app is 98% built in dropsource).
The other small bit is the font for the entry title, its a custom font we’re using, which again is currently not supported in dropsource.
Selecting a post/delivery.
You can select a post by clicking on the down arrow beside the date (you can also click on the date).
This is bring up screen overlay as shown below. One interesting here is that there is an illusion as if the overlay pop ups from below the screen. You need to use the app to see what i mean.
Clicking on a date will make an api call to retrieve a new delivery/post and automatically display the first entry in that delivery.
With a delivery you can navigate between entries using the left and right arrow buttons at the bottom right corner.
This functionality was the most challenging of all the app development.
We wanted the user to navigate between entries without leaving this page.
How we implemented this would be a whole post for another time.
But basically entries are connected to each other in a doubly-linked list. That is each entry has a reference to a previous and next entry. So when an entry is retrieved, we already have a reference that we can use to fetch the next entry depending on whether the user clicks next or previous. If there is no previous/next entry to the current entry we hide and also disable the arrow button.
The reason we went with doubly-linked list implementation was because we couldn’t do calculations in dropsource so even if we had saved the entry position as numbers we can’t add or subtract to know the position of the next/prev entry to retrieved.
So we thought it was wise to move the complexity to our backend database.
There is a settings page that allow you to change email and password as well as logout
TERMS & PRIVACYopens the the terms and privacy page
from our website inside a webview in the app.
Finally if for whatever reason you want to logout from the app, you can do so.
When the logout button is clicked on the settings page we show a custom made dialog to confirm.
Again here we used a view. In this case the view actually covers the whole screen but with semi transparent background giving the illusion of an overlay.
So that’s it. This ended up being a long post but the idea was to show how you could pull off some features which are not natively available in dropsource.
Please head over to the google play store and try the app and let us know whatever issues you find.
Most importantly this is an app you would want to have because we will be curating content from the internet that will help you in getting good at being being human.
Also don’t forget to checkout our beautifully created doc & company website and the amazing content of real people sharing their real stories on their journey in getting good at being human.