{"id":1926,"date":"2017-12-07T02:59:52","date_gmt":"2017-12-07T10:59:52","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vsappcenter\/?p=1926"},"modified":"2024-10-09T04:45:46","modified_gmt":"2024-10-09T09:45:46","slug":"build-your-first-chat-app-with-microsoft-azure-visual-studio-app-center-and-rapid","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/appcenter\/build-your-first-chat-app-with-microsoft-azure-visual-studio-app-center-and-rapid\/","title":{"rendered":"Guest Blog | Zero to App in 20 Minutes: Build Your First Chat App with Microsoft Azure, Visual Studio App Center, and Rapid"},"content":{"rendered":"

This is a special guest post from David Drobik, co-founder at Rapid<\/a>. <\/em><\/p>\n

Until recently, we had only one option for communicating with friends, family, and colleagues from our mobile phones: Short Messaging System (SMS).<\/p>\n

Now, though, we don\u2019t have to limit our communication to 160 characters (the SMS max per message, in case you don\u2019t remember), and the options for real-time communication are virtually limitless.<\/p>\n

In my work at STRV, creating web and mobile apps for Silicon Valley\u2019s hottest companies and leading global brands, including Caviar, LegalZoom, Hallmark, and Lufthansa, and in developing our own real-time database (Rapid), we\u2019ve seen the mobile explosion, beginning with the earliest smartphones in 2004.<\/p>\n

Today we\u2019re seeing the chat explosion. From dating to customer service and team collaboration, you name it and there\u2019s a real-time messaging app for it. Industry research backs this up: Business Insider notes<\/a> the top four messaging apps are bigger than the top four social networks, and eMarketer predicts<\/a> that more than one-quarter of the world\u2019s population will be using mobile messaging apps by 2019.<\/p>\n

This is a massive opportunity, but chat interfaces are notoriously challenging to implement due to their complex asynchronous nature and underlying real-time infrastructure.<\/p>\n

We developed Rapid to solve this problem for ourselves, as a 160+ member development shop, and for you, as an indie, commercial, or enterprise developer. We\u2019ve combined numerous cloud services (the ones most critical to chat apps, including Azure Cosmos DB, Azure Redis, and Azure Container Service) into one simple real-time database to help you move fast.<\/p>\n

In twenty minutes or less, any developer can get their first real-time chat app up and running. In this post, we\u2019ll show you how (and why) to add \u201cchat apps\u201d to your StackOverflow Developer Story, GitHub repos, or [insert your preferred skills profile]. We\u2019ll dive into basic chat requirements, what separates the good from the great, plus give you the code samples and step-by-step docs<\/a> you need to get started.<\/p>\n

But first, a little more on the rise of chat apps.<\/strong><\/p>\n

It\u2019s no surprise that real-time messaging has permeated all industries, verticals, and demographics; humans are social beings, and we crave interaction with others.<\/em><\/p>\n

Developers everywhere are incorporating social elements into their apps, from gamification to social sharing, and chat capabilities are arguably \u201csocial-plus.\u201d Real-time messaging is the most direct, fastest form of digital interaction. From a developer’s point of view, this results in happier, more engaged users; your user base launches your app more frequently, checking for updates, new messages, or shares with their friends.<\/p>\n

Chat drives user engagement and loyalty, but there\u2019s usually a trade-off. You want (and should) spend your time delivering a great user experience, not solving the server-side challenges, like scaling WebSockets, that chat messaging entails.<\/p>\n

With the help of Azure and Visual Studio App Center<\/a>, Rapid removes these barriers. Without further ado, let\u2019s take a look at what it takes to build a chat app that people are eager to use again and again.<\/p>\n

Anatomy of a Chat App<\/h2>\n

Chat Channels<\/h2>\n

\"Rapid<\/p>\n

As users, we\u2019re accustomed to seeing chat groups where we can talk to dozens of friends or colleagues, in real-time or asynchronously, and direct messaging capabilities that allow us to communicate directly with one other person.<\/p>\n

As you build your<\/em> chat app, you need to make sure you can display, search, and send messages to multiple groups and associated members, as well as limit message sends to conversations between individuals.<\/p>\n

Building the List of Channels<\/h3>\n

Most chat apps contain a list of all chat groups, commonly called channels<\/em>, where users search, select, and post messages. Whatever you refer to them as, they allow your users to easily navigate through conversations.<\/p>\n

In addition, don\u2019t forget the \u201ccreate a channel\u201d feature. Offering pre-existing channels in your chat app is great, but users also need to create channels for specific teams, interests, events, and more, as well as have the ability to invite users to collaborate.<\/p>\n

\"Rapid<\/p>\n

Implement and Send Messages<\/h2>\n

Channels are the framework for your app. The core of your app is building the actual chat capabilities<\/em> and allowing your users to easily read, write, and send messages to other users and channels.<\/p>\n

Building the List of Messages<\/h3>\n

Every chat app has a way of displaying messages to users, but the best<\/em> chat apps make navigating through conversations with other users as simple as possible. Building a list of messages makes it easy for users to parse, search, and find messages. We\u2019ve seen this magnified in work-related chat applications, where colleagues sending new information quickly buries earlier (but important) information and documents.<\/p>\n

Engage Users with Push Messages<\/h2>\n

According to a recent report from App Annie<\/a>, average US users have over 80 apps installed on their smartphones, but only use<\/strong> around 30 on a monthly basis. To make your app stand out on a busy home screen, re-engaging users with push notifications is crucial.<\/p>\n

We all know that as the number of App Store and Google Play apps increases, app discoverability gets harder and harder. How your app ranks in store searches (ASO<\/a>) depends on various criteria, and how frequently your app is used per day is a major factor. This is partially in your control; using push notifications thoughtfully can drive significant increases in app launch frequency and boost your rankings.<\/p>\n

Sending Notifications with Azure Notification Hubs and Visual Studio App Center Push Service<\/h3>\n

To get started, identify when, how, and why you\u2019ll push notifications and conversation updates to your users.<\/p>\n

Just like with email, push notifications fit into two different categories:<\/p>\n

    \n
  1. Transactional Notifications<\/strong>: Notification that a new chat message is received.<\/li>\n
  2. Marketing Notifications<\/strong>: Messages intended to re-engage your users by promoting a new upgrade or by prompting them to check out your latest features.<\/li>\n<\/ol>\n

    Visual Studio App Center\u2019s Push<\/a> service allows you to send re-engagement notifications directly from the App Center portal, and you can also use Azure Notification Hubs<\/a> to send push notifications dynamically from any backend (including on-premises).<\/p>\n

    Both services handle device registrations for you, including storing device tokens and deleting them if they\u2019re no longer valid, which is a big advantage since it gives you one less moving part to worry about. On the implementation side, each service has its own client-side SDK, with a slightly different API. Visual Studio App Center\u2019s Push SDK handles most of the registration for you with a single line of code. The Notification Hubs SDK requires a deeper understanding of the platform\u2019s specific device registration process.<\/p>\n

    Next Steps: Make it Your Own<\/h2>\n

    Ready to build your own chat app in 20 minutes? Check out our demo projects<\/a> (Android, iOS, and JavaScript) to download the full source code and docs<\/a>, including detailed tutorial steps for the iOS version.<\/p>\n

    From there, you can customize the UI, add more capabilities, and, most importantly, show it off to your colleagues and friends!<\/p>\n

    To start sharing with others, check out Visual Studio App Center\u2019s Distribute service<\/a>. You\u2019ll create and add members to distribution groups in minutes, send notifications to all group members with prompts to download your app, as well as automatically send notifications for future updates as you keep adding features.<\/p>\n

    We can\u2019t wait to see what you build. And who knows\u2014you might have the next big real-time app!<\/p>\n

    More About Rapid<\/strong><\/p>\n

    We started Rapid, a globally distributed real-time database, to solve common problems and make it easy for web or mobile developers to deliver real-time data from servers to any client (iOS, Android, React Native, or React.js).Rapid relies on Azure Cosmos DB and many other Microsoft Azure services (VMs, Containers Services, Redis Cache), surfacing its powerful hyperscale capabilities, like rich queries, auto indexing, low latency, and predictable throughput, in an easy-to-use UI.<\/p>\n

    We\u2019re a startup passionate about helping other startups ship lightning-fast, amazing apps – from chat apps to games to IoT scenarios. Any situation where speed is essential, Rapid has developers covered.<\/p>\n

    Special thanks to the Rapid team who helped with the heavy lifting on this post, namely: Martin Stava, Jakub Kinst, Jan Schwarz, Filip Skaloud and Daniel Kraus.<\/p>\n

    If you haven\u2019t already, create your Visual Studio App Center account<\/a>, connect your first app, and start shipping better apps now.<\/em><\/p>\n

    Have an account? Log in<\/em><\/a> and let us know what you\u2019re working on!<\/p>\n

    \"Get<\/a><\/p>\n

    About the Author<\/strong><\/p>\n

    David Drobik is the co-founder of Rapid<\/em><\/a>, launching in early 2017. Prior to his work with Rapid, David led business development at STRV<\/em><\/a>, Silicon Valley\u2019s go-to software development partner. He\u2019s enthusiastic about sharing his rich experience in tech and startups with the world through his blog<\/em><\/a> and frequent community meet-ups, hackathons, and more.<\/p>\n","protected":false},"excerpt":{"rendered":"

    This is a special guest post from David Drobik, co-founder at Rapid. Until recently, we had only one option for communicating with friends, family, and colleagues from our mobile phones: Short Messaging System (SMS). Now, though, we don\u2019t have to limit our communication to 160 characters (the SMS max per message, in case you don\u2019t […]<\/p>\n","protected":false},"author":42,"featured_media":38034,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16],"tags":[10],"class_list":["post-1926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobiledev","tag-guest-post"],"acf":[],"blog_post_summary":"

    This is a special guest post from David Drobik, co-founder at Rapid. Until recently, we had only one option for communicating with friends, family, and colleagues from our mobile phones: Short Messaging System (SMS). Now, though, we don\u2019t have to limit our communication to 160 characters (the SMS max per message, in case you don\u2019t […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts\/1926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/comments?post=1926"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts\/1926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/media\/38034"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/media?parent=1926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/categories?post=1926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/tags?post=1926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}