Mem-build aplikasi Berbagi Foto dengan Google Foto dan Flutter

Yang akan Anda build

Dalam codelab ini, Anda akan mem-build aplikasi karyawisata, Field Trippa, yang memungkinkan pengguna berbagi foto.

Pelajari cara menggunakan Google Photos Library API untuk mendukung pengalaman berbagi media di aplikasi Anda sendiri.

Aplikasi untuk codelab ini di-build menggunakan Flutter, toolkit UI Google untuk mem-build aplikasi yang cantik dan dikompilasi secara native untuk seluler, web, dan desktop dari satu codebase. Pelajari lebih lanjut di https://flutter.dev.

6571e359f222ccf6.png

Yang akan Anda pelajari

Yang Anda butuhkan

  • Lingkungan pengembangan Flutter
  • Dua akun pengguna Google yang disiapkan di emulator atau perangkat berbeda yang memiliki akses ke Google Foto, sehingga Anda dapat menguji coba berbagi antar pengguna
  • Perangkat Android, perangkat iOS fisik atau emulator - simulator iOS tidak didukung karena tidak memiliki hardware kamera

Dalam codelab ini, Anda akan mem-build aplikasi untuk berbagi foto tamasya atau karyawisata, di-build menggunakan Google Photos Library API.

Pengguna login menggunakan Login dengan Google dan mengizinkan aplikasi menggunakan Google Photos Library API.

Kemudian, pengguna dapat membuat trip untuk mengupload foto dengan deskripsi. Setiap trip dapat dibagikan kepada anggota lain dari aplikasi, yang juga dapat memberikan kontribusi foto.

146953eced1f4f92.png

Pada dasarnya, setiap trip disimpan sebagai album bersama dalam Google Foto. Aplikasi menangani proses berbagi dan upload ke album ini, tetapi Anda juga dapat membagikan album kepada orang lain yang tidak memiliki aplikasi tersebut secara langsung melalui URL ke Google Foto.

c4af82aa4bf8cc31.png

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin melihat ringkasan yang bagus. Saya sedikit paham soal topik ini, tetapi saya perlu mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang sesuatu yang spesifik.

b2f84ff91b0e1396.pngDownload kode sumber untuk codelab ini:

Download kode sumber Jelajahi di GitHub

(Kode aplikasi awal tersedia di cabang main di repositori.)

Ekstrak file zip yang didownload. Tindakan ini akan membuat folder root, photos-sharing-main, yang berisi semua kode dan resource yang Anda butuhkan untuk memulai.

Buka folder yang diekstrak di Flutter IDE pilihan Anda, misalnya, VSCode atau Android Studio dengan plugin Dart dan Flutter yang terinstal.

Kode Implementasi Akhir

Link berikut mengarah ke versi akhir aplikasi yang telah diimplementasikan sepenuhnya. Anda dapat menggunakan ini jika mengalami masalah atau untuk membandingkan implementasi Anda:

Download kode sumber akhir Jelajahi kode sumber akhir di GitHub

(Kode aplikasi akhir tersedia di cabang final di repositori.)

Ikuti langkah berikut untuk menyiapkan lingkungan pengembangan Anda, jika Anda belum mengembangkan dengan Flutter sebelumnya.

Untuk menjalankan aplikasi "Field Trippa", klik tombol "jalankan" di IDE pengembangan Anda, atau gunakan perintah berikut dari direktori utama kode sumber:

flutter run

Anda akan melihat layar "Hubungkan dengan Google Foto":

6bfc7e3fab746b8d.png

Google Photos Library API mewajibkan Anda untuk mengautentikasi pengguna Anda menggunakan OAuth 2.0. Pengguna login ke aplikasi dan memberi otorisasi untuk berinteraksi dengan API atas nama mereka.

Anda dapat menemukan beberapa tips pemecahan masalah tambahan di bagian akhir langkah ini.

Membuat project Firebase baru dan mendaftarkan aplikasi Anda

b2f84ff91b0e1396.png Buka Firebase console, lalu pilih "+ Tambahkan Project". Masukkan nama project, lalu pilih "Buat Project" untuk melanjutkan. Jangan ikuti langkah lain apa pun di Firebase console. Sebagai gantinya, kembali ke codelab ini dan lanjutkan ke bagian "Android" atau "iOS" di bawah untuk mengonfigurasi aplikasi.

Khusus Android: Jika Anda menjalankan aplikasi di Android, daftarkan aplikasi Android:

