{"id":10384,"date":"2022-05-09T09:16:33","date_gmt":"2022-05-09T16:16:33","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=10384"},"modified":"2022-05-25T09:41:55","modified_gmt":"2022-05-25T16:41:55","slug":"building-real-time-collaborative-apps-with-microsoft-365-azure-and-power-platform","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/building-real-time-collaborative-apps-with-microsoft-365-azure-and-power-platform\/","title":{"rendered":"Building real-time collaborative apps with Microsoft 365, Azure and Power Platform"},"content":{"rendered":"<p>It\u2019s no secret that collaboration is key to enhancing business operations and increasing overall productivity. Tools such as Microsoft Teams provide a great way to collaborate using chat, audio, and video. Word, Excel, and PowerPoint online make it easy to collaborate on various documents with colleagues and customers around the world.<\/p>\n<p>While these tools are great, you may be wondering how to add collaboration functionality into your custom apps&#8230;<\/p>\n<p>We generally think in terms of selecting, inserting, and updating data in a database; sending or receiving data to or from a RESTful service; or integrating real-time communication to connected clients using web sockets. While many applications may not require collaborative functionality, there are others that can benefit from a <strong>collaboration-first design <\/strong>approach.<\/p>\n<p>Web sockets provide a proven way to add real-time communication to apps, but they aren&#8217;t designed to handle many of the unique challenges associated with real-time collaboration. For example, as multiple people are typing into a data grid cell or editing text in a brainstorming app, they can easily overwrite someone else&#8217;s work if data isn\u2019t synchronized properly across clients. Effective real-time collaboration is built to intelligently handle these types of data collisions, synchronize data across clients in a collaboration session, and automatically store collaboration data.<\/p>\n<p>While you can implement this type of functionality on your own with enough time and resources, a more productive solution is to leverage libraries and cloud services designed specifically for real-time collaborative scenarios. To better understand the possibilities and begin learning about services provided in the Microsoft Cloud, let\u2019s walk through a brief scenario.<\/p>\n<h2>Scenario<\/h2>\n<p>Over the last year, most teams at Michelle&#8217;s company have shifted to remote work. Management has asked Michelle to build a custom line of business application that enables these remote team members to collaborate in real-time so they can work together to collect and review ideas. The application will support real-time user collaboration as well as user presence changes. Users need to be able to work together in the app to collect ideas; see when new ideas are added, modified, or deleted in real-time; and avoid data conflicts during the collaboration session.<\/p>\n<p>To handle these requirements, Michelle will use the Fluid Framework and Azure Fluid Relay service for real-time data collaboration. Real-time user presence changes will be handled by using Microsoft Graph change notifications, Power Automate Flow, and Azure services.<\/p>\n<p>Fluid Framework is a good choice for real-time collaboration since it relies on <a href=\"https:\/\/fluidframework.com\/docs\/concepts\/tob\/\">total order broadcast and eventual consistency<\/a> to synchronize data across all clients in a collaboration session. It also handles persisting collaboration data, allowing users to join at any time and catch up with what everyone else has done.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-10385\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration-1024x563.png\" alt=\"B\" width=\"640\" height=\"352\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration-1024x563.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration-300x165.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration-768x423.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/Fluid-Framework-collaboration.png 1423w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a>\nFor real-time presence information (knowing when people are available to collaborate), Michelle has decided to take advantage of Microsoft Graph change notifications combined with Power Automate Flow. She\u2019ll use Azure services such as Azure Event Hubs, Azure Functions, and Azure SignalR to access presence data changes in real-time. This requirement falls into the \u201creal-time communication\u201d category and technologies such as Azure SignalR fit that scenario well. As people become &#8220;available\u201d, they can instantly be shown in the app and invited to join a collaboration session that\u2019s in progress.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-10386\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image-1024x511.png\" alt=\"Image SignalR image\" width=\"640\" height=\"319\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image-1024x511.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image-300x150.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image-768x383.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/05\/SignalR-image.png 1430w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a>\nTo better understand how these different products and services can be integrated, we\u2019ve put together a four-part video series that introduces the different services and shows how they can be used together to build real-time collaboration solutions.<\/p>\n<h2>Part 1 \u2013 Introduction to collaborative app technologies<\/h2>\n<p>In the first part of the series, a collaborative app scenario will be introduced with a demo. Technologies that can be used to build collaborative solutions will then be discussed.<\/p>\n<p><strong>Watch the video \ud83d\udc47<\/strong><\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/Lbigni_5yic\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2>Part 2 \u2013 Using Fluid Framework and Azure Fluid Relay<\/h2>\n<p>The second part of the series will focus on understanding the use case for Fluid Framework and Azure Fluid Relay and show how they can be integrated to enable real-time collaboration features in the app.<\/p>\n<p><strong>Watch the video \ud83d\udc47<\/strong><\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/kNmK9n4_jUM\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2>Part 3 \u2013 Setting up resources for real-time Microsoft Graph notifications<\/h2>\n<p>This part of the series will demonstrate the set-up process of Microsoft Azure and Power Platform resources to enable real-time Presence notification tracking feature.<\/p>\n<p><strong>Watch the video \ud83d\udc47<\/strong><\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/8a2fZ_wCgAk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2>Part 4 \u2013 Integrating real-time Microsoft Graph notifications<\/h2>\n<p>The final part of the series will cover the integration of Microsoft Graph change notifications, Azure Event Hubs, Azure Functions and Azure SignalR services to receive real-time Presence notifications in the collaboration app.<\/p>\n<p><strong>Watch the video \ud83d\udc47<\/strong><\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/I4U99iVosuk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2>Additional Information<\/h2>\n<ul>\n<li>Azure Active Directory &#8211; <a style=\"background-color: #f7f7f9; font-size: 1rem;\" href=\"https:\/\/docs.microsoft.com\/azure\/active-directory\/fundamentals\/\">https:\/\/docs.microsoft.com\/azure\/active-directory\/fundamentals\/<\/a><\/li>\n<li>Azure Event Hubs &#8211; <a href=\"https:\/\/docs.microsoft.com\/azure\/event-hubs\/event-hubs-features\">https:\/\/docs.microsoft.com\/azure\/event-hubs\/event-hubs-features<\/a><\/li>\n<li>Azure Fluid Relay &#8211; <a href=\"https:\/\/docs.microsoft.com\/azure\/azure-fluid-relay\/\">https:\/\/docs.microsoft.com\/azure\/azure-fluid-relay\/<\/a><\/li>\n<li>Azure Functions &#8211; <a href=\"https:\/\/docs.microsoft.com\/azure\/azure-functions\/functions-overview\">https:\/\/docs.microsoft.com\/azure\/azure-functions\/functions-overview<\/a><\/li>\n<li>Azure Key Vault &#8211; <a href=\"https:\/\/docs.microsoft.com\/azure\/key-vault\/general\/overview\">https:\/\/docs.microsoft.com\/azure\/key-vault\/general\/overview<\/a><\/li>\n<li>Azure SignalR &#8211; <a href=\"https:\/\/docs.microsoft.com\/azure\/azure-signalr\/\">https:\/\/docs.microsoft.com\/azure\/azure-signalr\/<\/a><\/li>\n<li>Fluid Framework \u2013 <a href=\"https:\/\/fluidframework.com\/\">https:\/\/fluidframework.com<\/a><\/li>\n<li>Microsoft Graph &#8211; <a href=\"https:\/\/docs.microsoft.com\/graph\/overview\">https:\/\/docs.microsoft.com\/graph\/overview<\/a><\/li>\n<li>Power Automate &#8211; <a href=\"https:\/\/docs.microsoft.com\/power-automate\/\">https:\/\/docs.microsoft.com\/power-automate\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn about services provided in the Microsoft Cloud to add collaboration functionality into your custom apps.<\/p>\n","protected":false},"author":82723,"featured_media":10412,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,3,20],"tags":[61,169],"class_list":["post-10384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fluid-framework","category-microsoft-graph","category-power-platform","tag-azure","tag-azure-fluid-relay"],"acf":[],"blog_post_summary":"<p>Learn about services provided in the Microsoft Cloud to add collaboration functionality into your custom apps.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/10384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/82723"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=10384"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/10384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/10412"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=10384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=10384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=10384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}