Microsoft teamed up with Century 21 China Real Estate, a leading comprehensive real estate services provider and focus on China’s fast-growing and highly fragmented secondary real estate market, to develop KooFang Mobile Apps with Xamarin which revolutionize the way that provides real estate services for customers.

Core Team:

  • Rodger Kong – R&D Director, Century 21 China Real Estate
  • Chaoting Jin – Senior Product Manager, Century 21 China Real Estate
  • Yi Lu – Xamarin Engineer, Century 21 China Real Estate
  • Panhong Dou – Xamarin Engineer, Century 21 China Real Estate
  • Junqian Zhuang – Technical Solution Professional, Microsoft DX
  • Tory Xu – Senior Technical Evangelist, Microsoft DX
  • Zepeng She – Technical Evangelist, Microsoft DX

    Hackfest Image

Customer profile

Century 21 China Real Estate is a leading comprehensive real estate services provider and focus on China’s fast-growing and highly fragmented secondary real estate market, providing franchise services, commercial real estate and primary home services, overseas property services and mortgage management services. Since commenced operations in 2000, Century 21 China have experienced substantial growth supported by the information systems and training programs. Now Century 21 Real Estate China network covers 34 major cities with 1,136 sales offices, over 14,192 sales professionals and staff, and more than 7.4 million property listings.

Problem statement

Based on their mobile O2O and digital transformation strategy, Century 21 China would like to make their real estate agents more productive and get a better relationship with the customers.

As they want to win the mobile internet war among the fierce competition with other real estate companies, it’s a prerequisite to achieve that goal with having good quality apps on the major mobile platforms. But now their developers are most focusing on C# language. If they develop native iOS app and Android app, they’ll have to hire a new iOS dev team and a new Android dev team. In addition, their apps require complex business logic and functions but they don’t have long time to develop the apps due to their competitors already landed the mobile apps for some time. Last but not the least, they would like to maintain the apps with a lower cost and in an easier way.

Solution, steps, and delivery

Details about the implementation are found in these sections:

  • Front end (Android and iOS app in Xamarin)
  • Browser web app
  • Back end (Azure SQL Database, Azure blob storage and API app)

    Xamarin Architecture Diagram

What we achieved in this Ascend+ program:

  1. Use Xamarin.Forms to develop the ‘KooFang’ mobile apps on iOS & Android with the same functions as koofang.com

  2. Use Azure Notification Hubs to push notification for mobile apps

  3. Use the API App to host the mobile app backend in Azure

  4. Use the Storage to store the house pictures

  5. Migrated their database to Azure SQL Database to improve the efficiency

Front End

The app will include two parts: Second-hand housing & housing rental.

  • The customers and sales agents can searching the second-hand housing resources and the house listed for rental through the app, and the sales can see more information than the customers.

  • The housing resource can be searched by residential district, price, areas, map, etc. The total housing information is all in the app, the agents and customers can reach the information at any time, anywhere.

We used Xamarin.Forms to lay out all the application’s screens. This allowed us to reuse UI code across both Android and iOS.

Visual Studio Project Directory

Visual Studio Project Directory

KooFang App Housing Resources List Screenshot

KooFang App Housing Resources List Screenshot

KooFang App Housing Resources Details Page Screenshot

KooFang App Housing Resources Details Page Screenshot

KooFang App Housing Resources Editing Page Screenshot

KooFang App Housing Resources Editing Page Screenshot

KooFang App Personal Information Page Screenshot

KooFang App Personal Information Page Screenshot

Custom Navigation Bar

We would like to integrate a search bar in the navigation bar, but the Xamarin.Forms default controls doesn’t support this. So we disable the default navigation bar on the top of the xamarin.forms page, using a custom navigation bar to include a search box to implement the great effect that the default navigation bar does not support

