Vincent Ritter

← back to projects

Status for updown.io

A simple app to display monitored sites from updown.io, with current status and other stats.

Project posts JSON/RSS Feed...

Looking for testers for Status, an app for updown.io

I’m looking for some brave people to try out my other app called Status. It’s an app that you can use for updown.io. It’s in a “pre-alpha” at the moment and has still a way to go. iOS only at the moment. Interested? status@vincentritter.com.

When I say “pre-alpha” I mean exactly that. This is what works:

  • Login with both read-only and full access tokens.
  • See all your checks.
  • See any checks that are down.
  • Webhooks can be seen also.
  • You can view all the updown nodes.
  • You can register for push notifications, so the app notifies you when something goes down. More on this in a moment.
  • You can enable and disable checks.
  • Very basic check detail screen. This one is going to take some time.

Regarding push notifications: this will register a unique device token on a small API that I wrote, which in turn creates a webhook at the updown end. This is all happening in-app and no updown token or any other personal info is shared with my API. Once updown sees a site down, it will send the details to the Status API, which in turns sends out a nice push notification.

It’s been working well the past few times.

Couldn’t sleep (03:20 AM)… so I worked on push notifications for Status. And they work! KABOOM 🥳. Happy with this! That’s only test data I’m sending so ignore the dates.

Of note, I’d like to use what I learned for Gluon also.

Spent the day working on registering for push notifications for Status. Includes a small Rails based API. It’ll activate by talking to the API and on success, and checks, will return a nice UUID, which in turn also registers a webhook with updown.

Status for updown.io - Initial check details header styling, read only api keys and re-auth screens

Made some more progress with Status. Although it doesn’t seem much “customer facing”, I’ve done a lot behind the scenes especially handling logging in again if, for some reason, your API key becomes invalid.

Also started to implement the “read-only” check. If you’re using updown.io you’ll know there are two keys you can use. With that in mind, I also had to add a re-auth screen.

Before I worked on that, though, I started work on the initial header of the actual “check” details screen. So far I’m pretty happy with the results. Here’s a few early screenshots.

Quick summary in the header of your uptime. If you have an alias set, it’ll show that together with the URL underneath. You can tap on that and it will take you to the URL in question.

This one shows an error right at the top of the page, with the corresponding error message.

Of course you can pull to refresh to update the necessary check. If it comes back to life, it’ll go nice and green again (except perhaps the uptime - which depends on the percentage).

If you have a bad SSL, it’ll show that too. I still need to populate the whole screen with data… so more details will be shown soon.

Before I go, here is a screenshot of the re-auth modal that pops up if your API key becomes invalid for some reason:

I’m using the same screen, without the big error, for re-authenticating with another key - for example if you logged in with a read-only key.

The settings screen also reflects what kind of API key you have… and will also tell you if it’s invalid.

Tapping on that will bring up the re-auth screen.

Overall happy with the achievement today.

I’ve been tapping back and forth to try and figure out how to design the “check” screen… notepad is ready, with a blank canvas. Need to find inspiration. At least I got a nice status on the top right already, looks nice!

Status, an app for updown.io - progress

I spend a few days last week, and the weekend, to start my little project up again for an app that you can use with updown.io. If you haven’t heard of it, it’s a website monitoring tool which is, hands down, one of the best tools out there. It’s simple, doesn’t cost you an arm and a leg and gives you enough customisation to really monitor your websites and services with ease.

The project stalled because I just had too much client work, and when you freelance you just have to do those things! However, I’m slowly going back to my zen place of a good mix of client projects and free time just for my own stuff. Nope, this is not my “secret project”.

Saying all that I set up a completely vanilla project last Wednesday. Blank slate, start again, throw away the old. I pretty much used most things I learned from Gluon and took the best bits (the foundation) and got cracking.

The updown.io API is really great and simple, with enough good data. So it was super easy to just get started. For login purpose you’ll have to use the API key that you can find in your account. There is both a full access key and a read-only key.

Whilst Status can work with read-only keys, it will be much better with full-access. Status will lock certain sections of the app depending on which key you use.

It was actually quite fun to code so far, here is the login screen:

It’s got my standard login form that I used on Gluon. However, I actually re-wrote it all. Just kept the styles.

It’ll show you some useful messages when typing in a read-only key, or if your key is wrong. On “Login” the app will make a call to the updown API and try and fetch the checks you have on your account. If there are any problems, it will let you know straight away.

The login flow is pretty fast and your checks will be waiting for you.

Yesterday I spent some time to style the cells, they’re very much updown inspired. It’s a great interface!

It’s quite basic with the right information in front of you. I may add the option to allow you to view the graphs also, although I’ll certainly implement that on the details screen. Note that I’m hiding a few names in the screenshots.

Of note, you can see there are 4 websites that are down/throwing an error. That’s a dedicated section just for those. Your normal Checks screen will also show you any down sites:

You can see a good mix here of errors, disabled and normal sites, including errors that are relevant.

If your site is served via HTTPS, the scheme will be correctly colour coded to tell you if the SSL cert is valid or not. Again, if you’re used to updown, that works in a similar way.

The “Down” screen looks like this when there are errors:

Easy enough and quick to reach. Once you’re all up and running again the header will be green and a small message is shown to say it’s all up and running.

The app also works on Android, here is screenshot of the “Check” screen:

I'm pretty happy with the results so far and it certainly has been fun doing something a bit different. Change of scenery is nice.

I’ll be spending the rest of the week on the details view and perhaps allow you to add/edit checks also (as a stretch goal).

There is also a small API to write for it to allow push notifications for any errors. Updown provide webhooks and Adrien, the creator, kindly added an endpoint to allow you to add web hooks via the API. Nice!

Anyway, so far I’m pretty happy with the result and can’t wait to work on it a bit more this week.

I renamed Hilbert to Status, as I prefer it. Also brought across all the goodness that is in Gluon so that there are great foundations.

Status will be specifically for updown.io and will also introduce push notifications. Will have a small web app supporting the app.

I haven’t spend much time on it except just the design and basic login.

Dark looks lush. A few variations also to try different icon colors.

Working on something...