Mellonn Speak version 2.0

Photo Credit: Joakim Rosenfeldt

Joakim Rosenfeldt Pedersen

Updated January 28, 2022

The start of version 2.0

WAIT WHAT!? You haven't even created version 1.0?

Well yes and no, let me explain. Actually I'm already at version 1.0.2... 1.1.0 or 1.1, will be the release version, don't ask why, that's just how I'm doing it now. Well the 1.1 release will be a functional release, with all the functions of the app in a not so tidy package. While 2.0 will be the real release, with a totally revamped UI.

Progress!

I know, I know, with such a clickbaity title and enticing introduction. You'll want to read about the revamped UI, and not what I've been up to the last week. But you'll have to bare with me, or just jump down and read that section first, I won't stop you. Are you done reading yet? Oh well, first of all I've revamped the whole mobile UI of the app, it doesn't look any different on the outside, but oh boy on the inside! It's an absolute work of art, now with custom standard widgets and a better theme management system (which I should have done from the start). The other big thing I've done the last week, is creating the text editing tool, with a sweet custom animation that I'm quite proud of. I also did some work on the settings page, and fixed some minor bugs. Let's dive a little deeper!

Revamped mobile UI

This is probably the biggest change I've done, a short version of what I did: I copied the whole project to a new repository, deleted all the UI and rewrote it. Sounds like a lot of work... Well it was, but I'm glad I did it! Even though I'm pretty much done with the UI for mobile, this will still save me a lot of time, when I have to do the tablet UI. I also redid the project's directories, which I'm already very glad I did. Below is a before and after of what the main directories of the project looked like:

Before|200 Before ^ After|200 After ^

Much more folder structure, and better filenames. This is of course all personal preference, but when I'm doing such a big project, I have to keep some sort of structure, and this is definitely a big improvement for me. To round off this section about the revamped mobile UI, I have to say that I haven't taken a look at the login screen. But this will come soon, when I'm going to revamp the whole auth system, with normal features like "Forgot password".

New text editing tool

YES! This is so cool, it sounds so simple, but this is definitely one of the signature features of Speak. The short version: You tap a piece of text and get the option to edit it, get taken to another page where you can change it. When you've edited a piece of text, the app will compare the new text to the old, and automatically assign plausible timestamps to the words. These timestamps aren't perfect but they're definitely better than nothing. When you save it, it will of course be saved to the cloud, so you will be able to access on your other devices instantly.

Changes to the settings

With changes to the settings page, I wanted to add the ability to change the theme of the app. Out of the box, the app will adapt to what your phone's system settings are. But if you always want dark or light mode, you will be able to do this now. The implementation is a little jank as of right now, but I will take a look at this again at some point, but this isn't a priority right now. As a smaller detail, I also added a help button to the settings page. I'm not sure yet if this will be in the settings or on the profile page, but that's changed quickly. Right now the help button is just sending the user to a page on this website, which is only accessible from the app.

Minor bug fixes and other minor changes

I fixed a bug where the app would sometimes repeat the last word of a bubble as the first in the next, or the other way around. This is now fixed. I also fixed the page where you can make changes to who's talking when, because it wasn't useable on smaller devices (iPhone 8/SE sizes). This bug was quickly reintroduced, when I added the feature where you can turn off the automatic switching when listening to the clip. These features probably sounds like jibberish, but trust me they will make more sense when you get to use the app.

The revamped UI

How did I get this idea? The UI as it is right now is totally functional, but it's not well made, at all. With my experience in Flutter since I started the project, I've gotten a LOT better at using Flutter. This I want to actually use and create the UI, in a way that isn't jury-rigged. But one other thing I've had in mind for Mellonn Speak, is to make it a web app. This means that you will be able to record the interview on your phone, upload it in the app, and at last edit everything on your computer or even your tablet! Doesn't that sound absolutely amazing?!

Limitations

As you probably know, I'm building Speak with backend from AWS Amplify, this means that I'm relying on something that isn't quite done. Flutter Amplify doesn't currently support web, but this is in development currently! I'm going to every I can to make the app ready for a web release once this happens. To make the app ready, the big update in the 2.0 release, is going to be an updated interface for tablets. This interface will be much like, or identical, to what I'm going to be using on web. You will be able to get the app on tablets at release, but the interface will be the same as on your phone to start with.

Web support for amplify-flutter · Issue #234 · aws-amplify/amplify-flutter (github.com)

Above is the link to the GitHub issue with the feature request. Luckily there's beginning to be more activity in there, but unfortunately still no ETA. To get Speak to work on web, I will need Auth, DataStore and Storage to work. Looking at the GitHub issue, there is no prospect, that they will all be supported right from the get go.

How will it look?

Enough of limitations, let's look at possibilities! I'm not quite sure what it will look like yet, but I will be going for a more multitasking focused interface. This is something I would want myself, so that is definitely a priority! I am beginning to sketch some UI for tablets, but this is so early, I would much rather leave you on a cliffhanger here.

What's next?

The big question. Well in the next, I will begin working on the payment in the app. This being the most important feature of course, I believe it will take some time to implement. I'm looking at using Stripe for this, but I will also have to build in Billy, the accounting service I'm using. This is to automatically send out a receipt to user when they have paid, and to also save me a lot of time on accounting. The reason for me to build in Stripe already now, even though I'm only going to take in app payments for now, is to be ready for when web releases. I want the smoothest experience for my users, and I want the users to also have a choice to support me, when it is possible to bypass the in app payment fees. I have also begun learning a bit of python, to hopefully at some point be able to experiment with creating my own AI and machine learning algorithms. That is mostly a side project for now, but will definitely become useful at some point.

That's it for this week, there's a lot of work in front of me, but I will be enjoying my weekend with the 24 hours of Daytona first!# The start of version 2.0 WAIT WHAT!? You haven't even created version 1.0?

Well yes and no, let me explain. Actually I'm already at version 1.0.1... 1.1.0 or 1.1, will be the release version, don't ask why, that's just how I'm doing it now. Well the 1.1 release will be a functional release, with all the functions of the app in a not so tide package. While 2.0 will be the real release, with a totally revamped UI.

The revamped UI

How did I get this idea? The UI as it is right now is totally functional, but it's not well made, at all. With my experience in Flutter since I started the project, I've gotten a LOT better at using Flutter. This I want to actually use and create the UI, in a way that isn't jury-rigged.