```C sharp

NavigationPage.SetHasNavigationBar(this, false); _navigation = base.CreateNavigation(); _navigation.BackgroundColor = Color.FromHex(UIFactory.COLOR_PRIMARY); if (Device.OS == TargetPlatform.iOS) { _navigation.Children.Add(backIcon, 0, 1); _navigation.Children.Add(box, 0, 1); _navigation.Children.Add(searchLayout, 1, 1); _navigation.Children.Add(historyIcon, 2, 1); } else { _navigation.Children.Add(box, 0, 0); _navigation.Children.Add(backIcon, 0, 0);

_navigation.Children.Add(searchLayout, 1, 0);
_navigation.Children.Add(historyIcon, 2, 0); }

*KooFang App Custom Navigation Bar Screenshot*

  ![KooFang App Custom Navigation Bar Screenshot](/images/2017-06-01-Century-21/view_custom_navigation_bar.jpg)


#### Integrate the function of social sharing in China social meida####

As you know, China's economy is already the world's second largest and is still growing and meanwhile China has her own social media such as Wechat (800M MAU), Weibo, QQ and so on. The social media channel is quite important to the housing agent to maintain and engage their customer.

Thus, we integrate with the share function in the app, but the social media platforms just provide the SDK for Android and iOS instead of Xamarin SDK. So we implement an interface and then can call the function from Android/iOS SDK.


Here's the shared code:

```C Sharp

//Shared
public interface ISocialService
{
  void ShareUrl(string url, string title, string description);
}

Here’s the code for Android:

```C Sharp

public class SocialService : Java.Lang.Object, ISocialService, Com.Umeng.Socialize.IUMShareListener { public void ShareUrl(string url, string title, string description) { //doc: http://dev.umeng.com/social/android/share-detail Com.Umeng.Socialize.Media.UMWeb web = new Com.Umeng.Socialize.Media.UMWeb(url); web.Title = title; web.Description = description; new Com.Umeng.Socialize.ShareAction(Plugin.CurrentActivity.CrossCurrentActivity.Current.Activity).WithMedia(web) .SetDisplayList(Com.Umeng.Socialize.Bean.SHARE_MEDIA.Weixin, Com.Umeng.Socialize.Bean.SHARE_MEDIA.WeixinCircle,Com.Umeng.Socialize.Bean.SHARE_MEDIA.Qq) .Open(); } }


Here's the code for iOS:

```C Sharp

public class SocialService : UIViewController, ISocialService
{
    public void ShareUrl(string url, string title, string description)
    {
        UMSocialUIManager.ShowShareMenuViewInWindowWithPlatformSelectionBlock(
            (UMSocialPlatformType PltatType, Foundation.NSDictionary arg1) =>
            {
                UMSocialMessageObject messageObject = UMSocialMessageObject.MessageObject;

                var shareUrlStr =  string.IsNullOrEmpty(url)? " ": url;
                var shareTitieStr = string.IsNullOrEmpty(title) ? " " : title;
                var shareDescrptionStr = string.IsNullOrEmpty(description) ? " " : description;

                UMShareWebpageObject shareObject = UMShareWebpageObject.ShareObjectWithTitle(shareUrlStr, shareTitieStr, new UIImage());
                shareObject.WebpageUrl = shareUrlStr;
                messageObject.ShareObject = shareObject;

                UMSocialManager.DefaultManager().ShareToPlatform(PltatType, messageObject, this,
                    (data, error) =>
                    {
                        if (error != null)
                        {
                             Console.WriteLine(error);
                        }
                        else
                        {

                            Console.WriteLine(data);
                        }
                    });
            });
    }
}


KooFang Share Function

Share Function

Back End

Notification

Notificaiton is very important in this app due to it is the important way to make housing agents keep responding quickly to the request from customer and at the same time the customer can get the latest news for the hoursing resource.

For application developers, writing an Android application that can receive push notifications for the Chinese market is challenging. Android phones in China do not usually contains the Google Services, which has to be received from the Google Cloud Messaging service. There are many different app stores and push services that make it even harder.

