The Journey of Developing a Mobile App with Flutter and Firebase

The Idea for KidKoin

In 2020, stuck in lockdown, there wasn’t too much to do. Every day, after finishing off my school work, I’d play around with Python on my laptop. I understood some basics of programming already and I wanted to put my skills to use.

That was when the idea of building a mobile app flew into my mind.

The only issue was that I needed an idea. I also knew that the idea had to be simple enough that it could be completed within this century.

It didn’t take long for me to realise that our family needed some way of managing our reward system at home. It was quite simple: whenever my sister or I completed a chore we were rewarded with a card from a deck. The cards were essentially tokens that we could use to watch movies or even buy things (as long as our parents approved). I thought that I could automate this process and it could be done with only a few clicks. I decided to call this project KidKoin.

Discovering Flutter and Firebase

Scrolling through YouTube I came across Flutter — Google’s mobile UI toolkit. A toolkit provides us with elements that we can use. In this case, Flutter includes a library of widgets that could be used to build a mobile UI (User Interface) for an app. Flutter also allows us to build for both Android and iOS devices from a single codebase meaning that we only write the code once but can publish it to both Android and iOS devices.

I decided I was going to create a mobile app with Flutter. Flutter was built on a programming language called Dart so I was learning a new programming language too which is always exciting. I looked up Flutter on the internet and found a YouTube playlist provided by The Net Ninja. Here is the link if anyone is interested. Honestly, this guy explained everything really well — it was an excellent learning resource.

I did some more research on building an app and found out that I was also going to need to be able to store data — that could be done locally (on the device) or in a database that existed in the cloud.

I eventually found out about something called Firebase which provided services such as a database called Cloud Firestore, authentication, cloud functions, and analytics for mobile and web applications. Cloud Firestore is a NoSQL database meaning that instead of using SQL tables to store data, we can use the JSON format. Cloud Firestore (and the rest of firebase) operates with Google Cloud.

As luck would have it, The Net Ninja also had a video series on building an app with Flutter and Firebase, here it is if you’re interested. I followed along with the tutorials learning more and more about Flutter and Firebase along the way. I downloaded Flutter and set up the development environment on my computer.

It was full speed ahead.

Developing the App

The User Interface

I was unsure where to start. My dad suggested that I should design the layout and UI of the app on paper first. I thought that was a great idea, my younger sister also volunteered to help with the designing phase.

After we planned out how the app was going to look, it was a lot easier to bring it to life with the power of code.

With Flutter, everything is a widget, and you can have other widgets nested inside widgets. This was one of my favourite features of the framework as it provided simplicity. I will discuss how Flutter works in another post as I’m merely focusing on the journey in this one.

There were only static pages in the app once I had written the code, so they didn’t connect to a database — they were just fixed pages that didn’t do much. I thought I would look at the back-end (meaning the database, among other things, that contribute to the actual operation of an application) of the app later. For now, I was only focusing on the front-end and creating the UI.

Authentication, Databases and Security

Once all the work of creating the UI and design of the app was done, I started looking at the authentication and database for the app.

I watched a few tutorials on how authentication worked with Firebase. I was only focusing on building for Android devices as there were some complications with building an iOS app using a Windows laptop (more on this later). So unfortunately I couldn’t add the Sign in with Apple feature and had to settle with just adding the Sign in with Google option right then.

Designing the database was quite straightforward. I found Cloud Firestore (Firebase’s data storage functionality) quite intuitive to use. It involves designing a structure of collections of documents where documents are data in JSON format.

However, ensuring the security of the data was slightly trickier. Security is arguably the most important aspect of almost any software. Firebase allows us to create Security Rules for a database. With these, we can create conditions such as only letting these values be read or modified if this condition is met. The condition can involve checking that the user is signed in or we can make up our own conditions. For instance, in KidKoin’s case, one of the things that were ensured was that the unique Family-ID of the user matched with the ID of the family. This meant that a member of some different family cannot read or write another family’s data.

After this, KidKoin was almost ready to be published.

Publishing

Publishing to Android

Publishing to Android devices was relatively simple. I had to ask my dad to create a developer account for me as anyone under the age of 18 was not allowed one (something I would like to change in the future). After that, I needed to create an app bundle and upload it to the Google Play Console. Then, I just had to wait for KidKoin to be accepted.

I was so thrilled when I found out that my app was now live on the play store. I downloaded it from my dad’s phone and tried it out.

There was a bug.

I can still remember how infuriated I was when I found out that the log-in wasn’t working. I had immediately taken out my laptop and got to work. From memory, it had been something to do with the Sign in with Google function. The app was working perfectly when it was running on an emulator, but it didn’t work on an actual mobile.

I didn’t sleep until I fixed it that night — I sent the request again and waited for another few days until the app was updated — and it worked!

Publishing to iOS

Publishing to the app store for iOS devices was slightly more difficult. For that, I needed an Apple software called Xcode which was not available on Windows. I did some research on this and found out about a service called MacinCloud. MacinCloud offered remote access to a MacBook — this was perfect! There were a few trade-offs including a lot of lagging and sometimes not having the privileges on the device that I needed for certain tasks, but in the end — I did it.

After publishing to iOS using MacinCloud, I discovered Codemagic. Codemagic was what’s called a CI/CD (Continuous Integration and Continuous Deployment). Essentially, it allowed me to build/compile the app for iOS without using Xcode. I used Codemagic for some of my next releases — it worked perfectly well.

Conclusion

So, to sum up, building an app was a wonderful experience during the lockdown. I’ve learned so much from this experience of building an app. What’s more, the project I picked up during lockdown gave me something to look forward to every day. Also, now my sister and I actually earn for helping with chores (I think my sister owes me big time). My app also got featured in an episode by BTN (Behind the News): Covid Creativity.

Overall, building KidKoin was an enjoyable experience full of valuable lessons.

Originally published at siddak.code.blog on September 20, 2021.