Overview

Cloud Storage is scalable and maintenance-free. By integrating the Cloud Storage SDK, you can store high volumes of data such as image, audio, and video files generated by your users to the cloud or download these data from the cloud.

What You Will Create

In this codelab, you will create an app that integrates Cloud Storage capabilities. Your app will allow users to query and delete files by calling APIs.

What You Will Learn

Development Environment and Skill Requirements

Device Requirements

An iPhone or a simulator for testing

To integrate Cloud Storage of AppGallery Connect, you must complete the following preparations:

Before integrating the Cloud Storage SDK, you need to enable Cloud Storage in AppGallery Connect.

  1. Sign in to AppGallery Connect and click My projects.
  2. Click the project for which you need to enable Cloud Storage.
  3. Go to Build > Cloud Storage. On the Cloud Storage page, click Enable now.
  4. Enter a storage instance name and select the default data processing location.
  5. Click Next and view the default security rules.
  6. Click Finish.

You need to integrate the Cloud Storage SDK into your Xcode project with CocoaPods.

  1. Sign in to AppGallery Connect and click My projects.
  2. Click your project card and select an app for SDK integration from the app drop-down list on the top.
  3. Go to Project settings > General information. In the App information area, download the agconnect-services.plist file.
  4. Copy the agconnect-services.plist file to your project.
  5. Open the CLI and navigate to the location of the Xcode project. Then, create a Podfile. Skip this step if a Podfile already exists.
    cd project-directory pod init
  6. Add the AGConnectStorage and AGConnectAuth pods to the Podfile.
    target 'AGC-Storage-2' do pod 'AGConnectStorage' pod 'AGConnectAuth' end
  7. Install the pods and open the .xcworkspace file to view the project.
    pod install

    The following figure shows the result after installation.

  1. Create a layout page in the iOS project and add three buttons and a label to this page.
    let resultLabel = UILabel(frame: CGRect(x: 60, y: 150, width: 300, height: 60)) override func viewDidLoad() { super.viewDidLoad() let signInButton = UIButton(frame: CGRect(x: 50, y: 80, width: 220, height: 50)) signInButton.backgroundColor = UIColor.blue signInButton.setTitle("Sign In", for: .normal) signInButton.addTarget(self, action: #selector(signInAnonymously), for: .touchUpInside) self.view.addSubview(signInButton) resultLabel.textColor = UIColor.darkGray self.view.addSubview(resultLabel) let uploadFileButton = UIButton(frame: CGRect(x: 50, y: 250, width: 220, height: 50)) uploadFileButton.backgroundColor = UIColor.blue uploadFileButton.setTitle("Upload File", for: .normal) uploadFileButton.addTarget(self, action: #selector(uploadFile), for: .touchUpInside) self.view.addSubview(uploadFileButton) let deleteFileButton = UIButton(frame: CGRect(x: 50, y: 320, width: 220, height: 50)) deleteFileButton.backgroundColor = UIColor.blue deleteFileButton.setTitle("Delete File", for: .normal) deleteFileButton.addTarget(self, action: #selector(deleteFile), for: .touchUpInside) self.view.addSubview(deleteFileButton) }
  2. Add the following buttons and label:
    • Sign In: triggers sign-in.
    • Upload File: uploads images.
    • Delete File: deletes a file.
    • Label: displays the results of triggering the previous buttons.
  3. Design the UI as follows.

The sample code in this codelab uses the anonymous sign-in mode. Therefore, you need to enable anonymous authentication of Auth Service in AppGallery Connect. Otherwise, sign-in fails.

  1. Sign in to AppGallery Connect and click My projects.
  2. Find and click your project.
  3. Go to Build > Auth Service. If it is the first time that you use Auth Service, click Enable now.
  4. Click the Authentication mode tab and click Enable in the Operation column for Anonymous account.
  5. Call the corresponding methods of Auth Service in the project. The sample code for anonymous authentication is as follows (before using Cloud Storage functions, ensure that anonymous sign-in is successful):
    AGCAuth.instance().signInAnonymously().onSuccess { (result) in self.resultLabel.text = "agc sign inanonymously success." }.onFailure { (error) in self.resultLabel.text = "agc sign inanonymously failed." }

You can call related APIs of the Cloud Storage SDK to develop functions.

  1. Import AGConnectCore to the AppDelegate class of the app, and call AGCInstance.startUp in the didFinishLaunchingWithOptions method for initialization.
    import AGConnectCore func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { AGCInstance.startUp() return true }
  2. Call the AGCStorage.getInstanceForBucketName method to initialize a storage instance before your app uses any Cloud Storage functions.
    var storage = AGCStorage.getInstanceForBucketName("codelab-test-wne6b")
  3. Tap Upload File. The uploadFile method is called to upload a file to the cloud.
    @objc func uploadFile() { let storageReference = storage.reference(withPath: "test1.jpg") let dirPath = NSSearchPathForDirectoriesInDomains(FileManager.SearchPathDirectory.documentDirectory, FileManager.SearchPathDomainMask.userDomainMask, true).first; print(dirPath ?? "dirPath error") let filePath = dirPath!.appending("/test1.jpg") let task = storageReference.uploadFile(URL.init(fileURLWithPath: filePath)) task?.onSuccess(callback: { (result) in self.resultLabel.text = "uploadFile success." }).onFailure(callback: { (error) in self.resultLabel.text = "uploadFile failed." }) }
  4. Tap Delete File. The deleteFile method is called to delete the uploaded file from the cloud.
    @objc func deleteFile() { let storageReference = storage.reference(withPath: "test1.jpg") let task = storageReference.deleteFile() task.onSuccess(callback: { (result) in self.resultLabel.text = "deleteFile success." }).onFailure(callback: { (error) in self.resultLabel.text = "deleteFile failed." }) }
  1. Start Xcode and click the run button to run your app on a mobile phone or simulator.
  2. Tap Sign In. After the sign-in is successful, you can perform operations in Cloud Storage.
  3. Place an image named test1.jpg in the Documents folder under a sandbox.

    Tap Upload File to upload an image.

    Go to Cloud Storage > Files to view the uploaded image.

  4. Tap Delete File to delete the uploaded test1.jpg. You will not find it under Cloud Storage > Files.

Well done. You have successfully built an app that integrates Cloud Storage of AppGallery Connect and learned how to manage data on the Cloud Storage page in AppGallery Connect.

Code copied