b2f84ff91b0e1396.png Klik ikon Android untuk membuka layar pendaftaran aplikasi Android.

b2f84ff91b0e1396.png Untuk paket, masukkan: com.google.codelab.photos.sharing

b2f84ff91b0e1396.png Ambil sertifikat penandatanganan SHA-1 dari komputer Anda:

Di Windows, jalankan perintah berikut:

keytool -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -list -v -storepass android

Di Mac atau Linux, jalankan perintah berikut:

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

b2f84ff91b0e1396.png Klik "daftarkan aplikasi" untuk melanjutkan.

b2f84ff91b0e1396.png Download file google-service.json ke komputer Anda dan pindahkan ke direktori "android/app/". (Tips: Di Android Studio, Anda dapat menarik file yang didownload langsung ke lokasi yang tepat di panel samping project.)

File ini berisi konfigurasi project untuk Firebase dan project Google Developers yang baru Anda siapkan.

(Lihat dokumentasi package google_sign_in untuk detailnya.)

Anda tidak perlu menyelesaikan langkah lain apa pun di Firebase console. Firebase SDK telah ditambahkan ke aplikasi.

Khusus iOS: Jika Anda menjalankan aplikasi di iOS, daftarkan aplikasi iOS di Firebase:

b2f84ff91b0e1396.png Klik ikon iOS untuk membuka layar pendaftaran aplikasi iOS.

b2f84ff91b0e1396.png Untuk ID paket iOS, masukkan: com.google.codelab.photos.sharing

b2f84ff91b0e1396.png Klik "berikutnya" untuk melanjutkan.

b2f84ff91b0e1396.png Download file GoogleService-Info.plist ke komputer Anda.

b2f84ff91b0e1396.png Buka project Flutter di Xcode

b2f84ff91b0e1396.png Klik kanan pada direktori Runner, pilih "Tambahkan File ke Runner", lalu pilih file GoogleService-Info.plist yang telah didownload untuk ditambahkan ke modul Runner.

b2f84ff91b0e1396.png Edit kode sumber file ios/Runner/Info.plist, lalu tambahkan nilai properti REVERSED_CLIENT_ID dari file GoogleService-Info.plist. Ganti entri di bagian bawah file:

ios/Runner/Info.plist

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

(Lihat dokumentasi package google_sign_in untuk detail selengkapnya.)

Mengaktifkan Google Photos Library API

b2f84ff91b0e1396.png Buka layar API di Google Developers Console, lalu aktifkan "Google Photos Library API". (Anda mungkin harus memilih project Firebase di bagian atas layar terlebih dahulu jika tombol "aktifkan" nonaktif.)

b2f84ff91b0e1396.png Buka konfigurasi layar izin OAuth di Google Developers Console untuk menambahkan cakupan Google Photos Library API dan alamat email Anda. (Konfigurasi ini diperlukan untuk tinjauan verifikasi OAuth untuk cakupan apa pun yang digunakan oleh Google Photos Library API.) Anda tidak harus mengirimkan verifikasi, tetapi Anda harus menyelesaikan formulir dan mengirim respons Anda. Ini akan memungkinkan cakupan untuk pengembangan dan pengujian.

  • Masukkan "Nama Aplikasi", misalnya Field Trippa Codelab
  • Pilih "Alamat email dukungan"
  • Pilih "Tambahkan cakupan", lalu "tambahkan cakupan secara manual" untuk memasukkan cakupan berikut:
https://www.googleapis.com/auth/photoslibrary
https://www.googleapis.com/auth/photoslibrary.sharing
  • Pilih "Simpan"
  • Anda tidak harus mengirimkan verifikasi untuk melanjutkan codelab ini. Ini hanya diperlukan saat meluncurkan aplikasi Anda, tidak untuk pengujian personal.

Menjalankan aplikasi dan login

Login dengan Google telah diimplementasikan menggunakan paket flutter google_sign_in. Paket ini memerlukan file google-services.json atau GoogleService-Info.plist yang telah Anda salin ke project.

b2f84ff91b0e1396.png Jalankan kembali aplikasi, lalu pilih "Hubungkan dengan Google Foto". Anda akan diminta untuk memilih akun pengguna dan menerima cakupan autentikasi.

Jika semua telah berhasil disiapkan, Anda akan melihat daftar kosong di layar berikutnya.

9f3bcae1f8e7cd0d.png

