At the end of Part 8, we talk about the Cloud All-in-One model, and here's some real-world work.

The first way, in front-end development mode, we typically make requests directly to the back end (cloud function) through Ajax, and then the back-end operates the database and cloud storage.
Cloud Development Talk about cloud-end development models

This development approach has been run for many years, and when cloud functions appear, they can be used instead of server environments.

The second approach is to combine the benefits of the end and cloud, as shown in the following image:

Cloud Development Talk about cloud-end development models

We can integrate cloud-developed SDKs in the client, make requests directly for databases, cloud storage, and so on, callFunction so that we don't have to turn on HTTP requests for cloud functions. S o the entire application architecture, it is recommended to take this scenario in combination.

Stick the code first to see the effect

Step 1: Create a collection (table) in the console Database module: test-js-sdk
Because the following demo uses the JS-SDK to insert and read data directly into the database on the front page, the first step is to build a collection, which is to build a table.

Step 2: Create an html file and copy the following code to save, such as the file named web-demo .html. A lso replace the environment ID with your own in the console.

<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    Hello 云开发! <br/>
    Hello Serverless! <br/>
    Hello 云计算! <br/>
    <script src="https://imgcache.qq.com/qcloud/tcbjs/1.6.1/tcb.js" rel="external nofollow" ></script>
    <script>
      let app = tcb.init({ env: '你的环境 ID'})
      let auth = app.auth()
      let db = app.database()
      //匿名登录
      //用于演示作用
      async function login(){
        await auth.signInAnonymously()
        const loginState = await auth.getLoginState()
        //为 true 表示登录成功
        console.log(loginState.isAnonymous)
      }
      login()
      //向数据库插入一条数据
      db.collection("test-js-sdk")
          .add({
            text: 'Hello 云计算',
            due: new Date()
          }).then(res => {
              //res 返回插入数据的  id和 requestId  
              console.log(res)
              //读取刚插入的数据
              db.collection("test-js-sdk").doc(res.id).get().then(res=>{
                console.log(res.data)
              })
            })
    </script>
  </body>
</html>

Step 3: Upload a file to a static hosting, and you can actually turn on a localhost static server locally. T he purpose here is to configure the secure domain name (for cross-domain access) in step 3.

Cloud Development Talk about cloud-end development models

Step 4: Set up a secure domain name, add a static hosted domain name by default in your environment, so you can access it directly, or if you have a static server locally, you can add a domain name, as shown in the following image.

Cloud Development Talk about cloud-end development models

Step 5: Open the page to verify the effect
If the file is uploaded to a statically hosted root, it is the access path to the 静态托管默认域名/web-demo.html such as here:

https://open-cloud-5d89b0-1300954686.tcloudbaseapp.com/web-demo.html

You can also click on the web-demo to see the effect, as shown below.

Cloud Development Talk about cloud-end development models

This case can clearly see that without the use of cloud functions, direct use of JS-SDK can insert data into the database, can also read data, of course, can also upload/delete files, and of course, can also use the cloud function - callFunction directly trigger cloud functions. Is the cloud-based integrated model cooler?

Code interpretation

The introduction of the JS-SDK through the CDN is well understood and can be installed via NPM.

Sign-in rights

The auth module is used here to turn on authorization and also provides a user management module that can be viewed in the console User Management module.

let app = tcb.init({ env: '你的环境 ID'})
let auth = app.auth()

There are currently 4 ways to sign in:

Insert and read data

Use db.collection("test-js-sdk") to get a reference to the collection directly, and then use the add method, which is not much like a database CRUD, except that the code is running in the browser.

let db = app.database()
db.collection("test-js-sdk")
  .add({
    text: 'Hello 云计算',
    due: new Date()
  }).then(res => {
    //res 返回插入数据的  id和 requestId  
    console.log(res)
  })

The doc method is also used to read one data, and if it is multiple, you can use the where query criteria query.

db.collection("test-js-sdk").doc(res.id).get().then(res=>{
  console.log(res.data)
})

Therefore, depending on the application, the opening of a secure domain name, such as some database writes can be placed in the cloud function, read operations can be carried out in the browser.

Cloud Development Talk about cloud-end development models

Table of contents

Stick the code first to see the effect

Code interpretation

Sign-in rights

Insert and read data

Appendix

Cookie Consent