background

TodoList app is a quick start app for students with zero foundation. You can localize TodoList in one line of code, and if you want to synchronize your Todo data over the network and share it in real time across multiple devices, cloud development builds in 100 lines.

Experience address: acc.cloudbase. VIP /todo/

This project is suitable for zero-base user experience, through a certain modular means of intensive overall coding. If you want to further study, please master js, HTML, CSS and other programming technologies, and independently analyze the code in the module (all are beginner native code).

If you don’t want to go through the following steps, you can just click the button below to deploy

First, build localized TodoList

Create a text file anywhere on the local PC and fill it with the following content:

<script src="https://acc.cloudbase.vip/todo/src/todo.js" 

charset="utf-8"></script>
Copy the code

Save and change the suffix to HTML and name it index.html.

Use a browser to open the HTML file. If the browser displays the following information, it is normal.

Thus, you have built a localized Todo application in one line of code. Through this application, you can enter to add a todo, you can also check completed, modify the content of the item, delete the item; The to-do list remains when the page closes and loads again.

Publish local TodoList for others to use

We only built the application site locally. How do we share the application with others?

We need to publish the application site to the cloud development static web hosting

Open the cloud development console and create a pay-as-you-go billing environment (skip this step if you already have a pay-as-you-go billing environment)

After the pay-as-you-go billing environment is created, the static web hosting service is generally automatically opened. If not, click Open.

Click Upload file and select upload from index.html in the previous step

After uploading, click [Default domain name] in the above configuration information to access the Todo application website in the public network environment.

The default domain name allows you to quickly authenticate services. If you need to formally provide website services, bind the domain name that you have recorded.

3. Build background services for Todo applications

The single application website realized by the above line of code can only be Todo recorded locally, and synchronization cannot be achieved when the device is changed. Next, we will build the background service to achieve synchronization requirements.

Open the cloud development console, find the environment of the previous step, open the database, and create a new TODO collection, as shown below:

Open environment – Login authorization, open email login, as shown below:

After this function is enabled, click “Configure Sender” on the right, refer to configuring QQ Mailbox for configuration.

Then, click “Application Configuration” on the right and fill in the application name, as shown in the picture below

After the configuration is complete, copy and save your cloud environment ID and fill it in the code below

Open the previously locally built index.html and fill it in as follows

<script src="https://acc.cloudbase.vip/todo/src/todo.js" charset="utf-8"></script>
<script src="https://acc.cloudbase.vip/todo/src/login_util.js" charset="utf-8"></script>
<script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script>
<script>
  let uid = null;
  const app = tcb.init({
    env: "Replace your own cloud development environment ID"
  })
  const auth = app.auth({
    persistence: "local"
  });
  const db = app.database();
  window.onload = function () {
    LO.init();
    TODO.init();
  }
  LO.Done = function () {
    uid = app.auth().hasLoginState().user.uid;
    db.collection('todo').doc(uid).get().then(res= > {
      if (res.data.length == 0) {
        db.collection('todo').add({
          _id: uid,
          list: TODO.todo,
          time: new Date()
        }).then(res= > {
          console.log(res); watchtodo(); })}else {
        console.log(res);
        TODO.todo = res.data[0].list;
        TODO.todoinit();
        watchtodo();
      }
    })
    app.callFunction({
      name:'todo_getNumber'
    }).then(res= >{
      document.getElementById('model').innerHTML+=` < p class = 'bottom - des' > altogether${res.result}People use cloud development TODO</p> '
    })
  }
  TODO.itemChange = function (id, type, des) {
    if (type === 'add') {
      if(des ! =null) {
        app.uploadFile({
          cloudPath: `todo/${uid}/${TODO.todo[id].file}`.filePath: des
        }).then((result) = > {
          console.log(result)
          TODO.todo[id].file = result.fileID
          updatetodo()
        });
      } else {
        updatetodo()
      }
    } else if (type === 'delete') {
      if(TODO.todo[id].file ! =null) {
        app.deleteFile({
          fileList: [TODO.todo[id].file]
        }).then((result) = > {
          delete TODO.todo[id]
          console.log(result)
          updatetodo()
        });
      } else {
        delete TODO.todo[id]
        updatetodo()
      }
    } else {
      updatetodo()
    }
  }
  TODO.downLoadfile = function (file) {
    app.downloadFile({
      fileID: file
    })
  }
  function updatetodo() {
    db.collection('todo').doc(uid).update({
      list: db.command.set(TODO.todo),
      time: new Date()
    }).then(res= > {
    }).catch(e= > {
      console.log(e); })}function watchtodo() {
    db.collection('todo').where({ _id: uid }).watch({
      onChange: (snapshot) = > {
        if(snapshot.msgType ! ="INIT_EVENT") {
          TODO.todo = snapshot.docs[0].list; TODO.todoinit(); }},onError: (error) = > {
        alert('Remote database listening failed! '); }}); }</script>
Copy the code

Save the file, re-upload to static web hosting, and a Todo application with backend services is built. Still open the [default domain] in the configuration information (if there is a cache, you can add? After the link). 123 or other random number), as shown in the figure below:

The login module in the application automatically displays the login box. If you enter the email address and password, you will directly send the registration email.

At this point, go to the mailbox to check the registered mail, as shown in the picture below:

Click the verification link to jump to the cloud development verification page. After successful verification, the following display will be displayed:

10 seconds later, the button becomes clickable. Click login to successfully log in, and the login box disappears.

After that, you can log in using your email address and password.

If you want to show how many people use the TODO application, upload the todo_getNumber folder in the project directory functions as a cloud function

Write in the last

The actual combat project through modular construction, directly highlight the development steps of cloud development, more intuitive. If you want to explore the contents of the Todo module, you can unzip and read the code yourself.

Login_util module, a simple login plug-in built by the author, can realize simple login operations and provide custom methods. The default is the email login mode developed by cloud. Therefore, ensure that email login is correctly configured and enabled when there is no customization.

Todo.js exposed interface:

TODO.todo;             // Todo content json, can be directly changed according to the rules
TODO.todoinit();                    // Refresh the to-do list
TODO.itemChange(id,type,des);  // Listen for to-do list changes [ID, type, description]
TODO.downLoadfile(file)             // The todo list file can be modified at upload time
Copy the code

Login_util simple login window plugin, default email login, leak interface:

LO.custom                         // Whether to customize the login method. The default value is false for email login
  LO.init()                         // Initialize the method call to open the login box, the default mail login will be automatically determined, if the login is triggered LO. Done (), do not initialize the login box
  LO.done()                         // Triggered when the login is complete, the default login is available, but the customization is invalid
  LO.close()                        // Close the login box
  LO.onClose()                      // The listener is closed
  LO.onLogin(obj)                   // Listen on the login button, lo. custom=true to take effect
  LO.setBtn(text,disable)           // Set the login button
  LO.setDes(text,style)             // Set description
Copy the code

Product introduction

Cloud Development (TCB) is a cloud native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with highly available, automatic and flexible expansion of back-end cloud services, including computing, storage, hosting and other serverless capabilities, which can be used for cloud integrated development of various end applications (small programs, Public account, Web application, Flutter client, etc.) to help developers build and manage back-end services and cloud resources in a unified manner, avoiding tedious server construction, operation and maintenance during application development. Developers can focus on the implementation of business logic, with lower development threshold and higher efficiency.

Open cloud development: console.cloud.tencent.com/tcb?tdl_anc…

The product documentation: cloud.tencent.com/product/tcb…

Technical documentation: Cloudbase.net? From =10004

Technical exchange plus Q group: 601134960

Latest news follow wechat official account [Tencent Yunyun Development]