In Azure.cn, we support for sending push notifications from the Azure Notification Hub service to such Android devices via baidu cloud. This is additional support beyond existing support for iOS, Windows Phone, Windows, Android and the Kindle in Azure Notification Hub.

Application developer must log in to the Baidu portal to be registered as baidu developers, to create a cloud push project and the application of the corresponding identifier (UserId and ChannelId), and then from the Azure management portal insert identifiers Azure Notification Hub.

Since then, we can use the client application to update the Notification of the Hub to the Android SDK Notification Hub to register the device, and then use the update of the Service Bus/Notification Hub.NET the SDK to send push notifications, the Notification will be sent to device by push baidu cloud services to the registration of Android devices.

The Mobile Apps feature of Azure App Service uses Azure Notification Hubs to send pushes, we set up a notification hub for the mobile app ot make push notification very easy.

  1. In the Azure portal, go to web+mobile to find the “notification hub” resource to the app. Click to create a notification hub.

  2. Click the “Notification Services” to set up channel, Apple and Google.

  3. Update code in existing Mobile Apps back-end project to send a push notification every time a new item is added.

Here’s the code in Android project:

```C sharp

//Android public override void OnBind(Context context, int errorCode, string appId, string userId, string channelId, string requestId) {

ChannelId = channelId;
UserId = userId;
try
{
    if (Hub == null)
    {
        Hub = new WindowsAzure.Messaging.NotificationHub(KKMobile.Common.Constants.AzureNotificationHubPath, KKMobile.Common.Constants.AzureNotificationHubConnectionString, context);

        LogMessage($"{ClassName} - {"Azure Notification Hub initialized."}");
    }
}
catch (Exception ex)
{
    LogMessage($"OnBind - {ex.Message}");
}

RegisterWithNotificationHubs(); }

Here's the code iOS project:

```C sharp
//iOS
public override void RegisteredForRemoteNotifications(UIApplication application, NSData deviceToken)
{
    var hub = new WindowsAzure.Messaging.SBNotificationHub(KKMobile.Common.Constants.AzureNotificationHubConnectionString, KKMobile.Common.Constants.AzureNotificationHubPath);

    hub.UnregisterAllAsync(deviceToken, (error) =>
    {
        if (error != null)
        {
            LogMessage("Error on Unregister: {0}", error.ToString());
        }
    });

    if (KKMobile.Helpers.Settings.UserId > 0)
    {
        //register user tag with user area code and id
        hub.RegisterNativeAsync(deviceToken, new NSSet(KKMobile.Helpers.Settings.UserId"), error =>
        {

            if (error != null)
            {
                LogMessage("Error on Register: " + error.Description);
            }
        });
    }
}


Blob

Since the housing resouces will generate huge data of images, we need a low-cost and high perfomace way to store them. Thus, we use the Blob to store the housing resouces file and image.

```C Sharp

CloudStorageAccount account = CloudStorageAccount.Parse(storageConnectionString); var client = account.CreateCloudBlobClient(); var container = client.GetContainerReference(blobContainer); var imageBlob = container.GetBlockBlobReference(imgNameStr); await imageBlob.UploadFromStreamAsync(imageFile.GetStream());

```

Conclusion

After we teamed with them to solve lots of issues, now they can launch a first version of the product in private preview and will publish to store soon.

Thank the Century 21 China Real Estate team!

“Xamarin.Forms provides a powerful and efficient way to truly generate cross-platform applications running on iOS, Android and Windows. That makes us really focus on the functionality and content of the application. Simultaneously, using Microsoft Azure make the app easliy connect to cloud and more focused on business and marketing. “ Rodger Kong, R&D Director of Century 21 China Real Estate

Additional resources

Develop Cloud Connected Mobile Apps with Xamarin and Microsoft Azure

Add push notifications to your Xamarin.Forms app

How to use Blob Storage from Xamarin

Create your first ASP.NET web app in Azure in five minutes