In recent years, the concept of Serverless has been discussed by more and more developers in the technical circle. In any search, there are various questions such as “why front-end developers care about Serverless”, “Why is Serverless the future of the cloud? , “Serverless – front-end 3.0 era” and other articles, and cloud development as the pioneer of Serverless, has landed in small programs, Web, mobile applications and other scenarios, has been used by more than 500,000 developers, daily volume of 700 million times.

What is cloud development?

To put it in a word, cloud development is the cloud native integrated development environment and tool platform provided by Tencent Cloud, which provides developers with highly available, automatic elastic expansion and expansion of back-end cloud services, including computing, storage, hosting and other Serverless capabilities. Can be used for cloud integration development a variety of end applications (small procedures, the public, Web applications, because the client, etc.), to help developers build and management the back-end services and cloud resources, avoiding the tedious server builds in the process of application development in ops, developers can focus on the business logic implementation, development threshold is lower and more efficient. You can build a complete live app in a language you’re familiar with. Without further ado, follow this article with the aid of a simple backgammon game, to see how through the clever access of cloud development, into a game can be live online backgammon game, come to experience try, and can get a new skill it

Create a cloud development environment

3min

By the way, for new users, cloud development provides a free use of the environment for one month, but also provides a default domain name, you can rest assured to use continue to learn.

I. New [Pay-as-you-go Cloud Development Environment]

Enter theTencent Cloud development console – create environment, select the charging by volume environment. The environment name can be customized. Skip to the next step if you already have a pay-as-you-go environment.

Two, open static web hosting services

Enter theEnter the static site control page, select the environment created just now, open static web hosting services.

Create a database

Enter theDatabase control page, add 1 set; The collection name is gobang

4. Enable anonymous login

Enter theEnvironment Settings page – Login AuthorizationSelect Anonymous login

Download and deploy the source code

6min

Download the source code

accessMaking the warehouse, download the source code locally. The source project directory is as follows:

Two, local run

To run the project webviews/index.html in the form of HTTP, you can use IDE tools VScode, HBuilder. In the browser address bar, determine the URL address, for example, the domain name is 127.0.0.1:5500

3. Configure a locally developed secure domain name

If you want to perform local development, you must configure a local secure domain name in cloud development to enable normal debugging and development. Enter theEnvironment Settings page – Security ConfigurationTo configure the WEB security domain name, use 127.0.0.1:5500 as an example

Iv. Fill in the CLOUD development environment ID into the project

Cloud development determines data communication with a specific environment by environment ID, so you need to configure all relevant environment ids as your OWN ID in the project. (It is recommended to use the configuration file after you are familiar with it.)

  • Enter theEnvironment Overview pageTo obtain the ID of the cloud development environment.
  • Open the project directory and replace [Cloud development environment ID] in the following files with your own cloud development environment ID

    • Cloudfunctions gobangselete/index. Js line 3

    • Cloudbaserc. Js line 2

    • Cloud-index. js, cloud-show.js files under webviews/js, line 5

Local project development

10min

A, description,

Index.js and show.js under webviews/js are all local backgammon logic. In index.js, all the operations related to local backgammon are described, including board drawing, AI placement, monitoring placement, etc. Cloud-index. js is a plug-in support for cloud development.

For the code logic in cloud-index.js, please refer to the cloud development documentation to learn and understand.

Synchronize every move of backgammon to the database

The function start() in index.html is changed to the following code:

function start() {
    if (showid == null&&confirm('Is viewing mode enabled? Other people can see your game through the designated link! ')) {
        cloudinit();
    } else{ startgobang(); }}Copy the code

This code calls the Cloudinit function in cloud-index.js, performs an anonymous login, writes a document to the database, and updates the value of the database with each subsequent drop. The update triggers the updatecall function in cloud-index.js.

Use real-time database to monitor document changes

The show. HTML file is used to listen to the gobang board and synchronize updates. Add the following code to the script tag:

// We use Cloudinit to do initialization first and use database listening immediately after success
cloudinit(function(){
    var id = getQueryString().id;// Use show.js to get the address bar parameter ID
    const watcher = app.database().collection('gobang').doc(id).watch({
        onChange: function(snapshot){
            downcode(snapshot);
        },
        onError: function(err) {
            console.error('the watch closed because of error', err); }})});Copy the code

This code uses the cloud-developed database listener function to trigger onchange and call the downcode function to perform synchronous drawing when the data document changes.

Test project availability locally

5min

1. Restart the project and enter the page

Click “start”, it will prompt you whether to start sharing, and select “after” or “after” after confirming

Two, watch the chess game

If you click to start sharing, there will be a watch link at the bottom of the board

Click the link to jump to the Show page

Third, summary

If the local authentication is ok, the configuration is ok. If an error occurs in any of the steps, the F12 console looks at the error and removes the cause, which is usually caused by a miswritten environment ID.

Configure the periodic deletion of cloud functions

3min

A, description,

One remaining problem is that in the database, the failure to self-destruct after the game ends will result in more and more invalid records in the database. This record needs to be cleaned periodically.

2. Install dependencies

Under the cloudfunctions/gobangdelete right opens in the terminal

Enter the following command in terminal to install dependencies:

    npm i tcb-admin-node
Copy the code

Deploy cloud functions

In cloudfunctions/gobangdelete directory, right to perform the deployment of cloud function (upload all files). Login will appear at the beginning of use, follow the prompts to complete the login steps. If this option is not available, please go toCloud development VSCODE plug-inInstall and learn to use

Upload to static storage

2min

Upload locally validated items to static storage. Right-click in the Webviews directory and upload to the static site root directory

Enter theCloud development static site management page, you can see the uploaded projects.

Enter theCloud development static site setup page, access the default domain address to enter the online project

About custom domain name and website open to the public

1min

Cloud development provides a complete Web end resource service, but a web project for public use needs to have its own record domain name, which needs to be supervised. Therefore, before the official launch, you need to replace the default domain name provided by cloud development with the domain name you have recorded.

  • Go to the static website setting page of Cloud development, click add Domain name button under [Domain name Information], and fill in the registered domain name. The domain name needs SSL certificate, Tencent cloud domain name will automatically monitor the certificate; If the domain name is not under Tencent Cloud, you need to upload an SSL certificate.
  • You can configure the CNAME in domain name resolution only after the domain name is in started state.
  • Go to the Environment Settings page – Security Configuration, delete the default domain name of cloud development in the WEB security domain name, and keep only the custom domain name.
  • Cloudfunctions/functions provides/getFile/index, js AllowOriginList array, the default domain name change into a custom domain name, keep update.