Edit

Social app for mobile and web with authentication

App Service - Mobile Apps
Functions
Traffic Manager
Visual Studio
Xamarin

Solution ideas

This article is a solution idea. If you'd like us to expand the content with more information, such as potential use cases, alternative services, implementation considerations, or pricing guidance, let us know by providing GitHub feedback.

This mobile client app offers social image sharing with a companion web app. The app back-end service does background image processing using an Azure function, and it can notify users of progress via a notification hub. Non-image data is stored in Azure Cosmos DB. The web app accesses the back end service data and images via Azure Traffic Manager.

See the following services, which are featured in this solution architecture:

Potential use cases

The mobile client app works in offline mode, which allows you to view and upload images, even when you don't have a network connection.

Architecture

Architecture diagram shows the route from the Engineer to Application Insights. Download an SVG of this architecture.

Dataflow

  1. Create the app using Visual Studio and Xamarin.
  2. Add the Azure App Service Mobile Apps back end service to the app solution.
  3. Implement authentication through social identity providers.
  4. Store non-image data in Azure Cosmos DB and cache it in Azure Cache for Redis.
  5. Store uploaded images in Azure Blob Storage.
  6. Queue messages about newly uploaded images.
  7. Use Azure Functions to dequeue messages and process images retrieved from blob storage.
  8. Send push notifications to users through a notification hub.
  9. Build and test the app through Visual Studio App Center and publish it.
  10. Control the distribution of user traffic to service endpoints in different datacenters.
  11. Use Application Insights to monitor the app service.

Components

  • Build the web front end, mobile apps, and back end services with C# in Visual Studio 2017 or Visual Studio for Mac.
  • Xamarin: Create mobile apps for iOS and Android using C# and Azure SDKs.
  • Visual Studio App Center: App Center enables a continuous integration and deployment workflow by pulling code from BitBucket, GitHub, and Visual Studio Team Services.
  • An App Service web app can host a customer-facing web app and a service that is used by both the web and mobile client.
  • Use Azure Functions for serverless background processing. For example, one Azure function can automatically resize new blobs when they're added to a container, while another function listens for messages on a queue in order to delete multiple background images.
  • Application Insights: Detect issues, diagnose crashes, and track usage in your web app with Application Insights. Make informed decisions throughout the development lifecycle.
  • Azure Cosmos DB is a fully managed NoSQL document database service. It offers querying and transaction-processing over schema-free data, predictable and reliable performance, and rapid development.
  • Azure Queue storage is used for durable messaging between the App Service backend and Azure Functions.
  • Blob storage: Azure Storage hosts image files to take advantage of better scalability with lower cost. Communication between the web app and the Azure function is often performed using blob triggers and Azure Queue storage.
  • Azure Notification Hubs are used for scalable, cross-platform push notifications.
  • Azure Traffic Manager controls the distribution of user traffic for service endpoints in different datacenters in order to deliver a highly responsive and available application.

Next steps