Microsoft Azure – Web Api with Universal Windows 10 Apps

Microsoft Azure – Web Api with Universal Windows 10 Apps

WebApi1

Short introduction

Mobile applications today are not only single page, ordinary programs run on your devices. Sharing photos, saving data in the database and offline sync are only few features that are available nowadays to provide better user experience. Try to imagine that for instance you neeed to save all data in the database located in the cloud. Direct connection between database and your mobile app is not a good idea and appropriate approach.

For this purpose I would like to show how to configure and use Web Api – REST Api backend for your mobile applications hosted on the Microsoft Azure cloud platfrom.

What do I need to start?

1) Visual Studio 2015 Community (for free) or higher

2) Microsoft Azure subscription (you can test it for free here)

Let’s start

1) Launch Visual Studio and create new empty ASP .NET Web Application project:

Give it a name: “FirstWebApiApp”:

WebApi2_2

After you click “OK” select “Empty” template and below “Add folders and core references for” select “Web API” like on the screen below:

WebApi3

After you click “OK” Visual Studio will create new solution with Web Api project like on the screen below:

WebApi4

2) Open “WebApiConfig” located in the “App_Start” folder:

WebApi5

This class is responsible for the configuration of the routes to different actions that you can call to the Web Api. Deafult route template is:

“api/{controlller}/{id}”

It means that you can call selected method from the specific controller (we will implement it below) and also pass some additional parameters. For now it can be not as clear but no worry we will go through it below.

3) Add controller responsible for returning results in json format:

1. Right click on the “Controllers” folder and select “Web API 2 Controller – Empty”. Give it a name : “NewsController”:

WebApi6

2. Copy the code below and paste it in the place of your controller’s code:

 

    [AllowAnonymous]
    [RoutePrefix("api/news")]
    public class NewsController : ApiController
    {
    }

a) “AllowAnonymous” attribute is used to enable users to call your Web Api without authentication (this will be topic of another post).

b) “RoutcePrefix” attribute is used to define the route to access “NewsController” via http call.

4) Create “News” class to define model of your data:

Right click on the “Models” folder and add new class called “News”. It should have code like below:

WebApi7_7

 

 public class News
    {
        public int NewsId { get; set; }
        public string NewsHeader { get; set; }

        public string NewsContent { get; set; }
       
        public News() { }

        public News(int id, string header, string content)
        {
            NewsId = id;
            NewsHeader = header;
            NewsContent = content;
        }

        public static List<News> CreateNews()
        {
            return new List<News>()
            {
                new News(1, "Good weather!", "Weather will be quite nice today."),
                new News(2, "Microsoft likes OpenSource", "Now you can use SQL with your Linux machine"),
                new News(3, "BMW - unbelievable experience", "Try new BMW car now in Warsaw")
            };
        }
    }

5) Now let’s get back to the “NewsController” to add http GET method to enable retrieving News in our Universal Windows 10 App that we will creater soon:

Add “Get: method to your controller class (it should look like below):

 

 [AllowAnonymous]
    [RoutePrefix("api/news")]
    public class NewsController : ApiController
    {
        [Route("")]
        [HttpGet]
        public IHttpActionResult Get()
        {
            return Ok(News.CreateNews());
        }
    }

a. Note that “HttpGet” attribute was added – this is information for the Web Api that this method can be invoked by http GET.

b. Empty “Route” attribute was also added – this will inform that there is no additional route needed when calling “NewsControler” get method.

WebApi8

That’s it! Now we can test our simple REST Web Api application:

Click “Microsoft Edge” button (or different browser if you use) and launch web app on the localhost:

WebApi9

You can see that you app is launched on the localhost (for me its http://localhost:27087)

Add “/” after “localhost” and type: “api/news”:

http://localhost:27087/api/news

It will call “News” controller with default GET method we have defined before.

As you can see News data was retrieved in json format by default!

WebApi10

6) Now it’s hight time to publish our REST Web Api on the Microsoft Azure as a normal Website:

1. Click “New” button and select “Compute” -> “Web App” -> “Quick create” and then type the URL for your app. For mine it will be : “uwpazurewebapi.azurewebsites.net”. Then click “Create Web App”:

WebApi11

WebApi12

Your website app is created. Now we can publish our Web Api on Azure.

2. Let’s get back to the Visual Studio. Right click on the project and select “Publish”:

WebApi13

3. Select “Microsoft Azure App Service”, sign in with your account and select website that you have created earlier:

WebApi14

4. In the next step click “Validate connection” and after that click “Publish”:

WebApi15

5. After few seconds your app should be published and you will see the screen below:

WebApi16

6. If you add “/api/news” to the URL you will see news list in json format:

WebApi17

7) Connect your Universal Windows 10 App with Azure Web Api!

Right click on the solution and select “Add new project”. Choose “Universal Windows” and give it a name: “WebApiTestApp”:

WebApi18

Now your solution should look like below:

WebApi19

1. Open “MainPage.xaml.cs” file and add below bethod:

 

 private async void getNews()
        {
            var request = (HttpWebRequest)WebRequest.Create("http://uwpazurewebapi.azurewebsites.net/api/news");
            request.Method = "GET";
            request.ContentType = "application/json";
            WebResponse response = await request.GetResponseAsync();

            if (response != null)
            {
                string responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();
                var dialog = new MessageDialog(responseString, "Response from the Azure Web Api:");
                dialog.Commands.Add(new UICommand("OK"));
                await dialog.ShowAsync();
            }
        }

Remeber to change the URL address to fit once you have typed when you was creating Azure Web app – this is very important.

2. Call “getNews()” in the constructor:

 

   public MainPage()
        {
            this.InitializeComponent();
            getNews();
        }

WebApi20

3. Now launch the app. If you have configured everything correctly json data should appear!

WebApi21

Now you can do whatever you want with it. Remember that there is very good library for parsing json to objects called “Newtonsoft.Json”. You can use it to easily convert json to objects.

Sum up

Now you know how to use REST Web Api and host it on Azure. You also have knowledge how to use it with your Universal Windows 10 App. That is only beginning but good point to start. You can also connect to the SQL database from the Web Api app so it’s also easy way to retrieve data and display it in the apps. Enjoy.

Advertisements