Welcome to Partly Cloudy!

We are happy to announce a new series on the Xamarin YouTube Channel called “Partly Cloudy“!

What is Partly Cloudy?

In each season of Partly Cloudy, you will learn how to build an app from scratch and take it all the way through deployment to the App Stores. With a name like Partly Cloudy – we’ll explore topics like Azure, DevOps, along with Xamarin development … you know … Partly Cloudy!

In the first season, we’ll build up a clone of the Microsoft News app!

The Shows

Each week we’ll cover a different aspect of mobile cloud development that’s needed to build up our application.

One week we will build an Azure Function backend. Next we’ll be diving into Xamarin.Forms Shell. Then be off and running with App Center Auth or even doing some DevOps.

The aim is to keep each episode of Partly Cloudy to 15 minutes or less.

The shows themselves serve as a gateway for the topic of the week. Just enough to get you started in the right direction and show you some landmarks along the way.

Due to the short nature of the episodes, we won’t be able to go deep into every single topic that each episode covers … that’s what these blogs, articles, and readmes are for.

If there is anything in the episode that needs more explanation, it will be covered in an article like this. This way you will have a step-by-step guide to get your app up and running. Additionally, all the code from each episode will be available right in GitHub!

As always, if you have any questions or would like to expand on a topic from an episode, please reach out through Twitter at @codemillmatt – DMs are always open!

Episode 1: Hello News

Episode 1 is all about getting things up and running. File->New for a Xamarin app.

We move fast! Before the episode is over, our (soon-to-be) Microsoft News clone, will be invoking an Azure Function that will run locally!

That is where we might need to expand a bit more. So jump on over to GitHub to download the code. Grab yourself some FREE Azure while you’re at it, and settle in for some fun!

The first thing to discuss is installing the Azure Functions Core Tools locally. Then how to modify your iOS and Android applications to invoke the Function, without it being served over HTTPS.

Azure Functions Core Tools

First off, the official documentation on installing the Functions Core Tools lives here.

Fwiw … You want to run the **2.x** version of the tools.

Got everything downloaded & installed? Good!

If you followed along with the video and used VS Code (or Visual Studio) to create the Function App from scratch, you will be good to go.

However, if you are cloning the repo and starting from there, you’ll need to add a local.settings.json file.

Create a file by that name, and add this to it:

{ "IsEncrypted": false, "Values": { "FUNCTIONS_WORKER_RUNTIME": "dotnet", "AzureWebJobsStorage": "" }, "ConnectionStrings": {} }

You should now be able to run and debug your Azure Function!

iOS HTTP Local HTTP Debugging

By default, iOS does not let you call out to any web service that is not served over HTTPS.

Also by default, our Azure Function is not served over HTTPS.

Not to worry! There is a relatively easy workaround for this that doesn’t involve creating or trusting any certificates:

Open up the iOS’s Info.plist file in a text editor.
Add the following within the top-level element:

NSAppTransportSecurity NSAllowsLocalNetworking

That’s going to allow iOS to load up any content found locally regardless of its SSL state.

Android Local HTTP Debugging

Android suffers from the same fate that iOS does. No loading of non-secure content (But it’s actually a good thing!)

However, Android is a little more difficult than iOS. Android 9 (API 28) and later requires SSL. It also just so happens that is what we’re targeting with this project.

Our good friend, James Montemagno, wrote a great post on how to allow local network traffic on an Android emulator.

Read the post for the full details. Essentially you have to add a special XML file, then specify to allow traffic on IP address 10.0.2.2 to go through in clear text.

Why 10.0.2.2? Because that is the address that the Android emulator sees its own local traffic come through as.

BUT THAT’S NOT ALL! We also have to change the URL of the function from http://localhost:7071 to http://10.0.2.2:7071 … because that’s what the Android emulator is using for its local loopback.

To do that, use some Xamarin.Essentials goodness!