Monday, October 24, 2016

Whenever you create an Azure website you are given a default domain azurewebsites.net to work with. If, for example, your website is named supersite then the fully qualified address for your site would be http://supersite.azurewebsites.net.

Suppose you wish to link your own custom domain to your azure website. As an example, let us assume that we wish to use a custom name like http://code.zift.ca instead of the default name of http://supersite.azurewebsites.net. This tutorial takes you through some very simple and short steps to achieve this.

2) Click on your web application in Azure. In the example below, my azure website is named CodeFirstStuff2.

3) In the second blade, find and click on “Custom domains”.

If, in the third blade, you see a message “Click here to upgrade your App Service to assign custom hostnames to your app.”, then it means that you need to upgrade from the free tier to one that supports custom domains. Click on the above message and you will be reminded that your pricing tier is “F1 Free”, which does not support custom domains. The next tier up is pricing tier “D1 Shared”, which does support custom domains. It, however, costs $11.76 per month (at the time of writing). If you are OK with this additional cost then click on pricing tier “D1 Shared”, then click on the Select button.

4) If the third blade looks like below, then you are indeed able to create a custom domains for your Azure website:

Note the name at the bottom of the above blade. In this demo it is codefirststuff2.azurewebsites.net. You will need this address in the next important step where you will configure a CNAME DNS record to point to your {your web app name}.azurewebsites.net.

Go to your domain registrar and add a CNAME host record that points to the hostname assigned to your Azure site. This is what my CNAME record looked like with my Canadian registrar, where I configured domain name zift.ca to use a host name code:

If you are unsure about how to configure the CNAME DNS record, then contact your domain registrar’s support desk and they will be happy to help you.
To prove that your DNS name change has indeed propagated, you can always use a website named https://www.whatsmydns.net/. Here’s what it looked like for me:

You can see from the above evidence that the CNAME DNS record change that was made has propagated across our planet (except for Paris, France). Now we can configure Azure with the new host name.

6) Return to Azure’s portal.

Click on “+ Add hostname”.

The following will appear in the fourth blade:

7) Enter the fully qualified custom address into the Hostname field (example: code.zift.ca), then click on the Validate button.

If you get two OKs at the bottom then you are good to go.

Click on the “Add hostname” to save your changes.

The real test comes by trying out your custom domain. Point your browser to your custom domain (Example: http://code.zift.ca) and make sure that your website is successfully loaded. I am happy to report that it worked for me when I pointed my Microsoft Edge browser to my custom domain name.

Sunday, October 23, 2016

In a previous post, I discussed building a Windows 10 UWP app that uses EF Core and SQLite. In this post I will show you how to deploy the same application to the Raspberry Pi 2 device running Windows 10 IoT Core. These are the pre-requisites you need to fulfill before continuing with this tutorial:

Needless to say, you need to own a Raspberry PI, version 2 or 3, device

Your development computer needs to be running the Windows 10 operating system

Install Visual Studio 2015. The community edition is more than adequate.

A monitor is needed with HDMI input in order to view the UI on the Raspberry Pi device.

An Ethernet cable is necessary to connect your development computer to the Raspberry Pi device

An HDMI cable to connect the Raspberry Pi device to your monitor.

One microSD card that will contain the Windows 10 IoT Core operating system on the Raspberry PI. microSD cards need to be at least 8 GB in size. Slower and older cards are inconsistent when flashing and may fail to work. Class 4 SD cards are not supported and at a minimum Class 10 SD cards should be used.View the list of recommended cards.

A mouse with a USB connector

A keyboard with a USB connector

Installing Windows 10 IoT on your Raspberry Pi device

Once you have all the above in place we are ready to go. The first step is to install Windows 10 IoT Core on the microSD Card.

4) Click on the device you have. In my case, I clicked on “Raspberry Pi 2”.

5) In step 2, click on “Install onto my blank microSD card”.

6) In step 3 click on “Windows 10 IoT Core”.

7) Click on Next.

8) Since you already have Windows 10 installed on your computer, on the “Get the tools” page, skip straight to step 2 then click on “Download Dashboard”. This will download a setup.exe file onto your computer . Run the setup.exe application to install an application named “Windows 10 IoT dashboard” on your connected microSD card.

9) Insert the microSD card into the adapter that is attached to your computer.

19) Connect an Ethernet network cable between the Raspberry Pi and your computer.

20) Power ON your Raspberry Pi device. You should see the Windows 10 operating system start screen on the Raspberry Pi device.

21) Back in the “Windows 10 IoT dashboard” application on your desktop computer, click on “My Devices”. Your device should get detected and you should see the name, model, and IP address:

22) To see that your Raspberry Pi device is indeed connected with your computer, click on your device.

23) On your device’s page, click on “Open Windows Device Portal in browser”. You may be asked to enter the administrator password that you previously entered.

Feel free to navigate around using the various links to get familiar with what is on your Raspberry Pi Windows 10 IoT device.

Deploy UWP .NET Core app onto your Raspberry Pi device

If you have done my building a Windows 10 UWP app that uses EF Core and SQLite tutorial, then you can deploy that application to your Raspberry Pi. Otherwise, you can create a UWP application from scratch and deploy that instead. For the purpose of this exercise, we will go ahead and create a brand new vanilla UWP app.

File >> New >> Project

Templates >> Visual C# >> Windows >> Universal

Choose the “Blank App (Universal Windows)” template

Give the application name IoTDemo then click OK

Choose minimum version to be same as target version then click OK.

