I’m going to guide you today on how to create “Simple Weather App in Xamarin Forms with MVVM using Weather API.”

Overview:This simple cross platform mobile weather app gets the weather data from weather api that we’ll going to use in order to show the weather details after typing the name of the city. In fetching the weather data, your app needs to be connected over the internet connection.

If you haven’t heard about Web API, this link might help you to explain how it works:

Steps in Creating Basic ASP.NET Web Service API

Another thing is, we’ll going to use MVVM architectural pattern in Xamarin forms. If you haven’t heard about MVVM (Model-View-View-Model) yet, this link might help you understand the basics of this architectural pattern.

Basic Understanding How Data Binding and MVVM works in Xamarin Forms

When you are ready to start, you can now proceed in reading the steps below.

Weather APIs

If you’re already familiar on how web api works, you’re wondering now what weather api we will going to use for this tutorial. To give you some ideas,

Here are the top 8 common weather apis for developing apps:

You can use some of weather apis for free but if you want to get the latest weather update, example, after 10 minutes, you need to pay for it.

For the purpose of this demo, we’ll going to use OpenWeatherMap free subscription. Here’s the pricing plan link.

Creating Your Personal Weather Api using OpenWeatherMap

1.0 Generating Your Weather API Key

1.1 Visit this link: https://openweathermap.org/

1.2 Create your account here: OpenWeatherMap Sign Up Page(if you haven’t created yet)

1.3 After creating your account, Go to your Account Details and look for “API Keys”

By default, you already have api key created.

2.0 Accessing Your Own Weather API with Your API Key

You can visit this link to choose what type of weather forecast you want to fetch. Each forecast has its own api doc. For this demo, we’ll going to use the “Current weather data.”

2.1 Go to this link https://openweathermap.org/current and you’ll find examples on how to access your weather api.

For this demo, it’s important you understand this screenshot because our app will fetch the current weather by city name.

2.2 Combining api link for city name and your api key.

In associating your api key, it’s important you understand this simple example:

1
2
3
4
5

// link     :   http://api.openweathermap.org/data/2.5/weather?q=
// cityname :   Manila
// appid    :   653b1f0bf8a08686ac505ef6f05b94c2

http://api.openweathermap.org/data/2.5/weather?q=Manila&APPID=653b1f0bf8a08686ac505ef6f05b94c2

Here is the working link.

It returns a json weather details

Note: If you want to view your web api in a nice and easy way, use some tools like Advanced REST Client by Google Web Store

Using the created link with api key

For more weather data from OpenWeatherMap, go to this link.

Getting Started in Creating Weather App Connected in a Weather API

3.0 Creating Your Cross Platform App Project (Skip this if necessary)

3.1 Open your Visual Studio and go to File -> New -> Project… (Ctrl+Shift+N). Choose Installed -> Templates -> Visual C# and then choose the “Cross-Platform” -> “Cross Platform App (Xamarin). Put name to your project. In our sample app, I named it “SimpleCrossWeatherApp”

3.2 When the white dialog box appears, Choose “Blank App” -> Xamarin.Forms for UI Technology and Portable Class Library PCL for Code Sharing Strategy

Click “Ok” and wait to finish the creation.

4.0 Setting Up the Development Project Environment

We’ll focusing on the Portable project.

4.1 Establish MVVM (Model-View-View-Model) architectural pattern by creating these following folders inside the Portable project.

  • Models
  • Views
  • ViewModels
  • ServicesHandler
  • WeatherRestClient

In order to create these folders, right click the PCL Project -> Add -> New Folder

And also, drag or move the MainPage.xaml inside your “Views” folder

4.2 Right click the main “Solution Project” and choose “Manage Nuget Packages for Solution”

4.3 Install these following packages in every project of the solution (in Portable, Android, iOS and UWP)

On the next page, we’ll start creating class file in each folder and put codes step-by-step.

Simple Weather App in Xamarin Forms with MVVM using Weather API Part 2

If you have some questions or comments regarding the Part 1 page, please drop it below. :)