Creating Google Photos for Friends to Upload

one. Introduction

What yous volition build

In this codelab, you'll build a field trip app, Field Trippa, that enables users to share photos.

Learn how to employ the Google Photos Library API to back a media sharing feel in your ain awarding.

The app for this codelab was built using Palpitate, Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a unmarried codebase. Learn more at https://flutter.dev.

What you'll learn

• How to employ the Google Photos Library API to upload media and share albums
• How to use Google Sign-In in Flutter
• How to make Google API calls from Palpitate

What you'll need

• Flutter development environment
• Two Google user accounts ready on different emulators or devices that have access to Google Photos, and so you can test sharing between users
• An Android device, emulator or physical iOS device - the iOS simulator is not supported due to missing photographic camera hardware

Overview over the Field Trip Gallery App - "Field Trippa"

In this codelab you will build an app to share photos for an circuit or field trip, congenital using the Google Photos Library API.

The user logs in using Google Sign-In and authorizes the application to use the Google Photos Library API.

And then, the user can create a trip for uploading photos with a clarification. Each trip can be shared with other members of the application, who can also contribute photos.

Under the hood, each trip is stored every bit a shared album within Google Photos. The app handles sharing and uploading to this anthology, but you can also share the album with others who practise not have the app straight through a URL to Google Photos.

What would you like to learn from this codelab?

I'm new to the topic, and I want a good overview. I know something about this topic, but I want a refresher. I'm looking for example code to use in my project. I'grand looking for an explanation of something specific.

two. Download the Code

Download the source code for this codelab:

To clone the GitHub repository from the command line, use the following control:

git clone https://github.com/palpitate/codelabs flutter-codelabs          

The sample code is cloned into a flutter-codelabs directory that contains the code for a collection of codelabs. The code for this codelab is in palpitate-codelabs/photos-sharing. You can also browse the code on GitHub.

The directory construction under palpitate-codelabs/photos-sharing contains the initial and the last steps. The starter code is in initial, and so locating the matching files is as like shooting fish in a barrel as:

cd flutter-codelabs/photos-sharing/initial          

If you desire to skip forward, or see what something should look like afterward a step, look in the final directory that contains the finished lawmaking for this codelab.

Open the initial code:

Open the directory flutter-codelabs/photos-sharing/initial in your preferred Flutter IDE, for instance VSCode or Android Studio with the Dart and Flutter plugins installed.

3. Run the App

Follow these steps to get your development environs ready, if you haven't adult with Flutter before.

To run the "Field Trippa" app click the "run" button in your development IDE, or utilise the following control from the root directory of the source lawmaking:

flutter run          

You should encounter the "Connect with Google Photos" screen:

4. Prepare upwards the Google Photos Library API

The Google Photos Library API requires you lot to cosign your users using OAuth 2.0. Users sign into the awarding and authorize it to interact with the API on their behalf.

Y'all can notice some boosted troubleshooting tips at the cease of this step.

Create a new Firebase project and register your app

Go to the Firebase panel and select "+ Add Projection". Enter a project name and select "Create Project" to continue. Do non follow any other steps in the Firebase console. Instead, return to this codelab and continue to the "Android" or "iOS" parts beneath to configure the awarding.

Android only: If yous are running the app on Android, annals an Android app:

Click the Android icon to open the Android app registration screen.

For bundle, enter: com.google.codelab.photos.sharing

Remember the signing certificate SHA-1 from your car:

On Windows run the post-obit command:

keytool -allonym androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -list -five -storepass android          

On Mac or Linux, run the post-obit command:

keytool -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v -storepass android          

Click "register app" to go on.

Download the google-service.json file to your computer and move information technology into the directory "android/app/". (Tip: In Android Studio, you can elevate the downloaded file directly into the correct location in the project side console.)

This file contains the projection configuration for the Firebase and Google Developers projection yous have just set up.

(See the documentation for the package google_sign_in for details.)

You don't have to complete any other steps in the Firebase console. The Firebase SDK has already been added to the application.

iOS only: If y'all are running the app on iOS, register an iOS app in Firebase:

