Building Breather (Intro): APIs, air pollution & global health, and design

Breather is an open-source iOS app that shows the weather, air pollution and asthma conditions around you.

Alexandros Baramilis
4 min readApr 11, 2019

To raise awareness about air pollution and practice my iOS skills at the same time, I’m building an open-source app where I apply some of the latest knowledge I gain about iOS, Swift and programming. Since there is a lot of information to digest, I’m splitting it into small manageable parts:

APIs

Some of the things I care about the most are the environment and healthcare, so I wanted to build something along those lines. At the same time I wanted to keep it simple, as it is supposed to be a demo app showcasing code, not a fully-fledged product.

I settled on using 2 APIs that satisfy the above well.

1) AirVisual API

AirVisual boasts the largest network of ground-based sensors worldwide, providing the most accurate and reliable air quality information, validated using artificial intelligence and machine learning.

I didn’t do any further due diligence about the data since it is a demo app, so I’ll take them at their word.

They also offer a generous Free Community Package with 10,000 calls/month and 5 calls/minute. It’s limited to current data only, not historical or forecast, but that’s fine for this app.

2) Air API by Propeller

The data scientists and clinical researchers at Propeller have trained a one-of-a-kind machine learning model on millions of days of anonymised data, including where and when people experience asthma symptoms, and the weather and air quality conditions at these times, to predict when people’s breathing may be impacted.

Their API is free and you don’t even need to register for a key.

Unfortunately it’s only available in the US, so we will display the asthma conditions only to users whose location is in the US.

Air pollution and global health

This series is mostly about iOS development, but I wanted to include a tiny primer about air pollution and its dangers.

func tinyPrimerOnAirPollution() {

print(“””

In most areas of the world, the main air pollutants are the products of combustion from heating, power generation and motor vehicles.

These pollutants are:

- gases that irritate the airways of the lungs (Nitrogen Dioxide, Sulphur Dioxide, Ozone),

- fine particles that can be carried deep into the lungs where they can cause inflammation (PM2.5, PM10),

- gases that prevent the uptake of oxygen by the blood, leading to a significant reduction in the supply of oxygen to the heart (Carbon Monoxide).

But there is also household air pollution, more prominent in the developing world:

- Around 3 billion people cook using open fires or stoves fuelled by kerosene, biomass and coal.

- Each year, close to 4 million people die prematurely from illness attributable to household air pollution.

- Household air pollution causes diseases including stroke, heart disease, chronic obstructive pulmonary disease (COPD) and lung cancer.

- Close to half of deaths due to pneumonia among children under 5 years of age are caused by matter inhaled from household air pollution.

If you take in the global picture:

- More than 90% of the world’s children breathe toxic air every day

- 9 out of 10 people worldwide breathe polluted air

The thing about air pollution is it doesn’t differentiate between countries. Air travels and we all live in a giant gas ball, breathing the same air.

And I’m not even mentioning global warming and climate change that these sources of pollution contribute to.

“””)

}

tinyPrimerOnAirPollution()

In case you’re wondering, yes, you can run the above code on a Playground.

Design

With that dark note behind us, let’s move on to something brighter.

After I went through all the API documentation and decided which data I’m interested in, I moved to Sketch to do a quick prototype of the interface.

The Sketch prototype for Breather

This is a simple one-page design, highlighting the most important data with a bolder and bigger font, while also displaying the secondary data in a lighter, smaller font.

There are also some neat tricks to improve visuals, like encoding the wind direction in the form of a tiny compass.

I also included a segmented control that will toggle the air quality data between the AQI (US) and the AQI (China) standards. AirVisual has some more information about what is AQI and what is the difference between China & US AQI.

The weather icons are provided by AirVisual in their documentation (there is a code in the API response that matches each icon). I just modified them a little bit to make their blue match the “Breather blue”.

The logo is “borrowed” from Omniferious on DevianArt, flipped and painted white. Omni, if you ever read this, thank you!

Keep reading → Part 1: Building a responsive UI for any screen in Storyboard.

--

--