Tag Archives: Notification Hubs

AzureChatr: Building a Cross-Platform Chat App for Windows, iOS & Android

AzureChatrBlogBanner1280

by Nick Landry (last updated on 10/7/2014)

Have you ever witnessed a big news announcement about some mobile app or website being acquired for millions (or billions!) of dollars, only to tell yourself:

Wow, that’s a lot of money, and to think that I could have been the one to build that!

This is exactly how I felt when WhatsApp was purchased by Facebook for a whopping 19 BILLION dollars earlier this year. Why? Because like all of you, I have technical skills and I know how to build apps, and I knew I could have built that app. It seems that chat/messaging apps are all the craze now. Microsoft got things going early when Skype was acquired back in 2011 (though Skype is so much more than just a chat app). Yahoo just acquired MessageMe, and now Google is apparently building their own too. So what am I to do here? Admit that it’s too late or challenge myself?

I decided I would prove it to myself. I decided to build a cross-platform chat app that lets people on Windows, iOS and Android chat with each other. I knew it wouldn’t be that hard because I have a (not so) secret weapon called Microsoft Azure. My goal is ultimately to show everyone how easy it can be to build cloud-powered mobile apps, no matter if you are a Windows, iOS or Android developer using C#, Objective-C or Java. What better way to do this than to build a live app, and then share the source code with the community as I blog about the internal “how to’s”?

AzureChatrWideBanner874

Introducing AzureChatr: A Chat App Powered by the Cloud

AzureChatr (pronounced “Azure Chatter”) is a cross-platform chat client that I now use to demonstrate mobile development techniques with a cloud backend using Microsoft Azure. While AzureChatr can be used to chat about anything, the intent of the app is to bring users together to talk about cloud development. Last June I shipped the initial beta release of AzureChatr for Windows Phone 8.1. AzureChatr will soon be available on Windows 8.1, iOS and Android too. The cool thing is you do not have to wait until I publish AzureChatr on the other platforms. You can find the source code for Windows, iOS and Android below.

AzureChatr lets you chat live in real-time with other users in a global chat room. You do not need to invite anyone, it’s just a big central meeting place (for now). There is currently no support for private chat and all conversations should be considered public

PRIVACY NOTICE: All chat conversations are saved in the cloud for history purposes. Chat conversations should be considered public but will not be distributed to any third parties or used for any other purposes than displaying conversations in the app. Do not divulge any private or confidential information in AzureChatr.

AzureChatr Features

The current version of AzureChatr is certainly not as full-featured as WhatsApp or other popular chatting apps. My goal is to keep adding features over time and document their implementation at the same time here on my blog.

Common Features: Windows, iOS, Android

  • All chats are posted in a global public chat room. There is no private chat yet.
  • Send chat lines to the cloud and save them in Azure Mobile Services.
  • Receive chat lines from the cloud via push notifications (i.e. WNS, APNS, GCM).
  • Display new chat conversation items as toast notification / popup alerts when the app is not running. Tapping the toast / alert launches the app.
  • Integration with the Action Center / Notification Centers on Windows Phone, iOS and Android.
  • Support for Portrait or Landscape orientation.

It should be noted that there is currently no built-in way to mute or disable the notifications. This is obviously an upcoming feature. The only way to mute the notifications is either to disable them in your phone settings where allowed, or uninstall the app.

Extra Features in the Universal Windows version

Since the Windows Phone 8.1 version is already live in the store, there are additional features I’ve already added to polish the app a bit more for public use. Though the Windows version is not live yet, some features have already been integrated should you play with the source code yourself. This is because the Windows and Windows Phone versions are built as a Universal Windows app that virtually shares 100% of its source code. The extra features already available in this version are:

  • Integrated login with default Microsoft Account on the device.
  • AutoScroll the chat window down after each new chat entry is posted.
  • Multiline text entries with wrapping.
  • Only retrieve the last 20 entries on app startup / refresh.
  • Added an extra Send button when using the Windows version since the default send button in the app bar is not visible by default.
  • Send chat line on ENTER key in Windows for mouse & keyboard users.

Upcoming Features

Other than bringing the iOS and Android to parity with the Windows version, I already have a long shopping list of features that I plan to eventually add to AzureChatr across all versions.

  • Display time stamps on individual chat items.
  • Support for additional chat rooms by topic, and private chat rooms where you can invite your friends.
  • Access the chat log history by scrolling back.
  • Speech synthesis integration to hear what your friends are saying without looking at the app.
  • Voice command activation with Cortana (on Windows Phone).
  • Display user profile images and allow users to provide additional profile data in the app.
  • Customize the UI such as font sizes, colors, etc.
  • Support for hyperlinks and emojis in chat.
  • Support for posting images in chat.
  • Muting notifications when you don’t want to be disturbed.
  • Authentication via Twitter, Facebook and Google+.
  • Allow users to “Like” someone else’s post.