Click the iOS icon to open the iOS app registration screen.

For iOS packet ID, enter: com.google.codelab.photos.sharing

Click "adjacent" to keep.

Download the GoogleService-Info.plist file to your calculator.

Open the Flutter project in Xcode

Correct click on Runner directory, select "Add Files to Runner" and select the GoogleService-Info.plist file you accept downloaded to add it to the Runner module.

Edit the source code of the file ios/Runner/Info.plist and add together the value of the property REVERSED_CLIENT_ID from the file GoogleService-Info.plist. Supercede the entry at the bottom of the file:

ios/Runner/Info.plist

            <!-- Google Sign-in Section --> <key>CFBundleURLTypes</key> <assortment>   <dict>     <key>CFBundleTypeRole</cardinal>     <string>Editor</string>     <cardinal>CFBundleURLSchemes</central>     <array>       <string>COPY_REVERSED_CLIENT_ID_HERE</string>     </array>   </dict> </array> <!-- Stop of the Google Sign-in Section -->                      

(Run across the documentation for the parcel google_sign_in for more than details.)

Enable the Google Photos Library API

Open up the API screen in the Google Developers console and enable the "Google Photos Library API". (You lot may have to select the Firebase project at the top of the screen first if the "enable" button is disabled.)

Open the OAuth consent screen configuration in the Google Developers console to add together the Google Photos Library API scopes and your email address. (This configuration is required for the OAuth verification review for whatever scopes used by the Google Photos Library API.) You practise not accept to submit for verification, but you need to complete the form and salvage your response. This volition enable the scopes for development and testing.

• Enter the "Application Proper name", for instance Field Trippa Codelab
• Select a "Support e-mail address"
• Select "Add together telescopic", then "manually add paste scopes" to enter the post-obit scopes:

https://www.googleapis.com/auth/photoslibrary https://www.googleapis.com/auth/photoslibrary.sharing          

• Select "Save"
• There is no need to submit for verification to proceed with this codelab. This is only required when launching your application, simply not for personal testing.

Run the app and sign in

Google Sign-In has already been implemented using the google_sign_in flutter package. This package requires the google-services.json or GoogleService-Info.plist files that y'all have already copied into the project.

Run the awarding once more and select "Connect to Google Photos". Yous'll be prompted to select a user account and take the authentication scopes.

If everything has been set up successfully, y'all'll see an empty list on the next screen.

Troubleshooting sign in

If y'all are having trouble signing into the awarding, here are a few things you lot can cheque:

Check that the device has Net connectivity.

If you receive the mistake PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null), brand sure that you have followed all steps in the section Enable the Google Photos Library API. You must add together the Google Photos Library API scopes, enter a support email address and select relieve.

If you receive the error PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 12500: , nothing), make sure that you have added a support electronic mail accost in the Firebase console. Open Firebase console and navigate to the project settings past selecting the gear icon adjacent to your project championship. Select an email address nether support email on the general settings screen.

Check the signing document SHA-1 that is configured in the Firebase console. Does it friction match the output from the keytool command from the first step? Does information technology match the output from the command ./gradlew signingReport when run in the android/ project? Y'all may need to too include the signing certificate SHA-256 in the console.

Check the packet proper name and iOS bundle ID that are configured in the Firebase console. This should be set to com.google.codelab.photos.sharing

Cheque the location of the configuration files y'all have downloaded from the Firebase console. For Android, the file should be copied to android/app/google-service.json. For iOS it should be added to the Runner module.

You may need to enable Google as a sign-in provider for your Firebase project. Open the Firebase panel and navigate to Authentication and Sign-in method. Ensure that Google is enabled.

5. Create an album

Before you implement the offset API call to the Google Photos Library API, permit's walk through the data architecture that the "Field Trippa" app uses.

App Architecture

