The Goodness App - Android


#1

Hi guys,
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

  1. the app concept is very simple
  2. we wanted to have a very clean and simple design,
  3. 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.

tldr

App funcionalities include:

  • Dynamic list
  • Push notificatons
  • Firebase Analytics
  • Audio playback (start, stop, pause, replay)
  • Timer
  • Google autocomplete places search
  • Custom pop-up dialogs

Download
image

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

  1. help filter out the internet’s noise,
  2. foster positive culture & personal growth, and
  3. 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.

WELCOME PAGE
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.

SIGN UP
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.

SELECT CITY
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.

MAIN SCREEN
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.

  1. 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.

  2. 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.

  3. 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.

  4. Navigating entries
    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.

  5. Seetings
    There is a settings page that allow you to change email and password as well as logout


    Clicking the TERMS & PRIVACYopens the the terms and privacy page
    from our website inside a webview in the app.

  6. Logout
    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.

Download
image

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.


#gettinggood


#2

Thanks so much for sharing this with so much detail! The app looks great, have shared it with the rest of the Dropsource team and am off to download it myself… :tada: :balloon: :fireworks:


#3

This is awesome!

@seanhoots can we feature this story on our blog?


#4

Great. Thanks @sue and your team for all the help in making this a reality.
We’re hoping you guys will add more features to dropsource so we can realize our full app concept.
What we currently have is just about 1/4 of what we want to do.


#5

Thanks @Will.
Yes i’ve asked Doc Waller (@honortheday ) the owner of the app and he’s happy for your guys to feature it.
We’re still in beta and currently working on some new content and features for the app.


#6

Goodness.

I have tested the app. As you say its very simple but addressing a very important issues in society where you see bad news everywhere you turn.

Well done and congratulations.

I have also written some reviews on play store.


#7

@seanhoots It’s always a pleasure, and you definitely give more help than you receive around here…! :grin:

To touch on a couple of the pieces of missing functionality - form validation and calculations - we absolutely know these are going to be essential to a lot of apps and do hope to provide them soon. Some initial explorations into how calculations could manifest in Dropsource are currently underway.

On a related note, I’ve been looking into different ways we could better manage feature requests for Dropsource. At the moment the way we do it is a bit ad-hoc, so it would be great to have some sort of system that would help us to gauge the popularity of requested features as well as keeping community members informed of progress on them.

As you know we are also hoping to open up our plugin system so that people are able to contribute their own additions to the available functionality, make their plugins available to other users via open source projects, or even monetize their efforts through some sort of marketplace system. Of course there will always be key pieces of functionality that we will strive to provide by default within the platform.

It really is amazing to see how you explore and expand the possibilities even within the existing implementation, so it’s exciting for me to anticipate how community members like yourself will create even more possibilities when we open up those engagement channels with Dropsource. :clap:

@honortheday I love the app btw, the first piece of content I was shown I immediately wanted to read (introverts vs extroverts not being helpful) and can see straight away how you’re putting more constructive, positive content in front of people - sometimes I look at social media and think, why am I doing this to myself lol, so I can see the benefit for sure. I also find really interesting the idea that you’re curating content with that explicit purpose in mind, of course the social media platforms etc also curate content, but to serve an agenda that is at best mysterious and at worst just plain destructive, so it’s really fascinating to me to see a project that kind of turns that idea on its head essentially inserting direct human intervention where an algorithm might be otherwise - I guess we’re still figuring out what tasks computers are best at as opposed to people! :slight_smile:


#8

All! Just wanted to take a moment to say thanks for your feedback and the presence/utility Dropsource has in getting the Goodness app of the ground for Doc & Company. @seanhoots has been an absolute GODSEND in this process (seriously, I think he might be some sort of angel), and has definitely delivered on bringing beautiful and effective beta version of our idea to life. We’re exchanging thoughts and ideas on next steps, value, and effectiveness of the app nearly every day, and are excited to see it how the future iterations of the app take shape.

@TimNjeru - Thanks for the review! Very valid points. We will definitely add them to our discussion.

@Will Yep, as @seanhoots said, feel free to feature!

@sue - Thank you SO MUCH for those words. It’s great to know people get the purpose at its core. Could we share your words publicly?


#9

Sure if you think it would be useful!