Hosting the Web API project locally

Before we can access the API layer from our mobile application, we have to set up hosting. For this example, we are going to walkthrough setup for hosting locally.

Hosting locally does not require much work, but it will require an instance of Windows and Mac OSX running together. You can achieve this by simply running parallels, or using a Windows and Mac computer.

Our first step is to open Visual Studio from our Windows instance and click the run button:

Hosting the Web API project locally

When the project starts, it will automatically open up your default web browser and show the application.

Tip

Since we don't have any visible web pages, we don't need to have the browser open. If the project is running, the web API will be running so we will be able to ping it over an HTTP request.

Now that we have the backend running, how do we access the API?

If you are running via two separate computers, we should be able to simply access the API through the IP address of the computer. In order to find out the IP address of the computer, open up a new command prompt window and type in ipconfig. This will display the IPv4 address that the computer has been assigned to on the current network.

Hosting the Web API project locally

Note

In order for the local set up to work, please make sure both the mobile device and the computer hosting the WEB API are both on the same WIFI/LAN connection.

To confirm we have this working, paste the following URL into a web browser on the Windows instance and see if we get results:

"localhost:{port}/api/StockItems"

Note

The port is automatically assigned when the project is run, so when the browser appears with the localhost URL, paste the URL extension api/StockItems.

Now we want to test this link on the Mac instance, but before we do, we have to change some settings in the applicationhost.config file located in "C:Users[YourName]DocumentsIISExpressconfigapplicationhost.config".

If you are using Visual Studio 2015, it will be located in /{project folder}/.vs/config/applicationhost.config.

If you haven't got Internet Information Services (IIS) switched on, follow these steps, to install IIS to serve static content:

  1. Click the Start button, click Control Panel, click Programs, and then click Turn Windows features on or off.
  2. In the list of Windows features, select Internet Information Services, and then click OK.
  3. Look through the file until you can file your application entry like this:

    Note

    The best way to find your particular entry is by searching for the port number.

            <site name="Stocklist" id="43"> 
                        <application path="/"
                        applicationPool="Clr4IntegratedAppPool"> 
                            <virtualDirectory path="/" 
physicalPath="C:UsersMichaelDocumentsStocklistStocklist" /> 
                        </application> 
                        <bindings> 
                            <binding protocol="http" bindingInformation="*:
                            {PORT}:localhost" /> 
                        </bindings> 
        </site>
  4. In the <bindings> section, we want to add another row:
            <binding protocol="http" bindingInformation="*:{PORT}:{IPv4 Address}" />
  5. Now we want to allow incoming connections on this PORT and IPv4 Address from other computers.

    Note

    If you're running Windows 7, most incoming connections are locked down, so you need to specifically allow incoming connections to your application.

  6. First, start an administrative command prompt and run these commands, replacing {IPv4}:{PORT} with the IPv4 Address and PORT you are using:
            > netsh http add urlacl url=http://{IPv4}:{PORT}/ user=everyone
  7. This just tells http.sys that it's OK to talk to this URL. Next, run the following command:
            > netsh advfirewall firewall add rule name="IISExpressWeb"
        dir=in protocol=tcp localport={PORT} profile=private
        remoteip=localsubnet action=allow
  8. This adds a rule in the Windows Firewall, allowing incoming connections to the port for computers on your local subnet.
  9. Now we should be able to access the running API from our Mac instance. This time, paste the URL with the IPv4 address instead of localhost: {IPv4 address}:{port}/api/StockItems.
  10. If all was successful, we should have the following XML layout displayed like this:
    Hosting the Web API project locally
  11. Excellent! Now let's add these URL settings to our mobile application. Open up the Config.resx file in the Resources folder of the Stocklist.Portable project, and fill in these values:
                <data name="ApiAllItems" xml:space="preserve"> 
                <value>http://{IPv4}:{PORT}/api/StockItems</value> 
            </data> 
            <data name="GetById" xml:space="preserve"> 
                <value>http://{IPv4}:{PORT}/api/GetItemById</value> 
            </data>

Now let's test our project on iOS and Android, and we should be able to see our StocklistPage fill with items from our API controller.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.124.177