microsoft / appsample-photosharing

Sample code for a UWP photo sharing app.

topic	languages	products
sample	csharp	windows windows-uwp

Appsample-Photosharing

PhotoSharingApp is a Universal Windows Platform (UWP) app sample that demonstrates real-world social media experiences around photo sharing.

With this app, users can earn virtual gold by uploading and sharing photos with people from all around the world. They can upload photos of their cats, shoes, houses, or last vacations, and see how they compete against other users. Are their photos a great gold source? Are they among the most generous contributors? They can find out on the app's leaderboard.

The goal of this app is to provide a complete, end-to-end example of a real-world app that uses a variety of UWP features, and exhibits design and development best practices. This makes it a great source of code you can copy into your own apps. It also provides an example of what a real-world app architecture might look like. The decoupled architecture makes it easy to reuse code or to make changes and build your own photo sharing app, which you can then publish in the Windows Store.

See our post on the Windows Apps Team blog: SnapGold

Application Screenshots:

• Categories Page Desktop Mobile
• Photo Stream Desktop Mobile
• Photo Details Page Desktop Mobile
• Profile Page Desktop Mobile

App features

The app allows users to:

• Browse photo categories and navigate into photo collections and photo details.
• Take and upload photos directly in the app or upload an existing photo.
• Give gold and add comments to photos uploaded by other users.
• Receive push notifications when users are given gold for uploaded photos.
• Explore a leaderboard of users with the most gold, users that have given the most gold to other photos, and the photos that have received the most gold.
• Sign in with a Microsoft, Facebook, Google, or Twitter account.
• Report content as abusive, inappropriate, or spam.
• Buy virtual gold using in-app purchase.

Technology overview

PhotoSharingApp demonstrates the following features:

• Adaptive UI using the SplitView control (see video on Channel 9) and adaptive triggers:

  PhotoSharingApp.Universal.AppShell.xaml

• In-app purchase (see the Windows.ApplicationModel.Store namespace):

  Purchase virtual gold, PhotoSharingApp.Universal.Store

• Separation between user interface, business logic and data models (MVVM):

  PhotoSharingApp.Universal.Models, PhotoSharingApp.Universal.Views, PhotoSharingApp.Universal.ViewModels

• Extensibility and flexibility using the Unity dependency container:

  PhotoSharingApp.Universal.Unity, PhotoSharingApp.Universal.Registries

• How to connect your app to an Azure App Service

  PhotoSharingApp.Universal.Services.ServiceClient

• Real-world service implementation for storing uploaded photos using Azure DocumentDB

• Sign-in with Azure Mobile Apps:

  PhotoSharingApp.AppService.Shared.Repositories.DocumentDbRepository

• Usage analysis with Visual Studio Application Insights

  PhotoSharingApp.AppService.Controllers.PhotoController

• Push Notifications (see Integration with App Service Mobile Apps in Azure Notification Hubs:

  PhotoSharingApp.Universal.Services.NotificationRegistrationClient

Running the sample

For instructions on setting up the sample, see Getting Started.

Project overview

For an overview of the projects structure and namespaces, see Project overview.

Technical deep dive

For an explanation of how the sample integrates multiple technologies, see Technical deep dive.

appsample-photosharing's Issues

It's tough to find the "delete photo" button. We need to make it easier to find.

Currently the only way to delete a photo is to right click it in your profile page and using the context menu. We'll be adding a delete button to the photo directly.

Rd.xml enables metadata for all types inside project

Does this have any performance implications? Shouldn't we declare only the types we need metadata for?

Binding vs x:Bind

Why does the example use Binding instead of x:Bind? I undestood that Binding is depdrecated in favor of x:Bind which is more performant, typing safe, etc :) Thanks for answer!

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Navigate to user profile pages

The app currently allows you to navigate to your own profile page showing you all photos that you've uploaded. We are looking into adding the feature that allows users to click/tap on a any profile to show a user's profile page with showing all uploaded photos of that specific user.

Authentication Question

How are refresh tokens handled by UWP's authentication handler? I can't seem to find anything on the code.

Thanks :)

Flagging photos isn't fully functional

