華為AppGallery Connect提供了一個雲端儲存（CloudStorage）的服務，號稱提供了一個便捷的雲端儲存服務，應用開發者使用的時候，可以不用關注伺服器的部署，直接使用就行。

目前這個功能還在beta階段，我先搶先體驗了一下。

## 1、環境與應用資訊              
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2021011316124465.png)

AGC地址：[https://developer.huawei.com/consumer/cn/service/josp/agc/index.html](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html)

SDK整合方式：在Cocos Creator中開通整合

## 2、在AGC上開通雲端儲存:
PS： 雲端儲存服務目前還處於beta狀態，使用前應該發郵件去申請開通：

[https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-apply](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-apply)

在**我的專案** 下選擇你的開發專案，在構建下面，找到雲端儲存服務，點選開通：

沒有Android專案的話，可以先自己建立一個。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161308161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

開通服務的時候，需要先配置儲存例項，這裡按需配置就可以，我就隨便配置一個。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161316108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

下一步，還需要配置安全策略，這裡使用預設的安全策略就好:

PS：預設的情況是，只有經過身份認證的使用者才能進行讀寫。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161321729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

##  3、在Cocos Creator專案整合SDK
#### 3.1 整合SDK
官方文件：[https://docs.cocos.com/creator/manual/zh/cocos-service/agc-applinking.html](https://docs.cocos.com/creator/manual/zh/cocos-service/agc-applinking.html)

（1）在 Cocos 服務皮膚接入所需的雲端儲存服務。目前 SDK 僅支援 Android 平臺

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161329200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

（2）接入相關的服務前，需要先關聯APP，在服務介面點選啟用後，再點選 關聯 按鈕，點選建立後，會跳轉到Cocos的管理臺，

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161333979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

（3）可以根據個人需要建立一個新遊戲

（4）建立完成後，就可以回到Cocos Creator介面新建，重新整理和選擇進行應用的關聯，
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161339274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

（5）然後就可以回到雲端儲存介面，可以正式進行服務的開通了
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161346756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

（6）服務開通以後，需要配置預設的儲存例項，此處需要填寫AGC介面上的已經開通雲端儲存的專案的預設桶。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161350557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 3.2 下載json檔案
（1） 服務開通以後，回到專案設定介面，下載最新的json檔案。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161355765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

（2）將剛下載好json檔案，放到Cocos專案的settings目錄下

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161400389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

## 4、前置步驟
#### 4.1 修改安全規則

預設的安全規則下，需要經過華為認證的使用者，才能進行雲端儲存檔案操作。

為了整合方便，特地修改雲端儲存的安全規則，**將安全規則修改為全部允許**，此時無需經過華為認證，就可以對雲端儲存中的檔案進行操作。

```java
// 全部允許 
agc.cloud.storage[
   match: /{bucket}/{path=**} {
      allow read, write:  if true;
   }
]
```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161408162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 4.2 介面佈局

在Cocos Creator上設定幾個按鈕，透過點選按鈕來實現功能：包括例舉檔案，上傳，下載檔案，和刪除檔案的按鈕。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2021011316145451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

## 5、      功能開發：

#### 5.1 初始化，並且在Start中建立監聽

```java
start () {      
        this._storage = huawei.agc.storage;
                 this._storage.storageService.on("error", data => console.log("Cloud Storage", `error : ${data.errCode}:${data.errMsg}`), this);
                 this._storage.storageService.on("get-file-metadata", data => console.log("Cloud Storage", JSON.stringify(data)), this);
                 this._storage.storageService.on("update-file-metadata", data => console.log("Cloud Storage", JSON.stringify(data)), this);
                 this._storage.storageService.on("delete-file", data => console.log("Cloud Storage", JSON.stringify(data)), this);
                 this._storage.storageService.on("list-file", data => console.log("Cloud Storage", JSON.stringify(data)), this);
                 this._storage.storageService.on("get-download-url", data => console.log("Cloud Storage", JSON.stringify(data)), this);
                 this._storage.storageService.on("task", data => {
                         console.log("Cloud Storage", JSON.stringify(data));
                         if (data.task instanceof this._storage.AGCDownloadTask && data.status === 'successful') {
                                  jsb.fileUtils.renameFile(jsb.fileUtils.getWritablePath() + "/output.json", jsb.fileUtils.getWritablePath() + "/output1.json");
                         }
                 }, this);
                 // 建立根目錄的引用
                 this.rootReference = huawei.agc.storage.storageService.getInstance().getStorageReference();
    },
```

#### 5.2 例舉檔案

使用ListALL方法，例舉所有檔案：

```java
listAll:function () {
    this.rootReference.listAll();
    console.log('Cloud Storage', 'ListAll file');
}
```

#### 5.3 下載檔案

下載一個雲端的，名為test.jpg的檔案，並且重新命名為test1.jpg。

```java
download:function () {
// 先 delete 檔案，避免檔案已存在導致下載失敗
jsb.fileUtils.removeFile(jsb.fileUtils.getWritablePath() + "/test.jpg");
this.rootReference.child("test.jpg").getFile(jsb.fileUtils.getWritablePath() + "/test1.jpg");
console.log('Cloud Storage', 'download test.jpg, and reNamed test1.jpg');
},
```

#### 5.4 上傳檔案

上傳剛剛下載的test1.jpg檔案

```java
 upload:function () {
                 if (!jsb.fileUtils.isFileExist(jsb.fileUtils.getWritablePath() + "/test1.jpg")) {
                         return console.log('Cloud Storage', 'local file test1.jpg not exist, please click Download!')
                 }
        this.rootReference.child("test1.jpg").putFile(jsb.fileUtils.getWritablePath() + "/test1.jpg");
        console.log('Cloud Storage', 'upload test1.jpg');
    },
```

#### 5.5 刪除檔案

刪除本地的，以及雲端的test1.jpg檔案。

```java
 delete:function () {
        this.rootReference.child("test1.jpg").delete();
        console.log('Cloud Storage', 'delete test1.jpg success!')
                 jsb.fileUtils.removeFile(jsb.fileUtils.getWritablePath() + "/test1.jpg");
        },
```

## 6、打包測試：

使用Cocos creator的build，打包一個Android檔案，並且安裝到裝置上，驗證功能點是否正確。

android:allowBackup="false"

注意打包的時候，如果API選擇的是android-30，則需要把AndroidManifest檔案中的android:allowBackup屬性，修改為false。

#### 6.1 例舉檔案
點選ListALL按鈕，在Logcat中檢視所有列舉的檔案：在日誌中篩選檢視Cloud Storage，檢視結果
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161507479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 6.2 下載檔案

點選download按鈕，在日誌中檢視下載結果：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161512537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 6.3 上傳檔案

點選Upload按鈕，在日誌中檢視下載結果：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161517509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

此時在AGC介面上，也可以看到剛剛上傳的test1.jpg檔案
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161525621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 6.4 刪除檔案

點選delete按鈕，在日誌中檢視下載結果：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113162151651.png)

此時在AGC介面上，也可以剛剛上傳的test1.jpg檔案已經被刪除

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210113161542225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

## 7、總結
僅關注前端應用的開發，就可以在Cocos上開發一個帶雲端儲存服務功能的遊戲。再也不用為了伺服器的搭建和運維擔心，省時省力。而且還提供了類似於管理員模式的web控制檯，可以簡單直觀的對伺服器上的檔案進行管理。

這個雲端儲存服務，除了最普通的上傳下載和刪除功能，還包括有設定後設資料等功能，具體可以看官方文件：

欲瞭解更多詳情，請參見：

雲端儲存服務開發指南：

[https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-introduction](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-introduction)

Cocos關於雲端儲存的文件：
[https://docs.cocos.com/creator/manual/zh/cocos-service/agc-cloudstorage.html](https://docs.cocos.com/creator/manual/zh/cocos-service/agc-cloudstorage.html)

---
原文連結：
[https://developer.huawei.com/consumer/cn/forum/topic/0201419625098590546?fid=0101271690375130218](https://developer.huawei.com/consumer/cn/forum/topic/0201419625098590546?fid=0101271690375130218)
作者：Jessyyyyy

Cocos|快速整合華為AGC雲端儲存服務

相關文章