Using Xamarin with Telerik Backend Services and Analytics

UPDATE (7/7/2015): Telerik Analytics officially supports Xamarin out of the box! You can read more about it here.

The Telerik Platform combines the six integral parts of your app’s lifecycle including PrototypesUI,Backend Services, Analytics, Mobile Testing and Distribution. While each of these components are critical for every app, one thing to keep in mind is the modular architecture of the Telerik Platform. This means that your development team does not have to invest in all six parts, but can integrate each one independently. In this article, we’ll see how you can use Xamarin and create an application that ties into the Telerik Platform by utilizing Backend Services and Analytics.

Gathering the Required Tools

Before we get started, let’s download the required tools where we can quickly add them to our project as necessary.

  • Xamarin
    – In order to build our app.
  • Telerik Backend Services
    – Will allow our Xamarin app to use Telerik’s cloud-based services for linking your applications to backend cloud storage.
  • Telerik Analytics
    – Will allow you to use analytics to monitor and track your mobile apps usage.

Getting Started

We’ll begin by creating a new Telerik Workspace through the Telerik Platform and adding Backend Services and Analytics to our workspace. If you need help creating a new workspace, then please consult this document. You may give it any name that you choose and your final workspace should look like what is shown in Figure 1.

Figure 1: The Telerik workspace containing Backend Services and Analytics.

Figure 1: The Telerik workspace containing Backend Services and Analytics.

This is a great example of the modularity that exists in the Telerik Platform. As you can see from the illustration above, your development team does not have to invest in all four parts, but only the one(s) they are interested in using.

Now head over to the downloads tab and select Backend Services -> Platform .NET -> Your Project Name and Download the .NET SDK compatible with .NET Framework 4.5. Copy and paste the API key as you will need this later. Do the same thing for Analytics and download the .NET Framework SDK and make note of the Monitor Key provided to you.

Once you have both SDK downloaded, go ahead and unblock the file and unzip them to a directory that you can easily access later on.

Launching Xamarin

We are going to build an application using Xamarin that targets Android. You may begin by opening Visual Studio and navigating to the Visual C#->Android->Android Application template and give it a name as shown in Figure 2 and press OK.

Figure 2: Xamarin Android Application

Figure 2: Xamarin Android Application

Please note that the same code that we used in our Xamarin.Android project could be used in a Xamarin.iOS project as well.

Upon first launch, you will need to add references to the .dlls for both backend services and analytics that we downloaded earlier. Once you do so, your project will look like the following as shown in Figure 3:

Figure 3: The required references needed for Telerik's Backend Services and Analytics.

Figure 3: The required references needed for Telerik’s Backend Services and Analytics.

Creating the UI

Head over to the Resources folder and drill down into Layout->Main.xaml and drag and drop 2 TextView and 2 EditText widgets to create the following UI shown in Figure 4. You will also need a Button that will be used to trigger sending the data to Telerik’s Backend Services. You may name the fields anything you wish, but for my sample I named the two EditText fields, etFirstName and etLastName. The completed UI is shown below:

Figure 4: Our Android User Interface built in Xamarin that will make use our Backend Services and Analytics.

Figure 4: Our Android User Interface built in Xamarin that will make use our Backend Services and Analytics.

Creating the Content Type in the Telerik Platform

Now that our User Interface is complete, let’s go back to our workspace in the Telerik Platform and create a new content type by clicking on Backend Services then Types and finally “Create a Content Type”. We will give this the content type the name of “Customer” and add in two fields, “FirstName” and “LastName” as shown in Figure 5.

Figure 5: FirstName and LastName Field added to Telerik Backend Services.

Figure 5: FirstName and LastName Field added to Telerik Backend Services.

Go ahead and save the content type. Click on the API key tab and copy and paste the key as shown in Figure 6. We will need this shortly in order for our Xamarin application to interact with our backend services.

Figure 6: API Key for the Telerik Backend Services.

Figure 6: API Key for the Telerik Backend Services.

Writing the Code to Store Data in Telerik Backend Services

Let’s go ahead and add a class to hold both of these fields. Right click on your project and select “Add Class” and give it the name “Customer” and add the following code:

using System;
using System.Linq;
using Telerik.Everlive.Sdk.Core.Model.Base;

namespace XamarinWithTelerik
{
    class Customer : DataItem
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Please make note that we inherited from DataItem which is part of the Backend Services and uses the namespace called, Telerik.Everlive.Sdk.Core.Model.Base.

Enter the Activity1.cs

Since this project will only have one activity you can either leave the name as is or rename it to MainActivity.cs. We will make a slight modification to the OnCreate method as well as add a new method called PushData passing in the string values the user typed. The completed code will look like the following:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    SetContentView(Resource.Layout.Main);

    // Get our widgets from the layout resource where we have a reference to them later. 
    Button button = FindViewById<Button>(Resource.Id.MyButton);
    EditText etFirstName = FindViewById<EditText>(Resource.Id.etFirstName);
    EditText etLastName = FindViewById<EditText>(Resource.Id.etLastName);

    //Attach an event handler to the Button click event that calls PushData. 
    button.Click += delegate { PushData(etFirstName.Text, etLastName.Text); };
}

private void PushData(string strFirstName, string strLastName)
{
    var backend = new EverliveApp("YOUR_API_KEY");

    var customerData = backend.WorkWith().Data<Customer>();

    Customer cust = new Customer()
    {
        FirstName = strFirstName,
        LastName = strLastName,
    };

    customerData.Create(cust).ExecuteSync();
}

We began by getting a reference to our widgets from the layout resource for the button and the two EditText widgets. We added a click event handler for our button and a method called PushData, which took the EditText widgets and passed it to our Backend Service. As you can tell this was achieved with just a couple of lines of code. If you run the application, the emulator will appear. Type in your first and last name and click on the “Submit to Backend Service” button as shown in Figure 7.

Figure 7: Android Emulator ready to submit data to our Backend Services.

Figure 7: Android Emulator ready to submit data to our Backend Services.

Switch back over to the Telerik Platform and select Backend Services and you should see your data now appear as shown in Figure 8.

Figure 8: Telerik Backend Service Stored the User Input.

Figure 8: Telerik Backend Service Stored the User Input.

What about Analytics?

Analytics is an important part of any mobile application, as we use analytics to effectively monitor and track our applications real-time. Since our backend services is working properly, we can easily add Analytics by heading back over to the Telerik Platform and entering our workspace for this Xamarin project and clicking on Analytics and finally the “Getting Started” tab. It will provide a code snippet that you can use in your app.

We will begin by adding a private member variable as described in the code snippet to our Activity class.

private IAnalyticsMonitor m_monitor;

Then we will add analytics to our OnCreate method after the SetContentView is called as shown below:

//Setting up Analytics
m_monitor = AnalyticsMonitorFactory.CreateMonitor("YOUR_MONITOR_KEY");
m_monitor.Start();

Finally, we will wrap up with overriding the OnStop method to stop the monitor once the activity is no longer in use.

protected override void OnStop()
{
    base.OnStop();
    // stopping the monitor when the activity no longer is visible to the user
    if (m_monitor != null)
         m_monitor.Stop(); 
}

We can run our application again and look at the dashboard for an overview of critical items such average usages per day, number of sessions, world map, operating system being used and much more as shown in Figure 9.

Figure 9: Telerik Analytics with a Xamarin Application.

Figure 9: Telerik Analytics with a Xamarin Application.

We haven’t really scratched the surface of what is possible with Analytics. You can track which features are used the most and prioritize development efforts and remove application bottlenecks. You can capture and fix run-time crashes and notify your team via email. You can also generate web-based reports that you can filter and view the results.

Conclusion

While this blog post covered Xamarin apps with Telerik’s Backend Services and Analytics, it is also worth noting that all of the other parts of the Telerik Platform can be integrated independently as well. For example, if you would rather use HTML5, CSS3 and JavaScript to create a cross-platform app then you could use AppBuilder. The Mobile Testing component allows you to test any native, web or hybrid app. The Telerik Platform is constantly growing and improving – two new beta products allow you to prototype your app or simplify your internal app distribution to testers and end-users. I’d encourage you to go and take a look at the Telerik Platform and explore for yourself how it could fit into your next project.

Comments