And this is just a partial list. I have a lot more in my backlog. Feel free to post your own suggestions in the comments section below. Note that AzureChatr is not something I’m working on full-time. I’ll bang out some code and keep adding features when I find time, but do not expect this to because the be-all-end-all of all chat apps anytime soon.

AzureChatrStoreBanner

Download the AzureChatr App

Wanna try the app? So far I have only published the Windows Phone 8.1 version of AzureChatr. The others will come soon enough.

  • Download AzureChatr for Windows Phone 8.1 (Note that this is currently a BETA release only available to a few countries: USA, Canada, UK, Ireland, Australia, India and Finland).
  • Download AzureChatr for Windows 8.1 (coming soon)
  • Download AzureChatr for iPhone & iPad (coming soon)
  • Download AzureChatr for Android tablets & phones (coming soon)

I’ll be sure to update this blog post as the other versions become available, and also when I add additional features to the app. Of course, the whole goal here is to learn how to build this yourself or how to add similar features to your own apps, so keep on reading to discover what goes on under the hood.

AzureNotificationHubBanner

AzureChatr: Under the Hood

AzureChatr has a lot of moving parts and this section will host links to several blog posts that dissect specific aspects of the AzureChatr components, including the following:

  • AzureChatr client for Windows and Windows Phone
  • AzureChatr client for Android
  • AzureChatr client for iOS
  • Cloud components, including Azure Mobile Services, Authentication Services and Notification Hubs

You can get started by watching this video interview about AzureChatr from the Visual Studio Toolbox show on Channel 9. It features the show host – Robert Green – and myself geeking out over how AzureChatr was built, what it does, and how Azure powers it all.

Bookmark this page and stay tuned as blog more about AzureChatr. All the links will be added here.

Dive Into the Source Code & the Azure Services

Before you download the source code for any of the AzureChatr versions, you have to create a Microsoft Azure account and configure the appropriate Azure services for table storage via Mobile Services, authentication via Microsoft Account, and push notifications via Notification Hubs.

The following links will help guide you through this process, including several tutorials from the Azure documentation.

Obtaining a Microsoft Azure Account

Setting-up the Required Azure Components

  • Create a new Mobile Service for your version of AzureChatr. You can use the tutorial here to learn how to get started but all you need is to create the mobile service by picking a name, selecting/creating a SQL database, picking a region affinity, and selecting the desired backend (JavaScript/Node or .NET). My version of AzureChatr uses JavaScript so if you want to use the same server-side code that I am sharing with you, you should pick JavaScript. Note that you do not have to repeat this step for the 3 clients. There is only one Mobile Service commonly used by the Windows, iOS and Android clients.
  • Follow the same tutorial to create a new table called ChatItem.
  • Authenticate your Windows app with Live Connect single sign-on: Follow the steps in this tutorial to register your app for the Windows Store, restrict permissions to authenticated users and install the Live SDK for Windows. Note that in the current implementation of the code, the iOS and Android versions do not yet support authentication. The authentication code has already been added to the Universal Windows app.
  • Please refer to the README.MD file in GitHub. There is a version for each of the 3 client versions. It contains a block of code you need to edit the ChatItem table Insert script.

Source Code Links in GitHub

The source code for all three versions of AzureChatr is available in my GitHub repo under the following links:

  • Source code: Windows Clients for a Cloud-based Cross-Platform Chat App for Windows Phone and Windows Tablets, Laptops and Desktops. Written in C# as a native Universal app using Visual Studio.
  • Source code: Android Client for a Cloud-based Cross-Platform Chat App for Smartphones and Tablets. Written in Java as a native app using Eclipse. This is just a basic prototype for now and is not ready for publication to the Google Play Store.

    Source code: iOS Client for a Cloud-based Cross-Platform Chat App for iPhone and iPad. Written in Objective-C as a native app using Xcode. This is just a basic prototype for now and is not ready for publication to the Apple App Store.

You’re probably wondering why I chose the “silo approach” to build these 3 versions. After all, building the 3 versions with 3 different languages, 3 different SDKs and 3 different IDEs is basically the hardest way possible. Personally I would have preferred to use Xamarin to build a cross-platform app and share as much code as possible. But I felt it was important to stick with the native tools already known by the developers indigenous to each mobile ecosystem.

Feel free to use the source code in your own apps. This is why I’m posting my source here, I want you all to learn how to use Azure for such online apps. You can use it to add chat capabilities to other domain-specific apps, or even to your own games. If you intend to simply create another “competing chat client”, that is fine too. All I ask is that you extend the code with your own ideas and features – make it your own (not just a clone) – and publish your chat apps under a different name of your own choosing (i.e. NOT AzureChatr).

If you have questions about AzureChatr, any of the mobile versions discussed here, the features, source code, design decisions or if you need help standing-up your own Azure services to support your own chat features, you can post them in the comments below, or you can ping me on Twitter at @ActiveNick.