Dartlang #3: Teamoji starts!

After the previous two posts, we are finally set to start actually building something in AngularDart! As I mentioned before, the app we are building for this series is called Teamoji, which was shown in Google I/O 2016.

In the video I linked above, the basic app is there, and the presenter adds extra functionalities to better UX and eventually Teamoji become a Progressive Web App. In this series we are only interested in building the basic app, and those extra functionalities might come as stretch goals for later.

Nevertheless, we might know what to build before building it, so in this post we want to quickly outline the things we are building, both for front end and back end, and more importantly, the strategy we will use to build the app from literally nothing. I understand my development methodology is probably flawed, and there are definitely a great many other ways to do it, so any suggestion and comments are very welcome. So without further ado, here we go!

What is Teamoji

Before I go into specs and designs, let’s at least have some idea what it is functionally speaking. Think of this app just a group chat, where you create and join groups and post messages that everyone in the same group can see. The only catch is those messages will not be text, but emoji.

Backend

The reason I started with back end is that in our case, building back end will be relatively easy to do. There are three main things to handle in the backend:

• Login

• Storage for messages

• Storage for user and group info

Fortunately there are not really any business logic to be implemented, and all we need is to get a login call, and DB schema for user info, group layout, and chat log.

So how do we go about and implement them? If it was me 6 months ago, I’d say setup a MySQL database and define schema, build a ORM layer, write some PHPs, and just call them from the front end. This could take weeks all by itself. Fortunately for this project we can speed things along a little bit, by using Firebase, a framework from Google that gives easy setup for database, and login methods for Google, Facebook, etc. Also, it has a realtime database, whose schema is in JSON and can be easily changed. This fits our use case perfectly, so we will be using that for most of our backend stuff, although honestly it is not really a backend anymore, since we won’t be writing a single line of backend code.

Frontend

This is the main focus of the project, where I plan to practice the most of AngularDart. We will need essentially 4 pages for this app:

• Startup page

• Login page

• Home page

• Emoji selection page

I have included screenshot of all these pages in the repo, which can be found at the end of this post. Right now these is only the template code generated by the framework, but over the coming weeks we are going to replace it with our own code.

If you remember the first post of the series, the first thing we know about Dart is everything is a component. So what we will do for UI is we will break down each page as many small components and build them one by one. In the end, we put them together to form each page, and then add routing to make the whole app coming into life!

What’s coming

This will be our Github repo for this series. As you can see I am developing this real time, and I have no idea what’s to come either. But I am sure this will be a valuable journey, and hope you will like it too.

This weekend we will start by building the UI for the Startup page, which is the easiest to build, but will be a great step to get your feet wet with AngularDart. I plan to post it on Sunday, so stay tuned for that!