Memecahkan masalah login

Jika Anda mengalami masalah login ke aplikasi, berikut beberapa hal yang dapat Anda periksa:

b2f84ff91b0e1396.png Periksa apakah perangkat memiliki koneksi internet.

b2f84ff91b0e1396.png Jika Anda menerima error PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null), pastikan bahwa Anda telah mengikuti semua langkah di bagian Mengaktifkan Google Photos Library API. Anda harus menambahkan cakupan Google Photos Library API, memasukkan alamat email dukungan, lalu pilih simpan.

b2f84ff91b0e1396.png Jika Anda menerima error r PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 12500: , null), pastikan bahwa Anda telah menambahkan alamat email dukungan di Firebase console. Buka Firebase console, lalu pilih setelan project dengan memilih ikon roda gigi di samping judul project Anda. Pilih alamat email di bagian email dukungan di layar setelan umum.

b2f84ff91b0e1396.png Periksa sertifikat penandatanganan SHA-1 yang dikonfigurasi di Firebase console. Apakah sesuai dengan output dari perintah keytool dari langkah pertama? Apakah sesuai dengan output dari perintah ./gradlew signingReport saat dijalankan di project android/? Anda mungkin juga perlu menyertakan sertifikat penandatanganan SHA-256 di konsol.

b2f84ff91b0e1396.png Periksa nama paket dan ID paket iOS yang dikonfigurasi di Firebase console. Ini harus disetel ke com.google.codelab.photos.sharing

b2f84ff91b0e1396.png Periksa lokasi file konfigurasi yang telah didownload dari Firebase console. Untuk Android, file harus disalin ke android/app/google-service.json. Untuk iOS, file harus ditambahkan ke modul Runner.

b2f84ff91b0e1396.png Anda mungkin perlu mengaktifkan Google sebagai penyedia login untuk project Firebase Anda. Buka Firebase console, lalu buka Autentikasi dan Metode login. Pastikan bahwa Google diaktifkan.

Sebelum Anda mengimplementasikan panggilan API pertama ke Google Photos Library API, mari kita lihat arsitektur data yang digunakan "Field Trippa".

Arsitektur Aplikasi

  • Setiap layar diimplementasikan sebagai halaman terpisah: 71b9a588fb1bbb41.png
  • PhotosLibraryApiModel mendeskripsikan model data aplikasi dan memisahkan panggilan Google Photos Library API.
  • Panggilan REST HTTPS ke Library API diimplementasikan di PhotosLibraryApiClient. Setiap panggilan yang diberikan kelas ini mengambil objek *Request tempat Anda menentukan parameter dan opsi untuk panggilan.
  • Library API memerlukan autentikasi pengguna melalui OAuth2. Token akses yang perlu disertakan di semua panggilan API disetel secara langsung oleh paket google_sign_in di PhotosLibraryApiClient.

Mengimplementasikan panggilan API buat album

Setiap perjalanan disimpan sebagai album di Google Foto Saat Anda memilih tombol "BUAT ALBUM PERJALANAN", Anda harus meminta pengguna untuk memberikan nama perjalanan dan membuat album baru dengan nama tersebut sebagai judulnya.

b2f84ff91b0e1396.png Dalam create_trip_page.dart, tulis logika yang membuat permintaan ke Library API untuk membuat album. Implementasikan metode _createTrip(...) di akhir file untuk memanggil PhotosLibraryApiModel dengan nama perjalanan yang dimasukkan pengguna.

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 = false);
  Navigator.pop(context);
}

b2f84ff91b0e1396.png Implementasikan panggilan ke Library API yang membuat album. Dalam model API, implementasikan metode createAlbum(...) yang menetapkan judul album sebagai parameter. Metode itu melakukan panggilan ke PhotosLibraryApiClient tempat panggilan REST yang sebenarnya dilakukan.

lib/model/photos_library_api_model.dart

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

b2f84ff91b0e1396.png Implementasikan panggilan REST untuk membuat album dalam photos_library_api_client.dart. Perlu diingat bahwa CreateAlbumRequest sudah berisi properti title yang diperlukan untuk panggilan ini.

Panggilan berikut mengenkodenya sebagai JSON dan menambahkan header autentikasi untuk mengizinkan permintaan. Terakhir, menampilkan album yang dibuat oleh API.

lib/photos_library_api/photos_library_api_client.dart

