Xamarin Hello World

Xamarin, a platform for building Android and iOS apps with .NET and C#. It is Free, it is cross platform and it is open source; so let’s get started at the very basic, a good old-fashioned Hello World.

Setup

The first thing you need to do is to set up your development environment, start by downloading Visual Studio 2019 if you don’t have it already and make sure to select Mobile development with .NET workload during installation.

If you’re already a .NET developer it is very likely that you already have installed Visual Studio, if this is your case and you haven’t included this workload over the initial installation you can add it by opening the Visual Studio Installer. Select your Visual Studio 2019 installation and select More > Modify; check the Mobile development with .NET and click Modify.

Create app

Ok, now we are ready to create our app! As simple as following the next steps.

  1. Open Visual Studio 2019.
  2. Select Create a new project.
  3. Select Mobile from the Project type drop-down.
  4. Select the Mobile App (Xamarin.Forms) template and click Next.
  5. Enter HelloXamarin (or whatever name you’d like) and click Create.
  6. Select the Blank template. Ensure Android and iOS are both selected, and click OK.

Visual Studio will prompt you to install the Android SDK if it is not already installed.

Run

Once Visual Studio finishes downloading required SDKs and restoring NuGet packages let’s run our app.

Click Run on Android Emulator. Since it is the first time, you will be prompted to create a new device; you can just click Create and go with the default settings or customize it your way.

Once VS is finished downloading device image you should be able to start your emulator, wait a few seconds for it to start and click Run again.

It’s alive! Now let’s go for that promised Hello World.

Hello World

Another cool feature about Xamarin is XAML Hot Reload, this means you can make changes to your XAML files while the application is running and the UI will update automatically.

So let’s open MainPage.xaml from the Solution Explorer and let’s replace the text Welcome to Xamarin.Forms! with our Hello World! and remove the unnecessary code.

Save the file and magic! That’s it, we have our Xamarin Hello World app running in our emulator.

Posted in Dev

Fix GET /apple-touch-icon.png 404

After successfully publishing my first Blazor app, I started getting a bunch of 404 errors on my application insights dashboard.

What are these errors? Why? What does this mean?

Well, it turns out, Apple devices make those requests assuming your apple-device-optimized website will contain these files. These files are used by the device when the users bookmark your site to their home screen. If you don’t provide these files, your site icon will be an ugly screenshot of your site.

Ok, how do I fix it?

It’s a simple fix, just upload a single 180x180px PNG image to your website root and declare it in the head of your site.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

That’s it! Say goodbye to those 404 errors.

Blazor: Getting Started

First, what is Blazor?

Blazor is a new client-side UI framework from the ASP.NET team.

Ok, but what does this mean?

C# instead of JavaScript. Blazor allows you to build modern web applications using C#, HTML, and CSS.

WebAssembly vs Server

Blazor comes in two flavors: WebAssembly and Server. With Blazor, you can either run your code directly in the browser using WebAssembly or on the server, communicating UI using SignalR.

Getting Started

When creating a new Blazor app with Visual Studio, it will ask you to set some initial configuration.

For this case, I selected WebAssembly and checked the “ASP.NET Core hosted” checkbox, this will configure the app to use an ASP.NET Core backend.

Note: Blazor also allows you to create a Progressive Web Application out of the box, but I’ll leave this for another time.

This setup will create the following solution structure:

The solution contains a client application, a server API, and a shared library; all you need to start coding… You’ll see that there are several example files, and if you go straight and run the project, you’ll find a simple weather application that will help you get familiar with the inner workings of Blazor.

Among the example files, you’ll find a shared model in the shared library, some controllers that return some mock data on the server project, and a few pages and components in the client application… Sounds familiar, right? Blazor components are building blocks for your application; a component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Karaoke App

I wanted to get some hands-on experience with Blazor, so I created a simple web application using the WebAssembly approach. It is a very straightforward application that lists and filters a song directory for a karaoke night.

The code is quite simple; client application makes a GET request to API, which reads a JSON file, deserializes it, and returns a list of songs. It is basically an alternate version of the sample application included with the template.

You can take a deeper look at the code in GitHub.

Wrap-up

Blazor is an exciting platform for web developers and a compelling alternative to the current web application frameworks. There are issues and aspects where Blazor feels not mature enough, but there is an active community of developers working to make it better and strengthen its weak points. I believe we’re going to see a lot of Blazor in the next years; we just need to wait for more developers to start creating with Blazor.