In the app bar of the photo page you can flag a photo as spam, inappropriate, or objectionable. The long term goal is to automatically hide those photos in the main stream after they are flagged n number of times. We currently save each “flag” in DocumentDB but we haven’t wired up to have the photos removed from the live stream.

Add globalization

The current version has some strings already extracted in the Resources.resw file, but we're looking into improving globalization support so that the app can be easier localized.

Calling /api/sasurl - 500 Error

I setup the project following the instructions in GettingStarted.md. Everything is working fine, except the sasurl endpoint, which returns a 500 response code with the following body
{ "message": "An error has occurred." }

The other API endpoints are working fine. Anything I am missing out? Any help is appreciated.

Server Error in App Service

I followed the Getting Started directions step-by-step, and when I published my app and opened the app service url in my browser, I got a server error.

The actual error is Could not load file or assembly 'System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.

Here's a screenshot of the error with its trace:

Update:

The App Service works fine when I debug it locally. This error is only occurring when it is running on Azure.

AuthenticationProviders binding should not exist in SettingsPage.xaml

ItemsSource="{Binding AuthenticationProviders}" on line 43 of SettingsPage.xaml AND DebugPage.xaml line 45 should be removed. There is no AuthenticationProviders property in the corresponding ViewModels. My best guess is that these are artifacts of cut and paste. When running in Debug mode, the Diagnostics tool displays a few error events due to these bindings. No noticeable issues otherwise.

Update the App Service to use new Azure Storage APIs

Current version of the service uses an old version of Azure Storage. Update it to use the latest.

Today we removed App Insights from the UWP code. We'll be incorporating HockeyApp soon as suggested by Microsoft.

Give gold status not updated immediately after login

Start the application without associated login credentials, then login to a provider. Immediately after login, the "give gold" state of the immediately displayed photos is not updated per the user's login information. Switch to different views and the photos' give gold state is correct. The display of the initial photos probably needs to be refreshed after the user logs in.

Where view models are registered with the bootstrapper?

I apologize in advance if the answer is obvious, but where do the majority of the view models get registered with the bootstrapper?

In CategoriesView we have

    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        var loadData = e.NavigationMode != NavigationMode.Back;
        _viewModel = ServiceLocator.Current.GetInstance<CategoriesViewModel>(loadData);
        DataContext = _viewModel;

        if (loadData)
        {
            await _viewModel.LoadState();
        }

        _viewModel.StartHeroImageSlideShow();
    }

This makes sense to me because in ViewModelRegistry we have

    public void Configure()
    {
        // We use the container controlled lifetime manager here, as we want to keep instances (for backward navigation)
        // unless we request a new one explicitly (forward navigation).
        Container.RegisterType<CategoriesViewModel>(new ContainerControlledLifetimeManager());
        Container.RegisterType<StreamViewModel>(new ExternallyControlledLifetimeManager());
        Container.RegisterType<IUploadFinishedHandler, DefaultUploadFinishedHandler>();
    }

However, I can't make sense of how the other view models are registered. For example, in AboutPage we have

    public AboutPage()
    {
        InitializeComponent();

        _viewModel = ServiceLocator.Current.GetInstance<AboutViewModel>();
        DataContext = _viewModel;
    }

Where does AboutViewModel get registered?

Setting the DataContext AFTER InitializeComponents causes errors

In general the pattern in this project sets the DataContext to the ViewModel AFTER InitializeComponents is called. When this happens, the xaml is looking to bind to properties that do not yet exist in the ViewModel. Retrieving the ViewModel from the ServiceLocator should happen BEFORE in order to make sure the dependencies exist. Errors appear in the Diagnostics Tools otherwise.

This issue is not apparent because OnNavigatedTo then assigns the DataContext to the ViewModel and the bindings are updated.

When the app is run from the dummy service, the profile page shows other users pictures.

Clicking on the profile page, when the app is running as the dummy service, should show only photos you submitted. This issue makes it hard to see the "delete" and "set profile" buttons in action.

DesignTime error "ServiceLocationProvider must be set"

Following the documentation I notice I cannot view Design Time data. When I open LeaderboardsPage.xaml I am not seeing the data, just a ListView of categories. In the Error List in Visual Studio it reports:

ServiceLocationProvider must be set

How can I get some DesignTime data working? Thanks!