Future<Album> createAlbum(CreateAlbumRequest request) async {
  final response = await http.post(
    Uri.parse('https://photoslibrary.googleapis.com/v1/albums'),
    body: jsonEncode(request),
    headers: await _authHeaders,
  );

  printError(response);

  return Album.fromJson(jsonDecode(response.body));
}

Cobalah!

b2f84ff91b0e1396.png Deploy aplikasi dan pilih "+ Buat Perjalanan".

2f0bec785bec1710.gif

Anda mungkin menemukan bahwa daftar perjalanan menampilkan album lain dari Google Foto yang tidak dibuat oleh aplikasi Anda. (Jika Anda tidak memiliki album lain di Google Foto dan ingin melihat perilaku ini, buka aplikasi Google Foto dan buat album. Namun, tindakan ini tidak diperlukan untuk melanjutkan codelab ini.)

Ingat bahwa setiap perjalanan disimpan sebagai album di Google Foto. Namun, tidak masuk akal untuk menampilkan album lain dari Google Foto yang dibuat melalui tempat lain - Field Trippa seharusnya hanya menampilkan perjalanan yang dibuat oleh aplikasi.

Anda dapat menggunakan API untuk membatasi daftar perjalanan yang ditampilkan untuk hanya menampilkan album yang dibuat oleh aplikasi.

b2f84ff91b0e1396.png Ubah metode listAlbums() (BUKAN listSharedAlbums()!) dalam photos_library_api_client.dart. Metode ini membuat panggilan REST mengambil daftar album. Tambahkan parameter excludeNonAppCreatedData=true yang membatasi data yang ditampilkan untuk mengecualikan album yang tidak dibuat oleh aplikasi ini.

lib/photos_library_api/photos_library_api_client.dart

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

       ...
}

Cobalah!

Halaman pertama kini hanya menampilkan perjalanan yang dibuat oleh aplikasi.

c7c20b76dcbfbfea.png

Langkah berikutnya adalah mengupload foto ke perjalanan. Data disimpan di akun Google Foto pengguna Anda, sehingga Anda tidak perlu khawatir terhadap penyimpanan atau untuk memproses data sendiri.

Mengambil foto di Flutter

b2f84ff91b0e1396.png Pertama, implementasikan metode _getImage(...) dalam file contribute photo dialog. Metode ini dipanggil jika pengguna mengklik tombol "+TAMBAHKAN FOTO".

Kode berikut menggunakan paket image_picker untuk mengambil foto, mengupdate UI dan memanggil model API untuk mengupload foto. (Anda akan mengimplementasikan kode ini di langkah berikutnya.) Panggilan _getImage(...) menyimpan token upload yang nantinya diperlukan untuk membuat foto di Google Foto.

lib/components/contribute_photo_dialog.dart

Future _getImage(BuildContext context) async {
  // Use the image_picker package to prompt the user for a photo from their
  // device.
  final pickedImage = await _imagePicker
      .getImage(
        source: ImageSource.camera,
      );
  final pickedFile = File(pickedImage.path);

  // Store the image that was selected.
  setState(() {
    _image = pickedFile;
    _isUploading = true;
  });

  // Make a request to upload the image to Google Photos once it was selected.
  final uploadToken = await ScopedModel.of<PhotosLibraryApiModel>(context)
      .uploadMediaItem(pickedFile);

  setState(() {
    // Once the upload process has completed, store the upload token.
    // This token is used together with the description to create the media
    // item later.
    _uploadToken = uploadToken;
    _isUploading = false;
  });
}

Mengimplementasikan panggilan API Library untuk mengupload foto agar mendapatkan token upload

Proses upload foto dan video ke Library API dilakukan dalam dua langkah:

  1. Upload byte media untuk menerima token upload
  2. Buat item media di galeri foto pengguna dari token upload

b2f84ff91b0e1396.png Implementasikan permintaan REST untuk mengupload media. Anda perlu menyetel beberapa header untuk menentukan jenis permintaan upload dan nama file. Dalam file photos_library_api_client.dart, implementasikan metode uploadMediaItem(...) tempat file diupload, menampilkan token upload yang ditampilkan panggilan HTTP:

lib/photos_library_api/photos_library_api_client.dart

Future<String> uploadMediaItem(File image) async {
  // Get the filename of the image
  final filename = path.basename(image.path);

  // Set up the headers required for this request.
  final headers = <String, String>{};
  headers.addAll(await _authHeaders);
  headers['Content-type'] = 'application/octet-stream';
  headers['X-Goog-Upload-Protocol'] = 'raw';
  headers['X-Goog-Upload-File-Name'] = filename;

  // Make the HTTP request to upload the image. The file is sent in the body.
  final response = await http.post(
    Uri.parse('https://photoslibrary.googleapis.com/v1/uploads'),
    body: image.readAsBytesSync(),
    headers: await _authHeaders,
  );

  printError(response);

  return response.body;
}

Membuat item media dari token upload

Berikutnya, implementasikan pembuatan item media di galeri foto pengguna dari token upload.

Pembuatan item media memerlukan token upload, deskripsi opsional (misalnya teks dari foto atau video), dan ID opsional album. Field Trippa selalu menambahkan foto yang diupload secara langsung ke album perjalanan.

b2f84ff91b0e1396.png Implementasikan panggilan ke photos_library_api_client yang memanggil mediaItems.batchCreate dengan token upload, deskripsi, dan ID album. Dalam model API, implementasikan metode createMediaItem(...) yang memanggil Library API. Metode ini menampilkan item media

(photos_library_client untuk panggilan ini sudah diimplementasikan.)

lib/model/photos_library_api_model.dart

Future<BatchCreateMediaItemsResponse> createMediaItem(
    String uploadToken, String albumId, String description) async {
  // Construct the request with the token, albumId and description.
  final request =
      BatchCreateMediaItemsRequest.inAlbum(uploadToken, albumId, description);

  // Make the API call to create the media item. The response contains a
  // media item.
  final response = await client.batchCreateMediaItems(request);

  // Print and return the response.
  print(response.newMediaItemResults[0].toJson());
  return response;
}

Cobalah!

b2f84ff91b0e1396.pngBuka aplikasi, lalu pilih perjalanan. Klik berikan kontribusi, lalu pilih foto yang sudah Anda ambil sebelumnya. Masukkan deskripsi dan pilih upload. Seharusnya foto akan muncul dalam perjalanan setelah beberapa detik.

b2f84ff91b0e1396.png Buka album di aplikasi Google Foto - Anda akan melihat foto baru di album perjalanan ini.

526ede994fcd5d8d.gif

Sejauh ini Anda telah mengimplementasikan fungsi untuk membuat perjalanan dan mengupload foto beserta deskripsinya. Di backend, setiap perjalanan disimpan sebagai album di Google Foto.

Berikutnya, Anda akan membagikan perjalanan kepada orang lain yang tidak menggunakan aplikasi Anda.

Setiap perjalanan didukung oleh album di Google Foto, dengan demikian Anda dapat ‘membagikan' album melalui URL dan membuatnya tersedia untuk siapa pun yang memiliki URL ini.

Mengimplementasikan panggilan untuk membagikan album

Album dibagikan dari halaman perjalanan saat tombol bagikan di atas album ditekan.

b2f84ff91b0e1396.png Implementasikan panggilan asinkron _shareAlbum(...) yang memanggil model untuk membagikan album kemudian memuat ulang album yang ditampilkan. Dengan memuat ulang album, properti shareInfo akan diterapkan, yang berisi shareableUrl yang nantinya akan Anda tampilkan kepada pengguna dalam dialog.

lib/pages/trip_page.dart

Future<void> _shareAlbum(BuildContext context) async {
  // Show the loading indicator
  setState(() => _inSharingApiCall = true);

  const snackBar = SnackBar(
    duration: Duration(seconds: 3),
    content: Text('Sharing Album...'),
  );
  Scaffold.of(context).showSnackBar(snackBar);

  // Share the album and update the local model
  await ScopedModel.of<PhotosLibraryApiModel>(context).shareAlbum(album.id);
  final updatedAlbum =
      await ScopedModel.of<PhotosLibraryApiModel>(context).getAlbum(album.id);

  print('Album has been shared.');
  setState(() {
    album = updatedAlbum;
    // Hide the loading indicator
    _inSharingApiCall = false;
  });
}

b2f84ff91b0e1396.png Implementasikan metode _showShareableUrl(...) yang akan dipanggil saat pengguna mengklik tombol "BAGIKAN KEPADA SIAPA SAJA " di atas halaman. Pertama, periksa apakah album sudah dibagikan, dan panggil metode _showUrlDialog(...) setelah album dibagikan.

lib/pages/trip_page.dart

Future<void> _showShareableUrl(BuildContext context) async {
  if (album.shareInfo == null || album.shareInfo.shareableUrl == null) {
    print('Not shared, sharing album first.');
    // Album is not shared yet, share it first, then display dialog
    await _shareAlbum(context);
    _showUrlDialog(context);
  } else {
    // Album is already shared, display dialog with URL
    _showUrlDialog(context);
  }
}

b2f84ff91b0e1396.png Implementasikan metode _showUrlDialog(...) yang menampilkan shareableUrl dalam dialog.

lib/pages/trip_page.dart

void _showUrlDialog(BuildContext context) {
  print('This is the shareableUrl:\n${album.shareInfo.shareableUrl}');

  _showShareDialog(
      context,
      'Share this URL with anyone. '
      'Anyone with this URL can access all items.',
      album.shareInfo.shareableUrl);
}

Cobalah!

Aplikasi hanya mencantumkan perjalanan yang belum dibagikan di layar utama. Jangan khawatir, kami akan mengimplementasikannya di langkah berikutnya. Untuk saat ini, Anda cukup dapat membuat perjalanan baru jika Anda beranjak dari layar.

b2f84ff91b0e1396.png Buka aplikasi dan pilih perjalanan. Pilih "BAGIKAN KEPADA SIAPA SAJA" di bagian atas layar, lalu buka URL yang ditampilkan di browser Anda. (Tips: URL juga dicetak ke log, jadi Anda dapat menyalinnya ke komputer dengan mudah. Di Android Studio, log ditampilkan di tab "Jalankan".)

1d1a40c1078e4221.gif

Di Google Foto, album dapat dibagikan melalui URL yang dapat diakses oleh siapa pun yang memiliki URL. Melalui Library API Anda juga dapat membagikan album menggunakan token berbagi. Token berbagi adalah string yang digunakan dalam aplikasi Anda yang menggabungkan pengguna ke album bersama melalui API.

Proses membagikan album dari aplikasi melalui Library API akan terlihat seperti ini:

  1. Pengguna A login ke aplikasi Anda dan memberi otorisasi Library API
  2. Membuat album
  3. Membagikan album menggunakan ID album
  4. Mentransfer token berbagi kepada Pengguna lain

Proses bergabung juga mirip:

  1. Pengguna B login ke aplikasi Anda dan memberi otorisasi Library API
  2. Mendapatkan token berbagi untuk album tempat pengguna akan bergabung
  3. Bergabung ke album menggunakan token berbagi

Album yang dibagikan akan ditampilkan dalam Google Foto di tab "berbagi".

Menampilkan token berbagi

Di langkah sebelumnya Anda telah mengimplementasikan metode _shareAlbum(...) yang membagikan album. Properti shareInfo juga berisi "token berbagi" yang akan ditampilkan di layar.

b2f84ff91b0e1396.png Di halaman perjalanan, implementasikan metode _showShareToken(...) yang akan dipanggil saat pengguna menekan tombol "BAGIKAN DENGAN FIELD TRIPPA" di layar.

lib/pages/trip_page.dart

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

Berikutnya, implementasikan tampilan "token berbagi" dalam metode _showTokenDialog(...). Token tersebut adalah bagian dari properti shareInfo album.

lib/pages/trip_page.dart

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

Mencantumkan album bersama

Aplikasi saat ini hanya mencantumkan album yang dimiliki pengguna, bukan album bersama.

Hanya album yang dibuat pengguna atau ditambahkan secara eksplisit ke galeri Google Foto mereka yang ditampilkan di layar "Album" dalam aplikasi Google Foto. Hanya album ini yang ditampilkan saat memanggil albums.list dalam Library API. Namun, di aplikasi kami, pengguna dapat bergabung ke album bersama pengguna lain, yang hanya ditampilkan dalam panggilan untuk mencantumkan album bersama. Anda harus mengubah cara daftar perjalanan (album) diambil dari Library API untuk menyertakan album bersama dan yang dimiliki.

b2f84ff91b0e1396.png Album dimuat dan di-cache dalam Model API. Ubah implementasi updateAlbums() dalam model untuk memuat album dan album bersama, sebelum disimpan sebagai satu daftar.

Implementasi ini menggunakan banyak Futures untuk mencantumkan album secara asinkron sebelum digabungkan ke dalam daftar album yang di-cache. Hapus implementasi yang lama dan beri komentar pada kode yang baru.

lib/model/photos_library_api_model.dart

