Huawei AGC cloud storage service supports quick application integration. You can use the cloud storage service to store images, videos, and audio files. You can refer to Github for integrated demos.

1, Install node.js environment:

1. Download the Node.js installation package: nodejs.org/en/download…

2. Install Node.js on Windows

3. After the installation is complete, a CMD box will pop up asking you to automatically install the required plug-ins

Check whether NodeJS is configured in the PATH environment variable:

1, My computer – right-click properties – Select Advanced System Settings – Select Environment Variables – View System Variables

On the system variables screen, select Path to check whether there is an installed NodeJS Path:

2. View the NodeJS version. View the NPM version

3. Install the quick application IDE and configure the environment

1. Download and install the Fast Application IDE with the fast application loader

Developer.huawei.com/consumer/cn…

2. IDE operation: Create a quick application project in IDE:

3. Click Npm > to start the third-party Npm library. The IDE will automatically add fa-Toolkit and package.json to the project.

4. SDK integration

1. Download agconnect-services.json file and place it in the SRC directory

2. Run the NPM command to add cloudstorage dependencies: NPM install –save @agconnect/cloudstorage

3, Install dependencies, click IDE menu “Npm > Install dependencies”

5. Function development

A) Interface design and pre-steps

1. Add the system. Media dependency to the SRC /manifest.json file under features to obtain the local file

{
  "name": "system.media"
}
Copy the code

SRC /Hello/hello.ux add the login button and add the code for anonymous login:

3. Click IDE menu “File > New Page”, the page path is “Main”, the page file name is “Index”, add the interface layout.

The UI can be designed as shown below.

B) Create a reference

1, SRC /app.ux file, add compile dependency configuration and onCreate function initialization agC

<script>
import agconnect from "@agconnect/api";
  import "@agconnect/cloudstorage";
 
  module.exports = {
    onCreate() {
      console.info('Application onCreate');
      let agConnectConfig = require('./agconnect-services.json');
      agconnect.instance().configInstance(agConnectConfig);
    },
    onDestroy() {
      console.info('Application onDestroy');
    },
    dataApp: {
      localeData: {}
    },
    agc: agconnect
  }
</script>
Copy the code

C) Upload files

PutFile is the binding function of putFile button in the UI above, which can be adjusted according to its own design code.

putFile() { let that = this; media.pickFile({ success: function (data) { console.log("handling success: " + data.uri); let agconnect = that.$app.$def.agc; let ref = agconnect.cloudStorage().storageReference(); let path = that.currentPath + that.getName(data.uri); const child = ref.child(path); child.put4QuickApp(data.uri, { cacheControl: 'helloworld', contentDisposition: 'helloworld', contentEncoding: 'helloworld', contentLanguage: 'helloworld', contentType: 'helloworld', customMetadata: { hello: 'kitty' } }).then((res) => { that.result = JSON.stringify(res, null, "\t"); prompt.showToast({ message: `putFile success`, duration: 3500, gravity: 'center' }); })},Copy the code

D) Obtain the file list

GetList and getListAll are binding functions of the corresponding buttons in the UI, which can be adjusted according to their own design codes.

getList() { let agconnect = this.$app.$def.agc; let ref = agconnect.cloudStorage().storageReference(); let path = this.selected === '' ? this.currentPath : this.selected; const child = ref.child(path); child.list({ maxResults: 10 }).then((res) => { this.currentPath = path; this.selected = ''; this.setList(res); }) }, getListAll() { let agconnect = this.$app.$def.agc; let ref = agconnect.cloudStorage().storageReference(); let path = this.selected === '' ? this.currentPath : this.selected; const child = ref.child(path); child.listAll().then((res) => { this.currentPath = path; this.selected = ''; this.setList(res); })},Copy the code

E) Obtain the file download address

GetDownloadURL is the binding function of the corresponding button in the UI, which can be adjusted according to its own design code.

getDownloadURL() { if (this.selected === '' || this.selected.endsWith('/')) { prompt.showToast({ message: `only file can getDownloadURL`, duration: 3500, gravity: 'center' }); return; } let agconnect = this.$app.$def.agc; let ref = agconnect.cloudStorage().storageReference(); const child = ref.child(this.selected); child.getDownloadURL().then((res) => { this.result = res; prompt.showToast({ message: `getDownloadURL success`, duration: 3500, gravity: 'center' }); })}Copy the code

5. Phenomenon and Verification

Click Run in the middle of the quick application IDE to Run the quick application and see the corresponding effect on the right side

6, summary

The JS SDK before CloudStorage seamlessly supports Huawei Quick applications, providing more comprehensive coverage of multiple scenarios. In addition, the use of fast applications is convenient and fast, and the API interface is complete to meet various use situations.

Detailed development guide: developer.huawei.com/consumer/cn…

Cloud storage Quick application Demo:

Github.com/AppGalleryC…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism