Trong bài viết này, bạn sẽ xây dựng một ứng dụng thực hành, Field Trippa, cho phép người dùng chia sẻ ảnh.
Tìm hiểu cách sử dụng API Thư viện Google Photos để khôi phục trải nghiệm chia sẻ phương tiện trong ứng dụng của riêng bạn.
Ứng dụng cho codelab này được xây dựng bằng Flutter, bộ công cụ UI của Google để xây dựng các ứng dụng đẹp, được biên dịch nguyên bản cho thiết bị di động, web và máy tính để bàn từ một cơ sở mã duy nhất. Tìm hiểu thêm tại https://flutter.dev.
Những gì bạn sẽ được học
- Cách sử dụng API Thư viện Google Photos để tải lên phương tiện và chia sẻ album
- Cách sử dụng Đăng nhập bằng Google Flutter
- Cách thực hiện lệnh gọi API Google từ Flutter
Những gì bạn cần
- Môi trường phát triển Flutter
- Hai tài khoản người dùng Google được thiết lập trên các trình giả lập hoặc thiết bị khác nhau có quyền truy cập vào Google Photos, vì vậy bạn có thể kiểm tra tính năng chia sẻ giữa những người dùng
- Thiết bị Android, trình mô phỏng hoặc thiết bị iOS thực – trình mô phỏng iOS không được hỗ trợ do thiếu phần cứng máy ảnh
Tổng quan về ứng dụng hình ảnh – “Field Trip”
Trong bài này, bạn sẽ xây dựng một ứng dụng để chia sẻ ảnh cho một chuyến du ngoạn hoặc thực địa, được xây dựng bằng cách sử dụng API Thư viện Ảnh của Google.
Người dùng đăng nhập bằng Đăng nhập bằng Google và cho phép ứng dụng sử dụng API Thư viện Google Photos.
Sau đó, người dùng có thể tạo chuyến đi để tải ảnh lên kèm theo mô tả. Mỗi chuyến đi có thể được chia sẻ với các thành viên khác của ứng dụng, những người cũng có thể đóng góp ảnh.
Về cơ bản, mỗi chuyến đi được lưu trữ dưới dạng album được chia sẻ bên trong Google Photos. Ứng dụng xử lý việc chia sẻ và tải lên album này, nhưng bạn cũng có thể chia sẻ album với những người khác không có ứng dụng trực tiếp thông qua URL tới Google Photos.
Các bài viết liên quan:
Download source code Field Trip
Download source code cho bài này:
Để clone kho lưu trữ GitHub bằng lệnh, hãy sử dụng lệnh sau:
Bài mẫu này được sao chép vào một thư mục flaming-codelabs chứa code cho một bộ các bài. Code cho bài này là trong Flaming-codelabs / photos-sharing. Bạn cũng có thể xem thêm các bài khác trên GitHub.
Cấu trúc thư mục trong flay-codelabs / photos-sharing chứa các bước đầu tiên và bước cuối cùng. Code đang ở trạng thái ban đầu, vì vậy việc định vị các file bằng cách:
Nếu bạn muốn bỏ qua hoặc xem thứ gì đó sẽ trông như thế nào sau các bước, hãy tìm trong thư mục “final”, nó chứa code hoàn chỉnh cho bài này.
Chạy ứng dụng
Làm theo các bước sau để thiết lập môi trường phát triển của bạn, nếu bạn chưa từng phát triển bằng Flutter.
Để chạy ứng dụng “Field Trip”, hãy nhấp vào nút “run” trong IDE của bạn hoặc sử dụng lệnh sau từ thư mục gốc của mã nguồn:
Bạn sẽ thấy màn hình “Connect with Google Photos”:
Thiết lập Thư viện API Google Photos
API Thư viện Google Photos yêu cầu bạn xác thực người dùng của mình bằng OAuth 2.0. Người dùng đăng nhập vào ứng dụng và cho phép nó thay mặt họ tương tác với API.
Bạn có thể tìm thấy một số mẹo khắc phục sự cố bổ sung ở cuối bước này.
Tạo một dự án Firebase mới và đăng ký ứng dụng của bạn
Đi tới bảng điều khiển Firebase (https://console.firebase.google.com/u/0/?pli=1) và chọn “+ Add Project”. Nhập tên dự án và chọn “Continue” để tiếp tục. Không cần làm theo bất kỳ bước nào khác trong bảng điều khiển Firebase. Thay vào đó, hãy quay lại bài này và tiếp tục đến phần “Android” hoặc “iOS” bên dưới để định cấu hình ứng dụng.
Chỉ dành cho Android: Nếu bạn đang chạy ứng dụng trên Android, hãy đăng ký một ứng dụng Android:
Nhấp vào biểu tượng Android để mở màn hình đăng ký ứng dụng Android.
Đối với tên package, hãy nhập: com.google.codelab.photos.sharing
Lấy chứng chỉ ký SHA-1 từ máy của bạn:
Trên Windows, hãy chạy lệnh sau:
Trên Mac hoặc Linux, hãy chạy lệnh sau:
Sau đó ta dán mã SHA-1 vào trong firebase như sau:
Sau đó nhấp vào “Register app” để tiếp tục.
Tải tệp google-service.json xuống máy tính của bạn và chuyển tệp đó vào thư mục “android / app /”. (Mẹo: Trong Android Studio, bạn có thể kéo trực tiếp tệp đã tải xuống vào vị trí chính xác trong bảng điều khiển bên của dự án.)
Tệp này chứa cấu hình dự án cho dự án Firebase và Google Developers mà bạn vừa thiết lập.
(Xem tài liệu về gói google_sign_in để biết thêm chi tiết https://pub.dartlang.org/packages/google_sign_in.)
Bạn không phải hoàn thành bất kỳ bước nào khác trong bảng điều khiển Firebase. SDK Firebase đã được thêm vào ứng dụng.
Bật API Thư viện Google Photos
Ta mở trang này (https://console.developers.google.com/apis/library/photoslibrary.googleapis.com) và bấm enable. (Trước tiên, bạn có thể phải chọn dự án Firebase ở đầu màn hình nếu nút “enable” bị tắt.)
Mở API Thư viện Google Photos (https://console.developers.google.com/apis/credentials/consent) và chọn External. (Cấu hình này là bắt buộc để xem xét xác minh OAuth đối với bất kỳ phạm vi nào được API Thư viện Google Photos sử dụng.) Bạn không phải gửi để xác minh, nhưng bạn cần hoàn thành biểu mẫu và lưu phản hồi của mình. Điều này sẽ cho phép các phạm vi phát triển và thử nghiệm.
- Nhập “Application Name”, ví dụ: Field Trip
- Chọn một “Support email address”
- Chọn “Add scope”, sau đó “Manually add scopes” để nhập các phạm vi sau:
- Sau đó bấm “Update”
- Không cần phải gửi để xác minh để tiếp tục với bài này. Điều này chỉ được yêu cầu khi khởi chạy ứng dụng của bạn, nhưng không phải để thử nghiệm cá nhân.
Chạy ứng dụng và đăng nhập
Đăng nhập bằng Google đã được triển khai bằng cách sử dụng gói google_sign_in flashing. Gói này yêu cầu tệp google-services.json hoặc GoogleService-Info.plist mà bạn đã sao chép vào dự án.
Chạy lại ứng dụng bằng cách bấm Shift + R (Hot restart) và chọn “Connect with Google Photos”. Bạn sẽ được nhắc chọn tài khoản người dùng và chấp nhận phạm vi xác thực.
Nếu mọi thứ đã được thiết lập thành công, bạn sẽ thấy một danh sách trống trên màn hình tiếp theo.
Khắc phục sự cố khi đăng nhập
Nếu bạn gặp sự cố khi đăng nhập vào ứng dụng, đây là một số điều bạn có thể kiểm tra:
- Kiểm tra xem thiết bị có kết nối Internet không.
- Nếu bạn gặp lỗi PlatformException (sign_in_failed, com.google.android.gms.common.api.ApiException: 10:, null), hãy đảm bảo rằng bạn đã làm theo tất cả các bước trong phần Bật API Thư viện Google Photos. Bạn phải thêm phạm vi API Thư viện Google Photos, nhập địa chỉ email hỗ trợ và chọn lưusave
- Nếu bạn gặp lỗi PlatformException (sign_in_failed, com.google.android.gms.common.api.ApiException: 12500 :, null), hãy đảm bảo rằng bạn đã thêm địa chỉ email hỗ trợ trong bảng điều khiển Firebase. Mở bảng điều khiển Firebase và điều hướng đến cài đặt dự án bằng cách chọn biểu tượng bánh răng bên cạnh tiêu đề dự án của bạn. Chọn một địa chỉ email dưới email hỗ trợ trên màn hình cài đặt chung.
- Kiểm tra chứng chỉ ký SHA-1 được định cấu hình trong bảng điều khiển Firebase. Nó có khớp với đầu ra từ lệnh keytool từ bước đầu tiên không? Nó có khớp với đầu ra từ lệnh ./gradlew signReport khi chạy trong android / project không? Bạn cũng có thể cần bao gồm chứng chỉ ký SHA-256 trong bảng điều khiển.
- Kiểm tra tên gói và ID gói iOS được định cấu hình trong bảng điều khiển Firebase. Tên gói này phải được đặt thành com.google.codelab.photos.sharing
- Kiểm tra vị trí của các tệp cấu hình bạn đã tải xuống từ bảng điều khiển Firebase. Đối với Android, tệp phải được sao chép vào android / app / google-service.json. Đối với iOS, nó sẽ được thêm vào mô-đun Runner.
- Bạn có thể cần bật Google làm nhà cung cấp dịch vụ đăng nhập cho dự án Firebase của mình. Mở bảng điều khiển Firebase và điều hướng đến phương thức Xác thực và Đăng nhập. Đảm bảo rằng Google đã được bật.
Tạo một album
Trước khi bạn triển khai lệnh gọi API đầu tiên tới API Thư viện Google Photos, hãy cùng tìm hiểu kiến trúc dữ liệu mà ứng dụng “Field Trippa” sử dụng.
Kiến trúc ứng dụng
- Mỗi màn hình được triển khai dưới dạng một trang riêng biệt:
- PhotosLibraryApiModel mô tả mô hình dữ liệu của ứng dụng và tóm tắt các lệnh gọi API Thư viện Google Photos.
- Các lệnh gọi HTTPS REST tới API thư viện được triển khai trong PhotosLibraryApiClient. Mỗi cuộc gọi được cung cấp bởi lớp này có một đối tượng * Yêu cầu nơi bạn chỉ định các tham số và tùy chọn cho một cuộc gọi.
- API thư viện yêu cầu xác thực người dùng qua OAuth2. Mã truy cập bắt buộc phải có trong tất cả các lệnh gọi API được đặt trực tiếp bởi gói google_sign_in trên PhotosLibraryApiClient.
Triển khai lệnh gọi API tạo album
Mỗi chuyến đi được lưu trữ dưới dạng album trong Google Photos. Khi bạn chọn nút “CREATE A TRIP ALBUM”, bạn nên nhắc người dùng nhập tên chuyến đi và tạo một album mới với tên này làm tiêu đề.
Trong create_trip_page.dart, viết logic yêu cầu API Thư viện để tạo album. Triển khai phương thức _createTrip (…) ở cuối tệp để gọi PhotosLibraryApiModel với tên của chuyến đi mà người dùng đã nhập.
lib / pages / create_trip_page.dart
Triển khai lệnh gọi tới API để tạo album. Trong mô hình API, hãy triển khai phương thức createAlbum (…) lấy tiêu đề của album làm tham số. Nó thực hiện cuộc gọi đến PhotosLibraryApiClient nơi cuộc gọi REST thực sự được thực hiện.
lib / model / photos_library_api_model.dart
Triển khai lệnh gọi REST để tạo album trong photos_library_api_client.dart. Hãy nhớ rằng CreateAlbumRequest đã chứa thuộc tính title- bắt buộc cho lần gọi api này.
Phần sau mã hóa nó dưới dạng JSON và thêm các tiêu đề xác thực để cho phép yêu cầu. Cuối cùng, trả lại album được tạo bởi API.
lib / photos_library_api / photos_library_api_client.dart
Chỉ hiển thị các album ứng dụng của bạn
Bạn có thể nhận thấy rằng danh sách các chuyến đi hiển thị các album khác từ Google Photos mà không phải do ứng dụng của bạn tạo. (Nếu bạn không có bất kỳ album nào khác trong Google Photos và muốn xem hành vi này, hãy mở ứng dụng Google Photos và tạo một album. Tuy nhiên, điều này không bắt buộc phải tiếp tục trong bảng mã này.)
Hãy nhớ rằng mỗi chuyến đi được lưu trữ dưới dạng album trong Google Photos. Tuy nhiên, sẽ không hợp lý khi hiển thị bất kỳ album nào khác từ Google Photos đã được tạo thông qua các phương tiện khác – Field Trippa chỉ nên hiển thị các chuyến đi mà ứng dụng đã tạo.
Bạn có thể sử dụng API để hạn chế danh sách các chuyến đi được hiển thị để chỉ hiển thị những chuyến đi do ứng dụng tạo.
Sửa đổi phương thức listAlbums () method (không phải phương thức listSharedAlbums ()) trong photos_library_api_client.dart. Phương thức này thực hiện cuộc gọi REST để lấy danh sách các album. Thêm thông số ExclusiveeNonAppCreateData = true để hạn chế dữ liệu trả về để loại trừ các album không được tạo bởi ứng dụng này.
lib / photos_library_api / photos_library_api_client.dart
Tải lên ảnh
Bước tiếp theo là tải ảnh chuyến đi. Dữ liệu được lưu trữ trong tài khoản Google Photos của người dùng, vì vậy bạn không phải lo lắng về việc lưu trữ hoặc tự xử lý dữ liệu.
Chụp ảnh trong Flutter
Đầu tiên, thực hiện phương thức _getImage (…) trong hộp thoại thêm ảnh. Phương thức này được gọi khi người dùng nhấp vào nút “+ ADD PHOTO”.
Đoạn mã sau sử dụng gói image_picker để chụp ảnh, cập nhật giao diện người dùng và gọi mô hình API để tải ảnh lên. (Bạn sẽ triển khai điều này trong bước tiếp theo.) Lệnh gọi _getImage (…) lưu trữ mã thông báo tải lên cần thiết sau này để tạo ảnh trong Google Photos.
lib / components / Contrib_photo_dialog.dart
Triển khai lệnh gọi API Thư viện để tải hình ảnh lên để lấy upload token
Tải ảnh và video lên API thư viện được thực hiện theo hai bước:
- Tải lên các byte phương tiện để nhận thông báo token cần tải lên
- Tạo một mục phương tiện trong thư viện của người dùng từ token thông báo tải lên
Thực hiện yêu cầu REST để tải lên phương tiện. Bạn cần đặt một số tiêu đề để chỉ định loại yêu cầu tải lên và tên tệp. Trong file photos_library_api_client.dart, hãy triển khai phương thức uploadMediaItem (…) nơi file được tải lên, trả về upload token mà lệnh gọi HTTP trả về:
lib / photos_library_api / photos_library_api_client.dart
Tạo một mục phương tiện từ một upload token
Tiếp theo, thực hiện việc tạo một mục phương tiện trong thư viện của người dùng từ upload token.
Tạo một mục phương tiện yêu cầu mã thông báo tải lên, mô tả tùy chọn (ví dụ: chú thích của ảnh hoặc video) và số nhận dạng tùy chọn của một album. Field Trippa luôn thêm trực tiếp ảnh đã tải lên vào album chuyến đi.
b2f84ff91b0e1396.png Triển khai lệnh gọi đến photos_library_api_client gọi mediaItems.batchCreate với mã thông báo tải lên, mô tả và ID album. Trong mô hình API, hãy triển khai phương thức createMediaItem (…) gọi API Thư viện. Phương thức này trả về một mục phương tiện.
(Các photos_library_client cho lệnh gọi này đã được triển khai.)
lib / model / photos_library_api_model.dart
Chia sẻ album với những người không sử dụng ứng dụng
Cho đến nay, bạn đã triển khai chức năng tạo chuyến đi và tải ảnh lên kèm theo mô tả. Trong phần phụ trợ, mỗi chuyến đi được lưu trữ dưới dạng album trong Google Photos.
Tiếp theo, bạn sẽ chia sẻ chuyến đi với những người khác không sử dụng ứng dụng của bạn.
Mỗi chuyến đi được hỗ trợ bởi một album trong Google Photos, do đó bạn có thể ‘chia sẻ’ một album qua URL và cung cấp cho bất kỳ ai có URL này.
Thực hiện gọi chia sẻ album
Album được chia sẻ từ trang chuyến đi khi nhấn nút share ở đầu album.
Thực hiện lệnh gọi không đồng bộ _shareAlbum (…) gọi đến kiểu máy để chia sẻ album và sau đó tải lại album đã hiển thị. Bằng cách tải lại anbom, thuộc tính shareInfo được lan truyền có chứa shareableUrl mà bạn sẽ hiển thị cho người dùng trong hộp thoại sau này.
lib / pages / trip_page.dart
Triển khai phương thức _showShareableUrl (…) khi người dùng nhấp vào nút “SHARE WITH ANYONE” ở đầu trang. Trước tiên, hãy kiểm tra xem album đã được chia sẻ hay chưa và gọi phương thức _showUrlDialog (…) sau khi nó đã được chia sẻ.
lib / pages / trip_page.dart
Triển khai phương thức _showUrlDialog (…) để hiển thị URL có thể chia sẻ trong hộp thoại.
lib / pages / trip_page.dart
