Telerik UI for Xamarin Controls and Cloud Services

You can integrate any major cloud vendor with Telerik UI for Xamarin and Telerik UI for UWP. Learn the benefits and how to get started.

There is no doubt that cloud computing has become an integral part of our daily lives, no matter our field or industry. The cloud paradigm is well-adopted and is still growing increasingly popular. More and more software companies are embedding cloud technologies in their everyday processes and the products they create. The term is recognized as a synonym for reliability, scalability and efficiency even by non-technical companies, and can be an important factor in achieving certain product requirements or negotiating deals.

As the leading provider of the platform and tools you need to develop and deploy mission-critical business applications, Progress realizes the impact of the cloud and the possibilities it opens up for our users. With this in mind, we came up with a series of how-to articles to make it as simple as possible for you to integrate the services provided by the major cloud providers with our controls.

This blog post aims to familiarize you with our Telerik UI for Xamarin and Telerik UI for UWP suites, however, examples are available for most other technologies such as WPF, WinForms and all the web suites within the Telerik offering as well, like Telerik UI for ASP.NET AJAX, MVC and Core.

What's in Each Scenario?

Let's start with a brief overview of the scenarios and the services they relate to. Keep in mind these are designed for "cloud beginners," so if you would like a more "deep dive" you may want to check the different providers' documentation pages and the resources they provide (there is plenty of information on the topic). Still, if you are starting to consider the cloud as the next move for your future projects, we hope we will be able to easily get you started and show you how to set up the services and visualize them in your favorite Telerik UI for Xamarin controls.

The three major providers we have chosen are Azure, Amazon Web Services and Google Cloud Platform. At the time of writing some Google Cloud services do not support Xamarin, so we'll stick to talking about UWP for them, but we will definitely follow how Google's offering develops.

The main services we focused on were Cognitive Services, Storage service and databases in the cloud.

Here is a list of the scenarios for Microsoft Azure:

• Data in the Cloud: SQL Database, Cosmos Db
• Blob Storage
• Text Translation and Text Analysis cognitive services

Here's our list for AWS (Amazon Web Services):

• S3 Storage service
• Data in the cloud: Dynamo Db
• Simple Email Service

And for Google Cloud (UWP only):

• Cloud Storage
• Translation API
• Google Cloud DataStore (NoSQL database)

Where Can You Find the Scenarios?

The how-to examples can be found in the Cloud Integration section of the Telerik UI for Xamarin or Telerik UI for UWP documentation pages. Once you expand the cloud node, you will notice that the scenarios are grouped by provider so you can easily navigate to the setup that intrigues you most. As the scenarios we have created suggest the usage of a personal/company cloud accounts, they are not publicly available as separate solutions, however, following the different articles should be enough to get you started and easily reproduce the setups shown.

Can You Show Us Some Code?

Taking a look at some code is always a good idea so you can get a notion of what a specific example includes. Let's say you would like to add some translation functionality within your application, which can easily be done using Azure's Translation Text API. Our layout will include a RadSegmented control used to choose from several language options, a RadButton control which will trigger the translation and a RadEntry element used to input the text that should be translated.

Here is the XAML definition:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             x:Class="AzureXamarin.TranslatorAPI.TranslatorAPIpage">
  <ContentPage.Content>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid Grid.Row="0">
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="1">
          <Label Text="Translate To:" />
          <telerikInput:RadSegmentedControl
            x:Name="segmentedControl2"
            SelectedIndex="1">
            <telerikInput:RadSegmentedControl.ItemsSource>
              <x:Array Type="{x:Type x:String}">
                <x:String>English</x:String>
                <x:String>French</x:String>
                <x:String>German</x:String>
              </x:Array>
            </telerikInput:RadSegmentedControl.ItemsSource>
          </telerikInput:RadSegmentedControl>
        </StackLayout>
      </Grid>
      <StackLayout Margin="0,50,0,0" Grid.Row="1">
        <Label Text="Type in something in English: "></Label>
        <telerikInput:RadEntry x:Name="entry"
                               WatermarkText="Text to be translated..."/>
        <telerikInput:RadButton x:Name="btn"
                                BorderRadius="5"
                                BorderThickness="2"
                                BorderColor="DarkOrange"
                                Text="Translate Text"
                                Clicked="Btn_Clicked"/>
        <Label x:Name="resultLabel"
               TextColor="DarkRed"
               BackgroundColor="LightBlue"
               HeightRequest="50"/>
      </StackLayout>
    </Grid>
  </ContentPage.Content>
</ContentPage>

Invoking the Translation API is done by a simple HTTP request with the relevant data:

public async void TranslateTextAsync(Label label)
{
  HttpClient client = new HttpClient();
  client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", key);
  string translateToLanguage = (this.segmentedControl2.ItemsSource as string[])[this.segmentedControl2.SelectedIndex];
  string textToTranslate = this.entry.Text;
  string languageCode =  CheckLanguageCode(translateToLanguage);

  if (!translateToLanguage.Equals(String.Empty))
  {
    string uri = host + path + "?to=" + languageCode + "&text=" + System.Net.WebUtility.UrlEncode(textToTranslate);
    HttpResponseMessage response = await client.GetAsync(uri);
    string result = await response.Content.ReadAsStringAsync();
    var content = XElement.Parse(result).Value;
    label.Text = " " + content;
  }
}

And here is the result in Android:

The sample is made as simple as possible, with all the needed functionality set in the code-behind of the XAML page. The full implementation can be found at the following article: Text Translation using Azure

Conclusion and Next Steps

We hope this post gives you what you need to feel more confident with cloud technologies and Telerik UI for Xamarin and UWP. As always, your feedback is highly appreciated, so please do reach out if you would like to see additional examples or to suggest features for the controls that would ease the integration of your application with cloud services.

If you are new to Telerik UI for Xamarin, it offers over 70 UI controls, Visual Studio Templates and themes for native cross-platform mobile development. You can learn more by visiting the product page or try it out by downloading a 30-day free trial. 

Try Telerik UI for Xamarin