If you’re a new dev (like me) and working with APIs for the first time, here are some tips and API basics. There’s also a little bit of project-planning advice, to help squash the overwhelm you might feel when you make the leap from tutorial projects to personal ones.

This post is about my experiences building a weather app. I hope it’ll be useful to you if you’re working on a simple API-based project and want to see how someone else went about it!

But first...

What is an API and what can you do with one?

It’s always exciting to hit a new milestone when you’re learning web development and working with an API for the first time is an important one. It lets you add functionality to an application you’ve written, by accessing data and functionality from someone else’s application.

Basically, you get to do cool stuff with maps, image databases, real-time information from airlines and hotels, weather data, videos, music, articles, and any other information that’s been organised in databases for your use. You can also do things like accessing a mobile user’s camera and location (with their permission!) and using it in your app, through an API.

Developers often compare an API to a waiter, who presents you with a menu and then takes your order to the kitchen before returning with your food. The menu lets you know what data is available and in which format, giving you the correct language to request what you need.

If you want to read more about APIs and how they work, I recommend this article from How-To Geek.

My experiences creating a simple weather app

I’d been teaching myself web development in my spare time for about five months when I decided to take a break from tutorials and build something of my own.

I was excited! There’s nothing like picking your first project and making choices on its purpose, scope, and design to get you fired up about programming.

It can also feel overwhelming. You suddenly have all those choices to make and no prior experience to draw from.

If you’re currently feeling this way about a project, I’d recommend taking your time at the planning stage. (Or even better – do some reading on best practices for planning a programming project.)

Photo by Kelly Sikkema on Unsplash

My project planning process

I started by answering these six questions:

1. What do I want to make? (Try to summarise it in one sentence, elevator-pitch style)
2. Who is my app for? (Target audience)
3. What purpose will it achieve/problem will it solve?
4. What key features will it have?
5. What will it NOT do? (Setting limits at the start helps to define your project’s scope and prevent wasted time)
6. What’s the simplest version of the project that could be considered usable? (Often known as MVP or “minimum viable product”)

I knew I wanted to work with an API and after some research into useful beginner projects, I decided on a weather app.

Here are my answers to the questions above:

1. What do I want to make?

My one-sentence summary ended up being: “this.sky is an elegantly simple, international weather app built with HTML, CSS and vanilla JavaScript.”

2. Who is my app for?

For people who want an uncluttered, attractive app to view current weather information in any location around the world.

3. What purpose will it achieve/problem will it solve?

The main purpose of my app is to teach me the fundamentals of working with an API and let me practise using CSS and JavaScript.

As an app, I hope it will be useful for people like me who enjoy finding out what the weather’s doing in other parts of the world. I have friends in Europe, Canada and America and it can be fun to see what the weather’s like where they are.

(If I were developing this app with the primary goal of monetising it, I’d do a lot more market research and be more specific in answering this question!)

4. What key features will it have?

• Responsive UI
• Accept a search term from a user (where that term is a city name)
• Display the current weather in that city (summary, temperature, wind speed)
• Give the local time in the searched location
• Allow user to switch between temperature units
• Display a dynamically changing image background (desktop version only)
• Possible features: Provide a forecast as well as current weather info. Provide weather warnings, pollen counts, UV index or other weather-related info.

5. What will it NOT do?

• Provide a map for users to view and interact with
• Have a complex or cluttered interface

6. What is the simplest version of the project which could be considered usable?

The first three key features above: accept a search term (city name) and display that city’s current weather to the user, plus a responsive UI.

Getting support from other devs

Answering the questions above is a great way to fight the overwhelm you might feel at the start of a new project. It’s important to have a clear idea of what you want to build, before you dive into any of the technical aspects.

Once you do get to the technical stages, there’s a lot of help available online in free tutorials, blog posts, and forums like Stack Overflow. But if you’re able to find a more experienced dev to answer questions, look at your code or even give you some tutoring, you might save yourself a lot of frustration.

I was fortunate that Dan Hampton reached out to me on Twitter after we’d been chatting on there a while. He asked if I’d be interested in a tutoring session on a tech topic of my choice. I absolutely was! (As you might have guessed, I chose APIs.)

My advice to anyone looking for a mentor or support with learning is to remember that it takes time and effort to work with a new developer, explaining concepts, reviewing code and answering questions. If you’re looking for someone to help you this way, think about what skills you can offer in exchange. Alternatively, you might find that someone wants to practice teaching programming, to gain experience as a professional tutor.

