Sunday, July 5, 2015

Design native mobile Apps in C# with Sitecore and Xamarin


Now build your mobile app in c# with Sitecore on Xamarin platform.
It's really very easy to develop and deploy the native mobile app for  c# developer on xamarin platform.

Recently Sitecore has announced the partnership with xamarin, Sitecore mobile SDK for xamarain is available for mobile app development in c#. For more information on this visit

In this article I am focusing on how we can start with xamarin development, including architecture, installation, development, calling Sitecore Web APIrest service and bug fixing.

Architecture:



Xamarian framework allows to develop native app using c# with Sitecore. sitecore expose Sitecore web item api to communicate with the xamarain using mobile SDK.
The SDK core conforms to the PCL (Portable Class Library) standard and has some platform specific plug-ins that are used to secure an end user's credentials.
All client-server communication is performed via the Sitecore Item Web API service.



Xamarian installation:
If you are new to Xamarin framework so visit the site http://xamarin.com/ and download Xamarin for window  http://xamarin.com/download download for windows




It's available for 30 day trial version after the sign up process.
Once we download the XamarinInstaller next step is to install the xamarian after installing the xamarian now  xamarian studio is available for native app development.





Choose a template>


Configure the project >


Create the project by entering any name>



Once you create the project, project file will open.


Notice that you can debug the native app by the simulator and any device.
For use simulator, we need to download the android player or use an existing supported device which is available in the framework itself.
Here we can download the device simulator  https://xamarin.com/android-player
Now all installations have been done and application is ready to run on simulator have a look on the device:





Now we are going to call the Sitecore API, once you have connected with Sitecore then we can use all operations that are available in the Sitecore Web API

We need to add below code to call the Sitecore API








using (var credentials = new SecureStringPasswordProvider(“username”, “password”)) // securing credentials, entered by the end user
using
(
  var session = SitecoreWebApiSessionBuilder.AuthenticatedSessionWithHost(instanceUrl)
    .Credentials(credentials)
    .WebApiVersion("v1")
    .DefaultDatabase("web")
    .DefaultLanguage("en")
    .MediaLibraryRoot("/sitecore/media library")
    .MediaPrefix("~/media/")
    .DefaultMediaResourceExtension("ashx")
    .BuildSession()
) // Creating a session from credentials, instance URL and settings
{
  // In order to fetch sample content we have to build a request
  var request = ItemWebApiRequestBuilder.ReadItemsRequestWithPath("/sitecore/content/home")
  .AddFieldsToRead("text")
  .AddScope(ScopeType.Self)
  .Build();

  // And execute it in a session asynchronously
  var response = await session.ReadItemAsync(request);

  // Now that it has succeeded we are able to access downloaded items
  ISitecoreItem item = response[0];

  // And content stored in its fields
  string fieldContent = item["text"].RawValue;
}


Important: Bug Fixing

If you are running your app with using local Sitecore hosting then you face the below exception, because the app is running on a device over the internet and not resolve remote server

System.Net.WebExceptionStatus.NameResolutionFailure

Solution:
Need to Configure Remote Access to IIS Express:

By default, Windows 8 and IIS Express will not accept remote connections. Before any remote devices, such as an Android device or an iPhone can communicate with our WCF service we must make the following changes:

  1. Configure IIS Express to Accept Remote connections - This step involves editing the config file for IIS Express to accept remote connections on a specific port and then setting up a rule for IIS Express to accept the incoming traffic.
  2. Add an Exception to Windows Firewall - We must open up a port through Windows Firewall that remote applications can use to communicate with the WCF service.

You will need to know the IP address of your workstation. For the purposes of this example we'll assume that our workstation has the IP address 192.168.1.143.

Let's begin by configuring IIS Express to listen for external requests. We do this by editing the configuration file for IIS Express at %userprofile%\documents\iisexpress\config\applicationhost.config, as shown in the following screenshot:

Locate the site element with the name HelloWorldWcfHost. It should look something like the following XML snippet:
<site name="HelloWorldWcfHost" id="2">
    <application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="\\vmware-host\Shared Folders\tom\work\xamarin\code\private-samples\webservices\HelloWorld\HelloWorldWcfHost" />
    </application>
    <bindings>
        <binding protocol="http" bindingInformation="*:9607:localhost" />
    </bindings>
</site>

We will need to add another binding to open up port 9608 to outside traffic. Add the following XML to the bindingselement:

<binding protocol="http" bindingInformation="*:9608:192.168.1.143" />

This will configure IIS Express to accept HTTP traffic from any remote IP address on port 9608 on the external IP address of the computer. This above snippet assumes the IP address of the computer running IIS Express is 192.168.1.143. After the changes, the bindings element should look like the following:

<site name="HelloWorldWcfHost" id="2">    <application path="/" applicationPool="Clr4IntegratedAppPool">        <virtualDirectory path="/" physicalPath="\\vmware-host\Shared Folders\tom\work\xamarin\code\private-samples\webservices\HelloWorld\HelloWorldWcfHost" />    </application>    <bindings>        <binding protocol="http" bindingInformation="*:9607:localhost" />        <binding protocol="http" bindingInformation="*:9608:192.168.1.143" />    </bindings></site>
1     Next, we need to configure IIS Express accept incoming connections on port 9608. Startup up an administrative command prompt, and run this command:

         >> netsh http add urlacl url=http://192.168.1.143:9608/ user=everyone

   The final step is to configure Windows Firewall to permit external traffic on port 9608. 

    From an administrative command prompt, run the following command:

>> netsh advfirewall firewall add rule name="IISExpressXamarin" dir=in protocol=tcp localport=9608 profile=private remoteip=localsubnet action=allo

         This command will allow incoming traffic on port 9608 from all devices on the same subnet as the Windows 8 workstation.

     I hope this article will help you :)

    Happy Sitecoring...