void updateAlbums() async {
  // Reset the flag before loading new albums
  hasAlbums = false;
  // Clear all albums
  _albums.clear();
  // Skip if not signed in
  if (!isLoggedIn()) {
    return;
  }
  // Add albums from the user's Google Photos account
  // var ownedAlbums = await _loadAlbums();
  // if (ownedAlbums != null) {
  //   _albums.addAll(ownedAlbums);
  // }

  // Load albums from owned and shared albums
  final list = await Future.wait([_loadSharedAlbums(), _loadAlbums()]);

  _albums.addAll(list.expand((a) => a ?? []));

  notifyListeners();
  hasAlbums = true;
}

Bergabung ke album bersama

Anda dapat menggabungkan pengguna aplikasi Anda ke album dengan menggunakan token berbagi. Tindakan ini dilakukan melalui dialog teks sederhana dalam codelab ini.

b2f84ff91b0e1396.png Implementasikan metode _joinTrip di halaman bergabung ke perjalanan yang memanggil model API dengan token berbagi yang dimasukkan pengguna. Pertama, tampilkan indikator pemuatan, lalu lakukan panggilan untuk bergabung ke album bersama dengan input dari formulir teks, sebelum menyembunyikan indikator pemuatan dan menampilkan kembali ke layar sebelumnya.

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
  await ScopedModel.of<PhotosLibraryApiModel>(context)
      .joinSharedAlbum(shareTokenFormController.text);

  // Hide loading indicator
  setState(() => _isLoading = false);

  // Return to the previous screen
  Navigator.pop(context);
}

Cobalah!

Anda memerlukan perangkat kedua atau emulator dengan akun pengguna yang berbeda untuk mencoba bagian codelab ini.

b2f84ff91b0e1396.png Buat dan bagikan perjalanan menggunakan salah satu akun pengguna, lalu pilih opsi "BAGIKAN DI FIELD TRIPPA" untuk mendapatkan token berbagi. Salin token berbagi ini ke emulator atau perangkat lain, lalu masukkan token melalui opsi "BERGABUNG KE ALBUM PERJALANAN" di halaman beranda. (Tips: Papan klip dibagikan antara emulator dan komputer host Anda.)

8043086cc00eaa16.gif 55c1e75014d4d2a4.gif

Tips implementasi di aplikasi sebenarnya

Saat Anda mengimplementasikan proses berbagi di aplikasi sebenarnya (dan bukan codelab), sebaiknya pikirkan dengan hati-hati cara Anda dapat menggunakan token berbagi untuk menggabungkan pengguna ke album. Pertimbangkan untuk menyimpan di backend Anda yang aman dan menggunakan hubungan antara pengguna untuk membuat dan menggabungkan album.

Misalnya - aplikasi pertemuan klub sepak bola dapat melacak tamu acara terjadwal tertentu dan hanya menggabungkan tamu ke album setelah meminta mereka.

Sebelum membuat perubahan apa pun dalam akun Google Foto pengguna Anda, penting untuk memberikan notifikasi kepada pengguna dan meminta izin. Tinjau pedoman Google Photos Library API UX untuk informasi selengkapnya.

Yang telah Anda build

  • Fungsi berbagi yang diimplementasikan ke aplikasi Anda, didukung oleh Google Foto
  • Membuat pengalaman berbagi foto dan video milik Anda sendiri di atas Google Photos Library API, tanpa perlu khawatir terhadap infrastruktur atau penyimpanan
  • Menggunakan fungsi berbagi yang merupakan bagian dari API dengan cara yang baru dan menarik untuk membagikan konten langsung kepada pengguna.
  • Menggunakan beberapa bagian penting dari Library API:
  • Membuat album baru dan mengupload foto baru
  • Mencantumkan album bersama, yang dibatasi pada album yang dibuat oleh aplikasi Anda

Langkah selanjutnya

Lihat dokumentasi developer untuk API Google Foto di https://developers.google.com/photos untuk mencari tahu lebih lanjut berbagi media dan bagian lain dari Library API. Misalnya, filter konten pintar dengan teknologi machine learning untuk membantu Anda menemukan foto dan video yang tepat.

Saat Anda bersiap untuk meluncurkan integrasi Anda, ikuti program partner Google Foto.

Jangan lupa untuk meninjau pedoman UX dan praktik teknis terbaik. Untuk membantu Anda memulai, library klien juga tersedia untuk beberapa bahasa.