Homie - 2

Aug. 8, 2021

Introduction

This is the second part of my blog series on Homie, an application I am building. For the first part, go to part one !

In this post, I intend to give you a glimpse of the progress I was able to make on the application, style-wise, but also feature-wise.

Alike the first part, I will go through the different parts of the application, and display them one by one while explaining what upgrades were made to them.

Home screen

First of all, as you may recall, the Home screen was not that stylish and had only one button, which said “Start now”.

This made for a rather basic screen which did its work, but had to be upgraded !

For this, I eventually added two buttons, one which leads you to the notifications page, which I will talk more about later on, as well as a reset application button, which cleans the application’s history and sets you up with a clean canvas ! All your old notifications, gone. Everything is reset !

On the other hand, the style of the page changed, for you can now see a navigation bar on top to ease the switching between the different components of the app, and give it a greater feel ! Also, the page is now centered so it feels symmetrical and well put together.

So, without further due, here is your new home screen ! home screen

The appliances screen

No big modifications were made on this component, except for the centering of visual elements, similar to what has been done for the Home Screen, but also the addition of new appliances as promised: you now have a dish-washing machine and a fridge.

The machines have different running times (You can test that by clicking on done for each one and comparing) and different things to do once the time is done, as you will see on the new notifications panel, which I will talk about in a minute.

You may realize the timers vanished from the page, but don’t worry, they are coming back in future versions !

The new appliances screen ! appliances screen

The appliance page

The appliance page has not changed, but later updates are coming, as you will read in the future work section of this post !

For now, it looks like this: appliance page

Last but not least, the new notifications page !!!

This component is absolutely new and enables a new feature in the application, which is to receive notifications once a task is done !

I am very excited about it, as it makes it possible to work with the application without having to look at the times or the status of the machine on the appliances screen, thus, getting us closer to a fully working digital nagging mother, that follows you everywhere !

The notifications are sent sequentially, in the order they were emitted, and they each denote a task to do, as well as the time they were emitted at !

For now, they are only sent on the notifications page, but later versions may send the notification to your phone or your email. Mom is coming after you !!

Sneak peek notifications panel

Functional upgrade

This part discusses not a visual upgrade, nor a component addition, bu rather a functionality upgrade.

In the first version of the application, its state was not saved upon quitting, which caused the timers of the tasks, the machines' running status as well as the notifications, to be reset when the user comes back, successfully losing all his past usage of the application and progress.

In this version, I made use of the local storage to save the state of each component upon quitting, which would be loaded again when the users comes back. Typically, if you have notifications upon quitting, you will still have them upon coming back, but you may also have new ones if you’ve left a machine running, and the task was done running while you were away.

This is a very important upgrade, since the application is not usable if it resets each time the user quits.

Finally, this explains the presence of the reset button on the Home screen, which is thus used to erase the local storage and reset the state of the application. Notifications are erased, and all the machines are stopped and reset !

For example :

Before reset: notifications panel

After reset: notifications panel

Future work and progress

In the upcoming weeks, some upgrades will be coming:

These upgrades may not come at once, but sequentially. Stay tuned for future posts !!

Link to the git repository

Click on this link !

Test the application

To test, you can click here