• Each screen is implemented every bit a separate page:
• The PhotosLibraryApiModel describes the information model of the awarding and abstracts the Google Photos Library API calls away.
• The HTTPS REST calls to the Library API are implemented in the PhotosLibraryApiClient. Each telephone call provided by this form takes a *Request object where yous specify parameters and options for a telephone call.
• The Library API requires user hallmark via OAuth2. The admission token required to be included in all API calls is set up directly by the google_sign_in package on the PhotosLibraryApiClient.

Implement the create albums API phone call

Each trip is stored as an album in Google Photos. When you select the "CREATE A TRIP ALBUM" button, you lot should prompt the user for the name of the trip and create a new album with this proper noun as its title.

In create_trip_page.dart, write the logic that makes a request to the Library API to create the album. Implement the _createTrip(...) method at the stop of the file to telephone call the PhotosLibraryApiModel with the proper noun of the trip the user entered.

lib/pages/create_trip_page.dart

            Future<void> _createTrip(BuildContext context) async {   // Display the loading indicator.   setState(() => _isLoading = true);    await ScopedModel.of<PhotosLibraryApiModel>(context)       .createAlbum(tripNameFormController.text);    // Hide the loading indicator.   setState(() => _isLoading = faux);   Navigator.popular(context); }                      

Implement the call to the Library API that creates the anthology. In the API model, implement the createAlbum(...) method that takes the title of the album equally a parameter. Information technology makes a call to the PhotosLibraryApiClient where the actual Remainder telephone call is made.

lib/model/photos_library_api_model.dart

            Future<Album?> createAlbum(Cord title) async {   final album =       await client!.createAlbum(CreateAlbumRequest.fromTitle(title));   updateAlbums();   return anthology; }                      

Implement the REST telephone call to create the anthology in photos_library_api_client.dart. Remember that the CreateAlbumRequest already contains the title belongings- required for this call.

The following encodes it as JSON and adds the hallmark headers to authorize the request. Finally, render the album created past the API.

lib/photos_library_api/photos_library_api_client.dart

            Time to come<Album> createAlbum(CreateAlbumRequest request) async {   final response = await http.post(     Uri.parse('https://photoslibrary.googleapis.com/v1/albums'),     trunk: jsonEncode(request),     headers: await _authHeaders,   );    printError(response);    render Anthology.fromJson(jsonDecode(response.body)); }                      

Try it out!

Deploy the app and select "+ Create Trip".

6. Only testify your app's albums

You may have noticed that the trips list shows other albums from Google Photos that were non created by your app. (If you practice non have any other albums in Google Photos and want to see this behaviour, open the Google Photos app and create an album. However, this is not required to continue in this codelab.)

Remember that each trip is stored as an album in Google Photos. However, it does not make sense to show any other albums from Google Photos that were created through other ways - Field Trippa should just show trips that the app has created.

You can use the API to restrict the list of trips that are displayed to evidence merely those created by the app.

Modify the method listAlbums() method (Not listSharedAlbums()!) in photos_library_api_client.dart. This method makes the Residue call to retrieve a listing of albums. Add the parameter excludeNonAppCreatedData=true that restricts the returned data to exclude albums that were not created by this app.

lib/photos_library_api/photos_library_api_client.dart

            Futurity<ListAlbumsResponse> listAlbums() async {   final response = expect http.become(         Uri.parse('https://photoslibrary.googleapis.com/v1/albums?'             'pageSize=fifty&excludeNonAppCreatedData=true'),         headers: await _authHeaders);         ... }                      

Try it out!

The first page now only shows trips that were created past the app.

7. Upload Photos

The next stride is to upload photos to a trip. The data is stored in your user'south Google Photos business relationship, so you don't have to worry about storage or processing the data yourself.

Taking a photo in Flutter

Start, implement the method _getImage(...) in the contribute photograph dialog. This method is called when the user clicks the "+ADD PHOTO" button.

The post-obit code uses the image_picker package to take a photograph, update the UI and call the API model to upload the image. (You'll implement this in the next step.) The _getImage(...) call stores an upload token needed later to create the photo in Google Photos.

lib/components/contribute_photo_dialog.sprint

            Future _getImage(BuildContext context) async {   // Use the image_picker parcel to prompt the user for a photo from their   // device.   final pickedImage = await (_imagePicker.getImage(     source: ImageSource.camera,   ));    if (pickedImage == zip) {     // No image selected.     return;   }    last pickedFile = File(pickedImage.path);    // Store the paradigm that was selected.   setState(() {     _image = pickedFile;     _isUploading = true;   });    // Make a request to upload the prototype to Google Photos once it was selected.   final uploadToken = look ScopedModel.of<PhotosLibraryApiModel>(context)       .uploadMediaItem(pickedFile);    setState(() {     // Once the upload procedure has completed, shop the upload token.     // This token is used together with the description to create the media     // item later.     _uploadToken = uploadToken;     _isUploading = faux;   }); }                      

Implement Library API call to upload the prototype to go an upload token

Uploading photos and videos to the Library API is done in two steps:

1. Upload the media bytes to receive an upload token
2. Create a media item in the user's library from the upload token

Implement the REST request to upload media. Yous need to set some headers to specify the type of upload asking and the filename. In the file photos_library_api_client.dart implement the method uploadMediaItem(...) where the file is uploaded, returning the upload token that the HTTP telephone call returns:

lib/photos_library_api/photos_library_api_client.sprint

            Future<Cord> uploadMediaItem(File paradigm) async {   // Become the filename of the paradigm   concluding filename = path.basename(epitome.path);    // Set up up the headers required for this request.   final headers = <String, String>{};   headers.addAll(wait _authHeaders);   headers['Content-type'] = 'awarding/octet-stream';   headers['X-Goog-Upload-Protocol'] = 'raw';   headers['10-Goog-Upload-File-Name'] = filename;    // Make the HTTP request to upload the image. The file is sent in the trunk.   terminal response = expect http.mail service(     Uri.parse('https://photoslibrary.googleapis.com/v1/uploads'),     torso: image.readAsBytesSync(),     headers: look _authHeaders,   );    printError(response);    return response.body; }                      

Next, implement the creation of a media item in the user'southward library from the upload token.

Creating a media particular requires the upload token, an optional clarification (for example, the explanation of the photograph or video) and the optional identifier of an album. Field Trippa always adds the uploaded photo straight to a trip album.

Implement the call to the photos_library_api_client that calls mediaItems.batchCreate with the upload token, description, and album ID. In the API model, implement the method createMediaItem(...) that calls the Library API. This method returns a media item.

(The photos_library_client for this call is already implemented.)

lib/model/photos_library_api_model.dart

            Future<BatchCreateMediaItemsResponse?> createMediaItem(     String uploadToken, String? albumId, Cord? description) async {   // Construct the request with the token, albumId and clarification.   final request =       BatchCreateMediaItemsRequest.inAlbum(uploadToken, albumId, description);    // Make the API call to create the media detail. The response contains a   // media particular.   final response = expect client!.batchCreateMediaItems(asking);    // Print and return the response.   print(response.newMediaItemResults?[0].toJson());   return response; }                      

Attempt it out!

Open the app and select a trip. Click contribute and select a photo that you take taken previously. Enter a clarification and select upload. The image should appear in the trip after a few seconds.

Open the album in the Google Photos app - you'll run into the new paradigm in the album of this trip.

8. Share albums with non-app users

And then far you take implemented the functionality to create a trip and upload photos with a clarification into it. In the backend, each trip is stored as an album in Google Photos.

Next, y'all will share a trip with others who are non using your application.

Each trip is backed by an album in Google Photos, therefore you tin can 'share' an album via a URL and make information technology available to anyone who has this URL.

Albums are shared from the trip folio when a share push button at the top of the album is pressed.

Implement the asynchronous call _shareAlbum(...) that calls to the model to share the anthology and then reloads the displayed album. By reloading the album, the shareInfo belongings is propagated which contains the shareableUrl that you'll show the user in a dialog afterwards.

lib/pages/trip_page.dart

            Futurity<void> _shareAlbum(BuildContext context) async {   String? id = album.id;    if (id == zip) {     // Album is missing an ID.     const snackBar = SnackBar(       duration: Duration(seconds: 3),       content: Text('Could not share album. Try reopening this page.'),     );     ScaffoldMessenger.of(context).showSnackBar(snackBar);     return;   }    // Show the loading indicator   setState(() => _inSharingApiCall = true);    const snackBar = SnackBar(     duration: Duration(seconds: 3),     content: Text('Sharing Album...'),   );   ScaffoldMessenger.of(context).showSnackBar(snackBar);    // Share the anthology and update the local model   await ScopedModel.of<PhotosLibraryApiModel>(context).shareAlbum(id);   final updatedAlbum =       wait ScopedModel.of<PhotosLibraryApiModel>(context).getAlbum(id);    print('Album has been shared.');   setState(() {     album = updatedAlbum;     // Hibernate the loading indicator     _inSharingApiCall = fake;   }); }                      

Implement the method _showShareableUrl(...) that is called when the user clicks the "SHARE WITH ANYONE" button at the top of the page. Kickoff, check if the album has already been shared and call the method _showUrlDialog(...) one time information technology has been shared.

lib/pages/trip_page.sprint

            Futurity<void> _showShareableUrl(BuildContext context) async {   if (album.shareInfo == nothing || album.shareInfo!.shareableUrl == aught) {     impress('Not shared, sharing album starting time.');     // Album is not shared yet, share it outset, then brandish dialog     await _shareAlbum(context);     _showUrlDialog(context);   } else {     // Anthology is already shared, brandish dialog with URL     _showUrlDialog(context);   } }                      

Implement the method _showUrlDialog(...) that shows the shareableUrl in a dialog.

lib/pages/trip_page.dart

            void _showUrlDialog(BuildContext context) {   print('This is the shareableUrl:\north${album.shareInfo!.shareableUrl}');   _showShareDialog(       context,       'Share this URL with anyone. '       'Anyone with this URL can access all items.',       anthology.shareInfo!.shareableUrl!); }                      

Try information technology out!

The app just lists trips that are non shared yet on the primary screen. Don't worry, we'll implement that in the next step. For at present, you tin can simply create a new trip if you navigate abroad from the screen.

Open the app and select a trip. Select "SHARE WITH ANYONE" at the superlative of the screen and open the returned URL in your browser. (Tip: the URL is too printed to the log, so you can easily copy information technology on your computer. In Android Studio, the log is displayed in the "Run" tab.)

ix. Share albums inside your app

In Google Photos, albums can be shared via a URL that anyone with access to the URL tin access. Through the Library API you can also share albums via share tokens. A share token is a string that is used inside your awarding to join users to a shared anthology via the API.

The process for sharing an anthology by your awarding via the Library API looks like this:

1. User A logs into your application and authorizes the Library API
2. Create the album
3. Share the anthology using the identifier of the anthology
4. Transfer the share token to another User

The joining process is similar:

5. User B logs into your awarding and authorizes the Library API
6. Retrive the share token for the album the user should join
7. Join the anthology using the share token

Shared albums are shown inside Google Photos on the "sharing" tab.

In the previous step you lot already implemented the method _shareAlbum(...) that shares an album. The shareInfo property besides contains the "share token" that volition be shown on screen.

On the trip page, implement the method _showShareToken(...) that is called when the user presses the "SHARE WITH FIELD TRIPPA" button on screen.

lib/pages/trip_page.sprint

            Future<void> _showShareToken(BuildContext context) async {   if (album.shareInfo == null) {     print('Not shared, sharing album first.');     // Album is not shared however, share it first, and so display dialog     await _shareAlbum(context);     _showTokenDialog(context);   } else {     // Album is already shared, display dialog with token     _showTokenDialog(context);   } }                      

Adjacent, implement the display of the "share token" in the method _showTokenDialog(...). The token is part of the shareInfo holding of an album.

lib/pages/trip_page.dart

            void _showTokenDialog(BuildContext context) {   print('This is the shareToken:\northward${anthology.shareInfo!.shareToken}');   _showShareDialog(       context, 'Employ this token to share', album.shareInfo!.shareToken!); }                      

The application currently only lists albums that are owned by the user, but not shared albums.

Only albums that the user has created or explicitly added to their Google Photos library are shown on the "Albums" screen inside the Google Photos app. Only these albums are returned when calling albums.list in the Library API. All the same, in our app the user tin can bring together other user'due south shared albums, which are only returned in the call to list shared albums. Yous demand to modify the mode the list of trips (albums) are retrieved from the Library API to include both owned and shared albums.

Albums are loaded and cached in the API Model. Change the implementation of updateAlbums() in the model to load albums and shared albums, before storing them as i listing.

This implementation uses multiple Futures to listing the albums asynchronously before combining them into the list of cached albums. Delete the quondam implementation and annotate out the new code.

lib/model/photos_library_api_model.dart

            void updateAlbums() async {   // Reset the flag before loading new albums   hasAlbums = false;   // Clear all albums   _albums.articulate();   // Skip if not signed in   if (!isLoggedIn()) {     return;   }   // Add together albums from the user'due south Google Photos account   // var ownedAlbums = look _loadAlbums();   // if (ownedAlbums != null) {   //   _albums.addAll(ownedAlbums);   // }    // Load albums from endemic and shared albums   final listing = await Future.wait([_loadSharedAlbums(), _loadAlbums()]);    _albums.addAll(list.expand((a) => a ?? []));    notifyListeners();   hasAlbums = true; }                      

Y'all can join users of your application to an album past using the share token. This is washed through a uncomplicated text dialog in this codelab.

Implement the _joinTrip method on the bring together trip page that calls the API model with the share token the user has entered. First, brandish the loading indicator, then make the call to join the shared anthology with the input from the text form, before hiding the loading indicator and returning back to the previous screen.

lib/pages/join_trip_page.dart

            Future<void> _joinTrip(BuildContext context) async {   // Show loading indicator   setState(() => _isLoading = true);    // Call the API to join an album with the entered share token   look ScopedModel.of<PhotosLibraryApiModel>(context)       .joinSharedAlbum(shareTokenFormController.text);    // Hide loading indicator   setState(() => _isLoading = imitation);    // Render to the previous screen   Navigator.popular(context); }                      

Endeavour it out!

You demand a second device or emulator with a dissimilar user account to endeavor out this function of the codelab.

Create and share a trip under one user, and then select the "SHARE IN FIELD TRIPPA" choice to call up the share token. Copy this share token to the other device or emulator and enter information technology via the "JOIN A TRIP ALBUM" option on the abode folio. (Tip: The clipboard betwixt your emulators and your host computer is shared.)

Existent world implementation tips

When you implement sharing in a real world application (and not a codelab), you lot should think carefully about how you tin can utilise share tokens to join users to albums. Consider storing them in your secure backend and using your relationships between users to create and join albums.

For example - a soccer lodge meet up awarding could keep track of attendees to item scheduled events and merely bring together the attendees to the anthology later prompting them.

Before making whatsoever changes in your user'south Google Photos account, information technology is important to requite your users notice and inquire for consent. Review the Google Photos Library API UX guidelines for more data.

x. Summary

What y'all have congenital

• Implemented sharing functionality into your application, backed by Google Photos
• Create your ain photograph and video sharing experiences on acme of the Google Photos Library API, without having to worry about infrastructure or storage
• Using the sharing functionality that is function of the API in interesting and novel ways to share content directly to your users.
• Used some key parts of the Library API:
• Created new albums and uploaded new photos
• Listed shared albums, limited to albums created by your application

Where to go next

See the developer documentation for the Google Photos APIs at https://developers.google.com/photos to notice out more than about sharing media and other parts of the Library API. For instance smart content filters powered by machine learning to help you discover the right photos and videos.

When you are getting ready to launch your integration, join the Google Photos partner plan.

Don't forget to review the UX guidelines and technical best practices. To help you become started, client libraries are also bachelor for some languages.

bolligerjusholl44.blogspot.com

Source: https://codelabs.developers.google.com/codelabs/google-photos-sharing/

Share this post