Another way to get direct feedback on your code is to ask questions about your project (and any issues you’ve run into) on Twitter or Stack Overflow. You could also seek out another new dev who’s at a similar stage of learning to you, and work on a project together. It’s really never too early to start learning how to communicate your ideas and technical issues to other developers.

Side-note: I’ve since started working with Dan at his development company, Rugged Software. Working on a side-project with someone can be an amazing way to connect and test out what it’s like to work together!

Building the core features of my weather app

Soon after I’d come up with the initial concept of my app, I had a video call with Dan. We started by talking about APIs, filling in the gaps in what I knew about JavaScript fetch() and promises. He explained APIs in his own words and let me ask questions, which was really helpful – often, concepts learned in tutorials are a bit fuzzy until you put them into practice or get to ask direct questions about them.

Then we worked together on pulling some data from a US weather API and displaying it in a simple UI. In a Udemy tutorial, I’d previously worked a little with an API to access images for a contacts list React app. This meant the concepts weren’t completely new to me, but working with Dan deepened my knowledge and gave me a lot more confidence in how to translate this to a vanilla JS environment.

After our tutorial, I did some research into weather APIs. I chose an international one, to match the key features needed for my app concept. Using some of the core logic I’d worked on with Dan, I started coding.

When it came to adding functionality that we hadn’t covered in our video call, I got stuck a few times – especially after I added a call to a geolocation API and then needed to pass the data from this into a call to a weather API. Once I’d had another chat with Dan, I realised that this was just a gap in my JS knowledge; I needed to practice passing data from one function to another. Being able to see Dan’s working code meant I could learn from it and use the same syntax and logic in my own.

As the project started to look more and more like a “real” app, my confidence grew and I realised how much fun I was having with it! Tutorial projects can be great learning tools, but I found it a lot more interesting and satisfying to make something of my own.

Here’s how it looks at the moment (still a WIP):

New features and feature upgrades

The most recent update I’ve made to this.sky is to display the local time for the search location, as this was something I often wanted to know when I was testing the app and entering different international locations. (This turned out to be trickier than I expected and I have another blog post planned soon on how I did it!)

As well as adding the rest of the planned features (like letting the user convert the temperature units), I wanted to improve existing features.

I found that each feature has different levels of functionality. For instance, the search function currently takes the first suggestion from the geocoding API and passes it into the weather API. This works just fine, but I want to allow the user to choose from a list of suggested locations based on their search term (since they might want the data for London, Ontario rather than London, UK).

At this point, I thought I’d check in with Dan and see whether I was thinking along the right lines. I sent him a message outlining the task.

Breaking a programming task down

Task: Allow user to choose their location from a list of suggestions, dynamically created from their typed input.

What I have:

• An array of the top 5 suggestions from the geocoding API (and I can change the array to include more/less suggestions)
• The user input

What I need:

• To display as a list the name, state and country of each object in the locations array
• For the list to be selectable by the user
• For the getLocation function to return the latitude and longitude of the location selected by the user

How this should work:

• User types a location and presses submit
• Generate a drop-down menu with location suggestions taken from the array fetched from geolocation API
• User clicks on one of these and their choice is stored in a variable
• Use their location choice in the getLocation function
• Note: display an error message to the user if their entry doesn’t return an array.

I find it useful to write things out this way – by explaining a problem clearly to someone else, it usually ends up making more sense to me, too.

Dan sent me this helpful reply:

What you are talking about with the autocomplete field is sometimes referred to as a combobox. Sometimes these more complicated user inputs are tricky to do, especially in regard to accessibility. (screen readers, keyboard inputs, etc). In production I would probably use a well tested library for such a component, but I've made modals/dialogs myself to better understand how they work.

I hadn’t come across the term 'combobox' before, so this helped a LOT with my Googling and gave me a heads-up on issues to watch out for.

The more I’ve worked on new features, the more I’ve realised that they usually need breaking down into smaller steps like the ones above. If you get stuck on a task within a project, it’s worth checking to see whether it’s actually several tasks that need to be tackled one at a time.

Summary

I hope this has been helpful to you, if you’re currently building a weather app or another API-based project!

This was a long’un, so here are the four key takeaways:

• Take time to plan your project carefully. It’s always worth doing this, as it lets you build intentionally (which helps fight overwhelm or blank-page anxiety at the start).
• Seek out support from other devs. You’ll get feedback and encouragement, as well as nudges in the right direction from more experienced devs.
• Break tasks down. Find the smallest bit of a task and start there.
• Have fun with it! I think the inevitable frustration is part of the fun, in a weird way… it’s what feeds those dopamine bubbles of joy, when a feature finally works as planned!

This is my first programming-related blog post, so I'd love to hear your thoughts and feedback! Thanks for reading 😊