Edit MainPage.xaml and add the following code between the opening and closing <Grid> tags:

The fact that you can put modern apps on a small and inexpensive networked device like the Raspberry PI opens up a lot of opportunities. I sincerely hope this demo makes you come up with some bright ideas that translate into production ready apps.

Monday, October 17, 2016

There are circumstances when it is necessary to transfer files between your development computer and your Azure website. Here’s how you can connect using the free FileZilla FTP client.
You can download FileZilla from https://filezilla-project.org/download.php.

Click on your website on the first blade. In the above case it is cartoonapi.

Click on “Deployment credentials” in the second blade.

Configure the FTP username and password in the third blade then click on Save.

The next step is to use these credentials on your FTP client. Start Filezilla:

Click on File >> Site Manager…

Click on the “New Site” button in the “Site Manager” dialog.

Give the site a name. In my case I called it cartoonapi.

Change “Logon Type” to Normal.

Go back to the Azure portal and click on Overview in the second blade.

“Copy the values for “FTP hostname” & “FTP/deployment username” and paste these values into Host and User respectively in Filezilla. Use the “Click to Copy” function in Azure, so that the username and hostname can be copied correctly.

Enter the Password you configured previously.

Click on Connect. You may receive an unknown certificate dialog like this:

Click on OK. If everything is good, you will be connected to your website and will see the following folders:

Your website is under the site folder.

This is one way to deploy and also maintain your site. Of course, there are many other much simpler ways, especially from within Visual Studio, where you can do a direct publish from Visual Studio into Azure.

Sunday, October 16, 2016

In this post I will give an example on how one can easily hydrate a C# class with data coming from an Azure Web API service. Hydration is used in the context of loading data from a data sources into C# objects. In this case the data source is a Web API service located at http://cartoonapi.azurewebsites.net/api/cartoon.

If you point your browser to this address you will see the following JSON response representing a list of cartoon characters and their respective pictures:

We need to install the We API Client libraries. To that end, execute the following command from within the Package Manager Console window in Visual Studio 2015:

Install-Package Microsoft.AspNet.WebApi.Client

We can use HttpClient to read CartoonCharacter instances from an HTTP response, without having to write a lot of deserialization code. Add the following global HttpClient declaration right above the Main() method in Program.cs.

static HttpClient client = new HttpClient();

Resolve the namespace for the HttpClient class.

It is necessary to access data from a Web API service asynchronously. Add the following method to Program.cs.

In the above code, we first initialize the HttpClient instance with this code:

client.BaseAddress = new Uri("http://cartoonapi.azurewebsites.net");client.DefaultRequestHeaders.Accept.Clear();client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));The above code sets the base URI for HTTP requests, and sets the Accept header to "application/json", which tells the server to send data in JSON format.
The following code sends a GET request for a collection of CartoonCharacter instances:

IEnumerable<CartoonCharacter> cartoonCharacters = null;HttpResponseMessage response = await client.GetAsync("/api/cartoon");if (response.IsSuccessStatusCode) { cartoonCharacters = response.Content.ReadAsAsync<IEnumerable<CartoonCharacter>>().Result;}
The GetAsync method sends the HTTP GET request. The method needs to be asynchronous, because it performs network I/O. When the method completes, it returns an HttpResponseMessage that contains the HTTP response. If the status code in the response is a success code, the response body contains the JSON representation of a collection of CartoonCharacter objects. Call ReadAsAsync to de-serialize the JSON payload to CartoonCharacter instances.

HttpClient does not throw an exception when the HTTP response contains an error code. Instead, the IsSuccessStatusCode property is false if the status is an error code.

Resolve all classes and do a quick compile to ensure that all is OK. Add the following statement inside the Main() method to call our asynchronous RunAsync() method:

RunAsync().Wait();

Hit F5 to test your application. Your output should look like this:

You should be able to re-purpose the above code for reading from any other Web API service out there.

Once again, do a quick build to ensure that you do not have any compiler errors.

Apply any pending migrations

Since we want the database to be created on the device that the app runs on, we will add some code to apply any pending migrations to the local database on application startup. The first time that the app runs, this will take care of creating the local database for us.

Running the UWP application

You can now run the application to see it in action.

Hit F5 on the keyboard or click Debug >> Start Without Debugging

The application will build and launch on your local machine:

Note: When you run your app in debug mode, there are two sets of three numbers, white on black, that appear in the top left corner of the application's window. These numbers are framerate counters to help monitor app performance. You can have them not show, if you like, by disabling the following code in the App.xaml.cs file:

When you click on the Add button, the data will be saved in your SQLite database. It will then be retrieved and displayed below the button.

Close the application.

Running application on the phone emulator

This app can run equally well on a phone.

If you have not installed phone emulators yet, click on the down-arrow beside “Local Machine” and select “Download New Emulators…”.

Once you have installed the new emulators, make sure you restart Visual Studio.

In Visual Studio, set the processor to x86 and the emulator to “Mobile Emulator 10.0.10240.0 720p 5 inch 1GB” then click on the emulator to run the application on the phone: This will first start the emulator, deploy the app on it, then run the app. Depending on your processor speed, the emulator may take some time to launch.

Enter a new contact on your phone. You will determine that the app works equally well.

Where is the database file?

In the SkillsContext.cs file, add a breakpoint to the line right after the following:

Run the application and inspect the value of the databaseFilePath variable. Determine just the path then go to that location. It is located somewhere under c:\Users\{your user name}\AppData\Local\Packages. You will find the database file named SkillDB.db.